From efac3c6a14f58b5e8eed7e5d367b499728a4afb1 Mon Sep 17 00:00:00 2001
From: Laurent Dlc <laurentdelacalle@hotmail.com>
Date: Thu, 15 Jun 2023 21:01:04 +0200
Subject: [PATCH 1/5] before debugging, working version

---
 css/style.css | 463 +++++++++++++++++++++++++++++++++++++++++++++-----
 index.html    | 245 +++++++++++++++++++++++---
 2 files changed, 641 insertions(+), 67 deletions(-)

diff --git a/css/style.css b/css/style.css
index 4399d5fa..347cec3c 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,6 +1,8 @@
 /****** General ***********/
 * {
     font-family: 'Raleway', sans-serif;
+    margin: 0;
+    padding: 0;
 }
 
 :root {
@@ -9,40 +11,69 @@
     --filter-bg-color: #DEEBFF;
 }
 
-.fa-solid {
-    color: var(--main-color);
-}
-
 body {
     display: flex;
     justify-content: center;
 }
 
-.main-container {
+.main {
     width: 100%;
     max-width: 1440px;
     padding: 0 50px;
     box-sizing: border-box;
 }
 
-.section-title {
-    margin: 0;
-    font-size: 22px;
-}
-
 .card {
     background-color: white;
     border-radius: 20px;
     padding: 5px;
     filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1));
+    display: flex;
+    margin-top: 33px;
 }
 
-.card img {
+.cards__img {
+    width: 33%;
+    height: 136px;
+    border-top-left-radius: 20px;
+    border-bottom-left-radius: 20px;
     object-fit: cover;
 }
 
-.card-title {
-    font-size: 16px;
+.card__title {
+    margin : 20px 19px;
+    font-weight: 700;
+}
+
+.card__subtitle {
+    padding: 4px 0;
+    font-size: 14px;
+}
+
+.card__content {
+    padding-left: 15px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+.card__rating {
+    margin-bottom: 5px;
+}
+
+
+.card--col {
+    flex-direction: column;
+    gap: 8px;
+}
+
+.cards__img--col {
+    width: 100%;
+    height : clamp(200px, 7vw, 450px);
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+    object-fit: cover;
 }
 
 .euro {
@@ -50,16 +81,284 @@ body {
 }
 
 .neutralStar {
-    color: var(--main-bg-color)
+    color: var(--main-bg-color);
+}
+
+.title {
+    font-weight: 700;
+    font-size: 22px;
+    margin: 0;
+}
+
+.lead__text {
+    font-size: 16px;
+}
+
+.lead__text--bold {
+    font-size: 18px;
+    font-weight: 700;
+}
+
+.nav__link {
+    text-decoration: none;
+    color: #000;
+}
+
+
+/****** Header ***********/
+
+.header {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
 }
 
-/****** Hebergements And Populaires ***********/
+    .header__logo {
+        padding: 30px 0;
+    }
+
+    .header__logo__img {
+        width: 61.09px;
+        height: 19px;
+    }
+
+.header__nav {
+    display: flex;
+    gap: 68px;
+    align-items: flex-start;
+}
+
+    .header__nav__button {
+        display: flex;
+        flex-direction: column-reverse;
+    }
+
+    .header__nav__link {
+        padding-top: 15px;
+    }
+
+    .header__nav__line {
+        height: 2px;
+        background-color: var(--main-bg-color);
+    }
+
+    .header__nav__link:hover + .header__nav__line  {
+        color: var(--main-color);
+        background-color: var(--main-color);
+    }
+
+    .header__nav__link:hover, .header__nav__link:hover::before {
+        transform-origin: left;
+        color: var(--main-color);
+        transform: scaleX(1);
+        
+    }
+
+/* ********** Header section Media queries ********** */
+/* Small devices (phones, less than 768px) */
+
+@media (max-width: 767.98px) {
+
+    .nav__link {
+        padding-top: 0;
+        padding-bottom: 15px;
+    }
+
+    .header {
+        align-items: center;
+        flex-direction: column;
+    }
+
+    .header__nav {
+        width: 100%;
+        display:grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 0;
+    }
+
+    .header__nav__link {
+        padding-top: 15px;
+    }
+
+    .header__nav__button {
+        text-align: center;
+        flex-direction: column;
+    }
+
+    .header__nav__link:hover + .header__nav__line  {
+        color: var(--main-color);
+        background-color: var(--main-color);
+    }
+    
+    .header__nav__line {
+        width: 100%;
+        height: 2px;
+        background-color: var(--main-bg-color);
+    }
+
+}
+
+/****** Hero Section ***********/
+
+.hero {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 35px;
+    margin-top: 30px;
+    margin-bottom: 35px;
+}
+
+    .hero__headline__title {
+        margin-bottom: 8px;
+    }
+
+    .hero__searchbar__form {
+        display: flex;
+    }
+
+    .hero__searchbar__icon {
+        background-color: var(--main-bg-color);
+        color: #000;
+        display: flex;
+        width: 50px;
+        justify-content: center;
+        align-items: center;
+        font-size: 18px;
+        border-top-left-radius: 15px;
+        border-bottom-left-radius: 15px;
+    }
+
+    .hero__searchbar__input {
+        border: 2px solid var(--main-bg-color);
+        padding: 14px;
+        text-align: center;
+        font-size: 18px;
+        font-weight: 700;
+        user-select: text;
+    }
+
+    .hero__searchbar__input:focus {
+        outline: none;
+    }
+
+    .hero__searchbar__btn {
+        padding: 14px 16px;
+        background-color: var(--main-color);
+        border : none;
+        color: var(--main-bg-color);
+        font-size: 18px;
+        text-align: left;
+        border-top-right-radius: 15px;
+        border-bottom-right-radius: 15px;
+        font-weight: 700;
+        cursor: pointer;
+    }
+
+    .hero__searchbar__icon--blue {
+        background-color: var(--main-color);
+        color: var(--main-bg-color);
+        display: none;
+        margin-left: -9px;
+        justify-content: center;
+        align-items: center;
+        border-radius: 15px;
+        width: 50px;
+        font-size: 18px;
+        cursor: pointer;
+    }
+
+    .hero__filter {
+        display: flex;
+        gap: 15px;
+        flex-wrap: wrap ;
+        align-items: center;
+    }
+
+    .hero__filter__title {
+        font-size: 18px;
+        font-weight: 700;
+    }
+
+    .hero__filter__btn {
+        padding: 15px 19px;
+        font-size: 17px;
+        font-weight: 700;
+        background-color: #fff;
+        border: 2px solid var(--main-bg-color);
+        border-radius: 50px;
+        transition: all .4s;
+        cursor: pointer;
+    }
+
+    .hero__filter__btn:hover {
+        background-color: var(--filter-bg-color);
+    }
+
+    .hero__filter__icon {
+        padding-right : 14px;
+        font-size: 17px;
+        color: var(--main-color);
+    }
+
+    .hero__info {
+        display: flex;
+        gap: 10px;
+        align-items: center;
+    }
+
+    .hero__info__icon {
+        padding:7px 12px;
+        border: solid 2px var(--main-bg-color);
+        border-radius: 50%;
+        color: var(--main-color);
+    }
+
+
+    /* ********** Hero section Media queries ********** */
+    /* Small devices (phones, less than 768px) */
+
+@media (max-width: 767.98px) {
+    .hero {
+        align-items: center;
+        padding : 30px 20px 35px;
+        margin: 0;
+    }
+
+    .hero__filter {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .hero__filter__btn {   
+        font-size: 14px;
+    }
+
+    .hero__filter__buttons {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        row-gap: 20px;
+        column-gap: 10px;
+    }
+
+    .hero__searchbar__icon--blue {
+        display: flex;
+    }
+
+    .hero__searchbar__btn {
+       display: none;
+    }
+}
+
+/****** Hebergements And Populaires section ***********/
+
+
 .hebergements-and-populaires {
     display: flex;
     justify-content: space-between;
 }
 
-.hebergements-and-populaires section {
+.hebergements, .populaires {
     background-color: var(--main-bg-color);
     border-radius: 20px;
     padding: 30px;
@@ -67,55 +366,66 @@ body {
 }
 
 /****** Hebergements ***********/
+
+
 .hebergements {
     width: 65%;
 }
 
+    .hebergements__cards {
+        display: grid;
+        grid-template-columns: repeat(3,1fr);
+        gap: 30px;
+    }
+
+    .hebergements__see-more {
+        padding : 35px 0;
+    }
+
 /****** Populaires ***********/
+
+
 .populaires {
-    width: 32%;
+    width: 32%;  
 }
 
-.populaires-title {
+.populaires__title {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
 
-.populaires-cards .card {
-    display: flex;
-    margin-top: 33px;
-}
+/****** Activités ***********/
 
-.populaires-cards img {
-    width: 33%;
-    height: 136px;
-    border-top-left-radius: 20px;
-    border-bottom-left-radius: 20px;
-}
 
-.populaires-cards .card-content {
-    width: 67%;
-    padding-left: 15px;
+.city-activities {
+  padding: 30px 30px;
+}
+.city-activities__cards {
     display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    box-sizing: border-box;
+    gap: 30px;
 }
 
-.populaires-cards .card-title {
-    margin-top: 10px;
-    margin-bottom: 4px;
+.city-activities__card {
+    padding: 0;
 }
 
-.populaires-cards .card-subtitle {
-    margin: 0;
-}
+/****** Footer ***********/
 
-.populaires-cards .card-rating {
-    margin-bottom: 5px;
+.footer {
+    background-color: var(--main-bg-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    padding: 20px 15px;
 }
 
+.footer__section {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    gap: 15px;
+}
 
 
 
@@ -137,26 +447,85 @@ body {
         margin-top: 50px;
     }
 
-    .populaires-cards {
+    .populaires__cards {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
     }
 
-    .populaires-cards .card {
+    .populaires__cards .card {
         width: 30%;
     }
 
-    .populaires-cards .card-title {
+    .card__title {
         font-size: 14px;
     }
 
-    .populaires-cards .card-subtitle {
+    .card__subtitle {
         font-size: 13px;
     }
 }
 
 /* Small devices (phones, less than 768px) */
 @media (max-width: 767.98px) {
-    /* ... */
+
+    
+
+    .main {
+        padding: 0;
+        width: 100vw;
+    }
+
+    .city-activities__cards {
+        flex-direction: column;
+    }
+    
+
+    
+
+    .hebergements-and-populaires {
+        flex-direction: column-reverse;
+    }
+
+    .hebergements {
+        background-color: #fff  !important;
+    }
+
+    .hebergements-and-populaires section  {
+        border-radius: 0;
+    }
+
+    .populaires__cards {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .populaires {
+        margin-top: 0;
+    }
+
+    .populaires__cards .card {
+        width: 100%;
+    }
+
+    .hebergements__cards {
+        grid-template-columns: 1fr;
+    }
+
+    .city-activities__cards {
+        gap: 0px;
+        margin-top: 0;
+    }
+
+    .footer {
+        flex-direction: column;
+        padding: 30px 30px;
+    }
+
+    .footer__section:not(:nth-child(2)) {
+        margin: 50px 0;
+    }
+    
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 2f90d086..38281d9e 100644
--- a/index.html
+++ b/index.html
@@ -15,27 +15,189 @@
 </head>
 
 <body>
-    <div class="main-container">
-        <header></header>
+    <div class="main">
+        <header class="header">
+            <div class="header__logo">
+                <img src="./images/logo/Booki.png" alt="" class="header__logo__img">
+            </div>
+            <nav class="header__nav">
+                <div class="header__nav__button">
+                    <a href="#" class="header__nav__link nav__link">Hébergements</a>
+                    <div class="header__nav__line"></div>
+                </div>
+                <div class="header__nav__button">
+
+                    <a href="#" class="header__nav__link nav__link">Activités</a>
+                    <div class="header__nav__line"></div>
+                </div>
+            </nav>
+
+
+        </header>
         <main>
+
+<!-- HERO SECTION -->
+
+            <div class="hero">
+                <section class="hero__headline">
+                    <h1 class="title hero__headline__title">Trouvez votre hébergement pour des vacances de rêve</h1>
+                    <p class="lead__text">En plein centre-ville ou en pleine nature</p>
+                </section>
+                
+                    <form action="" method="" class="hero__searchbar__form">
+                            <i class="fa-solid fa-location-dot hero__searchbar__icon"></i>
+                            <input type="text" id="city" name="city_name" value="Marseille, France"
+                            class="hero__searchbar__input">
+                            <button class="hero__searchbar__btn"></i>Rechercher</button><i class="fa-solid fa-magnifying-glass hero__searchbar__icon--blue"></i>
+                    </form>
+           
+                <section class="hero__filter">
+                    <h3 class="hero__filter__title">
+                        Filtres
+                    </h3>
+                    <div class="hero__filter__buttons">
+                        <button class="hero__filter__btn"><i class="fa-solid fa-money-bill-wave hero__filter__icon"></i>&#201conomique</button>
+                        <button class="hero__filter__btn"><i class="fa-solid fa-person hero__filter__icon"></i>Familial</button>
+                        <button class="hero__filter__btn"><i class="fa-solid fa-heart hero__filter__icon"></i>Romantique</button>
+                        <button class="hero__filter__btn"><i class="fa-solid fa-fire hero__filter__icon"></i>Nos pépites</button>
+                    </div>
+                </section>
+                <article class="hero__info">
+                    <i class="fa-solid fa-info hero__info__icon"></i>
+                    <p class="lead__text">Plus de 500 logements sont disponibles dans cette ville</p>
+                </article>
+
+            </div>
+
+<!-- HEBERGEMENTS ET POPULAIRES -->
+
             <div class="hebergements-and-populaires">
                 <section class="hebergements">
-
+                        <h2 class="title">Hébergements à Marseille</h2>
+                    <div class="hebergements__cards">
+                        <article class="card card--col">
+                            <img src="./images/hebergements/fred-kleber.jpg" alt="Image de la chambre fenêtre ouverte" class="cards__img--col">
+                            <div class="card__content">
+                                <div class="card-txt">
+                                    <h3 class="lead__text ">Hôtel du port</h3>
+                                    <p class="card__subtitle">Nuit à partir de 52<span class="euro">€</span></p>
+                                </div>
+                                <div class="card__rating">
+                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
+                                    <span class="sr-only">Note de 4 sur 5</span>
+                                </div>
+                            </div>
+                        </article>
+                        <article class="card card--col">
+                            <img src="./images/hebergements/marcus-loke.jpg" alt="Image de la chambre d'hôtel montrant un lit" class="cards__img--col">
+                            <div class="card__content">
+                                <div class="card-txt">
+                                    <h3 class="lead__text ">Hôtel Le soleil du matin</h3>
+                                    <p class="card__subtitle">Nuit à partir de 128<span class="euro">€</span></p>
+                                </div>
+                                <div class="card__rating">
+                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
+                                    <span class="sr-only">Note de 4 sur 5</span>
+                                </div>
+                            </div>
+                        </article>
+                        <article class="card card--col">
+                            <img src="./images/hebergements/emile-guillemot.jpg" alt="Image de la chambre d'hôtel montrant un lit" class="cards__img--col">
+                            <div class="card__content">
+                                <div class="card-txt">
+                                    <h3 class="lead__text ">Hôtel Le soleil du matin</h3>
+                                    <p class="card__subtitle">Nuit à partir de 128<span class="euro">€</span></p>
+                                </div>
+                                <div class="card__rating">
+                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
+                                    <span class="sr-only">Note de 4 sur 5</span>
+                                </div>
+                            </div>
+                        </article>
+                        <article class="card card--col">
+                            <img src="./images/hebergements/emile-guillemot.jpg" alt="Image de la chambre d'hôtel montrant un lit" class="cards__img--col">
+                            <div class="card__content">
+                                <div class="card-txt">
+                                    <h3 class="lead__text ">Hôtel Le soleil du matin</h3>
+                                    <p class="card__subtitle">Nuit à partir de 128<span class="euro">€</span></p>
+                                </div>
+                                <div class="card__rating">
+                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
+                                    <span class="sr-only">Note de 4 sur 5</span>
+                                </div>
+                            </div>
+                        </article>
+                        <article class="card card--col">
+                            <img src="./images/hebergements/emile-guillemot.jpg" alt="Image de la chambre d'hôtel montrant un lit" class="cards__img--col">
+                            <div class="card__content">
+                                <div class="card-txt">
+                                    <h3 class="lead__text ">Hôtel Le soleil du matin</h3>
+                                    <p class="card__subtitle">Nuit à partir de 128<span class="euro">€</span></p>
+                                </div>
+                                <div class="card__rating">
+                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
+                                    <span class="sr-only">Note de 4 sur 5</span>
+                                </div>
+                            </div>
+                        </article>
+                        <article class="card card--col">
+                            <img src="./images/hebergements/emile-guillemot.jpg" alt="Image de la chambre d'hôtel montrant un lit" class="cards__img--col">
+                            <div class="card__content">
+                                <div class="card-txt">
+                                    <h3 class="lead__text ">Hôtel Le soleil du matin</h3>
+                                    <p class="card__subtitle">Nuit à partir de 128<span class="euro">€</span></p>
+                                </div>
+                                <div class="card__rating">
+                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
+                                    <span class="sr-only">Note de 4 sur 5</span>
+                                </div>
+                            </div>
+                        </article>                       
+                    </div>
+                    <div class="hebergements__see-more">
+                        <p class="lead__text--bold">
+                            Afficher Plus
+                        </p>
+                    </div>
                 </section>
                 <section class="populaires">
-                    <div class="populaires-title">
-                        <h2 class="section-title">Les plus populaires</h2>
+                    <div class="populaires__title">
+                        <h2 class="title">Les plus populaires</h2>
                         <i class="fa-solid fa-chart-line" aria-hidden="true"></i>
                     </div>
-                    <div class="populaires-cards">
+                    <div class="populaires__cards">
                         <article class="card">
-                            <img src="./images/hebergements/emile-guillemot.jpg" alt="Image de la chambre d'hôtel montrant un lit">
-                            <div class="card-content">
+                            <img src="./images/hebergements/emile-guillemot.jpg" alt="Image de la chambre d'hôtel montrant un lit" class="cards__img">
+                            <div class="card__content">
                                 <div class="card-txt">
-                                    <h3 class="card-title">Hôtel Le soleil du matin</h3>
-                                    <p class="card-subtitle">Nuit à partir de 128<span class="euro">€</span></p>
+                                    <h3 class="lead__text ">Hôtel Le soleil du matin</h3>
+                                    <p class="card__subtitle">Nuit à partir de 128<span class="euro">€</span></p>
                                 </div>
-                                <div class="card-rating">
+                                <div class="card__rating">
                                     <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
                                     <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
                                     <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
@@ -46,11 +208,12 @@ <h3 class="card-title">Hôtel Le soleil du matin</h3>
                             </div>
                         </article>
                         <article class="card">
-                            <img src="./images/hebergements/aw-creative.jpg" alt="Image de la chambre d'hôtel montrant un lit">
-                            <div class="card-content">
+                            <img src="./images/hebergements/aw-creative.jpg" alt="Image de la chambre d'hôtel montrant un lit"
+                            class="cards__img">
+                            <div class="card__content">
                                 <div class="card-txt">
-                                    <h3 class="card-title">Chambres d’hôtes Au cœur de l’eau</h3>
-                                    <p class="card-subtitle">Nuit à partir de 71<span class="euro">€</span></p>
+                                    <h3 class="lead__text ">Chambres d’hôtes Au cœur de l’eau</h3>
+                                    <p class="card__subtitle">Nuit à partir de 71<span class="euro">€</span></p>
                                 </div>
                                 <div class="card-rating">
                                     <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
@@ -63,11 +226,12 @@ <h3 class="card-title">Chambres d’hôtes Au cœur de l’eau</h3>
                             </div>
                         </article>
                         <article class="card">
-                            <img src="./images/hebergements/febrian-zakaria2.jpg" alt="Image de la chambre d'hôtel montrant un lit">
-                            <div class="card-content">
+                            <img src="./images/hebergements/febrian-zakaria2.jpg" alt="Image de la chambre d'hôtel montrant un lit"
+                            class="cards__img">
+                            <div class="card__content">
                                 <div class="card-txt">
-                                    <h3 class="card-title">Hôtel Bleu et Blanc</h3>
-                                    <p class="card-subtitle">Nuit à partir de 68<span class="euro">€</span></p>
+                                    <h3 class="lead__text">Hôtel Bleu et Blanc</h3>
+                                    <p class="card__subtitle">Nuit à partir de 68<span class="euro">€</span></p>
                                 </div>
                                 <div class="card-rating">
                                     <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
@@ -82,8 +246,49 @@ <h3 class="card-title">Hôtel Bleu et Blanc</h3>
                     </div>
                 </section>
             </div>
+            <div class="city-activities">
+                <h2 class="title">Activités à Marseille</h2>
+                <section class="city-activities__cards">
+                    <article class="card city-activities__card card--col">
+                        <img src="./images/activites/reno-laithienne.jpg" alt="" class="cards__img--col">
+                        <div class="card__content">
+                            <p class="lead__text card__title">Vieux-Port</p>
+                        </div>
+
+                    </article>
+                    <article class="card city-activities__card card--col">
+                        <img src="./images/activites/reno-laithienne.jpg" alt="" class="cards__img--col">
+                        <p class="lead__text card__title">Vieux-Port</p>
+                    </article>
+                    <article class="card city-activities__card card--col">
+                        <img src="./images/activites/reno-laithienne.jpg" alt="" class="cards__img--col">
+                        <p class="lead__text card__title">Vieux-Port</p>
+                    </article>
+                    <article class="card city-activities__card card--col">
+                        <img src="./images/activites/reno-laithienne.jpg" alt="" class="cards__img--col">
+                        <p class="lead__text card__title">Vieux-Port</p>
+                    </article>
+                </section>
+            </div>
         </main>
-        <footer></footer>
+        <footer class="footer">
+            <section class="footer__section">
+                <h3 class="lead__text--bold">&Agrave; propos</h3>
+                <a href="#" class="nav__link">Fonctionnement du site</a>
+                <a href="#" class="nav__link">Consitions générales</a>
+                <a href="#" class="nav__link">Données et confidentialité</a>
+            </section>
+            <section class="footer__section">
+                <h3>Nos hébergements</h3>
+                <a href="#" class="nav__link">Charte qualité</a>
+                <a href="#" class="nav__link">Proposer votre hôtel</a>
+            </section>
+            <section class="footer__section">
+                <h3>Assistance</h3>
+                <a href="#" class="nav__link">Centre d'aide</a>
+                <a href="#" class="nav__link">Nous contacter</a>
+            </section>
+        </footer>
     </div>
 </body>
 

From 103b8268447409460f4dc6062dce3b27db464f1d Mon Sep 17 00:00:00 2001
From: Laurent Dlc <laurentdelacalle@hotmail.com>
Date: Fri, 16 Jun 2023 08:34:10 +0200
Subject: [PATCH 2/5] Final Version

---
 css/style.css | 263 ++++++++++++++++++++++++++------------------------
 index.html    | 107 ++++++++++----------
 2 files changed, 193 insertions(+), 177 deletions(-)

diff --git a/css/style.css b/css/style.css
index 347cec3c..140cac1f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -29,7 +29,7 @@ body {
     padding: 5px;
     filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1));
     display: flex;
-    margin-top: 33px;
+    width: 100%;
 }
 
 .cards__img {
@@ -40,6 +40,19 @@ body {
     object-fit: cover;
 }
 
+.card--col {
+    flex-direction: column;
+    gap: 8px;
+}
+
+.cards__img--col {
+    width: 100%;
+    height: 136px;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+    object-fit: cover;
+}
+
 .card__title {
     margin : 20px 19px;
     font-weight: 700;
@@ -62,32 +75,18 @@ body {
     margin-bottom: 5px;
 }
 
-
-.card--col {
-    flex-direction: column;
-    gap: 8px;
-}
-
-.cards__img--col {
-    width: 100%;
-    height : clamp(200px, 7vw, 450px);
-    border-top-left-radius: 20px;
-    border-top-right-radius: 20px;
-    object-fit: cover;
-}
-
 .euro {
     font-weight: 700;
 }
 
-.neutralStar {
-    color: var(--main-bg-color);
+.neutral-star {
+    color: var(--main-bg-color) !important;
 }
 
 .title {
     font-weight: 700;
     font-size: 22px;
-    margin: 0;
+    margin-bottom: 33px;
 }
 
 .lead__text {
@@ -104,6 +103,26 @@ body {
     color: #000;
 }
 
+/****** General Media queries ***********/
+
+/* Medium devices (tablets, less/equal than 1024px) */
+@media (max-width: 1024px) {
+    .card__title {
+        font-size: 14px;
+    }
+
+    .card__subtitle {
+        font-size: 13px;
+    }
+}
+
+/* Small devices (phones, less than 768px) */
+@media (max-width: 767.98px) {
+    .main {
+        padding: 0;
+        width: 100vw;
+    }
+}
 
 /****** Header ***********/
 
@@ -389,143 +408,139 @@ body {
     width: 32%;  
 }
 
-.populaires__title {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-/****** Activités ***********/
-
-
-.city-activities {
-  padding: 30px 30px;
-}
-.city-activities__cards {
-    display: flex;
-    gap: 30px;
-}
-
-.city-activities__card {
-    padding: 0;
-}
-
-/****** Footer ***********/
-
-.footer {
-    background-color: var(--main-bg-color);
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    padding: 20px 15px;
-}
-
-.footer__section {
+.populaires__cards {
     display: flex;
     flex-direction: column;
-    flex: 1;
-    gap: 15px;
+    gap: 30px;
 }
 
-
-
-/* Le code ci-dessous correspond à la version responsive uniquement */
-
-/****** Media queries ***********/
-/* Medium devices (tablets, less/equal than 1024px) */
-@media (max-width: 1024px) {
-    .hebergements-and-populaires {
-        flex-direction: column;
-    }
-
-    .hebergements {
-        width: 100%;
-    }
-
-    .populaires {
-        width: 100%;
-        margin-top: 50px;
-    }
-
-    .populaires__cards {
+    .populaires__title {
         display: flex;
-        flex-direction: row;
         justify-content: space-between;
+        align-items: baseline;
     }
 
-    .populaires__cards .card {
-        width: 30%;
-    }
+        .fa-star {
+            color: var(--main-color);
+        }
 
-    .card__title {
-        font-size: 14px;
-    }
+        .card-rating__icon {
+            color: var(--main-color);
+        }
 
-    .card__subtitle {
-        font-size: 13px;
+/****** Hébergements et populaires Media queries ***********/
+/* Medium devices (tablets, less/equal than 1024px) */
+
+@media (max-width: 1024px) {
+        .hebergements-and-populaires {
+            flex-direction: column;
+        }
+        
+        .hebergements {
+            width: 100%;
+        }
+        
+        .populaires {
+            width: 100%;
+            margin-top: 50px;
+        }
+        
+        .populaires__cards {
+            flex-direction: row;
+            gap: 20px;
+        }
+        
+        .populaires__cards .card {
+            width: 30%;
+        }
     }
-}
 
 /* Small devices (phones, less than 768px) */
-@media (max-width: 767.98px) {
 
+@media (max-width: 767.98px) {
+        .hebergements-and-populaires {
+            flex-direction: column-reverse;
+        }
     
+        .hebergements {
+            background-color: #fff  !important;
+        }
 
-    .main {
-        padding: 0;
-        width: 100vw;
-    }
-
-    .city-activities__cards {
-        flex-direction: column;
-    }
+        .hebergements__see-more {
+            padding: 15px;
+        }
     
-
+        .hebergements-and-populaires section  {
+            border-radius: 0;
+        }
     
-
-    .hebergements-and-populaires {
-        flex-direction: column-reverse;
+        .populaires {
+            margin-top: 0;
+        }
+    
+        .populaires__cards .card {
+            width: 100%;
+        }
+    
+        .hebergements__cards {
+            grid-template-columns: 1fr;
+            gap: 15px;
+        }
     }
 
-    .hebergements {
-        background-color: #fff  !important;
-    }
+/****** Activités ***********/
 
-    .hebergements-and-populaires section  {
-        border-radius: 0;
-    }
 
-    .populaires__cards {
+.city-activities {
+  padding: 30px;
+  margin-bottom: 35px;
+}
+    .city-activities__cards {
         display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        align-items: center;
+        gap: 30px;
     }
 
-    .populaires {
-        margin-top: 0;
-    }
+        .city-activities__card {
+            padding: 0;
+        }
 
-    .populaires__cards .card {
-        width: 100%;
-    }
+/****** Activités Media queries ***********/
+/* Small devices (phones, less than 768px) */
 
-    .hebergements__cards {
-        grid-template-columns: 1fr;
+@media (max-width: 767.98px) {
+        .city-activities__cards, .populaires__cards {
+            flex-direction: column;
+            gap: 15px;
+        }
     }
 
-    .city-activities__cards {
-        gap: 0px;
-        margin-top: 0;
-    }
+/****** Footer ***********/
+
+.footer {
+    background-color: var(--main-bg-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    padding: 20px 15px;
+}
 
-    .footer {
+    .footer__section {
+        display: flex;
         flex-direction: column;
-        padding: 30px 30px;
+        flex: 1;
+        gap: 15px;
     }
 
-    .footer__section:not(:nth-child(2)) {
-        margin: 50px 0;
-    }
-    
+/****** Footer Media queries ***********/
+/* Small devices (phones, less than 768px) */
+
+@media (max-width: 767.98px) {
+        .footer {
+            flex-direction: column;
+            padding: 30px 30px;
+        }
+
+        .footer__section:not(:first-child) {
+            margin-top: 50px
+        }
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 38281d9e..ae9fcc24 100644
--- a/index.html
+++ b/index.html
@@ -44,11 +44,11 @@ <h1 class="title hero__headline__title">Trouvez votre hébergement pour des vaca
                     <p class="lead__text">En plein centre-ville ou en pleine nature</p>
                 </section>
                 
-                    <form action="" method="" class="hero__searchbar__form">
+                    <form class="hero__searchbar__form">
                             <i class="fa-solid fa-location-dot hero__searchbar__icon"></i>
                             <input type="text" id="city" name="city_name" value="Marseille, France"
                             class="hero__searchbar__input">
-                            <button class="hero__searchbar__btn"></i>Rechercher</button><i class="fa-solid fa-magnifying-glass hero__searchbar__icon--blue"></i>
+                            <button class="hero__searchbar__btn">Rechercher</button><i class="fa-solid fa-magnifying-glass hero__searchbar__icon--blue"></i>
                     </form>
            
                 <section class="hero__filter">
@@ -56,16 +56,16 @@ <h3 class="hero__filter__title">
                         Filtres
                     </h3>
                     <div class="hero__filter__buttons">
-                        <button class="hero__filter__btn"><i class="fa-solid fa-money-bill-wave hero__filter__icon"></i>&#201conomique</button>
+                        <button class="hero__filter__btn"><i class="fa-solid fa-money-bill-wave hero__filter__icon"></i>&Eacute;conomique</button>
                         <button class="hero__filter__btn"><i class="fa-solid fa-person hero__filter__icon"></i>Familial</button>
                         <button class="hero__filter__btn"><i class="fa-solid fa-heart hero__filter__icon"></i>Romantique</button>
                         <button class="hero__filter__btn"><i class="fa-solid fa-fire hero__filter__icon"></i>Nos pépites</button>
                     </div>
                 </section>
-                <article class="hero__info">
+                <div class="hero__info">
                     <i class="fa-solid fa-info hero__info__icon"></i>
                     <p class="lead__text">Plus de 500 logements sont disponibles dans cette ville</p>
-                </article>
+                </div>
 
             </div>
 
@@ -96,8 +96,8 @@ <h3 class="lead__text ">Hôtel du port</h3>
                             <img src="./images/hebergements/marcus-loke.jpg" alt="Image de la chambre d'hôtel montrant un lit" class="cards__img--col">
                             <div class="card__content">
                                 <div class="card-txt">
-                                    <h3 class="lead__text ">Hôtel Le soleil du matin</h3>
-                                    <p class="card__subtitle">Nuit à partir de 128<span class="euro">€</span></p>
+                                    <h3 class="lead__text ">Auberge La Canebière</h3>
+                                    <p class="card__subtitle">Nuit à partir de 25<span class="euro">€</span></p>
                                 </div>
                                 <div class="card__rating">
                                     <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
@@ -110,11 +110,11 @@ <h3 class="lead__text ">Hôtel Le soleil du matin</h3>
                             </div>
                         </article>
                         <article class="card card--col">
-                            <img src="./images/hebergements/emile-guillemot.jpg" alt="Image de la chambre d'hôtel montrant un lit" class="cards__img--col">
+                            <img src="./images/hebergements/reisetopia.jpg" alt="Image de la chambre d'hôtel montrant un lit" class="cards__img--col">
                             <div class="card__content">
                                 <div class="card-txt">
-                                    <h3 class="lead__text ">Hôtel Le soleil du matin</h3>
-                                    <p class="card__subtitle">Nuit à partir de 128<span class="euro">€</span></p>
+                                    <h3 class="lead__text ">Hôtel Les mouettes</h3>
+                                    <p class="card__subtitle">Nuit à partir de 76<span class="euro">€</span></p>
                                 </div>
                                 <div class="card__rating">
                                     <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
@@ -127,11 +127,11 @@ <h3 class="lead__text ">Hôtel Le soleil du matin</h3>
                             </div>
                         </article>
                         <article class="card card--col">
-                            <img src="./images/hebergements/emile-guillemot.jpg" alt="Image de la chambre d'hôtel montrant un lit" class="cards__img--col">
+                            <img src="./images/hebergements/annie-spratt.jpg" alt="Image de la chambre d'hôtel montrant un lit" class="cards__img--col">
                             <div class="card__content">
                                 <div class="card-txt">
-                                    <h3 class="lead__text ">Hôtel Le soleil du matin</h3>
-                                    <p class="card__subtitle">Nuit à partir de 128<span class="euro">€</span></p>
+                                    <h3 class="lead__text">Hôtel de la mer</h3>
+                                    <p class="card__subtitle">Nuit à partir de 46<span class="euro">€</span></p>
                                 </div>
                                 <div class="card__rating">
                                     <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
@@ -144,11 +144,11 @@ <h3 class="lead__text ">Hôtel Le soleil du matin</h3>
                             </div>
                         </article>
                         <article class="card card--col">
-                            <img src="./images/hebergements/emile-guillemot.jpg" alt="Image de la chambre d'hôtel montrant un lit" class="cards__img--col">
+                            <img src="./images/hebergements/nicate-lee.jpg" alt="Image de la chambre d'hôtel montrant un lit" class="cards__img--col">
                             <div class="card__content">
                                 <div class="card-txt">
-                                    <h3 class="lead__text ">Hôtel Le soleil du matin</h3>
-                                    <p class="card__subtitle">Nuit à partir de 128<span class="euro">€</span></p>
+                                    <h3 class="lead__text ">Auberge Le Panier</h3>
+                                    <p class="card__subtitle">Nuit à partir de 23<span class="euro">€</span></p>
                                 </div>
                                 <div class="card__rating">
                                     <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
@@ -161,11 +161,11 @@ <h3 class="lead__text ">Hôtel Le soleil du matin</h3>
                             </div>
                         </article>
                         <article class="card card--col">
-                            <img src="./images/hebergements/emile-guillemot.jpg" alt="Image de la chambre d'hôtel montrant un lit" class="cards__img--col">
+                            <img src="./images/hebergements/febrian-zakaria.jpg" alt="Image de la chambre d'hôtel montrant un lit" class="cards__img--col">
                             <div class="card__content">
                                 <div class="card-txt">
-                                    <h3 class="lead__text ">Hôtel Le soleil du matin</h3>
-                                    <p class="card__subtitle">Nuit à partir de 128<span class="euro">€</span></p>
+                                    <h3 class="lead__text ">Hôtel chez Amina</h3>
+                                    <p class="card__subtitle">Nuit à partir de 96<span class="euro">€</span></p>
                                 </div>
                                 <div class="card__rating">
                                     <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
@@ -187,7 +187,7 @@ <h3 class="lead__text ">Hôtel Le soleil du matin</h3>
                 <section class="populaires">
                     <div class="populaires__title">
                         <h2 class="title">Les plus populaires</h2>
-                        <i class="fa-solid fa-chart-line" aria-hidden="true"></i>
+                        <i class="fa-solid fa-chart-line populaires__title__icon" aria-hidden="true"></i>
                     </div>
                     <div class="populaires__cards">
                         <article class="card">
@@ -198,11 +198,11 @@ <h3 class="lead__text ">Hôtel Le soleil du matin</h3>
                                     <p class="card__subtitle">Nuit à partir de 128<span class="euro">€</span></p>
                                 </div>
                                 <div class="card__rating">
-                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
-                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
-                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
-                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
-                                    <i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-star " aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-star " aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-star " aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-star " aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-star neutral-starn" aria-hidden="true"></i>
                                     <span class="sr-only">Note de 4 sur 5</span>
                                 </div>
                             </div>
@@ -216,11 +216,11 @@ <h3 class="lead__text ">Chambres d’hôtes Au cœur de l’eau</h3>
                                     <p class="card__subtitle">Nuit à partir de 71<span class="euro">€</span></p>
                                 </div>
                                 <div class="card-rating">
-                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
-                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
-                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
-                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
-                                    <i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-starn" aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-star " aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-star " aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-star " aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-star neutral-star " aria-hidden="true"></i>
                                     <span class="sr-only">Note de 4 sur 5</span>
                                 </div>
                             </div>
@@ -234,11 +234,11 @@ <h3 class="lead__text">Hôtel Bleu et Blanc</h3>
                                     <p class="card__subtitle">Nuit à partir de 68<span class="euro">€</span></p>
                                 </div>
                                 <div class="card-rating">
-                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
-                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
-                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
-                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
-                                    <i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-star " aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-star " aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-star " aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-star " aria-hidden="true"></i>
+                                    <i class="fa-xs fa-solid fa-star neutral-star " aria-hidden="true"></i>
                                     <span class="sr-only">Note de 4 sur 5</span>
                                 </div>
                             </div>
@@ -246,30 +246,31 @@ <h3 class="lead__text">Hôtel Bleu et Blanc</h3>
                     </div>
                 </section>
             </div>
-            <div class="city-activities">
+
+            <section class="city-activities">
                 <h2 class="title">Activités à Marseille</h2>
-                <section class="city-activities__cards">
-                    <article class="card city-activities__card card--col">
+                <div class="city-activities__cards">
+                    <div class="card city-activities__card card--col">
                         <img src="./images/activites/reno-laithienne.jpg" alt="" class="cards__img--col">
                         <div class="card__content">
                             <p class="lead__text card__title">Vieux-Port</p>
                         </div>
 
-                    </article>
-                    <article class="card city-activities__card card--col">
-                        <img src="./images/activites/reno-laithienne.jpg" alt="" class="cards__img--col">
-                        <p class="lead__text card__title">Vieux-Port</p>
-                    </article>
-                    <article class="card city-activities__card card--col">
-                        <img src="./images/activites/reno-laithienne.jpg" alt="" class="cards__img--col">
-                        <p class="lead__text card__title">Vieux-Port</p>
-                    </article>
-                    <article class="card city-activities__card card--col">
-                        <img src="./images/activites/reno-laithienne.jpg" alt="" class="cards__img--col">
-                        <p class="lead__text card__title">Vieux-Port</p>
-                    </article>
-                </section>
-            </div>
+                    </div>
+                    <div class="card city-activities__card card--col">
+                        <img src="./images/activites/paul-hermann.jpg" alt="" class="cards__img--col">
+                        <p class="lead__text card__title">Fort de Pomègues</p>
+                    </div>
+                    <div class="card city-activities__card card--col">
+                        <img src="./images/activites/kilyan-sockalingum.jpg" alt="" class="cards__img--col">
+                        <p class="lead__text card__title">Parc national des Calanques</p>
+                    </div>
+                    <div class="card city-activities__card card--col">
+                        <img src="./images/activites/florian-wehde.jpg" alt="" class="cards__img--col">
+                        <p class="lead__text card__title">Notre-Dame-de-la-Garde</p>
+                    </div>
+                </div>
+            </section>
         </main>
         <footer class="footer">
             <section class="footer__section">

From 3950c13c4164c1b04cd9562ba3034169b5d377a2 Mon Sep 17 00:00:00 2001
From: Laurent De La Calle <laurentdelacalle@hotmail.com>
Date: Fri, 30 Jun 2023 22:07:42 +0200
Subject: [PATCH 3/5] Update README.md

---
 README.md | 50 +++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 49 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index cf39555f..59c5f956 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,49 @@
-# booki-starter-pack
+![Booki](/images/logo/Booki@3x.png)
+# Project for openClassRoom #3
+
+## Presentation
+
+Booki is a french start-up. As a Junior dveloper, i have in charge to develop a website who allows user to find accomodations or discover activities in the city of their choice !
+I was responsible for integrating the interface of the website using HTML & CSS. To achieve this i worked in collaboration with Sarah the CTO and Loïc, the UI Designer.
+
+Vous êtes chargé d'intégrer l'interface du site avec du code HTML et CSS. Pour cela, vous travaillez en étroite collaboration avec Sarah, la CTO, et Loïc, l’UI designer. 
+
+## Process.
+
+I first started by studying all the mock-up Loîc provided me.
+
+![Capture d'écran 2023-06-30 213126](https://github.com/Kalow26/booki/assets/21316407/96389a8b-0e27-4ed8-9035-390ff90dbe07)
+
+I had to develop the *Mobile*, *Tablet* and *Desktop* version of the site 👍
+
+### The Website is Divided in 3 sections
+
+1. the Navbar
+2. Hero Section
+3. The accomodations and Popular Section
+4. The activities available in the city section
+5. The footer
+
+The main objective of the project was to improve my HTML semantic, and work with basic CSS.
+
+<mark>I first started with the desktop version</mark>
+![Capture d'écran 2023-06-30 214614](https://github.com/Kalow26/booki/assets/21316407/6504eecd-daec-49f6-81b2-b39de9ca1148)
+
+<mark>the tablet version</mark>
+![Capture d'écran 2023-06-30 215401](https://github.com/Kalow26/booki/assets/21316407/eccd6248-ed2d-4b3d-8308-8ce60c5ee8a7)
+
+<mark>the mobile version</mark>.
+![Capture d'écran 2023-06-30 215510](https://github.com/Kalow26/booki/assets/21316407/f097bafb-89d3-45e0-81c4-0646027dca6c)
+
+### Code
+
+I tried my best to use the best HTML tags and comment the most my code. My goal was to have the cleanest code and start working with good practicies.
+
+I use the BEM methodology for the CSS
+![Capture d'écran 2023-06-30 215840](https://github.com/Kalow26/booki/assets/21316407/eeb680eb-a1fb-4371-ba1f-59203a8ad8a6)
+
+This is a great way to organise your CSS properly, but i think this method is better in use with SCSS.
+By the way it was a good project to develop, i'm pretty happy with the result.
+And the final version is completely responsive and match perfectly all the mockups !
+
+Hope your enjoy, and see you for my next Project 👌

From 13a1b1bce0aebc39dd5595c8efb6e6d862b1497e Mon Sep 17 00:00:00 2001
From: Laurent De La Calle <laurentdelacalle@hotmail.com>
Date: Sun, 16 Jul 2023 22:15:48 +0200
Subject: [PATCH 4/5] clean HTML and CSS

---
 README.md     |  2 +-
 css/style.css | 47 +++++++++++---------------
 index.html    | 92 +++++++++++++++++++++++++++++++--------------------
 3 files changed, 77 insertions(+), 64 deletions(-)

diff --git a/README.md b/README.md
index cf39555f..afa4eee0 100644
--- a/README.md
+++ b/README.md
@@ -1 +1 @@
-# booki-starter-pack
+Welcome to Booki !
diff --git a/css/style.css b/css/style.css
index 140cac1f..42eaeb61 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,15 +1,16 @@
 /****** General ***********/
+:root {
+    --main-color: #0065FC;
+    --main-bg-color: #F2F2F2;
+    --filter-bg-color: #DEEBFF;
+}
+
 * {
     font-family: 'Raleway', sans-serif;
     margin: 0;
     padding: 0;
 }
 
-:root {
-    --main-color: #0065FC;
-    --main-bg-color: #F2F2F2;
-    --filter-bg-color: #DEEBFF;
-}
 
 body {
     display: flex;
@@ -68,8 +69,6 @@ body {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    box-sizing: border-box;
-    overflow: hidden;
 }
 .card__rating {
     margin-bottom: 5px;
@@ -83,7 +82,7 @@ body {
     color: var(--main-bg-color) !important;
 }
 
-.title {
+h1, h2 {
     font-weight: 700;
     font-size: 22px;
     margin-bottom: 33px;
@@ -98,11 +97,15 @@ body {
     font-weight: 700;
 }
 
-.nav__link {
+a {
     text-decoration: none;
     color: #000;
 }
 
+ul {
+    list-style: none;
+}
+
 /****** General Media queries ***********/
 
 /* Medium devices (tablets, less/equal than 1024px) */
@@ -133,14 +136,12 @@ body {
 }
 
     .header__logo {
-        padding: 30px 0;
-    }
-
-    .header__logo__img {
         width: 61.09px;
         height: 19px;
+        padding: 30px 0;
     }
 
+
 .header__nav {
     display: flex;
     gap: 68px;
@@ -178,11 +179,6 @@ body {
 
 @media (max-width: 767.98px) {
 
-    .nav__link {
-        padding-top: 0;
-        padding-bottom: 15px;
-    }
-
     .header {
         align-items: center;
         flex-direction: column;
@@ -192,7 +188,6 @@ body {
         width: 100%;
         display:grid;
         grid-template-columns: 1fr 1fr;
-        gap: 0;
     }
 
     .header__nav__link {
@@ -210,9 +205,8 @@ body {
     }
     
     .header__nav__line {
+        margin-top: 15px;
         width: 100%;
-        height: 2px;
-        background-color: var(--main-bg-color);
     }
 
 }
@@ -224,8 +218,7 @@ body {
     flex-direction: column;
     align-items: flex-start;
     gap: 35px;
-    margin-top: 30px;
-    margin-bottom: 35px;
+    margin-block: 30px 35px;
 }
 
     .hero__headline__title {
@@ -254,7 +247,6 @@ body {
         text-align: center;
         font-size: 18px;
         font-weight: 700;
-        user-select: text;
     }
 
     .hero__searchbar__input:focus {
@@ -267,7 +259,6 @@ body {
         border : none;
         color: var(--main-bg-color);
         font-size: 18px;
-        text-align: left;
         border-top-right-radius: 15px;
         border-bottom-right-radius: 15px;
         font-weight: 700;
@@ -417,7 +408,6 @@ body {
     .populaires__title {
         display: flex;
         justify-content: space-between;
-        align-items: baseline;
     }
 
         .fa-star {
@@ -528,7 +518,10 @@ body {
         display: flex;
         flex-direction: column;
         flex: 1;
-        gap: 15px;
+    }
+
+    .footer__section ul li {
+        margin-top: 15px;
     }
 
 /****** Footer Media queries ***********/
diff --git a/index.html b/index.html
index ae9fcc24..453fe629 100644
--- a/index.html
+++ b/index.html
@@ -17,17 +17,17 @@
 <body>
     <div class="main">
         <header class="header">
-            <div class="header__logo">
-                <img src="./images/logo/Booki.png" alt="" class="header__logo__img">
-            </div>
+            
+                <img src="./images/logo/Booki.png" alt="Logo du site Booki" class="header__logo">
+           
             <nav class="header__nav">
                 <div class="header__nav__button">
-                    <a href="#" class="header__nav__link nav__link">Hébergements</a>
+                    <a href="#" class="header__nav__link">Hébergements</a>
                     <div class="header__nav__line"></div>
                 </div>
                 <div class="header__nav__button">
 
-                    <a href="#" class="header__nav__link nav__link">Activités</a>
+                    <a href="#" class="header__nav__link">Activités</a>
                     <div class="header__nav__line"></div>
                 </div>
             </nav>
@@ -40,15 +40,15 @@
 
             <div class="hero">
                 <section class="hero__headline">
-                    <h1 class="title hero__headline__title">Trouvez votre hébergement pour des vacances de rêve</h1>
+                    <h1 class="hero__headline__title">Trouvez votre hébergement pour des vacances de rêve</h1>
                     <p class="lead__text">En plein centre-ville ou en pleine nature</p>
                 </section>
                 
                     <form class="hero__searchbar__form">
-                            <i class="fa-solid fa-location-dot hero__searchbar__icon"></i>
+                            <i class="fa-solid fa-location-dot hero__searchbar__icon" aria-hidden="true"></i>
                             <input type="text" id="city" name="city_name" value="Marseille, France"
                             class="hero__searchbar__input">
-                            <button class="hero__searchbar__btn">Rechercher</button><i class="fa-solid fa-magnifying-glass hero__searchbar__icon--blue"></i>
+                            <button class="hero__searchbar__btn">Rechercher</button><i class="fa-solid fa-magnifying-glass hero__searchbar__icon--blue" aria-hidden="true"></i>
                     </form>
            
                 <section class="hero__filter">
@@ -56,14 +56,14 @@ <h3 class="hero__filter__title">
                         Filtres
                     </h3>
                     <div class="hero__filter__buttons">
-                        <button class="hero__filter__btn"><i class="fa-solid fa-money-bill-wave hero__filter__icon"></i>&Eacute;conomique</button>
-                        <button class="hero__filter__btn"><i class="fa-solid fa-person hero__filter__icon"></i>Familial</button>
-                        <button class="hero__filter__btn"><i class="fa-solid fa-heart hero__filter__icon"></i>Romantique</button>
-                        <button class="hero__filter__btn"><i class="fa-solid fa-fire hero__filter__icon"></i>Nos pépites</button>
+                        <button class="hero__filter__btn"><i class="fa-solid fa-money-bill-wave hero__filter__icon" aria-hidden="true"></i>&Eacute;conomique</button>
+                        <button class="hero__filter__btn"><i class="fa-solid fa-person hero__filter__icon" aria-hidden="true"></i>Familial</button>
+                        <button class="hero__filter__btn"><i class="fa-solid fa-heart hero__filter__icon" aria-hidden="true"></i>Romantique</button>
+                        <button class="hero__filter__btn"><i class="fa-solid fa-fire hero__filter__icon" aria-hidden="true"></i>Nos pépites</button>
                     </div>
                 </section>
                 <div class="hero__info">
-                    <i class="fa-solid fa-info hero__info__icon"></i>
+                    <i class="fa-solid fa-info hero__info__icon" aria-hidden="true"></i>
                     <p class="lead__text">Plus de 500 logements sont disponibles dans cette ville</p>
                 </div>
 
@@ -73,10 +73,10 @@ <h3 class="hero__filter__title">
 
             <div class="hebergements-and-populaires">
                 <section class="hebergements">
-                        <h2 class="title">Hébergements à Marseille</h2>
+                        <h2>Hébergements à Marseille</h2>
                     <div class="hebergements__cards">
                         <article class="card card--col">
-                            <img src="./images/hebergements/fred-kleber.jpg" alt="Image de la chambre fenêtre ouverte" class="cards__img--col">
+                            <img src="./images/hebergements/fred-kleber.jpg" alt="Image de chambre d'hôtel" class="cards__img--col">
                             <div class="card__content">
                                 <div class="card-txt">
                                     <h3 class="lead__text ">Hôtel du port</h3>
@@ -93,7 +93,7 @@ <h3 class="lead__text ">Hôtel du port</h3>
                             </div>
                         </article>
                         <article class="card card--col">
-                            <img src="./images/hebergements/marcus-loke.jpg" alt="Image de la chambre d'hôtel montrant un lit" class="cards__img--col">
+                            <img src="./images/hebergements/marcus-loke.jpg" alt="Image de chambre d'hôtel" class="cards__img--col">
                             <div class="card__content">
                                 <div class="card-txt">
                                     <h3 class="lead__text ">Auberge La Canebière</h3>
@@ -110,7 +110,7 @@ <h3 class="lead__text ">Auberge La Canebière</h3>
                             </div>
                         </article>
                         <article class="card card--col">
-                            <img src="./images/hebergements/reisetopia.jpg" alt="Image de la chambre d'hôtel montrant un lit" class="cards__img--col">
+                            <img src="./images/hebergements/reisetopia.jpg" alt="Image de chambre d'hôtel" class="cards__img--col">
                             <div class="card__content">
                                 <div class="card-txt">
                                     <h3 class="lead__text ">Hôtel Les mouettes</h3>
@@ -127,7 +127,7 @@ <h3 class="lead__text ">Hôtel Les mouettes</h3>
                             </div>
                         </article>
                         <article class="card card--col">
-                            <img src="./images/hebergements/annie-spratt.jpg" alt="Image de la chambre d'hôtel montrant un lit" class="cards__img--col">
+                            <img src="./images/hebergements/annie-spratt.jpg" alt="Image de chambre d'hôtel" class="cards__img--col">
                             <div class="card__content">
                                 <div class="card-txt">
                                     <h3 class="lead__text">Hôtel de la mer</h3>
@@ -144,7 +144,7 @@ <h3 class="lead__text">Hôtel de la mer</h3>
                             </div>
                         </article>
                         <article class="card card--col">
-                            <img src="./images/hebergements/nicate-lee.jpg" alt="Image de la chambre d'hôtel montrant un lit" class="cards__img--col">
+                            <img src="./images/hebergements/nicate-lee.jpg" alt="Image de chambre d'hôtel" class="cards__img--col">
                             <div class="card__content">
                                 <div class="card-txt">
                                     <h3 class="lead__text ">Auberge Le Panier</h3>
@@ -161,7 +161,7 @@ <h3 class="lead__text ">Auberge Le Panier</h3>
                             </div>
                         </article>
                         <article class="card card--col">
-                            <img src="./images/hebergements/febrian-zakaria.jpg" alt="Image de la chambre d'hôtel montrant un lit" class="cards__img--col">
+                            <img src="./images/hebergements/febrian-zakaria.jpg" alt="IImage de chambre d'hôtel" class="cards__img--col">
                             <div class="card__content">
                                 <div class="card-txt">
                                     <h3 class="lead__text ">Hôtel chez Amina</h3>
@@ -186,12 +186,12 @@ <h3 class="lead__text ">Hôtel chez Amina</h3>
                 </section>
                 <section class="populaires">
                     <div class="populaires__title">
-                        <h2 class="title">Les plus populaires</h2>
-                        <i class="fa-solid fa-chart-line populaires__title__icon" aria-hidden="true"></i>
+                        <h2>Les plus populaires</h2>
+                        <i class="fa-solid fa-chart-line" aria-hidden="true"></i>
                     </div>
                     <div class="populaires__cards">
                         <article class="card">
-                            <img src="./images/hebergements/emile-guillemot.jpg" alt="Image de la chambre d'hôtel montrant un lit" class="cards__img">
+                            <img src="./images/hebergements/emile-guillemot.jpg" alt="Image de chambre d'hôtel" class="cards__img">
                             <div class="card__content">
                                 <div class="card-txt">
                                     <h3 class="lead__text ">Hôtel Le soleil du matin</h3>
@@ -208,7 +208,7 @@ <h3 class="lead__text ">Hôtel Le soleil du matin</h3>
                             </div>
                         </article>
                         <article class="card">
-                            <img src="./images/hebergements/aw-creative.jpg" alt="Image de la chambre d'hôtel montrant un lit"
+                            <img src="./images/hebergements/aw-creative.jpg" alt="Image de chambre d'hôtel"
                             class="cards__img">
                             <div class="card__content">
                                 <div class="card-txt">
@@ -226,7 +226,7 @@ <h3 class="lead__text ">Chambres d’hôtes Au cœur de l’eau</h3>
                             </div>
                         </article>
                         <article class="card">
-                            <img src="./images/hebergements/febrian-zakaria2.jpg" alt="Image de la chambre d'hôtel montrant un lit"
+                            <img src="./images/hebergements/febrian-zakaria2.jpg" alt="Image de chambre d'hôtel"
                             class="cards__img">
                             <div class="card__content">
                                 <div class="card-txt">
@@ -251,22 +251,22 @@ <h3 class="lead__text">Hôtel Bleu et Blanc</h3>
                 <h2 class="title">Activités à Marseille</h2>
                 <div class="city-activities__cards">
                     <div class="card city-activities__card card--col">
-                        <img src="./images/activites/reno-laithienne.jpg" alt="" class="cards__img--col">
+                        <img src="./images/activites/reno-laithienne.jpg" alt="photo du vieux port" class="cards__img--col">
                         <div class="card__content">
                             <p class="lead__text card__title">Vieux-Port</p>
                         </div>
 
                     </div>
                     <div class="card city-activities__card card--col">
-                        <img src="./images/activites/paul-hermann.jpg" alt="" class="cards__img--col">
+                        <img src="./images/activites/paul-hermann.jpg" alt="photo du port de promègues" class="cards__img--col">
                         <p class="lead__text card__title">Fort de Pomègues</p>
                     </div>
                     <div class="card city-activities__card card--col">
-                        <img src="./images/activites/kilyan-sockalingum.jpg" alt="" class="cards__img--col">
+                        <img src="./images/activites/kilyan-sockalingum.jpg" alt="Parc national des calanques" class="cards__img--col">
                         <p class="lead__text card__title">Parc national des Calanques</p>
                     </div>
                     <div class="card city-activities__card card--col">
-                        <img src="./images/activites/florian-wehde.jpg" alt="" class="cards__img--col">
+                        <img src="./images/activites/florian-wehde.jpg" alt="Notre dame de la garde" class="cards__img--col">
                         <p class="lead__text card__title">Notre-Dame-de-la-Garde</p>
                     </div>
                 </div>
@@ -275,19 +275,39 @@ <h2 class="title">Activités à Marseille</h2>
         <footer class="footer">
             <section class="footer__section">
                 <h3 class="lead__text--bold">&Agrave; propos</h3>
-                <a href="#" class="nav__link">Fonctionnement du site</a>
-                <a href="#" class="nav__link">Consitions générales</a>
-                <a href="#" class="nav__link">Données et confidentialité</a>
+                <ul>
+                    <li>
+                        <a href="#" class="nav__link">Fonctionnement du site</a>    
+                    </li>
+                    <li>
+                        <a href="#" class="nav__link">Consitions générales</a>
+                    </li>
+                    <li>
+                        <a href="#" class="nav__link">Données et confidentialité</a>
+                    </li>
+                </ul>            
             </section>
             <section class="footer__section">
                 <h3>Nos hébergements</h3>
-                <a href="#" class="nav__link">Charte qualité</a>
-                <a href="#" class="nav__link">Proposer votre hôtel</a>
+                <ul>
+                    <li>
+                        <a href="#" class="nav__link">Charte qualité</a>
+                    </li>
+                    <li>
+                        <a href="#" class="nav__link">Proposer votre hôtel</a>
+                    </li>
+                </ul>          
             </section>
             <section class="footer__section">
                 <h3>Assistance</h3>
-                <a href="#" class="nav__link">Centre d'aide</a>
-                <a href="#" class="nav__link">Nous contacter</a>
+                <ul>
+                    <li>
+                        <a href="#" class="nav__link">Centre d'aide</a>
+                    </li>
+                    <li>
+                          <a href="#" class="nav__link">Nous contacter</a>
+                    </li>
+                </ul>       
             </section>
         </footer>
     </div>

From ce3d1fe7655a3f351b1b4843dd09b2269d8afce2 Mon Sep 17 00:00:00 2001
From: Laurent De La Calle <laurentdelacalle@hotmail.com>
Date: Sun, 16 Jul 2023 22:20:32 +0200
Subject: [PATCH 5/5] Update README.md

---
 README.md | 50 +++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 49 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index cf39555f..59c5f956 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,49 @@
-# booki-starter-pack
+![Booki](/images/logo/Booki@3x.png)
+# Project for openClassRoom #3
+
+## Presentation
+
+Booki is a french start-up. As a Junior dveloper, i have in charge to develop a website who allows user to find accomodations or discover activities in the city of their choice !
+I was responsible for integrating the interface of the website using HTML & CSS. To achieve this i worked in collaboration with Sarah the CTO and Loïc, the UI Designer.
+
+Vous êtes chargé d'intégrer l'interface du site avec du code HTML et CSS. Pour cela, vous travaillez en étroite collaboration avec Sarah, la CTO, et Loïc, l’UI designer. 
+
+## Process.
+
+I first started by studying all the mock-up Loîc provided me.
+
+![Capture d'écran 2023-06-30 213126](https://github.com/Kalow26/booki/assets/21316407/96389a8b-0e27-4ed8-9035-390ff90dbe07)
+
+I had to develop the *Mobile*, *Tablet* and *Desktop* version of the site 👍
+
+### The Website is Divided in 3 sections
+
+1. the Navbar
+2. Hero Section
+3. The accomodations and Popular Section
+4. The activities available in the city section
+5. The footer
+
+The main objective of the project was to improve my HTML semantic, and work with basic CSS.
+
+<mark>I first started with the desktop version</mark>
+![Capture d'écran 2023-06-30 214614](https://github.com/Kalow26/booki/assets/21316407/6504eecd-daec-49f6-81b2-b39de9ca1148)
+
+<mark>the tablet version</mark>
+![Capture d'écran 2023-06-30 215401](https://github.com/Kalow26/booki/assets/21316407/eccd6248-ed2d-4b3d-8308-8ce60c5ee8a7)
+
+<mark>the mobile version</mark>.
+![Capture d'écran 2023-06-30 215510](https://github.com/Kalow26/booki/assets/21316407/f097bafb-89d3-45e0-81c4-0646027dca6c)
+
+### Code
+
+I tried my best to use the best HTML tags and comment the most my code. My goal was to have the cleanest code and start working with good practicies.
+
+I use the BEM methodology for the CSS
+![Capture d'écran 2023-06-30 215840](https://github.com/Kalow26/booki/assets/21316407/eeb680eb-a1fb-4371-ba1f-59203a8ad8a6)
+
+This is a great way to organise your CSS properly, but i think this method is better in use with SCSS.
+By the way it was a good project to develop, i'm pretty happy with the result.
+And the final version is completely responsive and match perfectly all the mockups !
+
+Hope your enjoy, and see you for my next Project 👌