Skip to content

Instantly share code, notes, and snippets.

@JaeBats

JaeBats/! [ READ ME ] Gyalchester Secret

Last active July 25, 2021 07:04
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/a6a1adf57d120d5c68dc0b0ca37054f0 to your computer and use it in GitHub Desktop.
Save JaeBats/a6a1adf57d120d5c68dc0b0ca37054f0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
! [ READ ME ] Gyalchester
property of jaeknight
-please do not redistribute
-Please comment before using!!
-Please make sure you bought this, otherwise, you'll be blocked once I spot you.
[ I kinda accept donations ]
--
Gist contains (Ctrl + F to find the file):
1 - Dark (Ver 2.0 - 2021)
2 - Dark (Ver 1.0 - 2020)
3 - Notes for both Light modes (2020 and 2021 versions)
4 - Light (Ver 2.0 - 2021)
5 - Light (Ver 1.0 - 2020)
6 - Pink (Ver 2.0 - 2021)
--
[!!] GENERAL NOTES ABOUT GYALCHESTER
- If you want to make the horizontal scrollbox longer or shorter (if you want to add/delete more stories), add/subtract 190 on Line 21 on the main file.
i.e. Default width of the horizontal scrollbox is 1330px. If you want to add one more story, then, add 190px to 1330px. Thus, your new width is 1520px.
Same approach if you want to delete a story. If you want to remove 2 stories, then subtract 380px to your current width. (190px + 190px = 380px)
Why 190px? Because the default width that I did on a single story section is 180px. And there's a 10px margin to add spacing. Making it 190px.
Raw
1 - Dark (Ver 2.0 - 2021)
<div style="width:80%; margin:auto">
<div style="width: 100%; float: left; margin:30px 0; color: #f0f0f0; font-family: arial; font-size: 12px; border-radius: 6px;">
<div class="stack">
<div class="sympl full" style="border-top-left-radius: 6px; border-top-right-radius: 6px; background:#0C0F0A; line-height: 15px; padding:0; border-bottom:rgba(240, 240, 240, 0.1) solid 1px ">
<div style="padding:15px 10px 10px 15px; float: left;">
<span style="font-weight: 700; font-size: 14px;text-transform: uppercase;">Gyalchester</span><br>
<span style="font-weight: 100; letter-spacing: 0.6px; ">Hermès link, ice-blue mink
</span>
</div>
<div style="float:right; padding:20px 25px 21px 25px; background:#0C0F0A; border-top-right-radius: 6px;">x</div>
</div>
</div>
<div class="stack" style="background:#0C0F0A">
<!-- left box -->
<div class="sympl three-quarters" style="padding:0; height: 100%; background: #080A07;">
<div style="width: 95%; margin:2% auto;height: 92%;">
<div style="width:100%; float:left; height: 287px; overflow: hidden; padding: 10px 0;">
<div style="width: 100%; float: left; overflow: auto; height: 100%; padding-bottom: 27px;">
<!-- [1] change width -->
<div style="width: 1330px; float: left; ">
<!-- one story section -->
<div style="height: 100%; width: 180px; float: left; background:#121212; margin-right: 10px;">
<div style="width: 170px; margin:auto;">
<div style="width: 170px; height: 245px; float: left;padding:10px 0; overflow: hidden;">
<div style="width: 170px; overflow: auto; height: 102%;float: left; padding-right: 20px;">
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<a href="jaecomponents" title="Click to read">
<img src="https://i.imgur.com/gP0BHgu.jpg"/>
</a>
</div>
</div>
</div>
<!-- description -->
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; color:rgba(240, 240, 240, 0.2);">
description
</span>
<span style="float: left; line-height: 14px;padding-bottom: 50px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</span>
</div>
</div>
</div>
<!-- end of description -->
</div>
</div>
<div class="" style="width: 100%; float: left; background: #121212; height: 50px; padding-top:5px; margin-top: -50px; opacity: 0.8;">
<div class="profile-bar__content" style="opacity: 0.9999999; float: left;padding:3px 10px;">
<a href="jaecomponents" style="float: left; line-height: 1.25em;">
<span class="block" style="text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 1px;line-height: 10px; float: left;">
Title
</span><br>
<span style="font-size: 11px; letter-spacing: 1px;line-height: 5px; float: left; ">
character x oc
</span>
</a>
</div>
</div>
</div>
</div>
<!-- end of one story section -->
<!-- one story section -->
<div style="height: 100%; width: 180px; float: left; background:#121212; margin-right: 10px;">
<div style="width: 170px; margin:auto;">
<div style="width: 170px; height: 245px; float: left;padding:10px 0; overflow: hidden;">
<div style="width: 170px; overflow: auto; height: 102%;float: left; padding-right: 20px;">
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<a href="jaecomponents" title="Click to read">
<img src="https://i.imgur.com/sSv2mZG.jpg"/>
</a>
</div>
</div>
</div>
<!-- description -->
<div style="width: 170px; height: 250px; float: left; overflow: hidden; border-top: 1px solid rgba(240, 240, 240, 0.1);">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; color:rgba(240, 240, 240, 0.2);">
description
</span>
<span style="float: left; line-height: 14px;padding-bottom: 50px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</span>
</div>
</div>
</div>
<!-- end of description -->
</div>
</div>
<div class="" style="width: 100%; float: left; background: #121212; height: 50px; padding-top:5px; margin-top: -50px; opacity: 0.8;">
<div class="profile-bar__content" style="opacity: 0.9999999; float: left;padding:3px 10px;">
<a href="jaecomponents" style="float: left; line-height: 1.25em;">
<span class="block" style="text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 1px;line-height: 10px; float: left;">
Title
</span><br>
<span style="font-size: 11px; letter-spacing: 1px;line-height: 5px; float: left; ">
character x oc
</span>
</a>
</div>
</div>
</div>
</div>
<!-- end of one story section -->
<!-- one story section -->
<div style="height: 100%; width: 180px; float: left; background:#121212; margin-right: 10px;">
<div style="width: 170px; margin:auto;">
<div style="width: 170px; height: 245px; float: left;padding:10px 0; overflow: hidden;">
<div style="width: 170px; overflow: auto; height: 102%;float: left; padding-right: 20px;">
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<a href="jaecomponents" title="Click to read">
<img src="https://i.imgur.com/8jHfbkI.jpg"/>
</a>
</div>
</div>
</div>
<!-- description -->
<div style="width: 170px; height: 250px; float: left; overflow: hidden; border-top: 1px solid rgba(240, 240, 240, 0.1);">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; color:rgba(240, 240, 240, 0.2);">
description
</span>
<span style="float: left; line-height: 14px;padding-bottom: 50px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</span>
</div>
</div>
</div>
<!-- end of description -->
</div>
</div>
<div class="" style="width: 100%; float: left; background: #121212; height: 50px; padding-top:5px; margin-top: -50px; opacity: 0.8;">
<div class="profile-bar__content" style="opacity: 0.9999999; float: left;padding:3px 10px;">
<a href="jaecomponents" style="float: left; line-height: 1.25em;">
<span class="block" style="text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 1px;line-height: 10px; float: left;">
Title
</span><br>
<span style="font-size: 11px; letter-spacing: 1px;line-height: 5px; float: left; ">
character x oc
</span>
</a>
</div>
</div>
</div>
</div>
<!-- end of one story section -->
<!-- one story section -->
<div style="height: 100%; width: 180px; float: left; background:#121212; margin-right: 10px;">
<div style="width: 170px; margin:auto;">
<div style="width: 170px; height: 245px; float: left;padding:10px 0; overflow: hidden;">
<div style="width: 170px; overflow: auto; height: 102%;float: left; padding-right: 20px;">
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<a href="jaecomponents" title="Click to read">
<img src="https://i.imgur.com/WyYiGKd.jpg"/>
</a>
</div>
</div>
</div>
<!-- description -->
<div style="width: 170px; height: 250px; float: left; overflow: hidden; border-top: 1px solid rgba(240, 240, 240, 0.1);">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; color:rgba(240, 240, 240, 0.2);">
description
</span>
<span style="float: left; line-height: 14px;padding-bottom: 50px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</span>
</div>
</div>
</div>
<!-- end of description -->
</div>
</div>
<div class="" style="width: 100%; float: left; background: #121212; height: 50px; padding-top:5px; margin-top: -50px; opacity: 0.8;">
<div class="profile-bar__content" style="opacity: 0.9999999; float: left;padding:3px 10px;">
<a href="jaecomponents" style="float: left; line-height: 1.25em;">
<span class="block" style="text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 1px;line-height: 10px; float: left;">
Title
</span><br>
<span style="font-size: 11px; letter-spacing: 1px;line-height: 5px; float: left; ">
character x oc
</span>
</a>
</div>
</div>
</div>
</div>
<!-- end of one story section -->
<!-- one story section -->
<div style="height: 100%; width: 180px; float: left; background:#121212; margin-right: 10px;">
<div style="width: 170px; margin:auto;">
<div style="width: 170px; height: 245px; float: left;padding:10px 0; overflow: hidden;">
<div style="width: 170px; overflow: auto; height: 102%;float: left; padding-right: 20px;">
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<a href="jaecomponents" title="Click to read">
<img src="https://i.imgur.com/gP0BHgu.jpg"/>
</a>
</div>
</div>
</div>
<!-- description -->
<div style="width: 170px; height: 250px; float: left; overflow: hidden; border-top: 1px solid rgba(240, 240, 240, 0.1);">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; color:rgba(240, 240, 240, 0.2);">
description
</span>
<span style="float: left; line-height: 14px;padding-bottom: 50px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</span>
</div>
</div>
</div>
<!-- end of description -->
</div>
</div>
<div class="" style="width: 100%; float: left; background: #121212; height: 50px; padding-top:5px; margin-top: -50px; opacity: 0.8;">
<div class="profile-bar__content" style="opacity: 0.9999999; float: left;padding:3px 10px;">
<a href="jaecomponents" style="float: left; line-height: 1.25em;">
<span class="block" style="text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 1px;line-height: 10px; float: left;">
Title
</span><br>
<span style="font-size: 11px; letter-spacing: 1px;line-height: 5px; float: left; ">
character x oc
</span>
</a>
</div>
</div>
</div>
</div>
<!-- end of one story section -->
<!-- one story section -->
<div style="height: 100%; width: 180px; float: left; background:#121212; margin-right: 10px;">
<div style="width: 170px; margin:auto;">
<div style="width: 170px; height: 245px; float: left;padding:10px 0; overflow: hidden;">
<div style="width: 170px; overflow: auto; height: 102%;float: left; padding-right: 20px;">
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<a href="jaecomponents" title="Click to read">
<img src="https://i.imgur.com/mvdSkKu.jpg"/>
</a>
</div>
</div>
</div>
<!-- description -->
<div style="width: 170px; height: 250px; float: left; overflow: hidden; border-top: 1px solid rgba(240, 240, 240, 0.1);">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; color:rgba(240, 240, 240, 0.2);">
description
</span>
<span style="float: left; line-height: 14px;padding-bottom: 50px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</span>
</div>
</div>
</div>
<!-- end of description -->
</div>
</div>
<div class="" style="width: 100%; float: left; background: #121212; height: 50px; padding-top:5px; margin-top: -50px; opacity: 0.8;">
<div class="profile-bar__content" style="opacity: 0.9999999; float: left;padding:3px 10px;">
<a href="jaecomponents" style="float: left; line-height: 1.25em;">
<span class="block" style="text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 1px;line-height: 10px; float: left;">
Title
</span><br>
<span style="font-size: 11px; letter-spacing: 1px;line-height: 5px; float: left; ">
character x oc
</span>
</a>
</div>
</div>
</div>
</div>
<!-- end of one story section -->
<!-- one story section -->
<div style="height: 100%; width: 180px; float: left; background:#121212; margin-right: 10px;">
<div style="width: 170px; margin:auto;">
<div style="width: 170px; height: 245px; float: left;padding:10px 0; overflow: hidden;">
<div style="width: 170px; overflow: auto; height: 102%;float: left; padding-right: 20px;">
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<a href="jaecomponents" title="Click to read">
<img src="https://i.imgur.com/UCkqYVv.jpg"/>
</a>
</div>
</div>
</div>
<!-- description -->
<div style="width: 170px; height: 250px; float: left; overflow: hidden; border-top: 1px solid rgba(240, 240, 240, 0.1);">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; color:rgba(240, 240, 240, 0.2);">
description
</span>
<span style="float: left; line-height: 14px;padding-bottom: 50px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</span>
</div>
</div>
</div>
<!-- end of description -->
</div>
</div>
<div class="" style="width: 100%; float: left; background: #121212; height: 50px; padding-top:5px; margin-top: -50px; opacity: 0.8;">
<div class="profile-bar__content" style="opacity: 0.9999999; float: left;padding:3px 10px;">
<a href="jaecomponents" style="float: left; line-height: 1.25em;">
<span class="block" style="text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 1px;line-height: 10px; float: left;">
Title
</span><br>
<span style="font-size: 11px; letter-spacing: 1px;line-height: 5px; float: left; ">
character x oc
</span>
</a>
</div>
</div>
</div>
</div>
<!-- end of one story section -->
</div>
</div>
</div>
</div>
</div>
<!-- end of box -->
<!-- right box -->
<div class="sympl quarter" style="padding: 0; height: 100%;">
<div style="width: 88%; margin:10px auto; ">
<div style="width: 100%; height: 270px; overflow: hidden; float: left;">
<div style="width: 100%; height: 100%; overflow: auto; padding-right:20px;float: left;">
<!-- section -->
<div class="profile-bar__content" style="width: 100%; float: left; margin: 10px 0;">
<!-- section title -->
<div style=" text-transform: uppercase; letter-spacing: 2px; color: rgba(240, 240, 240, 0.4);font-size: 10px; margin-bottom: 7px;">celebrity</div>
<!-- end of section title -->
<a href="jaecomponents"><span style="background:#121512; border-radius:10px; float: left; padding: 0 5px; font-size: 11px; letter-spacing: 1px; float: left;"><span class="completed">✓</span> Story Title</span></a><br>
<a href="jaecomponents"><span style="background:#121512; border-radius:10px; float: left; padding: 0 5px; font-size: 11px; letter-spacing: 1px;float: left;"">Very Long Story Title</span></a><br>
<a href="jaecomponents"><span style="background:#121512; border-radius:10px; float: left; padding: 0 5px; font-size: 11px; letter-spacing: 1px;float: left;"">Long Title</span></a>
</div>
<!-- end of section -->
<!-- section -->
<div class="profile-bar__content" style="width: 100%; float: left; margin-bottom: 10px;">
<!-- section title -->
<div style=" text-transform: uppercase; letter-spacing: 2px; color: rgba(240, 240, 240, 0.4);font-size: 10px; margin-bottom: 7px;">celebrity</div>
<!-- end of section title -->
<a href="jaecomponents"><span style="background:#121512; border-radius:10px; float: left; padding: 0 5px; font-size: 11px; letter-spacing: 1px; float: left;"><span style="color:#ffe13f">★</span> Story Title</span></a><br>
<a href="jaecomponents"><span style="background:#121512; border-radius:10px; float: left; padding: 0 5px; font-size: 11px; letter-spacing: 1px;float: left;"">Long Story Title</span></a><br>
<a href="jaecomponents"><span style="background:#121512; border-radius:10px; float: left; padding: 0 5px; font-size: 11px; letter-spacing: 1px;float: left;"">Very Long Story Title</span></a>
</div>
<!-- end of section -->
<div style="width: 100%;float:left;background:rgba(240, 240, 240, 0.4);height: 1px; margin-top: 10px;">&nbsp;</div>
<!-- about section -->
<div style="width: 100%; float: left;opacity: 0.4;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; font-size: 10px;">
about me
</span>
<span style="float: left; line-height: 12px;padding-bottom: 50px; text-align: justify;font-size: 10px; ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
</div>
<!-- end of about section -->
</div>
</div>
</div>
</div>
<!-- end of right box -->
</div>
<div class="stack" style="padding: 6px 10px 6px 15px; background: #080A07; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-top:rgba(240, 240, 240, 0.1) solid 1px ">
<div class="sympl full" style=" padding:0;">
<!-- links -->
<div style="font-size: 9px;text-transform: uppercase; letter-spacing: 1.5px; color: rgba(240, 240, 240, 0.3); float: left;">
<a href="jaecomponents" style="color: #f0f0f0; ">link</a> |
<a href="jaecomponents" style="color: #f0f0f0; ">link</a> |
<a href="jaecomponents" style="color: #f0f0f0; ">link</a> |
<a href="jaecomponents" style="color: #f0f0f0; ">link</a>
</div>
<!-- end of links -->
<!-- !! DO NOT REMOVE !! -->
<div style="font-size: 9px;text-transform: uppercase; letter-spacing: 1.5px; float: right;">
<a href="https://www.asianfanfics.com/story/view/1095296/" style="color: #f0f0f0;" title="Designed and coded by JaeKnight"><span style="height: 100%;padding: 0 5px;">jaecomponents</span></a>
</div>
</div>
</div>
</div>
</div>
Raw
2 - Dark (Ver 1.0 - 2020)
<div style="width:80%; margin:auto">
<div style="width: 100%; float: left; margin:30px 0; color: #f0f0f0; font-family: arial; font-size: 12px; border-radius: 20px;">
<div class="stack">
<div class="sympl full" style="border-top-left-radius: 22px; border-top-right-radius: 20px; background:#0C0F0A; line-height: 15px; padding:0; border-bottom:rgba(240, 240, 240, 0.1) solid 1px ">
<div style="padding:15px 10px 10px 15px; float: left;">
<span style="font-weight: 700; font-size: 14px;text-transform: uppercase;">Gyalchester</span><br>
<span style="font-weight: 100; letter-spacing: 0.6px; ">subtitle</span>
</div>
<div style="float:right; padding:20px 25px 21px 25px; background:#0C0F0A; border-top-right-radius: 20px;">x</div>
</div>
</div>
<div class="stack" style="background:#0C0F0A">
<!-- left box -->
<div class="sympl fourfifths" style="padding:0; height: 100%; background: #080A07;">
<div style="width: 95%; margin:2% auto;height: 92%;">
<div style="width:100%; float:left; height: 287px; overflow: hidden; padding: 10px 0;">
<div style="width: 100%; float: left; overflow: auto; height: 100%; padding-bottom: 27px;">
<!-- [1] change width -->
<div style="width: 1330px; float: left; ">
<!-- one story section -->
<div style="height: 100%; width: 180px; float: left; background:#121212; margin-right: 10px;">
<div style="width: 170px; margin:auto;">
<div style="width: 170px; height: 245px; float: left;padding:10px 0; overflow: hidden;">
<div style="width: 170px; overflow: auto; height: 102%;float: left; padding-right: 20px;">
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<a href="jaecomponents" title="Click to read">
<img src="https://i.imgur.com/dq5VbXO.jpg"/>
</a>
</div>
</div>
</div>
<!-- description -->
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; color:rgba(240, 240, 240, 0.2);">
description
</span>
<span style="float: left; line-height: 14px;padding-bottom: 50px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</span>
</div>
</div>
</div>
<!-- end of description -->
</div>
</div>
<div class="" style="width: 100%; float: left; background: #121212; height: 50px; padding-top:5px; margin-top: -50px; opacity: 0.8;">
<div class="profile-bar__content" style="opacity: 0.9999999; float: left;padding:3px 10px;">
<a href="jaecomponents" style="float: left; line-height: 1.25em;">
<span class="block" style="text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 1px;line-height: 10px; float: left;">
Title
</span><br>
<span style="font-size: 11px; letter-spacing: 1px;line-height: 5px; float: left; ">
character x oc
</span>
</a>
</div>
</div>
</div>
</div>
<!-- end of one story section -->
<!-- one story section -->
<div style="height: 100%; width: 180px; float: left; background:#121212; margin-right: 10px;">
<div style="width: 170px; margin:auto;">
<div style="width: 170px; height: 245px; float: left;padding:10px 0; overflow: hidden;">
<div style="width: 170px; overflow: auto; height: 102%;float: left; padding-right: 20px;">
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<a href="jaecomponents" title="Click to read">
<img src="https://i.imgur.com/24Ut2Lk.jpg"/>
</a>
</div>
</div>
</div>
<!-- description -->
<div style="width: 170px; height: 250px; float: left; overflow: hidden; border-top: 1px solid rgba(240, 240, 240, 0.1);">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; color:rgba(240, 240, 240, 0.2);">
description
</span>
<span style="float: left; line-height: 14px;padding-bottom: 50px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</span>
</div>
</div>
</div>
<!-- end of description -->
</div>
</div>
<div class="" style="width: 100%; float: left; background: #121212; height: 50px; padding-top:5px; margin-top: -50px; opacity: 0.8;">
<div class="profile-bar__content" style="opacity: 0.9999999; float: left;padding:3px 10px;">
<a href="jaecomponents" style="float: left; line-height: 1.25em;">
<span class="block" style="text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 1px;line-height: 10px; float: left;">
Title
</span><br>
<span style="font-size: 11px; letter-spacing: 1px;line-height: 5px; float: left; ">
character x oc
</span>
</a>
</div>
</div>
</div>
</div>
<!-- end of one story section -->
<!-- one story section -->
<div style="height: 100%; width: 180px; float: left; background:#121212; margin-right: 10px;">
<div style="width: 170px; margin:auto;">
<div style="width: 170px; height: 245px; float: left;padding:10px 0; overflow: hidden;">
<div style="width: 170px; overflow: auto; height: 102%;float: left; padding-right: 20px;">
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<a href="jaecomponents" title="Click to read">
<img src="https://i.imgur.com/cKQb1NW.jpg"/>
</a>
</div>
</div>
</div>
<!-- description -->
<div style="width: 170px; height: 250px; float: left; overflow: hidden; border-top: 1px solid rgba(240, 240, 240, 0.1);">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; color:rgba(240, 240, 240, 0.2);">
description
</span>
<span style="float: left; line-height: 14px;padding-bottom: 50px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</span>
</div>
</div>
</div>
<!-- end of description -->
</div>
</div>
<div class="" style="width: 100%; float: left; background: #121212; height: 50px; padding-top:5px; margin-top: -50px; opacity: 0.8;">
<div class="profile-bar__content" style="opacity: 0.9999999; float: left;padding:3px 10px;">
<a href="jaecomponents" style="float: left; line-height: 1.25em;">
<span class="block" style="text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 1px;line-height: 10px; float: left;">
Title
</span><br>
<span style="font-size: 11px; letter-spacing: 1px;line-height: 5px; float: left; ">
character x oc
</span>
</a>
</div>
</div>
</div>
</div>
<!-- end of one story section -->
<!-- one story section -->
<div style="height: 100%; width: 180px; float: left; background:#121212; margin-right: 10px;">
<div style="width: 170px; margin:auto;">
<div style="width: 170px; height: 245px; float: left;padding:10px 0; overflow: hidden;">
<div style="width: 170px; overflow: auto; height: 102%;float: left; padding-right: 20px;">
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<a href="jaecomponents" title="Click to read">
<img src="https://i.imgur.com/fM98uZQ.jpg"/>
</a>
</div>
</div>
</div>
<!-- description -->
<div style="width: 170px; height: 250px; float: left; overflow: hidden; border-top: 1px solid rgba(240, 240, 240, 0.1);">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; color:rgba(240, 240, 240, 0.2);">
description
</span>
<span style="float: left; line-height: 14px;padding-bottom: 50px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</span>
</div>
</div>
</div>
<!-- end of description -->
</div>
</div>
<div class="" style="width: 100%; float: left; background: #121212; height: 50px; padding-top:5px; margin-top: -50px; opacity: 0.8;">
<div class="profile-bar__content" style="opacity: 0.9999999; float: left;padding:3px 10px;">
<a href="jaecomponents" style="float: left; line-height: 1.25em;">
<span class="block" style="text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 1px;line-height: 10px; float: left;">
Title
</span><br>
<span style="font-size: 11px; letter-spacing: 1px;line-height: 5px; float: left; ">
character x oc
</span>
</a>
</div>
</div>
</div>
</div>
<!-- end of one story section -->
<!-- one story section -->
<div style="height: 100%; width: 180px; float: left; background:#121212; margin-right: 10px;">
<div style="width: 170px; margin:auto;">
<div style="width: 170px; height: 245px; float: left;padding:10px 0; overflow: hidden;">
<div style="width: 170px; overflow: auto; height: 102%;float: left; padding-right: 20px;">
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<a href="jaecomponents" title="Click to read">
<img src="https://i.imgur.com/ixGHPPg.jpg"/>
</a>
</div>
</div>
</div>
<!-- description -->
<div style="width: 170px; height: 250px; float: left; overflow: hidden; border-top: 1px solid rgba(240, 240, 240, 0.1);">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; color:rgba(240, 240, 240, 0.2);">
description
</span>
<span style="float: left; line-height: 14px;padding-bottom: 50px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</span>
</div>
</div>
</div>
<!-- end of description -->
</div>
</div>
<div class="" style="width: 100%; float: left; background: #121212; height: 50px; padding-top:5px; margin-top: -50px; opacity: 0.8;">
<div class="profile-bar__content" style="opacity: 0.9999999; float: left;padding:3px 10px;">
<a href="jaecomponents" style="float: left; line-height: 1.25em;">
<span class="block" style="text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 1px;line-height: 10px; float: left;">
Title
</span><br>
<span style="font-size: 11px; letter-spacing: 1px;line-height: 5px; float: left; ">
character x oc
</span>
</a>
</div>
</div>
</div>
</div>
<!-- end of one story section -->
<!-- one story section -->
<div style="height: 100%; width: 180px; float: left; background:#121212; margin-right: 10px;">
<div style="width: 170px; margin:auto;">
<div style="width: 170px; height: 245px; float: left;padding:10px 0; overflow: hidden;">
<div style="width: 170px; overflow: auto; height: 102%;float: left; padding-right: 20px;">
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<a href="jaecomponents" title="Click to read">
<img src="https://i.imgur.com/YRHnMx9.jpg"/>
</a>
</div>
</div>
</div>
<!-- description -->
<div style="width: 170px; height: 250px; float: left; overflow: hidden; border-top: 1px solid rgba(240, 240, 240, 0.1);">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; color:rgba(240, 240, 240, 0.2);">
description
</span>
<span style="float: left; line-height: 14px;padding-bottom: 50px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</span>
</div>
</div>
</div>
<!-- end of description -->
</div>
</div>
<div class="" style="width: 100%; float: left; background: #121212; height: 50px; padding-top:5px; margin-top: -50px; opacity: 0.8;">
<div class="profile-bar__content" style="opacity: 0.9999999; float: left;padding:3px 10px;">
<a href="jaecomponents" style="float: left; line-height: 1.25em;">
<span class="block" style="text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 1px;line-height: 10px; float: left;">
Title
</span><br>
<span style="font-size: 11px; letter-spacing: 1px;line-height: 5px; float: left; ">
character x oc
</span>
</a>
</div>
</div>
</div>
</div>
<!-- end of one story section -->
<!-- one story section -->
<div style="height: 100%; width: 180px; float: left; background:#121212; margin-right: 10px;">
<div style="width: 170px; margin:auto;">
<div style="width: 170px; height: 245px; float: left;padding:10px 0; overflow: hidden;">
<div style="width: 170px; overflow: auto; height: 102%;float: left; padding-right: 20px;">
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<a href="jaecomponents" title="Click to read">
<img src="https://i.imgur.com/NebrDjO.jpg"/>
</a>
</div>
</div>
</div>
<!-- description -->
<div style="width: 170px; height: 250px; float: left; overflow: hidden; border-top: 1px solid rgba(240, 240, 240, 0.1);">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; color:rgba(240, 240, 240, 0.2);">
description
</span>
<span style="float: left; line-height: 14px;padding-bottom: 50px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</span>
</div>
</div>
</div>
<!-- end of description -->
</div>
</div>
<div class="" style="width: 100%; float: left; background: #121212; height: 50px; padding-top:5px; margin-top: -50px; opacity: 0.8;">
<div class="profile-bar__content" style="opacity: 0.9999999; float: left;padding:3px 10px;">
<a href="jaecomponents" style="float: left; line-height: 1.25em;">
<span class="block" style="text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 1px;line-height: 10px; float: left;">
Title
</span><br>
<span style="font-size: 11px; letter-spacing: 1px;line-height: 5px; float: left; ">
character x oc
</span>
</a>
</div>
</div>
</div>
</div>
<!-- end of one story section -->
</div>
</div>
</div>
</div>
</div>
<!-- end of box -->
<!-- right box -->
<div class="sympl onefifth" style="padding: 0; height: 100%;">
<div style="width: 88%; margin:10px auto; ">
<div style="width: 100%; height: 270px; overflow: hidden; float: left;">
<div style="width: 100%; height: 100%; overflow: auto; padding-right:20px;float: left;">
<!-- section -->
<div class="profile-bar__content" style="width: 100%; float: left; margin: 10px 0;">
<!-- section title -->
<div style=" text-transform: uppercase; letter-spacing: 2px; color: rgba(240, 240, 240, 0.4);font-size: 10px; margin-bottom: 7px;">celebrity</div>
<!-- end of section title -->
<a href="jaecomponents"><span style="background:#121512; border-radius:10px; float: left; padding: 0 5px; font-size: 11px; letter-spacing: 1px; float: left;"><span class="completed">✓</span> Story Title</span></a><br>
<a href="jaecomponents"><span style="background:#121512; border-radius:10px; float: left; padding: 0 5px; font-size: 11px; letter-spacing: 1px;float: left;"">Very Long Story Title</span></a><br>
<a href="jaecomponents"><span style="background:#121512; border-radius:10px; float: left; padding: 0 5px; font-size: 11px; letter-spacing: 1px;float: left;"">Long Title</span></a>
</div>
<!-- end of section -->
<!-- section -->
<div class="profile-bar__content" style="width: 100%; float: left; margin-bottom: 10px;">
<!-- section title -->
<div style=" text-transform: uppercase; letter-spacing: 2px; color: rgba(240, 240, 240, 0.4);font-size: 10px; margin-bottom: 7px;">celebrity</div>
<!-- end of section title -->
<a href="jaecomponents"><span style="background:#121512; border-radius:10px; float: left; padding: 0 5px; font-size: 11px; letter-spacing: 1px; float: left;"><span style="color:#ffe13f">★</span> Story Title</span></a><br>
<a href="jaecomponents"><span style="background:#121512; border-radius:10px; float: left; padding: 0 5px; font-size: 11px; letter-spacing: 1px;float: left;"">Long Story Title</span></a><br>
<a href="jaecomponents"><span style="background:#121512; border-radius:10px; float: left; padding: 0 5px; font-size: 11px; letter-spacing: 1px;float: left;"">Very Long Story Title</span></a>
</div>
<!-- end of section -->
<div style="width: 100%;float:left;background:rgba(240, 240, 240, 0.4);height: 1px; margin-top: 10px;">&nbsp;</div>
<!-- about section -->
<div style="width: 100%; float: left;opacity: 0.4;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; font-size: 10px;">
about me
</span>
<span style="float: left; line-height: 12px;padding-bottom: 50px; text-align: justify;font-size: 10px; ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
</div>
<!-- end of about section -->
</div>
</div>
</div>
</div>
<!-- end of right box -->
</div>
<div class="stack" style="padding: 6px 10px 6px 30px; background: #080A07; border-bottom-left-radius: 22px; border-bottom-right-radius: 20px; border-top:rgba(240, 240, 240, 0.1) solid 1px ">
<div class="sympl full" style=" padding:0;">
<!-- links -->
<div style="font-size: 9px;text-transform: uppercase; letter-spacing: 1.5px; color: rgba(240, 240, 240, 0.3); float: left;">
<a href="jaecomponents" style="color: #f0f0f0; ">link</a> |
<a href="jaecomponents" style="color: #f0f0f0; ">link</a> |
<a href="jaecomponents" style="color: #f0f0f0; ">link</a> |
<a href="jaecomponents" style="color: #f0f0f0; ">link</a>
</div>
<!-- end of links -->
<!-- !! DO NOT REMOVE !! -->
<div style="font-size: 9px;text-transform: uppercase; letter-spacing: 1.5px; float: right;">
<a href="https://www.asianfanfics.com/story/view/1095296/" style="color: #f0f0f0;" title="Designed and coded by JaeKnight"><span style="height: 100%;padding: 0 5px;">jaecomponents</span></a>
</div>
</div>
</div>
</div>
</div>
Raw
3 - Notes for both Light modes (2020 and 2021 versions)
PLEASE READ FOR LIGHT VERSION
-The light version has more than a few differences on code from the dark one. I did not only change the colors here. So, if you're planning to change the color theme, I suggest choose which version is closest to your ideal theme.
For example, your choice of palette is dark, then copy the dark version. Otherwise, choose the light verion
HOW TO KNOW WHICH ONE SHOULD YOU CHOOSE?
-If you want your /text/ light (e.g. white), choose the dark version.
-If you want your /text/ dark (e.g. black), choose the light one.
WHY?
If you notice, there are glowing texts on the finished products when you hover your mouse on it. But if you don't care much about the glowing texts, and you want to customize you own color texts, then feel free to ignore this note and choose whichever your prefer
Raw
4 - Light (Ver 2.0 - 2021)
<div style="width:80%; margin:auto">
<div style="width: 100%; float: left; margin:30px 0; color: #373737; font-family: arial; font-size: 12px; border-radius: 6px;">
<div class="stack">
<div class="sympl full" style="border-top-left-radius: 6px; border-top-right-radius: 6px; background:#f9f9f9; line-height: 15px; padding:0; border:#eee 1px solid; ">
<div style="padding:15px 10px 10px 15px; float: left;">
<span style="font-weight: 700; font-size: 14px;text-transform: uppercase;">Gyalchester</span><br>
<span style="font-weight: 100; letter-spacing: 0.6px; ">Hermès link, ice-blue mink</span>
</div>
<div style="float:right; padding:20px 25px 21px 25px; background:#f9f9f9; border-top-right-radius: 6px;border-bottom-right-radius: 6px;">x</div>
</div>
</div>
<div class="stack" style="background:#f9f9f9; border-left:#eee 1px solid; border-right:#eee 1px solid; ">
<!-- left box -->
<div class="sympl three-quarters" style="padding:0; height: 100%; background: #fcfcfc;">
<div style="width: 95%; margin:2% auto;height: 92%;">
<div style="width:100%; float:left; height: 287px; overflow: hidden; padding: 10px 0;">
<div style="width: 100%; float: left; overflow: auto; height: 100%; padding-bottom: 27px;">
<!-- [1] change width -->
<div style="width: 1330px; float: left; ">
<!-- one story section -->
<div style="height: 100%; width: 180px; float: left; background:#ffffff; border: 1px solid #eee; margin-left: -1px; margin-right: 9px;">
<div style="width: 170px; margin:auto;">
<div style="width: 170px; height: 245px; float: left;padding:10px 0; overflow: hidden;">
<div style="width: 170px; overflow: auto; height: 102%;float: left; padding-right: 20px;">
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<a href="jaecomponents" title="Click to read">
<img src="https://i.imgur.com/gP0BHgu.jpg"/>
</a>
</div>
</div>
</div>
<!-- description -->
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; color:rgba(126, 126, 126, 0.3);">
description
</span>
<span style="float: left; line-height: 14px;padding-bottom: 50px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</span>
</div>
</div>
</div>
<!-- end of description -->
</div>
</div>
<div class="" style="width: 100%; float: left; background: #ffffff; height: 50px; padding-top:5px; margin-top: -50px; opacity: 0.8;">
<div class="excerpt__meta" style="opacity: 0.9999999; float: left;padding:3px 10px;">
<a href="jaecomponents" style="float: left; line-height: 1.25em; border-bottom: none;">
<span class="block" style="text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 1px;line-height: 10px; float: left;">
Title
</span><br>
<span style="font-size: 11px; letter-spacing: 1px;line-height: 5px; float: left;">
character x oc
</span>
</a>
</div>
</div>
</div>
</div>
<!-- end of one story section -->
<!-- one story section -->
<div style="height: 100%; width: 180px; float: left; background:#ffffff; border: 1px solid #eee; margin-left: -1px; margin-right: 9px;">
<div style="width: 170px; margin:auto;">
<div style="width: 170px; height: 245px; float: left;padding:10px 0; overflow: hidden;">
<div style="width: 170px; overflow: auto; height: 102%;float: left; padding-right: 20px;">
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<a href="jaecomponents" title="Click to read">
<img src="https://i.imgur.com/sSv2mZG.jpg"/>
</a>
</div>
</div>
</div>
<!-- description -->
<div style="width: 170px; height: 250px; float: left; overflow: hidden; border-top: 1px solid rgba(126, 126, 126, 0.1);">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; color:rgba(126, 126, 126, 0.3);">
description
</span>
<span style="float: left; line-height: 14px;padding-bottom: 50px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</span>
</div>
</div>
</div>
<!-- end of description -->
</div>
</div>
<div class="" style="width: 100%; float: left; background: #ffffff; height: 50px; padding-top:5px; margin-top: -50px; opacity: 0.8;">
<div class="excerpt__meta" style="opacity: 0.9999999; float: left;padding:3px 10px;">
<a href="jaecomponents" style="float: left; line-height: 1.25em; border-bottom: none;">
<span class="block" style="text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 1px;line-height: 10px; float: left;">
Title
</span><br>
<span style="font-size: 11px; letter-spacing: 1px;line-height: 5px; float: left; ">
character x oc
</span>
</a>
</div>
</div>
</div>
</div>
<!-- end of one story section -->
<!-- one story section -->
<div style="height: 100%; width: 180px; float: left; background:#ffffff; border: 1px solid #eee; margin-left: -1px; margin-right: 9px;">
<div style="width: 170px; margin:auto;">
<div style="width: 170px; height: 245px; float: left;padding:10px 0; overflow: hidden;">
<div style="width: 170px; overflow: auto; height: 102%;float: left; padding-right: 20px;">
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<a href="jaecomponents" title="Click to read">
<img src="https://i.imgur.com/8jHfbkI.jpg"/>
</a>
</div>
</div>
</div>
<!-- description -->
<div style="width: 170px; height: 250px; float: left; overflow: hidden; border-top: 1px solid rgba(126, 126, 126, 0.1);">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; color:rgba(126, 126, 126, 0.3);">
description
</span>
<span style="float: left; line-height: 14px;padding-bottom: 50px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</span>
</div>
</div>
</div>
<!-- end of description -->
</div>
</div>
<div class="" style="width: 100%; float: left; background: #ffffff; height: 50px; padding-top:5px; margin-top: -50px; opacity: 0.8;">
<div class="excerpt__meta" style="opacity: 0.9999999; float: left;padding:3px 10px;">
<a href="jaecomponents" style="float: left; line-height: 1.25em; border-bottom: none;">
<span class="block" style="text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 1px;line-height: 10px; float: left;">
Title
</span><br>
<span style="font-size: 11px; letter-spacing: 1px;line-height: 5px; float: left; ">
character x oc
</span>
</a>
</div>
</div>
</div>
</div>
<!-- end of one story section -->
<!-- one story section -->
<div style="height: 100%; width: 180px; float: left; background:#ffffff; border: 1px solid #eee; margin-left: -1px; margin-right: 9px;">
<div style="width: 170px; margin:auto;">
<div style="width: 170px; height: 245px; float: left;padding:10px 0; overflow: hidden;">
<div style="width: 170px; overflow: auto; height: 102%;float: left; padding-right: 20px;">
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<a href="jaecomponents" title="Click to read">
<img src="https://i.imgur.com/WyYiGKd.jpg"/>
</a>
</div>
</div>
</div>
<!-- description -->
<div style="width: 170px; height: 250px; float: left; overflow: hidden; border-top: 1px solid rgba(126, 126, 126, 0.1);">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; color:rgba(126, 126, 126, 0.3);">
description
</span>
<span style="float: left; line-height: 14px;padding-bottom: 50px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</span>
</div>
</div>
</div>
<!-- end of description -->
</div>
</div>
<div class="" style="width: 100%; float: left; background: #ffffff; height: 50px; padding-top:5px; margin-top: -50px; opacity: 0.8;">
<div class="excerpt__meta" style="opacity: 0.9999999; float: left;padding:3px 10px;">
<a href="jaecomponents" style="float: left; line-height: 1.25em; border-bottom: none;">
<span class="block" style="text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 1px;line-height: 10px; float: left;">
Title
</span><br>
<span style="font-size: 11px; letter-spacing: 1px;line-height: 5px; float: left; ">
character x oc
</span>
</a>
</div>
</div>
</div>
</div>
<!-- end of one story section -->
<!-- one story section -->
<div style="height: 100%; width: 180px; float: left; background:#ffffff; border: 1px solid #eee; margin-left: -1px; margin-right: 9px;">
<div style="width: 170px; margin:auto;">
<div style="width: 170px; height: 245px; float: left;padding:10px 0; overflow: hidden;">
<div style="width: 170px; overflow: auto; height: 102%;float: left; padding-right: 20px;">
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<a href="jaecomponents" title="Click to read">
<img src="https://i.imgur.com/mvdSkKu.jpg"/>
</a>
</div>
</div>
</div>
<!-- description -->
<div style="width: 170px; height: 250px; float: left; overflow: hidden; border-top: 1px solid rgba(126, 126, 126, 0.1);">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; color:rgba(126, 126, 126, 0.3);">
description
</span>
<span style="float: left; line-height: 14px;padding-bottom: 50px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</span>
</div>
</div>
</div>
<!-- end of description -->
</div>
</div>
<div class="" style="width: 100%; float: left; background: #ffffff; height: 50px; padding-top:5px; margin-top: -50px; opacity: 0.8;">
<div class="excerpt__meta" style="opacity: 0.9999999; float: left;padding:3px 10px;">
<a href="jaecomponents" style="float: left; line-height: 1.25em; border-bottom: none;">
<span class="block" style="text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 1px;line-height: 10px; float: left;">
Title
</span><br>
<span style="font-size: 11px; letter-spacing: 1px;line-height: 5px; float: left; ">
character x oc
</span>
</a>
</div>
</div>
</div>
</div>
<!-- end of one story section -->
<!-- one story section -->
<div style="height: 100%; width: 180px; float: left; background:#ffffff; border: 1px solid #eee; margin-left: -1px; margin-right: 9px;">
<div style="width: 170px; margin:auto;">
<div style="width: 170px; height: 245px; float: left;padding:10px 0; overflow: hidden;">
<div style="width: 170px; overflow: auto; height: 102%;float: left; padding-right: 20px;">
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<a href="jaecomponents" title="Click to read">
<img src="https://i.imgur.com/gP0BHgu.jpg"/>
</a>
</div>
</div>
</div>
<!-- description -->
<div style="width: 170px; height: 250px; float: left; overflow: hidden; border-top: 1px solid rgba(126, 126, 126, 0.1);">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; color:rgba(126, 126, 126, 0.3);">
description
</span>
<span style="float: left; line-height: 14px;padding-bottom: 50px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</span>
</div>
</div>
</div>
<!-- end of description -->
</div>
</div>
<div class="" style="width: 100%; float: left; background: #ffffff; height: 50px; padding-top:5px; margin-top: -50px; opacity: 0.8;">
<div class="excerpt__meta" style="opacity: 0.9999999; float: left;padding:3px 10px;">
<a href="jaecomponents" style="float: left; line-height: 1.25em; border-bottom: none;">
<span class="block" style="text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 1px;line-height: 10px; float: left;">
Title
</span><br>
<span style="font-size: 11px; letter-spacing: 1px;line-height: 5px; float: left; ">
character x oc
</span>
</a>
</div>
</div>
</div>
</div>
<!-- end of one story section -->
<!-- one story section -->
<div style="height: 100%; width: 180px; float: left; background:#ffffff; border: 1px solid #eee; margin-left: -1px; margin-right: 9px;">
<div style="width: 170px; margin:auto;">
<div style="width: 170px; height: 245px; float: left;padding:10px 0; overflow: hidden;">
<div style="width: 170px; overflow: auto; height: 102%;float: left; padding-right: 20px;">
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<a href="jaecomponents" title="Click to read">
<img src="https://i.imgur.com/UCkqYVv.jpg"/>
</a>
</div>
</div>
</div>
<!-- description -->
<div style="width: 170px; height: 250px; float: left; overflow: hidden; border-top: 1px solid rgba(126, 126, 126, 0.1);">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; color:rgba(126, 126, 126, 0.3);">
description
</span>
<span style="float: left; line-height: 14px;padding-bottom: 50px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</span>
</div>
</div>
</div>
<!-- end of description -->
</div>
</div>
<div class="" style="width: 100%; float: left; background: #ffffff; height: 50px; padding-top:5px; margin-top: -50px; opacity: 0.8;">
<div class="excerpt__meta" style="opacity: 0.9999999; float: left;padding:3px 10px;">
<a href="jaecomponents" style="float: left; line-height: 1.25em; border-bottom: none;">
<span class="block" style="text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 1px;line-height: 10px; float: left;">
Title
</span><br>
<span style="font-size: 11px; letter-spacing: 1px;line-height: 5px; float: left; ">
character x oc
</span>
</a>
</div>
</div>
</div>
</div>
<!-- end of one story section -->
</div>
</div>
</div>
</div>
</div>
<!-- end of box -->
<!-- right box -->
<div class="sympl quarter" style="padding: 0; height: 100%;">
<div style="width: 88%; margin:10px auto; ">
<div style="width: 100%; height: 270px; overflow: hidden; float: left;">
<div style="width: 100%; height: 100%; overflow: auto; padding-right:20px;float: left;">
<!-- section -->
<div class="excerpt__meta" style="width: 100%; float: left; margin: 10px 0; line-height: 25px;">
<!-- section title -->
<div style=" text-transform: uppercase; letter-spacing: 2px; color: rgba(126, 126, 126, 0.8);font-size: 10px; margin-bottom: 2px;">section</div>
<!-- end of section title -->
<a href="jaecomponents" style="border-bottom: none;"><span style="background:#eee; border: 1px solid #ddd; border: 1px solid #ddd; border-radius:10px; padding: 3px 5px; font-size: 11px; letter-spacing: 1px; "><span class="completed">✓</span> Story Title</span></a><br>
<a href="jaecomponents" style="border-bottom: none;"><span style="background:#eee; border: 1px solid #ddd; border-radius:10px; padding: 3px 5px; font-size: 11px; letter-spacing: 1px;"">Very Long Story Title</span></a><br>
<a href="jaecomponents" style="border-bottom: none;"><span style="background:#eee; border: 1px solid #ddd; border-radius:10px; padding: 3px 5px; font-size: 11px; letter-spacing: 1px;"">Long Title</span></a>
</div>
<!-- end of section -->
<!-- section -->
<div class="excerpt__meta" style="width: 100%; float: left; margin-bottom: 10px; line-height: 25px;">
<!-- section title -->
<div style=" text-transform: uppercase; letter-spacing: 2px; color: rgba(126, 126, 126, 0.8);font-size: 10px; margin-bottom: 2px;">section</div>
<!-- end of section title -->
<a href="jaecomponents" style="border-bottom: none;"><span style="background:#eee; border: 1px solid #ddd; border-radius:10px; padding: 3px 5px; font-size: 11px; letter-spacing: 1px;"><span style="color:#ffe13f">★</span> Story Title</span></a><br>
<a href="jaecomponents" style="border-bottom: none;"><span style="background:#eee; border: 1px solid #ddd; border-radius:10px; padding: 3px 5px; font-size: 11px; letter-spacing: 1px;"">Long Story Title</span></a><br>
<a href="jaecomponents" style="border-bottom: none;"><span style="background:#eee; border: 1px solid #ddd; border-radius:10px; padding: 3px 5px; font-size: 11px; letter-spacing: 1px;"">Very Long Story Title</span></a>
</div>
<!-- end of section -->
<div style="width: 100%;float:left;background:#ddd;height: 1px; margin-top: 10px;">&nbsp;</div>
<!-- about section -->
<div style="width: 100%; float: left; color: #808080;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; font-size: 10px; ">
about me
</span>
<span style="float: left; line-height: 12px;padding-bottom: 50px; text-align: justify;font-size: 10px; ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
</div>
<!-- end of about section -->
</div>
</div>
</div>
</div>
<!-- end of right box -->
</div>
<div class="stack" style="padding: 6px 10px 6px 30px; background: #fcfcfc; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border:#eee solid 1px ">
<div class="sympl full" style=" padding:0;">
<!-- links -->
<div style="font-size: 9px;text-transform: uppercase; letter-spacing: 1.5px; color: rgba(126, 126, 126, 0.4); float: left;">
<a href="jaecomponents" style="color: #373737; ">link</a> |
<a href="jaecomponents" style="color: #373737; ">link</a> |
<a href="jaecomponents" style="color: #373737; ">link</a> |
<a href="jaecomponents" style="color: #373737; ">link</a>
</div>
<!-- end of links -->
<!-- !! DO NOT REMOVE !! -->
<div style="font-size: 9px;text-transform: uppercase; letter-spacing: 1.5px; float: right;">
<a href="https://www.asianfanfics.com/story/view/1095296/" style="color: #373737;" title="Designed and coded by JaeKnight"><span style="height: 100%;padding: 0 5px;">jaecomponents</span></a>
</div>
</div>
</div>
</div>
</div>
Raw
5 - Light (Ver 1.0 - 2020)
<div style="width:80%; margin:auto">
<div style="width: 100%; float: left; margin:30px 0; color: #373737; font-family: arial; font-size: 12px; border-radius: 20px;">
<div class="stack">
<div class="sympl full" style="border-top-left-radius: 22px; border-top-right-radius: 20px; background:#f9f9f9; line-height: 15px; padding:0; border:#eee 1px solid; ">
<div style="padding:15px 10px 10px 15px; float: left;">
<span style="font-weight: 700; font-size: 14px;text-transform: uppercase;">Gyalchester</span><br>
<span style="font-weight: 100; letter-spacing: 0.6px; ">subtitle</span>
</div>
<div style="float:right; padding:20px 25px 21px 25px; background:#f9f9f9; border-top-right-radius: 20px;border-bottom-right-radius: 20px;">x</div>
</div>
</div>
<div class="stack" style="background:#f9f9f9; border-left:#eee 1px solid; border-right:#eee 1px solid; ">
<!-- left box -->
<div class="sympl fourfifths" style="padding:0; height: 100%; background: #fcfcfc;">
<div style="width: 95%; margin:2% auto;height: 92%;">
<div style="width:100%; float:left; height: 287px; overflow: hidden; padding: 10px 0;">
<div style="width: 100%; float: left; overflow: auto; height: 100%; padding-bottom: 27px;">
<!-- [1] change width -->
<div style="width: 1330px; float: left; ">
<!-- one story section -->
<div style="height: 100%; width: 180px; float: left; background:#ffffff; margin-right: 10px;">
<div style="width: 170px; margin:auto;">
<div style="width: 170px; height: 245px; float: left;padding:10px 0; overflow: hidden;">
<div style="width: 170px; overflow: auto; height: 102%;float: left; padding-right: 20px;">
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<a href="jaecomponents" title="Click to read">
<img src="https://i.imgur.com/dq5VbXO.jpg"/>
</a>
</div>
</div>
</div>
<!-- description -->
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; color:rgba(126, 126, 126, 0.3);">
description
</span>
<span style="float: left; line-height: 14px;padding-bottom: 50px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</span>
</div>
</div>
</div>
<!-- end of description -->
</div>
</div>
<div class="" style="width: 100%; float: left; background: #ffffff; height: 50px; padding-top:5px; margin-top: -50px; opacity: 0.8;">
<div class="excerpt__meta" style="opacity: 0.9999999; float: left;padding:3px 10px;">
<a href="jaecomponents" style="float: left; line-height: 1.25em; border-bottom: none;">
<span class="block" style="text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 1px;line-height: 10px; float: left;">
Title
</span><br>
<span style="font-size: 11px; letter-spacing: 1px;line-height: 5px; float: left;">
character x oc
</span>
</a>
</div>
</div>
</div>
</div>
<!-- end of one story section -->
<!-- one story section -->
<div style="height: 100%; width: 180px; float: left; background:#ffffff; margin-right: 10px;">
<div style="width: 170px; margin:auto;">
<div style="width: 170px; height: 245px; float: left;padding:10px 0; overflow: hidden;">
<div style="width: 170px; overflow: auto; height: 102%;float: left; padding-right: 20px;">
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<a href="jaecomponents" title="Click to read">
<img src="https://i.imgur.com/24Ut2Lk.jpg"/>
</a>
</div>
</div>
</div>
<!-- description -->
<div style="width: 170px; height: 250px; float: left; overflow: hidden; border-top: 1px solid rgba(126, 126, 126, 0.1);">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; color:rgba(126, 126, 126, 0.3);">
description
</span>
<span style="float: left; line-height: 14px;padding-bottom: 50px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</span>
</div>
</div>
</div>
<!-- end of description -->
</div>
</div>
<div class="" style="width: 100%; float: left; background: #ffffff; height: 50px; padding-top:5px; margin-top: -50px; opacity: 0.8;">
<div class="excerpt__meta" style="opacity: 0.9999999; float: left;padding:3px 10px;">
<a href="jaecomponents" style="float: left; line-height: 1.25em; border-bottom: none;">
<span class="block" style="text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 1px;line-height: 10px; float: left;">
Title
</span><br>
<span style="font-size: 11px; letter-spacing: 1px;line-height: 5px; float: left; ">
character x oc
</span>
</a>
</div>
</div>
</div>
</div>
<!-- end of one story section -->
<!-- one story section -->
<div style="height: 100%; width: 180px; float: left; background:#ffffff; margin-right: 10px;">
<div style="width: 170px; margin:auto;">
<div style="width: 170px; height: 245px; float: left;padding:10px 0; overflow: hidden;">
<div style="width: 170px; overflow: auto; height: 102%;float: left; padding-right: 20px;">
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<a href="jaecomponents" title="Click to read">
<img src="https://i.imgur.com/cKQb1NW.jpg"/>
</a>
</div>
</div>
</div>
<!-- description -->
<div style="width: 170px; height: 250px; float: left; overflow: hidden; border-top: 1px solid rgba(126, 126, 126, 0.1);">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; color:rgba(126, 126, 126, 0.3);">
description
</span>
<span style="float: left; line-height: 14px;padding-bottom: 50px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</span>
</div>
</div>
</div>
<!-- end of description -->
</div>
</div>
<div class="" style="width: 100%; float: left; background: #ffffff; height: 50px; padding-top:5px; margin-top: -50px; opacity: 0.8;">
<div class="excerpt__meta" style="opacity: 0.9999999; float: left;padding:3px 10px;">
<a href="jaecomponents" style="float: left; line-height: 1.25em; border-bottom: none;">
<span class="block" style="text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 1px;line-height: 10px; float: left;">
Title
</span><br>
<span style="font-size: 11px; letter-spacing: 1px;line-height: 5px; float: left; ">
character x oc
</span>
</a>
</div>
</div>
</div>
</div>
<!-- end of one story section -->
<!-- one story section -->
<div style="height: 100%; width: 180px; float: left; background:#ffffff; margin-right: 10px;">
<div style="width: 170px; margin:auto;">
<div style="width: 170px; height: 245px; float: left;padding:10px 0; overflow: hidden;">
<div style="width: 170px; overflow: auto; height: 102%;float: left; padding-right: 20px;">
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<a href="jaecomponents" title="Click to read">
<img src="https://i.imgur.com/fM98uZQ.jpg"/>
</a>
</div>
</div>
</div>
<!-- description -->
<div style="width: 170px; height: 250px; float: left; overflow: hidden; border-top: 1px solid rgba(126, 126, 126, 0.1);">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; color:rgba(126, 126, 126, 0.3);">
description
</span>
<span style="float: left; line-height: 14px;padding-bottom: 50px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</span>
</div>
</div>
</div>
<!-- end of description -->
</div>
</div>
<div class="" style="width: 100%; float: left; background: #ffffff; height: 50px; padding-top:5px; margin-top: -50px; opacity: 0.8;">
<div class="excerpt__meta" style="opacity: 0.9999999; float: left;padding:3px 10px;">
<a href="jaecomponents" style="float: left; line-height: 1.25em; border-bottom: none;">
<span class="block" style="text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 1px;line-height: 10px; float: left;">
Title
</span><br>
<span style="font-size: 11px; letter-spacing: 1px;line-height: 5px; float: left; ">
character x oc
</span>
</a>
</div>
</div>
</div>
</div>
<!-- end of one story section -->
<!-- one story section -->
<div style="height: 100%; width: 180px; float: left; background:#ffffff; margin-right: 10px;">
<div style="width: 170px; margin:auto;">
<div style="width: 170px; height: 245px; float: left;padding:10px 0; overflow: hidden;">
<div style="width: 170px; overflow: auto; height: 102%;float: left; padding-right: 20px;">
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<a href="jaecomponents" title="Click to read">
<img src="https://i.imgur.com/ixGHPPg.jpg"/>
</a>
</div>
</div>
</div>
<!-- description -->
<div style="width: 170px; height: 250px; float: left; overflow: hidden; border-top: 1px solid rgba(126, 126, 126, 0.1);">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; color:rgba(126, 126, 126, 0.3);">
description
</span>
<span style="float: left; line-height: 14px;padding-bottom: 50px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</span>
</div>
</div>
</div>
<!-- end of description -->
</div>
</div>
<div class="" style="width: 100%; float: left; background: #ffffff; height: 50px; padding-top:5px; margin-top: -50px; opacity: 0.8;">
<div class="excerpt__meta" style="opacity: 0.9999999; float: left;padding:3px 10px;">
<a href="jaecomponents" style="float: left; line-height: 1.25em; border-bottom: none;">
<span class="block" style="text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 1px;line-height: 10px; float: left;">
Title
</span><br>
<span style="font-size: 11px; letter-spacing: 1px;line-height: 5px; float: left; ">
character x oc
</span>
</a>
</div>
</div>
</div>
</div>
<!-- end of one story section -->
<!-- one story section -->
<div style="height: 100%; width: 180px; float: left; background:#ffffff; margin-right: 10px;">
<div style="width: 170px; margin:auto;">
<div style="width: 170px; height: 245px; float: left;padding:10px 0; overflow: hidden;">
<div style="width: 170px; overflow: auto; height: 102%;float: left; padding-right: 20px;">
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<a href="jaecomponents" title="Click to read">
<img src="https://i.imgur.com/YRHnMx9.jpg"/>
</a>
</div>
</div>
</div>
<!-- description -->
<div style="width: 170px; height: 250px; float: left; overflow: hidden; border-top: 1px solid rgba(126, 126, 126, 0.1);">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; color:rgba(126, 126, 126, 0.3);">
description
</span>
<span style="float: left; line-height: 14px;padding-bottom: 50px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</span>
</div>
</div>
</div>
<!-- end of description -->
</div>
</div>
<div class="" style="width: 100%; float: left; background: #ffffff; height: 50px; padding-top:5px; margin-top: -50px; opacity: 0.8;">
<div class="excerpt__meta" style="opacity: 0.9999999; float: left;padding:3px 10px;">
<a href="jaecomponents" style="float: left; line-height: 1.25em; border-bottom: none;">
<span class="block" style="text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 1px;line-height: 10px; float: left;">
Title
</span><br>
<span style="font-size: 11px; letter-spacing: 1px;line-height: 5px; float: left; ">
character x oc
</span>
</a>
</div>
</div>
</div>
</div>
<!-- end of one story section -->
<!-- one story section -->
<div style="height: 100%; width: 180px; float: left; background:#ffffff; margin-right: 10px;">
<div style="width: 170px; margin:auto;">
<div style="width: 170px; height: 245px; float: left;padding:10px 0; overflow: hidden;">
<div style="width: 170px; overflow: auto; height: 102%;float: left; padding-right: 20px;">
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<a href="jaecomponents" title="Click to read">
<img src="https://i.imgur.com/NebrDjO.jpg"/>
</a>
</div>
</div>
</div>
<!-- description -->
<div style="width: 170px; height: 250px; float: left; overflow: hidden; border-top: 1px solid rgba(126, 126, 126, 0.1);">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; color:rgba(126, 126, 126, 0.3);">
description
</span>
<span style="float: left; line-height: 14px;padding-bottom: 50px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</span>
</div>
</div>
</div>
<!-- end of description -->
</div>
</div>
<div class="" style="width: 100%; float: left; background: #ffffff; height: 50px; padding-top:5px; margin-top: -50px; opacity: 0.8;">
<div class="excerpt__meta" style="opacity: 0.9999999; float: left;padding:3px 10px;">
<a href="jaecomponents" style="float: left; line-height: 1.25em; border-bottom: none;">
<span class="block" style="text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 1px;line-height: 10px; float: left;">
Title
</span><br>
<span style="font-size: 11px; letter-spacing: 1px;line-height: 5px; float: left; ">
character x oc
</span>
</a>
</div>
</div>
</div>
</div>
<!-- end of one story section -->
</div>
</div>
</div>
</div>
</div>
<!-- end of box -->
<!-- right box -->
<div class="sympl onefifth" style="padding: 0; height: 100%;">
<div style="width: 88%; margin:10px auto; ">
<div style="width: 100%; height: 270px; overflow: hidden; float: left;">
<div style="width: 100%; height: 100%; overflow: auto; padding-right:20px;float: left;">
<!-- section -->
<div class="excerpt__meta" style="width: 100%; float: left; margin: 10px 0; line-height: 22px;">
<!-- section title -->
<div style=" text-transform: uppercase; letter-spacing: 2px; color: rgba(126, 126, 126, 0.8);font-size: 10px; margin-bottom: 7px;">celebrity</div>
<!-- end of section title -->
<a href="jaecomponents" style="border-bottom: none;"><span style="background:#eee; border-radius:10px; padding: 3px 5px; font-size: 11px; letter-spacing: 1px; "><span class="completed">✓</span> Story Title</span></a><br>
<a href="jaecomponents" style="border-bottom: none;"><span style="background:#eee; border-radius:10px; padding: 3px 5px; font-size: 11px; letter-spacing: 1px;"">Very Long Story Title</span></a><br>
<a href="jaecomponents" style="border-bottom: none;"><span style="background:#eee; border-radius:10px; padding: 3px 5px; font-size: 11px; letter-spacing: 1px;"">Long Title</span></a>
</div>
<!-- end of section -->
<!-- section -->
<div class="excerpt__meta" style="width: 100%; float: left; margin-bottom: 10px; line-height: 22px;">
<!-- section title -->
<div style=" text-transform: uppercase; letter-spacing: 2px; color: rgba(126, 126, 126, 0.8);font-size: 10px; margin-bottom: 7px;">celebrity</div>
<!-- end of section title -->
<a href="jaecomponents" style="border-bottom: none;"><span style="background:#eee; border-radius:10px; padding: 3px 5px; font-size: 11px; letter-spacing: 1px;"><span style="color:#ffe13f">★</span> Story Title</span></a><br>
<a href="jaecomponents" style="border-bottom: none;"><span style="background:#eee; border-radius:10px; padding: 3px 5px; font-size: 11px; letter-spacing: 1px;"">Long Story Title</span></a><br>
<a href="jaecomponents" style="border-bottom: none;"><span style="background:#eee; border-radius:10px; padding: 3px 5px; font-size: 11px; letter-spacing: 1px;"">Very Long Story Title</span></a>
</div>
<!-- end of section -->
<div style="width: 100%;float:left;background:rgba(126, 126, 126, 0.8);height: 1px; margin-top: 10px;">&nbsp;</div>
<!-- about section -->
<div style="width: 100%; float: left;opacity: 0.4;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; font-size: 10px;">
about me
</span>
<span style="float: left; line-height: 12px;padding-bottom: 50px; text-align: justify;font-size: 10px; ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
</div>
<!-- end of about section -->
</div>
</div>
</div>
</div>
<!-- end of right box -->
</div>
<div class="stack" style="padding: 6px 10px 6px 30px; background: #fcfcfc; border-bottom-left-radius: 22px; border-bottom-right-radius: 20px; border:#eee solid 1px ">
<div class="sympl full" style=" padding:0;">
<!-- links -->
<div style="font-size: 9px;text-transform: uppercase; letter-spacing: 1.5px; color: rgba(126, 126, 126, 0.4); float: left;">
<a href="jaecomponents" style="color: #373737; ">link</a> |
<a href="jaecomponents" style="color: #373737; ">link</a> |
<a href="jaecomponents" style="color: #373737; ">link</a> |
<a href="jaecomponents" style="color: #373737; ">link</a>
</div>
<!-- end of links -->
<!-- !! DO NOT REMOVE !! -->
<div style="font-size: 9px;text-transform: uppercase; letter-spacing: 1.5px; float: right;">
<a href="https://www.asianfanfics.com/story/view/1095296/" style="color: #373737;" title="Designed and coded by JaeKnight"><span style="height: 100%;padding: 0 5px;">jaecomponents</span></a>
</div>
</div>
</div>
</div>
</div>
Raw
6 - Pink (Ver 2.0 - 2020)
<div style="width:80%; margin:auto">
<div style="width: 100%; float: left; margin:30px 0; color: #5b5b5b; font-family: arial; font-size: 12px; border-radius: 6px;">
<div class="stack">
<div class="sympl full" style="border-top-left-radius: 6px; border-top-right-radius: 6px; background:#f8edeb; line-height: 15px; padding:0; border:#F4E4E1 1px solid; ">
<div style="padding:15px 10px 10px 15px; float: left; color:#E3BDB5;">
<span style="font-weight: 700; font-size: 14px;text-transform: uppercase;">Gyalchester</span><br>
<span style="font-weight: 100; letter-spacing: 0.6px; ">Hermès link, ice-blue mink</span>
</div>
<div style="float:right; padding:20px 25px 21px 25px; background:#f8edeb; border-top-right-radius: 6px;border-bottom-right-radius: 6px; color:#E3BDB5;">x</div>
</div>
</div>
<div class="stack" style="background:#f8edeb; border-left:#F4E4E1 1px solid; border-right:#F4E4E1 1px solid; ">
<!-- left box -->
<div class="sympl three-quarters" style="padding:0; height: 100%; background: #f8f1f0;">
<div style="width: 95%; margin:2% auto;height: 92%;">
<div style="width:100%; float:left; height: 287px; overflow: hidden; padding: 10px 0;">
<div style="width: 100%; float: left; overflow: auto; height: 100%; padding-bottom: 27px;">
<!-- [1] change width -->
<div style="width: 1330px; float: left; ">
<!-- one story section -->
<div style="height: 100%; width: 180px; float: left; background:#ffffff; margin-right: 10px;">
<div style="width: 170px; margin:auto;">
<div style="width: 170px; height: 245px; float: left;padding:10px 0; overflow: hidden;">
<div style="width: 170px; overflow: auto; height: 102%;float: left; padding-right: 20px;">
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<a href="jaecomponents" title="Click to read">
<img src="https://i.imgur.com/zjc7Wwd.jpg"/>
</a>
</div>
</div>
</div>
<!-- description -->
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; color:#E3BDB5;">
description
</span>
<span style="float: left; line-height: 14px;padding-bottom: 50px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</span>
</div>
</div>
</div>
<!-- end of description -->
</div>
</div>
<div class="" style="width: 100%; float: left; background: #ffffff; height: 50px; padding-top:5px; margin-top: -50px; opacity: 0.8;">
<div style="opacity: 0.9999999; float: left;padding:3px 10px;">
<a href="jaecomponents" style="float: left; line-height: 1.25em; border-bottom: none;color:#5b5b5b;">
<span class="block" style="text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 1px;line-height: 10px; float: left;">
Title
</span><br>
<span style="font-size: 11px; letter-spacing: 1px;line-height: 5px; float: left;">
character x oc
</span>
</a>
</div>
</div>
</div>
</div>
<!-- end of one story section -->
<!-- one story section -->
<div style="height: 100%; width: 180px; float: left; background:#ffffff; margin-right: 10px;">
<div style="width: 170px; margin:auto;">
<div style="width: 170px; height: 245px; float: left;padding:10px 0; overflow: hidden;">
<div style="width: 170px; overflow: auto; height: 102%;float: left; padding-right: 20px;">
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<a href="jaecomponents" title="Click to read">
<img src="https://i.imgur.com/EgNa21l.jpg"/>
</a>
</div>
</div>
</div>
<!-- description -->
<div style="width: 170px; height: 250px; float: left; overflow: hidden; border-top: 1px solid rgba(126, 126, 126, 0.1);">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; color:#E3BDB5;">
description
</span>
<span style="float: left; line-height: 14px;padding-bottom: 50px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</span>
</div>
</div>
</div>
<!-- end of description -->
</div>
</div>
<div class="" style="width: 100%; float: left; background: #ffffff; height: 50px; padding-top:5px; margin-top: -50px; opacity: 0.8;">
<div style="opacity: 0.9999999; float: left;padding:3px 10px;">
<a href="jaecomponents" style="float: left; line-height: 1.25em; border-bottom: none;color:#5b5b5b;">
<span class="block" style="text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 1px;line-height: 10px; float: left;">
Title
</span><br>
<span style="font-size: 11px; letter-spacing: 1px;line-height: 5px; float: left; ">
character x oc
</span>
</a>
</div>
</div>
</div>
</div>
<!-- end of one story section -->
<!-- one story section -->
<div style="height: 100%; width: 180px; float: left; background:#ffffff; margin-right: 10px;">
<div style="width: 170px; margin:auto;">
<div style="width: 170px; height: 245px; float: left;padding:10px 0; overflow: hidden;">
<div style="width: 170px; overflow: auto; height: 102%;float: left; padding-right: 20px;">
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<a href="jaecomponents" title="Click to read">
<img src="https://i.imgur.com/zjc7Wwd.jpg"/>
</a>
</div>
</div>
</div>
<!-- description -->
<div style="width: 170px; height: 250px; float: left; overflow: hidden; border-top: 1px solid rgba(126, 126, 126, 0.1);">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; color:#E3BDB5;">
description
</span>
<span style="float: left; line-height: 14px;padding-bottom: 50px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</span>
</div>
</div>
</div>
<!-- end of description -->
</div>
</div>
<div class="" style="width: 100%; float: left; background: #ffffff; height: 50px; padding-top:5px; margin-top: -50px; opacity: 0.8;">
<div style="opacity: 0.9999999; float: left;padding:3px 10px;">
<a href="jaecomponents" style="float: left; line-height: 1.25em; border-bottom: none;color:#5b5b5b;">
<span class="block" style="text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 1px;line-height: 10px; float: left;">
Title
</span><br>
<span style="font-size: 11px; letter-spacing: 1px;line-height: 5px; float: left; ">
character x oc
</span>
</a>
</div>
</div>
</div>
</div>
<!-- end of one story section -->
<!-- one story section -->
<div style="height: 100%; width: 180px; float: left; background:#ffffff; margin-right: 10px;">
<div style="width: 170px; margin:auto;">
<div style="width: 170px; height: 245px; float: left;padding:10px 0; overflow: hidden;">
<div style="width: 170px; overflow: auto; height: 102%;float: left; padding-right: 20px;">
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<a href="jaecomponents" title="Click to read">
<img src="https://i.imgur.com/EgNa21l.jpg"/>
</a>
</div>
</div>
</div>
<!-- description -->
<div style="width: 170px; height: 250px; float: left; overflow: hidden; border-top: 1px solid rgba(126, 126, 126, 0.1);">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; color:#E3BDB5;">
description
</span>
<span style="float: left; line-height: 14px;padding-bottom: 50px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</span>
</div>
</div>
</div>
<!-- end of description -->
</div>
</div>
<div class="" style="width: 100%; float: left; background: #ffffff; height: 50px; padding-top:5px; margin-top: -50px; opacity: 0.8;">
<div style="opacity: 0.9999999; float: left;padding:3px 10px;">
<a href="jaecomponents" style="float: left; line-height: 1.25em; border-bottom: none;color:#5b5b5b;">
<span class="block" style="text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 1px;line-height: 10px; float: left;">
Title
</span><br>
<span style="font-size: 11px; letter-spacing: 1px;line-height: 5px; float: left; ">
character x oc
</span>
</a>
</div>
</div>
</div>
</div>
<!-- end of one story section -->
<!-- one story section -->
<div style="height: 100%; width: 180px; float: left; background:#ffffff; margin-right: 10px;">
<div style="width: 170px; margin:auto;">
<div style="width: 170px; height: 245px; float: left;padding:10px 0; overflow: hidden;">
<div style="width: 170px; overflow: auto; height: 102%;float: left; padding-right: 20px;">
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<a href="jaecomponents" title="Click to read">
<img src="https://i.imgur.com/zjc7Wwd.jpg"/>
</a>
</div>
</div>
</div>
<!-- description -->
<div style="width: 170px; height: 250px; float: left; overflow: hidden; border-top: 1px solid rgba(126, 126, 126, 0.1);">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; color:#E3BDB5;">
description
</span>
<span style="float: left; line-height: 14px;padding-bottom: 50px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</span>
</div>
</div>
</div>
<!-- end of description -->
</div>
</div>
<div class="" style="width: 100%; float: left; background: #ffffff; height: 50px; padding-top:5px; margin-top: -50px; opacity: 0.8;">
<div style="opacity: 0.9999999; float: left;padding:3px 10px;">
<a href="jaecomponents" style="float: left; line-height: 1.25em; border-bottom: none;color:#5b5b5b;">
<span class="block" style="text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 1px;line-height: 10px; float: left;">
Title
</span><br>
<span style="font-size: 11px; letter-spacing: 1px;line-height: 5px; float: left; ">
character x oc
</span>
</a>
</div>
</div>
</div>
</div>
<!-- end of one story section -->
<!-- one story section -->
<div style="height: 100%; width: 180px; float: left; background:#ffffff; margin-right: 10px;">
<div style="width: 170px; margin:auto;">
<div style="width: 170px; height: 245px; float: left;padding:10px 0; overflow: hidden;">
<div style="width: 170px; overflow: auto; height: 102%;float: left; padding-right: 20px;">
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<a href="jaecomponents" title="Click to read">
<img src="https://i.imgur.com/EgNa21l.jpg"/>
</a>
</div>
</div>
</div>
<!-- description -->
<div style="width: 170px; height: 250px; float: left; overflow: hidden; border-top: 1px solid rgba(126, 126, 126, 0.1);">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; color:#E3BDB5;">
description
</span>
<span style="float: left; line-height: 14px;padding-bottom: 50px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</span>
</div>
</div>
</div>
<!-- end of description -->
</div>
</div>
<div class="" style="width: 100%; float: left; background: #ffffff; height: 50px; padding-top:5px; margin-top: -50px; opacity: 0.8;">
<div style="opacity: 0.9999999; float: left;padding:3px 10px;">
<a href="jaecomponents" style="float: left; line-height: 1.25em; border-bottom: none;color:#5b5b5b;">
<span class="block" style="text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 1px;line-height: 10px; float: left;">
Title
</span><br>
<span style="font-size: 11px; letter-spacing: 1px;line-height: 5px; float: left; ">
character x oc
</span>
</a>
</div>
</div>
</div>
</div>
<!-- end of one story section -->
<!-- one story section -->
<div style="height: 100%; width: 180px; float: left; background:#ffffff; margin-right: 10px;">
<div style="width: 170px; margin:auto;">
<div style="width: 170px; height: 245px; float: left;padding:10px 0; overflow: hidden;">
<div style="width: 170px; overflow: auto; height: 102%;float: left; padding-right: 20px;">
<div style="width: 170px; height: 250px; float: left; overflow: hidden; ">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<a href="jaecomponents" title="Click to read">
<img src="https://i.imgur.com/zjc7Wwd.jpg"/>
</a>
</div>
</div>
</div>
<!-- description -->
<div style="width: 170px; height: 250px; float: left; overflow: hidden; border-top: 1px solid rgba(126, 126, 126, 0.1);">
<div style="width: 170px; height: 111%; overflow: auto; padding-right:20px; float: left;">
<div style="width: 160px; margin: auto;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; color:#E3BDB5;">
description
</span>
<span style="float: left; line-height: 14px;padding-bottom: 50px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</span>
</div>
</div>
</div>
<!-- end of description -->
</div>
</div>
<div class="" style="width: 100%; float: left; background: #ffffff; height: 50px; padding-top:5px; margin-top: -50px; opacity: 0.8;">
<div style="opacity: 0.9999999; float: left;padding:3px 10px;">
<a href="jaecomponents" style="float: left; line-height: 1.25em; border-bottom: none;color:#5b5b5b;">
<span class="block" style="text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 1px;line-height: 10px; float: left;">
Title
</span><br>
<span style="font-size: 11px; letter-spacing: 1px;line-height: 5px; float: left; ">
character x oc
</span>
</a>
</div>
</div>
</div>
</div>
<!-- end of one story section -->
</div>
</div>
</div>
</div>
</div>
<!-- end of box -->
<!-- right box -->
<div class="sympl quarter" style="padding: 0; height: 100%; border-left: 1px solid #F4E4E1;">
<div style="width: 88%; margin:10px auto; ">
<div style="width: 100%; height: 270px; overflow: hidden; float: left;">
<div style="width: 100%; height: 100%; overflow: auto; padding-right:20px;float: left;">
<!-- section -->
<div style="width: 100%; float: left; margin: 10px 0; line-height: 25px;">
<!-- section title -->
<div style=" text-transform: uppercase; letter-spacing: 2px; color:#E3BDB5;font-size: 10px; margin-bottom: 2px;">section</div>
<!-- end of section title -->
<a href="jaecomponents" style="border-bottom: none;"><span style="background:#F4E4E1; border: 1px solid #EED7D2; color:#c5a69f; border: 1px solid #EED7D2; color:#c5a69f; border-radius:10px; padding: 3px 5px; font-size: 11px; letter-spacing: 1px; "><span class="completed">✓</span> Story Title</span></a><br>
<a href="jaecomponents" style="border-bottom: none;"><span style="background:#F4E4E1; border: 1px solid #EED7D2; color:#c5a69f; border-radius:10px; padding: 3px 5px; font-size: 11px; letter-spacing: 1px;"">Very Long Story Title</span></a><br>
<a href="jaecomponents" style="border-bottom: none;"><span style="background:#F4E4E1; border: 1px solid #EED7D2; color:#c5a69f; border-radius:10px; padding: 3px 5px; font-size: 11px; letter-spacing: 1px;"">Long Title</span></a>
</div>
<!-- end of section -->
<!-- section -->
<div style="width: 100%; float: left; margin-bottom: 10px; line-height: 25px;">
<!-- section title -->
<div style=" text-transform: uppercase; letter-spacing: 2px; color:#E3BDB5;font-size: 10px; margin-bottom: 2px;">section</div>
<!-- end of section title -->
<a href="jaecomponents" style="border-bottom: none;"><span style="background:#F4E4E1; border: 1px solid #EED7D2; color:#c5a69f; border-radius:10px; padding: 3px 5px; font-size: 11px; letter-spacing: 1px;"><span style="color:#ffe13f">★</span> Story Title</span></a><br>
<a href="jaecomponents" style="border-bottom: none;"><span style="background:#F4E4E1; border: 1px solid #EED7D2; color:#c5a69f; border-radius:10px; padding: 3px 5px; font-size: 11px; letter-spacing: 1px;"">Long Story Title</span></a><br>
<a href="jaecomponents" style="border-bottom: none;"><span style="background:#F4E4E1; border: 1px solid #EED7D2; color:#c5a69f; border-radius:10px; padding: 3px 5px; font-size: 11px; letter-spacing: 1px;"">Very Long Story Title</span></a>
</div>
<!-- end of section -->
<div style="width: 100%;float:left;background:#F4E4E1;height: 1px; margin-top: 10px;">&nbsp;</div>
<!-- about section -->
<div style="width: 100%; float: left; color: #5b5b5b;">
<span style="width: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; line-height: 30px; float: left; font-size: 10px; color:#E3BDB5 ">
about me
</span>
<span style="float: left; line-height: 12px;padding-bottom: 50px; text-align: justify;font-size: 10px; ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
</div>
<!-- end of about section -->
</div>
</div>
</div>
</div>
<!-- end of right box -->
</div>
<div class="stack" style="padding: 6px 10px 6px 15px; background: #f8edeb; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border:#F4E4E1 solid 1px ">
<div class="sympl full" style=" padding:0;">
<!-- links -->
<div style="font-size: 9px;text-transform: uppercase; letter-spacing: 1.5px; color: #E3BDB5; float: left;">
<a href="jaecomponents" style="color: #c5a69f; ">link</a> |
<a href="jaecomponents" style="color: #c5a69f; ">link</a> |
<a href="jaecomponents" style="color: #c5a69f; ">link</a> |
<a href="jaecomponents" style="color: #c5a69f; ">link</a>
</div>
<!-- end of links -->
<!-- !! DO NOT REMOVE !! -->
<div style="font-size: 9px;text-transform: uppercase; letter-spacing: 1.5px; float: right;">
<a href="https://www.asianfanfics.com/story/view/1095296/" style="color: #c5a69f;" title="Designed and coded by JaeKnight"><span style="height: 100%;padding: 0 5px;">jaecomponents</span></a>
</div>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment