Created
November 28, 2025 09:15
-
-
Save wighawag/fb2c52192aee89556baf39e832be48eb to your computer and use it in GitHub Desktop.
Untitled
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
| <section class="hero"> | |
| <!-- all text sits on top of the bitmap --> | |
| <h1>STAY CURIOUS</h1> | |
| <p class="sub">Two short lines that never reflow</p> | |
| <button>Explore</button> | |
| </section> | |
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
| /* 1. ROOT RATIOS (measured in 1920 file) --------------------------- */ | |
| :root{ | |
| /* 1 px expressed in vw units when VP is 1920 wide */ | |
| --px: calc(100/1920 * 1vw); | |
| /* individual sizes straight out of Figma */ | |
| --h1-size : calc(88 * var(--px)); /* 88 px */ | |
| --sub-size: calc(24 * var(--px)); /* 24 px */ | |
| --btn-size: calc(18 * var(--px)); /* 18 px */ | |
| --vspace : calc(32 * var(--px)); /* vertical gap */ | |
| --rad : calc(8 * var(--px)); /* button radius */ | |
| } | |
| /* 2. GLOBAL RESETS ------------------------------------------------ */ | |
| *{box-sizing:border-box;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;} | |
| /* 3. HERO SECTION ------------------------------------------------- */ | |
| .hero{ | |
| position:relative; /* anchor for absolute kids */ | |
| width:100%; | |
| height:calc(800/1080 * 100vh); /* 800 px high at 1920×1080 */ | |
| max-width:1920px; /* never grow bigger than art-board */ | |
| margin-inline:auto; /* centre on 4K etc. */ | |
| overflow:hidden; | |
| /* pick the right picture – you only need 3 exports */ | |
| background:url("https://www.dummyimage.com/1920x1080/000/fff.png") center/cover no-repeat; | |
| } | |
| @media(max-width:768px){ | |
| .hero{background-image:url("https://www.dummyimage.com/768x400/000/fff.png");} | |
| } | |
| @media(max-width:360px){ | |
| .hero{background-image:url("https://www.dummyimage.com/360x400/000/fff.png");} | |
| } | |
| /* 4. TEXT LAYER – absolutely positioned --------------------------- */ | |
| .hero h1{ | |
| position:absolute; | |
| left :calc(240/1920 * 100vw); /* 240 px left margin */ | |
| bottom:calc(200/1080 * 100vh); /* 200 px from bottom */ | |
| font-size:var(--h1-size); | |
| font-weight:800; | |
| color:#fff; | |
| line-height:1; | |
| white-space:nowrap; /* keep original line break */ | |
| text-shadow:0 2px 8px rgba(0,0,0,.35); | |
| } | |
| .hero .sub{ | |
| position:absolute; | |
| left :calc(240/1920 * 100vw); | |
| bottom:calc(140/1080 * 100vh); | |
| font-size:var(--sub-size); | |
| color:#fff; | |
| text-shadow:0 1px 4px rgba(0,0,0,.35); | |
| } | |
| /* 5. BUTTON ------------------------------------------------------- */ | |
| .hero button{ | |
| position:absolute; | |
| left :calc(240/1920 * 100vw); | |
| bottom:calc(60/1080 * 100vh); | |
| padding:calc(var(--vspace)*.75) calc(var(--vspace)*1.5); | |
| font-size:var(--btn-size); | |
| font-weight:600; | |
| color:#222; | |
| background:#fff; | |
| border:0; | |
| border-radius:var(--rad); | |
| cursor:pointer; | |
| transition:transform .2s; | |
| } | |
| .hero button:hover{transform:scale(1.05);} | |
| /* 6. CAP SMALL SCREENS (optional) --------------------------------- */ | |
| /* below 360 we stop shrinking – like a mini “container” */ | |
| @media(max-width:360px){ | |
| :root{--px:calc(100/360 * 1vw);} /* recalc base to 360 width */ | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment