├── assets ├── ef.webp ├── edhec.webp ├── hec.webp ├── home.jpg ├── logo.png ├── launch.webp ├── thales.webp ├── founders.webp └── microsoft.webp ├── theorie-3 ├── img │ └── a.jpg ├── Maquette.jpg ├── css │ └── style.css └── index.html ├── theorie-1 ├── html-ecriture.png └── mon-fichier.html ├── theorie-5 ├── le-responsive.png ├── index.html └── css │ └── style.css ├── projet-stationF-22.09.23.zip ├── projet-stationF-22.10.07.zip ├── projet-stationF-22.10.14.zip ├── projet-stationF-22.10.28.zip ├── projet-stationF ├── images │ ├── ef.webp │ ├── hec.webp │ ├── home.jpg │ ├── logo.png │ ├── edhec.webp │ ├── launch.webp │ ├── thales.webp │ ├── founders.webp │ ├── microsoft.webp │ └── arrow-down.svg ├── index.html └── css │ └── style.css ├── theorie-6 ├── index.html └── style.css ├── theorie-4 ├── flex │ ├── index.html │ └── css │ │ └── style.css └── display │ ├── css │ └── style.css │ └── index.html ├── theorie-2 ├── index.html └── css │ └── style.css └── README.md /assets/ef.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/charline-studi/2209-html-css/HEAD/assets/ef.webp -------------------------------------------------------------------------------- /assets/edhec.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/charline-studi/2209-html-css/HEAD/assets/edhec.webp -------------------------------------------------------------------------------- /assets/hec.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/charline-studi/2209-html-css/HEAD/assets/hec.webp -------------------------------------------------------------------------------- /assets/home.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/charline-studi/2209-html-css/HEAD/assets/home.jpg -------------------------------------------------------------------------------- /assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/charline-studi/2209-html-css/HEAD/assets/logo.png -------------------------------------------------------------------------------- /assets/launch.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/charline-studi/2209-html-css/HEAD/assets/launch.webp -------------------------------------------------------------------------------- /assets/thales.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/charline-studi/2209-html-css/HEAD/assets/thales.webp -------------------------------------------------------------------------------- /theorie-3/img/a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/charline-studi/2209-html-css/HEAD/theorie-3/img/a.jpg -------------------------------------------------------------------------------- /assets/founders.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/charline-studi/2209-html-css/HEAD/assets/founders.webp -------------------------------------------------------------------------------- /assets/microsoft.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/charline-studi/2209-html-css/HEAD/assets/microsoft.webp -------------------------------------------------------------------------------- /theorie-3/Maquette.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/charline-studi/2209-html-css/HEAD/theorie-3/Maquette.jpg -------------------------------------------------------------------------------- /theorie-1/html-ecriture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/charline-studi/2209-html-css/HEAD/theorie-1/html-ecriture.png -------------------------------------------------------------------------------- /theorie-5/le-responsive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/charline-studi/2209-html-css/HEAD/theorie-5/le-responsive.png -------------------------------------------------------------------------------- /projet-stationF-22.09.23.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/charline-studi/2209-html-css/HEAD/projet-stationF-22.09.23.zip -------------------------------------------------------------------------------- /projet-stationF-22.10.07.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/charline-studi/2209-html-css/HEAD/projet-stationF-22.10.07.zip -------------------------------------------------------------------------------- /projet-stationF-22.10.14.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/charline-studi/2209-html-css/HEAD/projet-stationF-22.10.14.zip -------------------------------------------------------------------------------- /projet-stationF-22.10.28.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/charline-studi/2209-html-css/HEAD/projet-stationF-22.10.28.zip -------------------------------------------------------------------------------- /projet-stationF/images/ef.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/charline-studi/2209-html-css/HEAD/projet-stationF/images/ef.webp -------------------------------------------------------------------------------- /projet-stationF/images/hec.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/charline-studi/2209-html-css/HEAD/projet-stationF/images/hec.webp -------------------------------------------------------------------------------- /projet-stationF/images/home.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/charline-studi/2209-html-css/HEAD/projet-stationF/images/home.jpg -------------------------------------------------------------------------------- /projet-stationF/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/charline-studi/2209-html-css/HEAD/projet-stationF/images/logo.png -------------------------------------------------------------------------------- /projet-stationF/images/edhec.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/charline-studi/2209-html-css/HEAD/projet-stationF/images/edhec.webp -------------------------------------------------------------------------------- /projet-stationF/images/launch.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/charline-studi/2209-html-css/HEAD/projet-stationF/images/launch.webp -------------------------------------------------------------------------------- /projet-stationF/images/thales.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/charline-studi/2209-html-css/HEAD/projet-stationF/images/thales.webp -------------------------------------------------------------------------------- /projet-stationF/images/founders.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/charline-studi/2209-html-css/HEAD/projet-stationF/images/founders.webp -------------------------------------------------------------------------------- /projet-stationF/images/microsoft.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/charline-studi/2209-html-css/HEAD/projet-stationF/images/microsoft.webp -------------------------------------------------------------------------------- /theorie-1/mon-fichier.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Le titre de ma page 6 | 7 | 8 | 9 | Mon body 10 | 11 | 12 | -------------------------------------------------------------------------------- /projet-stationF/images/arrow-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /theorie-6/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Les micro-interractions 8 | 9 | 10 | 11 |

Les micro-interractions

12 | 13 |
14 |

1

15 |
16 | 17 | -------------------------------------------------------------------------------- /theorie-4/flex/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Flex #2 - Les propriétés 5 | 6 | 7 | 8 |
9 |
1
10 |
2
11 |
3
12 |
4
13 |
5
14 |
15 | 16 | -------------------------------------------------------------------------------- /theorie-5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Le responsive 5 | 6 | 7 | 8 |
9 |
10 |

Le responsive, Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur.

11 |
12 |
13 |
14 | 15 | -------------------------------------------------------------------------------- /theorie-4/display/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: lightgoldenrodyellow; 3 | } 4 | 5 | .block { 6 | display: block; 7 | background-color: red; 8 | margin-bottom: 10px; 9 | padding-bottom: 10px; 10 | } 11 | 12 | .inline { 13 | display: inline; 14 | background-color: orange; 15 | margin-bottom: 10px; 16 | padding-bottom: 10px; 17 | } 18 | 19 | .inline-block { 20 | display: inline-block; 21 | background-color: green; 22 | width: 200px; 23 | padding-bottom: 20px; 24 | } 25 | 26 | p { 27 | background-color: pink; 28 | } 29 | 30 | a { 31 | background-color: yellowgreen; 32 | } 33 | 34 | img { 35 | width: 70px; 36 | } -------------------------------------------------------------------------------- /theorie-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Live #3 - Le CSS 5 | 6 | 7 | 8 | 9 |

Je suis le titre principal de la page

10 |

Je suis le titre de niveau 2 de la page

11 |

Je suis le titre de niveau 3 de la page

12 |

Je suis le titre de niveau 4 de la page

13 |
Je suis le titre de niveau 5 de la page
14 |
Je suis le titre de niveau 6 de la page
15 | 16 |

Premier paragraphe : Elit Risus Inceptos

17 |

Second paragraphe : Elit Risus Inceptos

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /theorie-3/css/style.css: -------------------------------------------------------------------------------- 1 | /* VÉRIFIER LE LIEN AVEC LE HTML */ 2 | 3 | body { 4 | background-color: aqua; 5 | } 6 | 7 | img { 8 | width: 200px; 9 | } 10 | 11 | /* STYLISATION DE TEXTES */ 12 | 13 | .intro { 14 | background-color:beige; 15 | } 16 | 17 | h1 { 18 | background-color: grey; 19 | } 20 | 21 | p { 22 | background-color: black; 23 | color: white; 24 | } 25 | 26 | .center { 27 | text-align: center; 28 | } 29 | 30 | .right { 31 | text-align: right; 32 | } 33 | 34 | .left { 35 | text-align: left; 36 | } 37 | 38 | /* FLEX */ 39 | 40 | .flex { 41 | background-color: azure; 42 | } 43 | 44 | .title { 45 | text-align: center; 46 | } 47 | 48 | .cover { 49 | display: flex; 50 | align-items: center; 51 | } 52 | 53 | .bloc { 54 | border-width: 2px; 55 | border-color: black; 56 | border-style: solid; 57 | margin: 10px; 58 | } -------------------------------------------------------------------------------- /theorie-4/flex/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: grey; 3 | } 4 | 5 | .container { 6 | background-color: blue; 7 | height: 150px; 8 | display: flex; 9 | flex-direction: row; /* gère la direction de l'alignement : row , row-reverse, column, column-reverse*/ 10 | flex-wrap: wrap; /* gère la compression des blocs : wrap, nowrap */ 11 | gap: 10px 20px; /* gère espacement entre les blocs : 20px, 20px 20px, top right*/ 12 | 13 | justify-content: space-between; /* gère alignement horizontal : flex-start, flex-end, space-between, space-around, space-evenly */ 14 | align-items: center; /* gère alignement vertical : flex-start, flex-end, space-between, space-around, space-evenly */ 15 | } 16 | 17 | .square { 18 | width: 100px; 19 | height: 100px; 20 | background-color: black; 21 | color: white; 22 | } 23 | 24 | .four { 25 | background-color: tomato; 26 | order: -1; 27 | } -------------------------------------------------------------------------------- /theorie-6/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: grey; 3 | } 4 | 5 | .square { 6 | width: 100px; 7 | height: 100px; 8 | background-color: red; 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | 13 | /* 14 | Fluidité des animations 15 | transition: [quelle propriété CSS] [duree] [style de déplacement] 16 | */ 17 | 18 | /* transition: 19 | background-color 2s linear, 20 | width 2s linear, 21 | height 2s linear, 22 | transform 2s linear; */ 23 | 24 | transition: all 0.25s linear; 25 | } 26 | 27 | .number { 28 | font-size: 24px; 29 | font-weight: bold; 30 | transition: opacity 2s linear; 31 | } 32 | 33 | .square:hover { 34 | transition: all 10s linear; 35 | width: 120px; 36 | height: 120px; 37 | background-color: blue; 38 | transform: rotate(180deg); 39 | } 40 | 41 | .square:hover p { 42 | color: white; 43 | opacity: 0; 44 | } 45 | 46 | .square p:hover { 47 | color: green; 48 | } -------------------------------------------------------------------------------- /theorie-2/css/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | balise { 4 | propriété-css: valeur; 5 | } 6 | 7 | */ 8 | 9 | body { 10 | background-color: tomato; 11 | } 12 | 13 | /* 14 | 15 | DRY : Don't Repeat Yourself 16 | 17 | h1 { 18 | color: #FFFFFF; 19 | } 20 | 21 | h2 { 22 | color: #FFFFFF; 23 | } 24 | 25 | h3 { 26 | color: #FFFFFF; 27 | } 28 | 29 | h4 { 30 | color: #FFFFFF; 31 | } 32 | 33 | h5 { 34 | color: #FFFFFF; 35 | } 36 | 37 | h6 { 38 | color: #FFFFFF; 39 | } 40 | 41 | */ 42 | 43 | /* Sélectionner plusieurs éléments avec une virgule : */ 44 | h1, h2, h3, h4, h5, h6 { 45 | color: #FFFFFF; 46 | } 47 | 48 | /* Sélectionner un élément via un class */ 49 | .bleu { 50 | color: rgb(0, 0, 125); 51 | } 52 | 53 | .blanc { 54 | color: #FFFFFF 55 | } 56 | 57 | .italic { 58 | font-style: italic; 59 | font-weight: 200; /* 200 / 400 / 500 / 600 ... 900 */ 60 | } 61 | 62 | .couleur-vert { 63 | color: green 64 | } 65 | 66 | /* Sélectionner via un id */ 67 | #titre-h5 { 68 | opacity: 0.5; 69 | } 70 | -------------------------------------------------------------------------------- /theorie-4/display/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Théroie #4 : Display 5 | 6 | 7 | 8 |
je suis un block
9 |
je suis un block
10 |
je suis un inline .........
11 |
je suis un inline .........
12 |
je suis un block
13 |
je suis un inline-block
14 |
je suis un inline-block
15 |
je suis un inline-block
16 | 17 | 18 |

Nulla vitae elit libero, a pharetra augue.

19 | 20 |
je suis un inline-block
21 | 22 | -------------------------------------------------------------------------------- /theorie-3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Cours théorie #3 : Flexbox 5 | 6 | 7 | 8 |

Cours de théorie #3 : Flexbox

9 | 10 |
11 |

Intro

12 |

Maecenas faucibus mollis.

13 |

Maecenas faucibus mollis.

14 |

LIGNE 11 Maecenas faucibus mollis interdum..

15 | Alternativ textuelle 16 |
17 | 18 |
19 |
20 |

Exercice Flex

21 |
22 |
23 |
24 | Alternativ textuelle 25 |
26 |
27 |

LIGNE 11 Maecenas faucibus mollis interdum..

28 | Lire la suite 29 |
30 |
31 |

TEST

32 |
33 |
34 |
35 | 36 | -------------------------------------------------------------------------------- /theorie-5/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: grey; 3 | } 4 | 5 | * { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box 9 | } 10 | 11 | .container { 12 | width: 100%; 13 | border: 3px solid black; 14 | display: flex; 15 | } 16 | 17 | /* vw = viewport width */ 18 | /* vh = viewport height */ 19 | .left { 20 | width: 50%; 21 | background-color: blue; 22 | } 23 | 24 | .right { 25 | width: 50%; 26 | height: 100vh; 27 | background-color: red; 28 | } 29 | 30 | 31 | 32 | /* 33 | * 34 | Condition: 35 | la width ne doit pas dépasser la max-width, 36 | qui est de 1000px 37 | * 38 | */ 39 | @media (max-width: 1000px) { 40 | .right { 41 | background-color: green; 42 | flex-grow: 1; 43 | } 44 | 45 | .container { 46 | flex-direction: column; 47 | height: 100vh; 48 | } 49 | 50 | .left, .right { 51 | width: 100%; 52 | } 53 | 54 | } 55 | 56 | /* 57 | * 58 | Condition: 59 | la width ne doit pas dépasser la max-width, 60 | qui est de 500px 61 | * 62 | */ 63 | @media (max-width: 500px) { 64 | .right { 65 | background-color: purple; 66 | } 67 | } 68 | 69 | 70 | 71 | /* 72 | * 73 | Condition: 74 | la width doit être supérieur à la min-width, 75 | qui est de 500px 76 | * 77 | */ 78 | @media (min-width: 500px) { 79 | .left { 80 | background-color: purple; 81 | } 82 | } 83 | 84 | /* orientation = landscape / portrait */ 85 | @media (max-width: 500px) and (orientation: landscape) { 86 | h1 { 87 | color: white 88 | } 89 | } 90 | 91 | @media (min-width: 500px) and (max-width: 1000px) { 92 | h1 { 93 | font-size: 14px 94 | } 95 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 2209-html-css 2 | 3 | ## Présentation 4 | 5 | 👋 Je m'appelle Charline, je suis développeuse front-end. 6 | 7 | ## Cours 8 | 9 | Ce cours est composé d'une série de 10 lives, avec une alternance entre des live "Théoriques" et des lives "Projets". 10 | 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. 11 | 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 [Station F](https://stationf.co/) 12 | 13 | ## Pré-requis 14 | 15 | - Pas de niveau d'entrée 16 | - Utiliser un éditeur de texte, celui avec lequel vous êtes le plus à l'aise (VS Code, Sublime Text, Atom, etc...) 17 | - Avoir un navigateur récent pour visualiser le rendu de notre code (Firefox, Google Chrome, Edge, Safari, Opera) 18 | 19 | ## Planning - HTML & CSS 20 | 21 | | Numéro | Date | Heure | Type | Titre | Replay | 22 | | ------ | ---------- | --------- | --------- | ------------------------------------------------------------- | --------------------- | 23 | | 01 | 23/09/2022 | 10h - 11h | Théorique | Découverte du HTML 🙂 | https://app.studi.fr/#/dashboard/events/38691/replay | 24 | | 02 | 23/09/2022 | 15h - 16h | Projet | Lancement du projet "copycat" Station F 🙌 | https://app.studi.fr/#/dashboard/events/38693/replay | 25 | | 03 | 26/09/2022 | 10h - 11h | Théorique | Découverte du CSS 🙃 | https://app.studi.fr/#/dashboard/events/38694/replay | 26 | | 04 | 30/09/2022 | 10h - 11h | Théorique | La techno moderne CSS qui facilite l'intégration : flexbox 🚀 | https://app.studi.fr/#/dashboard/events/38695/replay | 27 | | 05 | 03/10/2022 | 10h - 11h | Théorique | Comment positionner des éléments sans flexbox 🤔 | https://app.studi.fr/#/dashboard/events/38696/replay | 28 | | 06 | 07/10/2022 | 15h - 16h | Projet | Suite de intégration du projet Station F 🖌 | https://app.studi.fr/#/dashboard/events/38697/replay | 29 | | 07 | 13/10/2022 | 14h - 15h | Théorique | Nouvelle étape CSS : le responsive 🧐 | https://app.studi.fr/#/dashboard/events/38698/replay | 30 | | 08 | 14/10/2022 | 10h - 11h | Projet | Responsive de notre projet Station F 📱 | https://app.studi.fr/#/dashboard/events/38699/replay | 31 | | 09 | 24/10/2022 | 10h - 11h | Théorique | Dernière étape CSS, les notions avancées 💃 | https://app.studi.fr/#/dashboard/events/38700/replay | 32 | | 10 | 28/10/2022 | 10h - 11h30 | Projet | Finalisation de notre intégration 🥳 | https://app.studi.fr/#/dashboard/events/38701/replay | 33 | | 11 | 31/10/2022 | 10h - 11h30 | Projet | Finalisation de notre intégration 🥳 - BONUS | https://app.studi.fr/#/dashboard/events/40835/replay | 34 | 35 | ## Ressources 36 | 37 | - [Télécharger VS Code](https://code.visualstudio.com/) 38 | - [Extension Indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow) 39 | - [Documentation Mozilla](https://developer.mozilla.org/fr/) 40 | - [Station F](https://stationf.co/) 41 | - [Sélecteur de couleur](https://htmlcolorcodes.com/fr/selecteur-de-couleur/) 42 | - [Guide flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) 43 | - [Jeu flexbox froggy](https://flexboxfroggy.com/#fr) 44 | - [Icônes libres de droit](https://remixicon.com/) 45 | - [Liste des medias queries](https://developer.mozilla.org/fr/docs/Web/CSS/@media) 46 | - [Liste des propriéts CSS animables](https://developer.mozilla.org/fr/docs/Web/CSS/CSS_animated_properties) 47 | - [Pseudo-class](https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes) 48 | - [Cubic-Bezier Personnalisés](https://cubic-bezier.com/#.17,.67,.83,.67) 49 | - [Dégradés CSS](https://developer.mozilla.org/fr/docs/Web/CSS/gradient/linear-gradient) -------------------------------------------------------------------------------- /projet-stationF/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Recode StationF 🚀 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 37 |
38 | 39 | 40 |
41 | 42 |
43 |
44 |

Plus grand campus de start-up du monde à Paris

45 |

Rejoignez un campus unique et une communauté de plus de 1.000 start-up, 30 programmes d'accompagnement et de nombreux services au coeur de Paris.

46 | 47 | Cliquez ici pour accéder à la section ... 48 | 49 |
50 | Photographie des locaux de Station F 51 |
52 | 53 | 54 | 55 |
56 |
57 |
58 |

Donner le pouvoir à la prochaine génération d'entrepreneurs

59 |

Avec des ressources disponibles sur le campus et en ligne - dont une large communauté d'investisseurs, plus de 150 perks, 35 administrations publiques et 600 événements par an - STATION F offre tout ce dont les entrepreneurs ont besoin pour lancer et développer leurs projets.

60 | Trouver mon programme 61 |
62 |
    63 |
  • 64 | Logo HEC 65 |
    • 66 |
  • 67 | Logo Microsof 68 |
    • 69 |
  • 70 | Logo Founders 71 |
    • 72 |
  • 73 | Logo Edhec 74 |
    • 75 |
  • 76 | Logo Ef 77 |
    • 78 |
  • 79 | Logo Thales 80 |
    • 81 |
82 |
83 |
84 | 85 | 86 | 87 |
88 |
89 | Capture d'écran du tableau de bord des cours en ligne 90 |
91 |

Launch by STATION F

92 |

Vous avez une idée ? Vous souhaitez lancer votre start-up ou en apprendre plus sur l'entrepreneuriat ? Launch by STATION F est le programme 100% en ligne de STATION F sur tous les sujets pour se lancer ! Le programme regroupe de nombreux cours en vidéo, une large librairie d'outils avec des accès à prix réduit et une communauté pour vous aider avec votre idée.

93 | Découvrir 94 |
95 |
96 |
97 | 98 |
99 | 100 | 101 | 102 | 103 | -------------------------------------------------------------------------------- /projet-stationF/css/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | Reset : 3 | réinitialise (efface) les styles par défaut du navigateur 4 | */ 5 | 6 | a { 7 | text-decoration: none; 8 | color: inherit 9 | } 10 | 11 | ul, ol { 12 | list-style: none; 13 | } 14 | 15 | * { 16 | margin: 0; 17 | padding: 0; 18 | box-sizing: border-box; 19 | } 20 | 21 | html { 22 | scroll-behavior: smooth; 23 | } 24 | 25 | /* Style général */ 26 | 27 | * { 28 | font-family: 'Cabin', sans-serif; 29 | } 30 | 31 | .flux { 32 | margin-left: 75px; 33 | margin-right: 75px; 34 | } 35 | 36 | @media (max-width: 500px) { 37 | .flux { 38 | margin-left: 15px; 39 | margin-right: 15px; 40 | } 41 | } 42 | 43 | .title-2 { 44 | font-size: 40px; 45 | margin-bottom: 20px; 46 | line-height: 1.25; 47 | } 48 | 49 | .text-paragraphe { 50 | line-height: 1.5; 51 | } 52 | 53 | .button { 54 | text-transform: uppercase; 55 | color: white; 56 | border-radius: 20px; 57 | padding: 10px 20px; 58 | display: inline-block; 59 | } 60 | 61 | .button-orange { 62 | background: linear-gradient(90deg, #ff3592, #ffb800 50% 100%); 63 | background-size: 200% 100%; 64 | background-position: right; 65 | transition: all 0.5s; 66 | } 67 | 68 | .button-orange:hover { 69 | background-position: left; 70 | } 71 | 72 | 73 | .button-black { 74 | background-color: black; 75 | transition: background-color 0.25s; 76 | } 77 | 78 | .button-black:hover { 79 | background-color: grey; 80 | } 81 | 82 | /* START : Stylisation du header */ 83 | 84 | .header { 85 | display: flex; 86 | align-items: center; 87 | justify-content: space-between; 88 | margin-top: 50px; 89 | margin-bottom: 50px; 90 | } 91 | 92 | .list-links { 93 | display: flex; 94 | column-gap: 40px; 95 | align-items: center; 96 | } 97 | 98 | .logo { 99 | width: 125px; 100 | height: 25px; 101 | } 102 | 103 | .nav-link { 104 | text-transform: uppercase; 105 | font-size: 14px; 106 | } 107 | 108 | .nav-link:last-child { 109 | background-color: black; 110 | color: white; 111 | padding: 15px 30px; 112 | border-radius: 30px; 113 | font-weight: 500; 114 | } 115 | 116 | /* 117 | AUTRES Sélecteurs possibles : 118 | 119 | Pour le premier élément 120 | .nav-link:first-child { 121 | background-color: red; 122 | } 123 | 124 | Pour l'élément à la position 2 125 | .nav-link:nth-child(2) { 126 | background-color: yellow; 127 | } 128 | */ 129 | 130 | /* START : Stylisation de la cover */ 131 | 132 | .cover { 133 | display: flex; 134 | align-items: center; 135 | } 136 | 137 | @media (max-width: 500px) { 138 | .cover { 139 | flex-direction: column; 140 | } 141 | } 142 | 143 | .image-office { 144 | width: 55%; 145 | flex-shrink: 0; 146 | height: 250px; 147 | object-fit: cover; 148 | object-position: bottom; 149 | } 150 | 151 | .icon-scroll { 152 | background-color: black; 153 | width: 50px; 154 | height: 50px; 155 | border-radius: 100%; 156 | display: flex; 157 | justify-content: center; 158 | align-items: center; 159 | } 160 | 161 | .cover-title { 162 | font-size: 50px; 163 | margin-bottom: 20px; 164 | } 165 | 166 | .cover-introduction { 167 | margin-bottom: 30px; 168 | } 169 | 170 | .cover-text { 171 | padding-right: 100px; 172 | } 173 | 174 | 175 | /* START : Stylisation des programs */ 176 | 177 | .programs { 178 | background-color: #202020; 179 | margin-top: 75px; 180 | padding-top: 75px; 181 | padding-bottom: 75px; 182 | } 183 | 184 | .programs .flux { 185 | display: flex; 186 | gap: 50px 187 | } 188 | 189 | .programs .container-texts { 190 | color: white; 191 | display: flex; 192 | flex-direction: column; 193 | align-items: flex-start; 194 | } 195 | 196 | .programs .title-2 { 197 | width: 75%; 198 | } 199 | 200 | .programs .container-texts .button { 201 | margin-top: 50px; 202 | } 203 | 204 | .programs .container-texts p { 205 | flex-grow: 1; 206 | } 207 | 208 | .programs .container-images { 209 | display: flex; 210 | flex-wrap: wrap; 211 | gap: 25px 212 | } 213 | 214 | .programs .container-images li { 215 | background-color: white; 216 | border-radius: 10px; 217 | width: calc(50% - 25px / 2); 218 | height: 130px; 219 | padding: 30px; 220 | } 221 | 222 | .programs .container-images li img { 223 | width: 100%; 224 | height: 100%; 225 | object-fit: contain; 226 | } 227 | 228 | /* START : Stylisation du online */ 229 | 230 | /* 231 | Dégradé écriture 232 | propriété : function(angle, couleur1, couleur2 debut fin, couleur3, ....) 233 | 234 | EXEMPLES 235 | background: linear-gradient(90deg, blue, red); 236 | background: linear-gradient(to left bottom, blue, red); 237 | background: linear-gradient(45deg, blue 0%, green 20%, red 50%); 238 | background: linear-gradient(0,red 0% 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80% 100%); 239 | background: linear-gradient(0, rgba(0, 0, 0),rgba(0, 0, 0, 0) 25% ); 240 | FIN EXEMPLE 241 | 242 | */ 243 | 244 | .online { 245 | background: linear-gradient(180deg, #202020 0% 50%, white 50% 100%); 246 | } 247 | 248 | .online .online-content { 249 | display: flex; 250 | padding: 75px 50px 50px; 251 | background: linear-gradient(90deg, #ff3592,#ffb800); 252 | } 253 | 254 | .online img { 255 | width: 50%; 256 | padding-right: 50px; 257 | } 258 | 259 | .online .container-texts { 260 | width: 50%; 261 | color: white; 262 | } 263 | 264 | .online .container-texts a { 265 | margin-top: 50px; 266 | } --------------------------------------------------------------------------------