Ejercicio cajas float CSS

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:

<!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>

 

Deja una respuesta

Tu dirección de correo electrónico no será publicada.