-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
153 lines (141 loc) · 6.51 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
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<title>MyWebSite</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1> MyWebSite </h1>
<nav>
<ul>
<li> <a href="#">Accueil</a> </li>
<li> <a href="#etapes">ETAPES</a>
<!-- SOUS MENU ETAPES-->
<ul>
<li><a href="#etapes">CONCEPTION</a> </li>
<li><a href="#etapes">Developpement & Test</a> </li>
<li><a href="#etapes">Mise en ligne</a> </li>
</ul>
</li>
<li> <a href="#servives">SERVICES</a>
<!-- SOUS MENU SERVICES-->
<ul>
<li><a href="#servives">CREATION SITE WEB</a> </li>
<li><a href="#servives">HEBERGEMENT</a> </li>
</ul>
</li>
<li> <a href="#contact">CONTACT</a> </li>
</ul>
</nav>
<div id="all-slider">
<ul id="slider">
<li class="slide"> <img src="images/slide/images-slide1.jpg" alt="image slider 1"> </li>
<li class="slide"> <img src="images/slide/images-slide2.jpg" alt="image slider 2"> </li>
<li class="slide"> <img src="images/slide/images-slide3.jpg" alt="image slider 3"> </li>
<li class="slide"> <img src="images/slide/images-slide4.jpg" alt="image slider 4"> </li>
<li class="slide"> <img src="images/slide/images-slide5.jpg" alt="image slider 5"> </li>
</ul>
</div>
<div id="titre">
<h3>Apprendre à créer un site web <br/> en toute simplicité !</h3>
<button type="button" name="button" class="btn-servives"><a href="#servives"> Nos Services</a> </button>
<button type="button" name="button" class="btn-contact"> <a href="#contact">Contactez-Nous</a></button>
</div>
</header>
<section id="container">
<!--*********************************** CONTAINER *************************************-->
<section id="etapes">
<h4>Etapes !</h4>
<div class="etape1">
<img src="images/etapes/conception.png" alt="Image descriptive de la partie conception">
<h4>CONCEPTION</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<button type="button" name="button" class="btn-savoir-plus"> <a href="#">En savoir plus</a> </button>
</div>
<div class="etape2">
<img src="images/etapes/developpement-test.png" alt="Image descriptive de la partie Développement & Test">
<h4>Développement & Test</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<button type="button" name="button" class="btn-savoir-plus"> <a href="#">En savoir plus</a> </button>
</div>
<div class="etape3">
<img src="images/etapes/mise-en-ligne.png" alt="Image descriptive de la partie Mise en ligne">
<h4>Mise en ligne</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<button type="button" name="button" class="btn-savoir-plus"> <a href="#">En savoir plus</a> </button>
</div>
</section>
<!--*********************************** SERVICES *************************************-->
<section id="servives">
<h4>Nos Services</h4>
<div class="services1" style="background-image: url(images/services/creer-un-site-web.jpg);">
<div class="infos">
<h4>Création de site web</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<button type="button" name="button" class="btn-savoir-plus"> <a href="#">En savoir plus</a> </button>
</div>
</div>
<div class="services2" style="background-image: url(images/services/hebergement.jpg);">
<div class="infos">
<h4>Hebergement</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<button type="button" name="button" class="btn-savoir-plus"> <a href="#">En savoir plus</a> </button>
</div>
</div>
</section>
<!--*********************************** CONTACT *************************************-->
<section id="contact">
<h4>Contactez-Nous !</h4>
<p>
Pour nous contacter, merci de nous laisser un message à partir de formulaire
de contact ci-dessous.
</p>
<form class="" action="" method="">
<label for="">Nom :</label><br/>
<input type="text" name="" value="" placeholder=" Merci de saisir votre nom, Exemple: DUBOIS"><br/>
<label for="">Prénoms:</label><br/>
<input type="text" name="" value="" placeholder=" Merci de saisir votre prénom, Exemple: Julie"><br/>
<label for="">Tél :</label><br/>
<input type="text" name="" value="" placeholder=" Merci de saisir votre numéro, Exemple: 06.09.09..."><br/>
<label for="">Message :</label><br/>
<textarea name="name" rows="3" cols="80">Merci de saisir votre message </textarea><br/>
<button type="button" name="button" class="btn-envoyer"> <a href="#">Envoyer</a> </button>
</form>
</section>
</section>
<footer>
<div id="titre-footer">
MyWebSite <span class="point">.</span>
</div>
<div id="menu-footer">
<span>
<a href="#"> | ACCUEIL | </a>
<a href="#etapes"> | ETAPES | </a>
<a href="#servives"> | SERVICES | </a>
<a href="#contact"> | CONTACT | </a>
</span>
</div>
<div id="copyright">
© 2019 By Espero-Soft Informatique
</div>
</footer>
</body>
</html>