Félix Alejandro Zelaya Orellana
Preguntastudent•hace 6 años
Al principio me sentí muy muy perdido ya que no explicó casi nada de muchas cosas del reto pero me di cuenta que para eso está la documentación y nuestra curiosidad de aprender más allá y no esperar que el profe haga todo, me costó un poco adaptarme pero lo logré!
Acá el código!
!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"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <title>Desafío 1</title> </head> <body> <style> .container.uno .row div{ border: 1px solid white; background-color:lightgreen; height: 50px } .container.dos .row div{ border: 1px solid white; background-color: yellowgreen; height: 50px } .container.tres .row div{ border: 1px solid white; background-color: lightcoral; height: 50px } </style> <h2>Desafío 1</h2> <div class="container uno"> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div> <div class="row"> <div class="col"></div> <div class="col"></div> </div> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div> <div class="row"> <div class="col"></div> </div> </div> <h2>Desafío 2</h2> <div class="container dos"> <div class="row"> <div class="col-6 col-sm-6 col-md-3 col-lg-3"></div> <div class="col-6 col-sm-6 col-md-3 col-lg-3"></div> <div class="col-6 col-sm-6 col-md-3 col-lg-3"></div> <div class="col-6 col-sm-6 col-md-3 col-lg-3"></div> </div> <div class="row"> <div class="col-sm-12 col-md-6 col-lg"></div> <div class="col-sm-12 col-md-6 col-lg"></div> <div class="col-sm-12 col-md-6 col-lg"></div> <div class="col-sm-12 col-md-6 col-lg"></div> <div class="col-sm-12 col-md-6 col-lg"></div> <div class="col-sm-12 col-md-6 col-lg"></div> <div class="col-sm-12 col-md-6 col-lg"></div> <div class="col-sm-12 col-md-6 col-lg"></div> <div class="col-sm-12 col-md-6 col-lg"></div> <div class="col-sm-12 col-md-6 col-lg"></div> </div> </div> <h2>Desafío 3</h2> <div class="container tres"> <div class="row"> <div class="col-12 col-md-12 offset-md-6"></div> </div> <div class="row"> <div class="col-8 col-md-8 offset-md-2"></div> </div> <div class="row"> <div class="col-3 offset-9 col-md-4"></div> </div> </div> </body> </html>
Cómo les fue a ustedes?😃
Edward Steven Ramos Palacios
teacher•hace 6 años
Wow que bien te quedo! asi es. Siempre tendremos la documentación a la mano. Ahora podrias implementar algun pre procesador de css y extraer tus estilos en archivos propios.
