Last active
May 26, 2018 20:36
-
-
Save furenku/d07e408437b833f8f83e3258723c8b03 to your computer and use it in GitHub Desktop.
ejercicio maquetado
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>Document</title> | |
| <!-- link --> | |
| <link rel="stylesheet" href="css/style.css"> | |
| <!-- header styles --> | |
| <link rel="stylesheet" href="css/style-header-mobile.css"> | |
| <link rel="stylesheet" href="css/style-header-tablet.css"> | |
| <!-- home cover styles --> | |
| <link rel="stylesheet" href="css/cover-mobile.css"> | |
| <link rel="stylesheet" href="css/cover-tablet.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | |
| </head> | |
| <body> | |
| <!-- header#main-header --> | |
| <header id="main-header"> | |
| <!-- div#site-logo --> | |
| <div id="site-logo"> | |
| <img src="http://fakeimg.pl/150x70?text=Logo" alt=""> | |
| </div> | |
| <!-- nav#main-menu --> | |
| <nav id="main-menu"> | |
| <!-- ul>(li>a{Elemento Menú $})*4 --> | |
| <ul> | |
| <li><a href="#">Elemento Menú con titulo largo 1</a></li> | |
| <li><a href="#">Elemento Menú 2</a></li> | |
| <li><a href="#">Elemento Menú 3</a></li> | |
| <li><a href="#">Elemento Menú 4</a></li> | |
| </ul> | |
| </nav> | |
| <!-- div#header-action-icons --> | |
| <div id="header-action-icons"> | |
| <!-- div.action-icon --> | |
| <div id="user-action-button" class="action-icon"> | |
| <!-- i.fa.fa-close --> | |
| <i class="fa fa-user"></i> | |
| <!-- span.label{Etiqueta} --> | |
| <span class="label"> | |
| Etiqueta | |
| </span> | |
| </div> | |
| <div id="menu-action-button" class="action-icon"> | |
| <!-- i.fa.fa-close --> | |
| <i class="fa fa-bars"></i> | |
| <!-- span.label{Etiqueta} --> | |
| <span class="label"> | |
| Etiqueta | |
| </span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- main#main-content --> | |
| <main id="main-content"> | |
| <!-- section#home-cover --> | |
| <section id="home-cover"> | |
| <!-- div#cover-background-mobile --> | |
| <div id="cover-background-mobile"> | |
| <img src="http://unsplash.it/768/400" alt=""> | |
| </div> | |
| <!-- div#cover-background-tablet --> | |
| <div id="cover-background-tablet"> | |
| <img src="http://unsplash.it/1200/700" alt=""> | |
| </div> | |
| <div class="title-container"> | |
| <h1> | |
| Título del Sitio | |
| </h1> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- footer#main-footer --> | |
| <footer id="main-footer"> | |
| Pie de página | |
| </footer> | |
| <!-- script --> | |
| <script src="js/app.js"></script> | |
| </body> | |
| </html> |
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
| #main-header { | |
| /* w100p */ | |
| width: 100%; | |
| /* h48 */ | |
| height: 48px; | |
| } | |
| #site-logo { | |
| /* w30p */ | |
| width: 30%; | |
| } | |
| #site-logo img { | |
| /* w100p */ | |
| width: 100%; | |
| /* h100p */ | |
| height: 48px; | |
| } | |
| #main-menu { | |
| /* dn */ | |
| display: none; | |
| } | |
| /* ALTERNATIVA 1: usando float left*/ | |
| /* #site-logo, | |
| #main-menu, | |
| #header-action-icons, */ | |
| /* hijos directos de la cabecera principal */ | |
| #main-header > * { | |
| float: left; | |
| } | |
| #header-action-icons { | |
| /* w30p */ | |
| width: 30%; | |
| /* h100p */ | |
| height: 100%; | |
| /* ml40p */ | |
| margin-left: 40%; | |
| } | |
| #header-action-icons .action-icon { | |
| /* w50p */ | |
| width: 45%; | |
| height: 100%; | |
| float: left; | |
| text-align: center; | |
| /* utilizamos flex para centrado vertical */ | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| } | |
| .action-icon:first-child {} | |
| .action-icon:last-child {} | |
| /* elegir el segundo: */ | |
| .action-icon:nth-child(2) {} | |
| .action-icon:first-child { | |
| margin-right: 10%; | |
| } | |
| .action-icon i { | |
| font-size: 20px; | |
| } | |
| .action-icon span { | |
| /* mt2 */ | |
| margin-top: 4px; | |
| font-size: 12px; | |
| } | |
| /* ALTERNATIVA 2 : Más complejo */ | |
| #header-action-icons { | |
| /* posa */ | |
| /* position: absolute; */ | |
| /* r0 */ | |
| /* right: 0; */ | |
| /* t0 */ | |
| /* top: 0; */ | |
| /* w25p */ | |
| /* width: 25%; */ | |
| } |
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
| @media screen and (min-width: 768px) { | |
| #site-logo { | |
| width: 20%; | |
| } | |
| #main-menu { | |
| /* dib */ | |
| display: inline-block; | |
| /* w75p */ | |
| width: 70%; | |
| } | |
| #main-menu ul { | |
| display: flex; | |
| /* flex-direction: row; */ | |
| justify-content: space-evenly; | |
| } | |
| #main-menu, | |
| #main-menu * /* otra opcion posible, mas corta */ | |
| /* #main-menu ul, | |
| #main-menu li, | |
| #main-menu a, */ | |
| { | |
| height: 100%; | |
| } | |
| #main-menu li { | |
| width: 150px; | |
| text-align: center; | |
| } | |
| /* esta regla se añade para que el link crezca al 100% de altura */ | |
| #main-menu a { | |
| display: flex; | |
| flex-direction: column; | |
| /* jcc */ | |
| justify-content: center; | |
| padding: 16px; | |
| } | |
| #header-action-icons { | |
| /* ml0 */ | |
| margin-left: 0; | |
| width: 10%; | |
| } | |
| #header-action-icons .action-icon { | |
| /* w100p */ | |
| width: 100%; | |
| } | |
| /* | |
| seleccionamos primero por clase, luego por Id, debido a temas de especificidad de selectores | |
| */ | |
| .action-icon#menu-action-button { | |
| display: none; | |
| } | |
| /* | |
| alternativa no recomendada: | |
| #menu-action-button { | |
| display: none !important; | |
| } | |
| */ | |
| } |
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
| * { | |
| outline: 1px solid #def; | |
| /* bzbb */ | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| /* RESETS */ | |
| html, body { | |
| /* m0 */ | |
| margin: 0; | |
| /* p0 */ | |
| padding: 0; | |
| } | |
| ul, li { | |
| /* m0 */ | |
| margin: 0; | |
| } | |
| li { | |
| list-style: none; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment