Created
June 26, 2019 00:37
-
-
Save nicxes/1e600bdaa780fa49e874aa5c497ed6ae to your computer and use it in GitHub Desktop.
As a frontend developer you’re probably always looking to learn things and test new tools and technologies. Start working with grids right now with this HTML & CSS boilerplate, and learn how to apply the Flexbox and Grids technique when building a website. Source: https://aerolab.co/blog/landing/html-css-boilerplate
This file contains 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> | |
| <head> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <meta charset="utf-8"> | |
| <title>Grid layout</title> | |
| <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600|Raleway" rel="stylesheet"> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <div class="wrapper"> | |
| <div class="logo"> | |
| LOGO | |
| </div> | |
| <nav class="menu"> | |
| <ul class="menu-list"> | |
| <li class="menu-list_item"><a class="menu-list_link" href="#">Rowling</a></li> | |
| <li class="menu-list_item"><a class="menu-list_link" href="#">Harry</a></li> | |
| <li class="menu-list_item"><a class="menu-list_link" href="#">Hermione</a></li> | |
| <li class="menu-list_item"><a class="menu-list_link" href="#">Ron</a></li> | |
| <li class="menu-list_item"><a class="menu-list_link" href="#">Contact</a></li> | |
| </ul> | |
| </nav> | |
| <div class="hero-text"> | |
| <h1>Grids & Flexbox</h1> | |
| <p>Are super awesome 😍</p> | |
| </div> | |
| <div class="container container-one"> | |
| <div class="container-text"> | |
| <p>Patronum furnunculus revelio lacarnum sonorus rictusempra immobilus evanesca engorgio. Evanesco sonorus alohomora mobilicorpus. Inflamarae leviosa totalus elixir totalus engorgio. Funnunculus tarantallegra accio momentum mobilicorpus. Mobilicorpus evanesco evanesco sonorus lumos kedavra patronum. Episkey leviosa kedavra mortis.</p> | |
| <p>Totalus mobilicorpus mortis scourgify avis vipera langlock portus mobilicorpus tarantallegra. Wingardium stupefy deletrius lumos aparecium crucio patronum mobilicorpus petrificus vow. Locomotor aresto nox legilimens. Portus densaugeo totalus sonorus aparecium lacarnum quodpot. Anapneo funnunculus cushioning anapneo nox expecto finite evanesco skele-gro engorgio evanesco. Charm homorphus serpensortia lumos sonorus lumos immobulus.</p> | |
| </div> | |
| <div class="container-img container-one_img"> | |
| <img src="http://placekitten.com/500/400" alt="Kitten"> | |
| </div> | |
| </div> | |
| <div class="container container-two"> | |
| <div class="container-img container-two_img"> | |
| <img src="http://placekitten.com/g/500/400" alt="Kitten"> | |
| </div> | |
| <div class="container-text"> | |
| <p>Pepperup tarantallegra evanesco evanesco silencio lacarnum reducio. Imperio babbling unctuous elixir. Tarantallegra wingardium expecto momentum crucio confundus reducio specialis imperturbable immobilus.</p> | |
| <p>Protego exume aresto unbreakable stupefy tarantallegra serpensortia. Aparecium legilimens impedimenta tarantallegra legilimens lacarnum sonorous legilimens totalus. Locomotor locomotor accio arania exume. Portus tarantallegra charm- stupefy silencio serpensortia riddikulus aparecium conjunctivitis prior ennervate. Peskipiksi conjunctivitis kedavra locomotor patronum amortentia mobilicorpus quodpot funnunculus. Jinx sectumsempra me nox. Rictusempra unctuous rictusempra imperio leviosa protego densaugeo lacarnum.</p> | |
| </div> | |
| </div> | |
| </div><!-- Closes .wrapper --> | |
| <div class="footer"> | |
| <div class="footer-item">Item 1</div> | |
| <div class="footer-item">Item 2</div> | |
| <div class="footer-item">Item 3</div> | |
| </div> | |
| </body> | |
| </html> |
This file contains 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
| *{ | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body{ | |
| background-color: #EFEFEF; | |
| font-family: 'Open Sans', sans-serif; | |
| } | |
| .wrapper{ | |
| max-width: 1400px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| display: grid; | |
| grid-gap: 24px; | |
| grid-template-columns: repeat(9, 1fr); | |
| grid-template-rows: 40px repeat(6, 120px); | |
| } | |
| .logo{ | |
| background-color: #F7BE8C; | |
| grid-column: 1 / 2; | |
| padding: 10px; | |
| font-family: 'Raleway', sans-serif; | |
| } | |
| .menu{ | |
| background-color: #FFD6A3; | |
| font-family: 'Raleway', sans-serif; | |
| /* -1 means it will take all the available space */ | |
| grid-column: 5 / -1; | |
| } | |
| .menu-list{ | |
| list-style: none; | |
| display: flex; | |
| } | |
| .menu-list_item{ | |
| flex-grow: 1; | |
| } | |
| .menu-list_link{ | |
| display: block; | |
| text-align: center; | |
| padding-top: 10px; | |
| padding-bottom: 10px; | |
| color: #333; | |
| } | |
| .menu-list_link:hover{ | |
| background-color: #FFB55C; | |
| } | |
| .hero-text{ | |
| background-color: #f90; | |
| grid-row: 3 / 6; | |
| grid-column: 3 / 8; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items:center; | |
| } | |
| .container{ | |
| display: flex; | |
| align-items: center; | |
| grid-column: 2 / 9; | |
| } | |
| .container-one{ | |
| grid-row: 7 / 9; | |
| } | |
| .container-two{ | |
| grid-row: 11; | |
| } | |
| .container-text{ | |
| padding: 16px 32px; | |
| } | |
| .footer{ | |
| margin-top: 48px; | |
| display: flex; | |
| align-items: center; | |
| text-align: center; | |
| } | |
| .footer-item{ | |
| flex-grow: 1; | |
| padding: 32px 0; | |
| background-color: #f90; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment