API tools faq
paste
Advertisement
Guest User

Simple Green Layout :PPPP

a guest
Aug 11th, 2024
36
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.69 KB | Source Code | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <link rel="shortcut icon" href="/">
  7. <!-- replace "/" above with the url to your website favicon (the image next to the website title) -->
  8. <title>simple green</title>
  9. </head>
  10. <!--
  11.  
  12. Thx for using this layout <3
  13.  
  14. - Credit is unnecessary bc this is pretty simple. There's no credits hidden on the layout either. Feel free to steal!
  15.  
  16. - The css is all the way at the bottom cause of preference. You can copy and paste it back up top above the body tags if you want
  17.  
  18. - Edit it however you want idc
  19.  
  20. - If you want the side img and container to be on the other side, change left: 300px; to right: 300px; in the side img css section and change the float in the container and side img sections to the opposite (ex. float: right; to float: left;) this doesn't make any sense when I explain it but just do trial and error
  21.  
  22. -->
  23.  
  24. <body>
  25. <div class="main">
  26. <!-- side image next to the box of content. change the height and width as you'd like -->
  27. <div id="sideimg">
  28. <img src="https://file.garden/ZpOSvyOun08fNCmH/jenny-pagedoll.png" height="500px" width="auto"/></div>
  29.  
  30. <!-- container start -->
  31. <div class="container">
  32. <!-- header and header image, delete this if you want -->
  33. <div id="header">
  34. <div id="header_img">
  35. </div>
  36. </div>
  37. <!-- links -->
  38. <div id="links">
  39. <a href="/">LINK</a> <img src="https://i.ibb.co/872Jgs4/grade-16dp-2-A9-FB7-FILL0-wght400-GRAD0-opsz20.png" height="22px" width="22px">
  40. <a href="/">LINK</a> <img src="https://i.ibb.co/872Jgs4/grade-16dp-2-A9-FB7-FILL0-wght400-GRAD0-opsz20.png" height="22px" width="22px">
  41. <a href="/">LINK</a> <img src="https://i.ibb.co/872Jgs4/grade-16dp-2-A9-FB7-FILL0-wght400-GRAD0-opsz20.png" height="22px" width="22px">
  42. <a href="/">LINK</a> <img src="https://i.ibb.co/872Jgs4/grade-16dp-2-A9-FB7-FILL0-wght400-GRAD0-opsz20.png" height="22px" width="22px">
  43. <a href="/">LINK</a>
  44. </div>
  45. <!-- content -->
  46.  
  47. <div id="content">
  48. <h1><center>Header 1</center></h1>
  49. <h2><center>Header 2</center></h2>
  50. <h3><center>Header 3</center></h3>
  51.  
  52. <img src="https://file.garden/ZpOSvyOun08fNCmH/mlaatr.jpg" style="max-width: 100%;
  53. height: auto; object-fit: contain;">
  54. <!-- the style keeps images from overflowing out of the container. copy and paste it into after the image url unless you want to resize the image yourself (ik it's annoying but this is so it doesn't mess up the side image size) -->
  55.  
  56. <p>Cat ipsum dolor sit amet, iste nostrum veritatis. Consequatur nesciunt nemo. Magna nulla. Eiusmod ut eum deserunt for accusantium, vitae doloremque. Laboriosam quae but commodo dolor. Aperiam perspiciatis deserunt. Rem doloremque eu or eiusmod.</p>
  57.  
  58. <hr>
  59.  
  60. <p>Commodi quis. Velit. Adipisci suscipit but vel yet incididunt for sit or adipisicing, omnis. Non id. Quisquam culpa and autem. Inventore nostrum. Doloremque culpa for vel but sed. Numquam eius. Esse laborum. Deserunt. Anim doloremque for elit for rem labore but voluptas.</p>
  61.  
  62. <hr>
  63.  
  64. <p>background image from <a href="https://goblin-heart.net/sadgrl/webmastery/downloads/tiledbgs">sadgrl</a>, header image from <a href="https://www.reddit.com/r/MyLifeAsATeenageRobot/comments/g2tbk4/flag_of_the_mlaatr_fandom/">Robowaifu04</a>, star icon from <a href="https://fonts.google.com/">Google Fonts</a>, MLAATR images from Nickelodeon</p>
  65.  
  66. </div>
  67.  
  68. <!-- footer -->
  69. <div id="footer">
  70. CC0 Public Domain, 2024
  71. </div>
  72. </div>
  73. </div>
  74. <!-- container end -->
  75. <style type="text/css">
  76. @import url('https://fonts.googleapis.com/css2?family=Quicksand:[email protected]&display=swap'); /* This font was imported from Google Fonts. Feel free to change it! */
  77.  
  78. /* Body */
  79.  
  80. body{
  81. background-image:url('https://file.garden/ZpOSvyOun08fNCmH/water2.webp');
  82. background-color: #; /* remove the bg image url if you just wanna use a color */
  83. background-size: 100px;
  84. font-family: 'Quicksand';
  85. font-size:18px;
  86. position:relative;
  87. }
  88.  
  89.  
  90. .main{
  91. width:1000px;
  92. margin:15px 0 15px 0;
  93. }
  94.  
  95. /* Link Color */
  96.  
  97. a{
  98. color: #07a1b5;
  99. }
  100.  
  101.  
  102. /* Container */
  103.  
  104. .container{
  105. width:400px; /* no matter how much you change the width it will always stay at the side. if it runs into the side image, decrease the side image left px to inch the image the other way */
  106. margin:15px 0 15px 0;
  107. float: right;
  108. color: #06556b;
  109. }
  110.  
  111.  
  112.  
  113. /* Header */
  114.  
  115. #header{
  116. height:175px; /* change this if you have a shorter/taller image */
  117. margin:0 0 10px 0;
  118. border: 2px solid #045166;
  119. border-radius: 5px;
  120. }
  121.  
  122. /* . . . . . . . . . . . . . */
  123.  
  124. #header_img{
  125. /* "100%" specifies that the image will be as big as possible without overflowing outside the element. */
  126. width:100%;
  127. height:100%;
  128. object-fit: fill;
  129. background-size: cover;
  130. background-position: 50% 30%;
  131. background-image:url('https://file.garden/ZpOSvyOun08fNCmH/jenny-banner.png');
  132. }
  133.  
  134.  
  135.  
  136. /* Links */
  137.  
  138. #links{
  139. margin:0 0 10px 0;
  140. text-align:center;
  141. background:#ffffff;
  142. padding:5px;
  143. border: 2px solid #045166;
  144. border-radius: 5px;
  145. }
  146.  
  147.  
  148. /* Content */
  149.  
  150. #content{
  151. background:#ffffff;
  152. padding:10px;
  153. margin:0 0 10px 0;
  154. /* if you want the content to get taller endlessly, leave it as is. But if you want it to remain a specific height and start scrolling, include these properties outside of this grey area:
  155. max-height:250px (can be changed to whatever number you like);
  156. overflow-y:auto; */
  157. border: 2px solid #045166;
  158. border-radius: 5px;
  159. }
  160.  
  161. /* Side Image */
  162.  
  163. #sideimg{
  164. float: left;
  165. position: fixed;
  166. /* mess with the position however you want. */
  167. left: 300px;
  168. padding: 10px;
  169. }
  170.  
  171. /* Divider thingy. You can change the pattern and style */
  172. hr {
  173. border-width: 5px 0 0 0;
  174. border-style: dotted;
  175. border-color: #037494;
  176. }
  177.  
  178. /* Footer */
  179.  
  180. #footer{
  181. margin:15px 0 10px 0;
  182. text-align:center;
  183. background:#ffffff;
  184. padding:5px;
  185. border: 2px solid #045166;
  186. border-radius: 5px;
  187. }
  188. </style>
  189. </body>
  190. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!