Created
June 13, 2014 02:42
-
-
Save 58bits/a7ca98b7520b12bd6241 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
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 charset="utf-8"> | |
| <title>My Front-end Demo Project</title> | |
| <link rel="stylesheet" href="stylesheets/application.css"> | |
| <script type="text/javascript" src="scripts/app.js"></script> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <header> | |
| Header goes here... | |
| </header> | |
| <nav> | |
| <a href="#">Home</a> | |
| <a href="#">Services</a> | |
| <a href="#">About Us</a> | |
| <a href="#">Contact Us</a> | |
| </nav> | |
| <div id="content"> | |
| <section id="main" role="main"> | |
| <article>An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it.</article> | |
| <article>Another article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it.</article> | |
| </section> | |
| <aside> | |
| <article> | |
| <h3>Sidebar Title 1</h3> | |
| <p> | |
| Some Text Here | |
| </p> | |
| </article> | |
| <article> | |
| <h3>Sidebar Title 2</h3> | |
| <p> | |
| Some Text Here | |
| </p> | |
| </article> | |
| </aside> | |
| </div> | |
| <footer> | |
| <section class="section1">The first section in the footer.</section> | |
| <section class="section2">The second section in the footer.</section> | |
| <section class="section3">The third section in the footer.</section> | |
| <section class="section4">The fourth section in the footer.</section> | |
| </footer> | |
| </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
| // ---- | |
| // Sass (v3.3.8) | |
| // Compass (v1.0.0.alpha.19) | |
| // Breakpoint (v2.4.2) | |
| // Singularity.gs (v1.2.1) | |
| // Toolkit (v2.3.0) | |
| // ---- | |
| // Import | |
| @import "compass/reset"; | |
| @import "compass"; | |
| @import "singularitygs"; | |
| @import "toolkit"; | |
| @import "breakpoint"; | |
| // Singularity 1.2 Syntax | |
| @include sgs-change('debug', true); | |
| @include sgs-change('mobile first', true); | |
| @include sgs-change('output', 'isolation'); | |
| @include sgs-change('include clearfix', true); | |
| $break: 600px; | |
| $break2: 900px; | |
| $break3: 1200px; | |
| @include add-grid(2); | |
| @include add-grid(4 at $break); | |
| @include add-grid(12 at $break2); | |
| @include add-grid(16 at $break3); | |
| @include add-gutter(0.2); | |
| * { | |
| @include box-sizing('border-box'); | |
| } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| @include background-grid($color: #e8b491); | |
| } | |
| header { | |
| background-color: rgba(200,200,200,0.75); | |
| height: 70px; | |
| } | |
| nav { | |
| background-color: grey; | |
| height: 20px; | |
| } | |
| #content { @include clearfix;} | |
| #main { | |
| background-color: rgba(200,200,100,0.75); | |
| article { background: purple;} | |
| @include grid-span(2, 1); | |
| @include breakpoint($break) { | |
| @include grid-span(3, 1); | |
| } | |
| @include breakpoint($break2) { | |
| @include grid-span(8, 1); | |
| } | |
| @include breakpoint($break3) { | |
| @include grid-span(10, 1); | |
| } | |
| } | |
| aside { | |
| background: green; | |
| @include grid-span(2, 1, $options: 'both'); | |
| @include breakpoint($break) { | |
| @include grid-span(1, 4); | |
| } | |
| @include breakpoint($break2) { | |
| @include grid-span(4, 9); | |
| } | |
| @include breakpoint($break3) { | |
| @include grid-span(6, 11); | |
| } | |
| } | |
| footer { | |
| background: yellow; | |
| section {background: pink; padding: 4px;} | |
| @include grid-span(2, 1); | |
| @include layout($gutter: .1) { | |
| .section1 { @include float-span(1, 1);} | |
| .section2 { @include float-span(1, 2);} | |
| .section3 { @include float-span(1, 1);} | |
| .section4 { @include float-span(1, 2);} | |
| } | |
| @include breakpoint($break) { | |
| @include grid-span(4, 1); | |
| .section1 {@include grid-span(1,1);} | |
| .section2 {@include grid-span(1,2);} | |
| .section3 {@include grid-span(1,3);} | |
| .section4 {@include grid-span(1,4);} | |
| } | |
| @include breakpoint($break2) { | |
| @include grid-span(12, 1); | |
| .section1 {@include grid-span(3,1);} | |
| .section2 {@include grid-span(3,4);} | |
| .section3 {@include grid-span(3,7);} | |
| .section4 {@include grid-span(3,10);} | |
| } | |
| @include breakpoint($break3) { | |
| @include grid-span(16, 1); | |
| .section1 {@include grid-span(4,1);} | |
| .section2 {@include grid-span(4,5);} | |
| .section3 {@include grid-span(4,9);} | |
| .section4 {@include grid-span(4,13);} | |
| } | |
| } |
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
| html, body, div, span, applet, object, iframe, | |
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
| a, abbr, acronym, address, big, cite, code, | |
| del, dfn, em, img, ins, kbd, q, s, samp, | |
| small, strike, strong, sub, sup, tt, var, | |
| b, u, i, center, | |
| dl, dt, dd, ol, ul, li, | |
| fieldset, form, label, legend, | |
| table, caption, tbody, tfoot, thead, tr, th, td, | |
| article, aside, canvas, details, embed, | |
| figure, figcaption, footer, header, hgroup, | |
| menu, nav, output, ruby, section, summary, | |
| time, mark, audio, video { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| font: inherit; | |
| font-size: 100%; | |
| vertical-align: baseline; | |
| } | |
| html { | |
| line-height: 1; | |
| } | |
| ol, ul { | |
| list-style: none; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| } | |
| caption, th, td { | |
| text-align: left; | |
| font-weight: normal; | |
| vertical-align: middle; | |
| } | |
| q, blockquote { | |
| quotes: none; | |
| } | |
| q:before, q:after, blockquote:before, blockquote:after { | |
| content: ""; | |
| content: none; | |
| } | |
| a img { | |
| border: none; | |
| } | |
| article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { | |
| display: block; | |
| } | |
| * { | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| background-image: linear-gradient(to right, #e8b491 0%, #e8b491 45.45455%, #edc6ac 45.45455%, #edc6ac 54.54545%, #e8b491 54.54545%, #e8b491); | |
| } | |
| @media (min-width: 600px) { | |
| body { | |
| background-image: linear-gradient(to right, #e8b491 0%, #e8b491 21.73913%, #edc6ac 21.73913%, #edc6ac 26.08696%, #e8b491 26.08696%, #e8b491 47.82609%, #edc6ac 47.82609%, #edc6ac 52.17391%, #e8b491 52.17391%, #e8b491 73.91304%, #edc6ac 73.91304%, #edc6ac 78.26087%, #e8b491 78.26087%, #e8b491); | |
| } | |
| } | |
| @media (min-width: 900px) { | |
| body { | |
| background-image: linear-gradient(to right, #e8b491 0%, #e8b491 7.04225%, #edc6ac 7.04225%, #edc6ac 8.4507%, #e8b491 8.4507%, #e8b491 15.49296%, #edc6ac 15.49296%, #edc6ac 16.90141%, #e8b491 16.90141%, #e8b491 23.94366%, #edc6ac 23.94366%, #edc6ac 25.35211%, #e8b491 25.35211%, #e8b491 32.39437%, #edc6ac 32.39437%, #edc6ac 33.80282%, #e8b491 33.80282%, #e8b491 40.84507%, #edc6ac 40.84507%, #edc6ac 42.25352%, #e8b491 42.25352%, #e8b491 49.29577%, #edc6ac 49.29577%, #edc6ac 50.70423%, #e8b491 50.70423%, #e8b491 57.74648%, #edc6ac 57.74648%, #edc6ac 59.15493%, #e8b491 59.15493%, #e8b491 66.19718%, #edc6ac 66.19718%, #edc6ac 67.60563%, #e8b491 67.60563%, #e8b491 74.64789%, #edc6ac 74.64789%, #edc6ac 76.05634%, #e8b491 76.05634%, #e8b491 83.09859%, #edc6ac 83.09859%, #edc6ac 84.50704%, #e8b491 84.50704%, #e8b491 91.5493%, #edc6ac 91.5493%, #edc6ac 92.95775%, #e8b491 92.95775%, #e8b491); | |
| } | |
| } | |
| @media (min-width: 1200px) { | |
| body { | |
| background-image: linear-gradient(to right, #e8b491 0%, #e8b491 5.26316%, #edc6ac 5.26316%, #edc6ac 6.31579%, #e8b491 6.31579%, #e8b491 11.57895%, #edc6ac 11.57895%, #edc6ac 12.63158%, #e8b491 12.63158%, #e8b491 17.89474%, #edc6ac 17.89474%, #edc6ac 18.94737%, #e8b491 18.94737%, #e8b491 24.21053%, #edc6ac 24.21053%, #edc6ac 25.26316%, #e8b491 25.26316%, #e8b491 30.52632%, #edc6ac 30.52632%, #edc6ac 31.57895%, #e8b491 31.57895%, #e8b491 36.84211%, #edc6ac 36.84211%, #edc6ac 37.89474%, #e8b491 37.89474%, #e8b491 43.15789%, #edc6ac 43.15789%, #edc6ac 44.21053%, #e8b491 44.21053%, #e8b491 49.47368%, #edc6ac 49.47368%, #edc6ac 50.52632%, #e8b491 50.52632%, #e8b491 55.78947%, #edc6ac 55.78947%, #edc6ac 56.84211%, #e8b491 56.84211%, #e8b491 62.10526%, #edc6ac 62.10526%, #edc6ac 63.15789%, #e8b491 63.15789%, #e8b491 68.42105%, #edc6ac 68.42105%, #edc6ac 69.47368%, #e8b491 69.47368%, #e8b491 74.73684%, #edc6ac 74.73684%, #edc6ac 75.78947%, #e8b491 75.78947%, #e8b491 81.05263%, #edc6ac 81.05263%, #edc6ac 82.10526%, #e8b491 82.10526%, #e8b491 87.36842%, #edc6ac 87.36842%, #edc6ac 88.42105%, #e8b491 88.42105%, #e8b491 93.68421%, #edc6ac 93.68421%, #edc6ac 94.73684%, #e8b491 94.73684%, #e8b491); | |
| } | |
| } | |
| header { | |
| background-color: rgba(200, 200, 200, 0.75); | |
| height: 70px; | |
| } | |
| nav { | |
| background-color: grey; | |
| height: 20px; | |
| } | |
| #content:after { | |
| content: ""; | |
| display: table; | |
| clear: both; | |
| } | |
| #main { | |
| background-color: rgba(200, 200, 100, 0.75); | |
| -sgs-span-settings: ("span": 2, "location": 1, "grid": 2, "gutter": 0.2, "style": "opposite", "start row": true, "end row": true, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null))); | |
| width: 100%; | |
| float: right; | |
| margin-left: 0; | |
| margin-right: 0; | |
| clear: none; | |
| } | |
| #main article { | |
| background: purple; | |
| } | |
| @media (min-width: 600px) { | |
| #main { | |
| -sgs-span-settings: ("span": 3, "location": 1, "grid": 4, "gutter": 0.2, "style": "opposite", "start row": true, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null))); | |
| width: 73.91304%; | |
| float: left; | |
| margin-right: -100%; | |
| margin-left: 0; | |
| clear: none; | |
| } | |
| } | |
| @media (min-width: 900px) { | |
| #main { | |
| -sgs-span-settings: ("span": 8, "location": 1, "grid": 12, "gutter": 0.2, "style": "opposite", "start row": true, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null))); | |
| width: 66.19718%; | |
| float: left; | |
| margin-right: -100%; | |
| margin-left: 0; | |
| clear: none; | |
| } | |
| } | |
| @media (min-width: 1200px) { | |
| #main { | |
| -sgs-span-settings: ("span": 10, "location": 1, "grid": 16, "gutter": 0.2, "style": "opposite", "start row": true, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null))); | |
| width: 62.10526%; | |
| float: left; | |
| margin-right: -100%; | |
| margin-left: 0; | |
| clear: none; | |
| } | |
| } | |
| aside { | |
| background: green; | |
| -sgs-span-settings: ("span": 2, "location": 1, "grid": 2, "gutter": 0.2, "style": "opposite", "start row": true, "end row": true, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": (("both": null))); | |
| width: 100%; | |
| float: right; | |
| margin-left: 0; | |
| margin-right: 0; | |
| clear: none; | |
| } | |
| @media (min-width: 600px) { | |
| aside { | |
| -sgs-span-settings: ("span": 1, "location": 4, "grid": 4, "gutter": 0.2, "style": "opposite", "start row": false, "end row": true, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null))); | |
| width: 21.73913%; | |
| float: right; | |
| margin-left: 0; | |
| margin-right: 0; | |
| clear: none; | |
| } | |
| } | |
| @media (min-width: 900px) { | |
| aside { | |
| -sgs-span-settings: ("span": 4, "location": 9, "grid": 12, "gutter": 0.2, "style": "opposite", "start row": false, "end row": true, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null))); | |
| width: 32.39437%; | |
| float: right; | |
| margin-left: 0; | |
| margin-right: 0; | |
| clear: none; | |
| } | |
| } | |
| @media (min-width: 1200px) { | |
| aside { | |
| -sgs-span-settings: ("span": 6, "location": 11, "grid": 16, "gutter": 0.2, "style": "opposite", "start row": false, "end row": true, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null))); | |
| width: 36.84211%; | |
| float: right; | |
| margin-left: 0; | |
| margin-right: 0; | |
| clear: none; | |
| } | |
| } | |
| footer { | |
| background: yellow; | |
| -sgs-span-settings: ("span": 2, "location": 1, "grid": 2, "gutter": 0.2, "style": "opposite", "start row": true, "end row": true, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null))); | |
| width: 100%; | |
| float: right; | |
| margin-left: 0; | |
| margin-right: 0; | |
| clear: none; | |
| } | |
| footer section { | |
| background: pink; | |
| padding: 4px; | |
| } | |
| footer .section1 { | |
| -sgs-span-settings: ("span": 1, "location": 1, "grid": 2, "gutter": 0.1, "style": "opposite", "start row": true, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null))); | |
| width: 47.61905%; | |
| clear: right; | |
| float: left; | |
| margin-left: 0; | |
| margin-right: 4.7619%; | |
| } | |
| footer .section2 { | |
| -sgs-span-settings: ("span": 1, "location": 2, "grid": 2, "gutter": 0.1, "style": "opposite", "start row": false, "end row": true, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null))); | |
| width: 47.61905%; | |
| clear: right; | |
| float: right; | |
| margin-right: 0; | |
| } | |
| footer .section3 { | |
| -sgs-span-settings: ("span": 1, "location": 1, "grid": 2, "gutter": 0.1, "style": "opposite", "start row": true, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null))); | |
| width: 47.61905%; | |
| clear: right; | |
| float: left; | |
| margin-left: 0; | |
| margin-right: 4.7619%; | |
| } | |
| footer .section4 { | |
| -sgs-span-settings: ("span": 1, "location": 2, "grid": 2, "gutter": 0.1, "style": "opposite", "start row": false, "end row": true, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null))); | |
| width: 47.61905%; | |
| clear: right; | |
| float: right; | |
| margin-right: 0; | |
| } | |
| @media (min-width: 600px) { | |
| footer { | |
| -sgs-span-settings: ("span": 4, "location": 1, "grid": 4, "gutter": 0.2, "style": "opposite", "start row": true, "end row": true, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null))); | |
| width: 100%; | |
| float: right; | |
| margin-left: 0; | |
| margin-right: 0; | |
| clear: none; | |
| } | |
| footer .section1 { | |
| -sgs-span-settings: ("span": 1, "location": 1, "grid": 4, "gutter": 0.2, "style": "opposite", "start row": true, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null))); | |
| width: 21.73913%; | |
| float: left; | |
| margin-right: -100%; | |
| margin-left: 0; | |
| clear: none; | |
| } | |
| footer .section2 { | |
| -sgs-span-settings: ("span": 1, "location": 2, "grid": 4, "gutter": 0.2, "style": "opposite", "start row": false, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null))); | |
| width: 21.73913%; | |
| float: left; | |
| margin-right: -100%; | |
| margin-left: 26.08696%; | |
| clear: none; | |
| } | |
| footer .section3 { | |
| -sgs-span-settings: ("span": 1, "location": 3, "grid": 4, "gutter": 0.2, "style": "opposite", "start row": false, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null))); | |
| width: 21.73913%; | |
| float: left; | |
| margin-right: -100%; | |
| margin-left: 52.17391%; | |
| clear: none; | |
| } | |
| footer .section4 { | |
| -sgs-span-settings: ("span": 1, "location": 4, "grid": 4, "gutter": 0.2, "style": "opposite", "start row": false, "end row": true, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null))); | |
| width: 21.73913%; | |
| float: right; | |
| margin-left: 0; | |
| margin-right: 0; | |
| clear: none; | |
| } | |
| } | |
| @media (min-width: 900px) { | |
| footer { | |
| -sgs-span-settings: ("span": 12, "location": 1, "grid": 12, "gutter": 0.2, "style": "opposite", "start row": true, "end row": true, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null))); | |
| width: 100%; | |
| float: right; | |
| margin-left: 0; | |
| margin-right: 0; | |
| clear: none; | |
| } | |
| footer .section1 { | |
| -sgs-span-settings: ("span": 3, "location": 1, "grid": 12, "gutter": 0.2, "style": "opposite", "start row": true, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null))); | |
| width: 23.94366%; | |
| float: left; | |
| margin-right: -100%; | |
| margin-left: 0; | |
| clear: none; | |
| } | |
| footer .section2 { | |
| -sgs-span-settings: ("span": 3, "location": 4, "grid": 12, "gutter": 0.2, "style": "opposite", "start row": false, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null))); | |
| width: 23.94366%; | |
| float: left; | |
| margin-right: -100%; | |
| margin-left: 25.35211%; | |
| clear: none; | |
| } | |
| footer .section3 { | |
| -sgs-span-settings: ("span": 3, "location": 7, "grid": 12, "gutter": 0.2, "style": "opposite", "start row": false, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null))); | |
| width: 23.94366%; | |
| float: left; | |
| margin-right: -100%; | |
| margin-left: 50.70423%; | |
| clear: none; | |
| } | |
| footer .section4 { | |
| -sgs-span-settings: ("span": 3, "location": 10, "grid": 12, "gutter": 0.2, "style": "opposite", "start row": false, "end row": true, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null))); | |
| width: 23.94366%; | |
| float: right; | |
| margin-left: 0; | |
| margin-right: 0; | |
| clear: none; | |
| } | |
| } | |
| @media (min-width: 1200px) { | |
| footer { | |
| -sgs-span-settings: ("span": 16, "location": 1, "grid": 16, "gutter": 0.2, "style": "opposite", "start row": true, "end row": true, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null))); | |
| width: 100%; | |
| float: right; | |
| margin-left: 0; | |
| margin-right: 0; | |
| clear: none; | |
| } | |
| footer .section1 { | |
| -sgs-span-settings: ("span": 4, "location": 1, "grid": 16, "gutter": 0.2, "style": "opposite", "start row": true, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null))); | |
| width: 24.21053%; | |
| float: left; | |
| margin-right: -100%; | |
| margin-left: 0; | |
| clear: none; | |
| } | |
| footer .section2 { | |
| -sgs-span-settings: ("span": 4, "location": 5, "grid": 16, "gutter": 0.2, "style": "opposite", "start row": false, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null))); | |
| width: 24.21053%; | |
| float: left; | |
| margin-right: -100%; | |
| margin-left: 25.26316%; | |
| clear: none; | |
| } | |
| footer .section3 { | |
| -sgs-span-settings: ("span": 4, "location": 9, "grid": 16, "gutter": 0.2, "style": "opposite", "start row": false, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null))); | |
| width: 24.21053%; | |
| float: left; | |
| margin-right: -100%; | |
| margin-left: 50.52632%; | |
| clear: none; | |
| } | |
| footer .section4 { | |
| -sgs-span-settings: ("span": 4, "location": 13, "grid": 16, "gutter": 0.2, "style": "opposite", "start row": false, "end row": true, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null))); | |
| width: 24.21053%; | |
| float: right; | |
| margin-left: 0; | |
| margin-right: 0; | |
| clear: none; | |
| } | |
| } |
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 charset="utf-8"> | |
| <title>My Front-end Demo Project</title> | |
| <link rel="stylesheet" href="stylesheets/application.css"> | |
| <script type="text/javascript" src="scripts/app.js"></script> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <header> | |
| Header goes here... | |
| </header> | |
| <nav> | |
| <a href="#">Home</a> | |
| <a href="#">Services</a> | |
| <a href="#">About Us</a> | |
| <a href="#">Contact Us</a> | |
| </nav> | |
| <div id="content"> | |
| <section id="main" role="main"> | |
| <article>An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it.</article> | |
| <article>Another article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it. An article here that will appear differenly from the section above it.</article> | |
| </section> | |
| <aside> | |
| <article> | |
| <h3>Sidebar Title 1</h3> | |
| <p> | |
| Some Text Here | |
| </p> | |
| </article> | |
| <article> | |
| <h3>Sidebar Title 2</h3> | |
| <p> | |
| Some Text Here | |
| </p> | |
| </article> | |
| </aside> | |
| </div> | |
| <footer> | |
| <section class="section1">The first section in the footer.</section> | |
| <section class="section2">The second section in the footer.</section> | |
| <section class="section3">The third section in the footer.</section> | |
| <section class="section4">The fourth section in the footer.</section> | |
| </footer> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment