-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
119 lines (119 loc) · 3.99 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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio de Création Digitale</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 1em 0;
}
.container {
width: 80%;
margin: 0 auto;
overflow: hidden;
}
.main {
padding: 20px;
background: #fff;
}
.intro, .portfolio, .contact {
margin-bottom: 20px;
}
h2 {
color: #333;
}
p {
line-height: 1.6;
}
.portfolio-item {
margin-bottom: 20px;
}
.portfolio-item img {
width: 100%;
}
.footer {
background: #333;
color: #fff;
text-align: center;
padding: 1em 0;
}
.contact-form {
display: flex;
flex-direction: column;
}
.contact-form label {
margin-bottom: 5px;
}
.contact-form input, .contact-form textarea {
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.contact-form button {
padding: 10px;
background: #333;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<header>
<h1>Portfolio de Création Digitale</h1>
</header>
<div class="container">
<div class="main">
<section class="intro">
<h2>À propos de moi</h2>
<p>Bienvenue sur mon portfolio de création digitale. Je suis passionné par la conception avec l'IA, les designs personnalisés et les illustrations pour l'impression par sublimation. Bien que je ne sois pas un professionnel, ma passion et mon dévouement me poussent à créer des œuvres uniques et inspirantes.</p>
</section>
<section class="portfolio">
<h2>Mon Portfolio</h2>
<div class="portfolio-item">
<h3>Design d'IA</h3>
<img src="https://via.placeholder.com/600x400" alt="Exemple de Design d'IA">
<p>Description de l'œuvre et de son inspiration.</p>
</div>
<div class="portfolio-item">
<h3>Illustration pour Sublimation</h3>
<img src="https://via.placeholder.com/600x400" alt="Exemple d'Illustration pour Sublimation">
<p>Description de l'œuvre et de son inspiration.</p>
</div>
<div class="portfolio-item">
<h3>Design Personnalisé</h3>
<img src="https://via.placeholder.com/600x400" alt="Exemple de Design Personnalisé">
<p>Description de l'œuvre et de son inspiration.</p>
</div>
</section>
<section class="contact">
<h2>Contactez-moi</h2>
<form class="contact-form">
<label for="name">Nom:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" required></textarea>
<button type="submit">Envoyer</button>
</form>
</section>
</div>
</div>
<footer class="footer">
<p>© 2024 Portfolio de Création Digitale</p>
</footer>
</body>
</html>