forked from kongraphael/Bac-a-Sable-1
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path1.5_Floats.html
154 lines (133 loc) · 7.4 KB
/
1.5_Floats.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
154
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bac à sable 1</title>
<link rel="stylesheet" href="style.css">
<!-- Le CSS de Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- JQUERY -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<!-- popper.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<!-- Le JavaScript de Bootstrap -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</head>
<body>
<h1 class="text-center mt-5 display-2">Contenu</h1>
<h2 class="text-center mt-0 display-4">Floats et Fixed</h2>
<br>
<br>
<div class="container d-flex flex-wrap justify-content-center">
<a href="1_Titre.html" class="btn btn-primary m-2">Titre et Typographie</a>
<a href="1.1_Display.html" class="btn btn-primary m-2">Alignement et Display</a>
<a href="1.2_Marge.html" class="btn btn-primary m-2">Marge, Padding</a>
<a href="1.3_Background.html" class="btn btn-primary m-2">Couleurs et Backgrounds</a>
<a href="1.4_Taille.html" class="btn btn-primary m-2">Taille et Bordures</a>
<a href="1.5_Floats.html" class="btn btn-primary m-2">Floats et Fixed position</a>
<a href="1.6_Images.html" class="btn btn-primary m-2">Images</a>
</div>
<br>
<br>
<hr>
<div class="container w-75">
<!-- FLOATS -->
<div>Float left</div>
<br>
<div>Float right</div>
<br>
<div>Float none</div>
<br>
<!-- float responsive -->
<div>Float responsive</div>
<br>
<br>
<br>
<!-- le CLEARFIX hack -->
<div>
<button>Float Left</button>
<button>Float Right</button>
</div>
<!-- FIXED TOP -->
<h3>Fixed Top</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae iure natus, fuga provident molestias,
voluptates molestiae
aperiam sit dicta a assumenda nesciunt quos adipisci reprehenderit animi ipsum unde quasi nobis veniam,
modi.
Fuga natus harum, maxime corporis rerum, maiores delectus aliquam aut quo incidunt dignissimos temporibus?
Vitae
dolorem accusamus voluptatibus illo aut nam praesentium obcaecati quaerat cupiditate distinctio tempora eius
esse fuga, repellat fugit harum quia nihil sit in debitis expedita. Eos, voluptates eum rem voluptatum
tempore
accusamus soluta enim, animi in voluptatibus aliquam distinctio totam repudiandae necessitatibus quidem
consequatur
incidunt aliquid ad! Inventore ratione, consequatur eligendi iusto esse iure officia praesentium magni in!
Nemo
tempora, voluptatem facilis reprehenderit minima reiciendis alias similique est rem debitis id expedita
voluptatum
porro fugiat magni inventore neque. </p>
<!-- Effet Sticky -->
<h3 class="sticky-top">Sticky</h3>
<p>Est molestias sunt quae quibusdam sequi odit, iusto expedita tempore aspernatur ipsum, necessitatibus rerum
debitis,
harum, voluptatibus dolorem. Reprehenderit ex aperiam tempore. Cumque ut iste ullam non pariatur, qui
architecto,
commodi illo praesentium debitis similique, molestiae harum distinctio inventore incidunt enim atque
repudiandae
eius molestias exercitationem tempore odio dignissimos iusto officia. Libero quasi dicta quos est eveniet
magni
deserunt aut vero id ad, incidunt nostrum provident tempora modi placeat voluptatem, quod excepturi ipsam
aspernatur
necessitatibus molestias possimus veritatis sequi. Minus ducimus maiores debitis, nulla magni eum ratione
numquam
deleniti sunt et dolorum necessitatibus cumque fugit libero recusandae impedit, quaerat, nemo. Vel
temporibus
amet alias mollitia aspernatur error sint, doloremque, porro blanditiis quia atque ratione reiciendis,
praesentium
sed doloribus excepturi. Eius tenetur quis veniam enim atque fugit, a itaque dignissimos iusto, tempore
fugiat
minima libero quasi exercitationem corrupti nam sequi, doloremque quae repudiandae quisquam iure nisi totam
consectetur.
Corrupti corporis doloribus dolore iusto perspiciatis ipsum, enim sapiente nobis ullam delectus aperiam
eaque
harum sequi porro! Reprehenderit hic dolores repellat deleniti, illo nostrum nam at odio quasi quis eaque
asperiores
culpa doloremque ad velit ullam ratione omnis quae adipisci autem necessitatibus. Quod nam non maiores
assumenda
quae eius nobis cum suscipit, optio aliquid beatae modi tempora delectus voluptatibus debitis earum natus
amet
libero itaque quasi expedita, maxime repudiandae! Repudiandae sunt similique eum, provident deserunt vitae.
Maxime
nostrum, nemo quia eius rerum quas recusandae. Molestiae ullam dignissimos illo eum necessitatibus culpa ea,
distinctio maiores molestias aliquam, eligendi soluta cumque odio quaerat cupiditate similique in accusamus
dolorum
nobis. Ea, rem fugit. Minima quae magni laboriosam possimus corporis quidem recusandae aspernatur
dignissimos
accusamus adipisci, maiores, tenetur excepturi doloremque eum consequuntur? Expedita possimus sit, vel neque
fugiat quo ab? Quaerat alias, molestias rerum repudiandae, iste, voluptatem consequatur ex enim tenetur
quidem
expedita, provident vel reiciendis. Ea ipsam suscipit ex ab nulla est, aspernatur nesciunt consequatur
cumque
laudantium. Unde ab earum eius vero obcaecati reiciendis omnis quod culpa harum, modi, possimus molestiae
voluptatibus
beatae, minima ad accusamus quibusdam! Dolor nostrum impedit culpa nemo expedita, numquam dignissimos totam
ex
reprehenderit consectetur neque dicta deserunt, recusandae porro ipsa accusamus maxime soluta eum facilis
temporibus
nesciunt accusantium. Placeat provident facere blanditiis doloremque eos tempora officia doloribus deserunt
molestias
voluptates velit hic, tenetur cupiditate ab. Hic, unde!</p>
<!-- FIXED BOTTOM -->
<h3>Fixed Bottom</h3>
</div>
</body>
</html>