-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
98 lines (98 loc) · 3.63 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
<!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">
<meta name="description" content="">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="./css/style.css">
<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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous" referrerpolicy="no-referrer">
<script src="./js/main.js" type="module"></script>
<script defer src="./js/connected.js"></script>
<script src="./js/modal.js" type="module"></script>
</head>
<body>
<div id="modal-bkg"></div>
<header>
<div id="header">
<a href="./index.html"><h1>Sophie Bluel<span>Architecte d'intérieur</span></h1></a>
<nav>
<ul>
<li class="nav-bold no-hover">projets</li>
<li>contact</li>
<li id="login-link"><a href="./login.html">login</a></li>
<li id="logout-link">logout</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>
<div id="admin-edit"></div>
<section id="portfolio">
<div id="portfolio-title">
<h2>Mes Projets</h2>
</div>
<div class="buttons-container"></div>
<div id="gallery"></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>
<dialog class="dialog">
<div id="top-btns">
<div id="back"><i class="fa-solid fa-arrow-left"></i></div>
<div id="close"><i class="fa-solid fa-xmark"></i></div>
</div>
<h3 id="gallery-title">Galerie photo</h3>
<div id="gallery-container">
<div id="admin-gallery"></div>
<div id="addpic-form">
<label class="label">Titre</label>
<input class="input" id="img-description" type="text" name="title">
<label class="label">Catégorie</label>
<select class="input" id="form-select" name="category"></select>
</div>
<div id="separator"></div>
</div>
<button type="submit" id="submit-btn">Ajouter une photo</button>
<button type="submit" id="upload-btn" disabled>Valider</button>
<p>Supprimer la galerie</p>
</dialog>
</main>
<footer>
<nav>
<ul>
<li>Mentions Légales</li>
</ul>
</nav>
</footer>
</body>
</html>