218 lines
5 KiB
Text
218 lines
5 KiB
Text
<body>
|
|
<div class="restaurant-page">
|
|
<!-- En-tête restaurant -->
|
|
<div class="header">
|
|
<div class="restaurant-info">
|
|
<h1>Nom restaurant <span class="heart">❤️</span></h1>
|
|
<p class="address">Adresse</p>
|
|
<div class="rating">
|
|
<span>⭐️⭐️⭐️⭐️⭐️</span>
|
|
<button class="btn">Voir tous les avis</button>
|
|
</div>
|
|
</div>
|
|
<div class="chart">
|
|
<div class="chart-placeholder">Graph radar</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Image principale -->
|
|
<div class="main-image"></div>
|
|
|
|
<!-- Description -->
|
|
<div class="description">
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
|
|
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
|
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
|
|
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
|
|
occaecat cupidatat
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Galerie -->
|
|
<div class="gallery">
|
|
<div class="gallery-item"></div>
|
|
<div class="gallery-item"></div>
|
|
<div class="gallery-item"></div>
|
|
</div>
|
|
|
|
<!-- Avis -->
|
|
<h2 class="reviews-title">Avis</h2>
|
|
<div class="reviews">
|
|
<div class="review">
|
|
<h3>Titre avis</h3>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
|
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
</p>
|
|
<div class="review-rating">
|
|
<div>Qualité des plats ⭐⭐⭐⭐⭐</div>
|
|
<div>Service ⭐⭐⭐⭐⭐</div>
|
|
<div>Ambiance ⭐⭐⭐⭐⭐</div>
|
|
<div>Accessibilité ⭐⭐⭐⭐⭐</div>
|
|
<div>Tarif ⭐⭐⭐⭐⭐</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="review">
|
|
<h3>Titre avis</h3>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
|
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
</p>
|
|
<div class="review-rating">
|
|
<div>Qualité des plats ⭐⭐⭐⭐⭐</div>
|
|
<div>Service ⭐⭐⭐⭐⭐</div>
|
|
<div>Ambiance ⭐⭐⭐⭐⭐</div>
|
|
<div>Accessibilité ⭐⭐⭐⭐⭐</div>
|
|
<div>Tarif ⭐⭐⭐⭐⭐</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="review">
|
|
<h3>Titre avis</h3>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
|
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
</p>
|
|
<div class="review-rating">
|
|
<div>Qualité des plats ⭐⭐⭐⭐⭐</div>
|
|
<div>Service ⭐⭐⭐⭐⭐</div>
|
|
<div>Ambiance ⭐⭐⭐⭐⭐</div>
|
|
<div>Accessibilité ⭐⭐⭐⭐⭐</div>
|
|
<div>Tarif ⭐⭐⭐⭐⭐</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<a href="#">Mentions légales</a>
|
|
<a href="#">Politique de confidentialité</a>
|
|
<a href="#">CGU</a>
|
|
</footer>
|
|
</div>
|
|
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
background: #fff;
|
|
}
|
|
|
|
.restaurant-page {
|
|
width: 90%;
|
|
max-width: 1200px;
|
|
margin: auto;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.restaurant-info h1 {
|
|
margin: 0;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.heart {
|
|
color: red;
|
|
}
|
|
|
|
.rating {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 10px 0;
|
|
gap: 10px;
|
|
}
|
|
|
|
.btn {
|
|
background: #999;
|
|
border: none;
|
|
color: white;
|
|
padding: 5px 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.chart-placeholder {
|
|
width: 150px;
|
|
height: 150px;
|
|
background: #eee;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.main-image {
|
|
width: 100%;
|
|
height: 200px;
|
|
background: #ccc;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.description {
|
|
background: #f9f9f9;
|
|
padding: 15px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.gallery {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.gallery-item {
|
|
width: 32%;
|
|
height: 150px;
|
|
background: #ddd;
|
|
}
|
|
|
|
.reviews-title {
|
|
background: #eee;
|
|
padding: 10px;
|
|
margin: 0;
|
|
}
|
|
|
|
.reviews {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.review {
|
|
background: #f5f5f5;
|
|
padding: 15px;
|
|
border: 1px solid #ddd;
|
|
}
|
|
|
|
.review h3 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.review-rating div {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
footer {
|
|
background: #eee;
|
|
padding: 10px;
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
footer a {
|
|
text-decoration: none;
|
|
color: black;
|
|
}
|
|
</style>
|
|
</body>
|