Skip to content

Commit 16f9d02

Browse files
ZicerosZiceros
committed
first commit
0 parents  commit 16f9d02

15 files changed

Lines changed: 581 additions & 0 deletions

‎.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5501
3+
}

‎CV A4DADZIE Kamal Kenneth.pdf‎

606 KB
Binary file not shown.

‎design.png‎

5.5 KB
Loading

‎developpement mobile.png‎

3.37 KB
Loading

‎developpement web.jpg‎

102 KB
Loading

‎index.css‎

Lines changed: 323 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,323 @@
1+
* {
2+
margin: 0;
3+
4+
}
5+
6+
.name{
7+
padding-right: 95px;
8+
9+
}
10+
11+
/* Mettre à côté les contenus de header (1 bloc et 2 bloc */
12+
.header {
13+
display: flex;
14+
/* Deuxieme étapes */
15+
justify-content: space-between;
16+
background-color: rgb(32, 37, 109);
17+
color: rgb(234, 242, 245);
18+
/* centrer le contenu du header */
19+
align-items: center;
20+
font-style: italic;
21+
}
22+
body {
23+
background-color:#E3E6F2;
24+
font-family: sans-serif;
25+
26+
}
27+
ul {
28+
display: flex;
29+
gap: 35px;
30+
31+
/* Pour annuler les points dans la liste */
32+
list-style: none;
33+
}
34+
ul>p {
35+
color: hsl(187, 94%, 13%);
36+
}
37+
38+
a {
39+
text-decoration: none;
40+
color: hsl(264, 5%, 82%);
41+
}
42+
43+
nav {
44+
display: flex;
45+
gap: 25px;
46+
align-items: center;
47+
}
48+
.button {
49+
padding: 7px;
50+
margin: 15px;
51+
border: rgb(52, 87, 163);
52+
border-radius: 8px;
53+
background-color: rgb(19, 119, 158);
54+
color: rgb(32, 37, 109);
55+
}
56+
57+
#ken1 {
58+
background-color: rgb(49, 139, 151);
59+
60+
}
61+
#ken1>img{
62+
border-radius: 50px;
63+
}
64+
65+
#ken2 {
66+
background-color: rgb(32, 37, 109);
67+
padding: 7px;
68+
margin: 15px;
69+
border: rgb(52, 87, 163);
70+
color: rgb(205, 206, 219) ;
71+
border-radius: 8px;
72+
}
73+
74+
.nbre{
75+
font-size: 50px;
76+
color: rgb(43, 238, 228);
77+
border-radius: 10px;
78+
79+
80+
/* background-color: black; */
81+
transition: 0.2 s;
82+
box-shadow: 0px 10px 30px -15px rgb(8, 1, 1);
83+
84+
}
85+
.nbre:hover{
86+
transform: scale(1.1);
87+
}
88+
89+
90+
91+
.ken3 {
92+
background-color: rgb(202, 206, 223);
93+
94+
display: flex;
95+
align-items: center;
96+
padding-left: 30px;
97+
margin-top: px;
98+
}
99+
100+
.section2 {
101+
text-align: center;
102+
103+
padding: 90px;
104+
background-color:rgb(32, 37, 109);
105+
color: rgb(205, 202, 219);
106+
}
107+
p{
108+
margin-bottom: 80px;
109+
}
110+
111+
#sec {
112+
font-size: 30px;
113+
}
114+
115+
.div1 {
116+
text-align: center;
117+
display: flex;
118+
justify-content: center;
119+
gap: 100px;
120+
}
121+
.div2 {
122+
text-align: center;
123+
124+
}
125+
.services {
126+
text-align: center;
127+
margin-top: 90px;
128+
background-color: rgb(169, 198, 240);
129+
padding: 90px;
130+
}
131+
.div3 {
132+
text-align: center;
133+
display: flex;
134+
justify-content: center;
135+
gap: 100px;
136+
margin-top: 90px;
137+
}
138+
139+
.réalisation{
140+
margin-top: 90px;
141+
142+
}
143+
.ken4 {
144+
text-align: center;
145+
display: flex;
146+
justify-content: center;
147+
gap: 100px;
148+
margin-top: 90px;
149+
}
150+
.réalisations {
151+
text-align: center;
152+
}
153+
.div4 {
154+
text-align: center;
155+
display: flex;
156+
justify-content: center;
157+
gap: 100px;
158+
}
159+
160+
.skills-container {
161+
max-width: 700px;
162+
margin: 0 auto;
163+
background: white;
164+
padding: 40px;
165+
border-radius: 15px;
166+
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
167+
}
168+
169+
.skill {
170+
margin-bottom: 25px;
171+
}
172+
173+
.skill span {
174+
display: block;
175+
margin-bottom: 8px;
176+
font-weight: bold;
177+
color: #021f49;
178+
}
179+
180+
.progress-bar {
181+
background-color: #e0e0e0;
182+
height: 12px;
183+
border-radius: 6px;
184+
overflow: hidden;
185+
}
186+
187+
.progress {
188+
height: 100%;
189+
background-color: #021f49; /* The bar is blue */
190+
border-radius: 6px;
191+
}
192+
193+
.section-title{
194+
justify-content: center;
195+
display: flex;
196+
font-size: 30px;
197+
margin-bottom: 20px;
198+
font-weight: bold;
199+
color: #021f49;
200+
}
201+
202+
.contact-form {
203+
max-width: 600px;
204+
margin: 0 auto;
205+
background: white;
206+
padding: 30px;
207+
border-radius: 15px;
208+
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
209+
}
210+
.contact-form label {
211+
display: block;
212+
margin-bottom: 10px;
213+
font-weight: bold;
214+
color: #021f49;
215+
}
216+
217+
.contact-form input,
218+
.contact-form textarea {
219+
width: 100%;
220+
padding: 10px;
221+
margin-bottom: 20px;
222+
border: 1px solid #ccc;
223+
border-radius: 5px;
224+
font-size: 16px;
225+
}
226+
.contact-form button {
227+
background-color: #021f49;
228+
color: white;
229+
padding: 12px 20px;
230+
border: none;
231+
border-radius: 5px;
232+
cursor: pointer;
233+
font-size: 16px;
234+
}
235+
.contact-form button:hover {
236+
background-color: #014f86;
237+
}
238+
.contact-form textarea {
239+
height: 120px;
240+
resize: vertical;
241+
}
242+
.fin{
243+
text-align: center;
244+
padding: 20px;
245+
background-color: rgb(139, 222, 236);
246+
margin-top: 50px;
247+
}
248+
249+
250+
251+
footer {
252+
background-color: blue;
253+
color: #ccc;
254+
padding: 30px;
255+
text-align: center;
256+
}
257+
258+
.social-links {
259+
margin-top: 15px;
260+
}
261+
262+
.social-links a {
263+
color: white;
264+
text-decoration: none;
265+
margin: 0 20px;
266+
font-size: 18px;
267+
}
268+
269+
.social-links a:hover {
270+
color: #00d4ff;
271+
}
272+
273+
/* Pour les tablettes (écrans ≤ 992px) */
274+
@media (max-width: 992px) {
275+
.header {
276+
flex-direction: column;
277+
text-align: center;
278+
padding: 20px;
279+
}
280+
281+
nav ul {
282+
flex-direction: column;
283+
gap: 15px;
284+
}
285+
286+
.ken3 {
287+
flex-direction: column;
288+
text-align: center;
289+
padding: 20px;
290+
}
291+
292+
.div3, .div4 {
293+
flex-direction: column;
294+
gap: 40px;
295+
}
296+
}
297+
298+
/* Pour les mobiles (écrans ≤ 576px) */
299+
@media (max-width: 576px) {
300+
h1, h2, h3 {
301+
font-size: 1.2rem;
302+
}
303+
304+
img {
305+
max-width: 100%;
306+
height: auto;
307+
}
308+
309+
.skills-container, .contact-form {
310+
padding: 20px;
311+
width: 90%;
312+
}
313+
314+
.button, #ken2 {
315+
width: 100%;
316+
text-align: center;
317+
}
318+
}
319+
320+
img {
321+
max-width: 100%;
322+
height: auto;
323+
}

0 commit comments

Comments
 (0)