repth

Theme 39

Jun 12th, 2022 (edited)
507
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.44 KB | None | 0 0
  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. <title>Theme 39</title>
  7.  
  8. <link rel="preconnect" href="https://fonts.googleapis.com">
  9. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  10. <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
  11.  
  12. <link rel="preconnect" href="https://fonts.googleapis.com">
  13. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  14. <link href="https://fonts.googleapis.com/css2?family=Parisienne&display=swap" rel="stylesheet">
  15.  
  16. <style>
  17.  
  18. *{
  19. box-sizing: border-box;
  20. margin: 0;
  21. padding: 0;
  22. }
  23.  
  24. body{
  25. margin: 0;
  26. background-color: #FDA0C3;
  27. color: #5c3443;
  28. font-family: 'Open Sans', sans-serif;
  29. padding: 20px;
  30. }
  31.  
  32. .title{
  33. padding-left: 0.5rem;
  34. font-size: 40px;
  35. line-height: 20px;
  36. position: relative;
  37. z-index: 1;
  38. }
  39.  
  40. .container{
  41. display: flex;
  42. flex-direction: row;
  43. gap: 1rem;
  44. }
  45.  
  46. .block-1{
  47. flex-grow: 2;
  48. flex-basis: 0;
  49. padding: 20px;
  50. display: flex;
  51. flex-direction: column;
  52. row-gap: 10px;
  53. background-color: #FFE4F5;
  54. }
  55.  
  56. .block-2{
  57. flex-grow: 8;
  58. flex-basis: 0;
  59. }
  60.  
  61. .pfp{
  62. width: 100%;
  63. border: 2px solid #5c3443;
  64. }
  65.  
  66. .headers{
  67. font-family: 'Parisienne', sans-serif;
  68. }
  69.  
  70. .block-1 ul{
  71. padding-left: 2.5em;
  72. }
  73.  
  74. .block-1 li{
  75. font-style: italic;
  76. }
  77.  
  78. .content{
  79. display: flex;
  80. flex-direction: column;
  81. row-gap: 1rem;
  82. }
  83.  
  84. .area{
  85. background-color: #FFE4F5;
  86. padding: 1rem;
  87. border-left: 4px solid #C36B8D;
  88. display: flex;
  89. flex-direction: column;
  90. row-gap: 1rem;
  91. }
  92.  
  93. .postheadwrapper{
  94. display: flex;
  95. justify-content: space-between;
  96. }
  97.  
  98. .posthead{
  99. align-self: center;
  100. }
  101.  
  102. .posth2{
  103. font-size: 26px;
  104. }
  105.  
  106. .date{
  107. font-size: 13px;
  108. }
  109.  
  110. .icon{
  111. width: 75px;
  112. opacity: 1;
  113. border: 2px solid #5c3443;
  114. align-self: center;
  115. }
  116.  
  117. @media(max-width:480px){
  118. .container{
  119. flex-direction: column;
  120. }
  121. .block-1{
  122. height: auto;
  123. text-align: center;
  124. }
  125. .pfpwrapper{
  126. display: flex;
  127. justify-content: center;
  128. }
  129. .pfp{
  130. width: 80%;
  131. }
  132. .block-1 ul, li{
  133. display: inline;
  134. padding: 0;
  135. }
  136. .block-1 li{
  137. margin-left: 5px;
  138. }
  139. .title{
  140. text-align: center;
  141. font-size: 44px;
  142. }
  143. }
  144.  
  145. a{
  146. color: #5c3443;
  147. text-decoration: none;
  148. }
  149.  
  150. a:visited{
  151. color: #5c3443;
  152. }
  153.  
  154. a:hover{
  155. font-weight: bold;
  156. }
  157.  
  158. a:active{
  159. font-weight: normal;
  160. }
  161.  
  162. ::-webkit-scrollbar{
  163. width: 6px;
  164. }
  165.  
  166. ::-webkit-scrollbar-track{
  167. background-color: transparent;
  168. }
  169.  
  170. ::-webkit-scrollbar-thumb{
  171. background-color: #C36B8D;
  172. }
  173.  
  174. #credit{
  175. font-size: 12px;
  176. position: fixed;
  177. bottom: 0;
  178. right: 0;
  179. }
  180.  
  181. </style>
  182.  
  183. </head>
  184.  
  185. <body>
  186.  
  187. <h1 class="headers title">Title Here</h1>
  188.  
  189. <div class="container">
  190.  
  191. <div class="block block-1">
  192. <div class="pfpwrapper">
  193.  
  194. <!-- SIDEBAR AVATAR -->
  195. <img class="pfp" src="https://i.imgur.com/Bf8LIR5.jpg">
  196. </div>
  197.  
  198. <!-- SIDEBAR DESCRIPTION -->
  199. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mollis rhoncus tellus quis sodales. Curabitur porttitor vel leo quis porta.</p>
  200.  
  201. <!-- SIDEBAR NAV -->
  202. <h2 class="headers">Navigate</h2>
  203. <ul>
  204. <li><a href="">Home</a></li>
  205. <li><a href="">About</a></li>
  206. <li><a href="">Gallery</a></li>
  207. <li><a href="">Blog</a></li>
  208. <li><a href="">Resources</a></li>
  209. <li><a href="">Other</a></li>
  210. <li><a href="">Misc</a></li>
  211. </ul>
  212. </div>
  213.  
  214. <div class="block block-2">
  215.  
  216. <div class="content">
  217.  
  218. <!-- BOX START -->
  219. <div class="area">
  220. <div class="postheadwrapper">
  221. <div class="posthead">
  222.  
  223. <!--ENTRY HEADER AND DATE -->
  224. <h2 class="headers posth2">Header Here</h2>
  225. <p class="date">6/12/22</p>
  226. </div>
  227. <!-- ENTRY ICON -->
  228. <img class="icon" src="https://i.imgur.com/Bf8LIR5.jpg">
  229. </div>
  230.  
  231. <!-- TEXT -->
  232. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mollis rhoncus tellus quis sodales. Curabitur porttitor vel leo quis porta. Vestibulum justo nunc, finibus vel eros non, egestas vehicula risus. Donec a eros in ligula suscipit luctus id sit amet nulla. Sed nec odio ipsum. Maecenas elementum mattis commodo. Praesent maximus neque in lorem sodales, et fringilla erat ornare.</p>
  233.  
  234. <p>In velit nisl, eleifend placerat odio eu, finibus fermentum dui. Pellentesque pretium vestibulum scelerisque. Donec ac nulla iaculis, volutpat dolor sit amet, tristique urna. Aliquam dolor diam, elementum at feugiat a, fermentum non massa. Donec a porta lacus, non ultricies velit. Suspendisse commodo orci nec nunc interdum, non bibendum orci posuere. Cras nunc eros, pharetra sed bibendum a, dignissim id felis. Nulla vehicula neque vulputate interdum pellentesque. Etiam scelerisque eros condimentum turpis varius, ac posuere ligula auctor. Nunc feugiat tempus leo sit amet tincidunt. Pellentesque porttitor dui quis purus pharetra lacinia. Nunc at diam porttitor, dictum nisi at, pellentesque turpis. Vestibulum gravida pharetra ligula non accumsan. Integer eu nulla tellus.</p>
  235. </div>
  236. <!-- BOX END -->
  237.  
  238. <!-- BOX START -->
  239. <div class="area">
  240. <div class="postheadwrapper">
  241. <div class="posthead">
  242.  
  243. <!--ENTRY HEADER AND DATE -->
  244. <h2 class="headers posth2">Header Here</h2>
  245. <p class="date">6/12/22</p>
  246. </div>
  247. <!-- ENTRY ICON -->
  248. <img class="icon" src="https://i.imgur.com/Bf8LIR5.jpg">
  249. </div>
  250.  
  251. <!-- TEXT -->
  252. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mollis rhoncus tellus quis sodales. Curabitur porttitor vel leo quis porta. Vestibulum justo nunc, finibus vel eros non, egestas vehicula risus. Donec a eros in ligula suscipit luctus id sit amet nulla. Sed nec odio ipsum. Maecenas elementum mattis commodo. Praesent maximus neque in lorem sodales, et fringilla erat ornare.</p>
  253.  
  254. <p>In velit nisl, eleifend placerat odio eu, finibus fermentum dui. Pellentesque pretium vestibulum scelerisque. Donec ac nulla iaculis, volutpat dolor sit amet, tristique urna. Aliquam dolor diam, elementum at feugiat a, fermentum non massa. Donec a porta lacus, non ultricies velit. Suspendisse commodo orci nec nunc interdum, non bibendum orci posuere. Cras nunc eros, pharetra sed bibendum a, dignissim id felis. Nulla vehicula neque vulputate interdum pellentesque. Etiam scelerisque eros condimentum turpis varius, ac posuere ligula auctor. Nunc feugiat tempus leo sit amet tincidunt. Pellentesque porttitor dui quis purus pharetra lacinia. Nunc at diam porttitor, dictum nisi at, pellentesque turpis. Vestibulum gravida pharetra ligula non accumsan. Integer eu nulla tellus.</p>
  255. </div>
  256. <!-- BOX END -->
  257.  
  258. </div>
  259.  
  260. </div>
  261.  
  262. </div>
  263.  
  264. <div id="credit"><a href="https://repth.neocities.org/index.html">©repth</a></div>
  265.  
  266. </body>
  267.  
  268. </html>
Add Comment
Please, Sign In to add comment