Skip to content

Instantly share code, notes, and snippets.

@JaeBats
Last active Jul 28, 2021
Embed
What would you like to do?
Pantone Jul 27 2021
property of jaeknight
-please do not redistribute
-do not remove credits
-Please comment before using!! Upvotes are highly appreciated
Gist contains:
1 - Pantone Colorful
2 - Pantone with Image
3 - Pantone Solo
4 - Pantone Small
<div style="width: 456px; margin:auto;">
<div style="width: 100%; float: left; margin: 40px 0; font-family: 'Helvetica', arial; color: #000;">
<!-- row of colors -->
<div style="width: 100%; float: left;">
<!-- pantone box -->
<div style="width: 150px; height: 180px; float: left; border: 1px solid #eaeaea; border-radius: 2px; background: #fff">
<div style="width: 144px; height: 130px; float: left; border: 3px solid #fff; background: #D8E2DC;">
&nbsp;
</div>
<div style="width: 150px; height: 60px; float: left;">
<div style="width: 130px; margin: auto;">
<div style="width: 130px; float: left; line-height: 0.8em; margin-top: 4px;">
<!-- labels -->
<div style="width: 130px; float: left; font-weight: 700; font-size:12px; text-transform: uppercase;">
pantone
</div>
<div style="width: 130px; float: left; font-weight: 100; font-size:9px; ">
#d8e2dc<br/>Alabaster
</div>
</div>
</div>
</div>
</div>
<!-- end of pantone box -->
<!-- pantone box -->
<div style="width: 150px; height: 180px; float: left; border: 1px solid #eaeaea; border-radius: 2px; background: #fff">
<div style="width: 144px; height: 130px; float: left; border: 3px solid #fff; background: #FFE5D9;">
&nbsp;
</div>
<div style="width: 150px; height: 60px; float: left;">
<div style="width: 130px; margin: auto;">
<div style="width: 130px; float: left; line-height: 0.8em; margin-top: 4px;">
<!-- labels -->
<div style="width: 130px; float: left; font-weight: 700; font-size:12px; text-transform: uppercase;">
pantone
</div>
<div style="width: 130px; float: left; font-weight: 100; font-size:9px; ">
#ffe5d9<br/>Champagne Pink
</div>
</div>
</div>
</div>
</div>
<!-- end of pantone box -->
<!-- pantone box -->
<div style="width: 150px; height: 180px; float: left; border: 1px solid #eaeaea; border-radius: 2px; background: #fff">
<div style="width: 144px; height: 130px; float: left; border: 3px solid #fff; background: #ffd6dc;">
&nbsp;
</div>
<div style="width: 150px; height: 60px; float: left;">
<div style="width: 130px; margin: auto;">
<div style="width: 130px; float: left; line-height: 0.8em; margin-top: 4px;">
<!-- labels -->
<div style="width: 130px; float: left; font-weight: 700; font-size:12px; text-transform: uppercase;">
pantone
</div>
<div style="width: 130px; float: left; font-weight: 100; font-size:9px; ">
#ffd6dc<br/>Pale Pink
</div>
</div>
</div>
</div>
</div>
<!-- end of pantone box -->
</div>
<!-- end of row of colors -->
<!-- row of colors -->
<div style="width: 100%; float: left;">
<!-- pantone box -->
<div style="width: 150px; height: 180px; float: left; border: 1px solid #eaeaea; border-radius: 2px; background: #fff">
<div style="width: 144px; height: 130px; float: left; border: 3px solid #fff; background: #F4ACB7;">
&nbsp;
</div>
<div style="width: 150px; height: 60px; float: left;">
<div style="width: 130px; margin: auto;">
<div style="width: 130px; float: left; line-height: 0.8em; margin-top: 4px;">
<!-- labels -->
<div style="width: 130px; float: left; font-weight: 700; font-size:12px; text-transform: uppercase;">
pantone
</div>
<div style="width: 130px; float: left; font-weight: 100; font-size:9px; ">
#f4acb7<br/>Light Pink
</div>
</div>
</div>
</div>
</div>
<!-- end of pantone box -->
<!-- pantone box -->
<div style="width: 150px; height: 180px; float: left; border: 1px solid #eaeaea; border-radius: 2px; background: #fff">
<div style="width: 144px; height: 130px; float: left; border: 3px solid #fff; background: #fff;">
&nbsp;
</div>
<div style="width: 150px; height: 60px; float: left;">
<div style="width: 130px; margin: auto;">
<div style="width: 130px; float: left; line-height: 0.8em; margin-top: 4px;">
<!-- labels -->
<div style="width: 130px; float: left; font-weight: 700; font-size:12px; text-transform: uppercase;">
pantone
</div>
<div style="width: 130px; float: left; font-weight: 100; font-size:9px; ">
#blank<br/>blank
</div>
</div>
</div>
</div>
</div>
<!-- end of pantone box -->
<!-- pantone box -->
<div style="width: 150px; height: 180px; float: left; border: 1px solid #eaeaea; border-radius: 2px; background: #fff">
<div style="width: 144px; height: 130px; float: left; border: 3px solid #fff; background: #9D8189;">
&nbsp;
</div>
<div style="width: 150px; height: 60px; float: left;">
<div style="width: 130px; margin: auto;">
<div style="width: 130px; float: left; line-height: 0.8em; margin-top: 4px;">
<!-- labels -->
<div style="width: 130px; float: left; font-weight: 700; font-size:12px; text-transform: uppercase;">
pantone
</div>
<div style="width: 130px; float: left; font-weight: 100; font-size:9px; ">
#9d8189<br/>Mountbatten Pink
</div>
</div>
</div>
</div>
</div>
<!-- end of pantone box -->
</div>
<!-- end of row of colors -->
<!-- row of colors -->
<div style="width: 100%; float: left;">
<!-- pantone box -->
<div style="width: 150px; height: 180px; float: left; border: 1px solid #eaeaea; border-radius: 2px; background: #fff">
<div style="width: 144px; height: 130px; float: left; border: 3px solid #fff; background: #416788;">
&nbsp;
</div>
<div style="width: 150px; height: 60px; float: left;">
<div style="width: 130px; margin: auto;">
<div style="width: 130px; float: left; line-height: 0.8em; margin-top: 4px;">
<!-- labels -->
<div style="width: 130px; float: left; font-weight: 700; font-size:12px; text-transform: uppercase;">
pantone
</div>
<div style="width: 130px; float: left; font-weight: 100; font-size:9px; ">
#416788<br/>Queen Blue
</div>
</div>
</div>
</div>
</div>
<!-- end of pantone box -->
<!-- pantone box -->
<div style="width: 150px; height: 180px; float: left; border: 1px solid #eaeaea; border-radius: 2px; background: #fff">
<div style="width: 144px; height: 130px; float: left; border: 3px solid #fff; background: #ded6d1;">
&nbsp;
</div>
<div style="width: 150px; height: 60px; float: left;">
<div style="width: 130px; margin: auto;">
<div style="width: 130px; float: left; line-height: 0.8em; margin-top: 4px;">
<!-- labels -->
<div style="width: 130px; float: left; font-weight: 700; font-size:12px; text-transform: uppercase;">
pantone
</div>
<div style="width: 130px; float: left; font-weight: 100; font-size:9px; ">
#ded6d1<br/>Timber Wolf
</div>
</div>
</div>
</div>
</div>
<!-- end of pantone box -->
<!-- pantone box -->
<div style="width: 150px; height: 180px; float: left; border: 1px solid #eaeaea; border-radius: 2px; background: #fff">
<div style="width: 144px; height: 130px; float: left; border: 3px solid #fff; background: #e4f0d0;">
&nbsp;
</div>
<div style="width: 150px; height: 60px; float: left;">
<div style="width: 130px; margin: auto;">
<div style="width: 130px; float: left; line-height: 0.8em; margin-top: 4px;">
<!-- labels -->
<div style="width: 130px; float: left; font-weight: 700; font-size:12px; text-transform: uppercase;">
pantone
</div>
<div style="width: 130px; float: left; font-weight: 100; font-size:9px; ">
#e4f0d0<br/>Nyanza
</div>
</div>
</div>
</div>
</div>
<!-- end of pantone box -->
</div>
<!-- end of row of colors -->
<div style="width: 300px; margin: auto;">
<!-- shaddow pantone -->
<div style="width: 300px; height: 360px; float: left; border-radius: 2px; background: #dfdfdf; margin-top: -450px; border: 1px solid #000;">&nbsp;
</div>
<!-- end of shadow pantone -->
<!-- pantone box -->
<div style="width: 300px; height: 360px; float: left; border: 1px solid #000; border-radius: 2px; background: #fff; margin-top: -455px;margin-left: -5px;">
<div style="width: 288px; height: 260px; float: left; border: 6px solid #fff; background: #ffd6dc;">
<div style="width: 288px; height: 260px; float: left; overflow: hidden;">
<div style="width: 288px; height: 100%; float: left; overflow: auto;padding-right: 20px;" >
<!-- scroll box -->
<div style="width: 288px; height: 260px; float: left; margin-top: 0px;">
<div style="width: 288px; float: left; ">
<div style="width: 82px; float: left;">
<div style="width: 60px; float: left; margin:10px 10px;">
<div style="width: 60px; height: 85px; float:left; background: #fff; border: 1px solid #000;">
<div style="width: 60px; height: 60px; float: left; overflow: hidden; border-bottom:1px solid #000;">
<img src="https://i.imgur.com/32qq4y6.jpg"/>
</div>
<div style="width: 60px; height: 25px; float: left; font-size: 10px; line-height: 9px; padding-top: 3px;">
<span style="padding: 3px 5px; text-transform: uppercase; font-weight: 700;">name</span><br/>
<span style="padding: 3px 5px; font-weight: 100; font-size: 8px;">nickname</span><br/>
</div>
</div>
<div style="width: 60px; float: left; line-height: 17px; margin-top: 5px;">
<div style="width: 60px; float: left;margin-top: 1px;">
<span style="background: #fff; border: 1px solid #000; padding:2px 3px; font-weight: 700; font-size: 9px; ">mbti</span>
</div>
<div style="width: 60px; float: left;margin-top: 1px;">
<span style="background: #fff; border: 1px solid #000; padding:2px 3px; font-weight: 700; font-size: 9px; ">enneatype</span>
</div>
</div>
</div>
</div>
<div style="width: 206px; height: 260px; float: left; overflow: hidden;">
<div style="width: 206px; height: 260px; float: left; overflow: auto; padding-right: 20px; font-size: 11px; line-height: 10px;">
<div style="width: 176px; margin: auto;">
<div style="width: 176px; float: left;">
<div style="width: 176px; float: left; color: #fff; margin-top: 10px; font-weight: 700; padding: 10px 0 30px 0; ">
<span style="font-weight: 700; font-size: 30px; line-height: 30px;">Pantone</span>
<span style="font-weight: 100; font-size: 20px;line-height: 20px;">#ffd6dc<br/>Pale Pink</span>
</div>
<!-- section -->
<div style="width: 176px; float: left; background: #fff; margin-top:10px; border: 1px solid #000; ">
<div style=" text-transform: uppercase; font-weight: 700; padding:7px 10px;">section</div>
<div style="width: 100%; height: 1px; background: #000; float: left;">&nbsp;</div>
<div style="font-weight: 100; font-size: 10px; line-height: 11px; padding:10px 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos</div><br/>
</div>
<!-- end of section -->
<!-- section -->
<div style="width: 176px; float: left; background: #fff; margin-top:10px; border: 1px solid #000; ">
<div style=" text-transform: uppercase; font-weight: 700; padding:7px 10px;">section</div>
<div style="width: 100%; height: 1px; background: #000; float: left;">&nbsp;</div>
<div style="font-weight: 100; font-size: 10px; line-height: 11px; padding:10px 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. </div>
</div>
<!-- end of section -->
<!-- image section -->
<div style="width: 176px; float: left; margin-top:10px; ">
<div style="width: 176px; float: left;">
<div style="float: left; background: #fff; border: 1px solid #000; padding:3px 5px; font-weight: 700; text-transform: uppercase; font-size: 9px;">section</div>
</div>
<div style="width: 40px; height: 40px; float: left; margin:3px 3px 0 0; overflow:hidden; border: 1px solid #000;">
<img src="https://i.imgur.com/2CEvuqZ.jpg"/>
</div>
<div style="width: 40px; height: 40px; float: left; margin:3px 3px 0 0; overflow:hidden; border: 1px solid #000;">
<img src="https://i.imgur.com/jj5McFT.jpg"/>
</div>
<div style="width: 40px; height: 40px; float: left; margin:3px 3px 0 0; overflow:hidden; border: 1px solid #000;">
<img src="https://i.imgur.com/2UoLjxB.jpg"/>
</div>
</div>
<!-- end of image section -->
<!-- section -->
<div style="width: 176px; float: left; background: #fff; margin-top:10px; border: 1px solid #000; ">
<div style=" text-transform: uppercase; font-weight: 700; padding:7px 10px;">section</div>
<div style="width: 100%; height: 1px; background: #000; float: left;">&nbsp;</div>
<div style="font-weight: 100; font-size: 10px; line-height: 11px; padding:10px 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. </div>
</div>
<!-- end of section -->
<!-- section -->
<div style="width: 176px; float: left; background: #fff; margin-top:10px; margin-bottom: 10px; border: 1px solid #000; ">
<div style="font-weight: 100; padding:7px 10px;font-size: 9px; line-height: 11px; "><i><b>Status: </b>Lorem ipsum dolor sit amet</i></div>
</div>
<!-- end of section -->
<div style="width: 176px; float: left; line-height: 22px;">
<div style="width: 176px; float: left; margin-top: 0px;">
<a href="jaecomponents" style="color: #000;"><span style="background: #fff; border: 1px solid #000; padding:3px 5px; font-weight: 700; font-size: 9px; ">twitter</span></a>
<a href="jaecomponents" style="color: #000;"><span style="background: #fff; border: 1px solid #000; padding:3px 5px; font-weight: 700; font-size: 9px; ">instagram</span></a>
<a href="jaecomponents" style="color: #000;"><span style="background: #fff; border: 1px solid #000; padding:3px 5px; font-weight: 700; font-size: 9px; ">youtube</span></a>
<a href="jaecomponents" style="color: #000;"><span style="background: #fff; border: 1px solid #000; padding:3px 5px; font-weight: 700; font-size: 9px; ">curious cat</span></a>
</div>
</div>
<div style="width: 176px; height: 260px; float: left;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end of scroll box -->
</div>
</div>
</div>
<div style="width: 300px; height: 120px; float: left;">
<div style="width: 270px; margin: auto;">
<div style="width: 270px; float: left; line-height: 1em; margin-top: 15px;">
<!-- labels -->
<div style="width: 270px; float: left; font-weight: 700; font-size: 18px; text-transform: uppercase; line-height: 22px;">
pantone
</div>
<div style="idth: 280px; float: left; font-weight: 100; font-size: 13px; line-height: 17px; ">
#ffd6dc<br/>Misty Rose
</div>
</div>
</div>
</div>
</div>
<!-- end of pantone box -->
<!-- DO NOT REMOVE -->
<div style="float: right; margin-top: -93px; margin-right: 4px;"><a href="https://www.asianfanfics.com/story/view/1095296/" title="Designed and coded by JaeKnight from jaecomponents" style="color: #fff;"><span style="color:#000; background: #fff; padding: 2px 3px; border: 1px solid #000; font-size: 7px; letter-spacing: 1px; text-transform: uppercase; border-radius: 2px;">jaecomponents</span></a> </div>
</div>
</div>
</div>
<div style="width: 350px; margin:auto;">
<div style="width: 100%; float: left; margin: 40px 0; font-family: 'Helvetica', arial; color: #000;">
<div style="width: 350px; height: 420px; float: left; overflow: hidden;">
<img src="https://i.imgur.com/8HpLMlk.jpg"/>
</div>
<!-- main patone box -->
<div style="width: 300px; margin: auto;">
<!-- pantone box -->
<div style="width: 300px; height: 360px; float: left; border: 1px solid #000; border-radius: 2px; margin-top: -390px; overflow: hidden;">
<div style="width: 300px; height: 270px; float: left; background: #2bbf9b; opacity: 0.6;">&nbsp;</div>
<div style="width: 288px; height: 260px; float: left; border: 6px solid #fff; margin-top: -270px; opacity: 0.99;">
<div style="width: 288px; height: 260px; float: left; overflow: hidden;">
<div style="width: 288px; height: 100%; float: left; overflow: auto;padding-right: 20px;" >
<!-- scroll box -->
<div style="width: 288px; height: 260px; float: left; margin-top: 260px;">
<div style="width: 288px; float: left; ">
<div style="width: 82px; float: left;">
<div style="width: 60px; float: left; margin:10px 10px;">
<div style="width: 60px; height: 85px; float:left; background: #fff; border: 1px solid #000;">
<div style="width: 60px; height: 60px; float: left; overflow: hidden; border-bottom:1px solid #000;">
<img src="https://i.imgur.com/32qq4y6.jpg"/>
</div>
<div style="width: 60px; height: 25px; float: left; font-size: 10px; line-height: 9px; padding-top: 3px;">
<span style="padding: 3px 5px; text-transform: uppercase; font-weight: 700;">name</span><br/>
<span style="padding: 3px 5px; font-weight: 100; font-size: 8px;">nickname</span><br/>
</div>
</div>
<div style="width: 60px; float: left; line-height: 17px; margin-top: 5px;">
<div style="width: 60px; float: left;margin-top: 1px;">
<span style="background: #fff; border: 1px solid #000; padding:2px 3px; font-weight: 700; font-size: 9px; ">mbti</span>
</div>
<div style="width: 60px; float: left;margin-top: 1px;">
<span style="background: #fff; border: 1px solid #000; padding:2px 3px; font-weight: 700; font-size: 9px; ">enneatype</span>
</div>
</div>
</div>
</div>
<div style="width: 206px; height: 260px; float: left; overflow: hidden;">
<div style="width: 206px; height: 260px; float: left; overflow: auto; padding-right: 20px; font-size: 11px; line-height: 10px;">
<div style="width: 176px; margin: auto;">
<div style="width: 176px; float: left;">
<div style="width: 176px; float: left; color: #fff; margin-top: 10px; font-weight: 700; padding: 10px 0 30px 0; ">
<span style="font-weight: 700; font-size: 30px; line-height: 30px;">Pantone</span>
<span style="font-weight: 100; font-size: 20px;line-height: 20px;">#2bbf9b<br/>Mountain Meadow</span>
</div>
<!-- section -->
<div style="width: 176px; float: left; background: #fff; margin-top:10px; border: 1px solid #000; ">
<div style=" text-transform: uppercase; font-weight: 700; padding:7px 10px;">section</div>
<div style="width: 100%; height: 1px; background: #000; float: left;">&nbsp;</div>
<div style="font-weight: 100; font-size: 10px; line-height: 11px; padding:10px 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos</div><br/>
</div>
<!-- end of section -->
<!-- section -->
<div style="width: 176px; float: left; background: #fff; margin-top:10px; border: 1px solid #000; ">
<div style=" text-transform: uppercase; font-weight: 700; padding:7px 10px;">section</div>
<div style="width: 100%; height: 1px; background: #000; float: left;">&nbsp;</div>
<div style="font-weight: 100; font-size: 10px; line-height: 11px; padding:10px 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. </div>
</div>
<!-- end of section -->
<!-- image section -->
<div style="width: 176px; float: left; margin-top:10px; ">
<div style="width: 176px; float: left;">
<div style="float: left; background: #fff; border: 1px solid #000; padding:3px 5px; font-weight: 700; text-transform: uppercase; font-size: 9px;">section</div>
</div>
<div style="width: 40px; height: 40px; float: left; margin:3px 3px 0 0; overflow:hidden; border: 1px solid #000;">
<img src="https://i.imgur.com/2CEvuqZ.jpg"/>
</div>
<div style="width: 40px; height: 40px; float: left; margin:3px 3px 0 0; overflow:hidden; border: 1px solid #000;">
<img src="https://i.imgur.com/2UoLjxB.jpg"/>
</div>
<div style="width: 40px; height: 40px; float: left; margin:3px 3px 0 0; overflow:hidden; border: 1px solid #000;">
<img src="https://i.imgur.com/jj5McFT.jpg"/>
</div>
</div>
<!-- end of image section -->
<!-- section -->
<div style="width: 176px; float: left; background: #fff; margin-top:10px; border: 1px solid #000; ">
<div style=" text-transform: uppercase; font-weight: 700; padding:7px 10px;">section</div>
<div style="width: 100%; height: 1px; background: #000; float: left;">&nbsp;</div>
<div style="font-weight: 100; font-size: 10px; line-height: 11px; padding:10px 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. </div>
</div>
<!-- end of section -->
<!-- section -->
<div style="width: 176px; float: left; background: #fff; margin-top:10px; margin-bottom: 10px; border: 1px solid #000; ">
<div style="font-weight: 100; padding:7px 10px;font-size: 9px; line-height: 11px; "><i><b>Status: </b>Lorem ipsum dolor sit amet</i></div>
</div>
<!-- end of section -->
<div style="width: 176px; float: left; line-height: 22px;">
<div style="width: 176px; float: left; margin-top: 0px;">
<a href="jaecomponents" style="color: #000;"><span style="background: #fff; border: 1px solid #000; padding:3px 5px; font-weight: 700; font-size: 9px; ">twitter</span></a>
<a href="jaecomponents" style="color: #000;"><span style="background: #fff; border: 1px solid #000; padding:3px 5px; font-weight: 700; font-size: 9px; ">instagram</span></a>
<a href="jaecomponents" style="color: #000;"><span style="background: #fff; border: 1px solid #000; padding:3px 5px; font-weight: 700; font-size: 9px; ">youtube</span></a>
<a href="jaecomponents" style="color: #000;"><span style="background: #fff; border: 1px solid #000; padding:3px 5px; font-weight: 700; font-size: 9px; ">curious cat</span></a>
</div>
</div>
<div style="width: 176px; height: 260px; float: left;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end of scroll box -->
</div>
</div>
</div>
<div style="width: 300px; height: 88px; float: left; background: #fff;">
<div style="width: 270px; margin: auto;">
<div style="width: 270px; float: left; line-height: 1em; margin-top: 15px;">
<!-- labels -->
<div style="width: 270px; float: left; font-weight: 700; font-size: 18px; text-transform: uppercase; line-height: 20px;">
pantone
</div>
<div style="width: 280px; float: left; font-weight: 100; font-size: 13px; line-height: 17px; ">
#2bbf9b<br/>Mountain Meadow
</div>
</div>
</div>
</div>
</div>
<!-- end of pantone box -->
<div style="float: right; margin-top: -25px;"><a href="https://www.asianfanfics.com/story/view/1095296" title="Designed and coded by JaeKnight from jaecomponents" style="color: #fff; float: right; line-height: 7px;"><span style="color:#fff; padding: 2px 3px;font-size: 7px; letter-spacing: 1px; text-transform: uppercase;">jaecomponents</span></a> </div>
</div>
<!-- end of main patone box -->
</div>
</div>
<div style="width: 300px; margin: auto;">
<!-- pantone box -->
<div style="width: 300px; height: 360px; float: left; border: 1px solid #000; border-radius: 2px; background: #fff; margin-top: 0px;margin-left: 0px; margin-top: 20px; font-family: 'Helvetica', arial; color: #000;">
<div style="width: 288px; height: 260px; float: left; border: 6px solid #fff; background: #D8E2DC;">
<div style="width: 288px; height: 260px; float: left; overflow: hidden;">
<div style="width: 288px; height: 100%; float: left; overflow: auto;padding-right: 20px;" >
<!-- scroll box -->
<div style="width: 288px; height: 260px; float: left; margin-top: 0px;">
<div style="width: 288px; float: left; ">
<div style="width: 82px; float: left;">
<div style="width: 60px; float: left; margin:10px 10px;">
<div style="width: 60px; height: 85px; float:left; background: #fff; border: 1px solid #000;">
<div style="width: 60px; height: 60px; float: left; overflow: hidden; border-bottom:1px solid #000;">
<img src="https://i.imgur.com/32qq4y6.jpg"/>
</div>
<div style="width: 60px; height: 25px; float: left; font-size: 10px; line-height: 9px; padding-top: 3px;">
<span style="padding: 3px 5px; text-transform: uppercase; font-weight: 700;">name</span><br/>
<span style="padding: 3px 5px; font-weight: 100; font-size: 8px;">nickname</span><br/>
</div>
</div>
<div style="width: 60px; float: left; line-height: 17px; margin-top: 5px;">
<div style="width: 60px; float: left;margin-top: 1px;">
<span style="background: #fff; border: 1px solid #000; padding:2px 3px; font-weight: 700; font-size: 9px; ">mbti</span>
</div>
<div style="width: 60px; float: left; margin-top: 1px;">
<span style="background: #fff; border: 1px solid #000; padding:2px 3px; font-weight: 700; font-size: 9px; ">enneatype</span>
</div>
</div>
</div>
</div>
<div style="width: 206px; height: 260px; float: left; overflow: hidden;">
<div style="width: 206px; height: 260px; float: left; overflow: auto; padding-right: 20px; font-size: 11px; line-height: 10px;">
<div style="width: 176px; margin: auto;">
<div style="width: 176px; float: left;">
<div style="width: 176px; float: left; color: #fff; margin-top: 10px; font-weight: 700; padding: 10px 0 30px 0; ">
<span style="font-weight: 700; font-size: 30px; line-height: 30px;">Pantone</span>
<span style="font-weight: 100; font-size: 20px;line-height: 20px;">#d8e2dc<br/>Alabaster</span>
</div>
<!-- section -->
<div style="width: 176px; float: left; background: #fff; margin-top:10px; border: 1px solid #000; ">
<div style=" text-transform: uppercase; font-weight: 700; padding:7px 10px;">section</div>
<div style="width: 100%; height: 1px; background: #000; float: left;">&nbsp;</div>
<div style="font-weight: 100; font-size: 10px; line-height: 11px; padding:10px 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos</div><br/>
</div>
<!-- end of section -->
<!-- section -->
<div style="width: 176px; float: left; background: #fff; margin-top:10px; border: 1px solid #000; ">
<div style=" text-transform: uppercase; font-weight: 700; padding:7px 10px;">section</div>
<div style="width: 100%; height: 1px; background: #000; float: left;">&nbsp;</div>
<div style="font-weight: 100; font-size: 10px; line-height: 11px; padding:10px 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. </div>
</div>
<!-- end of section -->
<!-- image section -->
<div style="width: 176px; float: left; margin-top:10px; ">
<div style="width: 176px; float: left;">
<div style="float: left; background: #fff; border: 1px solid #000; padding:3px 5px; font-weight: 700; text-transform: uppercase; font-size: 9px;">section</div>
</div>
<div style="width: 40px; height: 40px; float: left; margin:3px 3px 0 0; overflow:hidden; border: 1px solid #000;">
<img src="https://i.imgur.com/2CEvuqZ.jpg"/>
</div>
<div style="width: 40px; height: 40px; float: left; margin:3px 3px 0 0; overflow:hidden; border: 1px solid #000;">
<img src="https://i.imgur.com/jj5McFT.jpg"/>
</div>
<div style="width: 40px; height: 40px; float: left; margin:3px 3px 0 0; overflow:hidden; border: 1px solid #000;">
<img src="https://i.imgur.com/2UoLjxB.jpg"/>
</div>
</div>
<!-- end of image section -->
<!-- section -->
<div style="width: 176px; float: left; background: #fff; margin-top:10px; border: 1px solid #000; ">
<div style=" text-transform: uppercase; font-weight: 700; padding:7px 10px;">section</div>
<div style="width: 100%; height: 1px; background: #000; float: left;">&nbsp;</div>
<div style="font-weight: 100; font-size: 10px; line-height: 11px; padding:10px 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. </div>
</div>
<!-- end of section -->
<!-- section -->
<div style="width: 176px; float: left; background: #fff; margin-top:10px; margin-bottom: 10px; border: 1px solid #000; ">
<div style="font-weight: 100; padding:7px 10px;font-size: 9px; line-height: 11px; "><i><b>Status: </b>Lorem ipsum dolor sit amet</i></div>
</div>
<!-- end of section -->
<div style="width: 176px; float: left; line-height: 22px;">
<div style="width: 176px; float: left; margin-top: 0px;">
<a href="jaecomponents" style="color: #000;"><span style="background: #fff; border: 1px solid #000; padding:3px 5px; font-weight: 700; font-size: 9px; ">twitter</span></a>
<a href="jaecomponents" style="color: #000;"><span style="background: #fff; border: 1px solid #000; padding:3px 5px; font-weight: 700; font-size: 9px; ">instagram</span></a>
<a href="jaecomponents" style="color: #000;"><span style="background: #fff; border: 1px solid #000; padding:3px 5px; font-weight: 700; font-size: 9px; ">youtube</span></a>
<a href="jaecomponents" style="color: #000;"><span style="background: #fff; border: 1px solid #000; padding:3px 5px; font-weight: 700; font-size: 9px; ">curious cat</span></a>
</div>
</div>
<div style="width: 176px; height: 260px; float: left;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end of scroll box -->
</div>
</div>
</div>
<div style="width: 300px; height: 120px; float: left;">
<div style="width: 270px; margin: auto;">
<div style="width: 270px; float: left; line-height: 1em; margin-top: 15px;">
<!-- labels -->
<div style="width: 270px; float: left; font-weight: 700; font-size: 18px; text-transform: uppercase; line-height: 22px;">
pantone
</div>
<div style="width: 280px; float: left; font-weight: 100; font-size: 13px; line-height: 17px; ">
#d8e2dc<br/>Alabaster
</div>
</div>
</div>
</div>
</div>
<!-- end of pantone box -->
<!-- DO NOT REMOVE -->
<div style="float: right; margin-bottom: 20px;margin-top: 3px;"><a href="https://www.asianfanfics.com/story/view/1095296" title="Designed and coded by JaeKnight from jaecomponents" style="color: #000; float: right; line-height: 7px;"><span style="color:#000; font-size: 7px; letter-spacing: 1px; text-transform: uppercase; border-radius: 2px;font-family:arial;">jaecomponents</span></a> </div>
</div>
<div style="width: 150px; margin: auto;">
<div style="width: 150px; height: 180px; float: left; border: 1px solid #acacac; color: #000; border-radius: 2px; background: #fff; margin-top: 20px;font-family: arial; overflow: hidden;">
<div style="width: 144px; height: 130px; float: left; border: 3px solid #fff; background: #E98A15; overflow: hidden">
<div style="width: 144px; height: 100%; float: left; overflow: auto; padding-right: 20px;">
<div style="width: 144px; float: left; margin-top: 130px;">
<div style="width: 120px; margin: auto;">
<!-- section -->
<div style="width: 120px; float: left; background: #fff; margin-top:10px; border: 1px solid #000; margin-bottom: 10px;">
<div style=" text-transform: uppercase; font-weight: 700; padding:3px 7px;font-size: 10px">section</div>
<div style="width: 100%; height: 1px; background: #000; float: left;">&nbsp;</div>
<div style="font-weight: 300; font-size: 10px; line-height: 13px; padding:7px 7px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.</div>
</div>
<!-- end of section -->
<div style="width: 60px; height: 120px; float: left; ">
<div style="width: 60px; height: 85px; float:left; background: #fff; border: 1px solid #000; margin-top: 10px;">
<div style="width: 60px; height: 60px; float: left; overflow: hidden; border-bottom:1px solid #000;">
<img src="https://i.imgur.com/32qq4y6.jpg"/>
</div>
<div style="width: 60px; height: 25px; float: left; font-size: 10px; line-height: 9px; padding-top: 3px;">
<span style="padding: 3px 5px; text-transform: uppercase; font-weight: 700;">name</span><br/>
<span style="padding: 3px 5px; font-weight: 100; font-size: 8px;">nickname</span><br/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="width: 150px; height: 44px; float: left; ">
<div style="width: 130px; margin: auto;">
<div style="width: 130px; float: left;margin-top: 4px;">
<!-- labels -->
<div style="width: 130px; float: left; font-weight: 700; font-size: 12px; line-height: 15px; text-transform: uppercase;">
pantone
</div>
<div style="width: 130px; float: left; font-weight: 100; font-size: 9px; line-height: 9px; ">
#e98a15<br/>Fulvous
</div>
</div>
</div>
</div>
<!-- DO NOT REMOVE -->
</div>
<div style="float: right; margin-bottom: 20px;margin-top: 1px;"><a href="https://www.asianfanfics.com/story/view/1095296/" title="Designed and coded by JaeKnight from jaecomponents" style="color: #000; float: right; line-height: 7px;"><span style="color:#000; padding: 2px 3px; font-size: 7px; letter-spacing: 1px; text-transform: uppercase; border-radius: 2px;font-family:arial;">jc.</span></a> </div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment