-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
147 lines (146 loc) · 5.04 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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Sophie Bluel - Architecte d'intérieur</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Work+Sans&display=swap" rel="stylesheet">
<meta name="description" content="">
<link rel="stylesheet" href="./assets/style.css">
<script type="module" src="./assets/script.js"></script>
</head>
<body>
<header>
<div class="header-modif none">
<img src="./assets/icons/pen-to-square-regular (W).svg" alt="">
<p>Modifier</p>
</div>
<div class = "header">
<h1>Sophie Bluel <span>Architecte d'intérieur</span></h1>
<nav>
<ul>
<li id="nav-projets">projets</li>
<li>contact</li>
<li id="login">login</li>
<li><img src="./assets/icons/instagram.png" alt="Instagram"></li>
</ul>
</nav>
</div>
</header>
<main>
<section id="introduction">
<figure>
<img src="./assets/images/sophie-bluel.png" alt="">
</figure>
<article>
<h2>Designer d'espace</h2>
<p>Je raconte votre histoire, je valorise vos idées. Je vous accompagne de la conception à la livraison finale du chantier.</p>
<p>Chaque projet sera étudié en commun, de façon à mettre en valeur les volumes, les matières et les couleurs dans le respect de l’esprit des lieux et le choix adapté des matériaux. Le suivi du chantier sera assuré dans le souci du détail, le respect du planning et du budget.</p>
<p>En cas de besoin, une équipe pluridisciplinaire peut-être constituée : architecte DPLG, décorateur(trice)</p>
</article>
</section>
<section id="portfolio">
<h2 id="portfolio-title" class="none">Mes Projets</h2>
<div id= "portfolio-modifier" class="title none">
<h2>Mes Projets</h2>
<button class="modal-open-button">
<img src="./assets/icons/pen-to-square-regular (B).svg" alt="">
<p>modifier</p>
</button>
</div>
<!-- Filtres -->
<div class="filter none">
<p class="selected">Tous</p>
<!-- <p class="objets">Objets</p>
<p class="appartements">Appartements</p>
<p class="hotels">Hôtels & restaurants</p> -->
</div>
<div class="gallery">
<!-- Récupération des travaux depuis le back-end -->
</div>
<div id="modal">
<!-- Modal2 Galerie -->
<dialog class="modal1 modal">
<div class="modal-box">
<div class="modal-button">
<button class="modal-close-button"><img src="./assets/icons/xmark-solid.svg" alt=""></button>
</div>
<div class="modal-contant">
<h2>Galerie photo</h2>
<hr class="bar">
<div class="modal-works">
<!-- Récupération des travaux depuis le back-end -->
</div>
<hr class="line">
<div class="modal-submit-container"><button class="modal-go-photo modal-submit">Ajouter une photo</button></div>
</div>
</div>
</dialog>
<!-- Modal2 Photo -->
<dialog class="modal2 modal">
<div class="modal-box">
<div class="modal-button">
<button class="modal-go-gallery"><img src="./assets/icons/arrow-left-solid.svg" alt=""></button>
<button class="modal-close-button"><img src="./assets/icons/xmark-solid.svg" alt=""></button>
</div>
<div class="modal-contant">
<h2>Ajout photo</h2>
<form class="form modal-form" method="dialog" id="form">
<!-- Upload d'Image -->
<div class="modal-file-container">
<input type="file" id="image" name="image" accept="image/*" required>
<label for="image">
<img src="./assets/icons/placeholder.svg" alt="">
<button>+ Ajouter photo</button>
<span>jpg, png : 4mo max</span>
</label>
</div>
<!-- Choix Titre -->
<div class="modal-form-container">
<label for="titre">Titre</label>
<input type="text" id="titre" name="titre" maxlength="40" required>
</div>
<!-- Choix Catégorie -->
<div class="modal-form-container">
<label for="categorie">Catégorie</label>
<select id="categorie" name="categorie" required>
<option value=""></option>
<option value="1">Objets</option>
<option value="2">Appartements</option>
<option value="3">Bar & restaurants</option>
</select>
</div>
<hr class="line">
<!-- Submit -->
<input type="submit" value="Valider" class="modal-form-submit">
</form>
</div>
</div>
</dialog>
</div>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Vous avez un projet ? Discutons-en !</p>
<form action="#" method="post">
<label for="name">Nom</label>
<input type="text" name="name" id="name">
<label for="email">Email</label>
<input type="email" name="email" id="email">
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
<input type="submit" value="Envoyer">
</form>
</section>
</main>
<footer>
<nav>
<ul>
<li>Mentions Légales</li>
</ul>
</nav>
</footer>
</body>
</html>