Skip to content

Instantly share code, notes, and snippets.

@ataraxia17
Last active February 5, 2019 09: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 ataraxia17/510d28aa6eeaa6392c3fcbdca707f616 to your computer and use it in GitHub Desktop.
Save ataraxia17/510d28aa6eeaa6392c3fcbdca707f616 to your computer and use it in GitHub Desktop.
<div style="width:550px;margin:auto;height:640px;">
<div style="width:550px;height:640px;float:left;overflow:hidden;">
<div style="width:465px;float:left;height:620px;"><img alt="" src="https://s-media-cache-ak0.pinimg.com/originals/10/23/f3/1023f32557e2d5aa8f2eb18b2ea7b9f7.jpg" style="height:620px;width:465px;" /></div>
<div style="width:465px;float:left;height:475px;background:#fff;margin-top:-547px;">&nbsp;</div>
<div style="width:205px;float:left;height:308px;margin-top:-535px;"><img alt="" src="https://s-media-cache-ak0.pinimg.com/originals/3d/b6/01/3db601ea82be5ba53b0bdd9c9bbc5481.jpg" style="width:205px;height:308px;" /></div>
<div style="width:215px;float:left;margin-top:-225px;font-family:arial;font-size:27px;letter-spacing:2px;color:#8295A9;"><strong>lio kobayashi</strong></div>
<div style="width:150px;float:left;height:5px;margin-top:-170px;margin-left:5px;background:#8295A9;border-radius:150px;">
<div style="width:215px;float:left;margin-top:-15px;margin-left:-5px;border-bottom:solid 1px #8295A9;border-radius:5px;">&nbsp;</div>
<div style="width:50px;float:left;margin-top:-15px;margin-left:180px;font-family:arial;font-size:10px;letter-spacing:2px;color:#8295A9;text-transform:uppercase;"><strong>92%</strong></div>
<div style="width:50px;float:left;margin-top:3px;margin-left:10px;font-family:arial;font-size:10px;letter-spacing:-1px;color:#8295A9;text-transform:uppercase;"><strong>muse</strong></div>
</div>
<div style="width:170px;float:left;height:5px;margin-top:-140px;margin-left:5px;background:#8295A9;border-radius:150px;">
<div style="width:215px;float:left;margin-top:-15px;margin-left:-5px;border-bottom:solid 1px #8295A9;border-radius:5px;">&nbsp;</div>
<div style="width:50px;float:left;margin-top:-15px;margin-left:180px;font-family:arial;font-size:10px;letter-spacing:2px;color:#8295A9;text-transform:uppercase;"><strong>97%</strong></div>
<div style="width:50px;float:left;margin-top:3px;margin-left:10px;font-family:arial;font-size:10px;letter-spacing:-1px;color:#8295A9;text-transform:uppercase;"><strong>activity</strong></div>
</div>
<div style="width:110px;float:left;height:5px;margin-top:-110px;margin-left:5px;background:#8295A9;border-radius:150px;">
<div style="width:215px;float:left;margin-top:-15px;margin-left:-5px;border-bottom:solid 1px #8295A9;border-radius:5px;">&nbsp;</div>
<div style="width:50px;float:left;margin-top:-15px;margin-left:180px;font-family:arial;font-size:10px;letter-spacing:2px;color:#8295A9;text-transform:uppercase;"><strong>80%</strong></div>
<div style="width:50px;float:left;margin-top:3px;margin-left:10px;font-family:arial;font-size:10px;letter-spacing:-1px;color:#8295A9;text-transform:uppercase;"><strong>mood</strong></div>
</div>
<div style="width:245px;float:left;height:450px;margin-top:-535px;margin-left:220px;">
<div style="width:245px;float:left;height:450px;overflow:hidden;">
<div style="width:285px;float:left;height:450px;overflow:auto;">
<div style="width:245px;float:left;">
<div style="width:150px;float:left;margin-top:-10px;margin-left:4px;font-family:arial;font-size:30px;letter-spacing:-1px;color:#8295A9;text-transform:lowercase;"><strong>about me</strong></div>
<div style="width:135px;float:left;margin-top:-30px;border-bottom:solid 2px #8295A9;border-radius:5px;">&nbsp;</div>
<div style="width:245px;float:left;margin-top:3px;font-family:arial;font-size:8px;letter-spacing:1px;color:#8295A9;text-transform:uppercase;text-align:justify;line-height:10px;"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae hendrerit erat. Nulla faucibus turpis faucibus neque mattis auctor. Sed sed tortor arcu. Pellentesque eu nisi ac dui ornare vehicula vel nec est. Duis molestie lectus ac nunc aliquam, eget viverra ante posuere. Quisque vehicula est vel justo lobortis sodales. In hac habitasse platea dictumst. Fusce fermentum accumsan libero, at pharetra lectus sagittis at. Fusce et quam at mi porta varius nec sit amet nulla. Sed dolor dolor, volutpat et facilisis sed, feugiat quis elit. Aenean cursus maximus ligula eget rhoncus. Suspendisse eget leo fringilla, tincidunt magna quis, posuere mi. Sed gravida lorem vitae vehicula finibus. Donec ultricies tortor arcu, et dignissim augue sodales sit amet. Etiam pretium erat nibh, et porttitor lectus venenatis ac. Sed feugiat dolor neque, a mattis arcu commodo et. Nam vestibulum ultrices ligula vehicula accumsan. Curabitur viverra laoreet ullamcorper. Integer at sagittis odio, a consectetur justo. In cursus, est vel semper luctus, elit nisl aliquet risus, eget interdum metus tortor eu sem. Donec egestas mauris eu posuere cursus. Proin sed purus sit amet erat dapibus facilisis vitae sed mi. Aliquam in erat a erat finibus euismod in ut ipsum. Pellentesque in massa mi. In tempor tellus hendrerit nibh volutpat, quis dignissim ipsum feugiat. Morbi quis finibus nulla. Aliquam sollicitudin elit volutpat, feugiat magna sed, laoreet orci.</strong></div>
</div>
<div style="width:150px;float:left;margin-top:5px;margin-left:4px;font-family:arial;font-size:30px;letter-spacing:-1px;color:#8295A9;text-transform:lowercase;"><strong>personality</strong></div>
<div style="width:155px;float:left;margin-top:-25px;border-bottom:solid 2px #8295A9;border-radius:5px;">&nbsp;</div>
<div style="width:245px;float:left;margin-top:3px;font-family:arial;font-size:8px;letter-spacing:1px;color:#8295A9;text-transform:uppercase;text-align:justify;line-height:10px;"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae hendrerit erat. Nulla faucibus turpis faucibus neque mattis auctor. Sed sed tortor arcu. Pellentesque eu nisi ac dui ornare vehicula vel nec est. Duis molestie lectus ac nunc aliquam, eget viverra ante posuere. Quisque vehicula est vel justo lobortis sodales. In hac habitasse platea dictumst. Fusce fermentum accumsan libero, at pharetra lectus sagittis at. Fusce et quam at mi porta varius nec sit amet nulla. Sed dolor dolor, volutpat et facilisis sed, feugiat quis elit. Aenean cursus maximus ligula eget rhoncus. Suspendisse eget leo fringilla, tincidunt magna quis, posuere mi. Sed gravida lorem vitae vehicula finibus. Donec ultricies tortor arcu, et dignissim augue sodales sit amet. Etiam pretium erat nibh, et porttitor lectus venenatis ac. Sed feugiat dolor neque, a mattis arcu commodo et. Nam vestibulum ultrices ligula vehicula accumsan. Curabitur viverra laoreet ullamcorper. Integer at sagittis odio, a consectetur justo. In cursus, est vel semper luctus, elit nisl aliquet risus, eget interdum metus tortor eu sem. Donec egestas mauris eu posuere cursus. Proin sed purus sit amet erat dapibus facilisis vitae sed mi. Aliquam in erat a erat finibus euismod in ut ipsum. Pellentesque in massa mi. In tempor tellus hendrerit nibh volutpat, quis dignissim ipsum feugiat. Morbi quis finibus nulla. Aliquam sollicitudin elit volutpat, feugiat magna sed, laoreet orci.</strong></div>
<div style="width:150px;float:left;margin-top:5px;margin-left:5px;font-family:arial;font-size:30px;letter-spacing:-1px;color:#8295A9;text-transform:lowercase;"><strong>lover</strong></div>
<div style="width:70px;float:left;margin-top:20px;margin-left:-152px;border-bottom:solid 2px #8295A9;border-radius:5px;">&nbsp;</div>
<div style="width:100px;float:left;height:100px;margin-top:55px;margin-left:-150px;border-radius:100px;"><img alt="" src="https://i.pinimg.com/736x/42/ea/df/42eadf1dcd146c266255d5b4159160a5--bastion-nap-times.jpg" style="width:100px;height:100px;border:solid 5px #8295A9;border-radius:100px;" /></div>
<div style="width:100px;float:left;margin-top:-85px;margin-left:98px;font-family:arial;font-size:8px;letter-spacing:1px;color:#8295A9;text-transform:uppercase;text-align:justify;line-height:10px;"><strong>name</strong>
<div style="width:80px;float:left;margin-top:-10px;margin-left:-5px;border-bottom:solid 2px #8295A9;">&nbsp;</div>
<div style="width:100px;float:left;margin-top:10px;margin-left:8px;font-family:arial;font-size:8px;letter-spacing:1px;color:#8295A9;text-transform:uppercase;text-align:justify;line-height:10px;"><strong>status </strong>
<div style="width:80px;float:left;margin-top:-10px;margin-left:-5px;border-bottom:solid 2px #8295A9;">&nbsp;</div>
<div style="width:100px;float:left;margin-top:10px;margin-left:0px;font-family:arial;font-size:8px;letter-spacing:1px;color:#8295A9;text-transform:uppercase;text-align:justify;line-height:10px;"><strong>est 00.00.00 </strong>
<div style="width:80px;float:left;margin-top:-10px;margin-left:-5px;border-bottom:solid 2px #8295A9;">&nbsp;</div>
<div style="width:245px;float:left;margin-top:40px;margin-left:-105px;font-family:arial;font-size:8px;letter-spacing:1px;color:#8295A9;text-transform:uppercase;text-align:justify;line-height:10px;"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae hendrerit erat. Nulla faucibus turpis faucibus neque mattis auctor. Sed sed tortor arcu. Pellentesque eu nisi ac dui ornare vehicula vel nec est. Duis molestie lectus ac nunc aliquam, eget viverra ante posuere. Quisque vehicula est vel justo lobortis sodales. In hac habitasse platea dictumst. Fusce fermentum accumsan libero, at pharetra lectus sagittis at. Fusce et quam at mi porta varius nec sit amet nulla. Sed dolor dolor, volutpat et facilisis sed, feugiat quis elit. Aenean cursus maximus ligula eget rhoncus. Suspendisse eget leo fringilla, tincidunt magna quis, posuere mi. Sed gravida lorem vitae vehicula finibus. </strong></div>
</div>
<div style="width:150px;float:left;margin-top:30px;margin-left:-100px;font-family:arial;font-size:30px;letter-spacing:-1px;color:#8295A9;text-transform:lowercase;"><strong>plots</strong></div>
<div style="width:75px;float:left;margin-top:40px;margin-left:-155px;border-bottom:solid 2px #8295A9;border-radius:5px;">&nbsp;</div>
<div style="width:245px;float:left;margin-top:20px;margin-left:-105px;font-family:arial;font-size:8px;letter-spacing:1px;color:#8295A9;text-transform:uppercase;text-align:justify;line-height:10px;"><strong>title | genre | --/-- | available</strong></div>
<div style="height:auto;float:left;border-left:solid 3px #8295A9;margin-top:5px;margin-left:-75px;">
<div style="width:200px;float:left;margin-left:5px;font-family:arial;font-size:8px;text-transform:uppercase;letter-spacing:1px;color:#8295A9;text-align:justify;line-height:10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida pellentesque quam non laoreet. Maecenas finibus tempus lorem sit amet pharetra. Curabitur mollis dignissim nulla. Maecenas mauris purus, lacinia ut malesuada et, faucibus at est.&nbsp;</div>
</div>
<div style="width:245px;float:left;margin-top:20px;margin-left:-105px;font-family:arial;font-size:8px;letter-spacing:1px;color:#8295A9;text-transform:uppercase;text-align:justify;line-height:10px;"><strong>title | genre | --/-- | available</strong></div>
<div style="height:auto;float:left;border-left:solid 3px #8295A9;margin-top:5px;margin-left:-75px;">
<div style="width:200px;float:left;margin-left:5px;font-family:arial;font-size:8px;text-transform:uppercase;letter-spacing:1px;color:#8295A9;text-align:justify;line-height:10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida pellentesque quam non laoreet. Maecenas finibus tempus lorem sit amet pharetra. Curabitur mollis dignissim nulla. Maecenas mauris purus, lacinia ut malesuada et, faucibus at est.&nbsp;</div>
</div>
<div style="width:245px;float:left;margin-top:20px;margin-left:-105px;font-family:arial;font-size:8px;letter-spacing:1px;color:#8295A9;text-transform:uppercase;text-align:justify;line-height:10px;"><strong>title | genre | --/-- | available</strong></div>
<div style="height:auto;float:left;border-left:solid 3px #8295A9;margin-top:5px;margin-left:-75px;">
<div style="width:200px;float:left;margin-left:5px;font-family:arial;font-size:8px;text-transform:uppercase;letter-spacing:1px;color:#8295A9;text-align:justify;line-height:10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida pellentesque quam non laoreet. Maecenas finibus tempus lorem sit amet pharetra. Curabitur mollis dignissim nulla. Maecenas mauris purus, lacinia ut malesuada et, faucibus at est.&nbsp;</div>
</div>
<div style="width:245px;float:left;margin-top:20px;margin-left:-105px;font-family:arial;font-size:8px;letter-spacing:1px;color:#8295A9;text-transform:uppercase;text-align:justify;line-height:10px;"><strong>title | genre | --/-- | available</strong></div>
<div style="height:auto;float:left;border-left:solid 3px #8295A9;margin-top:5px;margin-left:-75px;">
<div style="width:200px;float:left;margin-left:5px;font-family:arial;font-size:8px;text-transform:uppercase;letter-spacing:1px;color:#8295A9;text-align:justify;line-height:10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida pellentesque quam non laoreet. Maecenas finibus tempus lorem sit amet pharetra. Curabitur mollis dignissim nulla. Maecenas mauris purus, lacinia ut malesuada et, faucibus at est.&nbsp;</div>
</div>
<div style="width:245px;float:left;margin-top:20px;margin-left:-105px;font-family:arial;font-size:8px;letter-spacing:1px;color:#8295A9;text-transform:uppercase;text-align:justify;line-height:10px;"><strong>title | genre | --/-- | available</strong></div>
<div style="height:auto;float:left;border-left:solid 3px #8295A9;margin-top:5px;margin-left:-75px;">
<div style="width:200px;float:left;margin-left:5px;font-family:arial;font-size:8px;text-transform:uppercase;letter-spacing:1px;color:#8295A9;text-align:justify;line-height:10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida pellentesque quam non laoreet. Maecenas finibus tempus lorem sit amet pharetra. Curabitur mollis dignissim nulla. Maecenas mauris purus, lacinia ut malesuada et, faucibus at est.&nbsp;</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="width:80px;float:left;height:80px;margin-top:-75px;margin-left:15px;">
<div style="width:70px;float:left;height:70px;margin-top:-5px;margin-left:10px;font-family:arial;font-size:60px;text-transform:uppercase;letter-spacing:1px;color:#CE823E;"><em><strong>p</strong></em></div>
<div style="width:70px;float:left;height:70px;margin-top:-70px;margin-left:20px;font-family:arial;font-size:60px;text-transform:uppercase;letter-spacing:1px;color:#CDD8D5;"><em><strong>p</strong></em></div>
<div style="width:70px;float:left;height:70px;margin-top:-70px;margin-left:15px;font-family:arial;font-size:60px;text-transform:uppercase;letter-spacing:1px;color:#8295A9;"><em><strong>p</strong></em></div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment