-
Notifications
You must be signed in to change notification settings - Fork 1
/
acceuil.html
146 lines (130 loc) · 6.35 KB
/
acceuil.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
143
144
145
146
<!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>Webremake</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="style2.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://kit.fontawesome.com/c6879e030e.js" crossorigin="anonymous"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
</head>
<body>
<header>
<h1 class="headerTitle">LAUGHY.CHAT</h1>
</header>
<ul class="myNavbar">
<li><a href="#"> Menu </a></li>
<li><a href="#">à propos</a></li>
<li><a href="#">contact</a></li>
<li><a class="btn-connexion" href="./index.html"> connexion </a></li>
</ul>
<!-- mon carrousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="3"></button>
</div>
<!-- le contenu des slides : images et légendes -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./image/laughyu.jpg" alt="enfants" class="d-block" style="width:100vw; height: 50vh;">
<div class="carousel-caption">
<h3>souriez à la vie</h3>
<p>connectez-vous à votre vos réseaux préférés</p>
</div>
</div>
<div class="carousel-item">
<img src="./image/social.jpg" alt="réseaux" class="d-block" style="width:100vw; height: 50vh;">
<div class="carousel-caption">
<h3>SOYEZ LES BIENVENUS !</h3>
<p> Leeeeet's go peeps </p>
</div>
</div>
<div class="carousel-item">
<img src="./image/tiktok.jpg" alt="tik tok" class="d-block" style="width:100vw; height: 50vh;">
<div class="carousel-caption">
<h3>TikTok</h3>
<p>connectez-vous à votre vos réseaux préférés</p>
</div>
</div>
<div class="carousel-item">
<img src="./image/instagram.jpg" alt="Instagram" class="d-block" style="width:100vw; height: 50vh;">
<div class="carousel-caption">
<h3>Instagram</h3>
<p>connectez-vous à votre vos réseaux préférés</p>
</div>
</div>
</div>
<!-- les flèches de défilement -->
<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
<div class="container" data-aos="zoom-in" data-aos-delay="100" data-aos-offset="0">
<div class="card-info " >
<i class="fa-solid fa-users" ></i>
<h2>faites-vous des amies</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veniam nam veritatis impedit sequi totam blanditiis ex quisquam pariatur iste beatae.</p>
</div>
<div class="card-info">
<i class="fa-sharp fa-solid fa-icons"></i>
<h2>Gérez vos contenus</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo cupiditate quasi aperiam eum a odio, tempore est placeat eligendi dolor obcaecati </p>
</div>
<div class="card-info">
<i class="fa-solid fa-comments"></i>
<h2> Echangez </h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore pariatur blanditiis dolorum illo soluta, sed quod labore earum eos iste dolor </p>
</div>
</div>
<div class="card-info-image" data-aos="zoom-in" data-aos-delay="100" data-aos-offset="0">
<div class="image-card">
<img src="./image/twitter.jpg" alt="Twitter">
<h3>Partagez vos vidéos</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi dolores doloribus, velit, illum reiciendis delectus numquam aspernatur voluptate facere a ut. Saepe sequi eum voluptatibus, error quae consequatur ad cumque!</p>
</div>
<div class="image-card">
<img src="./image/social.jpg" alt="social">
<h3>Faites des reels</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi dolores doloribus, velit, illum reiciendis delectus numquam aspernatur voluptate facere a ut. Saepe sequi eum voluptatibus, error quae consequatur ad cumque!</p>
</div>
</div>
<div class="formulair-titre">
<h2>Vous n'avez pas de compte ?</h2>
<p>Inscrivez-vous pour avoir les actualités les plus croustillantes du moments</p>
</div>
<div id="mon-formulaire">
<form>
<label for="prenom">Prénoms</label>
<input type="text" id="fname" name="firstname" placeholder="prénoms..">
<label for="nom">Noms</label>
<input type="text" id="lname" name="lastname" placeholder="noms..">
<label for="pays">pays</label>
<select id="mon-pays" name="monpays">
<option value="france">France</option>
<option value="londre">Londre</option>
<option value="usa">USA</option>
</select>
<input type="submit" value="valider">
</form>
</div>
<footer>
<div class="footer-content">
<a href="https://www.instagram.com/instagram/?hl=fr" alt="instagram"><i class="fa-brands fa-instagram"></i><h4>instagram</h4></i></a>
<a href="https://fr-fr.facebook.com" alt="facebook"><i class="fa-brands fa-facebook"></i><h4>Facebook</h4></i></a>
<a href="https://twitter.com/TwitterFrance" alt="twitter"><i class="fa-brands fa-twitter"></i><h4>Twitter</h4></i></a>
</div>
</footer>
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<script>AOS.init();
</script>
</body>
</html>