cafe_florette/index.html at master · zyrass/cafe_florette · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="fr">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Café Florette | Accueil</title>

    <!-- API Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap" rel="stylesheet" />

    <!-- CSS -->
    <link rel="stylesheet" href="css/styles.css" />

    <!-- CSS pour les écran de 500px MAXIMUM -->
    <link
      rel="stylesheet"
      media="only screen and (max-width: 500px)"
      href="css/styles.mobile.css"
    />

    <!-- FONT AWESOME -->
    <script src="https://kit.fontawesome.com/05541d3516.js" crossorigin="anonymous"></script>
  </head>

  <body>

    <header class="header">
      <nav>
        <h1><a href="./index.html">CAFE FLORETTE</a></h1>
        <ul>
          <li><a href="./index.html" class="active" >Accueil</a></li>
          <li><a href="./where.html">Nous trouver</a></li>
          <li><a href="./contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>

    <section class="vp">
      <div class="vp-content">
        <h1>Toute l'expertise française dans un café</h1>
        <div class="separator"></div>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate quasi eaque fuga, voluptate magni voluptatum nihil quis deleniti dicta, soluta voluptatibus est assumenda in quisquam dolores ?
        </p>
        <a href="./where.html" class="btn btn-primary my-10">DECOUVRIR</a>
      </div>
    </section>

    <section class="features">
      <div class="container">

        <!-- Feature 1 -->
        <div class="feature">
          <i class="fas fa-coffee fa-3x my-10"></i>
          <h2>Un nouveau café par jour</h2>
          <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Distinctio ipsa sit fugit consequatur, dignissimos ducimus odio nisi possimus tempora placeat.
          </p>
        </div>

        <!-- Feature 2 -->
        <div class="feature">
          <i class="fas fa-clock fa-3x my-10"></i>
          <h2>Ouvert 24h/24 7j/7</h2>
          <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Distinctio ipsa sit fugit consequatur, dignissimos ducimus odio nisi possimus tempora placeat.
          </p>
        </div>

      </div>
    </section>

    <!-- Image de séparation -->
    <div class="person"></div>

    <section class="reservation">
      <div class="container">
        <h2>Réservez dès maintenant</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae nesciunt odit dicta nihil exercitationem quod enim aut expedita molestias repellendus in vero ullam perferendis, temporibus dolorum necessitatibus corrupti delectus porro labore laboriosam veniam inventore velit est sed. Aut mollitia veniam laborum odio. Est vitae eius aperiam ipsa error. Adipisci, alias?
        </p>
        <a href="./contact.html" class="btn btn-dark my-20">RESERVEZ</a>
      </div>
    </section>

    <footer>
      <p>Copyright &copy; - Florette - 2019/2020</p>
    </footer>
  </body>
</html>