! popstyle [ RPR ]

Popstyle (rpr version)
property of jaeknight
-please do not redistribute
-do not remove credits
-Please comment before using!! Upvotes are highly appreciated

01 - main

 <div style="width:700px;margin:auto;">
            <div style="width:700px;float:left;margin:30px 0;">
            <div style="width:700px;height:460px;float:left;overflow:hidden;">
                <div style="width:700px;height:100%;float:left;padding-right:20px;overflow:auto;">
                    <div style="width:700px;height:460px;background:#CFEBDF;float:left;">
                        <div style="width:700px;float:right;color:#5F634F;font-size:70px;font-family:arial;font-weight:700;letter-spacing:-7px;margin-top:150px;text-align:center;line-height:35px;">
                        <div style="width:55%;float:left;text-align:right;">popstyle</div>
                        <div style="text-transform:uppercase;font-size:22px;letter-spacing:2px;line-height:35px;margin-top:5px;padding-left:20px;float:left;">roleplay</div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="width:700px;height:460px;float:left;overflow:hidden;margin-top:-460px;">
                <div style="width:750px;height:100%;float:left;padding-right:20px;overflow:auto;">
                    <div style="width:700px;height:460px;float:left;">
                        <div style="width:700px;height:460px;float:left;">&nbsp;</div>
                        <div style="width:700px;height:460px;float:left;">
                        <div style="width:700px;float:left;margin-top:240px;height:140px;background-color:#CFEBDF;">
                            <div style="width:210px;height:140px;background:#5F634F;margin-left:15px;float:left;overflow:hidden;">
                                <div style="width:230px;height:100%;float:left;padding-right:20px;overflow:auto;">
                                    <div style="width:210px;float:left;text-align:center;color:#fff;font-family:'tw cen mt', helvetica,arial;font-weight:700;text-transform:uppercase;font-size:15px;height:140px;"><span style="padding-top:65px;float:left;width:210px;text-align:center;">rules</span></div>
                                    <div style="width:200px;height:140px;margin-left:0px;float:left;overflow:hidden; ">
                                    <div style="width:220px;height:100%;float:left;overflow:auto;">
                                        <div style="width:200px;float:left;text-align:center;color:#fff;font-family:'helvetica', arial;font-weight:300;font-size:12px;height:140px;letter-spacing:0px;"><span style="float:left;width:200px;text-align:justify;padding:10px 0px 0px 10px;"><span style="background:#fff;color:#5F634F;padding:2px 3px;font-size: 10px; font-weight: 100;">one</span>  arcu. Sed orci fugiat <span style="background:#fff;color:#5F634F;padding:2px 3px;font-size: 10px; font-weight: 100;">two</span>  arcu. Sed orci fugiat <span style="background:#fff;color:#5F634F;padding:2px 3px;font-size: 10px; font-weight: 300;">three</span>  arcu. Sed orci fugiat. Lorem ipsum. Lorem ipsum. Lorem ipsum <span style="background:#fff;color:#5F634F;padding:2px 3px;font-size: 10px; font-weight: 100;">four</span>  </div>
                                    </div>
                                    </div>
                                </div>
                            </div>
                            <div style="width:210px;height:140px;background:#5F634F;margin-left:20px;float:left;overflow:hidden;">
                                <div style="width:230px;height:100%;float:left;padding-right:20px;overflow:auto;">
                                    <div style="width:210px;float:left;text-align:center;color:#fff;font-family:'tw cen mt', helvetica,arial;font-weight:700;text-transform:uppercase;font-size:15px;height:140px;"><span style="padding-top:65px;float:left;width:210px;text-align:center;">how to join</span></div>
                                    <div style="width:200px;height:140px;margin-left:0px;float:left;overflow:hidden; ">
                                    <div style="width:220px;height:100%;float:left;overflow:auto;">
                                        <div style="width:200px;float:left;text-align:center;color:#fff;font-family:'helvetica', arial;font-weight:300;font-size:12px;height:140px;letter-spacing:0px;"><span style="float:left;width:200px;text-align:justify;padding:10px 0px 0px 10px;"><span style="background:#fff;color:#5F634F;padding:2px 3px;font-size: 10px; font-weight: 100;">one</span>  arcu. Sed orci fugiat <span style="background:#fff;color:#5F634F;padding:2px 3px;font-size: 10px; font-weight: 100;">two</span>  arcu. Sed orci fugiat <span style="background:#fff;color:#5F634F;padding:2px 3px;font-size: 10px; font-weight: 300;">three</span>  arcu. Sed orci fugiat. Lorem ipsum. Lorem ipsum. Lorem ipsum <span style="background:#fff;color:#5F634F;padding:2px 3px;font-size: 10px; font-weight: 100;">four</span>  </div>
                                    </div>
                                    </div>
                                </div>
                            </div>
                            <div style="width:210px;height:140px;background:#5F634F;margin-left:20px;float:left;overflow:hidden;">
                                <div style="width:230px;height:100%;float:left;padding-right:20px;overflow:auto;">
                                    <div style="width:210px;float:left;text-align:center;color:#fff;font-family:'tw cen mt', helvetica,arial;font-weight:700;text-transform:uppercase;font-size:15px;height:140px;"><span style="padding-top:65px;float:left;width:210px;text-align:center;">extra</span></div>
                                    <div style="width:200px;height:140px;margin-left:0px;float:left;overflow:hidden; ">
                                    <div style="width:220px;height:100%;float:left;overflow:auto;">
                                        <div style="width:200px;float:left;text-align:center;color:#fff;font-family:'helvetica', arial;font-weight:300;font-size:12px;height:140px;letter-spacing:0px;"><span style="float:left;width:200px;text-align:justify;padding:10px 0px 0px 10px;"><span style="background:#fff;color:#5F634F;padding:2px 3px;font-size: 10px; font-weight: 100;">one</span>  arcu. Sed orci fugiat <span style="background:#fff;color:#5F634F;padding:2px 3px;font-size: 10px; font-weight: 100;">two</span>  arcu. Sed orci fugiat <span style="background:#fff;color:#5F634F;padding:2px 3px;font-size: 10px; font-weight: 300;">three</span>  arcu. Sed orci fugiat. Lorem ipsum. Lorem ipsum. Lorem ipsum <span style="background:#fff;color:#5F634F;padding:2px 3px;font-size: 10px; font-weight: 100;">four</span>  </div>
                                    </div>
                                    </div>
                                </div>
                            </div>

                            
                            <div style="width:700px;height:200px;float:left;margin-top:50px;color:#fff;font-family:'tw cen mt', helvetica,arial;font-size: 10px;">
                                <div style="width:190px;float:left;margin:20px;"><span style="font-weight:700;font-size:14px;text-align:right;text-transform:uppercase;width:190px;float:left;color:#5F634F;">ANNOUNCEMENT </span> <span style="width:190px;float:left;padding-bottom:2px;margin-bottom:2px;border-bottom:1px dotted #5F634F;text-align:right; "> <span style="background:#aedfca; padding:2px 3px;">Lorem ipsum dolor sit amet <span style="font-size:8px;font-weight:700; color:#5F634F""> 01/20/2017</span> </span></span> 
                                <span style="width:190px;float:left;padding-bottom:2px;margin-bottom:2px;border-bottom:1px dotted #5F634F;text-align:right; "> <span style="background:#aedfca; padding:2px 3px;">Lorem ipsum dolor sit amet <span style="font-size:8px;font-weight:700; color:#5F634F""> 01/20/2017</span> </span></span> 
                                <span style="width:190px;float:left;padding-bottom:2px;margin-bottom:2px;border-bottom:1px dotted #5F634F;text-align:right; "> <span style="background:#aedfca; padding:2px 3px;">Lorem ipsum dolor sit amet <span style="font-size:8px;font-weight:700; color:#5F634F""> 01/20/2017</span> </span></span> 
                                <span style="width:190px;float:left;padding-bottom:2px;margin-bottom:2px;border-bottom:1px dotted #5F634F;text-align:right; "> <span style="background:#aedfca; padding:2px 3px;">Lorem ipsum dolor sit amet <span style="font-size:8px;font-weight:700; color:#5F634F""> 01/20/2017</span> </span></span> 
                                <span style="width:190px;float:left;padding-bottom:2px;margin-bottom:2px;border-bottom:1px dotted #5F634F;text-align:right; "> <span style="background:#aedfca; padding:2px 3px;">Lorem ipsum dolor sit amet <span style="font-size:8px;font-weight:700; color:#5F634F""> 01/20/2017</span> </span></span> 
                                    
                                    </div>
                                <div style="width:240px;height:200px;float:left;">
                                    <span style="font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;width:270px;float:left;letter-spacing:2px;color:#5F634F;">about </span>
                                    <div style="width:240px;height:120px;margin-top:10px;float:left;text-align:justify;font-size:11px;overflow:hidden;color:#5F634F;"><span style=" padding: 1px 3px;">Fixed height. No scroll / 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 </span></div>
                                </div>
                                <div style="width:190px;float:left;height:100px;margin-top:20px; margin: 20px;">
                                    <span style="font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;width:190px;float:left;color:#5F634F;">admins </span>
                                    <div style="width:190px;float:left;">
                                    <div style="width:33px;height:33px;float:left;margin:3px 3px 3px 0px;background:#5F634F;"><img alt="3wKWPcw.png" src="https://i.imgur.com/FQn1KT2.jpg" style="width:35px;" /></div>
                                    <div style="width:33px;height:33px;float:left;margin:3px 3px 3px 0px;background:#5F634F;"><img alt="3wKWPcw.png" src="https://i.imgur.com/FQn1KT2.jpg" style="width:35px;" /></div>
                                    <div style="width:33px;height:33px;float:left;margin:3px 3px 3px 0px;background:#5F634F;"><img alt="3wKWPcw.png" src="https://i.imgur.com/FQn1KT2.jpg" style="width:35px;" /></div>
                                    <div style="width:33px;height:33px;float:left;margin:3px 3px 3px 0px;background:#5F634F;"><img alt="3wKWPcw.png" src="https://i.imgur.com/FQn1KT2.jpg" style="width:35px;" /></div>
                                    <div style="width:33px;height:33px;float:left;margin:3px 3px 3px 0px;background:#5F634F;"><img alt="3wKWPcw.png" src="https://i.imgur.com/FQn1KT2.jpg" style="width:35px;" /></div>
                                    </div>
                                    <div style="width:190px;float:left;">
                                    <div style="width:97px;float:left;background:#5F634F;height:40px;"><span style="line-height:40px;float:left;text-align:right;color:#f7f7f7;text-transform:uppercase;font-weight:100;font-size:12px;letter-spacing:3px;width:107px;"><span style="padding-right:10px;">featured</span> </span></div>
                                    <div style="width:43.8%;height:40px;float:left;overflow:hidden;"><img alt="3wKWPcw.png" src="https://i.imgur.com/9TZAMEP.jpg" style="overflow:hidden;float:left;margin-top:-40px;" /></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </div>
                    </div>
                </div>
                <div style="width:700px;float:left;"><span style="width:700px;font-family:arial;font-size:10px;text-transform:uppercase;color:#5F634F;font-style:normal;height:10px;margin-top:-14px;float:left;text-align:center;">scroll up</span></div>
            </div>
            <div style="width:700px;height:200px;margin-top:-200px;float:left;overflow:hidden;">
                <div style="width:720px;height:100%;float:left;padding-right:20px;overflow:auto;">
                    <div style="width:700px;height:200px;margin-top:200px;background:#5F634F;float:left;">&nbsp;</div>
                    
                    <div style="width:700px;float:left;margin-top:-200px; padding:25px;opacity:.999;font-family:'helvetica', arial; ">
                        <div style="width:680px; height: 150px; float: left; color:#fff; font-size: 13px; font-weight: 200; font-style: italic;">
                            <div style="width: 20%; float: left;">
                                <div style="width:100%; float: left;">
                                <span style="float: left; background: #5F634F; font-weight: 700; padding:2px 5px; color: #CFEBDF;">Masterlist</span></div>
                                title (optional) <br/>
                                title (optional) <br/>
                                title (optional) <br/>
                                title (optional) <br/>
                                title (optional) <br/>
                                title (optional) <br/>
                            </div>
                            <div style="width: 20%; float: left;">
                                <div style="width:100%; float: left;">
                                <span style="float: left; background: #5F634F; font-weight: 700; padding:2px 5px; color: #CFEBDF;">Title</span></div>
                                title (optional) <br/>
                                title (optional) <br/>
                                title (optional) <br/>
                                title (optional) <br/>
                                title (optional) <br/>
                                title (optional) <br/>
                            </div>
                            <div style="width: 20%; float: left;">
                                <div style="width:100%; float: left;">
                                <span style="float: left; background: #5F634F; font-weight: 700; padding:2px 5px; color: #CFEBDF;">Title</span></div>
                                title (optional) <br/>
                                title (optional) <br/>
                                title (optional) <br/>
                                title (optional) <br/>
                                title (optional) <br/>
                                title (optional) <br/>
                            </div>
                            <div style="width: 20%; float: left;">
                                <div style="width:100%; float: left;">
                                <span style="float: left; background: #5F634F; font-weight: 700; padding:2px 5px; color: #CFEBDF;">Title</span></div>
                                title (optional) <br/>
                                title (optional) <br/>
                                title (optional) <br/>
                                title (optional) <br/>
                                title (optional) <br/>
                                title (optional) <br/>
                            </div>
                            <div style="width: 20%; float: left;">
                                <div style="width:100%; float: left;">
                                <span style="float: left; background: #5F634F; font-weight: 700; padding:2px 5px;color: #CFEBDF;">Title</span></div>
                                title (optional) <br/>
                                title (optional) <br/>
                                title (optional) <br/>
                                title (optional) <br/>
                                title (optional) <br/>
                                title (optional) <br/>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
            <div style="font-family:arial;font-size:8px;text-transform:uppercase;color:#161616;font-style:normal;height:10px;float:right;text-align:right;padding:5px 0px; letter-spacing: 1px;"><a href="https://www.roleplayrepublic.com/roleplay/view_desc/30554/" style="color:#161616;text-decoration:none;" title="designed and coded by JaeKnight">jaecomponents</a></div>
            </div>
        </div>