├── .gitignore
├── README.md
├── divers
└── assets-alan
│ ├── dashboard-alan.png
│ ├── emoji-building.svg
│ ├── emoji-hello.svg
│ ├── emoji-painter.svg
│ ├── emoji-restaurant.svg
│ ├── emoji-rocket.svg
│ ├── homepage-dashboard.png
│ ├── homepage-mobile.png
│ ├── logo.png
│ ├── loop-video.mp4
│ ├── marmot-pointing-right.png
│ ├── meditation.png
│ └── office.png
├── projet-alan-05.04.2022.zip
├── projet-alan-07.04.2022.zip
├── projet-alan-12.04.2022.zip
├── projet-alan-14.04.2022.zip
├── projet-alan-16.03.2022.zip
├── projet-alan-23.03.2022.zip
├── projet-alan-29.03.2022.zip
├── projet-alan
├── css
│ ├── reset.css
│ └── styles.css
├── images
│ ├── emoji-building.svg
│ ├── emoji-painter.svg
│ ├── emoji-restaurant.svg
│ ├── emoji-rocket.svg
│ ├── favicon.ico
│ ├── favicon.png
│ ├── homepage-dashboard.png
│ ├── homepage-mobile.png
│ ├── joconde.jpg
│ ├── logo.png
│ ├── marmot.png
│ ├── meditation.png
│ └── stars.svg
├── index.html
└── videos
│ └── loop-video.mp4
├── theorie-1
├── images
│ └── dossier-a
│ │ └── telephone.png
└── index.html
├── theorie-2
├── css
│ └── styles.css
└── index.html
├── theorie-3
├── css
│ ├── styles-default.css
│ └── styles-flex.css
├── display-default.html
├── display-flex.html
└── images
│ └── telephone.png
├── theorie-4
├── flux
│ ├── index.html
│ └── styles.css
└── position
│ ├── index.html
│ └── styles.css
├── theorie-5
├── images
│ └── telephone.png
├── index.html
└── styles.css
└── theorie-6
├── index.html
└── styles.css
/.gitignore:
--------------------------------------------------------------------------------
1 | # fichiers mac
2 | .DS_Store
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # html-css
2 |
3 | ## Présentation
4 | 👋 Je m'appelle Charline, je suis développeuse full stack mais spécialisée front-end.
5 |
6 | ## Cours
7 | Ce cours est composé d'une série de 10 lives, avec une alternance entre des live "Théoriques" et des lives "Projets".
8 | Durant les lives théoriques nous allons abordés des notions des différents languages, et les tester via des "petits bouts" de code, des exemples.
9 | Et les lives "Projet" prendront le relai et permettront de mettre en application les notions abordées dans un exercice "très concret" : la reproduction du site Alan.com
10 |
11 | ## Pré-requis
12 | - Pas de niveau d'entrée
13 | - Utiliser un éditeur de texte, celui avec lequel vous êtes le plus à l'aise (VS Code, Sublime Text, Atom, etc...)
14 | - Avoir un navigateur récent pour visualiser le rendu de notre code (Firefox, Google Chrome, Edge, Safari, Opera)
15 |
16 | ## Planning - HTML & CSS
17 |
18 | | Numéro | Date | Heure | Type | Titre | Replay |
19 | |--------|------------|-----------|-----------|--------------------------------------------------------------|-------------------------------------------------------|
20 | | 00 | 02/03/2022 | 10h - 11h | Théorique | Introduction au HTML (et vive les problèmes techniques 😅) | https://app.studi.fr/#/dashboard/events/29409/details |
21 | | 01 | 03/03/2022 | 10h - 11h | Théorique | Découverte du HTML 🙂 | https://app.studi.fr/#/dashboard/events/29410/details |
22 | | 02 | 08/03/2022 | 10h - 11h | Projet | Lancement du projet "copycat" Alan 🙌 | https://app.studi.fr/#/dashboard/events/29411/details |
23 | | 03 | 09/03/2022 | 10h - 11h | Théorique | Découverte du CSS 🙃 | https://app.studi.fr/#/dashboard/events/29469/replay |
24 | | 04 | 10/03/2022 | 10h - 11h | Théorique | La techno moderne CSS qui facilite l'intégration : flexbox 🚀 | https://app.studi.fr/#/dashboard/events/29470/replay |
25 | | 05 | 15/03/2022 | 10h - 11h | Théorique | Comment positionner des éléments sans flexbox 🤔 | https://app.studi.fr/#/dashboard/events/29471/replay |
26 | | 06 | 16/03/2022 | 10h - 11h | Projet | Suite de intégration du projet Alan 🖌 | https://app.studi.fr/#/dashboard/events/29472/details |
27 | | 07 | 22/03/2022 | 16h - 17h | Théorique | Nouvelle étape CSS : le responsive 🧐 | https://app.studi.fr/#/dashboard/events/29473/details |
28 | | 08 | 23/03/2022 | 10h - 11h | Projet | Responsive de notre projet Alan 📱 | https://app.studi.fr/#/dashboard/events/29474/details |
29 | | 09 | 24/03/2022 | 10h - 11h | Théorique | Dernière étape CSS, les notions avancées 💃 | https://app.studi.fr/#/dashboard/events/29475/details |
30 | | 10 | 29/03/2022 | 10h - 11h | Projet | Finalisation de notre intégration 🥳 | https://app.studi.fr/#/dashboard/events/30114/details |
31 |
32 |
33 | ## Planning - HTML & CSS (suite niveau 1)
34 |
35 | | Numéro | Date | Heure | Type | Titre | Replay |
36 | |--------|------------|-----------|--------|-----------------------|-----------------------|
37 | | 01 | 05/04/2022 | 10h - 11h | Projet | Suite recode Alan.com | https://app.studi.fr/#/dashboard/events/31193/replay |
38 | | 02 | 07/04/2022 | 10h - 11h | Projet | Suite recode Alan.com | https://app.studi.fr/#/dashboard/events/31194/replay |
39 | | 03 | 12/04/2022 | 10h - 11h | Projet | Suite recode Alan.com | https://app.studi.fr/#/dashboard/events/31195/replay |
40 | | 04 | 14/04/2022 | 18h - 19h | Projet | Suite recode Alan.com | https://app.studi.fr/#/dashboard/events/31196/replay |
41 |
42 | ## Ressources
43 |
44 | - [🚦 Valider mon code](https://validator.w3.org/)
45 | - [📖 Documentation html - en français](https://developer.mozilla.org/fr/)
46 | - [📖 Documentation html - en anglais](https://www.w3schools.com/html/)
47 | - [🤯 Des sites qui changent](https://www.awwwards.com/)
48 | - [🎮 Jeu CSS : sur les sélecteurs](https://flukeout.github.io/)
49 | - [📖 Copier / Coller des emojis](https://www.emojicopy.com/)
50 | - [📖 Guide visuel pour apprendre flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
51 | - [🎮 Jeu CSS : sur flexbox](https://flexboxfroggy.com/#fr)
52 | - [💡 Compatibilité navigateur des propriétés CSS](https://caniuse.com/)
53 | - [🗂 Google fonts](https://fonts.google.com/)
54 | - [📖 BEM : Convention de nommage](https://www.alticreation.com/bem-pour-le-css/)
55 | - [🛠 Courbes de bézier personnalisés](https://cubic-bezier.com/)
56 | - [🛠 Boxe shadow generator](https://www.cssmatic.com/box-shadow)
--------------------------------------------------------------------------------
/divers/assets-alan/dashboard-alan.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/charline-studi/2204-html-css/745ceee26119b9b04dc735dc9639ee7997a784d0/divers/assets-alan/dashboard-alan.png
--------------------------------------------------------------------------------
/divers/assets-alan/emoji-building.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/divers/assets-alan/emoji-hello.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
15 |
--------------------------------------------------------------------------------
/divers/assets-alan/emoji-painter.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
15 |
17 |
25 |
36 |
42 |
48 |
54 |
59 |
67 |
77 |
83 |
85 |
93 |
95 |
104 |
106 |
114 |
116 |
124 |
--------------------------------------------------------------------------------
/divers/assets-alan/emoji-restaurant.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
15 |
17 |
25 |
41 |
47 |
53 |
59 |
64 |
72 |
75 |
88 |
90 |
96 |
98 |
106 |
108 |
116 |
120 |
127 |
129 |
135 |
--------------------------------------------------------------------------------
/divers/assets-alan/emoji-rocket.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
14 |
16 |
25 |
27 |
35 |
37 |
43 |
45 |
51 |
53 |
61 |
67 |
76 |
79 |
88 |
98 |
104 |
106 |
113 |
--------------------------------------------------------------------------------
/divers/assets-alan/homepage-dashboard.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/charline-studi/2204-html-css/745ceee26119b9b04dc735dc9639ee7997a784d0/divers/assets-alan/homepage-dashboard.png
--------------------------------------------------------------------------------
/divers/assets-alan/homepage-mobile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/charline-studi/2204-html-css/745ceee26119b9b04dc735dc9639ee7997a784d0/divers/assets-alan/homepage-mobile.png
--------------------------------------------------------------------------------
/divers/assets-alan/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/charline-studi/2204-html-css/745ceee26119b9b04dc735dc9639ee7997a784d0/divers/assets-alan/logo.png
--------------------------------------------------------------------------------
/divers/assets-alan/loop-video.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/charline-studi/2204-html-css/745ceee26119b9b04dc735dc9639ee7997a784d0/divers/assets-alan/loop-video.mp4
--------------------------------------------------------------------------------
/divers/assets-alan/marmot-pointing-right.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/charline-studi/2204-html-css/745ceee26119b9b04dc735dc9639ee7997a784d0/divers/assets-alan/marmot-pointing-right.png
--------------------------------------------------------------------------------
/divers/assets-alan/meditation.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/charline-studi/2204-html-css/745ceee26119b9b04dc735dc9639ee7997a784d0/divers/assets-alan/meditation.png
--------------------------------------------------------------------------------
/divers/assets-alan/office.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/charline-studi/2204-html-css/745ceee26119b9b04dc735dc9639ee7997a784d0/divers/assets-alan/office.png
--------------------------------------------------------------------------------
/projet-alan-05.04.2022.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/charline-studi/2204-html-css/745ceee26119b9b04dc735dc9639ee7997a784d0/projet-alan-05.04.2022.zip
--------------------------------------------------------------------------------
/projet-alan-07.04.2022.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/charline-studi/2204-html-css/745ceee26119b9b04dc735dc9639ee7997a784d0/projet-alan-07.04.2022.zip
--------------------------------------------------------------------------------
/projet-alan-12.04.2022.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/charline-studi/2204-html-css/745ceee26119b9b04dc735dc9639ee7997a784d0/projet-alan-12.04.2022.zip
--------------------------------------------------------------------------------
/projet-alan-14.04.2022.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/charline-studi/2204-html-css/745ceee26119b9b04dc735dc9639ee7997a784d0/projet-alan-14.04.2022.zip
--------------------------------------------------------------------------------
/projet-alan-16.03.2022.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/charline-studi/2204-html-css/745ceee26119b9b04dc735dc9639ee7997a784d0/projet-alan-16.03.2022.zip
--------------------------------------------------------------------------------
/projet-alan-23.03.2022.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/charline-studi/2204-html-css/745ceee26119b9b04dc735dc9639ee7997a784d0/projet-alan-23.03.2022.zip
--------------------------------------------------------------------------------
/projet-alan-29.03.2022.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/charline-studi/2204-html-css/745ceee26119b9b04dc735dc9639ee7997a784d0/projet-alan-29.03.2022.zip
--------------------------------------------------------------------------------
/projet-alan/css/reset.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | a {
8 | color: inherit;
9 | text-decoration: none;
10 | }
11 |
12 | ul {
13 | list-style: none;
14 | }
--------------------------------------------------------------------------------
/projet-alan/css/styles.css:
--------------------------------------------------------------------------------
1 | /*
2 | *
3 | Variables
4 | *
5 | */
6 |
7 | :root {
8 | --color-blue: #2e94fa;
9 | --color-green: #86e8b5;
10 | --color-orange: #ff7045;
11 | }
12 |
13 | body {
14 | background-color: white;
15 | font-family: 'Raleway', sans-serif;
16 | }
17 |
18 |
19 | /*
20 | *
21 | Header
22 | *
23 | */
24 |
25 | .header {
26 | background-color: rgba(255, 255, 255, 0.75);
27 | display: flex;
28 | justify-content: space-between;
29 | align-items: center;
30 | padding: 10px;
31 | position: fixed;
32 | top: 0;
33 | left: 0;
34 | right: 0;
35 | z-index: 2;
36 | }
37 |
38 | .header__image {
39 | width: 100px;
40 | }
41 |
42 | .header__link {
43 | padding: 10px 20px;
44 | border-radius: 10px;
45 | font-weight: 600;
46 | }
47 |
48 | .header__link--blue {
49 | background-color: var(--color-blue);
50 | color: #ffffff;
51 | }
52 |
53 | .header__link--grey {
54 | background-color: #f4f4f4;
55 | color: var(--color-blue);
56 | }
57 |
58 | @media screen and (max-width: 800px) {
59 | .header__link--blue {
60 | display: none;
61 | }
62 | }
63 |
64 |
65 | /*
66 | *
67 | Flux
68 | *
69 | */
70 |
71 | .flux {
72 | width: 100%;
73 | max-width: 1200px;
74 | margin-left: auto;
75 | margin-right: auto;
76 | }
77 |
78 | @media screen and (max-width: 1300px) {
79 | .flux {
80 | max-width: 1000px
81 | }
82 | }
83 |
84 | @media screen and (max-width: 1100px) {
85 | .flux {
86 | max-width: 100%;
87 | margin-left: 50px;
88 | margin-right: 50px;
89 | width: auto;
90 | }
91 | }
92 |
93 | @media screen and (max-width: 450px) {
94 | .flux {
95 | margin-left: 25px;
96 | margin-right: 25px;
97 | }
98 | }
99 |
100 |
101 | /*
102 | *
103 | Texts
104 | *
105 | */
106 |
107 | .t-title {
108 | font-size: 40px;
109 | }
110 |
111 | .t-title strong {
112 | color: var(--color-green)
113 | }
114 |
115 | .t-link {
116 | color: var(--color-blue);
117 | font-weight: 600;
118 | }
119 |
120 |
121 | /*
122 | *
123 | Cover
124 | *
125 | */
126 |
127 | .cover {
128 | background-color: var(--color-green);
129 | padding-bottom: 30px;
130 | padding-top: 120px;
131 | position: relative;
132 | }
133 |
134 | .cover__flux {
135 | display: flex;
136 | position: relative;
137 | z-index: 1;
138 | }
139 |
140 | .cover__video {
141 | position: absolute;
142 | top: 0;
143 | left: 0;
144 | width: 100%;
145 | height: 100%;
146 | object-fit: cover;
147 | object-position: center;
148 | z-index: 0;
149 | }
150 |
151 | .cover__container-texts,
152 | .cover__container-images {
153 | width: 50%;
154 | }
155 |
156 | .cover__container-texts {
157 | padding-right: 120px;
158 | }
159 |
160 | .cover__title {
161 | font-size: 60px;
162 | font-weight: 800;
163 | margin-bottom: 25px;
164 | }
165 |
166 | .cover__introduction {
167 | font-size: 16px;
168 | font-weight: 600;
169 | line-height: 1.5;
170 | margin-bottom: 20px;
171 | }
172 |
173 | .cover__mascot {
174 | width: 75%;
175 | height: auto;
176 | margin-left: auto;
177 | margin-right: auto;
178 | display: block;
179 | position: relative;
180 | bottom: -30px;
181 | }
182 |
183 | .cover__container-images {
184 | position: relative;
185 | }
186 |
187 | .cover__image {
188 | position: absolute;
189 | border-radius: 10px;
190 | transition: all 0.5s ease-in-out;
191 | }
192 |
193 | .cover__image:first-child {
194 | bottom: 0;
195 | right: 0;
196 | width: 95%;
197 | height: auto;
198 | }
199 |
200 | .cover__image:first-child:hover {
201 | transform-origin: bottom right;
202 | transform: rotate(5deg) scale(1.1) translateX(50px);
203 | }
204 |
205 | .cover__image:last-child {
206 | top: 0;
207 | left: 0;
208 | width: auto;
209 | height: 85%;
210 | }
211 |
212 | @media screen and (max-width: 1100px) {
213 | .cover__flux {
214 | flex-direction: column;
215 | }
216 | .cover__container-texts {
217 | width: 100%;
218 | padding-right: 30%;
219 | }
220 | .cover__mascot {
221 | display: none
222 | }
223 | .cover__container-images {
224 | height: 450px;
225 | width: 550px;
226 | align-self: center;
227 | }
228 | }
229 |
230 | @media screen and (max-width: 700px) {
231 | .cover__container-images,
232 | .cover__video {
233 | display: none
234 | }
235 | .cover {
236 | background-color: white
237 | }
238 | .cover__mascot {
239 | display: block;
240 | max-height: 150px;
241 | object-fit: contain;
242 | }
243 | .cover__container-texts {
244 | padding-right: 0
245 | }
246 | .cover__title {
247 | font-size: 40px
248 | }
249 | }
250 |
251 |
252 | /* 450px = mobile */
253 |
254 | @media screen and (max-width: 450px) {
255 | .cover__title {
256 | font-size: 25px
257 | }
258 | }
259 |
260 |
261 | /*
262 | *
263 | Offers
264 | *
265 | */
266 |
267 | .offers {
268 | padding: 100px 0;
269 | }
270 |
271 | .offers__title {
272 | width: 50%;
273 | margin-bottom: 25px;
274 | }
275 |
276 | .offers__introduction {
277 | background-color: #fff3fc;
278 | padding: 20px;
279 | border-radius: 10px;
280 | font-size: 18px;
281 | font-weight: 600;
282 | color: #e356b2;
283 | margin-bottom: 50px;
284 | }
285 |
286 | .offers__introduction span {
287 | font-size: 25px;
288 | }
289 |
290 | .offers__list {
291 | display: flex;
292 | justify-content: space-between;
293 | }
294 |
295 | @media screen and (max-width: 1100px) {
296 | .offers__title {
297 | width: 70%;
298 | }
299 | .offers__list {
300 | flex-wrap: wrap;
301 | }
302 | }
303 |
304 | @media screen and (max-width: 700px) {
305 | .offers__title {
306 | width: 100%;
307 | }
308 | }
309 |
310 |
311 | /* Start : Card-offer */
312 |
313 | .card-offer {
314 | width: 23%;
315 | border-radius: 10px;
316 | overflow: hidden;
317 | box-shadow: 0px 0px 83px -33px rgba(0, 0, 0, 0.43);
318 | }
319 |
320 | .card-offer__container-title {
321 | background-color: #ebf5ff;
322 | display: flex;
323 | align-items: center;
324 | padding: 10px;
325 | }
326 |
327 | .card-offer__icon {
328 | width: 45px;
329 | margin-right: 10px;
330 | }
331 |
332 | .card-offer__title {
333 | color: var(--color-blue)
334 | }
335 |
336 | .card-offer__description {
337 | padding: 20px 10px 10px 10px;
338 | }
339 |
340 | @media screen and (max-width: 1100px) {
341 | .card-offer {
342 | width: 48%;
343 | margin-bottom: 25px;
344 | }
345 | }
346 |
347 | @media screen and (max-width: 700px) {
348 | .card-offer {
349 | width: 100%;
350 | }
351 | }
352 |
353 |
354 | /* End : Card-offer */
355 |
356 |
357 | /*
358 | *
359 | Services
360 | *
361 | */
362 |
363 | .services__title {
364 | width: 75%;
365 | margin-bottom: 50px;
366 | }
367 |
368 | @media screen and (max-width: 700px) {
369 | .services__title {
370 | width: 100%
371 | }
372 | }
373 |
374 | .bloc-service {
375 | display: flex;
376 | align-items: center;
377 | margin-bottom: 50px;
378 | }
379 |
380 | .bloc-service:nth-child(even) {
381 | flex-direction: row-reverse;
382 | }
383 |
384 | .bloc-service:nth-child(even) .bloc-service__container-texts {
385 | padding-left: 2.5%;
386 | }
387 |
388 | .bloc-service:nth-child(odd) .bloc-service__container-texts {
389 | padding-right: 5%;
390 | }
391 |
392 | .bloc-service__container-texts,
393 | .bloc-service__image {
394 | width: 50%;
395 | }
396 |
397 | .bloc-service__title {
398 | font-size: 30px;
399 | margin-bottom: 25px;
400 | }
401 |
402 | .bloc-service__title span {
403 | color: var(--color-orange);
404 | }
405 |
406 | .bloc-service__description {
407 | margin-bottom: 15px;
408 | }
409 |
410 | @media screen and (max-width: 1100px) {
411 | .bloc-service,
412 | .bloc-service:nth-child(even) {
413 | flex-direction: column;
414 | }
415 | .bloc-service__container-texts,
416 | .bloc-service__image {
417 | width: 100%;
418 | }
419 | }
420 |
421 |
422 | /*
423 | *
424 | Testimonies
425 | *
426 | */
427 |
428 | .testimonies__title {
429 | margin-bottom: 50px;
430 | }
431 |
432 | .testimonies__container {
433 | position: relative;
434 | }
435 |
436 | .testimonies__video {
437 | position: absolute;
438 | width: 100%;
439 | height: calc(100% - 50px);
440 | object-fit: cover;
441 | z-index: -1;
442 | bottom: 0;
443 | }
444 |
445 | .testimonies__list {
446 | display: flex;
447 | justify-content: space-between;
448 | margin-bottom: 50px;
449 | }
450 |
451 |
452 | /* BLOCK : Card User */
453 |
454 | .card-user {
455 | width: 30%;
456 | background-color: white;
457 | padding: 20px;
458 | border-radius: 20px;
459 | box-shadow: 0px 0px 52px 5px rgba(0, 0, 0, 0.16);
460 | }
461 |
462 | .card-user__top {
463 | display: flex;
464 | align-items: center;
465 | margin-bottom: 20px;
466 | }
467 |
468 | .card-user__avatar {
469 | width: 75px;
470 | height: 75px;
471 | border-radius: 100%;
472 | object-fit: cover;
473 | object-position: top center;
474 | border: solid 5px var(--color-green)
475 | }
476 |
477 | .card-user__informations {
478 | margin-left: 10px;
479 | }
480 |
481 | .card-user__name {
482 | font-weight: 600;
483 | margin-bottom: 5px;
484 | }
485 |
486 | .card-user__job {
487 | margin-bottom: 5px;
488 | }
489 |
490 | .card-user__key-points {
491 | color: grey
492 | }
493 |
494 | .card-user__quote {
495 | line-height: 1.5;
496 | margin-bottom: 20px;
497 | }
--------------------------------------------------------------------------------
/projet-alan/images/emoji-building.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/projet-alan/images/emoji-painter.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
15 |
17 |
25 |
36 |
42 |
48 |
54 |
59 |
67 |
77 |
83 |
85 |
93 |
95 |
104 |
106 |
114 |
116 |
124 |
--------------------------------------------------------------------------------
/projet-alan/images/emoji-restaurant.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
15 |
17 |
25 |
41 |
47 |
53 |
59 |
64 |
72 |
75 |
88 |
90 |
96 |
98 |
106 |
108 |
116 |
120 |
127 |
129 |
135 |
--------------------------------------------------------------------------------
/projet-alan/images/emoji-rocket.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
14 |
16 |
25 |
27 |
35 |
37 |
43 |
45 |
51 |
53 |
61 |
67 |
76 |
79 |
88 |
98 |
104 |
106 |
113 |
--------------------------------------------------------------------------------
/projet-alan/images/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/charline-studi/2204-html-css/745ceee26119b9b04dc735dc9639ee7997a784d0/projet-alan/images/favicon.ico
--------------------------------------------------------------------------------
/projet-alan/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/charline-studi/2204-html-css/745ceee26119b9b04dc735dc9639ee7997a784d0/projet-alan/images/favicon.png
--------------------------------------------------------------------------------
/projet-alan/images/homepage-dashboard.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/charline-studi/2204-html-css/745ceee26119b9b04dc735dc9639ee7997a784d0/projet-alan/images/homepage-dashboard.png
--------------------------------------------------------------------------------
/projet-alan/images/homepage-mobile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/charline-studi/2204-html-css/745ceee26119b9b04dc735dc9639ee7997a784d0/projet-alan/images/homepage-mobile.png
--------------------------------------------------------------------------------
/projet-alan/images/joconde.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/charline-studi/2204-html-css/745ceee26119b9b04dc735dc9639ee7997a784d0/projet-alan/images/joconde.jpg
--------------------------------------------------------------------------------
/projet-alan/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/charline-studi/2204-html-css/745ceee26119b9b04dc735dc9639ee7997a784d0/projet-alan/images/logo.png
--------------------------------------------------------------------------------
/projet-alan/images/marmot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/charline-studi/2204-html-css/745ceee26119b9b04dc735dc9639ee7997a784d0/projet-alan/images/marmot.png
--------------------------------------------------------------------------------
/projet-alan/images/meditation.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/charline-studi/2204-html-css/745ceee26119b9b04dc735dc9639ee7997a784d0/projet-alan/images/meditation.png
--------------------------------------------------------------------------------
/projet-alan/images/stars.svg:
--------------------------------------------------------------------------------
1 |
2 |
9 |
--------------------------------------------------------------------------------
/projet-alan/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Copycat - Alan
7 |
8 |
9 |
31 |
32 |
33 |
34 |
35 |
36 |
L’assurance santé qui fait simple.
37 |
14 000 entreprises de toutes tailles, des start-ups aux grandes entreprises, et des milliers d’indépendants font confiance à Alan pour leur protection santé.
38 |
39 |
40 |
41 |
42 |
43 |
44 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 | Nos offres pensées pour vous, avec vous
55 |
56 | 👋 Salarié(e) d'une entreprise qui a rejoint Alan ?
57 | Découvrez comment vous inscrire
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
Startups & PME
66 |
Gagnez un temps fou sur la gestion de votre assurance santé et prenez soin de vos salariés.
68 |
69 |
70 |
71 |
72 |
73 |
Grandes entreprises
74 |
Avec Alan Enterprise, profitez d’une offre santé sur-mesure, au plus proche des besoins de vos collaborateurs.
76 |
77 |
78 |
79 |
80 |
81 |
Hôtels & Restaurants
82 |
Simplifiez-vous la gestion de l’assurance santé pour vos équipes au quotidien et respectez toutes vos obligations CHR.
84 |
85 |
86 |
87 |
88 |
89 |
Indépendants
90 |
Oubliez la paperasse et profitez d’une couverture santé complète pour un reste à charge minimal.
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 | Le meilleur de la technologie et de l’humain pour votre assurance santé
102 |
103 |
104 |
105 |
Des remboursements éclairs, au bout des doigts
106 |
Envoyez vos factures depuis votre smartphone, recevez vos remboursements via virements instantanés et suivez le détail depuis votre app mobile.
107 |
108 |
109 |
112 |
113 |
Une interface complète, facile à piloter
114 |
Gérez les arrivées et départs de vos salariés, les dispenses et même les arrêts de travail en quelques clics et respectez vos obligations en toute tranquilité.
115 |
Indépendants ? Vos factures et attestation Loi Madelin sont disponibles depuis votre espace.
116 |
Découvrir les offres pour en savoir plus
117 |
118 |
119 |
122 |
123 |
Un médecin à portée de main
124 |
Echangez gratuitement avec un généraliste depuis notre messagerie sécurisée ou par téléconsultation vidéo, via votre app mobile.
125 |
Besoin d’une consultation physique ? Trouvez un médecin ou un labo, bien remboursé, à proximité, avec Alan Map.
126 |
Découvrir les offres pour en savoir plus
127 |
128 |
129 |
132 |
133 |
Des garanties santé adaptées et transparentes
134 |
Choisissez la couverture adaptée à votre situation (besoins de santé, taille d’entreprise et secteur d’activité) et profitez des médecines douces ou encore de la méditation.
135 |
Découvrir les offres
136 |
137 |
138 |
141 |
142 |
143 |
144 |
145 |
146 | Il y a un avant et un après Alan
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
164 |
166 | On a adoré la simplicité : on demande quelque chose, on l’a ! Par rapport aux autres mutuelles, Alan est très proactif. On a eu l’impression qu’on partageait le même combat. Ça a été très rassurant pour nous d’être accompagnés par Alan pendant la crise.
167 |
168 | Lire la suite
169 |
170 |
171 |
172 |
173 |
174 |
179 |
181 | Dans le quotidien des collaborateurs, Alan a permis de démystifier l’assurance santé, de se réapproprier leur santé. Tout ce sur quoi Alan les aide, c’est du temps gagné pour l’équipe RH.
182 |
183 | Voir le témoignage vidéo
184 |
185 |
186 |
187 |
188 |
189 |
193 |
195 | Première mutuelle en tant que TNS (depuis 6 mois) et j’avoue être bluffé par le rapport qualité prix, le niveau de service, l'expérience utilisateur et le petit effet que suscite ma carte lorsque je la présente chez le pharmacien ! L’appli est aussi très
196 | réussie ! Bravo Alan.
197 |
198 |
199 |
200 |
201 |
202 |
203 |
272 880 membres font confiance à Alan pour leur santé
204 |
205 |
4,5
206 |
selon nos utilisateurs sur l’App Store et le Play Store
207 |
208 |
209 |
210 |
211 | Les interfaces de leur espace en ligne et application sont vraiment top. Et pour les échanges, là ou j’ai galéré des mois avec mon ancienne mutuelle (rattachement famille, télétransmission), tout a été réglé en quelques heures avec Alan. Je recommande
212 | !
213 |
214 |
215 | François, chez Alan depuis janvier 2020
216 |
217 |
218 |
219 |
220 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
--------------------------------------------------------------------------------
/projet-alan/videos/loop-video.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/charline-studi/2204-html-css/745ceee26119b9b04dc735dc9639ee7997a784d0/projet-alan/videos/loop-video.mp4
--------------------------------------------------------------------------------
/theorie-1/images/dossier-a/telephone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/charline-studi/2204-html-css/745ceee26119b9b04dc735dc9639ee7997a784d0/theorie-1/images/dossier-a/telephone.png
--------------------------------------------------------------------------------
/theorie-1/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 🥳 Mon premier fichier html
6 |
7 |
8 |
9 |
10 |
11 |
Titre 1
12 |
13 | Cras justo odio, dapibus ac facilisis in ,
14 | egestas eget quam.
15 |
16 |
34 |
Titre 2
35 | Titre 3
36 |
37 |
38 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/theorie-2/css/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: grey;
3 | }
4 |
5 | .mon-para {
6 | text-decoration: underline;
7 | color: white;
8 | }
9 |
10 | .green {
11 | color: green;
12 | }
13 |
14 | #ma-premiere-div {
15 | border: solid 2px black;
16 | }
17 |
18 | #ma-seconde-div {
19 | border: dotted 10px white;
20 | }
--------------------------------------------------------------------------------
/theorie-2/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Mon premier fichier CSS
5 |
10 |
Mon titre 1
11 |
Mon paragraphe
12 |
15 |
Mon titre 2
16 |
Mon paragraphe 2
17 |
Découverte de flexbox
5 |
9 |
10 |
11 | Je suis en block,
12 | je suis en inline .
13 | Je suis un lien
14 |
15 |
Mon second para
16 |
17 |
18 |
Mon premier flex
5 |
10 |
Mon para 1 Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
11 |
12 |
13 |
Mon para 2 Integer posuere erat a ante venenatis dapibus
14 |
Théorie 4
5 |
9 |
Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod.
10 |
Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod.
11 |
Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod.
12 |
Les positions
5 |
9 |
1
10 |
2
11 |
3
12 |
4
13 |
5
14 |
6
15 |
17 | Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor.
18 | Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit.
19 | Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.
20 | Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper.
21 | Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor.
22 | Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit.
23 | Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.
24 | Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper.
25 |
26 |
27 |
--------------------------------------------------------------------------------
/theorie-4/position/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: bisque;
3 | }
4 |
5 | .row {
6 | display: flex;
7 | background-color: paleturquoise;
8 | width: 100%;
9 | position: relative;
10 | margin-bottom: 50px;
11 | }
12 |
13 | .square {
14 | width: 100px;
15 | height: 100px;
16 | background-color: grey;
17 | border: solid 2px black;
18 | margin-right: 20px;
19 | }
20 |
21 | .relative {
22 | position: relative;
23 | top: 15px;
24 | left: -20px;
25 | background-color: pink;
26 | }
27 |
28 | .fixed {
29 | background-color: aquamarine;
30 | position: fixed;
31 | right: 0;
32 | bottom: 0;
33 | margin: 0;
34 | }
35 |
36 | .absolute {
37 | background-color: yellowgreen;
38 | position: absolute;
39 | bottom: 50px;
40 | right: 25px;
41 | }
--------------------------------------------------------------------------------
/theorie-5/images/telephone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/charline-studi/2204-html-css/745ceee26119b9b04dc735dc9639ee7997a784d0/theorie-5/images/telephone.png
--------------------------------------------------------------------------------
/theorie-5/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Responsive introduction
5 |
10 |
11 |
12 |
13 |
14 | Je suis visible sur ordinateur
15 |
16 |
17 |
18 | Je suis visible sur téléphone
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
Mon titre de page
29 |
Vestibulum id ligula porta felis euismod semper.
30 |
31 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/theorie-5/styles.css:
--------------------------------------------------------------------------------
1 | /*
2 | Ma première section.
3 | - Changement de couleur de fond
4 | - Affichage ou non d'un texte
5 | */
6 |
7 | .desktop-only {
8 | display: none;
9 | background-color: bisque;
10 | }
11 |
12 | .mobile-only {
13 | display: none;
14 | background-color: teal;
15 | }
16 |
17 | body {
18 | background-color: tomato;
19 | }
20 |
21 | @media screen and (max-width: 450px) {
22 |
23 | body {
24 | background-color: black;
25 | }
26 |
27 | .mobile-only {
28 | display: block;
29 | }
30 | }
31 |
32 | @media screen and (min-width: 800px) {
33 |
34 | body {
35 | background-color: purple;
36 | }
37 |
38 | .desktop-only {
39 | display: block;
40 | }
41 | }
42 |
43 | @media screen and (orientation: landscape) {
44 |
45 | body {
46 | border: solid 2px black
47 | }
48 | }
49 |
50 | @media screen and ((max-width: 800px) or (max-height: 600px)) {
51 |
52 | body {
53 | background-color: yellow;
54 | }
55 | }
56 |
57 |
58 |
59 | /*
60 | Ma seconde section.
61 | - Changement d'affichage
62 | */
63 |
64 |
65 | .section {
66 | display: flex;
67 | align-items: center;
68 | justify-content: space-between;
69 | background-color: aquamarine;
70 | }
71 |
72 | .image {
73 | width: 250px;
74 | height: 250px;
75 | }
76 |
77 | @media screen and (max-width: 670px){
78 |
79 | .section {
80 | flex-direction: column;
81 | align-items: flex-start;
82 | }
83 |
84 | .image {
85 | width: 100%;
86 | object-fit: cover;
87 | }
88 | }
89 |
90 |
--------------------------------------------------------------------------------
/theorie-6/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Animation css
5 |
10 |
11 | Bonjour
12 | Hola
13 |
14 |
15 |
Hello
16 |
Hi
17 |
Coucou
18 |
Hé
21 |
22 |
23 |
24 |
25 |
26 | 1
27 | 2
28 | 3
29 | 4
30 | 5
31 | 6
32 | 7
33 | 8
34 |
35 |
36 |
37 |
38 |
39 |
40 | Cras justo odio, dapibus ac facilisis in, egestas eget quam.
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 | Egestas Mollis Ultricies
49 | Egestas Mollis Ultricies
50 | Egestas Mollis Ultricies
51 | Egestas Mollis Ultricies
52 |
53 |
54 |
55 |
56 |
57 |
--------------------------------------------------------------------------------
/theorie-6/styles.css:
--------------------------------------------------------------------------------
1 | section {
2 | margin-bottom: 50px;
3 | }
4 |
5 | /*
6 | Section paragraphes
7 | */
8 |
9 | .paragraphes p:hover {
10 | color: red;
11 | text-decoration: underline;
12 | }
13 |
14 | .paragraphes p:first-child {
15 | color: green
16 | }
17 |
18 | .paragraphes p:last-child {
19 | color: purple;
20 | border-bottom: solid 2px red
21 | }
22 |
23 | .paragraphes p:nth-child(2) {
24 | background-color: grey;
25 | }
26 |
27 | .paragraphes .ma-div {
28 | border: solid 2px black;
29 | }
30 |
31 | /* Sélectionner un élément html en fonction de son parent*/
32 | .paragraphes .ma-div p {
33 | text-decoration: underline;
34 | }
35 |
36 | /* Sélectionner un élément html qui vient après */
37 | .paragraphes .ma-div + .mon-para {
38 | background-color: yellow;
39 | }
40 |
41 | /* Sélectionner plusieurs éléments */
42 | .paragraphes .ma-div,.paragraphes .mon-para,.paragraphes p,.paragraphes {
43 | border: dotted 1px blue
44 | }
45 |
46 | /* Sélectionner un élément html qui a la classe ... */
47 | section.paragraphes {
48 | background-color: lightgray;
49 | }
50 |
51 |
52 | /*
53 | Section numbers
54 | */
55 |
56 | section.numbers {
57 | background-color: bisque;
58 | }
59 |
60 | .numbers p:nth-child(4n - 1) {
61 | color: red
62 | }
63 |
64 | .numbers p:nth-child(even) {
65 | color: purple
66 | }
67 |
68 | .numbers p:nth-child(1) {
69 | text-decoration: underline;
70 | }
71 |
72 | /*
73 | Section quote
74 | */
75 |
76 | .quote blockquote {
77 | position: relative;
78 | }
79 |
80 | .quote blockquote::before {
81 | content: '«';
82 | color: blue;
83 | font-size: 100px;
84 | opacity: 0.5;
85 | position: absolute;
86 | top: 0;
87 | left: 0;
88 | transform: translateX(-50%) translateY(-50%) rotate(15deg);
89 | }
90 |
91 | .quote blockquote::after {
92 | content: '»';
93 | color: blue;
94 | }
95 |
96 | /*
97 | Section list
98 | */
99 |
100 | .list ul {
101 | list-style: none;
102 | }
103 |
104 | .list li {
105 | background-color: lightcyan;
106 | transition: background-color 0.5s;
107 | }
108 |
109 | .list li:hover {
110 | background-color: red;
111 | }
112 |
113 |
--------------------------------------------------------------------------------
23 |
27 | 
39 | 
42 | 
43 | 
65 | 
73 | 
81 | 
89 | 
109 | 
159 | 
29 | 
17 |
18 |