Skip to content

Instantly share code, notes, and snippets.

@funruby

funruby/01 - Foreword

Created January 1, 2016 18:01
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 funruby/9535398846249f5d92ef to your computer and use it in GitHub Desktop.
Save funruby/9535398846249f5d92ef to your computer and use it in GitHub Desktop.
Download ZIP
[S] G.S.T Cross
Raw
01 - Foreword
<div style="width:870px;height:800px;">
<div style="background-color:#F6F6F6;height:950px;width:870px;float:left;">
<div style="background-color:#000;float:left;height:950px;width:150px;margin-left:80px;">
<div style="background-color:#303030;float:left;margin-left:25px;width:100px;height:20px;margin-top:290px;">
<div style="font-family:calibri, monospace;font-size:11px;color:rgb(255,255,255);text-align:center;line-height:190%;" title="check out my latest chapter!"><a href="http://url.com" rel="nofollow"><span style="color:#ffffff;">LATEST</span></a></div>
</div>
<div style="background-color:#303030;float:left;margin-left:25px;width:100px;height:20px;margin-top:15px;">
<div style="font-family:calibri, monospace;font-size:11px;color:rgb(255,255,255);line-height:190%;text-align:center;">START: 011013</div>
</div>
<div style="background-color:#303030;float:left;margin-left:25px;width:100px;height:20px;margin-top:15px;">
<div style="font-family:calibri, monospace;font-size:11px;color:rgb(255,255,255);line-height:190%;text-align:center;">END: 011013</div>
</div>
<div style="background-color:#303030;float:left;margin-left:25px;width:100px;height:20px;margin-top:15px;">
<div style="font-family:calibri, monospace;font-size:11px;color:rgb(255,255,255);line-height:190%;text-align:center;" title="check out some of my other stories here!"><a href="http://url.com" rel="nofollow"><span style="color:#ffffff;">OTHER STORIES</span></a></div>
</div>
<div style="background-color:#303030;float:left;margin-left:25px;width:100px;height:20px;margin-top:15px;">
<div style="font-family:calibri, monospace;font-size:11px;color:rgb(255,255,255);line-height:190%;text-align:center;"><a href="http://www.asianfanfics.com/story/view/474056" rel="nofollow"><span style="color:#ffffff;">&copy; SYNCRATIC</span></a></div>
</div>
</div>
<div style="background-color:#000;float:left;height:120px;width:870px;margin-top:-830px;margin-left:0px;">
<div style="font-family:helvetica neue;text-transform:uppercase;letter-spacing:1px;font-size:9.5px;color:#FFFFFF;text-align:right;line-height:100%;margin-right:20px;margin-top:10px;">A STORY WRITTEN BY (USERNAME).</div>
</div>
<div style="background-color:#000;float:left;height:40px;width:620px;margin-left:230px;margin-top:-650px;">
<div style="background-color:#000;float:left;margin-left:15px;width:170px;height:240px;margin-top:20px;">
<div style="background-color:#303030;float:left;margin-left:0px;margin-top:0px;height:20px;width:170px;">
<div style="font-family:'courier new', monospace;font-size:16px;text-align:center;color:#FFFFFF;text-transform:uppercase;line-height:140%;letter-spacing:3px;">name</div>
</div>
<div style="background-color:#000;float:left;margin-left:0px;margin-top:0px;width:170px;height:160px;">
<div style="width:160px;">
<div style="height:158px;width:160px;float:left;"><img alt="" src="http://i.imgur.com/aasmb0m.png" style="height:158px;width:160px;margin-left:5px;margin-top:0px;" /></div>
<div style="height:158px;width:160px;float:left;margin-left:0px;margin-top:-158px;">&nbsp;</div>
</div>
<div style="height:55px;width:160px;margin-left:5px;margin-top:0px;background-color:#303030;float:left;">
<div style="margin:5px;">
<div style="font-family:'courier new', monospace;font-size:12px;color:#888888;line-height:100%;"><strong>OCCUPATION. </strong><span style="color:rgb(255,255,255);font-family:'ms pgothic';font-size:11px;line-height:90%;text-align:justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante.</span></div>
</div>
</div>
</div>
</div>
<div style="background-color:#000;float:left;margin-left:15px;width:220px;height:240px;margin-top:20px;">
<div style="background-color:#303030;float:left;margin-left:0px;margin-top:0px;height:20px;width:220px;">
<div style="font-family:'courier new', monospace;font-size:16px;text-align:center;color:#FFFFFF;text-transform:uppercase;line-height:140%;letter-spacing:3px;">Trailer</div>
<div style="background-color:#303030;float:left;margin:10px;margin-left:15px;margin-right:15px;height:150px;width:190px;">
<div style="margin:5px;"><iframe frameborder="0" height="140" src="//www.youtube.com/embed/ufMaRmJyyPM" width="180"></iframe></div>
</div>
<div style="background-color:#303030;float:left;margin-top:2px;margin-left:15px;margin-right:15px;height:30px;width:190px;">
<div style="font-family:'times new roman', times, serif;font-size:11px;margin:1px 5px 5px;color:rgb(255,255,255);text-align:center;line-height:270%;">watch the trailer here!</div>
</div>
</div>
</div>
<div style="background-color:#000;float:left;margin-left:15px;width:170px;height:240px;margin-top:20px;">
<div style="background-color:#303030;float:left;margin-left:0px;margin-top:0px;height:20px;width:170px;">
<div style="font-family:'courier new', monospace;font-size:16px;text-align:center;color:#FFFFFF;text-transform:uppercase;line-height:140%;letter-spacing:3px;">name</div>
<div style="background-color:#000;float:left;margin-left:0px;margin-top:0px;width:170px;height:160px;">
<div style="width:160px;">
<div style="height:158px;width:160px;float:left;"><img alt="" src="http://i.imgur.com/5HZmgFo.png" style="height:176px;width:160px;margin-left:5px;margin-top:0px;" /></div>
<div style="height:158px;width:160px;float:left;margin-left:0px;margin-top:-158px;">&nbsp;</div>
</div>
<div style="height:55px;width:160px;margin-left:5px;margin-top:0px;background-color:#303030;float:left;">
<div style="margin:5px;">
<div style="font-family:'courier new', monospace;font-size:12px;color:#888888;line-height:100%;"><strong>OCCUPATION. </strong><span style="color:rgb(255,255,255);font-family:'ms pgothic';font-size:11px;line-height:90%;text-align:justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante.</span></div>
</div>
</div>
</div>
</div>
</div>
<div style="margin-left:15px;">
<div style="background-color:#303030;float:left;margin-top:10px;height:20px;width:170px;">
<div style="font-family:'courier new', monospace;font-size:16px;text-align:center;color:#FFFFFF;text-transform:uppercase;line-height:140%;letter-spacing:3px;">name</div>
<div style="background-color:#000;float:left;margin-left:0px;margin-top:-2px;width:170px;height:160px;">
<div style="width:160px;">
<div style="height:158px;width:160px;float:left;"><img alt="" src="http://i.imgur.com/oVfV0e8.png" style="width:160px;margin-left:5px;margin-top:0px;" /></div>
<div style="height:158px;width:160px;float:left;margin-left:0px;margin-top:-158px;">&nbsp;</div>
</div>
<div style="height:55px;width:170px;margin-left:0px;margin-top:0px;background-color:#303030;float:left;">
<div style="margin:5px;">
<div style="font-family:'courier new', monospace;font-size:12px;color:#888888;line-height:100%;"><strong>OCCUPATION. </strong><span style="color:rgb(255,255,255);font-family:'ms pgothic';font-size:11px;line-height:90%;text-align:justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante.</span></div>
</div>
</div>
</div>
</div>
<div style="margin-left:185px;">
<div style="background-color:#303030;float:left;margin-top:10px;height:20px;width:405px;">
<div style="font-family:'courier new', monospace;font-size:16px;text-align:center;color:#FFFFFF;text-transform:uppercase;line-height:140%;letter-spacing:3px;">Summary</div>
<div style="background-color:#000;float:left;margin-left:0px;width:405px;height:212px;margin-top:-2px;">
<div style="font-family:'times new roman', times, serif;font-size:11px;margin:1px 15px 15px;color:rgb(255,255,255);line-height:100%;text-align:justify;">
<div style="background-color:transparent;height:20px;width:15px;float:left;margin-top:10px;padding:15px;padding-bottom:5px;margin-left:-10px;"><span style="font-size:48px;line-height:1%;margin-left:-5px;margin-top:-15px;">L</span></div>
<div style="margin-top:14px;">orem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.</div>
</div>
</div>
<div style="margin-left:-190px;float:left;margin-top:10px;"><iframe height="120" scrolling="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/119095700&amp;color=AB2B42&amp;&amp;show_artwork=false" width="600"></iframe></div>
</div>
</div>
</div>
</div>
<div style="font-family:arial;font-size:65px;color:rgb(0,0,0);letter-spacing:-5px;line-height:270%;margin-left:250px;float:left;margin-top:-950px;"><strong><span style="color:#990000;">story</span>title</strong></div>
</div>
</div>
Raw
02 - Chapter
<div style="width:800px;">
<div style="width:800px;float:left;background-color:#F6F6F6;">
<div style="width:700px;float:left;background-color:#000;margin-left:50px;height:70px;margin-top:25px;">
<div style="font-family:verdana;font-size:45px;line-height:150%;text-align:left;margin-left:20px;color:#FFFFFF;">
CHAPTER<span style="color:#B33032;font-family:'arial black';">1</span></div>
</div>
<div style="margin-left:80px;margin-right:80px;margin-bottom:20px;margin-top:115px;">
<div style="font-family:'times new roman', times, serif;font-size:11px;color:#000;text-align:justify;line-height:110%;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam.</div>
<div style="font-family:'times new roman', times, serif;font-size:11px;color:#000;text-align:justify;line-height:110%;">
&nbsp;</div>
<div style="font-family:'times new roman', times, serif;font-size:11px;color:#000;text-align:justify;line-height:110%;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam.</div>
<div style="font-family:'times new roman', times, serif;font-size:11px;color:#000;text-align:justify;line-height:110%;">
&nbsp;</div>
<div style="font-family:'times new roman', times, serif;font-size:11px;color:#000;text-align:justify;line-height:110%;">
&nbsp;</div>
<div style="font-family:'times new roman', times, serif;font-size:11px;color:#000;text-align:justify;line-height:110%;">
<div style="width:500px;height:1px;background-color:#000;float:left;margin-left:70px;">
&nbsp;</div>
</div>
<div style="font-family:'times new roman', times, serif;font-size:11px;color:#000;text-align:justify;line-height:110%;">
&nbsp;</div>
<div style="font-family:'times new roman', times, serif;font-size:11px;color:#000;text-align:justify;line-height:110%;">
&nbsp;</div>
<div style="font-family:'times new roman', times, serif;font-size:11px;color:#000;text-align:justify;line-height:110%;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam.</div>
</div>
</div>
</div>
<div style="width:800px;">
<div style="width:800px;float:left;background-color:#000;margin-left:0px;margin-top:0px;">
<div style="width:410px;float:left;background-color:transparent;">
<div style="font-size:45px;line-height:150%;text-align:left;margin-left:20px;">
<span style="color:rgb(255,255,255);font-family:verdana;">AUTHOR&#39;S</span><font color="#b33032" face="arial black">NOTE</font></div>
<div style="font-size:45px;line-height:150%;text-align:left;margin-left:20px;">
<div style="font-family:calibri;font-size:12px;color:#FFFFFF;margin-top:15px;">
<a href="http://www.asianfanfics.com/story/view/474056/syncratic-designs-roleplay-layouts-gallery-layout-profile" rel="nofollow"><span style="color:#ffffff;">&copy; SD</span></a></div>
</div>
</div>
<div style="float:left;background-color:transparent;width:375px;margin-left:15px;">
<div style="font-family:'times new roman', times, serif;font-size:11px;margin-left:0px;margin-right:20px;text-align:justify;color:#FFFFFF;line-height:110%;margin-top:20px;margin-bottom:20px;">
Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna.</div>
</div>
</div>
</div>
<p>
&nbsp;</p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment