-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
142 lines (141 loc) · 8.03 KB
/
index.html
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/868efcb088.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-secondary text-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">The Surfing Project</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Le programme</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Nos prochaines sessions
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>_
</ul>
</div>
</div>
</nav>
<div class="Jumbotron-hero p-5 bg-primary text-white text-center">
<h4 class="display-4">Partez à l'aventure</h4>
<h4>Découvrez notre école de surf en peer-learning</h4>
<br>
<button type="button" class="btn btn-primary mt-3">Je m'inscris à a prochaine session</button>
<button type="button" class="btn btn-secondary mt-3">Je découvre le programme</button>
</div>
<div class="container">
<h1 class=" text-center mt-5">The surfing project en 3 points</h1>
<div class="row row-cols-1 row-cols-md-3 mb-3 text-center ml-5 px-5 py-5">
<div class="col text-center">
<i class="fa fa-money-bill-wave fa-7x text-center"></i>
<h4 class=" text-center">Pas cher</h4>
<p class="text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique. Volutpat consequat mauris nunc congue nisi vitae suscipit tellus mauris. Tincidunt lobortis feugiat vivamus at augue eget arcu dictum. Lorem mollis aliquam ut porttitor. </p>
</div>
<div class="col text-left">
<i class="fa-solid fa-couch fa-7x"></i>
<h4>Relax</h4>
<p>Faucibus vitae aliquet nec ullamcorper. Ipsum dolor sit amet consectetur adipiscing elit duis. Nibh nisl condimentum id venenatis a. Sit amet justo donec enim diam vulputate ut pharetra. </p>
</div>
<div class="col text-left">
<i class="fa-solid fa-people-group fa-7x"></i>
<h4>La communauté</h4>
<p>Imperdiet dui accumsan sit amet nulla facilisi morbi tempus iaculis. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque. Massa vitae tortor condimentum lacinia quis vel eros donec ac. Quis hendrerit dolor magna eget est lorem ipsum dolor.</p>
</div>
</div>
</div>
<div class="container">
<h1 class=" text-center mt-5">Témoignages</h1>
<div class="row row-cols-1 row-cols-md-2 mb-2 text-center px-5 py-5">
<div class="col text-center">
<div class="card">
<img src="https://th.bing.com/th/id/R.dc68326096b0460a38ee8e00e00bea09?rik=bC6ZcpozKhrTqQ&riu=http%3a%2f%2fcdn.wallpapersafari.com%2f27%2f77%2fGUy762.jpg&ehk=Xab8GdVj98uA6BKgmmaGEX9tK14N2Cxk01qpc1Obqww%3d&risl=&pid=ImgRaw&r=0" alt="Card image cap" height="450px" width="100%" style="object-fit: none; object-position: center; padding:0; margin:0;" >
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. AAAAAAAAAAA<br>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH</p>
</div>
</div>
</div>
<div class="col text-center">
<div class="card">
<img src="https://th.bing.com/th/id/R.3f8cdc5e2182081cd9ec56f39f3096d0?rik=Kb6tZNpx2P4PLg&riu=http%3a%2f%2fngn-mag.com%2fimage%2fwallpaper%2ffond-ecran-surf-3.jpeg&ehk=MQu8PO2xSwN3cCQFkZcu5YetXjh9x2ENCCECdeCbauE%3d&risl=&pid=ImgRaw&r=0" alt="Card image cap" height="450px" width="100%" style="object-fit: none; object-position: center; padding:0; margin:0;" >
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. AAAAAAAAAAA<br>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH</p>
</div>
</div>
</div>
</div>
<h1 class=" text-center mt-5">Prix</h1>
<div class="row row-cols-1 row-cols-md-3 mb-3 text-center px-5 py-5">
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm">
<div class="card-header py-3">
<h4 class="my-0 fw-normal">Semaine d'Essai</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$0</h1>
<ul class="list-unstyled mt-3 mb-4">
<li>Le kiff </li>
<li>a Bali</li>
<li>Pendant 1 semaine</li>
</ul>
<button type="button" class="w-100 btn btn-lg btn-outline-primary">S'inscrire</button>
</div>
</div>
</div>
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm">
<div class="card-header py-3">
<h4 class="my-0 fw-normal">Early Bird</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">15€</h1>
<ul class="list-unstyled mt-3 mb-4">
<li>Le kiff</li>
<li>A Bali</li>
<li>Pendant 12 semaines</li>
</ul>
<button type="button" class="w-100 btn btn-lg btn-primary">S'inscrire</button>
</div>
</div>
</div>
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm border-primary">
<div class="card-header py-3 text-white bg-primary border-primary">
<h4 class="my-0 fw-normal">en 3 fois</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">7€<small class="text-muted fw-light">/mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>Le kiff</li>
<li>A Bali</li>
<li>Pendant 12 semaines</li>
</ul>
<button type="button" class="w-100 btn btn-lg btn-primary">S'inscrire</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>