-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
216 lines (193 loc) · 8.82 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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TIFFANY - Home</title>
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Fontawesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Google fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Nobile:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap"
rel="stylesheet">
</head>
<body>
<!-- HEADER -->
<header>
<a href="" id="logo"><i class="fa-brands fa-codepen"></i> Tiffany</a>
<nav>
<label for="mobile">Menu</label>
<input type="checkbox" id="mobile">
<ul class="mobile-menu">
<li><a href="">Acceuil</a></li>
<li><a href="#about">A propos</a></li>
<li><a href="#project">Projets</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<!--END HEADER -->
<!-- BANNER -->
<div class="banner">
<div class="banner-container">
<h1>Je suis Tiffany</h1>
<p>
Guidé par la passion du développement web, je forme et inspire pour façonner le futur numérique
ensemble.</p>
<div>
<a href="#project">Projets</a>
</div>
</div>
</div>
<!-- END BANNER -->
<main>
<!-- A PROPOS DE MOI -->
<section id="about">
<div class="container">
<div class="head">
<h2>A PROPOS DE MOI</h2>
<div class="line"></div>
<p>Ici, vous découvrirez plus d'informations à mon sujet, sur mes activités ainsi que mes
compétences
actuelles, principalement dans le domaine de la programmation et de la technologie.</p>
</div>
<br><br><br><br>
<div class="sous-container">
<div class="connaissance">
<h3>Faites ma connaissance !</h3>
<br>
<p>
Avec une expérience solide dans le développement web, je suis passionné par la création
d'expériences numériques innovantes. Ma vision va au-delà du simple codage : je crois en la
fusion de la créativité et de la technologie pour façonner l'avenir du web.
</p>
<br>
<br>
<div class="buttons">
<a href="./cv.pdf" download>Telecharger mon cv</a>
<a href="#contact">Contact</a>
</div>
</div>
<div class="competence">
<h3>Mes compétences</h3>
<br>
<ul>
<li>Visual Studio Code.</li>
<li>SQL.</li>
<li>Développement web responsive.</li>
<li>Présentations.</li>
<li>PHP.</li>
<li>CSS.</li>
<li>Débogage de code.</li>
<li>Bonnes pratiques en développement web.</li>
<li>Gestion de projet.</li>
<li>Accessibilité web.</li>
<li>Résolution de problèmes.</li>
<li>HTML.</li>
</ul>
</div>
</div>
</div>
</section>
<!-- END A PROPOS DE MOI -->
<!-- PROJETS -->
<section id="project">
<div class="container">
<div class="head">
<h2>Projets</h2>
<div class="line"></div>
<p>Explorez cette section pour découvrir une sélection des projets et réalisations
. Chaque projet est accompagné d'une étude de cas détaillée, vous
permettant ainsi de
plonger
au cœur de son développement et de ses réussites.</p>
</div>
<br><br><br><br>
<div class="sous-container">
<div class="connaissance">
<img src="./assets/images/garbacan.png" alt="image de garba">
</div>
<div class="competence">
<h3>Garba CAN</h3>
<p>Ce site a été réalisé dans le cadre de mon stage pratique pour la soutenance au BTS</p>
<div class="buttons">
<a href="https://tiffanyzigbe.github.io/Mon-premier-site/">Voir en direct</a>
</div>
</div>
</div>
<br><br><br>
<hr> <br><br><br>
<div class="sous-container">
<div class="competence">
<h3>Bloggy</h3>
<p>Ce site a été réalisé dans le cadre de mon stage pratique pour la soutenance au BTS</p>
<div class="buttons">
<a href="https://tiffanyzigbe.github.io/Bloggy/">Voir en direct</a>
</div>
</div>
<div class="connaissance">
<img src="./assets/images/bloggy.png" alt="">
</div>
</div>
</section>
<!-- END PROJETS -->
<!-- CONTACT -->
<section id="contact">
<div class="container">
<div class="head">
<h2>Contact</h2>
<div class="line"></div>
<p class="text-danger">Que vous soyez un étudiant cherchant des conseils, une entreprise à la
recherche d'un formateur en développement web ou simplement un passionné de technologie
souhaitant échanger des idées, je serais ravi de vous entendre.
</p>
<!-- <p>
Remplissez simplement le formulaire ci-dessous avec vos coordonnées et un bref message décrivant
l'objet de votre requête. Je m'engage à vous fournir une réponse complète et personnalisée dans
les plus brefs délais.</p> -->
</div>
<br><br><br><br>
<form action="" id="contact-form">
<div class="mb-3">
<label for="nom">Nom</label>
<input type="text" id="nom" placeholder="Entrez votre Nom">
</div>
<div class="mb-3">
<label for="email">Email</label>
<input type="text" id="email" placeholder="Entrez votre Email">
</div>
<div class="mb-3">
<label for="message">Message</label>
<textarea id="message" cols="30" rows="10" placeholder="Entrez votre message"></textarea>
</div>
<div class="form-button">
<input type="submit" value="Soumettre" class="button">
</div>
</form>
</div>
</section>
<!-- END CONTACT -->
</main>
<footer>
<div class="container">
<div class="head">
<div class="left">
<h3>Copyright 2024. Réalisé par <i>Tiffany</i> </h3>
</div>
<div class="right">
<ul class="social">
<li><a href=""><i class="fa-brands fa-facebook"></i></a></li>
<li><a href=""><i class="fa-brands fa-linkedin"></i></a></li>
<li><a href=""><i class="fa-brands fa-twitter"></i></a></li>
</ul>
</div>
</div>
</div>
</footer>
</body>
</html>