A Pen by Nikita Verkhoshintcev on CodePen.
Created
July 17, 2018 13:21
-
-
Save Frelseren/309f7aba66da8dc24a2f6786d391f168 to your computer and use it in GitHub Desktop.
TTT18 Test
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="container"> | |
| <nav class="nav"> | |
| <img src="https://digitalflask.com/img/digital-flask.svg" /> | |
| <span class="nav-links"> | |
| <a href="#">Home</a> | |
| <a href="#">TTT18</a> | |
| </span> | |
| </nav> | |
| </div> | |
| <div class="container"> | |
| <h1>Hello World!</h1> | |
| </div> | |
| <div class="step"> | |
| <div class="step-content"> | |
| <div class="step-content-left"> | |
| <h2>Step 1</h2> | |
| <p>Lorem ipsum dolor amet yuccie flannel humblebrag, echo park pabst kickstarter polaroid unicorn four dollar toast mlkshk. You probably haven't heard of them fingerstache meh before they sold out scenester ugh flannel cardigan gluten-free pok pok leggings cornhole tilde forage umami. Butcher single-origin coffee austin, hammock authentic roof party godard yr blue bottle raw denim live-edge DIY subway tile asymmetrical hashtag. Prism glossier trust fund snackwave fixie. Mumblecore pour-over williamsburg artisan, ennui squid pitchfork keffiyeh forage chartreuse post-ironic.</p> | |
| <p>Lorem ipsum dolor amet yuccie flannel humblebrag, echo park pabst kickstarter polaroid unicorn four dollar toast mlkshk. You probably haven't heard of them fingerstache meh before they sold out scenester ugh flannel cardigan gluten-free pok pok leggings cornhole tilde forage umami. Butcher single-origin coffee austin, hammock authentic roof party godard yr blue bottle raw denim live-edge DIY subway tile asymmetrical hashtag. Prism glossier trust fund snackwave fixie. Mumblecore pour-over williamsburg artisan, ennui squid pitchfork keffiyeh forage chartreuse post-ironic.</p> | |
| </div> | |
| </div> | |
| <div class="step-image step-image-1"></div> | |
| </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
| *, *:before, *:after { | |
| box-sizing: border-box; | |
| } | |
| .container { | |
| font-family: Roboto; | |
| max-width: 1200px; | |
| padding: 0 1em; | |
| margin: 0 auto; | |
| background: yellow; | |
| } | |
| img { | |
| height: 50px; | |
| width: auto; | |
| } | |
| .nav { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 10px 0; | |
| } | |
| .nav-links { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .nav-links > a { | |
| margin-left: 1em; | |
| text-transform: uppercase; | |
| font-weight: bold; | |
| text-decoration: none; | |
| } | |
| .step { | |
| background: red; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .step-image, | |
| .step-content { | |
| width: 100%; | |
| } | |
| .step-content-left { | |
| padding: 0 1em; | |
| } | |
| @media (min-width: 700px) { | |
| .step-image, | |
| .step-content { | |
| width: 50%; | |
| } | |
| .step { | |
| flex-direction: row; | |
| } | |
| .step-content-left { | |
| max-width: 600px; | |
| padding-left: 1em; | |
| padding-right: 40px; | |
| margin-left: auto; | |
| } | |
| } | |
| p { | |
| line-height: 1.6; | |
| } | |
| .step-image { | |
| background-size: cover; | |
| background-repeat: norepeat; | |
| background-position: center center; | |
| } | |
| .step-image-1 { | |
| background-image: url('https://images.pexels.com/photos/942216/pexels-photo-942216.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'); | |
| } | |
| .step-content { | |
| padding: 40px 0; | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment