Acá les dejo el código empleado en el Vídeo Tutorial sobre el Pree-procesador LESS.
Created
July 10, 2016 22:17
-
-
Save luisrenemas/cfc2e8e59417853114f83075b46c7dd9 to your computer and use it in GitHub Desktop.
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="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Video Tutorial - Less</title> | |
| <link rel="stylesheet" href="css/less.css"> | |
| </head> | |
| <body> | |
| <ul class="main-menu"> | |
| <li><a href="#">Inicio</a></li> | |
| <li><a href="#">Videos</a></li> | |
| <li><a href="#">Tutoriales</a></li> | |
| <li><a href="#">Contacto</a></li> | |
| <li><a href="#">Sobre mí</a></li> | |
| </ul> | |
| <section class="main"> | |
| <h1>Video tutorial sobre Less</h1> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo saepe iste ipsum pariatur asperiores illum, fuga accusantium laborum unde nihil corporis! Recusandae exercitationem eos unde adipisci, ex tenetur autem iure quas accusamus ullam! Corporis, magni nostrum eveniet, aliquid labore adipisci ab, dolorum esse amet iste molestias quod quam voluptate quo! | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos voluptatibus beatae, dolorum facere voluptates rerum iste voluptatem, assumenda doloremque voluptate deleniti optio! Molestias nobis vel molestiae eveniet quibusdam. Dolores, quaerat ducimus itaque similique assumenda ratione aliquam dolor voluptatem, eius ipsam. | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. At hic aperiam, adipisci animi saepe officia iure minus. Dolores natus ipsam expedita eligendi, quis mollitia ut delectus. Eligendi quisquam, iste accusamus voluptatum, explicabo nemo numquam est aliquid quasi officiis ullam. Dolor labore autem voluptatibus porro id! | |
| </p> | |
| </section> | |
| <footer> | |
| <p>© 01LuisRene - Trujillo - Perú</p> | |
| </footer> | |
| </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
| html, | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| background: #ffffff; | |
| font-size: 14px; | |
| line-height: normal; | |
| color: #474040; | |
| } | |
| ul { | |
| margin: 0; | |
| } | |
| .main-menu { | |
| background: #638de2; | |
| display: block; | |
| } | |
| .main-menu li { | |
| display: inline-block; | |
| } | |
| .main-menu li a { | |
| border: 1px solid transparent; | |
| display: block; | |
| color: #474040; | |
| font-size: 18px; | |
| padding: 10px 15px; | |
| text-decoration: none; | |
| transition: .500s; | |
| } | |
| .main-menu li a:hover { | |
| border: 1px dotted #ffffff; | |
| color: #ffffff; | |
| text-decoration: underline; | |
| } | |
| .main { | |
| font-size: 20px; | |
| line-height: 35px; | |
| display: block; | |
| margin: 0 auto; | |
| width: 80%; | |
| } | |
| footer { | |
| background: #8e8989; | |
| } | |
| footer p { | |
| color: #ffffff; | |
| font-size: 24px; | |
| text-align: center; | |
| padding: 30px 0; | |
| display: block; | |
| margin: 0 auto; | |
| width: 80%; | |
| } |
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
| //Variables | |
| @color-base: #386DDA; | |
| @color-gray:#8E8989; | |
| @color-white:#FFFFFF; | |
| @color-text: #474040; | |
| @font-size-base: 14px; | |
| @padding-base: 10px; | |
| // Mixin | |
| .box-center(@var, @var2){ | |
| display: block; | |
| margin: @var @var2; | |
| width: 80%; | |
| } | |
| // Código | |
| html, body{ | |
| margin:0; | |
| padding:0; | |
| } | |
| body{ | |
| background: @color-white; | |
| font-size: @font-size-base; | |
| line-height: normal; | |
| color:@color-text; | |
| } | |
| ul{ | |
| margin: 0; | |
| } | |
| .main-menu{ | |
| background: lighten(@color-base, 10%); | |
| display: block; | |
| li{ | |
| display: inline-block; | |
| a{ | |
| border: 1px solid transparent; | |
| display: block; | |
| color: @color-text; | |
| font-size: @font-size-base + 4px; | |
| padding: @padding-base (@padding-base + 5px); | |
| text-decoration: none; | |
| transition: .500s; | |
| &:hover{ | |
| border: 1px dotted @color-white; | |
| color: @color-white; | |
| text-decoration: underline; | |
| } | |
| } | |
| } | |
| } | |
| .main{ | |
| font-size: @font-size-base + 6px; | |
| line-height: 35px; | |
| .box-center(0, auto); | |
| } | |
| footer{ | |
| background: @color-gray; | |
| p{ | |
| color: @color-white; | |
| font-size: @font-size-base + 10px; | |
| text-align: center; | |
| padding: (@padding-base*3px) 0; | |
| .box-center(0, auto); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment