Modèle HTML de menu de restaurant

Ouvrir dans l'éditeur Publiez votre code

Recommandé

22 August 2025

Conception de sites Web, marketing numérique et services vidéo

3 February 2025

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

Modèle HTML de menu de restaurant

Recommandé

Conception de sites Web, marketing numérique et services vidéo

Un code par zegarekdawida

Lecteur vidéo brutaliste

HTML

CSS

JS

Recommandé

Conception de sites Web, marketing numérique et services vidéo

Un code par zegarekdawida

Lecteur vidéo brutaliste

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS