Skip to content

Instantly share code, notes, and snippets.

@JaeBats
Last active August 2, 2021 12:00
Show Gist options
  • Save JaeBats/e7603189c36451a92c30636d900379b3 to your computer and use it in GitHub Desktop.
Save JaeBats/e7603189c36451a92c30636d900379b3 to your computer and use it in GitHub Desktop.
Views (rpr version)
property of jaeknight
-please do not redistribute
-do not remove credits
-Please comment before using!! Upvotes are highly appreciated
<div style="width:700px;margin:auto;">
<div style="width:700px;height:510px;float:left;margin:30px 0;font-family:'Helvetica', arial;">
<div style="width:700px;height:100%;float:left;"><img alt="S31zm4v.png" src="https://i.imgur.com/3QNzEMa.jpg" style="width:700px;height:100%;" /></div>
<div style="width:700px;height:100%;float:left;margin-top:-510px;">
<div style="width:700px;height:60px;background:#000;float:left;">
<div style="width:35%;height:60px;float:left;background:#131313;line-height:60px;"><span style="color:#f5f5f5;font-size:20px;font-weight:700;font-family:'Helvetica', arial;padding-left:30px;">views.co</span></div>
<div style="width:65%;height:60px;float:right; background:#0e0e0e;color:#f5f5f5; text-transform: uppercase; font-size: 10px; text-align: right;">
<a href="jaecomponents"><span style="color:#e1e1e1; height: 60px; line-height: 60px; padding: 0 15px; ">link</span></a>
<a href="jaecomponents"><span style="color:#e1e1e1; height: 60px; line-height: 60px; padding: 0 15px; ">link</span></a>
<a href="jaecomponents"><span style="color:#e1e1e1; height: 60px; line-height: 60px; padding: 0 15px; ">link</span></a>
<a href="jaecomponents"><span style="color:#e1e1e1; height: 60px; line-height: 60px; padding: 0 15px; ">link</span></a>
</div>
</div>
<div style="width:700px;height:440px;float:left;overflow:hidden;">
<div style="width:720px;height:100%;float:left;overflow:auto;padding-right:20px;">
<div style="width:700px;height:100%;float:left;background:#000;opacity:.3;">&nbsp;</div>
<div style="width:700px;height:100%;float:left;margin-top:-500px;opacity:.99999;">
<div style="width:700px;height:100px;float:right;padding:200px 50px 0px 0px;"><span style="width:700px;font-size:80px;line-height:80px;color:#fff;font-family:arial;text-align:right;float:right;font-weight:700;letter-spacing:-8px;">views.co</span> <span style="width:700px;font-size:12px;color:#e3e3e3;font-family:arial;line-height:12px;text-align:right;float:right;font-weight:100;letter-spacing:6px;text-transform:uppercase;">Art by Hester Berry</span></div>
</div>
<div style="width:700px;height:100%;float:left;background:#fff;font-family:arial;">
<div style="width:700px;float:left;margin-top:80px;">
<!-- first box -->
<div style="width:200px;height:253px;background:#0e0e0e;color:#fff;border:5px solid #0e0e0e;float:left;margin:10px 10px 10px 20px; color: #fff;">
<img alt="oQUqkCK.jpg" src="https://i.imgur.com/9AWuIQe.jpg" style="width:200px;height:200px;float:left;" />
<div style="width:190px;height:233px;overflow:hidden;margin-top:-200px;float:left;">
<div style="width:210px;height:100%;overflow:auto;">
<div style="width:190px;height:100%;float:left;background:#0e0e0e;margin-top:180px;letter-spacing:1px;font-size:12px;">
<div style="padding-top:15px;margin-left:10px;">
RULES
<div style="text-transform:uppercase;font-size:8px;letter-spacing:2px;color:#7ba0b4;">FOLLOW THEM</div>
<div style="height:2px;width:170px;margin-top:5px;">
<div style="height:2px;width:170px;background:#fff;">
<div style="height:2px;width:152px;background:#7ba0b4;">&nbsp;</div>
</div>
</div>
<div style="width:178px;height:188px;margin-top:2px;overflow:hidden;">
<div style="width:198px;height:188px;overflow:auto;float:left;">
<div style="width: 178px; float: left;text-align:justify;letter-spacing:0px;font-size:14px;">
<!-- rule text -->
<div style="width:100%; float: left;">
<div style="width:100%;float:left;text-align:left;color:#7ba0b4;font-size:16px;line-height:18px;margin-top:10px;letter-spacing:-1px; font-weight: 700;">one</div> <span style="width:95%;float:left;line-height:14px;font-size:11px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, nulla. Aenean dictum lacinia tortor.</span>
</div>
<!-- end of rule text -->
<!-- rule text -->
<div style="width:100%; float: left;">
<div style="width:100%;float:left;text-align:left;color:#7ba0b4;font-size:16px;line-height:18px;margin-top:10px;letter-spacing:-1px; font-weight: 700;">two</div> <span style="width:95%;float:left;line-height:14px;font-size:11px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, nulla. Aenean dictum lacinia tortor.</span>
</div>
<!-- end of rule text -->
<!-- rule text -->
<div style="width:100%; float: left;">
<div style="width:100%;float:left;text-align:left;color:#7ba0b4;font-size:16px;line-height:18px;margin-top:10px;letter-spacing:-1px; font-weight: 700;">three</div> <span style="width:95%;float:left;line-height:14px;font-size:11px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, nulla. Aenean dictum lacinia tortor.</span>
</div>
<!-- end of rule text -->
<!-- rule text -->
<div style="width:100%; float: left;">
<div style="width:100%;float:left;text-align:left;color:#7ba0b4;font-size:16px;line-height:18px;margin-top:10px;letter-spacing:-1px; font-weight: 700;">four</div> <span style="width:95%;float:left;line-height:14px;font-size:11px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, nulla. Aenean dictum lacinia tortor.</span>
</div>
<!-- end of rule text -->
<!-- rule text -->
<div style="width:100%; float: left;">
<div style="width:100%;float:left;text-align:left;color:#7ba0b4;font-size:16px;line-height:18px;margin-top:10px;letter-spacing:-1px; font-weight: 700;">five</div> <span style="width:95%;float:left;line-height:14px;font-size:11px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, nulla. Aenean dictum lacinia tortor.</span>
</div>
<!-- end of rule text -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
&nbsp;
</div>
<!-- end of first box -->
<!-- second box -->
<div style="width:200px;height:253px;background:#0e0e0e;color:#fff;border:5px solid #0e0e0e;float:left;margin:10px; color: #fff;">
<img alt="oQUqkCK.jpg" src="https://i.imgur.com/9AWuIQe.jpg" style="width:200px;height:200px;float:left;" />
<div style="width:190px;height:233px;overflow:hidden;margin-top:-200px;float:left;">
<div style="width:210px;height:100%;overflow:auto;">
<div style="width:190px;height:100%;float:left;background:#0e0e0e;margin-top:180px;letter-spacing:1px;font-size:12px;">
<div style="padding-top:15px;margin-left:10px;">
HOW TO JOIN
<div style="text-transform:uppercase;font-size:8px;letter-spacing:2px;color:#7ba0b4;">FOLLOW THEM</div>
<div style="height:2px;width:170px;margin-top:5px;">
<div style="height:2px;width:170px;background:#fff;">
<div style="height:2px;width:152px;background:#7ba0b4;">&nbsp;</div>
</div>
</div>
<div style="width:178px;height:188px;margin-top:2px;overflow:hidden;">
<div style="width:198px;height:188px;overflow:auto;float:left;text-align:justify;letter-spacing:0px;font-size:14px;">
<div style="width: 178px; float: left;text-align:justify;letter-spacing:0px;font-size:14px;">
<!-- rule text -->
<div style="width:100%; float: left;">
<div style="width:100%;float:left;text-align:left;color:#7ba0b4;font-size:16px;line-height:18px;margin-top:10px;letter-spacing:-1px; font-weight: 700;">one</div> <span style="width:95%;float:left;line-height:14px;font-size:11px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, nulla. Aenean dictum lacinia tortor.</span>
</div>
<!-- end of rule text -->
<!-- rule text -->
<div style="width:100%; float: left;">
<div style="width:100%;float:left;text-align:left;color:#7ba0b4;font-size:16px;line-height:18px;margin-top:10px;letter-spacing:-1px; font-weight: 700;">two</div> <span style="width:95%;float:left;line-height:14px;font-size:11px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, nulla. Aenean dictum lacinia tortor.</span>
</div>
<!-- end of rule text -->
<!-- rule text -->
<div style="width:100%; float: left;">
<div style="width:100%;float:left;text-align:left;color:#7ba0b4;font-size:16px;line-height:18px;margin-top:10px;letter-spacing:-1px; font-weight: 700;">three</div> <span style="width:95%;float:left;line-height:14px;font-size:11px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, nulla. Aenean dictum lacinia tortor.</span>
</div>
<!-- end of rule text -->
<!-- rule text -->
<div style="width:100%; float: left;">
<div style="width:100%;float:left;text-align:left;color:#7ba0b4;font-size:16px;line-height:18px;margin-top:10px;letter-spacing:-1px; font-weight: 700;">four</div> <span style="width:95%;float:left;line-height:14px;font-size:11px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, nulla. Aenean dictum lacinia tortor.</span>
</div>
<!-- end of rule text -->
<!-- rule text -->
<div style="width:100%; float: left;">
<div style="width:100%;float:left;text-align:left;color:#7ba0b4;font-size:16px;line-height:18px;margin-top:10px;letter-spacing:-1px; font-weight: 700;">five</div> <span style="width:95%;float:left;line-height:14px;font-size:11px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, nulla. Aenean dictum lacinia tortor.</span>
</div>
<!-- end of rule text -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
&nbsp;
</div>
<!-- end of second box -->
<!-- third box -->
<div style="width:200px;height:253px;background:#0e0e0e;color:#fff;border:5px solid #0e0e0e;float:left;margin:10px; color: #fff;">
<img alt="oQUqkCK.jpg" src="https://i.imgur.com/9AWuIQe.jpg" style="width:200px;height:200px;float:left;" />
<div style="width:190px;height:233px;overflow:hidden;margin-top:-200px;float:left;">
<div style="width:210px;height:100%;overflow:auto;">
<div style="width:190px;height:100%;float:left;background:#0e0e0e;margin-top:180px;letter-spacing:1px;font-size:12px;">
<div style="padding-top:15px;margin-left:10px;">
UPDATES
<div style="text-transform:uppercase;font-size:8px;letter-spacing:2px;color:#7ba0b4;">ANNOUNCEMENTS</div>
<div style="height:2px;width:170px;margin-top:5px;">
<div style="height:2px;width:170px;background:#fff;">
<div style="height:2px;width:152px;background:#7ba0b4;">&nbsp;</div>
</div>
</div>
<div style="width:178px;height:188px;margin-top:2px;overflow:hidden;">
<div style="width:198px;height:188px;overflow:auto;float:left;text-align:justify;letter-spacing:0px;font-size:14px;">
<div style="width: 178px; float: left;text-align:justify;letter-spacing:0px;font-size:14px;">
<!-- rule text -->
<div style="width:100%; float: left;">
<div style="width:100%;float:left;text-align:left;color:#7ba0b4;font-size:16px;line-height:18px;margin-top:10px;letter-spacing:-1px; font-weight: 700;">01.23</div> <span style="width:95%;float:left;line-height:14px;font-size:11px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, nulla. Aenean dictum lacinia tortor.</span>
</div>
<!-- end of rule text -->
<!-- rule text -->
<div style="width:100%; float: left;">
<div style="width:100%;float:left;text-align:left;color:#7ba0b4;font-size:16px;line-height:18px;margin-top:10px;letter-spacing:-1px; font-weight: 700;">01.30</div> <span style="width:95%;float:left;line-height:14px;font-size:11px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, nulla. Aenean dictum lacinia tortor.</span>
</div>
<!-- end of rule text -->
<!-- rule text -->
<div style="width:100%; float: left;">
<div style="width:100%;float:left;text-align:left;color:#7ba0b4;font-size:16px;line-height:18px;margin-top:10px;letter-spacing:-1px; font-weight: 700;">02.15</div> <span style="width:95%;float:left;line-height:14px;font-size:11px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, nulla. Aenean dictum lacinia tortor.</span>
</div>
<!-- end of rule text -->
<!-- rule text -->
<div style="width:100%; float: left;">
<div style="width:100%;float:left;text-align:left;color:#7ba0b4;font-size:16px;line-height:18px;margin-top:10px;letter-spacing:-1px; font-weight: 700;">03.31</div> <span style="width:95%;float:left;line-height:14px;font-size:11px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, nulla. Aenean dictum lacinia tortor.</span>
</div>
<!-- end of rule text -->
<!-- rule text -->
<div style="width:100%; float: left;">
<div style="width:100%;float:left;text-align:left;color:#7ba0b4;font-size:16px;line-height:18px;margin-top:10px;letter-spacing:-1px; font-weight: 700;">08.27</div> <span style="width:95%;float:left;line-height:14px;font-size:11px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, nulla. Aenean dictum lacinia tortor.</span>
</div>
<!-- end of rule text -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
&nbsp;
</div>
<!-- end of third box -->
</div>
</div>
<div style="width:700px;height:440px;float:left;background:#000;opacity:0;">&nbsp;</div>
<div style="width:700px;height:440px;float:left;margin-top:-440px;opacity:.99999;color:#e3e3e3;">
<!-- ADMINS AND MASTERLIST -->
<div style="width:510px;margin:auto;">
<div style="width:100%;height:180px;float:left;margin-top:50px;background:#0f0f0f;opacity:.8;">&nbsp;</div>
<div style="width: 510px; height: 140px; float: left; margin-top: -180px; opacity: 0.999; padding: 10px 20px;">
<div style="width:100%;float:left;text-align:center;letter-spacing:10px;font-weight:600;text-transform:uppercase; margin-top: 5px; font-size: 10px;">admins</div>
<div style="width: 510px; float: left; margin-top: 10px;">
<!-- Admin box 1 -->
<div style="width: 80px; float: left; margin: 0 15px 0 23px;">
<div style="width: 80px; height: 80px; float: left; border-radius: 100%; border:2px #353535 solid;padding:3px;">
<img alt="ZYuLRY0.jpg" src="https://i.imgur.com/2Fvap2D.jpg" style="border-radius:100%;width:80px;" />
</div>
<div style="width: 80px; padding: 7px; float: left; margin-top: 7px; text-transform: uppercase; text-align: center;letter-spacing:5px;font-size: 11px; line-height: 15px;">
<span style="font-weight: 700;">name</span><br/>
<span style="font-weight: 100; font-size:8px;">nickname</span>
</div>
</div>
<!-- Admin box 2 -->
<div style="width: 80px; float: left; margin: 0 15px;">
<div style="width: 80px; height: 80px; float: left; border-radius: 100%; border:2px #353535 solid;padding:3px;">
<img alt="ZYuLRY0.jpg" src="https://i.imgur.com/21N4aUh.jpg" style="border-radius:100%;width:80px;" />
</div>
<div style="width: 80px; padding: 7px; float: left; margin-top: 7px; text-transform: uppercase; text-align: center;letter-spacing:5px;font-size: 11px; line-height: 15px;">
<span style="font-weight: 700;">name</span><br/>
<span style="font-weight: 100; font-size:8px;">nickname</span>
</div>
</div>
<!-- Admin box 3-->
<div style="width: 80px; float: left; margin: 0 15px;">
<div style="width: 80px; height: 80px; float: left; border-radius: 100%; border:2px #353535 solid;padding:3px;">
<img alt="ZYuLRY0.jpg" src="https://i.imgur.com/iDXbXmT.jpg" style="border-radius:100%;width:80px;" />
</div>
<div style="width: 80px; padding: 7px; float: left; margin-top: 7px; text-transform: uppercase; text-align: center;letter-spacing:5px;font-size: 11px; line-height: 15px;">
<span style="font-weight: 700;">name</span><br/>
<span style="font-weight: 100; font-size:8px;">nickname</span>
</div>
</div>
<!-- Admin box 4-->
<div style="width: 80px; float: left; margin: 0 15px;">
<div style="width: 80px; height: 80px; float: left; border-radius: 100%; border:2px #353535 solid;padding:3px;">
<img alt="ZYuLRY0.jpg" src="https://i.imgur.com/8TLkDAR.jpg" style="border-radius:100%;width:80px;" />
</div>
<div style="width: 80px; padding: 7px; float: left; margin-top: 7px; text-transform: uppercase; text-align: center;letter-spacing:5px;font-size: 11px; line-height: 15px;">
<span style="font-weight: 700;">name</span><br/>
<span style="font-weight: 100; font-size:8px;">nickname</span>
</div>
</div>
</div>
</div>
<div style="width:510px;height:150px;float:left;background:#020202;opacity:.9;">&nbsp;</div>
<div style="width:510px;float:left;margin-top:-150px;padding:10px 25px;opacity:.999;">
<span style="width:100%;float:left;font-size:10px;text-transform:uppercase;color:#7ba0b4;">Masterlist</span>
<div style="width: 100%; height: 110px; float: left;color:#e3e3e3;font-size:10px;font-style:italic; line-height: 18px;">
<div style="width: 25%; height: 100%; float: left;">
<span>name</span><br/>
<span>name</span><br/>
<span>name</span><br/>
<span>name</span><br/>
<span>name</span><br/>
<span>name</span>
</div>
<div style="width: 25%; height: 100%; float: left;">
<span>name</span><br/>
<span>name</span><br/>
<span>name</span><br/>
<span>name</span><br/>
<span>name</span><br/>
<span>name</span>
</div>
<div style="width: 25%; height: 100%; float: left;">
<span>name</span><br/>
<span>name</span><br/>
<span>name</span><br/>
<span>name</span><br/>
<span>name</span><br/>
<span>name</span>
</div>
<div style="width: 25%; height: 100%; float: left;">
<span>name</span><br/>
<span>name</span><br/>
<span>name</span><br/>
<span>name</span><br/>
<span>name</span><br/>
<span>name</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- DO NOT REMOVE CREDITS -->
<div style="width:700px;height:20px;background:#000;border-color: #e1e1e1;float:left; font-size: 8px; font-weight: 300; text-transform: uppercase; line-height: 20px; letter-spacing: 1px;">
<div style="width: 65%; height: 100%; float: left; background: #0e0e0e; text-align: right;">
<a href="jaecomponents"><span style="color: #e1e1e1; padding-right: 10px;">views.co</span></a>
</div>
<div style="width: 35%; height: 100%; float: left; background: #131313;text-align: left;">
<a href="https://www.roleplayrepublic.com/roleplay/view_desc/30554/"><span style="color: #e1e1e1; padding-left: 10px;" title="Designed and coded by JaeKnight">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