html-css-bootstrap/page.html at main · Nathan-html/html-css-bootstrap · GitHub

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<link rel="stylesheet" type="text/css" href="style.css">
		<title>Exercice</title>
	</head>

	<body>
		<header>
			<img src="logo-hb.png" alt="logo hb" id="logo-hb" />
			<nav>
				<ul>
					<li><a href="#">Cours HTML</a></li>
					<li><a href="#">Cours CSS</a></li>
					<li><a href="#">Cas pratiques</a></li>
					<li><a href="#">Framework</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</nav>
		</header>

		<div class="container">

			<section class="parcours">
				<h1 class="titre-page">Sélectionnez votre formation</h1>

				<div class="liste-parcours">
					<div class="formation html">
						<h2>Parcours HTML</h2>
						<p>Découvrez comment créer votre première page web, apprenez à mettre en place les balises, à structurer votre page afin qu'elle soit appréciée par les navigateurs.</p>
						<a href="#"><button class="bouton-bleu">Je me forme maintenant</button></a>
					</div>

					<div class="formation css">
						<h2>Parcours CSS</h2>
						<p>Apprenez à présenter votre site à l'aide du langage CSS3. A la fin de ce cours, vos pages web auront un style beaucoup plus attrayant grâce aux nombreuses propriétés. </p>
						<a href="#" ><button class="bouton-vert">Je me forme maintenant</button></a>
					</div>

					<div class="formation framework">
						<h2>Parcours Framework</h2>
						<p>Découvrez comment créer des pages web rapidement tout en ayant un visuel esthétique et responsive. Nous utiliserons le framework le plus connu: bootstrap.</p>
						<a href="#" ><button class="bouton-rouge">Je me forme maintenant</button></a>
					</div>
				</div>
			</section>

			<section class="proprietes">
				<div class="colonne-css">
					<h2 class="bloc-titre">Propriétés CSS</h2>

					<div class="bloc-formatage bloc-css">
						<h3>Formater un texte</h3>
					</div>

					<div class="bloc-couleur-fond bloc-css">
						<h3>Couleurs et fond</h3>
					</div>

					<div class="bloc-formatage bloc-css">
						<h3>Transparence</h3>
					</div>

					<div class="bloc-couleur-fond bloc-css">
						<h3>Bordures et ombres</h3>
					</div>

					<div class="bloc-formatage bloc-css">
						<h3>Création d'apparences dynamiques</h3>
					</div>

					<div class="bloc-couleur-fond bloc-css">
						<h3>Flexbox</h3>
					</div>
				</div>

				<div class="colonne-html">
					<h2 class="bloc-titre">Balises HTML</h2>

					<div class="bloc-html">
						<h3>Afficher des éléments</h3>
					</div>

					<div class="bloc-html">
						<h3>balises de mise en valeur</h3>
					</div>

					<div class="bloc-html">
						<h3>balises structurantes</h3>
					</div>
				</div>
			</section>
		</div>

		<footer>
			<a href="#">Mentions Légales</a>
			<p>Formation Web Statique</p>
			<p>2021</p>
		</footer>
	</body>

</html>