index.html

<!DOCTYPE html>
<html lang="en">
  <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" />
    <title>Tambouille</title>
    <link rel="stylesheet" href="assets/css/styles.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
  </head>

  <body>
    <header id="section-presentation" class="snap">
      <div class="main-header">
        <div class="text-content .div-header-size">
          <img
            class="logo-header"
            src="assets/images/logo/Logo Tambouille.png"
            alt=""
          />
          <h1 class="futura white">Simplifier votre vie !</h1>
          <p class="roboto white">
            Facile et Felxible améliorer votre quotidien
          </p>
          <form action="">
            <input
              class="input-mail form roboto"
              type="email"
              id="email"
              name="email"
              placeholder="Votre adresse mail..."
            />
            <input class="input-button-mail form roboto" type="submit" />
          </form>
          <div class="btn-store">
            <a href="https://www.apple.com/fr/app-store/" target="_blank">
              <img
                class="btn-image-store"
                src="assets/images/AppStore.png"
                alt=""
              />
            </a>
            <a href="https://play.google.com/store" target="_blank">
              <img
                class="btn-image-store"
                src="assets/images/GooglePlay.png"
                alt=""
              />
            </a>
          </div>
        </div>
        <div class="img-content .div-header-size">
          <img class="mocup-size" src="assets/images/personnage.png" alt="" />
        </div>
      </div>
      <div id="content-bottom-arrow">
        <a href="#section-about-us">
          <img src="assets/images/icons/bottom-arrow.svg" alt="" />
        </a>
      </div>
    </header>

    <section id="section-about-us" class="snap">
      <div class="about-us-content">
        <div class="text-content-about-us text-padding-right-about-us">
          <h2>Des recettes qui<br />s’adaptent à vous !</h2>
          <p class="text-about-us roboto">
            Nous vous proposons des recettes en fonction de ce que votre
            localisation et environnement propose sans oublier vos contraintes
          </p>
        </div>
        <img class="img-about-us" src="assets/images/plat.png" alt="" />
      </div>
    </section>

    <section id="section-steps">
      <div class="title-step">
        <h2 class="color-title-background">En<br />seulement<br />2 étapes</h2>
      </div>
      <div class="steps">
        <div class="step">
          <div class="image-content-step">
            <img src="assets/images/cajette.png" alt="" />
          </div>
          <div class="text-content-step">
            <h3>Achetez chez <br />des producteurs locaux</h3>
            <p>Nous possèdons les bonnes adresses.</p>
          </div>
        </div>
        <div class="step">
          <div class="text-content-step">
            <h3>Des plats modulables</h3>
            <p>Nous sommes à votre écoute et chaque contrainte sera entendu.</p>
          </div>
          <div class="image-content-step">
            <img src="assets/images/assiette.png" alt="" />
          </div>
        </div>
      </div>
    </section>

    <section id="section-question" class="snap">
      <div>
        <h2 id="question">Questions Fréquentes</h2>
      </div>

      <div class="questions">
        <p>Comment lier mon app à mon calendrier et mes notes ?</p>
        <img src="assets/images/icons/plus.png" alt="" />
      </div>
      <div class="questions">
        <p>Quand arriverons les prochaines pages ?</p>
        <img src="assets/images/icons/plus.png" alt="" />
      </div>
      <div class="questions">
        <p>Combien de recette possède tambouille ?</p>
        <img src="assets/images/icons/plus.png" alt="" />
      </div>

      <div class="avis">
        <div>
          <h3>Avis</h3>
        </div>
        <div class="all-avis">
          <div class="content-avis">
            <div class="star">
              <span class="fa fa-star checked"></span>
              <span class="fa fa-star checked"></span>
              <span class="fa fa-star checked"></span>
              <span class="fa fa-star checked"></span>
              <span class="fa fa-star"></span>
            </div>
            <div class="text-avis">
              <p>
                Merci grâce à l’application je n’ai plus besoin de me préoccuper
                de mes courses.
              </p>
            </div>
          </div>
          <div class="content-avis">
            <div class="star">
              <span class="fa fa-star checked"></span>
              <span class="fa fa-star checked"></span>
              <span class="fa fa-star checked"></span>
              <span class="fa fa-star"></span>
              <span class="fa fa-star"></span>
            </div>
            <div class="text-avis">
              <p>
                Parfait ! Une utilisation simple et efficace. Hâte de découvrir
                la suite !
              </p>
            </div>
          </div>
          <div class="content-avis">
            <div class="star">
              <span class="fa fa-star checked"></span>
              <span class="fa fa-star checked"></span>
              <span class="fa fa-star checked"></span>
              <span class="fa fa-star checked"></span>
              <span class="fa fa-star checked"></span>
            </div>
            <div class="text-avis">
              <p>Rien à dire merci pour le service.</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section id="section-download">
      <h2 class="color-title-background">
        Il ne manque plus que vous pour compléter la recette !
      </h2>
      <p>Télécharger l’application</p>
      <div class="btn-store">
        <a href="https://www.apple.com/fr/app-store/" target="_blank">
          <img
            class="btn-image-store"
            src="assets/images/AppStore.png"
            alt=""
          />
        </a>
        <a href="https://play.google.com/store" target="_blank">
          <img
            class="btn-image-store"
            src="assets/images/GooglePlay.png"
            alt=""
          />
        </a>
      </div>
    </section>

    <footer id="section-footer" class="snap">
      <div class="content-footer">
        <img
          class="logo-footer"
          src="assets/images/logo/Logo_Tambouille_vert.png"
          alt=""
        />
        <div id="network">
          <a href="" target="_blank">
            <img src="assets/images/icons/facebook.svg" alt="" />
          </a>
          <a href="" target="_blank">
            <img src="assets/images/icons/twitter.svg" alt="" />
          </a>
          <a href="" target="_blank">
            <img src="assets/images/icons/instagram.svg" alt="" />
          </a>
        </div>
        <div id="menu">
          <a href="">Campaigns</a>
          <a href="">Email Marketing</a>
          <a href="">Branding</a>
          <a href="">Offine</a>
          <a href="">Contact</a>
          <a href="">FAQs</a>
        </div>
        <p id="slogan">Tout droit réservé à la distribution de @tambouille</p>
      </div>
    </footer>
  </body>
  <script src="assets/js/script.js"></script>
</html>