By Penny
-
Pretty lore code! ❤️ Please review!
Actual Template Not Responsive
Title here- Quick facts here!
- Seperate them with 'li'!
- Yay!!!
- Just keep it in the 'ul' tags!
- Oh, and like the other div tags here...
- This should scroll just fine!
All the info you want here!Blah Blah blah, this should scroll btw! This is what italics look like! And this is what bolding looks like! Bolded italics? No problem!All the info you want here! What's changed from the books? Blah Blah blah, this should scroll btw!
Subtitle:
All the info you want here!Blah Blah blah, this should scroll btw! This is what italics look like! And this is what bolding looks like! Bolded italics? No problem!All the info you want here! What's changed from the books? Blah Blah blah, this should scroll btw!
Quick info 1Quick info 2Quick info 3Quick info 4Quick info 5Quick info 6Template code
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Merriweather" rel="stylesheet"> <center> <style> .bombcan {height: 500px; width: 500px; position: relative; background-image: url(https://images.rpginitiative.com/uploads/monthly_2018_07/large.background-1646006_960_720.jpg.41cbc17e3f9dd1a7a341b06155ccba93.jpg); background-size: 15%} .ministry {height: 450px; width: 450px; background: white; position: absolute; top: 25px; left: 25px;} .headline {padding: 10px; height: 45px; width: 460px; background: #90D4C1; position: absolute; z-index: 2; top: 25px; left: 10px; font-family: 'Abril Fatface', cursive; font-size: 25px; text-decoration: underline; line-height: 1.75; font-style: italic; } .fastfacts {border-left: 1px solid gray; border-bottom: 1px solid gray; padding: 10px; height: 120px; width: 150px; position: absolute; top: 85px; left: 265px; overflow: auto; font-family: 'Merriweather', serif;} .fastfacts ul {list-style-image: url(https://images.rpginitiative.com/uploads/monthly_2018_07/large.icon_search_arrow_down.png.ffa2f83d19648c3b2095b9394ca6b6b9.png); margin: 0px; padding-left: 25px; text-align: justify; font-size: 12px;} .info {padding-left: 10px; padding-right: 10px; padding-top: 5px; padding-bottom: 5px; text-align: justify; border-bottom: 1px solid gray; top: 85px; position: absolute; left: 25px; height: 150px; width: 210px; font-family: 'Merriweather', serif; font-size: 12px; overflow: auto} .boxy {padding: 5px; height: 18px; width: 185px; background: #90d4c1; position: absolute; top: 260px; left: 295px; font-family: 'Abril Fatface', cursive; font-size: 12px; overflow: hidden;} .potter {font-size: 12px; text-align: justify; border-right: 1px solid gray; position: absolute; width: 220px; overflow: auto; font-family: 'Merriweather', serif; height: 150px; padding: 10px; top: 265px; left: 25px;} .potter h1 {font-family: 'Abril Fatface', cursive; text-align: center; font-size: 20px; padding-top: 0px; line-height: .5; text-decoration: underline; letter-spacing: 1.25} .pottercredit {font-family: 'space mono', monospace; color: white; font-size: 8px; position: absolute; top: 480px; left: 250px;} .pottercredit a {font-family: 'space mono', monospace; color: white; font-size: 8px; text-decoration: none;} </style> <div class="bombcan"><div class="headline">Title here</div><div class="ministry"> <div class="fastfacts"><ul><li>Quick facts here!</li><li>Seperate them with 'li'!</li><li>Yay!!!</li><li>Just keep it in the 'ul' tags!</li><li>Oh, and like the other div tags here...</li><li>This should scroll just fine!</li></ul></div> <div class="info">All the info you want here!Blah Blah blah, this should scroll btw! <i>This is what italics look like!</i> <b>And this is what bolding looks like!</b> <i><b>Bolded italics? No problem!</b></i><p>All the info you want here! What's changed from the books? Blah Blah blah, this should scroll btw! </div> <div class="potter"><h1>Subtitle:</h1>All the info you want here!Blah Blah blah, this should scroll btw! <i>This is what italics look like!</i> <b>And this is what bolding looks like!</b> <i><b>Bolded italics? No problem!</b></i><p>All the info you want here! What's changed from the books? Blah Blah blah, this should scroll btw!</div> </div> <div class="boxy">Quick info 1</div> <div class="boxy" style="top: 295px">Quick info 2</div> <div class="boxy" style="top: 330px">Quick info 3</div> <div class="boxy" style="top: 365px">Quick info 4</div> <div class="boxy" style="top: 400px">Quick info 5</div> <div class="boxy" style="top: 435px">Quick info 6</div> <div class="pottercredit"><a href="https://rpginitiative.com/profile/2592-penny/">♔</a></div> </div> </center>
User Feedback