Last active
June 12, 2019 01:22
-
-
Save tbennett/be6237c40ceefd7b6b3b to your computer and use it in GitHub Desktop.
HTML Mobile 1st: Responsive multicolumn layout using floats and single media query
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> | |
| <title>test</title> | |
| <meta charset="utf-8"/> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <style> | |
| /* Ideally, this stylesheet should be external and linked to this document. | |
| it is embedded here to simplify the demo process */ | |
| /* specialized typefaces can be added to a webpage from external sources | |
| I could have used HTML link tags, but I think that using CSS to import additional css makes more sense. */ | |
| @import url(http://fonts.googleapis.com/css?family=Merriweather:700); | |
| @import url(http://fonts.googleapis.com/css?family=Noto+Sans); | |
| * { | |
| margin:0; | |
| padding:0; | |
| } | |
| p { | |
| padding:.5em; | |
| color:#777; | |
| font: .9em/1.5 'Noto Sans', sans-serif; | |
| } | |
| .site-header { | |
| background: #758; | |
| color: #fff; | |
| padding:.5em; | |
| font-family: 'Merriweather', serif; | |
| } | |
| .main-nav { | |
| background: #e84; | |
| } | |
| .lnk { | |
| display:inline-block; | |
| font: 1.2em/1 'Noto Sans', sans-serif; | |
| margin:.5em; | |
| } | |
| .lnk a { | |
| text-decoration:none; | |
| color: #536; | |
| } | |
| .lnk a:hover { | |
| color:#fff; | |
| } | |
| .row { | |
| text-align:center; | |
| padding: 1em 0; | |
| background:#fff; | |
| } | |
| .col { | |
| display:block; | |
| margin: 2em auto; | |
| width:80%; | |
| } | |
| .hero { | |
| height:225px; | |
| background-image: url(http://goo.gl/HNrlj3); | |
| background-size:cover; | |
| } | |
| .features { | |
| border-bottom: 3px solid #da4; | |
| border-top: 3px solid #da4; | |
| padding-bottom:3em; | |
| } | |
| .features .col{ | |
| outline:5px solid #acb; | |
| } | |
| .promos .col { | |
| background: #eee; | |
| text-align:left; | |
| } | |
| .site-footer { | |
| text-align:center; | |
| background: #444; | |
| color:white; | |
| } | |
| /* status indication */ | |
| #home .home, | |
| #about .about, | |
| #faq .faq, | |
| #contact .contact { | |
| color: #fff; | |
| } | |
| /* the media query is used to check the width of the browser window and | |
| apply new CSS rules to the page based upon the current window size. | |
| In this case, see if the browser's width is greater than 720px. | |
| The following rules create the desktop layout. */ | |
| @media only screen and (min-width: 720px) { | |
| html, body { | |
| background:#444; | |
| } | |
| .row { | |
| padding: 2em 0; | |
| overflow:hidden; /* this hack forces the row to contain the columns. */ | |
| } | |
| .col { | |
| float:left; /* makes the columns stack horizontally */ | |
| boxsizing:border-box; /* fixes horizontal sizing when padding & border are applied */ | |
| } | |
| .features .col{ | |
| width:27%; /* (3 * 27) + (2.5 * 6) = 96 */ | |
| margin: 0 2.5%; | |
| outline:5px solid #acb; | |
| } | |
| .promos .col { | |
| width: 21%; /* (4 * 21) + (1.5 * 8) = 96 */ | |
| margin: 0 1.5%; | |
| background: #eee; | |
| text-align:left; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body id="home"> | |
| <div class="wrapper"> | |
| <header class="site-header"> | |
| <h1>Full-Width Content</h1> | |
| </header> | |
| <nav class="main-nav"> | |
| <ul> | |
| <li class="lnk"><a class="home" href="#" title="">Home</a></li> | |
| <li class="lnk"><a class="about" href="#" title="">About</a></li> | |
| <li class="lnk"><a class="faq" href="#" title="">FAQ</a></li> | |
| <li class="lnk"><a class="contact" href="#" title="">Contact</a></li> | |
| </ul> | |
| </nav> | |
| <section class="hero"></section> | |
| <section class="features row"> | |
| <div class="col"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, nemo, nulla! Tenetur repellendus dignissimos dicta. </p> | |
| </div> | |
| <div class="col"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, nemo, nulla! Tenetur repellendus dignissimos dicta. </p> | |
| </div> | |
| <div class="col"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, nemo, nulla! Tenetur repellendus dignissimos dicta. </p> | |
| </div> | |
| </section> | |
| <section class="promos row"> | |
| <div class="col"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates cumque perferendis voluptate, repellat beatae quod accusantium corrupti sunt, aperiam veritatis? Rerum officiis sint fugit nihil, quod perferendis numquam magnam modi.</p> | |
| </div> | |
| <div class="col"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates cumque perferendis voluptate, repellat beatae quod accusantium corrupti sunt, aperiam veritatis? Rerum officiis sint fugit nihil, quod perferendis numquam magnam modi.</p> | |
| </div> | |
| <div class="col"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates cumque perferendis voluptate, repellat beatae quod accusantium corrupti sunt, aperiam veritatis? Rerum officiis sint fugit nihil, quod perferendis numquam magnam modi.</p> | |
| </div> | |
| <div class="col"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates cumque perferendis voluptate, repellat beatae quod accusantium corrupti sunt, aperiam veritatis? Rerum officiis sint fugit nihil, quod perferendis numquam magnam modi.</p> | |
| </div> | |
| </section> | |
| </div> | |
| <footer class="site-footer"> | |
| <p>repellat beatae quod accusantium corrupti sunt.</p> | |
| </footer> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment