| <html> | |
| <!--...--> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title> Ghost </title> | |
| <link rel="Stylesheet" href="css/style.css"> | |
| </head> | |
| <body> | |
| <div id="sidebar"> | |
| Side Content | |
| </div> | |
| <div id="rightSideWrapper"> | |
| <header> | |
| Header | |
| </header> | |
| <div class="ContentBox"><!--. poner en minusculas.--> | |
| <main> | |
| Main Content | |
| </main> | |
| <section> | |
| Section Content | |
| </section> | |
| <footer> | |
| Footer | |
| </footer> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
| *{ | |
| margin: 0px; | |
| } | |
| #sidebar { | |
| /*Strictly Necessary */ | |
| position:fixed; | |
| height: 100%; | |
| width:30%; | |
| margin: 0px; | |
| /*Aesthetics*/ | |
| background: lightblue; | |
| border-radius: 7px; | |
| } | |
| #rightSideWrapper { | |
| /*Strictly Necessary */ | |
| width:70%; | |
| float: right; | |
| /*Aesthetics*/ | |
| background: black; | |
| } | |
| header { | |
| /*Strictly Necessary */ | |
| position: fixed; | |
| width: 70%; | |
| height: 100px; /*Adjust the hight to your purposes*/ | |
| /*Aesthetics*/ | |
| background: lightSalmon; | |
| border-radius: 7px; | |
| } | |
| .ContentBox{ | |
| margin-top: 100px; /*The height of the header*/ | |
| display:flex; | |
| flex-flow: row wrap; | |
| } | |
| main, section, footer { | |
| /*Aesthetics*/ | |
| background: lightgray; | |
| border-radius: 7px; | |
| margin: 5px; | |
| padding: 20px; | |
| } | |
| main { | |
| /*Strictly Necessary */ | |
| height: 400px; | |
| order: 1; | |
| flex: 0 1 100%; | |
| } | |
| section { | |
| /*Strictly Necessary */ | |
| height: 400px; | |
| order: 2; | |
| flex: 0 1 100%; | |
| } | |
| footer { | |
| /*Strictly Necessary */ | |
| height: 100px; | |
| order: 3; | |
| flex: 0 1 100%; | |
| } |