Skip to content

Commit

Permalink
🏗 hotels cards
Browse files Browse the repository at this point in the history
  • Loading branch information
@gtnsimon
gtnsimon committed Nov 11, 2021
1 parent dca9d42 commit 57fab12
Show file tree
Hide file tree
Showing 2 changed files with 386 additions and 13 deletions.
232 changes: 227 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,17 +126,239 @@ <h2 class="filters__title">Filtres</h2>
</article>
</section>

<div class="hotels-list">
<section id="hebergements" class="hotels-list__item">
<div class="cards-group">
<section id="hebergements" class="cards-group__item">
<header>
<h2 class="hotels-list__item__title">Hébergements à Marseille</h2>
<h2 class="cards-group__item__title">Hébergements à Marseille</h2>
</header>

<ul class="cards-list">
<!-- Auberge La Cannebière -->
<li class="cards-list__item">
<a href="#" title="Consulter l'auberge La Cannebière" class="cards-list__item__wrapper">
<article class="cards-list__item__container">
<picture class="cards-list__item__cover">
<source media="(min-width: 992px)" srcset="./images/hebergements/2_large/marcus-loke-WQJvWU_HZFo-unsplash.jpg">
<source media="(min-width: 768px)" srcset="./images/hebergements/3_medium/marcus-loke-WQJvWU_HZFo-unsplash.jpg">
<img src="./images/hebergements/4_small/marcus-loke-WQJvWU_HZFo-unsplash.jpg" alt="Aperçu de la chambre" width="250px">
</picture>

<div class="cards-list__item__content">
<header class="cards-list__item__header">
<h3 class="cards-list__item__title">Auberge La Cannebière</h3>
</header>

<p class="cards-list__item__description">
<strong>Nuit à partir de <span>25€</span></strong>
</p>

<aside class="cards-list__item__stars" data-stars="4">Note de 4 sur 5</aside>
</div>
</article>
</a>
</li>
<!-- Hôtel du port -->
<li class="cards-list__item">
<a href="#" title="Consulter l'hôtel du port" class="cards-list__item__wrapper">
<article class="cards-list__item__container">
<picture class="cards-list__item__cover">
<source media="(min-width: 992px)" srcset="./images/hebergements/2_large/fred-kleber-gTbaxaVLvsg-unsplash.jpg">
<source media="(min-width: 768px)" srcset="./images/hebergements/3_medium/fred-kleber-gTbaxaVLvsg-unsplash.jpg">
<img src="./images/hebergements/4_small/fred-kleber-gTbaxaVLvsg-unsplash.jpg" alt="Aperçu de la chambre" width="250px">
</picture>

<div class="cards-list__item__content">
<header class="cards-list__item__header">
<h3 class="cards-list__item__title">Hôtel du port</h3>
</header>

<p class="cards-list__item__description">
<strong>Nuit à partir de <span>52€</span></strong>
</p>

<aside class="cards-list__item__stars" data-stars="5">Note de 5 sur 5</aside>
</div>
</article>
</a>
</li>
<!-- Hôtel Les mouettes -->
<li class="cards-list__item">
<a href="#" title="Consulter l'hôtel Les mouettes" class="cards-list__item__wrapper">
<article class="cards-list__item__container">
<picture class="cards-list__item__cover">
<source media="(min-width: 992px)" srcset="./images/hebergements/2_large/reisetopia-B8WIgxA_PFU-unsplash.jpg">
<source media="(min-width: 768px)" srcset="./images/hebergements/3_medium/reisetopia-B8WIgxA_PFU-unsplash.jpg">
<img src="./images/hebergements/4_small/reisetopia-B8WIgxA_PFU-unsplash.jpg" alt="Aperçu de la chambre" width="250px">
</picture>

<div class="cards-list__item__content">
<header class="cards-list__item__header">
<h3 class="cards-list__item__title">Hôtel Les mouettes</h3>
</header>

<p class="cards-list__item__description">
<strong>Nuit à partir de <span>76€</span></strong>
</p>

<aside class="cards-list__item__stars" data-stars="4">Note de 4 sur 5</aside>
</div>
</article>
</a>
</li>
<!-- Hôtel de la mer -->
<li class="cards-list__item">
<a href="#" title="Consulter l'hôtel de la mer" class="cards-list__item__wrapper">
<article class="cards-list__item__container">
<picture class="cards-list__item__cover">
<source media="(min-width: 992px)" srcset="./images/hebergements/2_large/annie-spratt-Eg1qcIitAuA-unsplash.jpg">
<source media="(min-width: 768px)" srcset="./images/hebergements/3_medium/annie-spratt-Eg1qcIitAuA-unsplash.jpg">
<img src="./images/hebergements/4_small/annie-spratt-Eg1qcIitAuA-unsplash.jpg" alt="Aperçu de la chambre" width="250px">
</picture>

<div class="cards-list__item__content">
<header class="cards-list__item__header">
<h3 class="cards-list__item__title">Hôtel de la mer</h3>
</header>

<p class="cards-list__item__description">
<strong>Nuit à partir de <span>46€</span></strong>
</p>

<aside class="cards-list__item__stars" data-stars="3">Note de 3 sur 5</aside>
</div>
</article>
</a>
</li>
<!-- Auberge Le Panier -->
<li class="cards-list__item">
<a href="#" title="Consulter l'auberge Le Panier" class="cards-list__item__wrapper">
<article class="cards-list__item__container">
<picture class="cards-list__item__cover">
<source media="(min-width: 992px)" srcset="./images/hebergements/2_large/nicate-lee-kT-ZyaiwBe0-unsplash.jpg">
<source media="(min-width: 768px)" srcset="./images/hebergements/3_medium/nicate-lee-kT-ZyaiwBe0-unsplash.jpg">
<img src="./images/hebergements/4_small/nicate-lee-kT-ZyaiwBe0-unsplash.jpg" alt="Aperçu de la chambre" width="250px">
</picture>

<div class="cards-list__item__content">
<header class="cards-list__item__header">
<h3 class="cards-list__item__title">Auberge Le Panier</h3>
</header>

<p class="cards-list__item__description">
<strong>Nuit à partir de <span>23€</span></strong>
</p>

<aside class="cards-list__item__stars" data-stars="4">Note de 4 sur 5</aside>
</div>
</article>
</a>
</li>
<!-- Hôtel chez Amina -->
<li class="cards-list__item">
<a href="#" title="Consulter l'hôtel chez Amina" class="cards-list__item__wrapper">
<article class="cards-list__item__container">
<picture class="cards-list__item__cover">
<source media="(min-width: 992px)" srcset="./images/hebergements/2_large/febrian-zakaria-M6S1WvfW68A-unsplash.jpg">
<source media="(min-width: 768px)" srcset="./images/hebergements/3_medium/febrian-zakaria-M6S1WvfW68A-unsplash.jpg">
<img src="./images/hebergements/4_small/febrian-zakaria-M6S1WvfW68A-unsplash.jpg" alt="Aperçu de la chambre" width="250px">
</picture>

<div class="cards-list__item__content">
<header class="cards-list__item__header">
<h3 class="cards-list__item__title">Hôtel chez Amina</h3>
</header>

<p class="cards-list__item__description">
<strong>Nuit à partir de <span>96€</span></strong>
</p>

<aside class="cards-list__item__stars" data-stars="5">Note de 5 sur 5</aside>
</div>
</article>
</a>
</li>
</ul>
</section>

<section id="populaires" class="hotels-list__item">
<section id="populaires" class="cards-group__item">
<header>
<h22 class="hotels-list__item__title">Les plus populaires</h2>
<h2 class="cards-group__item__title">Les plus populaires</h2>
</header>

<ul class="cards-list">
<!-- Hôtel Le soleil du matin -->
<li class="cards-list__item cards-list__item--paysage">
<a href="#" title="Consulter l'hôtel Le soleil du matin" class="cards-list__item__wrapper">
<article class="cards-list__item__container">
<picture class="cards-list__item__cover">
<source media="(min-width: 992px)" srcset="./images/hebergements/2_large/emile-guillemot-Bj_rcSC5XfE-unsplash.jpg">
<source media="(min-width: 768px)" srcset="./images/hebergements/3_medium/emile-guillemot-Bj_rcSC5XfE-unsplash.jpg">
<img src="./images/hebergements/4_small/emile-guillemot-Bj_rcSC5XfE-unsplash.jpg" alt="Aperçu de la chambre" width="250px">
</picture>

<div class="cards-list__item__content">
<header class="cards-list__item__header">
<h3 class="cards-list__item__title">Hôtel Le soleil du matin</h3>
</header>

<p class="cards-list__item__description">
<strong>Nuit à partir de <span>128€</span></strong>
</p>

<aside class="cards-list__item__stars" data-stars="5">Note de 5 sur 5</aside>
</div>
</article>
</a>
</li>
<!-- Au cœur de l'eau Chambres d'hôtes -->
<li class="cards-list__item cards-list__item--paysage">
<a href="#" title="Consulter au cœur de l'eau Chambres d'hôtes" class="cards-list__item__wrapper">
<article class="cards-list__item__container">
<picture class="cards-list__item__cover">
<source media="(min-width: 992px)" srcset="./images/hebergements/2_large/aw-creative-VGs8z60yT2c-unsplash.jpg">
<source media="(min-width: 768px)" srcset="./images/hebergements/3_medium/aw-creative-VGs8z60yT2c-unsplash.jpg">
<img src="./images/hebergements/4_small/aw-creative-VGs8z60yT2c-unsplash.jpg" alt="Aperçu de la chambre" width="250px">
</picture>

<div class="cards-list__item__content">
<header class="cards-list__item__header">
<h3 class="cards-list__item__title">Au cœur de l'eau Chambres d'hôtes</h3>
</header>

<p class="cards-list__item__description">
<strong>Nuit à partir de <span>71€</span></strong>
</p>

<aside class="cards-list__item__stars" data-stars="4">Note de 4 sur 5</aside>
</div>
</article>
</a>
</li>
<!-- Hôtel Tout bleu et Blanc -->
<li class="cards-list__item cards-list__item--paysage">
<a href="#" title="Consulter l'hôtel Tout bleu et Blanc" class="cards-list__item__wrapper">
<article class="cards-list__item__container">
<picture class="cards-list__item__cover">
<source media="(min-width: 992px)" srcset="./images/hebergements/2_large/febrian-zakaria-sjvU0THccQA-unsplash.jpg">
<source media="(min-width: 768px)" srcset="./images/hebergements/3_medium/febrian-zakaria-sjvU0THccQA-unsplash.jpg">
<img src="./images/hebergements/4_small/febrian-zakaria-sjvU0THccQA-unsplash.jpg" alt="Aperçu de la chambre" width="250px">
</picture>

<div class="cards-list__item__content">
<header class="cards-list__item__header">
<h3 class="cards-list__item__title">Hôtel Tout bleu et Blanc</h3>
</header>

<p class="cards-list__item__description">
<strong>Nuit à partir de <span>25€</span></strong>
</p>

<aside class="cards-list__item__stars" data-stars="4">Note de 4 sur 5</aside>
</div>
</article>
</a>
</li>
</ul>
</section>
</div>
</main>
Expand Down
Loading

0 comments on commit 57fab12

Please sign in to comment.