akvma

WDHTML Layout - Glass Cells

Aug 8th, 2021 (edited)
1,595
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.97 KB | None | 0 0
  1.                                                                                   <!-- ⇓ Change background image here. -->
  2. <div class="row p-0 m-0" style="border:1px solid black; background:url(https://i.imgur.com/KHWDUq0.gif); background-attachment:fixed;">
  3. <div class="col-12 px-3 py-2" style="background-color:rgba(0,0,0,0.5); font:25px Century Gothic; color:white;">
  4. COOL TITLE HERE
  5. </div><div class="col-12 px-3 py-2" style="background:black; font:12px Consolas; color:white;">
  6. subtitle here
  7. </div><div class="col-12 p-3" style="font:12px Segoe UI; color:white;">
  8.  
  9. <!-- This is a normal single box. Copy/paste this code section to replicate the box anywhere. -->
  10. <div class="col-12 p-3" style="border:1px solid black; background-color:rgba(0,0,0,0.5);">
  11. <!-- beginning of box content -->
  12. <h1 style="font:20px Century Gothic; border-bottom:1px dashed white;">hello this is a header</h1>
  13. <p>Play Wolvden for free today! Sign up and create your very own wolf pack leader in a fun and challenging persistent browser-based game! Set in the various rich biomes of North America and Europe, encounter many different enemies and prey alike as you drive your wolf pack to victory in the rich world of Wolvden.</p>
  14. <ul style="list-style-type: square;">
  15. <li>this is a list item</li>
  16. <li>feel free to add or remove</li>
  17. <li>bullet points by copy/pasting</li>
  18. <li>or get rid of them entirely</li>
  19. </ul>
  20. <!-- end of box content -->
  21. </div><br>
  22.  
  23. <!-- These are split boxes. Copy/paste this section to replicate them anywhere. -->
  24. <div class="p-3" style="width:48.7%; float:left;border:1px solid black; background-color:rgba(0,0,0,0.5);">
  25. <!-- beginning of first box content -->
  26. <h1 style="font:20px Century Gothic; text-align:right; border-right:3px solid white; padding-right:10px;">
  27. woah these are
  28. </h1>
  29. <p>Play Wolvden for free today! Sign up and create your very own wolf pack leader in a fun and challenging persistent browser-based game! Set in the various rich biomes of North America and Europe, encounter many different enemies and prey alike as you drive your wolf pack to victory in the rich world of Wolvden.</p>
  30. <!-- end of first box content -->
  31. </div> <div class="p-3" style="width:48.7%; margin-left:2.6%; float:left;border:1px solid black; background-color:rgba(0,0,0,0.5);">
  32. <!-- beginning of first box content -->
  33. <h1 style="font:20px Century Gothic; text-align:left; border-left:3px solid white; padding-left:10px;">two split sections</h1>
  34. <p>Play Wolvden for free today! Sign up and create your very own wolf pack leader in a fun and challenging persistent browser-based game! Set in the various rich biomes of North America and Europe, encounter many different enemies and prey alike as you drive your wolf pack to victory in the rich world of Wolvden.</p>
  35. <!-- end of first box content -->
  36. </div>
  37.  
  38. </div> <!-- Please leave this credit intact. -->
  39. <div class="col-12 px-3 py-2" style="background:black; font:12px Consolas; color:white; text-align:right;">
  40. <i>layout by #202</i>
  41. </div></div>
Add Comment
Please, Sign In to add comment