API tools faq
paste
Advertisement
repth

Theme 44

repth
Jul 3rd, 2022
1,870
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.08 KB | None | 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. <title>Altimit</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=Karla&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=PT+Sans+Narrow&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. background: rgb(255,255,255);
  26. background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,105,0,1) 8%, rgba(181,83,5,1) 20%, rgba(255,105,0,1) 33%, rgba(255,105,0,1) 63%, rgba(255,166,104,1) 77%, rgba(255,255,255,1) 100%);
  27. font-family: 'Karla', sans-serif;
  28. font-size: 16px;
  29. color: #111;
  30. overflow-x: hidden;
  31. }
  32.  
  33. .bgimg{
  34. position: fixed;
  35. bottom: 0;
  36. left: 150px;
  37. width: 1024px;
  38. }
  39.  
  40. .sidewrapper{
  41. position: fixed;
  42. left: 0;
  43. top: 0;
  44. height: 100%;
  45. z-index: 4;
  46. }
  47.  
  48. .sidewrapper2{
  49. display: flex;
  50. flex-direction: row;
  51. height: 100%;
  52. }
  53.  
  54. .side1{
  55. background-color: #000;
  56. width: 150px;
  57. height: 100%;
  58. display: flex;
  59. flex-direction: column;
  60. text-align: center;
  61. font-size: 28px;
  62. font-family: 'PT Sans Narrow', sans-serif;
  63. padding: 1.5rem 0 1.5rem 0;
  64. overflow: scroll;
  65. overflow-x: hidden;
  66. }
  67.  
  68. .side2{
  69. background-color: #000;
  70. opacity: 0.7;
  71. width: 50px;
  72. height: 100%;
  73. }
  74.  
  75. .headerwrapper{
  76. width: 100%;
  77. display: flex;
  78. flex-direction: column;
  79. position: relative;
  80. z-index: 3;
  81. }
  82.  
  83. .headerborder{
  84. background: rgba(0, 0, 0, 0.8);
  85. width: 100%;
  86. height: 25px;
  87. }
  88.  
  89. .header{
  90. margin-left: 200px;
  91. font-size: 56px;
  92. padding-top: 3rem;
  93. line-height: 38px;
  94. font-family: 'Arial', sans-serif;
  95. text-shadow: 3px 3px 0px #8C3F00;
  96. color: #000;
  97. }
  98.  
  99. .footerwrapper{
  100. width: 100%;
  101. background-color: #000;
  102. opacity: 0.7;
  103. height: 40px;
  104. position: fixed;
  105. bottom: 0;
  106. left: 0;
  107. z-index: 2;
  108. }
  109.  
  110. .container{
  111. display: flex;
  112. flex-direction: column;
  113. padding: 3rem 3rem 5rem 3rem;
  114. gap: 1rem;
  115. }
  116.  
  117. .box{
  118. background: rgba(255, 255, 255, 0.9);
  119. border: 5px ridge #C09657;
  120. margin-left: 200px;
  121. position: relative;
  122. z-index: 1;
  123. }
  124.  
  125. .content{
  126. padding: 1rem;
  127. }
  128.  
  129. .subheaders{
  130. background-color: #000;
  131. color: #fff;
  132. border-bottom: 3px ridge #C09657;
  133. font-weight: normal;
  134. text-transform: uppercase;
  135. font-size: 16px;
  136. }
  137.  
  138. .altimitlogo{
  139. position: fixed;
  140. right: 1rem;
  141. top: 42%;
  142. width: 480px;
  143. }
  144.  
  145. a{
  146. color: #97D9E9;
  147. text-decoration: none;
  148. }
  149.  
  150. .side1 a{
  151. color: #fff;
  152. text-decoration: none;
  153. }
  154.  
  155. a:visited{
  156. color: #97D9E9;
  157. }
  158.  
  159. .side1 a:visited{
  160. color: #fff;
  161. }
  162.  
  163. a:hover{
  164. font-weight: bold;
  165. text-shadow: none;
  166. }
  167.  
  168. .side1 a:hover{
  169. font-weight: normal;
  170. text-shadow: 0 0 5px #fff;
  171. color: #97D9E9;
  172. }
  173.  
  174. a:active{
  175. font-weight: normal;
  176. }
  177.  
  178. ::-webkit-scrollbar{
  179. width: 8px;
  180. }
  181.  
  182. ::-webkit-scrollbar-track{
  183. background-color: #000;
  184. }
  185.  
  186. ::-webkit-scrollbar-thumb{
  187. background-color: #C09657;
  188. }
  189.  
  190. .side1::-webkit-scrollbar{
  191. width: 3px;
  192. }
  193.  
  194. .side1::-webkit-scrollbar-track{
  195. background-color: #000;
  196. }
  197.  
  198. .side1::-webkit-scrollbar-thumb{
  199. background: rgba(255, 255, 255, 0.3);
  200. }
  201.  
  202. #credit{
  203. color: #fff;
  204. font-size: 12px;
  205. position: fixed;
  206. bottom: 0;
  207. right: 0;
  208. z-index: 3;
  209. }
  210.  
  211. @media(max-width:750px){
  212. body{
  213. background: rgb(255,255,255);
  214. background: linear-gradient(90deg, rgba(255,105,0,1) 0%, rgba(255,105,0,1) 8%, rgba(181,83,5,1) 20%, rgba(255,105,0,1) 33%, rgba(255,105,0,1) 63%, rgba(255,166,104,1) 77%, rgba(255,255,255,1) 100%);
  215. }
  216. .bgimg{
  217. position: fixed;
  218. bottom: 0;
  219. left: 0;
  220. }
  221. .img{
  222. width: 300px;
  223. }
  224. .headerwrapper{
  225. position: relative;
  226. z-index: 4;
  227. }
  228. .header{
  229. margin: 0;
  230. }
  231. .headerborder{
  232. display: none;
  233. }
  234. .sidewrapper{
  235. position: relative;
  236. z-index: 5;
  237. position: sticky;
  238. top: 0;
  239. }
  240. .sidewrapper2{
  241. display: flex;
  242. flex-direction: column;
  243. width: 100%;
  244. }
  245. .side1{
  246. display: flex;
  247. flex-direction: row;
  248. flex-wrap: wrap;
  249. align-items: center;
  250. justify-content: center;
  251. width: 100%;
  252. height: auto;
  253. padding: 0.5rem;
  254. font-size: 18px;
  255. }
  256. .side1 img{
  257. width: 48px;
  258. }
  259. .side2{
  260. width: 100%;
  261. height: 25px;
  262. }
  263. .container{
  264. padding: 1rem 1rem 4rem 1rem;
  265. }
  266. .box{
  267. margin: 0;
  268. }
  269.  
  270. </style>
  271.  
  272. </head>
  273.  
  274. <body>
  275.  
  276. <img class="bgimg" src="https://i.imgur.com/CrmWR1m.png">
  277.  
  278. <!-- HEADER -->
  279. <div class="headerwrapper">
  280.  
  281. <h1 class="header">The World</h1>
  282. <div class="headerborder">.</div>
  283.  
  284. </div>
  285.  
  286. <div class="sidewrapper">
  287. <div class="sidewrapper2">
  288.  
  289. <!-- SIDEBAR LINKS -->
  290. <div class="side1">
  291. <a href="URL HERE"><img
  292. src="https://i.imgur.com/FM4JrM1.png"><p>THE WORLD</a></p>
  293. <a href="URL HERE"><img src="https://i.imgur.com/WeZ6fmy.png"><p>MAILER</a></p>
  294. <a href="URL HERE"><img src="https://i.imgur.com/KkJtAml.png"><p>NEWS</a></p>
  295. <a href="URL HERE"><img src="https://i.imgur.com/eZGAhVt.png"><p>ACCESSORY</a></p>
  296. <a href="URL HERE"><img src="https://i.imgur.com/2SMR5ij.png"><p>AUDIO</a></p>
  297. <a href="URL HERE"><img src="https://i.imgur.com/zKnelZI.png"><p>DATA</a></p>
  298. </div>
  299.  
  300. <div class="side2">
  301. .
  302. </div>
  303. </div>
  304. </div>
  305.  
  306. <div class="container">
  307.  
  308. <!-- BOX 1 -->
  309. <div class="box">
  310. <h3 class="subheaders">Header Here</h3>
  311. <div class="content">
  312. <img style="float:right;margin:0px 0px 10px 10px;max-width:230px;border:1px solid #97D9E9;" src="https://i.imgur.com/VKfwfex.jpg"><img>
  313. <p>"I've always wanted a litter box like this!" It flushes with water so there is no need to clean it. The sensor picks up the cat's motion and keeps it clean at all times. It is bolted on easily between the human toilet and the sewer, so there is no hassle involved.
  314. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut mi et urna pharetra cursus molestie et augue. Nulla eu ultrices lectus. Aliquam et egestas urna. Pellentesque vitae faucibus magna, vel facilisis lorem. Phasellus quis nisl a eros accumsan interdum. Proin accumsan finibus finibus.</p>
  315. <br>
  316. <p>Suspendisse a consectetur tellus. Morbi aliquet semper pellentesque. Praesent ultricies ac purus in scelerisque. Nunc cursus quam sit amet dolor egestas, elementum malesuada nulla molestie. Etiam turpis leo, vehicula in tempor quis, fermentum non est.</p>
  317. <br>
  318. <p>Sed egestas hendrerit erat sed fringilla. Praesent pharetra, lorem ac mollis semper, erat tortor volutpat libero, sed aliquam dolor nulla non erat. Nam auctor luctus ligula sed lobortis. Vivamus lorem urna, vulputate quis arcu id, pretium vehicula dui. Nam ac massa arcu. Morbi sagittis enim in diam pulvinar accumsan.</p>
  319. <br>
  320. <p>Cras dignissim nisi lobortis tellus molestie malesuada. Fusce imperdiet est turpis, sit amet convallis arcu volutpat in. Donec eu ipsum et dui interdum sagittis. Nunc eget condimentum lorem. Curabitur sit amet lorem id erat ultricies volutpat nec at ante. Proin at nulla nibh. Morbi nibh odio, semper at enim id, ultrices mollis ligula. Cras in purus massa. Phasellus eget sagittis purus. Etiam a turpis ac est tincidunt congue. Aliquam mattis libero felis, eget lobortis neque porttitor eu. Praesent nulla enim, sollicitudin sed velit nec, eleifend semper mauris. Quisque tellus massa, condimentum at ante vitae, venenatis aliquet diam.</p>
  321. </div>
  322. </div>
  323.  
  324. <!-- BOX 2 -->
  325. <div class="box">
  326. <h3 class="subheaders">Header Here</h3>
  327. <div class="content">
  328. <img style="float:right;margin:0px 0px 10px 10px;width:230px;border:1px solid #97D9E9;" src="https://i.imgur.com/VKfwfex.jpg"><img>
  329. <p>"I've always wanted a litter box like this!" It flushes with water so there is no need to clean it. The sensor picks up the cat's motion and keeps it clean at all times. It is bolted on easily between the human toilet and the sewer, so there is no hassle involved.
  330. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut mi et urna pharetra cursus molestie et augue. Nulla eu ultrices lectus. Aliquam et egestas urna. Pellentesque vitae faucibus magna, vel facilisis lorem. Phasellus quis nisl a eros accumsan interdum. Proin accumsan finibus finibus.</p>
  331. <br>
  332. <p>Suspendisse a consectetur tellus. Morbi aliquet semper pellentesque. Praesent ultricies ac purus in scelerisque. Nunc cursus quam sit amet dolor egestas, elementum malesuada nulla molestie. Etiam turpis leo, vehicula in tempor quis, fermentum non est.</p>
  333. <br>
  334. <p>Sed egestas hendrerit erat sed fringilla. Praesent pharetra, lorem ac mollis semper, erat tortor volutpat libero, sed aliquam dolor nulla non erat. Nam auctor luctus ligula sed lobortis. Vivamus lorem urna, vulputate quis arcu id, pretium vehicula dui. Nam ac massa arcu. Morbi sagittis enim in diam pulvinar accumsan.</p>
  335. <br>
  336. <p>Cras dignissim nisi lobortis tellus molestie malesuada. Fusce imperdiet est turpis, sit amet convallis arcu volutpat in. Donec eu ipsum et dui interdum sagittis. Nunc eget condimentum lorem. Curabitur sit amet lorem id erat ultricies volutpat nec at ante. Proin at nulla nibh. Morbi nibh odio, semper at enim id, ultrices mollis ligula. Cras in purus massa. Phasellus eget sagittis purus. Etiam a turpis ac est tincidunt congue. Aliquam mattis libero felis, eget lobortis neque porttitor eu. Praesent nulla enim, sollicitudin sed velit nec, eleifend semper mauris. Quisque tellus massa, condimentum at ante vitae, venenatis aliquet diam.</p>
  337. <br>
  338. <p>Cras dignissim nisi lobortis tellus molestie malesuada. Fusce imperdiet est turpis, sit amet convallis arcu volutpat in. Donec eu ipsum et dui interdum sagittis. Nunc eget condimentum lorem. Curabitur sit amet lorem id erat ultricies volutpat nec at ante. Proin at nulla nibh. Morbi nibh odio, semper at enim id, ultrices mollis ligula. Cras in purus massa. Phasellus eget sagittis purus. Etiam a turpis ac est tincidunt congue. Aliquam mattis libero felis, eget lobortis neque porttitor eu. Praesent nulla enim, sollicitudin sed velit nec, eleifend semper mauris. Quisque tellus massa, condimentum at ante vitae, venenatis aliquet diam.</p>
  339. </div>
  340. </div>
  341.  
  342. <img class="altimitlogo" src="https://i.imgur.com/kX2jDP5.png">
  343. </div>
  344.  
  345. <div class="footerwrapper">
  346. .
  347. </div>
  348.  
  349. <p id="credit">Theme by <a href="https://repth.neocities.org/index.html">Repth</a></p>
  350.  
  351. </body>
  352.  
  353. </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!