<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Soft Y2K Layout</title> <style> :root { --bg-color: #f6ecf5; --panel-bg: #ffffff; --primary-pink: #ffb7da; --soft-blue: #bbf2f6; --lavender: #e3d5ca; --text-dark: #4a3e4d; --text-muted: #8a7a8f; --border-style: 2px solid #4a3e4d; --bubblegum: #ff85a2; } * { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: var(--bg-color); /* Subtle Y2K pixel grid pattern */ background-image: radial-gradient(var(--primary-pink) 1px, transparent 0); background-size: 24px 24px; font-family: monospace; color: var(--text-dark); padding: 20px; min-height: 100vh; display: flex; flex-direction: column; gap: 20px; } /* Header Styling */ header { background: var(--panel-bg); border: var(--border-style); padding: 20px; border-radius: 16px; box-shadow: 4px 4px 0px #4a3e4d; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; } .logo { font-family: monospace; font-size: 1.8rem; font-weight: 700; color: var(--text-dark); text-transform: lowercase; letter-spacing: -1px; } .logo span { background: var(--soft-blue); padding: 2px 8px; border-radius: 20px; border: 1.5px solid #4a3e4d; } nav ul { display: flex; list-style: none; gap: 15px; } nav a { text-decoration: none; color: var(--text-dark); font-weight: 600; font-size: 0.95rem; padding: 6px 12px; border-radius: 20px; transition: all 0.2s ease; } nav a:hover { background: var(--primary-pink); } /* Main Container (2-Column Grid) */ .container { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 1200px; width: 100%; margin: 0 auto; flex: 1; } /* Individual Card Styles */ .card { background: var(--panel-bg); border: var(--border-style); border-radius: 16px; padding: 30px; box-shadow: 5px 5px 0px #4a3e4d; position: relative; overflow: hidden; } /* Specific Column Twists */ .col-main { background: linear-gradient(135deg, #ffffff 70%, #fff0f7 100%); } .col-side { background: linear-gradient(135deg, #ffffff 70%, #edfaff 100%); } /* Y2K Aesthetics Elements */ .badge { display: inline-block; font-family: monospace; font-size: 0.75rem; text-transform: uppercase; font-weight: 700; padding: 4px 10px; border-radius: 30px; border: var(--border-style); margin-bottom: 15px; } .badge-pink { background-color: var(--primary-pink); } .badge-blue { background-color: var(--soft-blue); } h1, h2 { font-family: comic sans ms; font-weight: 700; line-height: 1.2; margin-bottom: 15px; } h1 { font-size: 2.2rem; } h2 { font-size: 1.6rem; } p { line-height: 1.6; color: var(--text-muted); margin-bottom: 20px; } /* Cyber/Retro Style Buttons */ .btn { display: inline-flex; align-items: center; font-family: monospace; font-weight: 700; text-decoration: none; color: var(--text-dark); background-color: var(--soft-blue); border: var(--border-style); padding: 10px 20px; border-radius: 12px; box-shadow: 3px 3px 0px #4a3e4d; cursor: pointer; transition: transform 0.1s ease, box-shadow 0.1s ease; } .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0px #4a3e4d; } .btn-pink { background-color: var(--primary-pink); } /* Responsive Breakpoint for Laptop/Desktop */ @media (min-width: 768px) { .container { grid-template-columns: 2fr 1fr; /* 2-column split */ } } </style> </head> <body> <header> <div class="logo">angel<span>.cyber</span></div> <nav> <ul> <li><a href="#">home</a></li> <li><a href="#">blog</a></li> <li><a href="#">link</a></li> <li><a href="https://kristylicious.neocities.org/" target="_new">CREDIT</a></li> </ul> </nav> </header> <main class="container"> <!-- Left Column / Main Content --> <section class="card col-main"> <span class="badge badge-pink">welcome.exe</span> <h1>welcome to the soft side of cyberspace</h1> <p>This layout combines clean modern responsiveness with late 90s and early 2000s web nostalgia. <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu pretium tellus. Ut sem lacus, ornare non maximus ac, dapibus a magna. Interdum et malesuada fames ac ante ipsum primis in faucibus..</p> <a href="#" class="btn">read entry_</a> </section> <!-- Right Column / Sidebar --> <section class="card col-side"> <span class="badge badge-blue">status</span> <h2>updates</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu pretium tellus. Ut sem lacus, ornare non maximus ac, dapibus a magna. Interdum et malesuada fames ac ante ipsum primis in faucibus..</p> <a href="#" class="btn btn-pink">view full log ♡</a> </section> </main> </body> </html>
* CODE *
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <title>~*~ soft pastel daydream ~*~</title> <style> body { background-color: #E2E4F0; /* Soft Periwinkle Gray */ /* Vintage tiny 2x2 micro-dot tiled pixel background pattern */ background-image: radial-gradient(#CCD1E4 1px, transparent 1px); background-size: 6px 6px; color: #5A5E7A; /* Low-contrast Muted Slate Blue text */ font-family: "Courier New", Courier, monospace; font-size: 12px; margin: 0; padding: 40px 0; line-height: 1.5; } /* Narrow 1-Column Floating Table Container */ .soft-container { width: 460px; /* Classic narrow 00s column width */ background-color: #F3F5FC; /* Soft Milky White/Blue Tint */ margin: 0 auto; border-top: 1px dashed #A6ACC4; border-left: 1px dashed #A6ACC4; border-right: 1px dashed #A6ACC4; border-bottom: 1px dashed #A6ACC4; padding: 25px; box-shadow: 0px 0px 8px rgba(166, 172, 196, 0.2); } h1 { font-family: Georgia, serif; font-size: 16px; font-weight: normal; font-style: italic; color: #7E85A4; text-align: center; margin: 0 0 5px 0; letter-spacing: 1px; } .subtitle { text-align: center; font-size: 10px; color: #9EA5C2; margin-bottom: 20px; text-transform: lowercase; } .divider { text-align: center; color: #CCD1E4; margin: 15px 0; font-size: 11px; } /* Diary/Journal Logs */ .diary-entry { margin-bottom: 25px; } .entry-date { font-family: Georgia, serif; font-style: italic; font-size: 11px; color: #9EA5C2; border-bottom: 1px dotted #CCD1E4; padding-bottom: 2px; margin-bottom: 8px; } .entry-title { font-weight: bold; color: #7E85A4; font-size: 12px; margin-bottom: 5px; text-transform: lowercase; } /* Tiny 88x31/Icon link list */ .link-section { text-align: center; margin-top: 30px; padding-top: 15px; border-top: 1px dotted #CCD1E4; } /* Link Typography Styles */ a:link, a:visited { color: #8E95B3; text-decoration: none; border-bottom: 1px dotted #8E95B3; } a:hover { color: #A6ACC4; background-color: #FFFFFF; border-bottom: 1px solid #A6ACC4; } /* Retro Hit Counter formatting */ .counter-box { text-align: center; font-size: 9px; color: #9EA5C2; margin-top: 4px; letter-spacing: 1px; } /* Decorative pixel graphic placeholder box */ .pixel-graphic-box { width: 40px; height: 40px; background-color: #EBF0F9; border: 1px dotted #A6ACC4; margin: 15px auto; font-size: 9px; color: #9EA5C2; text-align: center; line-height: 40px; } </style> </head> <body> <!-- Strict 1-Column Nested Layout Structure --> <table class="soft-container" cellpadding="0" cellspacing="0" border="0" align="center"> <tr> <td> <!-- Header Section --> <h1>dreaming in periwinkle</h1> <div class="subtitle">welcome to a quiet little corner of the web.</div> <div class="pixel-graphic-box">â˜ï¸</div> <div class="divider">* . : * : . *</div> <!-- Profile Summary Paragraph --> <p style="text-align: center; font-size: 11px; padding: 0 10px;"> hello there. i'm cloudie. this is my simple 1-column, non-responsive layout.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu pretium tellus. Ut sem lacus, ornare non maximus ac, dapibus a magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. </p> <div class="divider">* . : * : . *</div> <!-- Diary Log Entry 1 --> <div class="diary-entry"> <div class="entry-date">october 24, 2003 @ 11:42 pm</div> <div class="entry-title">✨ rainy windows</div> <div class="body-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu pretium tellus. Ut sem lacus, ornare non maximus ac, dapibus a magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. </div> </div> <!-- Diary Log Entry 2 --> <div class="diary-entry"> <div class="entry-date">october 21, 2003 @ 04:15 pm</div> <div class="entry-title">🌱 tea & memories</div> <div class="body-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu pretium tellus. Ut sem lacus, ornare non maximus ac, dapibus a magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. </div> </div> <!-- Interactive Navigation & Link Collection --> <div class="link-section"> <p style="margin: 0 0 10px 0; font-size: 10px; color: #7E85A4; font-weight: bold; letter-spacing: 1px;">::: navigation :::</p> <font size="2"> <a href="#">home</a> · <a href="#">about</a> · <a href="#">diary</a> · <a href="#">links</a> · <a href="#">guestbook</a> <a href="https://kristylicious.neocities.org/" target="_blank">CREDIT</a> </font> </div> <!-- Small Soft Footnote + Counter --> <div class="divider" style="margin-bottom: 5px;">. . . . .</div> <div class="counter-box"> dreaming in periwinkle: <span style="color:#7E85A4; font-weight:bold;">2026</span> </div> <p style="text-align: center; font-size: 9px; color: #B4B9D2; margin-top: 25px; margin-bottom: 0;"> © 2003 cloudie. </p> </td> </tr> </table> </body> </html> <center> <a href="https://kristylicious.neocities.org/multiborders.html" target="_new"><img src="https://i.imgur.com/wDDFFHb.png" width="600" height="150"></a><br>PREVIEW <a href="https://kristylicious.neocities.org/" target="_blank">CREDIT</a>
