Modèle HTML de menu de restaurant

4,923 0 Navigation lebdev Suivre

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Recommandé

22 June 2025

Exemple de formulaire de connexion HTML

20 April 2026

Galerie de cubes 3D avec sections artistiques défilables

13 January 2026

Formulaire HTML Cyberpunk : Effet de glitch, suivi oculaire

HTML

CSS

body {
  font-family: helvetica, sans-serif;
  margin: 0 auto;
  max-width: 600px;
  background: #232323;
}
div {
  height: 200px;
  background-size: cover;
  position: relative;
  margin: 40px 0 0 0;
  border-radius: 12px;
}
h1 {
  font-family: 'Love Ya Like A Sister', cursive;
  text-align: center;
  font-size: 75px;
  color: #aaaaaa;
  margin: 60px 0 0 0;
}
h2 {
  text-align: center;
  color: #bbbbbb;
  margin: 0px 0 70px 0;
}
p {
  color: rgba(255,255,255,1);
  background: black;
  background: linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
  background: -webkit-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
  background: -moz-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
  padding: 10px;
  line-height: 28px;
  text-align: justify;
  position: absolute;
  bottom: 0;
  margin: 0;
  height: 30px;
  transition: height .5s;
  -webkit-transition: height .5s;
  -moz-transition: height .5s;
}

small {
  opacity: 0;
}

.show-description p {
  height: 150px;
}

.show-description small {
  opacity: 1;
}

.first{
  background-image: url("http://blog.fairwaymarket.com/wp-content/uploads/2013/07/caesar-salad.jpg");
}
.second{
  background-image: url("http://www.budgetbytes.com/wp-content/uploads/2012/02/Broccoli-Fettuccine-close.jpg");
}
.dessert{
  background-image: url("https://3.bp.blogspot.com/-ga7Qrvibqmk/Uc9VCMovdDI/AAAAAAAAFG4/uCr_KFGLWQ0/s500/Grilled+Stone+Fruit+Parfait_Overhead+View-1-5.jpg");
}
.price {
  float: right;
  font-weight:bold;
}
@media (max-width: 500px) {
  h1 {
    font-size: 50px;
    margin-top: 20px;
    line-height: 40px;
  }
  h2 {
    font-size: 20px;
    margin: 20px 0 30px 0;
  }
  div {
    margin: 20px 12px 0 12px;
  }
  p {
    font-size: 20px;
    line-height: 24px;
  }
  small {
    font-size: 16px;
  }
}

Comments 0

…