Practice - 切版01

In this example below you will see how to do a Practice - 切版01 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by LepPerson, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright LepPerson ©
  • HTML
  • CSS
  • JavaScript
    //
	參考版型:https://dribbble.com/shots/2262761-Mobile-Blog-App-Interface/attachments/424147

.cards
	.card.cover
		.cv-text
			h4.author 林昱帆 何欣潔
			h1.title 眾神
				br
				| 凱道進香記:
				br
				| 宮廟如何
				br
				| 「串聯」彼此
				br
				| 到總統府遊行?
			button(onclick="window.open('https://theinitium.com/article/no-incense-stick/')") 繼續閱讀
		.slidebar
			button 關閉
			.circles
				.circle.on
				.circle
				.circle
				.circle.m0
			//- i.far.fa-comment
			img(src="https://cdn2.iconfinder.com/data/icons/lightly-icons/30/chat-480.png", alt="")
	.card.content
		.text
			p 7
			p 月23日正午,烈日當空,來自全台超過萬名信眾、60頂神轎集結在中正紀念堂廣場,進行全台第一遭「捍衛信仰、守護香火」大遊行。還未到出發時刻,鑼鼓炮聲便此起彼落,原該只出現在鄉村路頭路尾的宗教科儀,首次在台北市的繁華的信義路上「遶境」而行。一路上,眾人似示威、似廟會,又似一場宗教嘉年華會;抵達凱道終點時,雖然遠方僅有總統府、沒有宮廟。
			p 這是台灣史上第一次由宮廟自主串聯的大遊行,也是傳統宗教第一次以遊行方式向總統府喊出「捍衛信仰」訴求。
		.slidebar
			button 關閉
			.circles
				.circle
				.circle.on
				.circle
				.circle.m0
			//- i.far.fa-comment
			img(src="https://cdn2.iconfinder.com/data/icons/lightly-icons/30/chat-480.png", alt="")
	.card.comments
		.cm-bar
			.cm-count 評論 (6)
			.cm-close ✕
		.comment
			.photo.photo1
			.cm-content
				h4.name 汀蘭
				p.dot •
				p.time 2 小時前
				p.cm-text 這篇對平時沒有在接觸宗教的人來說非常清楚好懂,推!
		.comment
			.photo.photo2
				img(src="", alt="")
			.cm-content
				h4.name ichun
				p.dot •
				p.time 6 小時前
				p.cm-text 這篇很清楚的點出宮廟方的訴求與其後的一些社會及文化脈絡,對於來自。
		.comment
			.photo.photo3
				img(src="", alt="")
			.cm-content
				h4.name imissdebby
				p.dot •
				p.time 昨天
				p.cm-text 可能因為我未讀其他媒體關於這件事的報導,我覺得這篇很清楚點明了為什麼宮廟號召力這麼強的原因。
		.comment
			.photo.photo4
				img(src="", alt="")
			.cm-content
				h4.name 藏鋒
				p.dot •
				p.time 3 天前
				p.cm-text 外人写台湾,也许是旁观者清;但更有可能变成隔靴搔痒。拎一个新角。

/*Downloaded from https://www.codeseek.co/LepPerson/practice-andx5207andx724801-BYJWbZ */
    *
	// border: 0.1px solid #000 !important
	box-sizing: border-box
	position: relative
	// font-family: "Crimson Text", "Source Han Serif TC", serif

html, body
	/* 外層的高若用 vh,便可讓內層的高的 % 參照(我似乎搞錯了) */
	/* 如此可使 cards 垂直水平置中(我似乎搞錯了) */
	// height: 100vh
	// height: 100%
	// width: 100vw
	background-color: #dbe2ec

html
	font-size: 10px

body
	padding: 104px 96px
	// font-family: "Crimson Text", "Source Han Serif TC", serif

.cards
	/* 參照 body 的 vh 高(我似乎搞錯了) */
	// height: 100%
	width: 1026px
	height: 422px

.card
	/* 64*3/2=96,三個 card 因此可以間隔 48px,並剛好等寬塞滿 cards */
	width: calc(100% / 3 - 64px)
	/* 可參照 cards 的 % 高,因為 body 的高是 vh(我似乎搞錯了) */
	height: 100%
	display: inline-block
	padding: 26px
	box-shadow: 0 0 20px rgba(#000,0.1)

.cover
	float: left
	background-image: url(https://d32kak7w9u5ewj.cloudfront.net/media/image/2017/07/e2abc31dd42d45ca86d53a52c78042a9.jpg?imageView2/1/w/1080/h/720/format/jpg)
	background-size: cover
	background-position: 96%
	background-color: rgba(#000,0.32)
	background-blend-mode: multiply
	& .cv-text
		top: 26%
		color: #fff
		width: 152px
		letter-spacing: 1.6px
		font-family: "Noto Sans TC", sans-serif
		& h4
			font-size: 1rem
			font-weight: 100
			margin-bottom: 12px
		& h1
			font-size: 2rem
			line-height: 3.2rem
			font-weight: 500
		& button
			padding: 0.6rem 1rem
			top: 34px
			border-radius: 1px
			background-color: #fff

.content
	margin-left: 96px
	margin-right: 96px
	background-color: #f8f9fa
	& .text
		width: 100%
		& p
			font-family: "Crimson Text", "Source Han Serif TC", serif
			font-size: 1.2rem
			line-height: 2.4rem
			text-align: justify
			color: #6b727b
			letter-spacing: 0.4px
			&:nth-child(1)
				float: left
				line-height: 0.72
				font-size: 8rem
				margin-bottom: 12px
				margin-right: 8px
				color: #2c3137
			&:nth-child(2)
				margin-bottom: 2.2rem

.cm-bar
	// position: absolute
	width: 100%
	height: 44px
	// left: 0
	// top: 0
	// padding: 0px 26px
	margin-top: -26px
	margin-bottom: 1rem
	& *
		display: inline-block
		top: 50%
		font-family: Roboto, "Noto Sans TC", sans-serif
		font-size: 1rem
		letter-spacing: 1.2px
		font-weight: 500
		color: #2c3137
	& .cm-count
		left: 50%
		transform: translate(-50%,-50%)
	& .cm-close
		float: right
		transform: translateY(-50%)
		font-size: 1.2rem
		font-weight: 700
		cursor: pointer
	
.comments
	float: right
	background-color: #fff

.comment
	// height: 25%
	font-family: "Crimson Text", "Source Han Serif TC", serif
	font-size: 1rem
	text-align: justify
	color: #2c3137
	// margin-bottom: 2.2rem
	& .cm-content
		display: inline-block
		width: calc(100% - 44px)
		float: left
		margin-bottom: 2.5rem
		letter-spacing: 0.4px
	& .name, .time, .dot
		display: inline-block
		margin-bottom: 0.8rem
	& .cm-text
		line-height: 1.8rem
		color: #70777f
	& .name
		color: #2c3137
		font-weight: 600
	& .dot
		font-size: 1.2rem
		margin: 0px 6px
		color: #acadaf
	& .time
		color: #acadaf

.photo
	float: left
	width: 32px
	height: 32px
	border-radius: 50%
	display: inline-block
	margin-right: 12px
	vertical-align: top
	&.photo1
		background-image: url(https://scontent.ftpe7-3.fna.fbcdn.net/v/t1.0-9/11846686_870110789749641_1356603676127532615_n.jpg?_nc_fx=ftpe7-2&oh=f72c3e2073b973a99bb540128285c87a&oe=5B060842)
		background-size: 170%
		background-position: 46% 7.2%
	&.photo2
		background-image: url(https://scontent.ftpe7-4.fna.fbcdn.net/v/t1.0-9/24993340_1568137546612502_5599697987955665700_n.jpg?_nc_fx=ftpe7-2&oh=1e231bc3e14f35436185f721500d19ca&oe=5B0F530E)
		background-size: 180%
		background-position: 100% -40%
	&.photo3
		background-image: url(https://scontent.ftpe7-2.fna.fbcdn.net/v/t1.0-9/397531_717472731680115_4619414063011803521_n.jpg?_nc_fx=ftpe7-2&oh=b968331c0e32bd26bf4e5e4f38437a96&oe=5B01AA78)
		background-size: 140%
		background-position: 80% 0%
	&.photo4
		background-image: url(https://scontent.ftpe7-3.fna.fbcdn.net/v/t1.0-9/1238205_493569764070414_845510561_n.jpg?_nc_fx=ftpe7-2&oh=146da74af1411d70df1a696f6f982990&oe=5B0340C2)
		background-size: 140%
		background-position: 38% 24%
	
.slidebar
	position: absolute
	width: 100%
	height: 44px
	left: 0
	bottom: 0
	background-color: #fff
	padding: 0px 26px
	& *
		display: inline-block
		top: 50%
		// transform: translateY(-50%)
		// vertical-align: top

button
	border: none
	cursor: pointer
	outline: none
	font-size: 1rem
	letter-spacing: 1.2px
	font-weight: 500
	color: #2c3137
	font-family: "Noto Sans TC", sans-serif
	background-color: transparent
	transform: translateY(-50%)
	padding: 0

// i
// 	color: #2c3137
// 	font-size: 1rem
// 	float: right
// 	transform: translateY(-50%)
// 	right: 8px

.circles
	position: absolute
	left: 50%
	transform: translate(-50%,-50%)
	& .circle
		border-radius: 50%
		width: 4px
		height: 4px
		margin-right: 4px
		background-color: #bfc1c3
		&.on
			background-color: #2c3137
		&.m0
			margin-right: 0

img
	width: 4.8%
	float: right
	transform: translateY(-50%)
	cursor: pointer


/*Downloaded from https://www.codeseek.co/LepPerson/practice-andx5207andx724801-BYJWbZ */
    

Comments