-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
136 lines (133 loc) · 5.84 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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Nuances & intérieurs - Accueil</title>
<link rel="stylesheet" href="style/style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat|Playfair+Display" rel="stylesheet">
<!-- coucou tout le monde!!!:) -->
</head>
<body>
<header>
<div class="header-content">
<h1><a href="index.html">Nuances <span class="element-logo">&</span> Intérieurs</a></h1>
<nav class="menu-header">
<button class="toggle-menu"><i class="fa fa-bars"></i></button>
<ul>
<li class="active"><a href="index.html">Accueil</a></li>
<li><a href="#">Réalisations</a></li>
<li><a href="#">Nos designers</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Mentions légales</a></li>
</ul>
</nav>
</div>
<img src="img/éléphant.jpg" alt="">
</header>
<div class="content">
<div class="content-item">
<img src="https://picsum.photos/id/237/200/300" alt="Image de notre bureau" class="big-img">
</div>
<div class="content-item">
<div class="prestations">
<div class="prestations-item premier-element-prestations">
<span class="icone-prestations"><i class="fa fa-lightbulb-o"></i></span>
<div class="prestations-title">
<h3>Design de mobilier</h3>
</div>
<p>Du croquis à la fabrication, nous concevons des meubles uniques.</p>
</div>
<div class="prestations-item box-middle">
<span class="icone-prestations"><i class="fa fa-home"></i></span>
<div class="prestations-title">
<h3>Architecture d'intérieur</h3>
</div>
<p>Envie de changer d'ambiance ? Nous vous aidons à repenser votre espace.</p>
<p>Agencements...</p>
</div>
<div class="prestations-item">
<span class="icone-prestations"><i class="fa fa-cube"></i></span>
<div class="prestations-title">
<h3>Agencement de magasin</h3>
</div>
<p>Coucou !!!!</p>
</div>
</div>
</div>
<div class="content-item">
<div class="presentation">
<div class="presentation-image">
<img src="https://picsum.photos/id/237/200/300" alt="Image de notre show-room">
</div>
<div class="presentation-element">
<i class="fa fa-bullhorn"></i>
</div>
<div class="presentation-texte">
<h3><span class="logo-presentation">Nuances & Intérieurs,<br></span> studio de designers innovants</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui iure dolor laudantium saepe eum unde similique commodi quidem possimus voluptate. Beatae voluptatem, animi officiis autem fugit a pariatur rem itaque amet quidem blanditiis, ducimus mollitia hic non! Cumque fugit num? Possimus quibusdam eaque voluptate voluptas aut, repudiandae porro placeat quos, natus laborum sed suscipit voluptatum dolorum asperiores molestias a enim esse omnis veritatis quia, ratione quae.</p>
<p>Eveniet, unde! Sit ab alias voluptates? Veniam at iure rem, sit aspernatur quo suscipit inventore corrupti. Velit totam, quidem illo suscipit mofficiis adipisci aliquam, sit minus libero sapiente, numquam molestiae reiciendis est beatae quidem id iure fugiat. Esse, ipsa. Nam soluta optio, harum et adipisci illum quas excepturi earum, ullam facere quo vitae eaque, officia rerum repellendus? Iure, nostrum, illo.</p>
</div>
</div>
</div>
<div class="content-item">
<div class="panneau-surmesure">
<div class="panneau-surmesure-texte">
<h3><span class="panneau-titre">Prestations sur-mesure,<br></span> parce que vous êtes unique</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati debitis officia atque ducimus voluptatem dignissimos quia placeat illo, quae eveniet sunt quaerat, animi odio sequi inventore odit repellat mollitia excepturi dolorum distinctio similique. Dolorem assumenda quam omnis quaerat vero deserunt eos cum aliquam magni facilis rerum, hic ab ducimus odit!</p>
</div>
<div class="panneau-surmesure-element">
<i class="fa fa-quote-right"></i>
</div>
<div class="panneau-surmesure-image">
<img src="https://picsum.photos/id/237/200/300" alt="Image d'une belle chaise design">
</div>
</div>
</div>
<div class="blockquote">
<blockquote>« L'important ce n'est pas l'objet, mais l'homme »</blockquote>
<cite>Charlotte Perriand</cite>
</div>
</div>
<footer>
<div class="footer-contact">
<div class="coordonnees">
<h3>Nuances <span class="logo-coordonnees">&</span> Intérieurs</h3>
<div class="infos">
<p class="visite">Venez nous rendre visite au studio,<br> c'est gratuit</p>
<p>
</p>
</div>
</div>
<div class="form-contact">
<form action="#" method="GET" id="form">
<div class="form-input-test">
<label for="nom">Nom</label>
<input type="text" name="nom" id="nom">
<div class="erreurNom"></div>
</div>
<div class="form-input-test">
<label for="email">Email</label>
<input type="email" name="email" id="email">
<div class="erreurEmail"></div>
</div>
<div class="form-input-test">
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
<div class="erreurMessage"></div>
</div>
<div class="form-bouton">
<input type="submit" value="Envoyer" class="bouton">
</div>
</form>
</div>
</div>
<div class="footer-credits">
<p>© Nuances & Intérieurs</p>
<a href="#">Mentions légales</a>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="js/script.js"></script>
</body>
</html>