| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <style> | |
| * { box-sizing: border-box; } | |
| body { | |
| margin: 0; | |
| display: flex; | |
| min-height: 100vh; | |
| flex: 1; | |
| flex-direction: row; | |
| justify-content: center; | |
| } | |
| aside { | |
| flex: 1; | |
| background: #333; | |
| flex-basis: 300px; | |
| } | |
| main { | |
| flex: 1; | |
| flex-basis: 875px; | |
| } | |
| main div { | |
| float:left; | |
| width:calc(100% - 50px); | |
| max-width:825px; | |
| background:#ccc; | |
| height: 500px; | |
| margin:25px; | |
| } | |
| aside div { | |
| float:right; | |
| width:calc(100% - 50px); | |
| max-width:250px; | |
| background:rgba(255,255,255,0.1); | |
| height: 500px; | |
| margin:25px; | |
| } | |
| #goal { | |
| position: fixed; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| #goal div { | |
| box-shadow: inset 0 0 3px red; | |
| height: 120%; | |
| transform: translateY(-10%); | |
| width: 100%; | |
| max-width: 1175px; | |
| margin: 0 auto; | |
| } | |
| @media screen and (max-width: 888px) { | |
| body { | |
| display: block; | |
| flex: none; | |
| } | |
| aside, main { | |
| flex: none; | |
| width: 100%; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| aside div { | |
| width: calc(100% - 50px); | |
| height: 100px; | |
| float: none; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id='goal'><div></div></div> | |
| <aside> | |
| <div> | |
| </div> | |
| </aside> | |
| <main> | |
| <div> | |
| </div> | |
| </main> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment