Created
April 22, 2021 13:29
-
-
Save furenku/51d411c78acb60b750f5dff912613fc3 to your computer and use it in GitHub Desktop.
HOLY GRAIL
This file contains hidden or 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 lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Holy Grail</title> | |
| <!-- style --> | |
| <style> | |
| * { | |
| outline: 1px solid blue; | |
| } | |
| html, body { | |
| /* m0 */ | |
| margin: 0; | |
| /* p0 */ | |
| padding: 0; | |
| } | |
| .contenedor { | |
| /* w100vw */ | |
| width: 100vw; | |
| /* h100vh */ | |
| height: 100vh; | |
| display: grid; | |
| grid-template-rows: 4rem 1fr 3rem; | |
| } | |
| .horizontal { | |
| display: grid; | |
| grid-template-columns: 1fr 4fr 1fr; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- .contenedor --> | |
| <div class="contenedor"> | |
| <!-- header --> | |
| <header> | |
| Cabecera | |
| </header> | |
| <!-- .horizontal --> | |
| <div class="horizontal"> | |
| <!-- aside.izquierda --> | |
| <aside class="izquierda"> | |
| Izquierda | |
| </aside> | |
| <!-- main --> | |
| <main> | |
| Principal | |
| </main> | |
| <!-- aside.derecha --> | |
| <aside class="derecha"> | |
| Derecha | |
| </aside> | |
| </div> | |
| <!-- footer --> | |
| <footer> | |
| Pie | |
| </footer> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment