🏗 intégration maquettes

gtnsimon · Oct 18, 2021 · 0d98571 · 0d98571
1 parent ab22b08
commit 0d98571
Show file tree

Hide file tree

Showing 2 changed files with 262 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- reset css -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jgthms/minireset.css@master/minireset.min.css">
+
+    <!-- Raleway font -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700&display=swap" rel="stylesheet">
+
+    <!-- Booki styles -->
+    <link rel="stylesheet" href="styles.css">
+
+    <title>Booki - Trouvez votre hébergement pour des vacances de rêve</title>
+  </head>
+  <body>
+    <!-- En-tête -->
+    <header class="header">
+      <!-- Logo de Booki -->
+      <picture class="header__logo">
+        <source media="(min-width: 768px)" srcset="./images/logo/Booki.png">
+        <img src="./images/logo/Booki_x3.png" alt="Booki">
+      </picture>
+
+      <!-- Navigation -->
+      <nav class="header__nav">
+        <ul class="header__nav__list">
+          <li class="header__nav__list-item">
+            <a href="#hebergements">Hébergements</a>
+          </li>
+          <li class="header__nav__list-item">
+            <a href="#activites">Activités</a>
+          </li>
+        </ul>
+      </nav>
+    </header>
+
+    <!-- Contenu principal -->
+    <main class="content">
+      <!-- Titre + Section de recherche -->
+      <section>
+        <h1 class="h1">Trouvez votre hébergement pour des vacances de rêve</h1>
+        <p>En plein centre ville ou en pleine nature</p>
+
+        <!-- recherche -->
+        <form action="index.html" method="GET">
+          <div class="search-input">
+            <label for="search" class="search-input__icon">
+              i
+            </label>
+            <div class="search-input__text">
+              <input type="text" id="search" name="search" placeholder="Ex : Paris">
+            </div>
+            <button type="submit" class="search-input__button">
+              Rechercher
+            </button>
+          </div>
+        </form>
+      </section>
+    </main>
+  </body>
+</html>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,195 @@
+/* STYLES COMMUNS */
+body {
+  max-width: 1438px; /* taille max pour centrer le contenu sur les grands écrans */
+  margin: 0 auto;
+
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  color: #0065FC;
+  text-decoration: none !important;
+}
+
+.h1 {
+  font-weight: 700;
+  font-size: 22px;
+  margin-bottom: 8px;
+}
+/* STYLES COMMUNS */
+
+/* HEADER */
+.header {
+  display: flex;
+  align-items: flex-end;
+}
+
+.header__logo {
+  flex: 1 0 auto;
+
+  display: block;
+  height: 45px;
+  margin-left: 20px;
+}
+
+.header__logo > img {
+  display: inline-block;
+  height: 100%;
+}
+
+.header__nav {
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.header__nav__list {
+  display: flex;
+  align-items: center;
+
+  height: 100%;
+}
+
+.header__nav__list__item {
+  flex: 1;
+}
+
+.header__nav__list-item > a {
+  display: block;
+
+  padding: 40px 40px 10px;
+  line-height: 32px;
+
+  color: #000;
+  border-top: 2px solid transparent;
+}
+
+.header__nav__list-item > a:hover {
+  color: #0065FC;
+  border-color: #0065FC;
+}
+/* HEADER */
+
+.content {
+  margin-top: 45px;
+  padding: 0 20px;
+}
+
+/* RECHERCHE */
+.search-input {
+  display: flex;
+  align-items: stretch;
+
+  margin-top: 16px;
+}
+
+.search-input__icon {
+  flex: 0 0 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 50px;
+  height: 50px;
+
+  border-radius: 15px 0 0 15px;
+  background-color: #F2F2F2;
+}
+
+.search-input__text {
+  position: relative;
+  width: 250px;
+  height: 50px;
+
+  border: 1px solid #F2F2F2;
+  border-radius: 0;
+}
+
+.search-input__text > input {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding: 0 22px;
+
+  font-size: 18px;
+  font-weight: 600;
+
+  border: none;
+}
+
+.search-input__text > input::placeholder {
+  font-size: 18px;
+  font-weight: 600;
+  font-family: 'Raleway', sans-serif;
+
+  /* color: #000 !important; */
+}
+
+.search-input__button {
+  display: block;
+  padding: 0 16px;
+
+  font-size: 18px;
+  font-weight: 600;
+
+  color: #FFF;
+  border: none;
+  border-radius: 0 15px 15px 0;
+  background-color: #0065FC;
+  cursor: pointer;
+}
+/* RECHERCHE */
+
+@media (max-width: 767.98px) {
+  body {
+    padding-top: 20px;
+  }
+
+  .header {
+    /* changed */
+    align-items: center;
+
+    /* added */
+    flex-direction: column;
+  }
+
+  .header__logo {
+    margin-left: 0;
+  }
+
+
+  .header__nav {
+    justify-content: center;
+
+    margin-top: 24px;
+    align-self: stretch;
+  }
+
+  .header__nav__list {
+    flex: 1;
+  }
+
+  .header__nav__list-item {
+    flex: 1;
+  }
+
+  .header__nav__list-item > a {
+    line-height: 1;
+    padding: 12px 0;
+    border-top: none;
+    border-bottom: 2px solid #F2F2F2;
+
+    text-align: center;
+  }
+
+  .content {
+    margin-top: 24px;
+  }
+
+  .search-input {
+    margin-top: 32px;
+  }
+
+}