Skip to content

Instantly share code, notes, and snippets.

@funruby
Created December 18, 2015 04:17
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/f87cc7636e4428c3c1cb to your computer and use it in GitHub Desktop.
Save funruby/f87cc7636e4428c3c1cb to your computer and use it in GitHub Desktop.
<div style="width:800px;float:left;margin:auto;margin-bottom:20px;overflow:hidden;"><img alt="background" src="http://i.imgur.com/D1asBik.png" style="width:800px;float:left;margin:-3px;padding:3px;height:800px;" />
<div style="width:800px;float:left;height:800px;margin-top:-800px;">
<div style="width:650px;height:650px;border:10px solid #FFFFFF;float:left;margin:65px;">
<div style="width:650px;float:left;margin-top:305px;">
<div style="width:135px;height:10px;margin-top:35px;background-color:#FFFFFF;float:left;">&nbsp;</div>
<div style="width:366px;height:70px;float:left;margin-left:7px;">
<div style="font-family:didot, georgia, 'times new roman';font-size:70px;text-transform:uppercase;line-height:100%;text-align:center;color:#FFFFFF;">lee jinki</div>
</div>
<div style="width:135px;height:10px;margin-top:35px;background-color:#FFFFFF;float:left;margin-left:7px;">&nbsp;</div>
<div style="width:650px;float:left;height:305px;margin-top:-30px;overflow:hidden;">
<div style="width:680px;float:left;height:304px;margin-top:1px;overflow:auto;"><img alt="scroll down" src="http://i.imgur.com/TQyepX3.png" style="width:150px;float:left;margin-left:260px;margin-top:240px;" />
<div style="width:600px;float:left;margin-top:100px;padding-top:45px;padding-bottom:40px;padding-left:25px;padding-right:25px;background-color:#FFFFFF;">
<div style="border-top:1px solid #000;border-bottom:1px solid #000;text-align:center;line-height:150%;text-transform:uppercase;letter-spacing:1px;font-family:didot, georgia, 'times new roman';font-size:16px;color:#000;margin-right:70px;margin-left:70px;">autobiography</div>
<div style="margin-top:10px;">
<div style="font-family:georgia, 'times new roman';font-size:10px;color:#000;text-align:justify;line-height:125%;margin-left:95px;margin-right:95px;letter-spacing:.4px;">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.</div>
</div>
<div style="margin-top:25px;margin-left:166px;margin-right:166px;"><iframe frameborder="0" height="150" src="https://www.youtube-nocookie.com/embed/PfGaX8G0f2E?rel=0&amp;controls=0&amp;showinfo=0" width="267"></iframe>
<div style="border-top:1px solid #000;border-bottom:1px solid #000;text-align:center;line-height:150%;text-transform:uppercase;letter-spacing:1px;font-family:didot, georgia, 'times new roman';font-size:14px;color:#000;">i&#39;ll show you</div>
</div>
<div style="margin-top:50px;">
<div style="border-top:1px solid #000;border-bottom:1px solid #000;text-align:center;line-height:150%;text-transform:uppercase;letter-spacing:1px;font-family:didot, georgia, 'times new roman';font-size:16px;color:#000;margin-right:70px;margin-left:70px;">plotlines</div>
<div style="margin-top:10px;">
<div style="font-family:georgia, 'times new roman';font-size:10px;color:#000;text-align:justify;line-height:125%;margin-left:95px;margin-right:95px;letter-spacing:.4px;"><strong><span style="letter-spacing:1px;">PLOTLINE ONE &mdash; DAEHYUN&nbsp;&mdash; ONGOING</span></strong>&nbsp;&mdash;&nbsp;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.</div>
</div>
<div style="margin-top:10px;">
<div style="font-family:georgia, 'times new roman';font-size:10px;color:#000;text-align:justify;line-height:125%;margin-left:95px;margin-right:95px;letter-spacing:.4px;"><strong><span style="letter-spacing:1px;">PLOTLINE ONE &mdash; DAEHYUN&nbsp;&mdash; ONGOING</span></strong>&nbsp;&mdash;&nbsp;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.</div>
</div>
<div style="margin-top:10px;">
<div style="font-family:georgia, 'times new roman';font-size:10px;color:#000;text-align:justify;line-height:125%;margin-left:95px;margin-right:95px;letter-spacing:.4px;"><strong><span style="letter-spacing:1px;">PLOTLINE ONE &mdash; DAEHYUN&nbsp;&mdash; ONGOING</span></strong>&nbsp;&mdash;&nbsp;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.</div>
</div>
<div style="margin-top:10px;">
<div style="font-family:georgia, 'times new roman';font-size:10px;color:#000;text-align:justify;line-height:125%;margin-left:95px;margin-right:95px;letter-spacing:.4px;"><strong><span style="letter-spacing:1px;">PLOTLINE ONE &mdash; DAEHYUN&nbsp;&mdash; ONGOING</span></strong>&nbsp;&mdash;&nbsp;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.</div>
</div>
<div style="margin-top:10px;">
<div style="font-family:georgia, 'times new roman';font-size:10px;color:#000;text-align:justify;line-height:125%;margin-left:95px;margin-right:95px;letter-spacing:.4px;"><strong><span style="letter-spacing:1px;">PLOTLINE ONE &mdash; DAEHYUN&nbsp;&mdash; ONGOING</span></strong>&nbsp;&mdash;&nbsp;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.</div>
</div>
</div>
<div style="width:650px;float:left;height:40px;">&nbsp;</div>
</div>
<div style="width:650px;float:left;height:305px;background-color:transparent;">
<div style="margin-top:100px;height:105px;float:left;width:400px;margin-left:125px;">
<div style="font-family:futura;font-size:15px;letter-spacing:1.4px;color:#FFFFFF;text-transform:uppercase;line-height:110%;text-align:center;">&mdash;&nbsp;out of character&nbsp;&mdash;</div>
<div style="margin-top:10px;">
<div style="font-family:'gill sans', futura;font-size:12px;color:#FFFFFF;text-align:justify;letter-spacing:.5px;line-height:130%;margin-left:40px;margin-right:40px;">Hello! keep this fairly short, around 2-4 lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</div>
</div>
<div style="margin-top:10px;height:30px;margin-left:150px;float:left;"><a href="#"><img alt="twitter icon" src="http://i.imgur.com/2LQYGIk.png" style="width:30px;height:30px;float:left;" /></a> <a href="#"><img alt="instagram icon" src="http://i.imgur.com/hLuUx3P.png" style="width:30px;height:30px;float:left;margin-left:5px;" /></a> <a href="#"><img alt="facebook icon" src="http://i.imgur.com/vlkbx9R.png" style="width:30px;height:30px;float:left;margin-left:5px;" /></a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment