API tools faq
paste
Guest User

lalaloopsy site template

a guest
Mar 10th, 2026
334
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.59 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <link rel="icon" href="pinacolada.png">
  7.  
  8. <!-- Google font -->
  9. <link href="https://fonts.googleapis.com/css2?family=Unkempt:wght@400;700&display=swap" rel="stylesheet">
  10.  
  11. <title>site template</title>
  12. <style>
  13. /* ==================================================
  14. 1) RESET
  15. Removes default browser spacing and makes sizing
  16. easier to control.
  17. ================================================== */
  18. * {
  19. margin: 0;
  20. padding: 0;
  21. box-sizing: border-box;
  22. }
  23.  
  24. /* ==================================================
  25. 2) EASY-TO-EDIT VARIABLES
  26. Replace these values to customize the whole layout
  27. without digging through all the CSS.
  28. ================================================== */
  29. :root {
  30. --font-main: 'Unkempt', cursive;
  31.  
  32. --page-bg-image: url(https://i.pinimg.com/736x/c5/11/da/c511da71563fff19082c681418129a65.jpg);
  33. --header-bg-image: url(https://i.pinimg.com/1200x/cb/93/9d/cb939d65557f7ccde601e346ac565896.jpg);
  34. --nav-bg-image: url(https://i.pinimg.com/736x/61/08/c6/6108c6cead23db25bcf646af69366c31.jpg);
  35. --content-bg-image: url(https://i.imgur.com/8LVxJ4E.jpeg);
  36.  
  37. --hero-left-image: url(https://i.imgur.com/6TXneQx.png);
  38. --hero-right-image: url(https://i.imgur.com/psHjiYA.png);
  39. --divider-image: url(https://i.imgur.com/kNwIOSP.png);
  40. --nav-icon-image: url(https://i.imgur.com/jPNNBtg.png);
  41.  
  42. --color-page-text: #82BD7D;
  43. --color-link: #ffbad6;
  44. --color-link-hover: #fd5398;
  45. --color-title: #f0ff7e;
  46. --color-title-outline: #ff68a6;
  47. --color-button-text: #d18aa6;
  48. --color-heading: #ff68a6;
  49. --color-body-text: #bba68f;
  50.  
  51. --container-width: 760px;
  52. --container-radius: 12px;
  53. --card-radius: 18px;
  54. }
  55.  
  56. /* ==================================================
  57. 3) PAGE STYLING
  58. Controls the full page background and overall text.
  59. ================================================== */
  60. body {
  61. font-family: var(--font-main);
  62. font-weight: 700;
  63. background: #ffffff var(--page-bg-image);
  64. background-size: auto 80%;
  65. background-position: center;
  66. display: flex;
  67. justify-content: center;
  68. letter-spacing: 1px;
  69. text-shadow: 0 0 1px;
  70. color: var(--color-page-text);
  71. padding: 8px 0;
  72. }
  73.  
  74. /* Link styling */
  75. a:link,
  76. a:visited,
  77. a:active {
  78. color: var(--color-link);
  79. cursor: pointer;
  80. text-decoration: none;
  81. }
  82.  
  83. a:hover {
  84. color: var(--color-link-hover);
  85. text-decoration: underline;
  86. }
  87.  
  88. /* ==================================================
  89. 4) MAIN PAGE CONTAINER
  90. This is the fixed frame of the site.
  91. ================================================== */
  92. .site-shell {
  93. width: var(--container-width);
  94. max-width: 105%;
  95. background-color: #fff;
  96. border: 3px solid #ffffff;
  97. border-radius: var(--container-radius);
  98. height: calc(100vh - 16px);
  99. display: flex;
  100. flex-direction: column;
  101. overflow: hidden;
  102. }
  103.  
  104. /* ==================================================
  105. 5) HEADER / BANNER
  106. Top image area with the site title.
  107. ================================================== */
  108. .site-header {
  109. width: 100%;
  110. height: 150px;
  111. background: var(--header-bg-image) center / cover no-repeat;
  112. border-bottom: 2px solid #ffffff;
  113. display: flex;
  114. align-items: center;
  115. justify-content: center;
  116. text-align: center;
  117. }
  118.  
  119. .site-title {
  120. font-family: var(--font-main);
  121. font-size: 120px;
  122. font-weight: 1000;
  123. letter-spacing: 3px;
  124. color: var(--color-title);
  125. -webkit-text-stroke: 2.8px var(--color-title-outline);
  126. }
  127.  
  128. /* ==================================================
  129. 6) NAVIGATION STRIP
  130. Holds the navigation buttons and optional icons.
  131. ================================================== */
  132. .nav-strip {
  133. background: var(--nav-bg-image) center / cover no-repeat;
  134. padding: 12px 14px 14px;
  135. border-bottom: 2px solid #fff;
  136. }
  137.  
  138. .nav-row {
  139. display: flex;
  140. align-items: center;
  141. justify-content: center;
  142. gap: 6px;
  143. flex-wrap: wrap;
  144. }
  145.  
  146. .nav-button {
  147. min-width: 180px;
  148. padding: 10px 16px;
  149. background: #fff;
  150. border: 2px solid rgba(255, 182, 213, 0.85);
  151. border-radius: 16px;
  152. box-shadow: 0 3px 0 rgba(255, 182, 213, 0.35);
  153. text-align: center;
  154. font-size: 22px;
  155. color: var(--color-button-text);
  156. letter-spacing: 1px;
  157. transition: transform 0.08s ease, box-shadow 0.08s ease;
  158. }
  159.  
  160. .nav-button:hover {
  161. transform: translateY(-1px);
  162. box-shadow: 0 5px 0 rgba(255, 182, 213, 0.35);
  163. }
  164.  
  165. .nav-icon {
  166. width: 70px;
  167. height: 70px;
  168. background: var(--nav-icon-image) center / contain no-repeat;
  169. border: none;
  170. box-shadow: none;
  171. flex-shrink: 0;
  172. }
  173.  
  174. /* ==================================================
  175. 7) SCROLLABLE CONTENT AREA
  176. This is the inside section that scrolls.
  177. ================================================== */
  178. .content-wrap {
  179. background: var(--content-bg-image) center / cover no-repeat;
  180. padding: 18px;
  181. flex: 1;
  182. overflow-y: auto;
  183. overflow-x: hidden;
  184. }
  185.  
  186. /* Main white content card */
  187. .content-card {
  188. background: rgba(255, 255, 255, 0.92);
  189. border-radius: var(--card-radius);
  190. padding: 20px 0;
  191. position: relative;
  192. }
  193.  
  194. /* ==================================================
  195. 8) HERO SECTION
  196. Top section with left image, intro text, right image.
  197. ================================================== */
  198. .hero-section {
  199. display: grid;
  200. grid-template-columns: 180px 1fr 120px;
  201. gap: 14px;
  202. align-items: center;
  203. padding: 0 0 6px;
  204. }
  205.  
  206. .hero-image-left {
  207. width: 135%;
  208. aspect-ratio: 1 / 1.15;
  209. background: var(--hero-left-image) center / contain no-repeat;
  210. margin-left: -12px;
  211. }
  212.  
  213. .hero-image-right {
  214. width: 90%;
  215. aspect-ratio: 1 / 1;
  216. background: var(--hero-right-image) center / contain no-repeat;
  217. margin-left: -20px;
  218. }
  219.  
  220. .hero-text {
  221. text-align: left;
  222. padding: 6px 0 6px 8px;
  223. text-shadow: none;
  224. }
  225.  
  226. /* ==================================================
  227. 9) TEXT STYLES
  228. Shared heading and paragraph styles.
  229. ================================================== */
  230. .section-heading {
  231. font-size: 34px;
  232. color: var(--color-heading);
  233. letter-spacing: 2px;
  234. margin-bottom: 8px;
  235. }
  236.  
  237. .body-text {
  238. font-size: 16px;
  239. line-height: 1.45;
  240. font-weight: 700;
  241. color: var(--color-body-text);
  242. opacity: 0.92;
  243. }
  244.  
  245. /* ==================================================
  246. 10) DIVIDER ROW
  247. Decorative divider images under the intro text.
  248. ================================================== */
  249. .divider-row {
  250. display: flex;
  251. justify-content: center;
  252. align-items: center;
  253. gap: 0;
  254. width: min(520px, 100%);
  255. margin: 17px auto 10px;
  256. }
  257.  
  258. .divider {
  259. width: 50%;
  260. height: 80px;
  261. background: var(--divider-image) center / contain no-repeat;
  262. opacity: 0.95;
  263. }
  264.  
  265. .divider + .divider {
  266. margin-left: -18px;
  267. }
  268.  
  269. /* ==================================================
  270. 11) ABOUT SECTION
  271. Main paragraph section below the hero.
  272. ================================================== */
  273. .about-section {
  274. text-align: center;
  275. padding: 8px 12px 4px;
  276. text-shadow: none;
  277. }
  278.  
  279. .about-section .section-heading {
  280. font-size: 32px;
  281. margin-top: 6px;
  282. }
  283.  
  284. .about-text {
  285. text-align: left;
  286. padding: 10px 80px;
  287. }
  288.  
  289. /* ==================================================
  290. 12) IMAGE GALLERY
  291. Row of 3 square images under the about section.
  292. ================================================== */
  293. .image-gallery {
  294. display:grid;
  295. grid-template-columns: repeat(3, 1fr);
  296. gap:12px;
  297. padding: 20px 35px 6px;
  298. max-width: 720px;
  299. margin: 0 auto;
  300. }
  301.  
  302. .image-box {
  303. background: transparent;
  304. }
  305.  
  306. .image-box img {
  307. width: 100%;
  308. height: auto;
  309. display: block;
  310. object-fit: contain;
  311. }
  312.  
  313. /* ==================================================
  314. 13) MOBILE RESPONSIVE RULES
  315. Adjusts layout for smaller screens.
  316. ================================================== */
  317. @media (max-width: 740px) {
  318. .hero-section {
  319. grid-template-columns: 1fr;
  320. }
  321.  
  322. .hero-image-left,
  323. .hero-image-right {
  324. max-width: 240px;
  325. margin: 0 auto;
  326. }
  327.  
  328. .nav-button {
  329. min-width: 150px;
  330. }
  331.  
  332. .image-gallery {
  333. grid-template-columns: 1fr;
  334. max-width: 320px;
  335. }
  336.  
  337. .about-text {
  338. padding: 10px 24px;
  339. }
  340.  
  341. .site-title {
  342. font-size: 72px;
  343. }
  344. }
  345. </style>
  346. </head>
  347. <body>
  348.  
  349. <!-- ==================================================
  350. MAIN SITE FRAME
  351. Everything on the page lives here.
  352. ================================================== -->
  353. <div class="site-shell">
  354.  
  355. <!-- Header / title area -->
  356. <header class="site-header">
  357. <div class="site-title">site name</div>
  358. </header>
  359.  
  360. <!-- Navigation area -->
  361. <nav class="nav-strip">
  362. <div class="nav-row">
  363. <a class="nav-button" href="YOUR_LINK_1_HERE">button</a>
  364. <div class="nav-icon" title="optional decorative icon"></div>
  365.  
  366. <a class="nav-button" href="YOUR_LINK_2_HERE">button</a>
  367. <div class="nav-icon" title="optional decorative icon"></div>
  368.  
  369. <a class="nav-button" href="YOUR_LINK_3_HERE">button</a>
  370. </div>
  371. </nav>
  372.  
  373. <!-- Scrollable page content -->
  374. <main class="content-wrap">
  375. <div class="content-card">
  376.  
  377. <!-- Hero / intro section -->
  378. <section class="hero-section">
  379. <div class="hero-image-left" title="left decorative image"></div>
  380.  
  381. <div class="hero-text">
  382. <div class="section-heading">welcome!</div>
  383. <div class="body-text">
  384. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  385. Etiam quis ante sodales, consectetur risus sit amet, rutrum metus.
  386. Sed id pellentesque ex. Aenean ornare, lorem vel tempor luctus,
  387. turpis diam sollicitudin orci, a laoreet eros ipsum vel eros.
  388. In sit amet placerat diam.
  389. </div>
  390.  
  391. <!-- Decorative divider -->
  392. <div class="divider-row">
  393. <div class="divider" title="decorative divider"></div>
  394. <div class="divider" title="decorative divider"></div>
  395. </div>
  396. </div>
  397.  
  398. <div class="hero-image-right" title="right decorative image"></div>
  399. </section>
  400.  
  401. <!-- About section -->
  402. <section class="about-section">
  403. <div class="section-heading">about me</div>
  404. <div class="body-text about-text">
  405. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis
  406. ante sodales, consectetur risus sit amet, rutrum metus. Sed id
  407. pellentesque ex. Aenean ornare, lorem vel tempor luctus, turpis diam
  408. sollicitudin orci, a laoreet eros ipsum vel eros. In sit amet
  409. placerat diam. Praesent diam nisl, pretium sed sapien sed, imperdiet
  410. molestie quam.
  411. </div>
  412. </section>
  413.  
  414. <!-- 3-image gallery -->
  415. <section class="image-gallery">
  416. <div class="image-box">
  417. <img src="https://i.imgur.com/6bC6CIT.jpeg" alt="image 1">
  418. </div>
  419.  
  420. <div class="image-box">
  421. <img src="https://i.pinimg.com/736x/af/69/1b/af691b7fcb863eda30eff39b3406fd19.jpg" alt="image 2">
  422. </div>
  423.  
  424. <div class="image-box">
  425. <img src="https://i.pinimg.com/736x/45/fe/d7/45fed79247ee8d4769e57dd142b9b39c.jpg" alt="image 3">
  426. </div>
  427. </section>
  428.  
  429. </div>
  430. </main>
  431. </div>
  432.  
  433. </body>
  434. </html>
  435.  
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!