Elegant CSS Template

This post is dedicated to share beautiful elegant CSS templates. It’s a good start point to learn how to use CSS making beautiful webpage.

Cut-off Line (with titile)

From Jason Ng:

HTML Code:

<p style="
	line-height: 25.6px; 
	max-width: 100%; 
	min-height: 1em; 
	color: rgb(62, 62, 62); 
	box-sizing: border-box !important; 
	word-wrap: break-word !important; 
	background-color: rgb(255, 255, 255);">
	
	<strong style="
		max-width: 100%; 
		color: rgb(41, 148, 128); 
		line-height: 25.6px; 
		box-sizing: border-box !important; 
		word-wrap: break-word !important;">
		
		<em style="max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;">
			<span style="max-width: 100%; font-size: 24px; box-sizing: border-box !important; word-wrap: break-word !important;"> 1</span>
		</em>
	</strong>
</p>

<h2 style="
    margin-top: -10px; 
    margin-bottom: 20px; 
    white-space: normal; 
    max-width: 100%; 
    box-sizing: border-box; 
    word-wrap: break-word; 
    outline: none; 
    font-family: sans-serif; 
    line-height: 11px; 
    color: white; 
    border-left-width: 30px; 
    border-left-style: solid; 
    border-left-color: rgb(41, 148, 128); 
    background: rgb(73, 200, 149);"
>&nbsp;&nbsp;</h2>

Rendered Display:

<h2 style="
    -webkit-font-smoothing: antialiased; 
    margin: 40px; 
    max-width: 100%; 
    min-height: 1em; 
    color: rgb(24, 156, 199); 
    text-align: center; 
    line-height: 25.200000762939453px; 
    letter-spacing: 1px; 
    font-size: 18px; 
    font-weight: bold; 
    border-bottom-width: 0.5px; 
    border-bottom-style: solid; 
    border-bottom-color: rgb(24, 156, 199); 
    font-family: -apple-system-font, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; 
    white-space: normal; 
    text-rendering: optimizeLegibility !important;"
>About the Intuition of Design</h2>

关于设计直觉

Log and Label

From Jason Ng:

HTML Code:

<section style="box-sizing: border-box; ">
	<section style=" margin-top: 10px; margin-bottom: 10px;  box-sizing: border-box; ">
		<section style="box-sizing: border-box; text-align: center;">
			<section style="display: inline-block;vertical-align: top;padding: 8px 5px 5px 3px;width: 50%;box-sizing: border-box;border-right: 1px solid #66CCC5;">
				<section style="box-sizing: border-box;">
					<section style="margin-top: 0.5em; margin-bottom: 0.5em; box-sizing: border-box;">
						<section style="box-sizing: border-box;width: 4em;height: 4em;display: inline-block;vertical-align: bottom;border-radius: 100%;background-image: url(&quot;https://mmbiz.qlogo.cn/mmbiz_jpg/VJsh0SqOtxMqOfDwFvzbz8Jt950hFWSRLpk0LZkJ8ur8EgEPv4Lib5tNBYF77LIh959Vht9BiclEpibWqiaic1gDuUw/0?wx_fmt=jpeg&quot;);background-size: cover;background-position: 50% 50%;background-repeat: no-repeat;" class="">
							<br>
						</section>

						<p>
							<span style="font-size: 14px;color: rgb(102, 204, 197);line-height: 1.6;">GeekArtT</span>
						</p>
					</section>
				</section>
			</section>

			<section style="display: inline-block;vertical-align: top;padding: 6px;width: 50%;box-sizing: border-box;">
				<section style="box-sizing: border-box; border: 1px solid rgb(102, 204, 197); padding: 8px 5px; width: 120px; color: rgb(102, 204, 197); border-radius: 2px; margin: auto; line-height: 20px; font-size: 14px;">
					<p>读完本文<br>大约需要</p>

					<section style="font-size: 30px;color:#666;line-height: 38px;">
						6
					</section>
					分钟
				</section>
			</section>
		</section>
	</section>
</section>

Rendered Display:

GeekArtT

读完本文
大约需要

分钟

Quote

Item: 1

Item 2

Item 3