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>

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>

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

<h4>Menú Deluxe</h4>

<p>1 Centollo</p>

<p>Caviar ruso 100 Gr</p>

<p>Tarta Santiago</p>

</div>

</div>

<h4>Menú Business</h4>

<p>1 Centollo</p>

<p>2 Cigalas</p>

<p>Tarta Santiago</p>

</div>

</div>

<h4>Menú Turista</h4>

<p>1/2 Centollo</p>

<p>Sopa de pescado</p>

<p>Cuajada</p>

</div>

</div>

<h4>Menú Peregrino</h4>

<p>Sopa de centollo</p>

<p>Merluza rebozada</p>

<p>Yogur</p>

</div>

</body>

</html>

Deja un comentario Cancelar la respuesta