Last active
July 9, 2020 19:45
-
-
Save richleach/6670b797c4e5cd42a54f832dc0d83229 to your computer and use it in GitHub Desktop.
flexbox HTML and CSS starter template 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
| <!-- copy and paste entire file and open in browser. | |
| Simple layout using flexbox to build columns, I always seem to forget how to do this.... | |
| --> | |
| <html> | |
| <head> | |
| <title>HTML & CSS</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| /* this font size will effect all elements (other than h1 -> h6) on the page */ | |
| font-size: 21px; | |
| } | |
| /* ======== | |
| Typography | |
| ======== */ | |
| h1 { | |
| font-size: 48px; | |
| } | |
| h2 { | |
| font-size: 36px; | |
| } | |
| h3 { | |
| font-size: 28px; | |
| } | |
| /* ======== | |
| Layout | |
| ======== */ | |
| header { | |
| background-color: #588C94; | |
| color: white; | |
| padding: 30px 0; | |
| text-align: center; | |
| } | |
| .intro { | |
| width: 500px; | |
| margin: 100px auto; | |
| text-align: center; | |
| } | |
| .my-skills { | |
| background-color: #1D3C41; | |
| color: #fff; | |
| padding: 75px 0; | |
| text-align: center; | |
| } | |
| .columns { | |
| display: flex; | |
| } | |
| .column { | |
| margin: 0 10px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>HTML & CSS starter code for flexbox layout</h1> | |
| </header> | |
| <main> | |
| <div class="intro"> | |
| <h2>HTML and CSS are the building blocks of the web</h2> | |
| <p>Magna fringilla urna porttitor rhoncus dolor purus. Malesuada bibendum arcu vitae elementum. Purus sit amet volutpat consequat. </p> | |
| </div> | |
| <div class="my-skills"> <!-- this has the background --> | |
| <div class="columns"> <!-- width, centered, and flex to make immediate child elements into columns --> | |
| <!-- column 1 --> | |
| <div class="column"> | |
| <h3>HTML</h3> | |
| <p>Magna fringilla urna porttitor rhoncus dolor purus. Malesuada bibendum arcu vitae elementum. Purus sit amet volutpat consequat. </p> | |
| </div> | |
| <!-- column 3 --> | |
| <div class="column"> | |
| <h3>CSS</h3> | |
| <p>Magna fringilla urna porttitor rhoncus dolor purus. Malesuada bibendum arcu vitae elementum. Purus sit amet volutpat consequat. </p> | |
| </div> | |
| <!-- column 3 --> | |
| <div class="column"> | |
| <h3>And More</h3> | |
| <p>Magna fringilla urna porttitor rhoncus dolor purus. Malesuada bibendum arcu vitae elementum. Purus sit amet volutpat consequat. </p> | |
| </div> | |
| </div> <!-- / columns --> | |
| </div> <!-- / my-skills --> | |
| </main> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment