├── assets
├── fonts
│ └── DMSerifDisplay-Regular.ttf
└── img
│ ├── bg.jpg
│ └── css-logo.png
├── index.html
└── style.css
/assets/fonts/DMSerifDisplay-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JustFS/css-basics/3439ba4d3ec8cbfd058cc88563b8ad6d3037af37/assets/fonts/DMSerifDisplay-Regular.ttf
--------------------------------------------------------------------------------
/assets/img/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JustFS/css-basics/3439ba4d3ec8cbfd058cc88563b8ad6d3037af37/assets/img/bg.jpg
--------------------------------------------------------------------------------
/assets/img/css-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JustFS/css-basics/3439ba4d3ec8cbfd058cc88563b8ad6d3037af37/assets/img/css-logo.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Cours CSS
8 |
9 |
10 |
11 |
12 |
13 | Les bases de CSS
14 |
15 |
16 |
17 |
18 |
Flexbox
19 |
20 | - boite 1
21 | - boite 2
22 | - boite 3
23 |
24 |
27 |
Grid
28 |
29 |
30 |
31 |
41 |
42 |
45 |
Absolute
46 |
47 |
48 |
49 |
50 |
51 |
52 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap");
2 |
3 | @font-face {
4 | font-family: "DMSerif";
5 | src: url(./assets/fonts/DMSerifDisplay-Regular.ttf);
6 | }
7 |
8 | /* L'étoile donne du style à TOUS les éléments */
9 | /* * {
10 | margin: 0;
11 | padding: 0;
12 | border: 2px solid red;
13 | } */
14 |
15 | body {
16 | font-family: "DMSerif", Verdana;
17 | background: url(./assets/img/bg.jpg) center/cover;
18 | /* VH = 100% de la taille de l'écran (viewport height) */
19 | /* min-height: 100vh; */
20 | }
21 |
22 | h1 {
23 | text-transform: uppercase;
24 | letter-spacing: 3px;
25 | text-align: center;
26 | /* Les tailles de polices doivent être en REM */
27 | font-size: 2.5rem;
28 | text-shadow: 3px 3px 8px #00000042;
29 | color: #ab0ef4;
30 | font-family: "Oswald", sans-serif;
31 | }
32 |
33 | main {
34 | min-height: 500px;
35 | width: 90%;
36 | background: rgba(245, 245, 245, 0.9);
37 | /* Centrer une boite */
38 | margin: 0 auto;
39 | border: 2px solid rgb(0, 140, 255);
40 | border-radius: 20px 20px 0 0;
41 | box-shadow: 0px 0px 20px 4px #81cfc6;
42 | padding: 15px;
43 | }
44 |
45 | h2 {
46 | margin: 0;
47 | }
48 |
49 | .flexbox,
50 | .grid,
51 | .absolute {
52 | border: 2px solid skyblue;
53 | border-radius: 10px;
54 | padding: 10px;
55 | margin-top: 20px;
56 | min-height: 150px;
57 | }
58 |
59 | /* FLEXBOX */
60 | /* Sert a répartir équitablement des éléments sur la page */
61 | .flexbox ul {
62 | padding: 0;
63 | display: flex;
64 | justify-content: space-around;
65 | }
66 |
67 | .flexbox li {
68 | list-style: none;
69 | height: 160px;
70 | width: 160px;
71 | margin: 10px;
72 | background: turquoise;
73 | /* Centrer un unique élément veticalement et horizontalement */
74 | display: flex;
75 | justify-content: center;
76 | align-items: center;
77 | }
78 |
79 | /* GRID */
80 | .grid-container {
81 | display: grid;
82 | grid-template-columns: 30% 70%;
83 | }
84 |
85 | .grid img {
86 | width: 80%;
87 | margin: 20px auto;
88 | display: block;
89 | }
90 |
91 | form {
92 | display: grid;
93 | grid-template-columns: 1fr 1fr;
94 | grid-template-rows: 1fr 1fr 1fr;
95 | grid-template-areas:
96 | "i1 i2"
97 | "ta ta"
98 | "vi bt";
99 | }
100 |
101 | input,
102 | textarea {
103 | margin: 5px;
104 | border: 1px solid darkblue;
105 | padding: 10px;
106 | font-size: 1.1rem;
107 | font-family: "DMSerif";
108 | border-radius: 5px;
109 | }
110 |
111 | textarea {
112 | grid-area: ta;
113 | height: 40px;
114 | resize: none;
115 | }
116 |
117 | #btn-submit {
118 | grid-area: bt;
119 | cursor: pointer;
120 | background: cyan;
121 | transition: 0.2s;
122 | }
123 |
124 | #btn-submit:hover {
125 | background: darkblue;
126 | color: white;
127 | }
128 |
129 | /* ABSOLUTE */
130 | /* Sans élément en Relative, de base, l'élément en absolute l'est par rapport au Body */
131 | /* Il faut mettre une position relative au parent pour contraindre l'élément en absolute dans ses frontières */
132 | .absolute {
133 | position: relative;
134 | }
135 |
136 | #circle1 {
137 | height: 80px;
138 | width: 80px;
139 | background: skyblue;
140 | position: absolute;
141 | border-radius: 150px;
142 | top: -20px;
143 | right: -20px;
144 | }
145 |
146 | #circle2 {
147 | height: 40px;
148 | width: 40px;
149 | border-radius: 150px;
150 | background: teal;
151 | position: absolute;
152 | left: 50%;
153 | transform: translateX(-50%);
154 | top: 100px;
155 | }
156 |
157 | /* RESPONSIVE */
158 | @media screen and (max-width: 900px) {
159 | .grid-container {
160 | display: block;
161 | }
162 | .grid-container img {
163 | width: 40%;
164 | }
165 | }
166 |
167 | @media screen and (max-width: 610px) {
168 | .flexbox ul {
169 | flex-direction: column;
170 | align-items: center;
171 | }
172 |
173 | form {
174 | grid-template-columns: 1fr;
175 | grid-template-rows: 1fr;
176 | grid-template-areas:
177 | "i1"
178 | "i2"
179 | "ta"
180 | "bt";
181 | }
182 | input,
183 | textarea {
184 | font-size: 0.8rem;
185 | }
186 | }
187 |
--------------------------------------------------------------------------------