Skip to content

Instantly share code, notes, and snippets.

@JaeBats

JaeBats/! Pantone Secret

Last active July 28, 2021 21:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JaeBats/233568ca6d48d7efd2ec1427a29d3bb9 to your computer and use it in GitHub Desktop.
Save JaeBats/233568ca6d48d7efd2ec1427a29d3bb9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
! Pantone
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
Raw
1 - Pantone Colorful
<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>
Raw
2 - Pantone with Image
<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>
Raw
3 - Pantone Solo
<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>
Raw
4 - Pantone Small
<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