AurelienDEMEUSY.github.io/index.html at main · AurelienDEMEUSY/AurelienDEMEUSY.github.io · 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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Junior Conseil Triper</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="header">
    <div class="logo">
      <img src="assets/logos/JCT.png" alt="Junior Conseil Triper Logo">
      <h1>Junior Conseil Triper</h1>
    </div>
    <nav class="nav">
      <a href="#">Hébergements</a>
      <a href="#">Activités</a>
      <a href="#">S'inscrire</a>
    </nav>
    <div class="nav-toggle">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </header>

  <section class="search-section">
    <h2>Trouvez votre hébergement pour des vacances de rêve</h2>
    <h4>En plein centre ville ou en pleine nature</h4>
    <div class="search-bar">
      <select class="search-select">
        <option value="all">Tous</option>
        <option value="hebergements">Hébergements</option>
        <option value="activites">Activités</option>
      </select>
      <input type="text" class="search-input" placeholder="Rechercher...">
      <button class="search-button"><i class="fas fa-search"></i></button>
    </div>
    <div class="filters">
      <button>Économique</button>
      <button>Familial</button>
      <button>Romantique</button>
      <button>Animaux autorisés</button>
    </div>
    <p>Plus de 500 logements sont disponibles dans cette ville</p>
  </section>

  <main>
    <div class="main-container">
      <section class="hebergements">
        <h3>Hébergements à Marseille</h3>
        <div class="card-container">
          <div class="card">
            <img src="assets/hebergements/7.jpg" alt="Auberge la Cannebière">
            <h4>Auberge la Cannebière</h4>
            <p>Nuit à partir de 25€</p>
            <span>★★★★</span>
          </div>
          <div class="card">
            <img src="assets/hebergements/6.jpg" alt="Hôtel du port">
            <h4>Hôtel du port</h4>
            <p>Nuit à partir de 49€</p>
            <span>★★★★★</span>
          </div>
          <div class="card">
            <img src="assets/hebergements/9.jpg" alt="Hôtel les mouettes">
            <h4>Hôtel les mouettes</h4>
            <p>Nuit à partir de 76€</p>
            <span>★★★★</span>
          </div>
          <div class="card">
            <img src="assets/hebergements/1.jpg" alt="Hôtel de la mere">
            <h4>Hôtel de la mere</h4>
            <p>Nuit à partir de 46€</p>
            <span>★★★</span>
          </div>
          <div class="card">
            <img src="assets/hebergements/8.jpg" alt="Auberge le panier">
            <h4>Auberge le panier</h4>
            <p>Nuit à partir de 23€</p>
            <span>★★★★</span>
          </div>
          <div class="card">
            <img src="assets/hebergements/4.jpg" alt="Hotel chez amina">
            <h4>Hotel chez amina</h4>
            <p>Nuit à partir de 96€</p>
            <span>★★★★★</span>
          </div>
        </div>
        <button class="load-more">Afficher plus</button>
      </section>

      <aside class="popular">
        <h3>Les plus populaires</h3>
        <div class="card">
          <img src="assets/hebergements/3.jpg" alt="Hotel le soleil du matin">
          <h4>Hotel le soleil du matin</h4>
          <p>Nuit à partir de 128€</p>
          <span>★★★★★</span>
        </div>
        <div class="card">
          <img src="assets/hebergements/2.jpg" alt="Au coeur de l'eau chambre d'hote">
          <h4>Au coeur de l'eau chambre d'hote</h4>
          <p>Nuit à partir de 71€</p>
          <span>★★★★</span>
        </div>
        <div class="card">
          <img src="assets/hebergements/5.jpg" alt="Hotel tout bleu et blanc">
          <h4>Hotel tout bleu et blanc</h4>
          <p>Nuit à partir de 68€</p>
          <span>★★★★</span>
        </div>
      </aside>
    </div>
  </main>

  <footer class="footer">
    <div>
      <h4>À propos</h4>
      <ul>
        <li>Fonctionnement du site</li>
        <li>Conditions générales de vente</li>
        <li>Données et confidentialité</li>
      </ul>
    </div>
    <div>
      <h4>Nos hébergements</h4>
      <ul>
        <li>Charte qualité</li>
        <li>Soumettez votre hôtel</li>
      </ul>
    </div>
    <div>
      <h4>Assistance</h4>
      <ul>
        <li>Centre d'aide</li>
        <li>Nous contacter</li>
      </ul>
    </div>
  </footer>
</body>
</html>