Trent Tuttle tretuttle
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
| <div class="snap-scroll">Scroll here</div> | |
| <div class="snap-scroll">to snap</div> | |
| <div class="snap-scroll">to the</div> | |
| <div class="snap-scroll">next section.</div> | |
| <div class="snap-scroll">Works better</div> | |
| <div class="snap-scroll">on full height.</div> | |
| <div class="snap-scroll">Enjoy 😎</div> | |
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
| <body> | |
| <div class="wrapper"> | |
| <div class="container"> | |
| <div class="left-column"> | |
| <section> | |
| <header> | |
| <div class="colors-logo"> | |
| <svg | |
| xmlns="http://www.w3.org/2000/svg" | |
| width="24" |
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
| <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=Manrope:wght@200..800&display=swap" | |
| rel="stylesheet" | |
| /> | |
| <header> | |
| <div class="header-left"> | |
| <button class="hamburger"> |
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
| <svg onclick="dark()" id="dark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"> | |
| <path | |
| d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z" /> | |
| </svg> | |
| <div class="c1"> | |
| <h1>You need <span>4</span> colors</h1> | |
| <p>2 for text and background(primary & secondary colors). 1 accent color to highlight important elements(number 4 & link). And an optional tertiary color to add a bit of personality(the hue slider).</p> | |
| <a href="https://youtu.be/AmY3db_Qs94">How it works?</a> | |
| <div class="controls"> |
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
| <h4 class="ts">Type scale - Landing pages</h4> | |
| <h1>The quick white cat jumps over the lazy dog</h1> | |
| <h2>The quick white cat jumps over the lazy dog</h2> | |
| <h3>The quick white cat jumps over the lazy dog</h3> | |
| <h4>The quick white cat jumps over the lazy dog</h4> | |
| <p class="big">The quick white cat jumps over the lazy dog</p> | |
| <p>The quick white cat jumps over the lazy dog</p> | |
| <p class="small">The quick white cat jumps over the lazy dog</p> | |
| <div class="ui"> |
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
| <svg class="parallax" viewBox="0 0 750 500" preserveAspectRatio="xMidYMax slice"> | |
| <defs> | |
| <!-- Scene 1 Gradient --> | |
| <linearGradient id="grad1" x1="-154.32" y1="263.27" x2="-154.32" y2="374.3" gradientTransform="matrix(-1, 0, 0, 1.36, 231.36, -100.14)" gradientUnits="userSpaceOnUse"> | |
| <stop offset="0.07" stop-color="#9c536b" /> | |
| <stop offset="0.98" stop-color="#d98981" /> | |
| </linearGradient> | |
| <radialGradient id="bg_grad" cx="375" cy="-30" r="318.69" gradientUnits="userSpaceOnUse"> | |
| <stop offset="0.1" stop-color="#F5C54E" id="sun" /> | |
| <stop offset="0.1" stop-color="#FFDBA6" /> |