Modèle HTML de menu de restaurant

3929 lebdev

Ouvrir dans l'éditeur Publiez votre code

Recommandé

25 November 2025

Chargeur de jeu HTML5 avec intégration du SDK Yandex

23 August 2025

Modèle HTML/CSS/JS de formulaire de connexion et d'inscription

16 October 2025

Animation de code CSS : sable, erreurs et développement

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

Recommandé

Chargeur de jeu HTML5 avec intégration du SDK Yandex

Modèle HTML/CSS/JS de formulaire de connexion et d'inscription

Animation de code CSS : sable, erreurs et développement

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS