Created
June 16, 2026 20:35
-
-
Save prof3ssorSt3v3/c4425ac4cfdb4c9e50d954855d8f88e1 to your computer and use it in GitHub Desktop.
We Don't Care starter code
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>We Don't Care | About Us</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap" | |
| rel="stylesheet" | |
| /> | |
| <link rel="stylesheet" href="css/normalize.css" /> | |
| <link rel="stylesheet" href="css/main.css" /> | |
| </head> | |
| <body> | |
| <header class="masthead"> | |
| <h1>We Don't Care</h1> | |
| <h2>Professional Indifference Since Last Tuesday</h2> | |
| </header> | |
| <section class="banner" aria-label="Company slogan"> | |
| <p class="banner-badge">Now 14% More Unbothered</p> | |
| <h2>About Us</h2> | |
| <p>We are the internet's premier source of totally optional concern, dramatically delivered with minimal effort.</p> | |
| </section> | |
| <main class="content"> | |
| <section class="column left-column"> | |
| <h3>What We Pretend To Do</h3> | |
| <p>At <em>We Don't Care</em>, our mission is to acknowledge your problems with a polite nod and then stare thoughtfully into the middle distance.</p> | |
| <p>Our team specializes in strategic shrugging, ceremonial coffee sipping, and saying "huh" in meetings.</p> | |
| </section> | |
| <section class="column right-column"> | |
| <h3>Our Core Values</h3> | |
| <ul> | |
| <li>Mild curiosity.</li> | |
| <li>Reasonable snacks.</li> | |
| <li>Timely but vague responses.</li> | |
| <li>Enthusiastic apathy.</li> | |
| </ul> | |
| <p>If you'd like to work with us, just send an email. We may reply in 3 to 5 business seasons.</p> | |
| </section> | |
| </main> | |
| <footer class="site-footer"> | |
| <p>© 2026 We Don't Care. Please lower your expectations.</p> | |
| </footer> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| box-sizing: border-box; | |
| font-family: 'Noto Sans', sans-serif; | |
| } | |
| :root { | |
| --font-xxxl: 5.61rem; | |
| --font-xxl: 4.209rem; | |
| --font-xl: 3.157rem; | |
| --font-lg: 2.369rem; | |
| --font-md: 1.777rem; | |
| --font-sm: 1.333rem; | |
| --font-xs: 1rem; | |
| } | |
| body { | |
| margin: 0; | |
| line-height: 1.6; | |
| background-color: #fff4cc; | |
| color: hsl(33, 100%, 30%); | |
| min-height: 100dvh; | |
| display: flex; | |
| flex-direction: column; | |
| font-weight: 300; | |
| font-size: var(--font-sm); | |
| } | |
| main { | |
| flex: 1; | |
| } | |
| h1, | |
| h2, | |
| h3 { | |
| font-family: 'Noto Serif', serif; | |
| font-weight: 300; | |
| } | |
| pre { | |
| font-family: 'Noto Sans Mono', monospace; | |
| } | |
| .masthead { | |
| background-color: #c96f00; | |
| color: #fff4cc; | |
| text-align: center; | |
| padding: 2rem 1rem; | |
| border-bottom: 6px solid rgb(166, 97, 0); | |
| } | |
| .masthead h1 { | |
| margin: 0; | |
| font-size: var(--font-xxxl); | |
| letter-spacing: 0.04em; | |
| } | |
| .masthead h2 { | |
| font-size: var(--font-md); | |
| margin: 0.5rem 0 0; | |
| color: rgb(255, 224, 138); | |
| } | |
| .banner { | |
| max-width: 960px; | |
| width: calc(100% - 2rem); | |
| margin: 1.5rem auto; | |
| padding: 1.5rem; | |
| background-image: linear-gradient(135deg, rgba(201, 111, 0, 0.48) 0%, rgba(166, 97, 0, 0.35) 45%, hsla(33, 100%, 30%, 0.6) 100%), url('https://picsum.photos/id/1060/1400/700'); | |
| background-size: cover; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| min-height: 220px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| border: 4px solid hsl(45, 100%, 72%); | |
| border-radius: 10px; | |
| color: #fff4cc; | |
| text-shadow: 0 1px 2px hsla(33, 100%, 30%, 0.45); | |
| } | |
| .banner-badge { | |
| align-self: flex-start; | |
| margin: 0 0 0.75rem; | |
| padding: 0.35rem 0.7rem; | |
| background-color: hsl(45, 100%, 72%); | |
| color: rgb(166, 97, 0); | |
| border: 2px solid rgb(255, 224, 138); | |
| border-radius: 999px; | |
| font-size: var(--font-md); | |
| font-weight: 500; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| text-shadow: none; | |
| } | |
| .banner h2 { | |
| margin-top: 0; | |
| font-size: var(--font-md); | |
| color: #fff4cc; | |
| } | |
| .content { | |
| max-width: 960px; | |
| margin: 0 auto 1.5rem; | |
| padding: 0; | |
| display: flex; | |
| gap: 1rem; | |
| } | |
| .column { | |
| flex: 1; | |
| padding: 1rem; | |
| border-radius: 10px; | |
| border: 3px solid #c96f00; | |
| } | |
| .left-column { | |
| background-color: rgb(255, 224, 138); | |
| color: rgb(166, 97, 0); | |
| } | |
| .right-column { | |
| background-color: hsl(45, 100%, 72%); | |
| color: hsl(33, 100%, 30%); | |
| } | |
| .right-column ul { | |
| padding-left: 1.2rem; | |
| } | |
| .site-footer { | |
| text-align: center; | |
| padding: 1rem; | |
| background-color: rgb(166, 97, 0); | |
| color: #fff4cc; | |
| border-top: 5px solid #c96f00; | |
| } | |
| @media (max-width: 760px) { | |
| .content { | |
| flex-direction: column; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment