Skip to content

Instantly share code, notes, and snippets.

@JaeBats
Created July 26, 2021 06:42
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/3fd02817e2af3192871b26db67cca750 to your computer and use it in GitHub Desktop.
Save JaeBats/3fd02817e2af3192871b26db67cca750 to your computer and use it in GitHub Desktop.
Take Care Modern (2021)
Take Care Modern (2021)
property of JaeKnight of JaeComponents
-please do not redistribute, use as base code
-Do not remove credits
-Please comment before using!! Upvotes are appreciated
<!---invisible box. insert your description here--->
<div class="hide" style="float:left;background:#fff;color:#fff;font-size:3px;line-height:0px;height:50px;width:100%;">YOUR DESCRIPTION HERE. Lorem ipsum dolor sit amet, consectetur adipisicing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<!---end of invisible box.--->
<div style="width:90%; margin:auto;">
<div style="float:left;width:100%; margin:20px 0; padding-bottom:50px;font-family:'arial';">
<div style="font-family:'arial';font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:6px;padding:10px 0px;float:left;width:100%;text-align:center;">Author&#39;s</div>
<div style="width: 100%; margin:auto">
<div style="width:100%;float:left;font-size:30px;font-weight:700;font-family:'arial';text-transform:uppercase;line-height:30px;text-align:center;padding-bottom:20px;">story title here
</div>
</div>
<div style="width:100%;float:left;padding:10px 0px;">
<div class="stack sympl-stack" style="margin-top:10px;float:left;">
<div class="sympl quarter l-full" style="padding:10px;">
<div style="width:100%;float:left;">
<img alt="Izj5KCT.png" src="https://i.imgur.com/ksYmvej.jpg" style="width:100%;float:left;border-bottom:1px solid;padding-bottom:15px;" />
<div style="width:100%;float:left;">
<div class="primary" style="font-family:'arial';font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:3px;padding:0px 7px;margin-top:-10px;float:left;margin-left:10px; opacity: .99;">Description</div>
</div>
<div style="float:left;padding-left:15px;margin-left:8px;border-left:#ebebeb solid 2px;margin-top:20px;line-height:18px;font-size:12px;text-align:justify;padding-right:20px;"><span style="font-size:14px;float:left;font-weight:700;padding:3px 5px 3px 0; line-height: 12px;">Once upon a time</span> ipsum dolor sit amet, consectetur adipisicing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="excerpt__meta" style="width:100%;float:left;margin-top:50px;font-family:arial;font-size:10px;text-transform:uppercase;">
<a href="JAECOMPONENTS" style="padding:1px 3px;margin:3px; text-decoration: none; border-bottom: none;">link 1</a>
<a href="JAECOMPONENTS" style="padding:1px 3px;margin:3px; text-decoration: none; border-bottom: none;">link 2</a>
<a href="JAECOMPONENTS" style="padding:1px 3px;margin:3px; text-decoration: none; border-bottom: none;">link 3</a></div>
</div>
</div>
<div class="sympl three-quarters l-full" style="padding:10px;">
<div style="width:100%;float:left; font-family: 'arial';">
<div style="width:100%;float:left;font-size:14px;font-weight:100;text-transform:uppercase;line-height:20px;text-align:left;letter-spacing:0px;margin-top:20px;"><b><span style="font-family:'arial';float:left;border-bottom:3px solid;padding:0px 5px 1px 0px;">story title </span></b><span style="font-family:'arial';float:left;border-bottom:1px solid;padding:0px 3px 2px 0px;"> excerpt </span>
</div>
<div style="float:left;padding:10px; font-size: 12px; font-weight: 200;">Lorem ipsum dolor sit amet, consectetur adipisicing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div style="width:100%;float:left;">
<div style="width:100%;float:left;font-size:14px;font-weight:100;text-transform:uppercase;line-height:20px;text-align:left;letter-spacing:0px;margin-top:30px;"><b><span style="font-family:'arial';float:left;border-bottom:3px solid;padding:0px 5px 1px 0px;">trailer </span></b><span style="font-family:'arial';float:left;border-bottom:1px solid;padding:0px 3px 2px 0px;"> preview </span>
</div>
<div style="float:left;width:100%;padding:20px 0;"><iframe frameborder="0" height="350" scrolling="no" src="//www.youtube.com/embed/TJwjYc5JNOY" width="100%"></iframe></div>
</div>
<div style="width:100%;float:left;">
<div style="width:100%;float:left;font-size:14px;font-weight:100;text-transform:uppercase;line-height:20px;text-align:left;letter-spacing:0px;margin-top:30px;"><b><span style="font-family:'arial';float:left;border-bottom:3px solid;padding:0px 5px 1px 0px;">character </span></b><span style="font-family:'arial';float:left;border-bottom:1px solid;padding:0px 3px 2px 0px;"> list </span>
</div>
<div style="float:left;padding:20px 10px;width:100%;">
<div style="width:100%;float:left;">
<div style="width:100%;float:left;border-bottom:1px solid #eaeaea;padding:1px 0px;margin-bottom:10px;">
<div style="width:25%;float:left; padding-top:10px;"><img alt="ZXA40mJ.gif" src="https://i.imgur.com/M2eU1Ts.jpg" /></div>
<div style="width:75%;float:left;">
<div style="float:left;padding:10px;"><span style="float:left;font-size:14px;line-height:17px;text-transform:uppercase;letter-spacing:1px;padding-bottom:5px;"><b>Character</b><br />
celebrity name </span> <span style="font-size:12px;line-height:16px;float:left;"> Lorem ipsum dolor sit amet, consectetur adipisicing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </span>
</div>
</div>
</div>
<div style="width:100%;float:left;border-bottom:1px solid #eaeaea;padding:1px 0px;margin-bottom:10px;">
<div style="width:25%;float:left; padding-top:10px;"><img alt="ZXA40mJ.gif" src="https://i.imgur.com/7EkzkO5.jpg" /></div>
<div style="width:75%;float:left;">
<div style="float:left;padding:10px;"><span style="float:left;font-size:14px;line-height:17px;text-transform:uppercase;letter-spacing:1px;padding-bottom:5px;"><b>Character</b><br />
celebrity name </span> <span style="font-size:12px;line-height:16px;float:left;"> Lorem ipsum dolor sit amet, consectetur adipisicing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </span>
</div>
</div>
</div>
<div style="width:100%;float:left;border-bottom:1px solid #eaeaea;padding:1px 0px;margin-bottom:10px;">
<div style="width:25%;float:left; padding-top:10px;"><img alt="ZXA40mJ.gif" src="https://i.imgur.com/k7ESUdS.jpg" /></div>
<div style="width:75%;float:left;">
<div style="float:left;padding:10px;"><span style="float:left;font-size:14px;line-height:17px;text-transform:uppercase;letter-spacing:1px;padding-bottom:5px;"><b>Character</b><br />
celebrity name </span> <span style="font-size:12px;line-height:16px;float:left;"> Lorem ipsum dolor sit amet, consectetur adipisicing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </span>
</div>
</div>
</div>
<div style="width:100%;float:left;padding:1px 0px;margin-bottom:10px;">
<div style="width:25%;float:left; padding-top:10px;"><img alt="ZXA40mJ.gif" src="https://i.imgur.com/5ZyGUyp.jpg" /></div>
<div style="width:75%;float:left;">
<div style="float:left;padding:10px;"><span style="float:left;font-size:14px;line-height:17px;text-transform:uppercase;letter-spacing:1px;padding-bottom:5px;"><b>Character</b><br />
celebrity name </span> <span style="font-size:12px;line-height:16px;float:left;"> Lorem ipsum dolor sit amet, consectetur adipisicing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </span>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="width:100%;float:left;">
<div style="width:100%;float:left;font-size:14px;font-weight:100;text-transform:uppercase;line-height:20px;text-align:left;letter-spacing:0px;margin-top:30px;"><b><span style="font-family:'arial';float:left;border-bottom:3px solid;padding:0px 5px 1px 0px;">more </span></b><span style="font-family:'arial';float:left;border-bottom:1px solid;padding:0px 3px 2px 0px;"> characters </span>
</div>
<div style="float:left;padding:10px;width:100%;">
<!-- images: height: 100px -->
<div style="height: 100px; float: left; margin:1.5px;">
<img alt="ZXA40mJ.gif" src="https://i.imgur.com/9I4JkH2.jpg" height="100"/>
</div>
<!-- images: height: 100px -->
<div style="height: 100px; float: left; margin:1.5px;">
<img alt="ZXA40mJ.gif" src="https://i.imgur.com/k7ESUdS.jpg" height="100"/>
</div>
<!-- images: height: 100px -->
<div style="height: 100px; float: left; margin:1.5px;">
<img alt="ZXA40mJ.gif" src="https://i.imgur.com/Qx72MPo.jpg" height="100"/>
</div>
<!-- images: height: 100px -->
<div style="height: 100px; float: left; margin:1.5px;">
<img alt="ZXA40mJ.gif" src="https://i.imgur.com/9I4JkH2.jpg" height="100"/>
</div>
<!-- images: height: 100px -->
<div style="height: 100px; float: left; margin:1.5px;">
<img alt="ZXA40mJ.gif" src="https://i.imgur.com/7EkzkO5.jpg" height="100"/>
</div>
<!-- images: height: 100px -->
<div style="height: 100px; float: left; margin:1.5px;">
<img alt="ZXA40mJ.gif" src="https://i.imgur.com/3HyFXi0.jpg" height="100"/>
</div>
<!-- images: height: 100px -->
<div style="height: 100px; float: left; margin:1.5px;">
<img alt="ZXA40mJ.gif" src="https://i.imgur.com/d5xEks5.jpg" height="100"/>
</div>
</div>
</div>
<div style="width:100%;float:left;">
<div style="width:100%;float:left;font-size:14px;font-weight:100;text-transform:uppercase;line-height:20px;text-align:left;letter-spacing:0px;margin-top:30px;"><b><span style="font-family:'arial';float:left;border-bottom:3px solid;padding:0px 5px 1px 0px;">author&#39;s </span></b><span style="font-family:'arial';float:left;border-bottom:1px solid;padding:0px 3px 2px 0px;"> note </span>
</div>
<div style="float:left;padding:10px; font-size: 12px;">Lorem ipsum dolor sit amet, consectetur adipisicing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>
</div>
</div>
<div class="excerpt__meta" style="width:100%;float:left;text-align:right;margin-top:50px;font-family:arial;font-size:10px;text-transform:uppercase;"><a href="http://www.asianfanfics.com/story/view/1212122/" style="font-size:9px; text-decoration: none; border-bottom:none;">cr: <b>Paperback</b></a></div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment