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>