A la vez que vamos avanzado en contenidos , vamos a ir añadiendo secciones a ese ejercicio en que hacíamos la cabecera de una web (El Centollo) https://raulperez.tieneblog.net/menu-horizontal-css-responsive-centrado-automaticamente/
En este caso vamos a practicar la propiedad de CSS float para posicionar 4 <div> para presentar lo diferentes menús de “El centollo”. Además de float, veremos nuevas propiedades para darle a estos <div> una apariencia elegante. Además de cargar alguna fuente de Google Fonts, también he usado Font Awesome para los iconos. Aparece también la propiedad box -shadow de CSS3.
Este sería el código:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 |
<!DOCTYPE html> <html> <head> <script src="https://kit.fontawesome.com/d949a75390.js"></script> <link href="https://fonts.googleapis.com/css?family=Pacifico&display=swap" rel="stylesheet"/> <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet"/> <link rel="shorcut icon" href="imagenes/crab.png" type="image/png"/> <meta charset="utf-8" /> <title>El Centollo</title> <style> *{ margin: 0; padding: 0; } body{ font-family: 'Open Sans', sans-serif; } #content-menus{ float: left; } .menu-item{ background: #F9F8FC; padding: 30px; margin: 50px 100px; font-size: 18px; float: left; width: 28%; box-shadow: 5px 10px rgba(0, 0, 0, 0.08); -moz-box-shadow: 5px 10px rgba(0, 0, 0, 0.08); -webkit-box-shadow: 5px 10px rgba(0, 0, 0, 0.08); min-height: 250px; } .menu-item h4{ font-size: 28px; } .menu-item p{ padding-left: 85px; border:0px solid red; margin-top: 15px; } .menu-item p.precio{ text-align: center; font-weight: bold; font-size: 28px; } .menu-item i{ font-size: 40px; } .image-menu{ float:left; min-height: 250px; padding-right: 10px; } </style> </head> <body> <div id="content-menus"> <div class="menu-item"> <div class="image-menu"> <i class="fas fa-gem"></i> </div> <div class="description-menu"> <h4>Menú Deluxe</h4> <p>1 Centollo</p> <p>Caviar ruso 100 Gr</p> <p>Tarta Santiago</p> <p class="precio">180 €</p> </div> </div> <div class="menu-item"> <div class="image-menu"> <i class="fas fa-user-tie"></i> </div> <div class="description-menu"> <h4>Menú Business</h4> <p>1 Centollo</p> <p>2 Cigalas</p> <p>Tarta Santiago</p> <p class="precio">140 €</p> </div> </div> <div class="menu-item"> <div class="image-menu"> <i class="fas fa-suitcase"></i> </div> <div class="description-menu"> <h4>Menú Turista</h4> <p>1/2 Centollo</p> <p>Sopa de pescado</p> <p>Cuajada</p> <p class="precio">70 €</p> </div> </div> <div class="menu-item"> <div class="image-menu"> <i class="fas fa-hiking"></i> </div> <div class="description-menu"> <h4>Menú Peregrino</h4> <p>Sopa de centollo</p> <p>Merluza rebozada</p> <p>Yogur</p> <p class="precio">20 €</p> </div> </div> </div> </body> </html> |