├── .gitignore
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── practiceProjects
    ├── 1
    │   ├── index.html
    │   └── styles.css
    ├── 2
    │   ├── b25c0b912de78ff7707c46be6f439ddf.jpg
    │   ├── index.html
    │   └── styles.css
    ├── 3
    │   ├── 52c231785162b7f6a7745ff1e783bb8c.jpg
    │   ├── index.html
    │   └── styles.css
    ├── 4
    │   ├── 624522de5ff7b35a355dedd087afbba1.jpg
    │   ├── index.html
    │   └── styles.css
    ├── 5
    │   ├── 702ddd369d1596338ddbb93f6759ae3f.jpg
    │   ├── index.html
    │   └── styles.css
    ├── 6
    │   ├── 86ff34f1e814e5dcae99dd9abe020b35.gif
    │   ├── index.html
    │   └── styles.css
    ├── 7
    │   ├── download.png
    │   ├── index.html
    │   └── styles.css
    ├── 8
    │   ├── download.png
    │   ├── index.html
    │   └── styles.css
    ├── 9
    │   ├── bdf81db0595d323cdeb2e6327e9824ce.jpg
    │   ├── index.html
    │   └── styles.css
    ├── 10
    │   ├── download.png
    │   ├── index.html
    │   └── styles.css
    ├── 11
    │   ├── download.png
    │   ├── index.html
    │   └── styles.css
    ├── 12
    │   ├── 23b918efc7c471bf1139b8e42a8b9ddd.jpg
    │   ├── index.html
    │   └── styles.css
    ├── 13
    │   ├── ca33104f19fc31c0a2222a03a49dc29f.png
    │   ├── index.html
    │   └── styles.css
    ├── 14
    │   ├── 17b8677a1a1f43f89e40f4c60b35028f.jpg
    │   ├── index.html
    │   └── styles.css
    └── 15
    │   ├── 62dd9ba1acfb76aec105fd7ba3bfac14.jpg
    │   ├── index.html
    │   └── styles.css
└── styles.css


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Runtime data
 9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Compiled binary addons (https://nodejs.org/api/addons.html)
33 | build/Release
34 | 
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 | 
39 | # TypeScript v1 declaration files
40 | typings/
41 | 
42 | # Optional npm cache directory
43 | .npm
44 | 
45 | # Optional eslint cache
46 | .eslintcache
47 | 
48 | # Optional REPL history
49 | .node_repl_history
50 | 
51 | # Output of 'npm pack'
52 | *.tgz
53 | 
54 | # Yarn Integrity file
55 | .yarn-integrity
56 | 
57 | # dotenv environment variables file
58 | .env
59 | 
60 | # next.js build output
61 | .next
62 | .DS_Store
63 | .cache
64 | dist


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # CSS Masterclass
 2 | 
 3 | CSS Masterclass course (Flexbox, Grid, PostCSS, CSSNext)
 4 | 
 5 | ### CSS Flex
 6 | 
 7 | - [x] CSS Flex Basics
 8 | - [x] Main Axis and Cross Axis
 9 | - [x] Flex Direction
10 | - [x] Flex Wrap
11 | - [x] Align Self
12 | 
13 | ### CSS Grid
14 | 
15 | - [x] CSS Grid Basics ( Row, columns and gaps)
16 | - [x] Auto columns, auto rows
17 | - [x] Template Areas
18 | - [x] fr unit, repeat
19 | - [x] minmax, max-content, min-content
20 | - [x] auto-fill, auto-fit
21 | - [x] Justify Content, Align Content and Place Content
22 | - [x] Justify Items, Align Items and Place Items
23 | - [x] Grid Column, Column Start and End
24 | - [x] Line Naming
25 | - [x] Grid Row, Row Start and End
26 | - [x] Grid Area
27 | - [x] Justify, Align, Place Self
28 | 
29 | ### Using CSS4
30 | 
31 | - [x] Installing Parcel
32 | - [x] Configuring PostCSS
33 | - [x] Testing
34 | 
35 | ### CSS4 Awesomeness
36 | 
37 | - [x] :matches , :not
38 | - [x] CSS Variables
39 | - [x] @custom-selector
40 | - [x] @custom-media
41 | - [x] Media Query Ranges
42 | - [x] color-mod, gray(), system-ui
43 | - [x] Nesting Rules
44 | 
45 | ### Conclusions
46 | 
47 | - [x] CSS Grid Kiss
48 | - [x] Practice Flexbox
49 | - [x] Practice Grid
50 | 
51 | ### Exercices
52 | 
53 | <img src="https://i.pinimg.com/originals/7d/4c/66/7d4c66d0b646478a297ee21e7cd8aee5.jpg" width="300px" />
54 | <img src="https://i.pinimg.com/originals/c3/64/72/c36472e703f1ca49324f53991f610392.jpg" width="300px" />
55 | <img src="https://i.pinimg.com/originals/69/63/a5/6963a5c312b1994e1c7ea094bbd508de.jpg" width="300px" />
56 | <img src="https://i.pinimg.com/564x/af/c5/fd/afc5fdee8a4036487d89ae08da9f1745.jpg" width="300px" />
57 | <img src="https://i.pinimg.com/564x/ba/ea/9d/baea9d5be82afaaea4aa6a739a0cc6a8.jpg" width="300px" />
58 | <img src="https://i.pinimg.com/564x/fd/90/23/fd9023163c117b63caac113a7bd47f5c.jpg" width="300px" />
59 | 
60 | <img src="https://i.pinimg.com/564x/a4/0d/ba/a40dba0269d7de0120496ec830d6b25a.jpg" width="300px" />
61 | <img src="https://cdn.dribbble.com/users/102267/screenshots/4275407/afisha_by_radiusss.jpg" width="300px" />
62 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Advanced CSS4</title>
 9 |     <link rel="stylesheet" href="styles.css">
10 | </head>
11 | 
12 | <body>
13 | 
14 | 
15 |     <main>
16 |         <section>
17 |             <li><a href="#">Hello!</a></li>
18 |         </section>
19 |     </main>
20 | 
21 | 
22 | 
23 | </body>
24 | 
25 | </html>


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "css-masterclass",
  3 |   "version": "1.0.0",
  4 |   "lockfileVersion": 1,
  5 |   "requires": true,
  6 |   "dependencies": {
  7 |     "@csstools/convert-colors": {
  8 |       "version": "1.4.0",
  9 |       "resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz",
 10 |       "integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw=="
 11 |     },
 12 |     "ansi-styles": {
 13 |       "version": "3.2.1",
 14 |       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
 15 |       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
 16 |       "requires": {
 17 |         "color-convert": "^1.9.0"
 18 |       }
 19 |     },
 20 |     "autoprefixer": {
 21 |       "version": "8.6.5",
 22 |       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-8.6.5.tgz",
 23 |       "integrity": "sha512-PLWJN3Xo/rycNkx+mp8iBDMTm3FeWe4VmYaZDSqL5QQB9sLsQkG5k8n+LNDFnhh9kdq2K+egL/icpctOmDHwig==",
 24 |       "requires": {
 25 |         "browserslist": "^3.2.8",
 26 |         "caniuse-lite": "^1.0.30000864",
 27 |         "normalize-range": "^0.1.2",
 28 |         "num2fraction": "^1.2.2",
 29 |         "postcss": "^6.0.23",
 30 |         "postcss-value-parser": "^3.2.3"
 31 |       }
 32 |     },
 33 |     "balanced-match": {
 34 |       "version": "1.0.0",
 35 |       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
 36 |       "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
 37 |     },
 38 |     "browserslist": {
 39 |       "version": "3.2.8",
 40 |       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-3.2.8.tgz",
 41 |       "integrity": "sha512-WHVocJYavUwVgVViC0ORikPHQquXwVh939TaelZ4WDqpWgTX/FsGhl/+P4qBUAGcRvtOgDgC+xftNWWp2RUTAQ==",
 42 |       "requires": {
 43 |         "caniuse-lite": "^1.0.30000844",
 44 |         "electron-to-chromium": "^1.3.47"
 45 |       }
 46 |     },
 47 |     "caniuse-lite": {
 48 |       "version": "1.0.30000882",
 49 |       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000882.tgz",
 50 |       "integrity": "sha512-8rH1O4z9f2RWZkVPfjgjH7o91s+1S/bnw11akv8a2WK/vby9dHwvPIOPJndB9EOLhyLY+SN78MQ1lwRcQXiveg=="
 51 |     },
 52 |     "chalk": {
 53 |       "version": "2.4.1",
 54 |       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
 55 |       "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==",
 56 |       "requires": {
 57 |         "ansi-styles": "^3.2.1",
 58 |         "escape-string-regexp": "^1.0.5",
 59 |         "supports-color": "^5.3.0"
 60 |       }
 61 |     },
 62 |     "color": {
 63 |       "version": "1.0.3",
 64 |       "resolved": "https://registry.npmjs.org/color/-/color-1.0.3.tgz",
 65 |       "integrity": "sha1-5I6DLYXxTvaU+0aIEcLVz+cptV0=",
 66 |       "requires": {
 67 |         "color-convert": "^1.8.2",
 68 |         "color-string": "^1.4.0"
 69 |       }
 70 |     },
 71 |     "color-convert": {
 72 |       "version": "1.9.3",
 73 |       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
 74 |       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
 75 |       "requires": {
 76 |         "color-name": "1.1.3"
 77 |       }
 78 |     },
 79 |     "color-name": {
 80 |       "version": "1.1.3",
 81 |       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
 82 |       "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
 83 |     },
 84 |     "color-string": {
 85 |       "version": "1.5.3",
 86 |       "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz",
 87 |       "integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==",
 88 |       "requires": {
 89 |         "color-name": "^1.0.0",
 90 |         "simple-swizzle": "^0.2.2"
 91 |       }
 92 |     },
 93 |     "cssdb": {
 94 |       "version": "3.1.0",
 95 |       "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-3.1.0.tgz",
 96 |       "integrity": "sha512-9+ASPG9O+d876YfZJjStXszOGn3EEOp5scMeCwZb/+TwTZfadQFshz/Vsh1vGET9HzaXvsfV+1O0ShFb52DddA=="
 97 |     },
 98 |     "cssesc": {
 99 |       "version": "1.0.1",
100 |       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-1.0.1.tgz",
101 |       "integrity": "sha512-S2hzrpWvE6G/rW7i7IxJfWBYn27QWfOIncUW++8Rbo1VB5zsJDSVPcnI+Q8z7rhxT6/yZeLOCja4cZnghJrNGA=="
102 |     },
103 |     "electron-to-chromium": {
104 |       "version": "1.3.62",
105 |       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.62.tgz",
106 |       "integrity": "sha512-x09ndL/Gjnuk3unlAyoGyUg3wbs4w/bXurgL7wL913vXHAOWmMhrLf1VNGRaMLngmadd5Q8gsV9BFuIr6rP+Xg=="
107 |     },
108 |     "escape-string-regexp": {
109 |       "version": "1.0.5",
110 |       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
111 |       "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
112 |     },
113 |     "flatten": {
114 |       "version": "1.0.2",
115 |       "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.2.tgz",
116 |       "integrity": "sha1-2uRqnXj74lKSJYzB54CkHZXAN4I="
117 |     },
118 |     "has-flag": {
119 |       "version": "3.0.0",
120 |       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
121 |       "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
122 |     },
123 |     "indexes-of": {
124 |       "version": "1.0.1",
125 |       "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
126 |       "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc="
127 |     },
128 |     "is-arrayish": {
129 |       "version": "0.3.2",
130 |       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
131 |       "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
132 |     },
133 |     "lodash._reinterpolate": {
134 |       "version": "3.0.0",
135 |       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
136 |       "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
137 |     },
138 |     "lodash.template": {
139 |       "version": "4.4.0",
140 |       "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.4.0.tgz",
141 |       "integrity": "sha1-5zoDhcg1VZF0bgILmWecaQ5o+6A=",
142 |       "requires": {
143 |         "lodash._reinterpolate": "~3.0.0",
144 |         "lodash.templatesettings": "^4.0.0"
145 |       }
146 |     },
147 |     "lodash.templatesettings": {
148 |       "version": "4.1.0",
149 |       "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.1.0.tgz",
150 |       "integrity": "sha1-K01OlbpEDZFf8IvImeRVNmZxMxY=",
151 |       "requires": {
152 |         "lodash._reinterpolate": "~3.0.0"
153 |       }
154 |     },
155 |     "normalize-range": {
156 |       "version": "0.1.2",
157 |       "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
158 |       "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI="
159 |     },
160 |     "num2fraction": {
161 |       "version": "1.2.2",
162 |       "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
163 |       "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4="
164 |     },
165 |     "postcss": {
166 |       "version": "6.0.23",
167 |       "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
168 |       "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
169 |       "requires": {
170 |         "chalk": "^2.4.1",
171 |         "source-map": "^0.6.1",
172 |         "supports-color": "^5.4.0"
173 |       }
174 |     },
175 |     "postcss-attribute-case-insensitive": {
176 |       "version": "3.0.1",
177 |       "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-3.0.1.tgz",
178 |       "integrity": "sha512-X/viSS9YrAoDnRa2R4sElsAmW+scOWeVW11FjWQN8m+FW1YY0jdIA9fuBSSF1pKsJTYXJXGJ1oAjFHl8cqcmKw==",
179 |       "requires": {
180 |         "postcss": "^6.0.23",
181 |         "postcss-selector-parser": "^4.0.0"
182 |       }
183 |     },
184 |     "postcss-color-functional-notation": {
185 |       "version": "1.0.2",
186 |       "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-1.0.2.tgz",
187 |       "integrity": "sha512-FxkEr+s/KCrcrTxUhHcDMKGZmnLjUKK7pl2gDjnEoAJaVcbThdDWLhuASu02qdA3Ys7np/BwJgwc72JrURTvJQ==",
188 |       "requires": {
189 |         "postcss": "^6.0.23",
190 |         "postcss-values-parser": "^1.5.0"
191 |       }
192 |     },
193 |     "postcss-color-hex-alpha": {
194 |       "version": "3.0.0",
195 |       "resolved": "https://registry.npmjs.org/postcss-color-hex-alpha/-/postcss-color-hex-alpha-3.0.0.tgz",
196 |       "integrity": "sha1-HlPmyKyyN5Vej9CLfs2xuLgwn5U=",
197 |       "requires": {
198 |         "color": "^1.0.3",
199 |         "postcss": "^6.0.1",
200 |         "postcss-message-helpers": "^2.0.0"
201 |       }
202 |     },
203 |     "postcss-color-mod-function": {
204 |       "version": "2.4.3",
205 |       "resolved": "https://registry.npmjs.org/postcss-color-mod-function/-/postcss-color-mod-function-2.4.3.tgz",
206 |       "integrity": "sha512-TEATRHN1m2+vM4efwRoPyrAQTbBA4xgx1jSMPv64oLcwVFC4qr6d4o9DAD5LxygIMeBBBugQHvXoSIM+87NaFQ==",
207 |       "requires": {
208 |         "@csstools/convert-colors": "^1.4.0",
209 |         "postcss": "^6.0.23",
210 |         "postcss-values-parser": "^1.5.0"
211 |       }
212 |     },
213 |     "postcss-color-rebeccapurple": {
214 |       "version": "3.1.0",
215 |       "resolved": "https://registry.npmjs.org/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-3.1.0.tgz",
216 |       "integrity": "sha512-212hJUk9uSsbwO5ECqVjmh/iLsmiVL1xy9ce9TVf+X3cK/ZlUIlaMdoxje/YpsL9cmUH3I7io+/G2LyWx5rg1g==",
217 |       "requires": {
218 |         "postcss": "^6.0.22",
219 |         "postcss-values-parser": "^1.5.0"
220 |       }
221 |     },
222 |     "postcss-custom-media": {
223 |       "version": "6.0.0",
224 |       "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-6.0.0.tgz",
225 |       "integrity": "sha1-vlMnhBEOyylQRPtTlaGABushpzc=",
226 |       "requires": {
227 |         "postcss": "^6.0.1"
228 |       }
229 |     },
230 |     "postcss-custom-properties": {
231 |       "version": "7.0.0",
232 |       "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-7.0.0.tgz",
233 |       "integrity": "sha512-dl/CNaM6z2RBa0vZZqsV6Hunj4HD6Spu7FcAkiVp5B2tgm6xReKKYzI7x7QNx3wTMBNj5v+ylfVcQGMW4xdkHw==",
234 |       "requires": {
235 |         "balanced-match": "^1.0.0",
236 |         "postcss": "^6.0.18"
237 |       }
238 |     },
239 |     "postcss-custom-selectors": {
240 |       "version": "4.0.1",
241 |       "resolved": "https://registry.npmjs.org/postcss-custom-selectors/-/postcss-custom-selectors-4.0.1.tgz",
242 |       "integrity": "sha1-eBOC+UxS5yfvXKR3bqKt9JphE4I=",
243 |       "requires": {
244 |         "postcss": "^6.0.1",
245 |         "postcss-selector-matches": "^3.0.0"
246 |       }
247 |     },
248 |     "postcss-dir-pseudo-class": {
249 |       "version": "4.0.0",
250 |       "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-4.0.0.tgz",
251 |       "integrity": "sha512-ZAeXMIyZukHHeDt5IFchWB+okPzasb8YnpkXIgTiJl4216X1IplMrODjihZIBDXNE2RdJRBCAOx8uGzCnGSxTA==",
252 |       "requires": {
253 |         "postcss": "^6.0.22",
254 |         "postcss-selector-parser": "^4.0.0"
255 |       }
256 |     },
257 |     "postcss-env-function": {
258 |       "version": "1.0.0",
259 |       "resolved": "https://registry.npmjs.org/postcss-env-function/-/postcss-env-function-1.0.0.tgz",
260 |       "integrity": "sha512-UVkdbVCRAEr79XkS6uxMRWIHYrFNuhXmjw6gxyesCBXzzHIvYOoz5UKTWM39xX3j9vGO5waVzxq/VzEiZgsM0g==",
261 |       "requires": {
262 |         "postcss": "^6.0.22",
263 |         "postcss-values-parser": "^1.5.0"
264 |       }
265 |     },
266 |     "postcss-focus-visible": {
267 |       "version": "3.0.0",
268 |       "resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-3.0.0.tgz",
269 |       "integrity": "sha512-6i3HsOrWNelxBYPh/HWAXF9lPwCFAfFVlUTZqsLRXYMPhcXH1eXdItozRBvT9l5pYF4ddJJbgk4JOp0au0QToA==",
270 |       "requires": {
271 |         "postcss": "^6.0"
272 |       }
273 |     },
274 |     "postcss-focus-within": {
275 |       "version": "2.0.0",
276 |       "resolved": "https://registry.npmjs.org/postcss-focus-within/-/postcss-focus-within-2.0.0.tgz",
277 |       "integrity": "sha512-LTbT/dxZ3FahpOv1XZMyRLNnBk5QWVU4HL/p82iFkzoPNVhNQazaYIujHXTOAKea5clgjbj6GdFj7mU7qzy1kQ==",
278 |       "requires": {
279 |         "postcss": "^6.0.21"
280 |       }
281 |     },
282 |     "postcss-font-family-system-ui": {
283 |       "version": "3.0.0",
284 |       "resolved": "https://registry.npmjs.org/postcss-font-family-system-ui/-/postcss-font-family-system-ui-3.0.0.tgz",
285 |       "integrity": "sha512-58G/hTxMSSKlIRpcPUjlyo6hV2MEzvcVO2m4L/T7Bb2fJTG4DYYfQjQeRvuimKQh1V1sOzCIz99g+H2aFNtlQw==",
286 |       "requires": {
287 |         "postcss": "^6.0"
288 |       }
289 |     },
290 |     "postcss-font-variant": {
291 |       "version": "3.0.0",
292 |       "resolved": "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-3.0.0.tgz",
293 |       "integrity": "sha1-CMzIj2BQuoLtjvLMdsDGprQfGD4=",
294 |       "requires": {
295 |         "postcss": "^6.0.1"
296 |       }
297 |     },
298 |     "postcss-gap-properties": {
299 |       "version": "1.0.0",
300 |       "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-1.0.0.tgz",
301 |       "integrity": "sha512-snL2k0Nie72J0uCsKgfO2Sd5rs3Wlhsk+k9uVzyMaeBH9gouNPPY7tZ4bopRJmBISbZEUtvF8Gchat6nOFQHdg==",
302 |       "requires": {
303 |         "postcss": "^6.0.22"
304 |       }
305 |     },
306 |     "postcss-image-set-function": {
307 |       "version": "2.0.0",
308 |       "resolved": "https://registry.npmjs.org/postcss-image-set-function/-/postcss-image-set-function-2.0.0.tgz",
309 |       "integrity": "sha512-2bpCIj2wFhIhpyM1G/ZZgBJM8K/VKbEcQ0SX5MI9MTGv4giPMnuXMa/sX3bHXHhi1PL4v2WRfqD1+w5T9EhFqg==",
310 |       "requires": {
311 |         "postcss": "^6.0.22",
312 |         "postcss-values-parser": "^1.5.0"
313 |       }
314 |     },
315 |     "postcss-initial": {
316 |       "version": "2.0.0",
317 |       "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-2.0.0.tgz",
318 |       "integrity": "sha1-cnFfczbgu3k1HZnuZcSiU6hEG6Q=",
319 |       "requires": {
320 |         "lodash.template": "^4.2.4",
321 |         "postcss": "^6.0.1"
322 |       }
323 |     },
324 |     "postcss-lab-function": {
325 |       "version": "1.1.0",
326 |       "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-1.1.0.tgz",
327 |       "integrity": "sha512-n5OBvdjTUSIpMnYuwOYp2wyrUxx3WwDnuAWLyFUryKU67QrlgHndtOn/8xEUzviknpC6fEi/HQ+qLoVew3C+0A==",
328 |       "requires": {
329 |         "@csstools/convert-colors": "^1.4.0",
330 |         "postcss": "^6.0.23",
331 |         "postcss-values-parser": "^1.5.0"
332 |       }
333 |     },
334 |     "postcss-logical": {
335 |       "version": "1.1.1",
336 |       "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-1.1.1.tgz",
337 |       "integrity": "sha512-ZJgyLJlp3uPKae9+6sJKFjD06UZzb/m3M1LPeHsaBMvvyatcNWwCfOZVIq00fJdxUqa9QeuQO6RZElKmRdWMEg==",
338 |       "requires": {
339 |         "postcss": "^6.0.20"
340 |       }
341 |     },
342 |     "postcss-media-minmax": {
343 |       "version": "3.0.0",
344 |       "resolved": "https://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-3.0.0.tgz",
345 |       "integrity": "sha1-Z1JWA3pD70C8Twdgv9BtTcadSNI=",
346 |       "requires": {
347 |         "postcss": "^6.0.1"
348 |       }
349 |     },
350 |     "postcss-message-helpers": {
351 |       "version": "2.0.0",
352 |       "resolved": "https://registry.npmjs.org/postcss-message-helpers/-/postcss-message-helpers-2.0.0.tgz",
353 |       "integrity": "sha1-pPL0+rbk/gAvCu0ABHjN9S+bpg4="
354 |     },
355 |     "postcss-nesting": {
356 |       "version": "6.0.0",
357 |       "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-6.0.0.tgz",
358 |       "integrity": "sha512-Yoglsy6eZbDCbRIXoYSmnIt9ao4xyg07iFwVBd7WyIkDzMSeRxIqUk8xEAdkeJQ7eGfWo6RufrTU7FSUjZ22fg==",
359 |       "requires": {
360 |         "postcss": "^6.0.22"
361 |       }
362 |     },
363 |     "postcss-overflow-shorthand": {
364 |       "version": "1.0.1",
365 |       "resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-1.0.1.tgz",
366 |       "integrity": "sha512-QeJk23W8dLP2DrWYSKTwfFfh4Tcy5Msr58vuuxCPcCijX/07jva0OGNKtUH9vZ6NnXB2WEsnfIIg5M0ScPEWeQ==",
367 |       "requires": {
368 |         "postcss": "^6.0.22"
369 |       }
370 |     },
371 |     "postcss-page-break": {
372 |       "version": "1.0.0",
373 |       "resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-1.0.0.tgz",
374 |       "integrity": "sha512-FgjJ7q/cQFbfQFdmm15XDu+DjNb6Tcn7LYm+o1CxyHV5p6pCm0jkRhuU+PF6FaMrSTfy5nF8nuWhwOtUQyWiYA==",
375 |       "requires": {
376 |         "postcss": "^6.0.16"
377 |       }
378 |     },
379 |     "postcss-place": {
380 |       "version": "3.0.1",
381 |       "resolved": "https://registry.npmjs.org/postcss-place/-/postcss-place-3.0.1.tgz",
382 |       "integrity": "sha512-6Cg0z39zBU4FOS85Z6+Us+GCIW7UqKdOGH/9j26LwMzZ3L909wG7NP3BF+L12AEeIL5XfI8Q5SWu9Or3nJTS8g==",
383 |       "requires": {
384 |         "postcss": "^6.0.22",
385 |         "postcss-values-parser": "^1.5.0"
386 |       }
387 |     },
388 |     "postcss-preset-env": {
389 |       "version": "5.3.0",
390 |       "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-5.3.0.tgz",
391 |       "integrity": "sha512-9EfvxjfFpNv6IDv9Eoih7NE9vrfC5s9s9nvFpOXA/jAB49MNh4OE4OWyliS3nieRpRObsiL65ZIEiuQ8ajdl+A==",
392 |       "requires": {
393 |         "autoprefixer": "^8.6.5",
394 |         "browserslist": "^3.2.8",
395 |         "caniuse-lite": "^1.0.30000865",
396 |         "cssdb": "^3.1.0",
397 |         "postcss": "^6.0.23",
398 |         "postcss-attribute-case-insensitive": "^3.0.1",
399 |         "postcss-color-functional-notation": "^1.0.2",
400 |         "postcss-color-hex-alpha": "^3.0.0",
401 |         "postcss-color-mod-function": "^2.4.3",
402 |         "postcss-color-rebeccapurple": "^3.1.0",
403 |         "postcss-custom-media": "^6.0.0",
404 |         "postcss-custom-properties": "^7.0.0",
405 |         "postcss-custom-selectors": "^4.0.1",
406 |         "postcss-dir-pseudo-class": "^4.0.0",
407 |         "postcss-env-function": "^1.0.0",
408 |         "postcss-focus-visible": "^3.0.0",
409 |         "postcss-focus-within": "^2.0.0",
410 |         "postcss-font-family-system-ui": "^3.0.0",
411 |         "postcss-font-variant": "^3.0.0",
412 |         "postcss-gap-properties": "^1.0.0",
413 |         "postcss-image-set-function": "^2.0.0",
414 |         "postcss-initial": "^2.0.0",
415 |         "postcss-lab-function": "^1.1.0",
416 |         "postcss-logical": "^1.1.1",
417 |         "postcss-media-minmax": "^3.0.0",
418 |         "postcss-nesting": "^6.0.0",
419 |         "postcss-overflow-shorthand": "^1.0.1",
420 |         "postcss-page-break": "^1.0.0",
421 |         "postcss-place": "^3.0.1",
422 |         "postcss-pseudo-class-any-link": "^5.0.0",
423 |         "postcss-replace-overflow-wrap": "^2.0.0",
424 |         "postcss-selector-matches": "^3.0.1",
425 |         "postcss-selector-not": "^3.0.1"
426 |       }
427 |     },
428 |     "postcss-pseudo-class-any-link": {
429 |       "version": "5.0.0",
430 |       "resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-5.0.0.tgz",
431 |       "integrity": "sha512-rA5grdRhLLMMI654eOZVuKGr4fUBQNGSH0K+7j5839CiBA/IvNt/Ewt7aIrkGZPySKI3nqzs34HefO8U0Fxahg==",
432 |       "requires": {
433 |         "postcss": "^6.0.22",
434 |         "postcss-selector-parser": "^4.0.0"
435 |       }
436 |     },
437 |     "postcss-replace-overflow-wrap": {
438 |       "version": "2.0.0",
439 |       "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-2.0.0.tgz",
440 |       "integrity": "sha1-eU22+qVPjbEAhUOSqTr0V2i04ls=",
441 |       "requires": {
442 |         "postcss": "^6.0.1"
443 |       }
444 |     },
445 |     "postcss-selector-matches": {
446 |       "version": "3.0.1",
447 |       "resolved": "https://registry.npmjs.org/postcss-selector-matches/-/postcss-selector-matches-3.0.1.tgz",
448 |       "integrity": "sha1-5WNAEeE5UIgYYbvdWMLQER/8lqs=",
449 |       "requires": {
450 |         "balanced-match": "^0.4.2",
451 |         "postcss": "^6.0.1"
452 |       },
453 |       "dependencies": {
454 |         "balanced-match": {
455 |           "version": "0.4.2",
456 |           "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz",
457 |           "integrity": "sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg="
458 |         }
459 |       }
460 |     },
461 |     "postcss-selector-not": {
462 |       "version": "3.0.1",
463 |       "resolved": "https://registry.npmjs.org/postcss-selector-not/-/postcss-selector-not-3.0.1.tgz",
464 |       "integrity": "sha1-Lk2y8JZTNsAefOx9tsYN/3ZzNdk=",
465 |       "requires": {
466 |         "balanced-match": "^0.4.2",
467 |         "postcss": "^6.0.1"
468 |       },
469 |       "dependencies": {
470 |         "balanced-match": {
471 |           "version": "0.4.2",
472 |           "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz",
473 |           "integrity": "sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg="
474 |         }
475 |       }
476 |     },
477 |     "postcss-selector-parser": {
478 |       "version": "4.0.0",
479 |       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-4.0.0.tgz",
480 |       "integrity": "sha512-5h+MvEjnzu1qy6MabjuoPatsGAjjDV9B24e7Cktjl+ClNtjVjmvAXjOFQr1u7RlWULKNGYaYVE4s+DIIQ4bOGA==",
481 |       "requires": {
482 |         "cssesc": "^1.0.1",
483 |         "indexes-of": "^1.0.1",
484 |         "uniq": "^1.0.1"
485 |       }
486 |     },
487 |     "postcss-value-parser": {
488 |       "version": "3.3.0",
489 |       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz",
490 |       "integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU="
491 |     },
492 |     "postcss-values-parser": {
493 |       "version": "1.5.0",
494 |       "resolved": "https://registry.npmjs.org/postcss-values-parser/-/postcss-values-parser-1.5.0.tgz",
495 |       "integrity": "sha512-3M3p+2gMp0AH3da530TlX8kiO1nxdTnc3C6vr8dMxRLIlh8UYkz0/wcwptSXjhtx2Fr0TySI7a+BHDQ8NL7LaQ==",
496 |       "requires": {
497 |         "flatten": "^1.0.2",
498 |         "indexes-of": "^1.0.1",
499 |         "uniq": "^1.0.1"
500 |       }
501 |     },
502 |     "simple-swizzle": {
503 |       "version": "0.2.2",
504 |       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
505 |       "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
506 |       "requires": {
507 |         "is-arrayish": "^0.3.1"
508 |       }
509 |     },
510 |     "source-map": {
511 |       "version": "0.6.1",
512 |       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
513 |       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
514 |     },
515 |     "supports-color": {
516 |       "version": "5.5.0",
517 |       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
518 |       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
519 |       "requires": {
520 |         "has-flag": "^3.0.0"
521 |       }
522 |     },
523 |     "uniq": {
524 |       "version": "1.0.1",
525 |       "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
526 |       "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8="
527 |     }
528 |   }
529 | }
530 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "css-masterclass",
 3 |   "version": "1.0.0",
 4 |   "description": "CSS Masterclass course (Flexbox, Grid, PostCSS, CSSNext)",
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": "git+https://github.com/nomadcoders/css-masterclass.git"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "ISC",
12 |   "bugs": {
13 |     "url": "https://github.com/nomadcoders/css-masterclass/issues"
14 |   },
15 |   "homepage": "https://github.com/nomadcoders/css-masterclass#readme",
16 |   "scripts": {
17 |     "start": "parcel index.html"
18 |   },
19 |   "dependencies": {
20 |     "postcss-preset-env": "^5.3.0"
21 |   },
22 |   "postcss": {
23 |     "plugins": {
24 |       "postcss-preset-env": {
25 |         "stage": 0
26 |       }
27 |     }
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/practiceProjects/1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Project One</title>
 9 |     <link rel="stylesheet" href="styles.css">
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <header class="header threeGrid">
15 |         <h1>▲❚</h1>
16 |         <div class="header__column">
17 |             <ul class="header__nav">
18 |                 <span>Information</span>
19 |                 <li>About</li>
20 |                 <li>News</li>
21 |                 <li>Press</li>
22 |             </ul>
23 |             <ul class="header__nav">
24 |                 <span>Portfolio</span>
25 |                 <li>Products</li>
26 |                 <li>Graphics</li>
27 |                 <li>Sounds</li>
28 |             </ul>
29 |         </div>
30 |         <div class="header__column">
31 |             <ul class="header__nav">
32 |                 <span>Network</span>
33 |                 <li>Facebook</li>
34 |                 <li>Instagram</li>
35 |                 <li>Youtube</li>
36 |             </ul>
37 |         </div>
38 |     </header>
39 | 
40 | 
41 |     <main class="grid threeGrid">
42 |         <div class="grid__item"></div>
43 |         <div class="grid__item"></div>
44 |         <div class="grid__item"></div>
45 |         <div class="grid__item"></div>
46 |         <div class="grid__item"></div>
47 |         <div class="grid__item"></div>
48 |         <div class="grid__item"></div>
49 |         <div class="grid__item"></div>
50 |         <div class="grid__item"></div>
51 |         <div class="grid__item"></div>
52 |         <div class="grid__item"></div>
53 |         <div class="grid__item"></div>
54 |         <div class="grid__item"></div>
55 |         <div class="grid__item"></div>
56 |         <div class="grid__item"></div>
57 |     </main>
58 | 
59 | </body>
60 | 
61 | </html>


--------------------------------------------------------------------------------
/practiceProjects/1/styles.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   --colorOne: #d5ecf4;
  3 |   --colorTwo: #e5efd9;
  4 |   --colorThree: #fcf8c0;
  5 |   --colorFour: #ebebeb;
  6 |   --colorFive: #f4c5c3;
  7 |   --colorSix: #e5efd8;
  8 |   --colorSeven: #fcf8c0;
  9 | }
 10 | 
 11 | body {
 12 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
 13 |     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 14 | }
 15 | 
 16 | ul {
 17 |   list-style: none;
 18 | }
 19 | 
 20 | ul,
 21 | li {
 22 |   margin: 0;
 23 |   padding: 0;
 24 | }
 25 | 
 26 | .threeGrid {
 27 |   display: grid;
 28 |   grid-template-columns: repeat(3, 1fr);
 29 | }
 30 | 
 31 | .header {
 32 |   margin-top: 50px;
 33 |   margin-bottom: 200px;
 34 | }
 35 | 
 36 | .header h1 {
 37 |   margin-top: 0;
 38 |   font-size: 60px;
 39 | }
 40 | 
 41 | .header .header__column {
 42 |   display: flex;
 43 |   justify-content: space-around;
 44 | }
 45 | 
 46 | .header__nav span {
 47 |   margin-bottom: 10px;
 48 |   text-transform: uppercase;
 49 |   text-decoration: underline;
 50 |   display: block;
 51 |   margin-bottom: 10px;
 52 |   color: rgba(0, 0, 0, 0.4);
 53 | }
 54 | 
 55 | .header__nav li {
 56 |   margin-bottom: 10px;
 57 | }
 58 | 
 59 | .header__nav li:last-child {
 60 |   margin-bottom: 0;
 61 | }
 62 | 
 63 | .grid {
 64 |   grid-auto-rows: 30vh;
 65 |   grid-gap: 20px;
 66 | }
 67 | 
 68 | .grid .grid__item {
 69 |   background-size: cover;
 70 |   background-position: center center;
 71 | }
 72 | 
 73 | .grid .grid__item:first-child {
 74 |   grid-row: span 2;
 75 |   background-color: var(--colorOne);
 76 | }
 77 | 
 78 | .grid .grid__item:nth-child(2) {
 79 |   grid-area: span 2 / span 2;
 80 |   background-image: url(https://i.pinimg.com/564x/a9/29/68/a9296861b27d0f483dfcca54b79a76b5.jpg);
 81 | }
 82 | 
 83 | .grid .grid__item:nth-child(3) {
 84 |   background-color: var(--colorTwo);
 85 | }
 86 | 
 87 | .grid .grid__item:nth-child(4) {
 88 |   grid-row: span 2;
 89 |   background-image: url(https://i.pinimg.com/564x/5d/d7/4e/5dd74eb1a270a2cff2d8e920aad90ee3.jpg);
 90 | }
 91 | 
 92 | .grid .grid__item:nth-child(5) {
 93 |   background-color: var(--colorThree);
 94 | }
 95 | 
 96 | .grid .grid__item:nth-child(6) {
 97 |   background-color: var(--colorFour);
 98 | }
 99 | 
100 | .grid__item:nth-child(7) {
101 |   background-image: url(https://i.pinimg.com/564x/91/45/97/9145975e4a07ca65a80e61059a618931.jpg);
102 | }
103 | 
104 | .grid__item:nth-child(8) {
105 |   grid-area: span 2 / span 2;
106 |   background-color: var(--colorFive);
107 | }
108 | 
109 | .grid__item:nth-child(9) {
110 |   grid-row: span 2;
111 |   background-image: url(https://i.pinimg.com/236x/78/ee/a9/78eea9ba650b73f0fe0d9652f6d025bb.jpg);
112 | }
113 | 
114 | .grid__item:nth-child(10) {
115 |   grid-area: span 2 / span 2;
116 |   background-image: url(https://i.pinimg.com/564x/f4/60/27/f46027b7568b05d37b2f110d746f9230.jpg);
117 | }
118 | 
119 | .grid__item:nth-child(11) {
120 |   background-image: url(https://i.pinimg.com/564x/44/5c/ab/445cabc3f44b363c7fc5e9375625e28d.jpg);
121 | }
122 | .grid__item:nth-child(12) {
123 |   background-image: url(https://i.pinimg.com/236x/fd/aa/89/fdaa89ef1c215e84982a08d532e9a431.jpg);
124 | }
125 | 
126 | .grid__item:nth-child(13) {
127 |   grid-area: span 2 / span 2;
128 |   background-color: var(--colorSix);
129 | }
130 | 
131 | .grid__item:nth-child(14) {
132 |   background-image: url(https://i.pinimg.com/564x/65/37/28/6537287a63553bdee3589e53345abff6.jpg);
133 | }
134 | 
135 | .grid__item:last-child {
136 |   background-color: var(--colorSeven);
137 | }
138 | 


--------------------------------------------------------------------------------
/practiceProjects/10/download.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/css-masterclass/d29b0119f96e3a7306ec3541425c8db7155a93c8/practiceProjects/10/download.png


--------------------------------------------------------------------------------
/practiceProjects/10/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Practice Ten</title>
 9 |     <link rel="stylesheet" href="styles.css">
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <main class="grid">
15 |         <header class="header">
16 |             <h1 class="title">Works</h1>
17 |         </header>
18 |         <div class="item">
19 |             <h2 class="item__number">01</h2>
20 |             <h4 class="item__title">Acorde Cafe</h4>
21 |         </div>
22 |         <div class="item">
23 |             <h2 class="item__number">02</h2>
24 |             <h4 class="item__title">Acorde Cafe</h4>
25 |         </div>
26 |         <div class="item">
27 |             <h2 class="item__number">03</h2>
28 |             <h4 class="item__title">Acorde Cafe</h4>
29 |             <img src="https://picsum.photos/1000/1000/?random" alt="">
30 |         </div>
31 |         <div class="item">
32 |             <h2 class="item__number">04</h2>
33 |             <h4 class="item__title">Acorde Cafe</h4>
34 |         </div>
35 |         <div class="item">
36 |             <h2 class="item__number">05</h2>
37 |             <h4 class="item__title">Acorde Cafe</h4>
38 |         </div>
39 |         <div class="item">
40 |             <h2 class="item__number">06</h2>
41 |             <h4 class="item__title">Acorde Cafe</h4>
42 |             <img src="https://picsum.photos/1000/1000/?random" alt="">
43 |         </div>
44 |         <div class="item">
45 |             <h2 class="item__number">07</h2>
46 |             <h4 class="item__title">Acorde Cafe</h4>
47 |         </div>
48 |         <div class="item">
49 |             <h2 class="item__number">08</h2>
50 |             <h4 class="item__title">Acorde Cafe</h4>
51 |             <img src="https://picsum.photos/1000/1000/?random" alt="">
52 |         </div>
53 |         <div class="item">
54 |             <h2 class="item__number">09</h2>
55 |             <h4 class="item__title">Acorde Cafe</h4>
56 |         </div>
57 |         <div class="item">
58 |             <h2 class="item__number">10</h2>
59 |             <h4 class="item__title">Acorde Cafe</h4>
60 |         </div>
61 |     </main>
62 | 
63 | </body>
64 | 
65 | </html>


--------------------------------------------------------------------------------
/practiceProjects/10/styles.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   --redColor: #e93531;
 3 | }
 4 | 
 5 | img {
 6 |   max-width: 100%;
 7 | }
 8 | 
 9 | * {
10 |   box-sizing: border-box;
11 | }
12 | 
13 | h1,
14 | h2,
15 | h3,
16 | h4,
17 | h5,
18 | html,
19 | body {
20 |   margin: 0;
21 |   padding: 0;
22 | }
23 | 
24 | body {
25 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
26 |     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
27 |   background-color: #fafafc;
28 |   padding: 150px 50px;
29 | }
30 | 
31 | .grid {
32 |   display: grid;
33 |   grid-template-columns: repeat(6, minmax(200px, 1fr));
34 |   grid-template-rows: repeat(3, 200px);
35 |   grid-auto-columns: minmax(200px, 1fr);
36 |   grid-auto-rows: 200px;
37 |   grid-auto-flow: row dense;
38 |   gap: 20px;
39 | }
40 | 
41 | .grid .header {
42 |   grid-area: span 3 / span 2;
43 |   align-self: center;
44 | }
45 | 
46 | .header .title {
47 |   transform: rotate(-90deg);
48 |   transform-origin: 20% 65%;
49 |   color: var(--redColor);
50 |   font-size: 90px;
51 | }
52 | 
53 | .grid .item {
54 |   border-top: 10px solid black;
55 |   padding-top: 20px;
56 |   overflow: hidden;
57 | }
58 | 
59 | .item .item__number {
60 |   font-size: 60px;
61 | }
62 | 
63 | .grid .item:nth-child(4),
64 | .grid .item:nth-child(7),
65 | .grid .item:nth-child(9) {
66 |   grid-area: span 3 / span 2;
67 | }
68 | 
69 | .grid .item:nth-child(4) .item__number,
70 | .grid .item:nth-child(9) .item__number {
71 |   font-size: 130px;
72 | }
73 | 


--------------------------------------------------------------------------------
/practiceProjects/11/download.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/css-masterclass/d29b0119f96e3a7306ec3541425c8db7155a93c8/practiceProjects/11/download.png


--------------------------------------------------------------------------------
/practiceProjects/11/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Practice Ten</title>
 9 |     <link rel="stylesheet" href="styles.css">
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <div class="column">
15 |         <header class="header">
16 |             <h1 class="header__title">Muse</h1>
17 |             <nav class="header__nav">
18 |                 <ul class="header__list">
19 |                     <li class="header__list-item">The best of</li>
20 |                     <li class="header__list-item">Can't read</li>
21 |                 </ul>
22 |             </nav>
23 |         </header>
24 | 
25 |         <section class="content">
26 |             <h2 class="content__title">Kabangu</h2>
27 |             <p class="content__text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Saepe quidem voluptate
28 |                 adipisci, temporibus culpa architecto veritatis sapiente tempora nemo eveniet minus neque quis animi?
29 |                 Porro unde inventore illum quasi in.</p>
30 |             <span class="view-more">
31 |                 <span class="view-more__icon">
32 |                     <svg xmlns="http://www.w3.org/2000/svg" width="12.5" height="12.5" viewBox="0 0 24 24">
33 |                         <path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z" /></svg>
34 |                 </span>
35 |                 <span class="view-more__text">View more</span>
36 |             </span>
37 |         </section>
38 |     </div>
39 |     <section class="items">
40 |         <article class="item">
41 |             <div class="item__wrapper">
42 |                 <h4 class="item__pre-title">Make up</h4>
43 |                 <h3 class="item__title">Valary Mdeizi</h3>
44 |                 <img src="https://i.pinimg.com/564x/4e/37/40/4e37401a741ce7b56d7a1a90e2f9f2cd.jpg" alt="" class="item__image">
45 |                 <small class="item__number">01</small>
46 |             </div>
47 |         </article>
48 |         <article class="item">
49 |             <div class="item__wrapper">
50 |                 <h4 class="item__pre-title">Make up</h4>
51 |                 <h3 class="item__title">Valary Mdeizi</h3>
52 |                 <img src="https://i.pinimg.com/564x/4e/37/40/4e37401a741ce7b56d7a1a90e2f9f2cd.jpg" alt="" class="item__image">
53 |                 <small class="item__number">01</small>
54 |             </div>
55 |         </article>
56 |         <article class="item">
57 |             <div class="btns">
58 |                 <span class="btns__btn">
59 |                     <svg xmlns="http://www.w3.org/2000/svg" width="12.5" height="12.5" viewBox="0 0 24 24">
60 |                         <path d="M12 9.229c.234-1.12 1.547-6.229 5.382-6.229 2.22 0 4.618 1.551 4.618 5.003 0 3.907-3.627 8.47-10 12.629-6.373-4.159-10-8.722-10-12.629 0-3.484 2.369-5.005 4.577-5.005 3.923 0 5.145 5.126 5.423 6.231zm-12-1.226c0 4.068 3.06 9.481 12 14.997 8.94-5.516 12-10.929 12-14.997 0-7.962-9.648-9.028-12-3.737-2.338-5.262-12-4.27-12 3.737z" /></svg>
61 |                 </span>
62 |                 <span class="btns__btn">
63 |                     <svg xmlns="http://www.w3.org/2000/svg" width="12.5" height="12.5" viewBox="0 0 24 24">
64 |                         <path d="M24 6h-24v-4h24v4zm0 4h-24v4h24v-4zm0 8h-24v4h24v-4z" /></svg>
65 |                 </span>
66 |             </div>
67 |             <div class="item__wrapper">
68 |                 <h4 class="item__pre-title">Make up</h4>
69 |                 <h3 class="item__title">Valary Mdeizi</h3>
70 |                 <img src="https://i.pinimg.com/564x/9d/4f/74/9d4f7411fe196074879c3eac25132f29.jpg" alt="" class="item__image">
71 |                 <small class="item__number">01</small>
72 |             </div>
73 |         </article>
74 |     </section>
75 | 
76 | </body>
77 | 
78 | </html>


--------------------------------------------------------------------------------
/practiceProjects/11/styles.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   --greyColor: rgba(0, 0, 0, 0.7);
  3 | }
  4 | 
  5 | * {
  6 |   box-sizing: border-box;
  7 | }
  8 | 
  9 | h1,
 10 | h2,
 11 | h3,
 12 | h4,
 13 | h5,
 14 | html,
 15 | body {
 16 |   margin: 0;
 17 |   padding: 0;
 18 | }
 19 | 
 20 | html,
 21 | body {
 22 |   height: 100%;
 23 | }
 24 | 
 25 | body {
 26 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
 27 |     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 28 |   background-color: white;
 29 | }
 30 | 
 31 | body {
 32 |   display: grid;
 33 |   grid-gap: 20px;
 34 |   grid-template-columns: repeat(2, 1fr);
 35 |   padding: 50px 0px 25px 50px;
 36 | }
 37 | 
 38 | .header {
 39 |   margin-top: 25px;
 40 |   display: flex;
 41 |   justify-content: space-between;
 42 |   align-items: center;
 43 | }
 44 | 
 45 | .header .header__title {
 46 |   font-size: 28px;
 47 | }
 48 | 
 49 | .header__nav .header__list {
 50 |   padding: 0;
 51 |   margin: 0;
 52 |   list-style: none;
 53 |   display: grid;
 54 |   grid-gap: 50px;
 55 |   grid-template-columns: repeat(2, minmax(min-content, 1fr));
 56 |   text-transform: uppercase;
 57 |   font-weight: 600;
 58 |   color: var(--greyColor);
 59 |   font-size: 14px;
 60 | }
 61 | 
 62 | .content {
 63 |   display: flex;
 64 |   flex-direction: column;
 65 |   justify-content: center;
 66 |   height: 100%;
 67 | }
 68 | 
 69 | .content .content__title {
 70 |   font-size: 86px;
 71 |   text-transform: uppercase;
 72 | }
 73 | 
 74 | .content .content__text {
 75 |   color: var(--greyColor);
 76 |   font-size: 14px;
 77 | }
 78 | 
 79 | .content .view-more {
 80 |   display: flex;
 81 |   align-items: center;
 82 |   margin-top: 50px;
 83 | }
 84 | 
 85 | .view-more .view-more__icon {
 86 |   background-color: var(--greyColor);
 87 |   width: 25px;
 88 |   height: 25px;
 89 |   display: flex;
 90 |   align-items: center;
 91 |   justify-content: center;
 92 |   border-radius: 50%;
 93 |   margin-right: 15px;
 94 | }
 95 | 
 96 | .view-more__icon svg {
 97 |   fill: white;
 98 | }
 99 | 
100 | .view-more .view-more__text {
101 |   text-transform: uppercase;
102 |   color: var(--greyColor);
103 |   font-size: 14px;
104 | }
105 | 
106 | .items {
107 |   display: flex;
108 |   grid-template-columns: repeat(auto-fill, 1fr);
109 |   align-items: center;
110 |   height: 100%;
111 |   position: relative;
112 | }
113 | 
114 | .item .item__wrapper {
115 |   height: 100%;
116 | }
117 | 
118 | .item img {
119 |   width: 100%;
120 |   height: 350px;
121 |   margin-bottom: 50px;
122 | }
123 | 
124 | .item .item__pre-title {
125 |   font-weight: 300;
126 |   margin-bottom: 10px;
127 | }
128 | 
129 | .item .item__title {
130 |   margin-bottom: 80px;
131 |   font-weight: 300;
132 |   font-size: 28px;
133 | }
134 | 
135 | .btns {
136 |   position: absolute;
137 |   top: 25px;
138 | }
139 | 
140 | .btns svg {
141 |   fill: var(--greyColor);
142 | }
143 | 
144 | .btns svg:first-child {
145 |   margin-right: 10px;
146 | }
147 | 


--------------------------------------------------------------------------------
/practiceProjects/12/23b918efc7c471bf1139b8e42a8b9ddd.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/css-masterclass/d29b0119f96e3a7306ec3541425c8db7155a93c8/practiceProjects/12/23b918efc7c471bf1139b8e42a8b9ddd.jpg


--------------------------------------------------------------------------------
/practiceProjects/12/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Practice Twelve</title>
 9 |     <link rel="stylesheet" href="styles.css">
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <header class="header">
15 |         <h1 class="header__title">Urban _____<span>ThinkTank</span></h1>
16 |         <h2 class="header__subtitle">ETH <span>Teaching</span></h2>
17 |     </header>
18 | 
19 |     <main class="content">
20 |         <aside class="content__sidebar">
21 |             <div class="box">
22 |                 <h3 class="box__title">About</h3>
23 |                 <p class="box__text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Placeat suscipit
24 |                     repellendus ipsum blanditiis enim qui, saepe fugit velit tenetur laboriosam atque, perspiciatis,
25 |                     natus assumenda hic minus tempore omnis sequi amet.</p>
26 |             </div>
27 |             <div class="box">
28 |                 <h3 class="box__title">Categories</h3>
29 |                 <ul class="box__categories">
30 |                     <li class="box__category box__category--selected">All</li>
31 |                     <li class="box__category">Diploma</li>
32 |                     <li class="box__category">Design Studio</li>
33 |                     <li class="box__category">Elective Courses</li>
34 |                     <li class="box__category">Malakies</li>
35 |                 </ul>
36 |             </div>
37 |         </aside>
38 |         <section class="content__projects">
39 |             <div class="box">
40 |                 <h3 class="box__title">Projects</h3>
41 |                 <div class="grid">
42 |                     <article class="project">
43 |                         <img src="https://i.pinimg.com/originals/51/b2/b0/51b2b00c82a0b70817097db941454831.gif" alt=""
44 |                             class="project__image">
45 |                         <h4 class="project__title">Action! On the real city</h4>
46 |                         <h5 class="project__author">Nicolas Serrano</h5>
47 |                         <small class="project__date">Spring 15</small>
48 |                         <span class="project__location">Zurich</span>
49 |                         <p class="project__intro">Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
50 |                         <span class="project__plus"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
51 |                                 viewBox="0 0 24 24">
52 |                                 <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-5v5h-2v-5h-5v-2h5v-5h2v5h5v2z" /></svg></span>
53 |                     </article>
54 |                     <article class="project">
55 |                         <img src="https://i.pinimg.com/564x/17/cb/62/17cb626e86c228e5d85e772e98ac61bf.jpg" alt="" class="project__image">
56 |                         <h4 class="project__title">Action! On the real city</h4>
57 |                         <h5 class="project__author">Nicolas Serrano</h5>
58 |                         <small class="project__date">Spring 15</small>
59 |                         <span class="project__location">Zurich</span>
60 |                         <p class="project__intro">Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
61 |                         <span class="project__plus"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
62 |                                 viewBox="0 0 24 24">
63 |                                 <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-5v5h-2v-5h-5v-2h5v-5h2v5h5v2z" /></svg></span>
64 |                     </article>
65 |                     <article class="project">
66 |                         <img src="https://i.pinimg.com/564x/25/3e/fa/253efa6f08eb7159b096dd4262c05413.jpg" alt="" class="project__image">
67 |                         <h4 class="project__title">Action! On the real city</h4>
68 |                         <h5 class="project__author">Nicolas Serrano</h5>
69 |                         <small class="project__date">Spring 15</small>
70 |                         <span class="project__location">Zurich</span>
71 |                         <p class="project__intro">Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
72 |                         <span class="project__plus"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
73 |                                 viewBox="0 0 24 24">
74 |                                 <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-5v5h-2v-5h-5v-2h5v-5h2v5h5v2z" /></svg></span>
75 |                     </article>
76 |                     <article class="project">
77 |                         <img src="https://i.pinimg.com/564x/25/3e/fa/253efa6f08eb7159b096dd4262c05413.jpg" alt="" class="project__image">
78 |                         <h4 class="project__title">Action! On the real city</h4>
79 |                         <h5 class="project__author">Nicolas Serrano</h5>
80 |                         <small class="project__date">Spring 15</small>
81 |                         <span class="project__location">Zurich</span>
82 |                         <p class="project__intro">Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
83 |                         <span class="project__plus"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
84 |                                 viewBox="0 0 24 24">
85 |                                 <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-5v5h-2v-5h-5v-2h5v-5h2v5h5v2z" /></svg></span>
86 |                     </article>
87 |                 </div>
88 |             </div>
89 |         </section>
90 |     </main>
91 | 
92 | </body>
93 | 
94 | </html>


--------------------------------------------------------------------------------
/practiceProjects/12/styles.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   --greyColor: rgba(0, 0, 0, 0.6);
  3 |   --borderBottom: 3px solid black;
  4 | }
  5 | 
  6 | * {
  7 |   box-sizing: border-box;
  8 | }
  9 | 
 10 | h1,
 11 | h2,
 12 | h3,
 13 | h4,
 14 | h5,
 15 | html,
 16 | body,
 17 | p {
 18 |   margin: 0;
 19 |   padding: 0;
 20 | }
 21 | 
 22 | body {
 23 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
 24 |     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 25 |   background-color: #f4f4f4;
 26 |   padding: 50px;
 27 | }
 28 | 
 29 | .header {
 30 |   display: flex;
 31 |   justify-content: space-between;
 32 |   margin-bottom: 100px;
 33 | }
 34 | 
 35 | .header .header__title {
 36 |   font-size: 22px;
 37 | }
 38 | 
 39 | .header .header__title span,
 40 | .header .header__subtitle span {
 41 |   display: block;
 42 | }
 43 | 
 44 | .header .header__subtitle {
 45 |   font-size: 62px;
 46 |   text-transform: uppercase;
 47 |   text-align: right;
 48 | }
 49 | 
 50 | .content {
 51 |   display: grid;
 52 |   grid-template-columns: repeat(5, 1fr);
 53 |   grid-gap: 50px;
 54 | }
 55 | 
 56 | .content .content__sidebar {
 57 |   grid-column: span 2;
 58 | }
 59 | 
 60 | .content .content__projects {
 61 |   grid-column: span 3;
 62 | }
 63 | 
 64 | .box {
 65 |   margin-bottom: 50px;
 66 | }
 67 | 
 68 | .box .box__title {
 69 |   padding-bottom: 10px;
 70 |   border-bottom: var(--borderBottom);
 71 |   margin-bottom: 25px;
 72 | }
 73 | 
 74 | .box .box__categories {
 75 |   list-style-type: none;
 76 |   padding: 0;
 77 |   margin: 0;
 78 | }
 79 | 
 80 | .box__categories .box__category {
 81 |   color: var(--greyColor);
 82 |   margin-bottom: 10px;
 83 |   font-weight: 600;
 84 | }
 85 | 
 86 | .box__categories .box__category:last-child {
 87 |   margin-bottom: 0;
 88 | }
 89 | 
 90 | .box__categories .box__category--selected {
 91 |   color: black;
 92 | }
 93 | 
 94 | .box .box__text {
 95 |   line-height: 1.5;
 96 | }
 97 | 
 98 | .content__projects .grid {
 99 |   display: grid;
100 |   grid-template-columns: repeat(3, 1fr);
101 |   grid-gap: 20px;
102 | }
103 | 
104 | .project {
105 |   border-bottom: var(--borderBottom);
106 |   padding-bottom: 20px;
107 | }
108 | 
109 | .project .project__image {
110 |   width: 100%;
111 |   max-height: 300px;
112 |   margin-bottom: 15px;
113 | }
114 | 
115 | .project .project__title {
116 |   font-weight: 600;
117 |   margin-bottom: 5px;
118 | }
119 | 
120 | .project .project__author {
121 |   color: var(--greyColor);
122 |   font-weight: 600;
123 |   margin-bottom: 15px;
124 | }
125 | 
126 | .project .project__date,
127 | .project .project__location {
128 |   color: var(--greyColor);
129 |   display: block;
130 | }
131 | 
132 | .project .project__date {
133 |   font-weight: 300;
134 | }
135 | 
136 | .project .project__location {
137 |   margin-bottom: 30px;
138 | }
139 | 
140 | .project .project__intro {
141 |   line-height: 1.5;
142 |   margin-bottom: 10px;
143 | }
144 | 


--------------------------------------------------------------------------------
/practiceProjects/13/ca33104f19fc31c0a2222a03a49dc29f.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/css-masterclass/d29b0119f96e3a7306ec3541425c8db7155a93c8/practiceProjects/13/ca33104f19fc31c0a2222a03a49dc29f.png


--------------------------------------------------------------------------------
/practiceProjects/13/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Practice 13</title>
 9 |     <link rel="stylesheet" href="styles.css">
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <nav class="nav">
15 |         <span class="nav__icon"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
16 |                 <path d="M24 6h-24v-4h24v4zm0 4h-24v4h24v-4zm0 8h-24v4h24v-4z" /></svg></span>
17 |         <ul class="nav__list">
18 |             <li class="nav__list-item">About</li>
19 |             <span class="nav__divider">x</span>
20 |             <li class="nav__list-item">Categories</li>
21 |             <span class="nav__divider">x</span>
22 |             <li class="nav__list-item">Features</li>
23 |         </ul>
24 |     </nav>
25 | 
26 |     <header class="header">
27 |         <h1 class="header__title">Popular Stories</h1>
28 |         <span class="header__icon">
29 |             <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
30 |                 <path d="M23.822 20.88l-6.353-6.354c.93-1.465 1.467-3.2 1.467-5.059.001-5.219-4.247-9.467-9.468-9.467s-9.468 4.248-9.468 9.468c0 5.221 4.247 9.469 9.468 9.469 1.768 0 3.421-.487 4.839-1.333l6.396 6.396 3.119-3.12zm-20.294-11.412c0-3.273 2.665-5.938 5.939-5.938 3.275 0 5.94 2.664 5.94 5.938 0 3.275-2.665 5.939-5.94 5.939-3.274 0-5.939-2.664-5.939-5.939z" /></svg>
31 |         </span>
32 |     </header>
33 | 
34 |     <main class="slider">
35 |         <span class="slider__arrow">←</span>
36 |         <section class="slider__content">
37 |             <div class="slider__photo"></div>
38 |             <div class="info">
39 |                 <h5 class="info__pre-title">Lifestyle</h5>
40 |                 <h2 class="info__title">The Joys and Pitfalls of Solo Travel</h2>
41 |                 <p class="info__intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem unde quibusdam
42 |                     commodi voluptate ullam! Id magnam quibusdam natus saepe commodi, temporibus corporis aliquid
43 |                     architecto totam obcaecati fugit veritatis nesciunt neque.</p>
44 |                 <small class="info__date">Feb 2, 2019</small>
45 |             </div>
46 |         </section>
47 |         <span class="slider__arrow">→</span>
48 |     </main>
49 | 
50 |     <footer class="pagination">
51 |         <span class="pagination__number pagination__number--current">1</span>
52 |         <span class="pagination__number">2</span>
53 |         <span class="pagination__number">3</span>
54 |     </footer>
55 | 
56 | </body>
57 | 
58 | </html>


--------------------------------------------------------------------------------
/practiceProjects/13/styles.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 | }
  3 | 
  4 | * {
  5 |   box-sizing: border-box;
  6 | }
  7 | 
  8 | h1,
  9 | h2,
 10 | h3,
 11 | h4,
 12 | h5,
 13 | h6,
 14 | html,
 15 | body,
 16 | p {
 17 |   margin: 0;
 18 |   padding: 0;
 19 | }
 20 | 
 21 | body,
 22 | html {
 23 |   height: 100%;
 24 | }
 25 | 
 26 | body {
 27 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
 28 |     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 29 |   background-color: #f4f4f4;
 30 |   padding-left: 50px;
 31 |   display: grid;
 32 |   grid-template-rows: 1fr 3fr 1fr;
 33 | }
 34 | 
 35 | .nav {
 36 |   width: 50px;
 37 |   background-color: white;
 38 |   position: absolute;
 39 |   top: 0;
 40 |   left: 0;
 41 |   height: 100%;
 42 |   display: flex;
 43 |   align-items: center;
 44 |   flex-direction: column;
 45 |   justify-content: center;
 46 |   padding: 40px 10px;
 47 | }
 48 | 
 49 | .nav .nav__icon {
 50 |   margin-bottom: auto;
 51 | }
 52 | 
 53 | .nav .nav__list {
 54 |   margin-bottom: auto;
 55 |   display: flex;
 56 |   list-style: none;
 57 |   transform: rotate(-90deg);
 58 |   font-weight: 600;
 59 | }
 60 | 
 61 | .nav .nav__list > * {
 62 |   margin-right: 10px;
 63 | }
 64 | 
 65 | .header {
 66 |   margin-top: 25px;
 67 |   align-self: start;
 68 |   text-align: center;
 69 |   display: flex;
 70 |   align-items: center;
 71 |   justify-content: center;
 72 |   padding: 0px 10px;
 73 | }
 74 | 
 75 | .header .header__title {
 76 |   margin-right: auto;
 77 |   margin-left: auto;
 78 |   font-weight: 600;
 79 |   font-size: 16px;
 80 | }
 81 | 
 82 | .pagination {
 83 |   align-self: end;
 84 |   justify-self: center;
 85 |   margin-bottom: 25px;
 86 |   font-weight: 600;
 87 | }
 88 | 
 89 | .pagination .pagination__number--current {
 90 |   text-decoration: line-through;
 91 | }
 92 | 
 93 | .slider {
 94 |   padding: 0px 20px;
 95 |   display: flex;
 96 |   align-items: center;
 97 |   justify-content: space-between;
 98 | }
 99 | 
100 | .slider .slider__arrow:first-child {
101 |   margin-right: 20px;
102 | }
103 | .slider .slider__arrow:last-child {
104 |   margin-left: 20px;
105 | }
106 | 
107 | .slider .slider__content {
108 |   display: grid;
109 |   grid-template-columns: repeat(2, 1fr);
110 |   height: 100%;
111 |   grid-gap: 20px;
112 |   background-color: white;
113 | }
114 | 
115 | .slider__content .slider__photo {
116 |   background-image: url(https://i.pinimg.com/564x/e0/b5/04/e0b504e3167fe6ed84ff6255130efa5a.jpg);
117 |   background-size: cover;
118 |   background-position: center;
119 | }
120 | 
121 | .info {
122 |   justify-self: center;
123 |   display: flex;
124 |   flex-direction: column;
125 |   align-items: center;
126 |   justify-content: center;
127 |   width: 80%;
128 | }
129 | 
130 | .info .info__pre-title {
131 |   text-transform: uppercase;
132 |   color: #3498db;
133 |   font-weight: 300;
134 | }
135 | 
136 | .info .info__pre-title,
137 | .info .info__title,
138 | .info .info__intro {
139 |   margin-bottom: 40px;
140 | }
141 | 
142 | .info .info__title {
143 |   font-size: 44px;
144 |   text-align: center;
145 |   font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
146 | }
147 | 
148 | .info .info__intro {
149 |   font-style: italic;
150 |   font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
151 |   text-align: center;
152 | }
153 | 
154 | .info .info__date {
155 |   text-transform: uppercase;
156 |   font-weight: 300;
157 | }
158 | 


--------------------------------------------------------------------------------
/practiceProjects/14/17b8677a1a1f43f89e40f4c60b35028f.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/css-masterclass/d29b0119f96e3a7306ec3541425c8db7155a93c8/practiceProjects/14/17b8677a1a1f43f89e40f4c60b35028f.jpg


--------------------------------------------------------------------------------
/practiceProjects/14/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Project 14</title>
 9 |     <link rel="stylesheet" href="styles.css">
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <header class="header">
15 |         <nav class="header__nav">
16 |             <ul class="header__list">
17 |                 <li class="header__list-item">Home</li>
18 |                 <li class="header__list-item">About</li>
19 |                 <li class="header__list-item">Contact</li>
20 |             </ul>
21 |         </nav>
22 |         <span class="header__icon">
23 |             <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
24 |                 <path d="M23.822 20.88l-6.353-6.354c.93-1.465 1.467-3.2 1.467-5.059.001-5.219-4.247-9.467-9.468-9.467s-9.468 4.248-9.468 9.468c0 5.221 4.247 9.469 9.468 9.469 1.768 0 3.421-.487 4.839-1.333l6.396 6.396 3.119-3.12zm-20.294-11.412c0-3.273 2.665-5.938 5.939-5.938 3.275 0 5.94 2.664 5.94 5.938 0 3.275-2.665 5.939-5.94 5.939-3.274 0-5.939-2.664-5.939-5.939z" /></svg>
25 |         </span>
26 |     </header>
27 | 
28 |     <main class="content">
29 |         <div class="content__hero">
30 |             <h2 class="hero__title">
31 |                 Peet
32 |             </h2>
33 |         </div>
34 | 
35 |         <section class="content__blog">
36 |             <h3 class="content__title">Blog</h3>
37 |             <article class="post">
38 |                 <div class="post__column">
39 |                     <img src="https://i.pinimg.com/564x/bc/51/a4/bc51a451a0b6239885567d4ffc08592c.jpg" alt="" class="post__image">
40 |                 </div>
41 |                 <div class="post__column">
42 |                     <p class="post__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum
43 |                         laboriosam iure est facere soluta quae autem facilis suscipit, exercitationem cum. Incidunt
44 |                         illo
45 |                         ipsa autem voluptate pariatur? Aspernatur, ipsum facere! Nisi.</p>
46 |                 </div>
47 |             </article>
48 |             <article class="post">
49 |                 <div class="post__column">
50 |                     <p class="post__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum
51 |                         laboriosam iure est facere soluta quae autem facilis suscipit, exercitationem cum. Incidunt
52 |                         illo
53 |                         ipsa autem voluptate pariatur? Aspernatur, ipsum facere! Nisi.</p>
54 |                 </div>
55 |                 <div class="post__column">
56 |                     <p class="post__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum
57 |                         laboriosam iure est facere soluta quae autem facilis suscipit, exercitationem cum. Incidunt
58 |                         illo
59 |                         ipsa autem voluptate pariatur? Aspernatur, ipsum facere! Nisi.</p>
60 |                 </div>
61 |             </article>
62 | 
63 |             <article class="post">
64 |                 <div class="post__column">
65 |                     <img src="https://i.pinimg.com/564x/4b/1d/7b/4b1d7be215296e85c321d4004f670f57.jpg" alt="" class="post__image">
66 |                 </div>
67 |                 <div class="post__column"><img src="https://i.pinimg.com/564x/fe/07/41/fe0741256b4bf46c81150587ea4b0ce9.jpg"
68 |                         alt="" class="post__image"></div>
69 |             </article>
70 |         </section>
71 |     </main>
72 | 
73 | </body>
74 | 
75 | </html>


--------------------------------------------------------------------------------
/practiceProjects/14/styles.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 | }
  3 | 
  4 | * {
  5 |   box-sizing: border-box;
  6 | }
  7 | 
  8 | h1,
  9 | h2,
 10 | h3,
 11 | h4,
 12 | h5,
 13 | h6,
 14 | body,
 15 | html,
 16 | ul {
 17 |   margin: 0;
 18 |   padding: 0;
 19 | }
 20 | 
 21 | body {
 22 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
 23 |     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 24 |   background-color: white;
 25 | }
 26 | 
 27 | .header {
 28 |   display: flex;
 29 |   align-items: center;
 30 |   justify-content: space-between;
 31 |   padding: 50px 25px;
 32 | }
 33 | 
 34 | .header .header__nav {
 35 |   width: 40%;
 36 | }
 37 | 
 38 | .header .header__list {
 39 |   list-style: none;
 40 |   margin-left: 30%;
 41 |   display: grid;
 42 |   grid-template-columns: repeat(3, minmax(min-content, 1fr));
 43 |   font-weight: 600;
 44 |   text-transform: uppercase;
 45 |   font-size: 12px;
 46 | }
 47 | 
 48 | .content .content__hero {
 49 |   height: 80vh;
 50 |   color: white;
 51 |   display: flex;
 52 |   align-items: center;
 53 |   justify-content: center;
 54 |   background-image: url(https://i.pinimg.com/564x/d3/30/7b/d3307b5c21bcdbf723630ef5746af694.jpg);
 55 |   background-size: cover;
 56 |   background-position: center;
 57 |   margin-left: 20px;
 58 |   font-size: 160px;
 59 |   text-transform: uppercase;
 60 |   margin-bottom: 80px;
 61 | }
 62 | 
 63 | .content .content__blog {
 64 |   display: flex;
 65 |   flex-direction: column;
 66 |   align-items: center;
 67 | }
 68 | 
 69 | .content__blog .content__title {
 70 |   text-align: center;
 71 |   text-transform: uppercase;
 72 |   padding-bottom: 40px;
 73 |   border-bottom: 3px solid black;
 74 |   display: inline-block;
 75 |   font-size: 40px;
 76 |   margin-bottom: 60px;
 77 | }
 78 | 
 79 | .post {
 80 |   margin-bottom: 80px;
 81 |   display: grid;
 82 |   grid-template-columns: repeat(2, 1fr);
 83 |   padding: 0px 20px;
 84 |   grid-gap: 40px;
 85 |   place-items: center center;
 86 |   width: 100%;
 87 |   place-content: center center;
 88 | }
 89 | 
 90 | .post .post__column {
 91 |   display: flex;
 92 |   align-items: center;
 93 |   justify-content: center;
 94 | }
 95 | 
 96 | .post .post__image {
 97 |   margin: 0 auto;
 98 |   width: 80%;
 99 | }
100 | 
101 | .post .post__text {
102 |   width: 50%;
103 |   font-size: 18px;
104 |   margin: 0 auto;
105 |   color: rgba(0, 0, 0, 0.5);
106 |   font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
107 | }
108 | 


--------------------------------------------------------------------------------
/practiceProjects/15/62dd9ba1acfb76aec105fd7ba3bfac14.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/css-masterclass/d29b0119f96e3a7306ec3541425c8db7155a93c8/practiceProjects/15/62dd9ba1acfb76aec105fd7ba3bfac14.jpg


--------------------------------------------------------------------------------
/practiceProjects/15/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Practice 15</title>
 9 |     <link rel="stylesheet" href="styles.css">
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <div class="small__nav">
15 |         <div class="account__links">Log in Or <span class="account__emphasis-link">Register</span></div>
16 |         <div class="account__links">
17 |             <span class="account__link">Wishlist <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
18 |                     <path d="M12 9.229c.234-1.12 1.547-6.229 5.382-6.229 2.22 0 4.618 1.551 4.618 5.003 0 3.907-3.627 8.47-10 12.629-6.373-4.159-10-8.722-10-12.629 0-3.484 2.369-5.005 4.577-5.005 3.923 0 5.145 5.126 5.423 6.231zm-12-1.226c0 4.068 3.06 9.481 12 14.997 8.94-5.516 12-10.929 12-14.997 0-7.962-9.648-9.028-12-3.737-2.338-5.262-12-4.27-12 3.737z" /></svg></span>
19 |             <span class="account__link">My cart (0)</span>
20 |         </div>
21 |     </div>
22 | 
23 |     <header class="header">
24 |         <h1 class="title">
25 |             <span class="title__letter">Y</span>
26 |             <span class="title__letter">A</span>
27 |             <span class="title__letter">R</span>
28 |             <span class="title__letter">K</span>
29 |             <span class="title__letter">O</span>
30 |         </h1>
31 | 
32 |         <nav class="header__nav">
33 |             <ul class="header__list">
34 |                 <li class="header__list-item">Home</li>
35 |                 <span class="header__divider">ｘ</span>
36 |                 <li class="header__list-item">Products</li>
37 |                 <span class="header__divider">ｘ</span>
38 |                 <li class="header__list-item">Contact</li>
39 |             </ul>
40 |         </nav>
41 | 
42 |         <div class="header__breadcrumbs">
43 |             <ul class="breadcrumbs__list">
44 |                 <li class="breadcrumbs__breadcrumb">All /</li>
45 |                 <li class="breadcrumbs__breadcrumb">Something /</li>
46 |                 <li class="breadcrumbs__breadcrumb">Else /</li>
47 |                 <li class="breadcrumbs__breadcrumb">Don't know</li>
48 |             </ul>
49 |         </div>
50 | 
51 |     </header>
52 | 
53 |     <main class="product">
54 |         <div class="product__photo"></div>
55 |         <div class="product__info">
56 |             <header class="product__header">
57 |                 <h3 class="product__title">Polka dots</h3>
58 |                 <span class="product__price">$108</span>
59 |             </header>
60 |             <p class="product__description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, corporis.
61 |                 Provident nesciunt qui suscipit, sapiente magni unde cupiditate voluptatem consequatur cumque vel
62 |                 architecto ab, asperiores ipsa deserunt quia sint? Natus?</p>
63 |             <div class="product__btns">
64 |                 <span class="product__btn">1</span>
65 |                 <span class="product__btn">Add to cart</span>
66 |                 <span class="product__btn"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
67 |                         <path d="M12 9.229c.234-1.12 1.547-6.229 5.382-6.229 2.22 0 4.618 1.551 4.618 5.003 0 3.907-3.627 8.47-10 12.629-6.373-4.159-10-8.722-10-12.629 0-3.484 2.369-5.005 4.577-5.005 3.923 0 5.145 5.126 5.423 6.231zm-12-1.226c0 4.068 3.06 9.481 12 14.997 8.94-5.516 12-10.929 12-14.997 0-7.962-9.648-9.028-12-3.737-2.338-5.262-12-4.27-12 3.737z" /></svg></span>
68 |             </div>
69 |         </div>
70 |     </main>
71 | 
72 |     <div class="product__featured-image"></div>
73 | 
74 | </body>
75 | 
76 | </html>


--------------------------------------------------------------------------------
/practiceProjects/15/styles.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   --greyColor: rgba(0, 0, 0, 0.5);
  3 | }
  4 | 
  5 | * {
  6 |   box-sizing: border-box;
  7 | }
  8 | 
  9 | h1,
 10 | h2,
 11 | h3,
 12 | h4,
 13 | h5,
 14 | h6,
 15 | body,
 16 | html,
 17 | ul {
 18 |   margin: 0;
 19 |   padding: 0;
 20 | }
 21 | 
 22 | body {
 23 |   background-color: white;
 24 |   max-width: 90%;
 25 |   width: 100%;
 26 |   margin: 0 auto;
 27 |   font-family: Georgia, "Times New Roman", Times, serif;
 28 |   padding-bottom: 100px;
 29 | }
 30 | 
 31 | .small__nav {
 32 |   margin-top: 50px;
 33 |   display: flex;
 34 |   align-items: center;
 35 |   justify-content: space-between;
 36 |   margin-bottom: 150px;
 37 | }
 38 | 
 39 | .small__nav .account__emphasis-link {
 40 |   color: #3498db;
 41 | }
 42 | 
 43 | .account__links .account__link:first-child {
 44 |   margin-right: 20px;
 45 | }
 46 | 
 47 | .header {
 48 |   display: flex;
 49 |   align-items: center;
 50 |   flex-direction: column;
 51 |   margin-bottom: 100px;
 52 | }
 53 | 
 54 | .header .title {
 55 |   margin-bottom: 150px;
 56 |   display: grid;
 57 |   grid-template-columns: repeat(5, minmax(min-content, 1fr));
 58 |   height: 80px;
 59 |   grid-gap: 20px;
 60 | }
 61 | 
 62 | .title .title__letter:nth-child(2),
 63 | .title .title__letter:nth-child(4) {
 64 |   align-self: end;
 65 | }
 66 | 
 67 | .header .header__nav {
 68 |   margin-bottom: 50px;
 69 | }
 70 | 
 71 | .header__nav .header__list {
 72 |   grid-template-columns: repeat(5, minmax(min-content, 1fr));
 73 |   place-items: center;
 74 |   display: grid;
 75 | }
 76 | 
 77 | .header__nav .header__list,
 78 | .header__breadcrumbs .breadcrumbs__list {
 79 |   font-weight: 600;
 80 |   list-style-type: none;
 81 | }
 82 | 
 83 | .header__breadcrumbs .breadcrumbs__list {
 84 |   display: flex;
 85 | }
 86 | 
 87 | .breadcrumbs__list .breadcrumbs__breadcrumb {
 88 |   margin-left: 20px;
 89 |   color: var(--greyColor);
 90 |   font-style: italic;
 91 | }
 92 | 
 93 | .breadcrumbs__list .breadcrumbs__breadcrumb:first-child {
 94 |   color: black;
 95 | }
 96 | 
 97 | .product {
 98 |   display: grid;
 99 |   grid-gap: 40px;
100 |   grid-template-columns: repeat(2, 1fr);
101 |   place-items: center;
102 |   font-style: italic;
103 | }
104 | 
105 | .product .product__photo {
106 |   background-image: url(https://i.pinimg.com/564x/75/b5/a5/75b5a5abe39a8acc01894d4a5bbfb103.jpg);
107 |   background-size: cover;
108 |   background-position: center center;
109 |   height: 400px;
110 |   width: 80%;
111 | }
112 | 
113 | .product .product__header {
114 |   margin-bottom: 30px;
115 | }
116 | 
117 | .product__info .product__header {
118 |   display: flex;
119 |   justify-content: space-between;
120 |   align-items: center;
121 | }
122 | 
123 | .product__header .product__title {
124 |   margin-bottom: 20px;
125 | }
126 | 
127 | .product__header .product__price {
128 |   color: var(--greyColor);
129 | }
130 | 
131 | .product__info .product__btns {
132 |   display: grid;
133 |   grid-template-columns: repeat(3, minmax(max-content, 1fr));
134 |   width: 90%;
135 |   max-width: 400px;
136 |   grid-gap: 20px;
137 | }
138 | 
139 | .product__btns .product__btn {
140 |   background-color: #ecf0f1;
141 |   padding: 5px 10px;
142 |   height: 40px;
143 |   display: flex;
144 |   align-items: center;
145 |   justify-content: center;
146 |   cursor: pointer;
147 | }
148 | 
149 | .product__info .product__description {
150 |   margin-bottom: 50px;
151 | }
152 | 


--------------------------------------------------------------------------------
/practiceProjects/2/b25c0b912de78ff7707c46be6f439ddf.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/css-masterclass/d29b0119f96e3a7306ec3541425c8db7155a93c8/practiceProjects/2/b25c0b912de78ff7707c46be6f439ddf.jpg


--------------------------------------------------------------------------------
/practiceProjects/2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Project Two</title>
 9 |     <link rel="stylesheet" href="styles.css">
10 | </head>
11 | 
12 | <body>
13 | 
14 | 
15 | 
16 |     <header class="header">
17 |         <h1 class="header__title">Add meals</h1>
18 |     </header>
19 | 
20 |     <nav class="navigaiton">
21 |         <ul class="navigation__list">
22 |             <li class="navigation__item"><span class="item__icon"><span class="icon__emoji">🥪</span></span><span class="item__text">All</span></li>
23 |             <li class="navigation__item"><span class="item__icon"><span class="icon__emoji">🍕</span></span><span class="item__text">Pizza</span></li>
24 |             <li class="navigation__item"><span class="item__icon"><span class="icon__emoji">🥩</span></span><span class="item__text">Meat</span></li>
25 |             <li class="navigation__item"><span class="item__icon"><span class="icon__emoji">🥗</span></span><span class="item__text">Veggies</span></li>
26 |         </ul><span class="icon__emoji">
27 |         </span>
28 |     </nav>
29 | 
30 |     <section class="featured">
31 |         <h2 class="featured__title">Featured meals</h2>
32 |         <div class="featured__wrapper">
33 |             <article class="featured-meal">
34 |                 <h4 class="featured-meal__title">Penne Broccoli</h4>
35 |                 <button class="featured-meal__button"><span>➕</span></button>
36 |             </article>
37 |             <article class="featured-meal">
38 |                 <h4 class="featured-meal__title">Penne Broccoli</h4>
39 |                 <button class="featured-meal__button"><span>➕</span></button>
40 |             </article>
41 |             <article class="featured-meal">
42 |                 <h4 class="featured-meal__title">Penne Broccoli</h4>
43 |                 <button class="featured-meal__button"><span>➕</span></button>
44 |             </article>
45 |             <article class="featured-meal">
46 |                 <h4 class="featured-meal__title">Penne Broccoli</h4>
47 |                 <button class="featured-meal__button"><span>➕</span></button>
48 |             </article>
49 |         </div>
50 |     </section>
51 | 
52 | 
53 |     <section class="recipes">
54 |         <ul class="recipes__list">
55 |             <li class="recipe"><span class="recipe__name">Pasta Carbonara</span><button class="recipe__btn">➕</button></li>
56 |             <li class="recipe"><span class="recipe__name">Lasagna</span><button class="recipe__btn">➕</button></li>
57 |         </ul>
58 |     </section>
59 | 
60 | </body>
61 | 
62 | </html>


--------------------------------------------------------------------------------
/practiceProjects/2/styles.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   --padding: 25px;
  3 |   --borderTop: 1px solid rgba(0, 0, 0, 0.1);
  4 | }
  5 | 
  6 | * {
  7 |   box-sizing: border-box;
  8 | }
  9 | 
 10 | h1,
 11 | h2,
 12 | h3,
 13 | h4,
 14 | h5 {
 15 |   margin: 0;
 16 |   padding: 0;
 17 | }
 18 | 
 19 | body {
 20 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
 21 |     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 22 |   background-color: #fafafc;
 23 | }
 24 | 
 25 | .header {
 26 |   margin-top: 80px;
 27 |   padding-left: var(--padding);
 28 |   margin-bottom: 50px;
 29 | }
 30 | 
 31 | .navigaiton {
 32 |   padding: 0px var(--padding);
 33 |   margin-bottom: 50px;
 34 | }
 35 | 
 36 | .navigaiton .navigation__list {
 37 |   list-style-type: none;
 38 |   padding: 0;
 39 |   margin: 0;
 40 |   display: grid;
 41 |   grid-template-columns: repeat(4, 50px);
 42 |   grid-gap: 40px;
 43 | }
 44 | 
 45 | .navigation__list .navigation__item {
 46 |   display: grid;
 47 |   grid-template-rows: 3fr 1fr;
 48 |   grid-gap: 10px;
 49 |   text-align: center;
 50 |   transition: opacity 0.1s linear;
 51 | }
 52 | 
 53 | .navigation__item .item__icon {
 54 |   background-color: white;
 55 |   border-radius: 50%;
 56 |   box-shadow: 0 10px 35px rgba(0, 0, 0, 0.05), 0 6px 6px rgba(0, 0, 0, 0.1);
 57 |   display: flex;
 58 |   justify-content: center;
 59 |   align-items: center;
 60 |   height: 50px;
 61 |   width: 50px;
 62 |   transition: box-shadow 0.2s linear;
 63 |   cursor: pointer;
 64 | }
 65 | 
 66 | .navigation__list:hover .navigation__item {
 67 |   opacity: 0.5;
 68 | }
 69 | 
 70 | .navigation__list .navigation__item:hover {
 71 |   opacity: 1;
 72 | }
 73 | 
 74 | .navigation__list .navigation__item:hover .item__icon {
 75 |   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05), 0 6px 10px rgba(0, 0, 0, 0.1);
 76 | }
 77 | 
 78 | .item__icon .icon__emoji {
 79 |   font-size: 20px;
 80 | }
 81 | 
 82 | .navigation__item .item__text {
 83 |   font-size: 14px;
 84 |   font-weight: 600;
 85 | }
 86 | 
 87 | .featured {
 88 |   padding: var(--padding);
 89 |   padding-top: 25px;
 90 |   border-top: var(--borderTop);
 91 | }
 92 | 
 93 | .featured .featured__title {
 94 |   margin: 0;
 95 |   font-size: 18px;
 96 |   margin-bottom: 20px;
 97 | }
 98 | 
 99 | .featured .featured__wrapper {
100 |   overflow: scroll;
101 |   display: grid;
102 |   grid-auto-columns: minmax(200px, 1fr);
103 |   grid-auto-flow: column;
104 |   grid-gap: 30px;
105 |   padding-bottom: 20px;
106 | }
107 | 
108 | .featured-meal {
109 |   height: 150px;
110 |   border-radius: 10px;
111 |   display: flex;
112 |   align-items: flex-end;
113 |   padding: 20px;
114 |   color: white;
115 |   justify-content: space-between;
116 |   background-size: cover;
117 |   background-position: center center;
118 | }
119 | 
120 | .featured-meal:first-child {
121 |   background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
122 |     url(https://i.pinimg.com/564x/d9/26/7e/d9267eb5f9756e0664191f0d148a11bd.jpg);
123 | }
124 | 
125 | .featured-meal:last-child {
126 |   background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
127 |     url(https://i.pinimg.com/564x/2f/db/39/2fdb393218271fbf0464e8c0818a1a2b.jpg);
128 | }
129 | 
130 | .featured-meal:nth-child(2) {
131 |   background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
132 |     url(https://i.pinimg.com/564x/b7/90/da/b790daca8c52b830b63c6d14d3f1cad7.jpg);
133 | }
134 | 
135 | .featured-meal:nth-child(3) {
136 |   background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
137 |     url(https://i.pinimg.com/564x/7c/dc/81/7cdc811124f1e0bdce19712fec67c22c.jpg);
138 | }
139 | 
140 | .featured-meal__title {
141 |   margin-right: 10px;
142 | }
143 | .featured-meal__button {
144 |   background-color: white;
145 | 
146 |   font-size: 15px;
147 |   text-align: center;
148 |   display: flex;
149 |   align-items: center;
150 |   justify-content: center;
151 | }
152 | 
153 | .recipes {
154 |   margin-top: 25px;
155 |   padding-top: 25px;
156 |   border-top: var(--borderTop);
157 | }
158 | .recipes__list {
159 |   list-style: none;
160 |   padding: 0;
161 |   margin: 0;
162 | }
163 | 
164 | .recipes__list .recipe:nth-child(odd) {
165 |   background-color: white;
166 | }
167 | 
168 | .recipes__list .recipe {
169 |   display: flex;
170 |   align-items: center;
171 |   justify-content: space-between;
172 |   padding: 15px var(--padding);
173 | }
174 | 


--------------------------------------------------------------------------------
/practiceProjects/3/52c231785162b7f6a7745ff1e783bb8c.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/css-masterclass/d29b0119f96e3a7306ec3541425c8db7155a93c8/practiceProjects/3/52c231785162b7f6a7745ff1e783bb8c.jpg


--------------------------------------------------------------------------------
/practiceProjects/3/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Project Three</title>
 9 |     <link rel="stylesheet" href="styles.css">
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <header class="header">
15 |         <hgroup>
16 |             <h1 class="header__title">Easy to read</h1>
17 |             <h4 class="header__subtitle">Simple knowledge to learn quickly.</h4>
18 |         </hgroup>
19 |     </header>
20 | 
21 |     <main class="grid">
22 |         <div class="grid__hero-item">
23 |             <h5 class="hero-item__title">
24 |                 Daily language
25 |             </h5>
26 |             <h6 class="hero-item__subtitle">
27 |                 Lorem ipsum, dolor sit amet consectetur adipisicing elit.
28 |             </h6>
29 |         </div>
30 | 
31 |         <div class="grid-item">
32 |             <img src="https://i.pinimg.com/564x/b6/28/6e/b6286e4555719127578b4e9eb3a09b50.jpg" class="grid-item__photo">
33 |             <h5 class="grid-item__title">The power of music</h5>
34 |             <p class="grid-item__subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
35 |         </div>
36 | 
37 |         <div class="grid-item">
38 |             <img src="https://i.pinimg.com/564x/9e/c6/fa/9ec6fabcf262681c275c950dd68d5ef5.jpg" class="grid-item__photo">
39 |             <h5 class="grid-item__title">The power of music</h5>
40 |             <p class="grid-item__subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit. More stuff here to
41 |                 make this looooooong text</p>
42 |         </div>
43 | 
44 |         <div class="grid-item">
45 |             <img src="https://i.pinimg.com/564x/db/7f/0b/db7f0b1278fcdb2c70165b45452f3c1b.jpg" class="grid-item__photo">
46 |             <h5 class="grid-item__title">The power of music</h5>
47 |             <p class="grid-item__subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
48 |         </div>
49 | 
50 |         <div class="grid-item">
51 |             <img src="https://i.pinimg.com/564x/17/05/c3/1705c360f5881b4039a4f787bc9ed26c.jpg" class="grid-item__photo">
52 |             <h5 class="grid-item__title">The power of music</h5>
53 |             <p class="grid-item__subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
54 |         </div>
55 | 
56 |     </main>
57 | 
58 | 
59 | </body>
60 | 
61 | </html>


--------------------------------------------------------------------------------
/practiceProjects/3/styles.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   --borderRadius: 15px;
 3 | }
 4 | 
 5 | * {
 6 |   box-sizing: border-box;
 7 | }
 8 | 
 9 | h1,
10 | h2,
11 | h3,
12 | h4,
13 | h5 {
14 |   margin: 0;
15 |   padding: 0;
16 | }
17 | 
18 | body {
19 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
20 |     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
21 |   background-color: #fafafc;
22 |   color: rgba(0, 0, 0, 0.8);
23 |   padding: 0px 15px;
24 | }
25 | 
26 | .header {
27 |   margin-top: 50px;
28 |   margin-bottom: 25px;
29 | }
30 | 
31 | .header .header__title {
32 |   margin-bottom: 5px;
33 |   font-size: 45px;
34 | }
35 | 
36 | .header .header__subtitle {
37 |   font-weight: 200;
38 |   font-size: 20px;
39 | }
40 | 
41 | .grid {
42 |   display: grid;
43 |   grid-template-columns: 1fr 1fr;
44 |   grid-gap: 20px;
45 | }
46 | 
47 | .grid .grid__hero-item {
48 |   grid-column: span 2;
49 |   background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
50 |     url(https://i.pinimg.com/564x/b8/c0/7a/b8c07a5a63f15415d036ea209abee11d.jpg);
51 |   background-size: cover;
52 |   background-position: center center;
53 |   color: white;
54 |   padding: 20px 10px;
55 |   border-radius: var(--borderRadius);
56 |   display: flex;
57 |   flex-direction: column;
58 |   justify-content: space-around;
59 |   align-items: flex-start;
60 | }
61 | 
62 | .grid__hero-item .hero-item__title {
63 |   font-weight: 400;
64 |   align-self: flex-end;
65 |   font-size: 22px;
66 | }
67 | 
68 | .grid__hero-item .hero-item__subtitle {
69 |   width: 70%;
70 |   font-weight: 300;
71 |   font-size: 16px;
72 | }
73 | 
74 | .grid-item .grid-item__title {
75 |   font-weight: 800;
76 |   font-size: 16px;
77 | }
78 | 
79 | .grid-item .grid-item__photo {
80 |   max-width: 100%;
81 |   border-radius: var(--borderRadius);
82 |   margin-bottom: 10px;
83 | }
84 | 
85 | .grid-item .grid-item__subtitle {
86 |   color: rgba(0, 0, 0, 0.6);
87 | }
88 | 


--------------------------------------------------------------------------------
/practiceProjects/4/624522de5ff7b35a355dedd087afbba1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/css-masterclass/d29b0119f96e3a7306ec3541425c8db7155a93c8/practiceProjects/4/624522de5ff7b35a355dedd087afbba1.jpg


--------------------------------------------------------------------------------
/practiceProjects/4/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Project Four</title>
 9 |     <link rel="stylesheet" href="styles.css">
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <header class="header">
15 |         <hgroup class="header__titles">
16 |             <h1 class="header__title">Good morning</h1>
17 |             <h4 class="header__subtitle">What are you eating today?</h4>
18 |         </hgroup>
19 |         <div class="header__icons">
20 |             <span class="header__icon">
21 |                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
22 |                     <path d="M23.809 21.646l-6.205-6.205c1.167-1.605 1.857-3.579 1.857-5.711 0-5.365-4.365-9.73-9.731-9.73-5.365 0-9.73 4.365-9.73 9.73 0 5.366 4.365 9.73 9.73 9.73 2.034 0 3.923-.627 5.487-1.698l6.238 6.238 2.354-2.354zm-20.955-11.916c0-3.792 3.085-6.877 6.877-6.877s6.877 3.085 6.877 6.877-3.085 6.877-6.877 6.877c-3.793 0-6.877-3.085-6.877-6.877z" /></svg>
23 |             </span>
24 |             <span class="header__icon">
25 |                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
26 |                     <path d="M12 2c3.032 0 5.5 2.467 5.5 5.5 0 1.458-.483 3.196-3.248 5.59 4.111 1.961 6.602 5.253 7.482 8.909h-19.486c.955-4.188 4.005-7.399 7.519-8.889-1.601-1.287-3.267-3.323-3.267-5.61 0-3.033 2.468-5.5 5.5-5.5zm0-2c-4.142 0-7.5 3.357-7.5 7.5 0 2.012.797 3.834 2.086 5.182-5.03 3.009-6.586 8.501-6.586 11.318h24c0-2.791-1.657-8.28-6.59-11.314 1.292-1.348 2.09-3.172 2.09-5.186 0-4.143-3.358-7.5-7.5-7.5z" /></svg>
27 |             </span>
28 |         </div>
29 |     </header>
30 | 
31 |     <main class="main">
32 |         <div class="recipe">
33 |             <div class="recipe__heart">
34 |                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
35 |                     <path d="M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z" /></svg>
36 |             </div>
37 |             <div class="recipe__info">
38 |                 <h4 class="recipe__title">
39 |                     Oatmeal cookie
40 |                 </h4>
41 |                 <div class="recipe__meta">
42 |                     <span class="recipe__meta-data">Vegan</span>
43 |                     <span class="recipe__meta-data">10 minutes</span>
44 |                     <span class="recipe__meta-data">3 people</span>
45 |                 </div>
46 |                 <div class="recipe__social">
47 |                     <span class="recipe__social-item">4.3 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
48 |                             viewBox="0 0 24 24">
49 |                             <path d="M12 5.173l2.335 4.817 5.305.732-3.861 3.71.942 5.27-4.721-2.524-4.721 2.525.942-5.27-3.861-3.71 5.305-.733 2.335-4.817zm0-4.586l-3.668 7.568-8.332 1.151 6.064 5.828-1.48 8.279 7.416-3.967 7.416 3.966-1.48-8.279 6.064-5.827-8.332-1.15-3.668-7.569z" /></svg></span>
50 |                     <span class="recipe__social-item">94 <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"
51 |                             fill-rule="evenodd" clip-rule="evenodd">
52 |                             <path d="M20 15c0 .552-.448 1-1 1s-1-.448-1-1 .448-1 1-1 1 .448 1 1m-3 0c0 .552-.448 1-1 1s-1-.448-1-1 .448-1 1-1 1 .448 1 1m-3 0c0 .552-.448 1-1 1s-1-.448-1-1 .448-1 1-1 1 .448 1 1m5.415 4.946c-1 .256-1.989.482-3.324.482-3.465 0-7.091-2.065-7.091-5.423 0-3.128 3.14-5.672 7-5.672 3.844 0 7 2.542 7 5.672 0 1.591-.646 2.527-1.481 3.527l.839 2.686-2.943-1.272zm-13.373-3.375l-4.389 1.896 1.256-4.012c-1.121-1.341-1.909-2.665-1.909-4.699 0-4.277 4.262-7.756 9.5-7.756 5.018 0 9.128 3.194 9.467 7.222-1.19-.566-2.551-.889-3.967-.889-4.199 0-8 2.797-8 6.672 0 .712.147 1.4.411 2.049-.953-.126-1.546-.272-2.369-.483m17.958-1.566c0-2.172-1.199-4.015-3.002-5.21l.002-.039c0-5.086-4.988-8.756-10.5-8.756-5.546 0-10.5 3.698-10.5 8.756 0 1.794.646 3.556 1.791 4.922l-1.744 5.572 6.078-2.625c.982.253 1.932.407 2.85.489 1.317 1.953 3.876 3.314 7.116 3.314 1.019 0 2.105-.135 3.242-.428l4.631 2-1.328-4.245c.871-1.042 1.364-2.384 1.364-3.75" /></svg></span>
53 |                     <span class="recipe__social-item">123 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
54 |                             viewBox="0 0 24 24">
55 |                             <path d="M21.406 9.558c-1.21-.051-2.87-.278-3.977-.744.809-3.283 1.253-8.814-2.196-8.814-1.861 0-2.351 1.668-2.833 3.329-1.548 5.336-3.946 6.816-6.4 7.401v-.73h-6v12h6v-.904c2.378.228 4.119.864 6.169 1.746 1.257.541 3.053 1.158 5.336 1.158 2.538 0 4.295-.997 5.009-3.686.5-1.877 1.486-7.25 1.486-8.25 0-1.648-1.168-2.446-2.594-2.506zm-17.406 10.442h-2v-8h2v8zm15.896-5.583s.201.01 1.069-.027c1.082-.046 1.051 1.469.004 1.563l-1.761.099c-.734.094-.656 1.203.141 1.172 0 0 .686-.017 1.143-.041 1.068-.056 1.016 1.429.04 1.551-.424.053-1.745.115-1.745.115-.811.072-.706 1.235.109 1.141l.771-.031c.822-.074 1.003.825-.292 1.661-1.567.881-4.685.131-6.416-.614-2.239-.965-4.438-1.934-6.959-2.006v-6c3.264-.749 6.328-2.254 8.321-9.113.898-3.092 1.679-1.931 1.679.574 0 2.071-.49 3.786-.921 5.533 1.061.543 3.371 1.402 6.12 1.556 1.055.059 1.024 1.455-.051 1.584l-1.394.167s-.608 1.111.142 1.116z" /></svg></span>
56 |                 </div>
57 |             </div>
58 |         </div>
59 |     </main>
60 | 
61 |     <section class="recommended">
62 |         <header class="recommended__header">
63 |             <h4 class="recommended__title">Recommended</h4>
64 |             <small class="recommended__small">See all</small>
65 |         </header>
66 |         <div class="recommended__grid">
67 |             <article class="recommended-recipe">
68 |                 <div class="recommended-recipe__info">
69 |                     <h5 class="recommended-recipe__title">Pomegranate Juice</h5>
70 |                     <h6 class="recommended-recipe__subtitle">Something I can't read</h6>
71 |                 </div>
72 |             </article>
73 |             <article class="recommended-recipe">
74 |                 <div class="recommended-recipe__info">
75 |                     <h5 class="recommended-recipe__title">Pomegranate Juice</h5>
76 |                     <h6 class="recommended-recipe__subtitle">Something I can't read</h6>
77 |                 </div>
78 |             </article>
79 |             <article class="recommended-recipe">
80 |                 <div class="recommended-recipe__info">
81 |                     <h5 class="recommended-recipe__title">Pomegranate Juice</h5>
82 |                     <h6 class="recommended-recipe__subtitle">Something I can't read</h6>
83 |                 </div>
84 |             </article>
85 |             <article class="recommended-recipe">
86 |                 <div class="recommended-recipe__info">
87 |                     <h5 class="recommended-recipe__title">Pomegranate Juice</h5>
88 |                     <h6 class="recommended-recipe__subtitle">Something I can't read</h6>
89 |                 </div>
90 |             </article>
91 |         </div>
92 |     </section>
93 | 
94 | </body>
95 | 
96 | </html>


--------------------------------------------------------------------------------
/practiceProjects/4/styles.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   --greyColor: rgba(0, 0, 0, 0.5);
  3 |   --borderRadius: 25px;
  4 | }
  5 | 
  6 | * {
  7 |   box-sizing: border-box;
  8 | }
  9 | 
 10 | h1,
 11 | h2,
 12 | h3,
 13 | h4,
 14 | h5,
 15 | h6 {
 16 |   margin: 0;
 17 |   padding: 0;
 18 | }
 19 | 
 20 | body {
 21 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
 22 |     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 23 |   background-color: #fafafc;
 24 |   padding: 0px 15px;
 25 | }
 26 | 
 27 | .header {
 28 |   margin-top: 80px;
 29 |   display: flex;
 30 |   justify-content: space-between;
 31 |   align-items: center;
 32 | }
 33 | 
 34 | .header__titles .header__title {
 35 |   font-size: 30px;
 36 | }
 37 | 
 38 | .header__titles .header__subtitle {
 39 |   font-size: 14px;
 40 |   margin-top: 5px;
 41 |   color: var(--greyColor);
 42 | }
 43 | 
 44 | .header__icon svg {
 45 |   fill: var(--greyColor);
 46 |   width: 20px;
 47 | }
 48 | 
 49 | .header__icon:first-child {
 50 |   margin-right: 15px;
 51 | }
 52 | 
 53 | .main {
 54 |   margin: 50px 0;
 55 |   margin-bottom: 100px;
 56 | }
 57 | 
 58 | .recipe {
 59 |   height: 40vh;
 60 |   border-radius: var(--borderRadius);
 61 |   background-image: url(https://i.pinimg.com/564x/ae/c7/e2/aec7e2860fa4b5438826abd82830825d.jpg);
 62 |   background-size: 100%;
 63 |   background-position: center center;
 64 |   position: relative;
 65 |   display: flex;
 66 |   align-items: flex-end;
 67 |   justify-content: center;
 68 | }
 69 | 
 70 | .recipe .recipe__heart {
 71 |   position: absolute;
 72 |   top: 20px;
 73 |   right: 20px;
 74 |   background-color: white;
 75 |   width: 50px;
 76 |   height: 50px;
 77 |   border-radius: 25px;
 78 |   display: flex;
 79 |   justify-content: center;
 80 |   align-items: center;
 81 | }
 82 | 
 83 | .recipe__heart svg {
 84 |   width: 20px;
 85 |   fill: #e74c3c;
 86 | }
 87 | 
 88 | .recipe .recipe__info {
 89 |   background-color: white;
 90 |   border-radius: var(--borderRadius);
 91 |   width: 90%;
 92 |   padding: 10px 25px;
 93 |   box-shadow: 0 7px 20px rgba(50, 50, 93, 0.1), 0 3px 20px rgba(0, 0, 0, 0.08);
 94 |   position: relative;
 95 |   top: 50px;
 96 | }
 97 | 
 98 | .recipe__info .recipe__meta {
 99 |   padding-bottom: 20px;
100 |   border-bottom: 1px solid var(--greyColor);
101 | }
102 | 
103 | .recipe__info .recipe__title {
104 |   font-size: 22px;
105 |   margin-bottom: 10px;
106 | }
107 | 
108 | .recipe__meta {
109 |   color: var(--greyColor);
110 |   font-weight: 600;
111 | }
112 | 
113 | .recipe__info .recipe__social {
114 |   padding: 10px;
115 |   display: grid;
116 |   grid-template-columns: repeat(3, 1fr);
117 |   justify-items: center;
118 | }
119 | 
120 | .recipe__social .recipe__social-item {
121 |   display: flex;
122 |   align-items: center;
123 | }
124 | 
125 | .recipe__social-item svg {
126 |   margin-left: 10px;
127 |   fill: var(--greyColorx);
128 | }
129 | 
130 | .recommended .recommended__header {
131 |   margin-bottom: 20px;
132 |   display: flex;
133 |   justify-content: space-between;
134 |   align-items: flex-end;
135 | }
136 | 
137 | .recommended__header .recommended__title {
138 |   font-size: 20px;
139 | }
140 | .recommended__header .recommended__small {
141 |   color: var(--greyColor);
142 | }
143 | 
144 | .recommended__grid {
145 |   display: grid;
146 |   grid-auto-flow: column;
147 |   grid-template-columns: minmax(120px, 1fr);
148 |   grid-auto-columns: minmax(120px, 1fr);
149 |   grid-gap: 25px;
150 |   overflow: scroll;
151 | }
152 | 
153 | .recommended-recipe {
154 |   border-radius: var(--borderRadius);
155 |   height: 18vh;
156 |   background-image: url(https://i.pinimg.com/564x/c0/63/f1/c063f17d68bc5181dfa0010bf2a18e78.jpg);
157 |   background-size: 100%;
158 |   background-position: center center;
159 |   display: flex;
160 |   align-items: flex-end;
161 |   overflow: hidden;
162 | }
163 | 
164 | .recommended-recipe .recommended-recipe__info {
165 |   background-color: white;
166 |   padding: 10px;
167 |   width: 100%;
168 | }
169 | 
170 | .recommended-recipe__info .recommended-recipe__title {
171 |   font-size: 10px;
172 |   font-weight: 700;
173 | }
174 | 
175 | .recommended-recipe__info .recommended-recipe__subtitle {
176 |   font-size: 8px;
177 |   color: var(--greyColor);
178 | }
179 | 


--------------------------------------------------------------------------------
/practiceProjects/5/702ddd369d1596338ddbb93f6759ae3f.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/css-masterclass/d29b0119f96e3a7306ec3541425c8db7155a93c8/practiceProjects/5/702ddd369d1596338ddbb93f6759ae3f.jpg


--------------------------------------------------------------------------------
/practiceProjects/5/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8 |     <title>Practice Five</title>
  9 |     <link rel="stylesheet" href="styles.css">
 10 | </head>
 11 | 
 12 | <body>
 13 | 
 14 | 
 15 | 
 16 |     <header class="header">
 17 |         <h1 class="header__title">
 18 |             <span>Rel</span><span>ate</span>
 19 |         </h1>
 20 |         <div class="header__icons">
 21 |             <span class="header__icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
 22 |                     <path d="M23.809 21.646l-6.205-6.205c1.167-1.605 1.857-3.579 1.857-5.711 0-5.365-4.365-9.73-9.731-9.73-5.365 0-9.73 4.365-9.73 9.73 0 5.366 4.365 9.73 9.73 9.73 2.034 0 3.923-.627 5.487-1.698l6.238 6.238 2.354-2.354zm-20.955-11.916c0-3.792 3.085-6.877 6.877-6.877s6.877 3.085 6.877 6.877-3.085 6.877-6.877 6.877c-3.793 0-6.877-3.085-6.877-6.877z" /></svg></span>
 23 |             <span class="header__icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
 24 |                     <path d="M15.137 3.945c-.644-.374-1.042-1.07-1.041-1.82v-.003c.001-1.172-.938-2.122-2.096-2.122s-2.097.95-2.097 2.122v.003c.001.751-.396 1.446-1.041 1.82-4.667 2.712-1.985 11.715-6.862 13.306v1.749h20v-1.749c-4.877-1.591-2.195-10.594-6.863-13.306zm-3.137-2.945c.552 0 1 .449 1 1 0 .552-.448 1-1 1s-1-.448-1-1c0-.551.448-1 1-1zm3 20c0 1.598-1.392 3-2.971 3s-3.029-1.402-3.029-3h6z" /></svg></span>
 25 |             <span class="header__icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
 26 |                     <path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z" /></svg></span>
 27 |         </div>
 28 |     </header>
 29 | 
 30 |     <div class="fakeBg"></div>
 31 | 
 32 |     <main class="main">
 33 |         <header class="main__header">
 34 |             <div class="main__header-column">
 35 |                 <h4 class="main__list-title">List</h4>
 36 |                 <h5 class="main__list-subtitle">24 matches</h5>
 37 |             </div>
 38 |             <div class="main__header-column">
 39 |                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
 40 |                     <path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" /></svg>
 41 |             </div>
 42 |         </header>
 43 |         <ul class="match-list">
 44 |             <li class="match-item">
 45 |                 <img src="https://i.pinimg.com/280x280_RS/32/24/4b/32244bdd3634d5c9c9e668b6679e8059.jpg" alt="" class="match-item__avatar">
 46 |                 <div class="match-item__info">
 47 |                     <span class="match-item__name">Nicolas Serrano</span>
 48 |                     <span class="match-item__friends">12 friends</span>
 49 |                 </div>
 50 |                 <span class="match-item__icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
 51 |                         <path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" /></svg></span>
 52 |             </li>
 53 |             <li class="match-item">
 54 |                 <img src="https://i.pinimg.com/280x280_RS/32/24/4b/32244bdd3634d5c9c9e668b6679e8059.jpg" alt="" class="match-item__avatar">
 55 |                 <div class="match-item__info">
 56 |                     <span class="match-item__name">Nicolas Serrano</span>
 57 |                     <span class="match-item__friends">12 friends</span>
 58 |                 </div>
 59 |                 <span class="match-item__icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
 60 |                         <path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" /></svg></span>
 61 |             </li>
 62 |             <li class="match-item">
 63 |                 <img src="https://i.pinimg.com/280x280_RS/32/24/4b/32244bdd3634d5c9c9e668b6679e8059.jpg" alt="" class="match-item__avatar">
 64 |                 <div class="match-item__info">
 65 |                     <span class="match-item__name">Nicolas Serrano</span>
 66 |                     <span class="match-item__friends">12 friends</span>
 67 |                 </div>
 68 |                 <span class="match-item__icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
 69 |                         <path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" /></svg></span>
 70 |             </li>
 71 |             <li class="match-item">
 72 |                 <img src="https://i.pinimg.com/280x280_RS/32/24/4b/32244bdd3634d5c9c9e668b6679e8059.jpg" alt="" class="match-item__avatar">
 73 |                 <div class="match-item__info">
 74 |                     <span class="match-item__name">Nicolas Serrano</span>
 75 |                     <span class="match-item__friends">12 friends</span>
 76 |                 </div>
 77 |                 <span class="match-item__icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
 78 |                         <path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" /></svg></span>
 79 |             </li>
 80 |             <li class="match-item">
 81 |                 <img src="https://i.pinimg.com/280x280_RS/32/24/4b/32244bdd3634d5c9c9e668b6679e8059.jpg" alt="" class="match-item__avatar">
 82 |                 <div class="match-item__info">
 83 |                     <span class="match-item__name">Nicolas Serrano</span>
 84 |                     <span class="match-item__friends">12 friends</span>
 85 |                 </div>
 86 |                 <span class="match-item__icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
 87 |                         <path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" /></svg></span>
 88 |             </li>
 89 |             <li class="match-item">
 90 |                 <img src="https://i.pinimg.com/280x280_RS/32/24/4b/32244bdd3634d5c9c9e668b6679e8059.jpg" alt="" class="match-item__avatar">
 91 |                 <div class="match-item__info">
 92 |                     <span class="match-item__name">Nicolas Serrano</span>
 93 |                     <span class="match-item__friends">12 friends</span>
 94 |                 </div>
 95 |                 <span class="match-item__icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
 96 |                         <path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" /></svg></span>
 97 |             </li>
 98 |             <li class="match-item">
 99 |                 <img src="https://i.pinimg.com/280x280_RS/32/24/4b/32244bdd3634d5c9c9e668b6679e8059.jpg" alt="" class="match-item__avatar">
100 |                 <div class="match-item__info">
101 |                     <span class="match-item__name">Nicolas Serrano</span>
102 |                     <span class="match-item__friends">12 friends</span>
103 |                 </div>
104 |                 <span class="match-item__icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
105 |                         <path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" /></svg></span>
106 |             </li>
107 |         </ul>
108 |         <button class="match-list__button">Follow</button>
109 |     </main>
110 | 
111 | 
112 | 
113 | 
114 | </body>
115 | 
116 | </html>


--------------------------------------------------------------------------------
/practiceProjects/5/styles.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   --gradientBackground: linear-gradient(to right, #a274f7, #83b8f1);
  3 |   --boxShadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  4 |   --greyColor: rgba(0, 0, 0, 0.5);
  5 | }
  6 | 
  7 | * {
  8 |   box-sizing: border-box;
  9 | }
 10 | 
 11 | h1,
 12 | h2,
 13 | h3,
 14 | h4,
 15 | h5,
 16 | body,
 17 | html {
 18 |   margin: 0;
 19 |   padding: 0;
 20 | }
 21 | 
 22 | body,
 23 | html,
 24 | main {
 25 |   height: 100%;
 26 | }
 27 | 
 28 | body {
 29 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
 30 |     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 31 |   background-color: #d5d5d3;
 32 | }
 33 | 
 34 | .header {
 35 |   box-shadow: var(--boxShadow);
 36 |   background-image: var(--gradientBackground);
 37 |   color: white;
 38 |   display: flex;
 39 |   align-items: flex-end;
 40 |   justify-content: space-between;
 41 |   padding: 40px 10px 10px 10px;
 42 |   margin-bottom: 30px;
 43 |   z-index: 2;
 44 |   position: relative;
 45 | }
 46 | 
 47 | .header svg {
 48 |   fill: white;
 49 | }
 50 | 
 51 | .header .header__title {
 52 |   font-size: 16px;
 53 |   font-weight: 600;
 54 |   text-transform: uppercase;
 55 | }
 56 | 
 57 | .header__title span:first-child {
 58 |   display: block;
 59 | }
 60 | 
 61 | .header__title span:last-child {
 62 |   margin-left: 15px;
 63 | }
 64 | 
 65 | .main {
 66 |   position: relative;
 67 | }
 68 | 
 69 | .main .match-list__button {
 70 |   background-image: var(--gradientBackground);
 71 |   color: white;
 72 |   box-shadow: var(--boxShadow);
 73 |   text-transform: uppercase;
 74 |   padding: 30px 60px;
 75 |   border: none;
 76 |   position: absolute;
 77 |   bottom: 40px;
 78 |   right: 15px;
 79 | }
 80 | 
 81 | .header__icons span {
 82 |   margin-left: 15px;
 83 | }
 84 | 
 85 | .header__icons span:first-child {
 86 |   margin: 0;
 87 | }
 88 | 
 89 | .main {
 90 |   padding: 0px 20px;
 91 | }
 92 | 
 93 | .main .main__header {
 94 |   display: flex;
 95 |   justify-content: space-between;
 96 |   align-items: flex-end;
 97 |   padding-bottom: 25px;
 98 |   border-bottom: 0.5px solid var(--greyColor);
 99 |   margin-bottom: 50px;
100 | }
101 | 
102 | .main__header .main__list-title {
103 |   font-size: 40px;
104 |   text-transform: uppercase;
105 |   margin-bottom: 20px;
106 | }
107 | 
108 | .main__header .main__list-subtitle {
109 |   margin-left: 30px;
110 |   color: var(--greyColor);
111 |   text-transform: uppercase;
112 | }
113 | 
114 | .main__header svg,
115 | .match-item svg {
116 |   fill: var(--greyColor);
117 | }
118 | 
119 | .main .match-list {
120 |   margin: 0;
121 |   padding: 0;
122 |   list-style: none;
123 |   display: grid;
124 |   grid-gap: 30px;
125 | }
126 | 
127 | .match-item {
128 |   display: grid;
129 |   grid-template-columns: 1fr 3fr 1fr;
130 |   grid-gap: 20px;
131 | }
132 | 
133 | .match-item img {
134 |   max-width: 60px;
135 |   box-shadow: var(--boxShadow);
136 | }
137 | 
138 | .match-item__info {
139 |   font-weight: 600;
140 | }
141 | 
142 | .match-item__info .match-item__name {
143 |   display: block;
144 |   margin-bottom: 10px;
145 |   font-size: 18px;
146 | }
147 | 
148 | .match-item__info .match-item__friends {
149 |   text-transform: uppercase;
150 |   color: var(--greyColor);
151 | }
152 | 
153 | .match-item .match-item__icon {
154 |   align-self: center;
155 | }
156 | 
157 | .fakeBg {
158 |   position: fixed;
159 |   height: 100vh;
160 |   background-color: white;
161 |   top: 0px;
162 |   right: 0;
163 |   left: 0;
164 |   width: 80vw;
165 |   margin: auto;
166 |   z-index: 0;
167 | }
168 | 


--------------------------------------------------------------------------------
/practiceProjects/6/86ff34f1e814e5dcae99dd9abe020b35.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/css-masterclass/d29b0119f96e3a7306ec3541425c8db7155a93c8/practiceProjects/6/86ff34f1e814e5dcae99dd9abe020b35.gif


--------------------------------------------------------------------------------
/practiceProjects/6/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Project Four</title>
 9 |     <link rel="stylesheet" href="styles.css">
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <header class="header">
15 |         <span class="header__menu-icon">|||</span>
16 |         <h1 class="header__title">ArchStudio</h1>
17 |     </header>
18 | 
19 | 
20 |     <section class="portfolio">
21 |         <article class="portfolio__item">
22 |             <div class="item__info">
23 |                 <h3 class="item__title">Concrete Chapel</h3>
24 |                 <h5 class="item__subtitle">OFIS Architects</h5>
25 |             </div>
26 |         </article>
27 |         <article class="portfolio__item">
28 |             <div class="item__info">
29 |                 <h3 class="item__title">Concrete Chapel</h3>
30 |                 <h5 class="item__subtitle">OFIS Architects</h5>
31 |             </div>
32 |         </article>
33 |         <article class="portfolio__item">
34 |             <div class="item__info">
35 |                 <h3 class="item__title">Concrete Chapel</h3>
36 |                 <h5 class="item__subtitle">OFIS Architects</h5>
37 |             </div>
38 |         </article>
39 |         <article class="portfolio__item">
40 |             <div class="item__info">
41 |                 <h3 class="item__title">Concrete Chapel</h3>
42 |                 <h5 class="item__subtitle">OFIS Architects</h5>
43 |             </div>
44 |         </article>
45 |         <article class="portfolio__item">
46 |             <div class="item__info">
47 |                 <h3 class="item__title">Concrete Chapel</h3>
48 |                 <h5 class="item__subtitle">OFIS Architects</h5>
49 |             </div>
50 |         </article>
51 |         <article class="portfolio__item">
52 |             <div class="item__info">
53 |                 <h3 class="item__title">Concrete Chapel</h3>
54 |                 <h5 class="item__subtitle">OFIS Architects</h5>
55 |             </div>
56 |         </article>
57 |     </section>
58 | 
59 | 
60 |     <nav class="navigation">
61 |         <ul class="navigation__list">
62 |             <li class="navigation__item navigation__item--selected">News</li>
63 |             <li class="navigation__item">Brutalism</li>
64 |             <li class="navigation__item">Post Modernism</li>
65 |             <li class="navigation__item">Deconstructivism</li>
66 |             <li class="navigation__item">Bioclimatic</li>
67 |         </ul>
68 |         <div class="navigation__icons">
69 |             <span class="navigation__icon">
70 |                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
71 |                     <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" /></svg>
72 |             </span>
73 |             <span class="navigation__icon">
74 |                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
75 |                     <path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z" /></svg>
76 |             </span>
77 |         </div>
78 |     </nav>
79 | 
80 | </body>
81 | 
82 | </html>


--------------------------------------------------------------------------------
/practiceProjects/6/styles.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 | }
  3 | 
  4 | * {
  5 |   box-sizing: border-box;
  6 | }
  7 | 
  8 | h1,
  9 | h2,
 10 | h3,
 11 | h4,
 12 | h5,
 13 | html,
 14 | body {
 15 |   margin: 0;
 16 |   padding: 0;
 17 | }
 18 | 
 19 | body {
 20 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
 21 |     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 22 |   background-color: #f4f4f5;
 23 |   overflow: hidden;
 24 |   display: grid;
 25 |   grid-template-rows: 1fr 3fr 0.5fr;
 26 |   height: 100vh;
 27 | }
 28 | 
 29 | .header {
 30 |   margin-top: 50px;
 31 |   display: flex;
 32 |   align-items: center;
 33 |   padding: 0px 50px;
 34 | }
 35 | 
 36 | .header .header__menu-icon {
 37 |   transform: rotate(90deg);
 38 |   font-weight: 600;
 39 |   font-size: 22px;
 40 |   margin-right: 15px;
 41 | }
 42 | 
 43 | .portfolio {
 44 |   display: grid;
 45 |   padding-left: 90px;
 46 |   grid-template-columns: minmax(250px, 1fr);
 47 |   grid-auto-columns: minmax(250px, 1fr);
 48 |   grid-template-rows: 45vh;
 49 |   grid-auto-rows: 45vh;
 50 |   grid-auto-flow: column;
 51 |   overflow: scroll;
 52 |   grid-gap: 50px;
 53 |   padding-bottom: 50px;
 54 |   align-self: center;
 55 | }
 56 | 
 57 | .portfolio::-webkit-scrollbar {
 58 |   display: none;
 59 | }
 60 | 
 61 | .portfolio .portfolio__item {
 62 |   display: flex;
 63 |   align-items: flex-end;
 64 |   justify-content: center;
 65 |   background-image: url(https://i.pinimg.com/564x/8b/58/16/8b5816175ebe70ab848c00c27780ba22.jpg);
 66 |   background-size: cover;
 67 |   background-position: center center;
 68 |   box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 38px rgba(0, 0, 0, 0.22);
 69 | }
 70 | 
 71 | .portfolio__item .item__info {
 72 |   background-color: white;
 73 |   text-align: center;
 74 |   width: 100%;
 75 |   padding: 30px 0px;
 76 | }
 77 | 
 78 | .navigation {
 79 |   width: 100%;
 80 |   background-color: white;
 81 |   display: flex;
 82 |   justify-content: space-between;
 83 |   align-items: center;
 84 |   color: rgba(0, 0, 0, 0.5);
 85 |   padding: 0px 40px;
 86 | }
 87 | 
 88 | .navigation svg {
 89 |   fill: rgba(0, 0, 0, 0.5);
 90 | }
 91 | 
 92 | .navigation .navigation__list {
 93 |   list-style: none;
 94 |   padding: 0;
 95 |   margin: 0;
 96 |   display: grid;
 97 |   grid-auto-columns: repeat(auto-fill, minmax(min-content, 1fr));
 98 |   grid-template-columns: repeat(auto-fill, minmax(min-content, 1fr));
 99 |   grid-auto-flow: column;
100 |   grid-gap: 20px;
101 | }
102 | 
103 | .navigation__icons .navigation__icon:last-child {
104 |   margin-left: 10px;
105 | }
106 | 
107 | .navigation .navigation__item--selected {
108 |   color: #2c2c2c;
109 | }
110 | 


--------------------------------------------------------------------------------
/practiceProjects/7/download.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/css-masterclass/d29b0119f96e3a7306ec3541425c8db7155a93c8/practiceProjects/7/download.png


--------------------------------------------------------------------------------
/practiceProjects/7/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Practice Seven</title>
 9 |     <link rel="stylesheet" href="styles.css">
10 | </head>
11 | 
12 | <body>
13 | 
14 | 
15 |     <header class="header">
16 | 
17 |         <span class="header__menu">|||</span>
18 |         <h3 class="header__title">Multidea</h3>
19 | 
20 |     </header>
21 | 
22 | 
23 |     <section class="gallery">
24 |         <div class="gallery__wrapper">
25 |             <div class="gallery__item"></div>
26 |             <div class="gallery__item"></div>
27 |             <div class="gallery__item"></div>
28 |         </div>
29 |     </section>
30 | 
31 |     <section class="content">
32 |         <div class="content__column">
33 |             <span>
34 |                 <h2 class="content__title">Explore the basics</h2>
35 |                 <ul class="content__datalist">
36 |                     <li class="datalist__item">
37 |                         <span class="datalist__name">Year</span>
38 |                         <span class="datalist__value">2014</span>
39 |                     </li>
40 |                     <li class="datalist__item">
41 |                         <span class="datalist__name">Client</span>
42 |                         <span class="datalist__value">Neue</span>
43 |                     <li class="datalist__item">
44 |                         <span class="datalist__name">Content</span>
45 |                         <span class="datalist__value">Design</span>
46 |                     </li>
47 |                 </ul>
48 |                 <p class="content__description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo
49 |                     perspiciatis
50 |                     ipsa perferendis asperiores illo inventore, ducimus iste porro doloribus, consequatur ex omnis,
51 |                     odit
52 |                     esse tenetur pariatur? Deleniti necessitatibus quae explicabo!</p>
53 |                 <a href="#" class="content__link">← Go back</a>
54 |             </span>
55 |         </div>
56 |         <div class="content__column">
57 |             <div class="content__row">
58 |                 <h2 class="content__title">Background</h2>
59 |                 <p class="content__description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo
60 |                     perspiciatis
61 |                     ipsa perferendis asperiores illo inventore, ducimus iste porro doloribus, consequatur ex omnis,
62 |                     odit
63 |                     esse tenetur pariatur? Deleniti necessitatibus quae explicabo!</p>
64 |             </div>
65 |             <div class="content__row">
66 |                 <h2 class="content__title">Challenge</h2>
67 |                 <p class="content__description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo
68 |                     perspiciatis
69 |                     ipsa perferendis asperiores illo inventore, ducimus iste porro doloribus, consequatur ex omnis,
70 |                     odit
71 |                     esse tenetur pariatur? Deleniti necessitatibus quae explicabo!</p>
72 |             </div>
73 |             <div class="content__row">
74 |                 <h2 class="content__title">Solution</h2>
75 |                 <p class="content__description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo
76 |                     perspiciatis
77 |                     ipsa perferendis asperiores illo inventore, ducimus iste porro doloribus, consequatur ex omnis,
78 |                     odit
79 |                     esse tenetur pariatur? Deleniti necessitatibus quae explicabo!</p>
80 |             </div>
81 | 
82 |         </div>
83 |     </section>
84 | 
85 | 
86 | </body>
87 | 
88 | </html>


--------------------------------------------------------------------------------
/practiceProjects/7/styles.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 | }
  3 | 
  4 | * {
  5 |   box-sizing: border-box;
  6 | }
  7 | 
  8 | h1,
  9 | h2,
 10 | h3,
 11 | h4,
 12 | h5,
 13 | body,
 14 | html {
 15 |   margin: 0;
 16 |   padding: 0;
 17 | }
 18 | 
 19 | body {
 20 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
 21 |     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 22 |   background-color: #f8ffff;
 23 | }
 24 | 
 25 | .header {
 26 |   padding: 40px 60px;
 27 | }
 28 | 
 29 | .header {
 30 |   display: flex;
 31 |   text-transform: uppercase;
 32 |   justify-content: space-between;
 33 | }
 34 | 
 35 | .header .header__menu {
 36 |   font-weight: 600;
 37 |   transform: rotate(90deg);
 38 |   font-size: 22px;
 39 | }
 40 | 
 41 | .header .header__title {
 42 |   font-weight: 300;
 43 | }
 44 | 
 45 | .gallery {
 46 |   background-color: #eeeff5;
 47 |   padding: 40px;
 48 | }
 49 | 
 50 | .gallery__wrapper,
 51 | .content {
 52 |   max-width: 1200px;
 53 |   width: 100%;
 54 |   margin: 0 auto;
 55 | }
 56 | 
 57 | .gallery__wrapper {
 58 |   display: grid;
 59 |   grid-gap: 30px;
 60 |   grid-template-columns: repeat(3, 1fr);
 61 | }
 62 | 
 63 | .gallery .gallery__item {
 64 |   height: 25vh;
 65 |   background-size: cover;
 66 |   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
 67 |   background-position: center;
 68 | }
 69 | 
 70 | .gallery .gallery__item:first-child {
 71 |   background-image: url(https://i.pinimg.com/564x/92/a8/7b/92a87b097372f3a121518366567a0e0a.jpg);
 72 | }
 73 | 
 74 | .gallery .gallery__item:nth-child(2) {
 75 |   background-image: url(https://i.pinimg.com/564x/3d/96/2b/3d962ba16436a10eb1a01db5e2138f40.jpg);
 76 | }
 77 | 
 78 | .gallery .gallery__item:last-child {
 79 |   background-image: url(https://i.pinimg.com/564x/87/58/5e/87585edb1e8784f052e89d8767627900.jpg);
 80 | }
 81 | 
 82 | .content {
 83 |   margin-top: 50px;
 84 |   padding: 0px 40px;
 85 |   display: grid;
 86 |   grid-template-columns: repeat(2, 1fr);
 87 |   grid-gap: 50px;
 88 | }
 89 | 
 90 | .content .content__title {
 91 |   text-transform: uppercase;
 92 |   color: rgba(0, 0, 0, 0.8);
 93 | }
 94 | 
 95 | .content .content__description {
 96 |   color: rgba(0, 0, 0, 0.5);
 97 |   font-size: 14px;
 98 | }
 99 | 
100 | .content .content__column {
101 |   display: grid;
102 |   grid-gap: 30px;
103 | }
104 | 
105 | .content .content__datalist {
106 |   display: grid;
107 |   grid-template-columns: repeat(3, 1fr);
108 |   margin: 0;
109 |   padding: 0;
110 |   list-style: none;
111 |   margin: 30px 0px;
112 | }
113 | 
114 | .content__datalist .datalist__name {
115 |   display: block;
116 | 
117 |   font-size: 14px;
118 |   font-weight: 600;
119 | }
120 | 
121 | .content__datalist .datalist__value {
122 |   color: rgba(0, 0, 0, 0.6);
123 |   font-size: 13px;
124 |   font-weight: 600;
125 | }
126 | 
127 | .content .content__link {
128 |   text-transform: uppercase;
129 |   text-decoration: none;
130 |   color: inherit;
131 |   font-weight: 600;
132 |   padding-bottom: 5px;
133 |   border-bottom: 2px solid #3498db;
134 | }
135 | 


--------------------------------------------------------------------------------
/practiceProjects/8/download.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/css-masterclass/d29b0119f96e3a7306ec3541425c8db7155a93c8/practiceProjects/8/download.png


--------------------------------------------------------------------------------
/practiceProjects/8/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Practice Eight</title>
 9 |     <link rel="stylesheet" href="styles.css">
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <header class="header">
15 |         <div class="header__square">● ● ●</div>
16 |         <h1 class="header__title">Shex</h1>
17 |     </header>
18 | 
19 |     <main class="main">
20 |         <div class="main__info">
21 |             <hgroup class="main__titles">
22 |                 <h6 class="main__pre-title">The grand moment</h6>
23 |                 <h2 class="main__title">Le tour</h2>
24 |                 <h5 class="main__subtitle">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</h5>
25 |             </hgroup>
26 |             <a href="" class="main__link">Explore the tour</a>
27 |         </div>
28 |         <div class="main__photo">
29 |             <div class="main__navigation">
30 |                 <span class="navigation__arrow">←</span>
31 |                 <span class="navigation__pagess">1/4</span>
32 |                 <span class="navigation__arrow">→</span></div>
33 |         </div>
34 |     </main>
35 | 
36 | </body>
37 | 
38 | </html>


--------------------------------------------------------------------------------
/practiceProjects/8/styles.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   --greyColor: rgba(0, 0, 0, 0.7);
  3 |   --blackColor: #363d3f;
  4 | }
  5 | 
  6 | * {
  7 |   box-sizing: border-box;
  8 | }
  9 | 
 10 | h1,
 11 | h2,
 12 | h3,
 13 | h4,
 14 | h5,
 15 | h6,
 16 | body,
 17 | html {
 18 |   margin: 0;
 19 |   padding: 0;
 20 | }
 21 | 
 22 | body {
 23 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
 24 |     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 25 |   background-color: white;
 26 |   max-height: 100%;
 27 |   height: 100%;
 28 |   color: var(--blackColor);
 29 | }
 30 | 
 31 | html,
 32 | body {
 33 |   height: 100%;
 34 | }
 35 | 
 36 | .header {
 37 |   height: 100px;
 38 |   display: flex;
 39 |   align-items: center;
 40 |   text-transform: lowercase;
 41 | }
 42 | 
 43 | .header .header__square {
 44 |   background-color: var(--blackColor);
 45 |   height: 100px;
 46 |   width: 100px;
 47 |   display: flex;
 48 |   align-items: center;
 49 |   justify-content: center;
 50 |   color: white;
 51 |   font-size: 14px;
 52 |   margin-right: 20px;
 53 | }
 54 | 
 55 | .main {
 56 |   height: calc(100% - 100px);
 57 |   display: grid;
 58 |   grid-template-columns: 1fr 2fr;
 59 |   grid-template-rows: 100%;
 60 |   place-items: center;
 61 | }
 62 | 
 63 | .main .main__info {
 64 |   margin-left: 200px;
 65 |   width: 100%;
 66 | }
 67 | 
 68 | .main .main__titles {
 69 |   margin-bottom: 150px;
 70 | }
 71 | 
 72 | .main__titles .main__pre-title {
 73 |   text-transform: uppercase;
 74 |   color: var(--greyColor);
 75 | }
 76 | 
 77 | .main__titles .main__title {
 78 |   font-size: 150px;
 79 |   position: relative;
 80 |   left: 80px;
 81 | }
 82 | 
 83 | .main__titles .main__subtitle {
 84 |   font-size: 12px;
 85 |   font-weight: 600;
 86 |   color: var(--greyColor);
 87 | }
 88 | 
 89 | .main .main__link {
 90 |   text-decoration: none;
 91 |   color: inherit;
 92 |   font-weight: 600;
 93 |   text-transform: uppercase;
 94 |   color: var(--greyColor);
 95 |   font-size: 14px;
 96 | }
 97 | 
 98 | .main .main__photo {
 99 |   width: 100%;
100 |   height: 100%;
101 |   background-size: 100%;
102 |   background-position: center;
103 |   background-image: url(https://picsum.photos/1000/1000/?random);
104 |   display: flex;
105 |   align-items: flex-end;
106 | }
107 | .main__photo .main__navigation {
108 |   background-color: white;
109 |   padding: 25px 50px;
110 |   font-weight: 600;
111 | }
112 | 
113 | .main__navigation .navigation__arrow:first-child {
114 |   margin-right: 10px;
115 | }
116 | 
117 | .main__navigation .navigation__arrow:last-child {
118 |   margin-left: 10px;
119 | }
120 | 


--------------------------------------------------------------------------------
/practiceProjects/9/bdf81db0595d323cdeb2e6327e9824ce.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/css-masterclass/d29b0119f96e3a7306ec3541425c8db7155a93c8/practiceProjects/9/bdf81db0595d323cdeb2e6327e9824ce.jpg


--------------------------------------------------------------------------------
/practiceProjects/9/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Practice Nine</title>
 9 |     <link rel="stylesheet" href="styles.css">
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <header class="header">
15 |         <h1 class="header__logo">Zuzu.</h1>
16 |         <nav class="header__nav">
17 |             <ul class="header__list">
18 |                 <li class="header__list-item">About</li>
19 |                 <li class="header__list-item">Collections</li>
20 |                 <li class="header__list-item">Videos</li>
21 |                 <li class="header__list-item">Contact</li>
22 |             </ul>
23 |         </nav>
24 |         <div class="header__btns">
25 |             <span class="header__btn">
26 |                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
27 |                     <path d="M23.822 20.88l-6.353-6.354c.93-1.465 1.467-3.2 1.467-5.059.001-5.219-4.247-9.467-9.468-9.467s-9.468 4.248-9.468 9.468c0 5.221 4.247 9.469 9.468 9.469 1.768 0 3.421-.487 4.839-1.333l6.396 6.396 3.119-3.12zm-20.294-11.412c0-3.273 2.665-5.938 5.939-5.938 3.275 0 5.94 2.664 5.94 5.938 0 3.275-2.665 5.939-5.94 5.939-3.274 0-5.939-2.664-5.939-5.939z" /></svg>
28 |             </span>
29 |             <span class="header__btn">
30 |                 Eng
31 |             </span>
32 |         </div>
33 |     </header>
34 | 
35 |     <main class="main">
36 |         <div class="main__photo"></div>
37 |         <div class="main__content">
38 |             <h2 class="main__title">New collection</h2>
39 |             <div class="main__pages">
40 |                 <span class="main__current-page">01</span>
41 |                 <span class="main__total-pages">/06</span>
42 |             </div>
43 |             <div class="navigation">
44 |                 <div class="navigation__column">
45 |                     <span class="navigation__arrow">‹</span>
46 |                     <span class="navigation__arrow">›</span>
47 |                 </div>
48 |                 <div class="navigation__column">
49 |                     <span class="navigation__icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
50 |                             viewBox="0 0 24 24">
51 |                             <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3 8h-1.35c-.538 0-.65.221-.65.778v1.222h2l-.209 2h-1.791v7h-3v-7h-2v-2h2v-2.308c0-1.769.931-2.692 3.029-2.692h1.971v3z" /></svg>
52 |                     </span>
53 |                     <span class="navigation__icon">
54 |                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
55 |                             <path d="M14.829 6.302c-.738-.034-.96-.04-2.829-.04s-2.09.007-2.828.04c-1.899.087-2.783.986-2.87 2.87-.033.738-.041.959-.041 2.828s.008 2.09.041 2.829c.087 1.879.967 2.783 2.87 2.87.737.033.959.041 2.828.041 1.87 0 2.091-.007 2.829-.041 1.899-.086 2.782-.988 2.87-2.87.033-.738.04-.96.04-2.829s-.007-2.09-.04-2.828c-.088-1.883-.973-2.783-2.87-2.87zm-2.829 9.293c-1.985 0-3.595-1.609-3.595-3.595 0-1.985 1.61-3.594 3.595-3.594s3.595 1.609 3.595 3.594c0 1.985-1.61 3.595-3.595 3.595zm3.737-6.491c-.464 0-.84-.376-.84-.84 0-.464.376-.84.84-.84.464 0 .84.376.84.84 0 .463-.376.84-.84.84zm-1.404 2.896c0 1.289-1.045 2.333-2.333 2.333s-2.333-1.044-2.333-2.333c0-1.289 1.045-2.333 2.333-2.333s2.333 1.044 2.333 2.333zm-2.333-12c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.958 14.886c-.115 2.545-1.532 3.955-4.071 4.072-.747.034-.986.042-2.887.042s-2.139-.008-2.886-.042c-2.544-.117-3.955-1.529-4.072-4.072-.034-.746-.042-.985-.042-2.886 0-1.901.008-2.139.042-2.886.117-2.544 1.529-3.955 4.072-4.071.747-.035.985-.043 2.886-.043s2.14.008 2.887.043c2.545.117 3.957 1.532 4.071 4.071.034.747.042.985.042 2.886 0 1.901-.008 2.14-.042 2.886z" /></svg>
56 |                     </span>
57 |                     <span class="navigation__icon">
58 |                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
59 |                             <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.066 9.645c.183 4.04-2.83 8.544-8.164 8.544-1.622 0-3.131-.476-4.402-1.291 1.524.18 3.045-.244 4.252-1.189-1.256-.023-2.317-.854-2.684-1.995.451.086.895.061 1.298-.049-1.381-.278-2.335-1.522-2.304-2.853.388.215.83.344 1.301.359-1.279-.855-1.641-2.544-.889-3.835 1.416 1.738 3.533 2.881 5.92 3.001-.419-1.796.944-3.527 2.799-3.527.825 0 1.572.349 2.096.907.654-.128 1.27-.368 1.824-.697-.215.671-.67 1.233-1.263 1.589.581-.07 1.135-.224 1.649-.453-.384.578-.87 1.084-1.433 1.489z" /></svg>
60 |                     </span>
61 |                 </div>
62 |             </div>
63 |         </div>
64 |     </main>
65 | 
66 | </body>
67 | 
68 | </html>


--------------------------------------------------------------------------------
/practiceProjects/9/styles.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   --greyColor: rgba(0, 0, 0, 0.6);
  3 | }
  4 | 
  5 | * {
  6 |   box-sizing: border-box;
  7 | }
  8 | 
  9 | h1,
 10 | h2,
 11 | h3,
 12 | h4,
 13 | h5 {
 14 |   margin: 0;
 15 |   padding: 0;
 16 | }
 17 | 
 18 | html,
 19 | body,
 20 | main {
 21 |   padding: 0;
 22 |   margin: 0;
 23 |   height: 100%;
 24 | }
 25 | 
 26 | body {
 27 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
 28 |     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 29 |   background-color: #f8eceb;
 30 |   color: #252523;
 31 | }
 32 | 
 33 | .header {
 34 |   display: flex;
 35 |   width: 95%;
 36 |   justify-content: space-between;
 37 |   position: fixed;
 38 |   left: 0;
 39 |   right: 0;
 40 |   margin: 0 auto;
 41 |   align-items: center;
 42 |   text-transform: lowercase;
 43 |   top: 20px;
 44 | }
 45 | 
 46 | .header .header__list {
 47 |   margin: 0;
 48 |   padding: 0;
 49 |   list-style: none;
 50 |   display: grid;
 51 |   grid-template-columns: repeat(auto-fill, minmax(min-content, 1fr));
 52 |   grid-auto-flow: column;
 53 |   grid-gap: 20px;
 54 |   font-weight: 600;
 55 | }
 56 | 
 57 | .header .header__btns {
 58 |   display: flex;
 59 |   align-items: center;
 60 | }
 61 | 
 62 | .header__btns .header__btn:last-child {
 63 |   margin-left: 25px;
 64 | }
 65 | 
 66 | .header .header__btn {
 67 |   fill: var(--greyColor);
 68 |   text-transform: uppercase;
 69 | }
 70 | 
 71 | .header .header__btn:last-child {
 72 |   color: var(--greyColor);
 73 |   margin-left: 10px;
 74 |   font-weight: 600;
 75 | }
 76 | 
 77 | .main {
 78 |   display: grid;
 79 |   grid-template-columns: repeat(2, 1fr);
 80 | }
 81 | 
 82 | .main .main__photo {
 83 |   background-size: cover;
 84 |   background-position: center;
 85 |   background-image: url(https://picsum.photos/1000/1000/?random);
 86 | }
 87 | 
 88 | .main .main__content {
 89 |   position: relative;
 90 |   height: 100%;
 91 |   align-self: center;
 92 | }
 93 | 
 94 | .main__content .main__title {
 95 |   font-size: 90px;
 96 |   margin-top: 150px;
 97 |   margin-bottom: 250px;
 98 |   padding-left: 100px;
 99 | }
100 | 
101 | .main .main__pages {
102 |   padding-left: 100px;
103 | }
104 | 
105 | .main__pages .main__current-page {
106 |   font-size: 50px;
107 |   color: black;
108 |   font-weight: 600;
109 | }
110 | 
111 | .main__pages .main__total-pages {
112 |   color: var(--greyColor);
113 |   font-weight: 600;
114 |   font-size: 30px;
115 | }
116 | 
117 | .main__content .navigation {
118 |   width: 100%;
119 |   background-color: white;
120 |   position: absolute;
121 |   bottom: 0;
122 |   padding: 12.5px 25px;
123 |   display: flex;
124 |   align-items: center;
125 |   justify-content: space-between;
126 | }
127 | 
128 | .navigation .navigation__arrow {
129 |   font-size: 55px;
130 |   color: var(--greyColor);
131 | }
132 | 
133 | .navigation svg {
134 |   fill: var(--greyColor);
135 | }
136 | 
137 | .navigation .navigation__icon {
138 |   margin-right: 10px;
139 | }
140 | 
141 | .navigation .navigation__icon:last-child {
142 |   margin-right: 0;
143 | }
144 | 


--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
 1 | /* 
 2 | 
 3 | Matches
 4 | 
 5 | li:matches(:nth-child(even), .target) {
 6 |   background-color: blue;
 7 | }
 8 | 
 9 | Not
10 | 
11 | li:not(.target) {
12 |   background-color: blue;
13 | }
14 | 
15 | 
16 | CSS Variables
17 | 
18 | :root {
19 |   --awesomeColor: 1px solid red;
20 | }
21 | 
22 | li:first-child a {
23 |   border: var(--awesomeColor);
24 | }
25 | 
26 | Custom Selectors
27 | 
28 | @custom-selector :--headers h1, h2, h3, h4, h5, h6;
29 | 
30 | :--headers {
31 |   color: #8e44ad;
32 | }
33 | 
34 | 
35 | Custom Media & Media Query Ranges
36 | 
37 | @custom-media --ipad-size (max-width: 850px);
38 | @custom-media --ipad-size (450px <= width < 850px);
39 | 
40 | @media (--ipad-size) {
41 |   body {
42 |     background-color: red;
43 |   }
44 | }
45 | 
46 | System UI
47 | 
48 | h1 {
49 |   color: system-ui;
50 | }
51 | 
52 | Gray
53 | 
54 | h1 {
55 |   color: gray(10);
56 | }
57 | 
58 | Color Mod
59 | 
60 | h1 {
61 |   color: color-mod(#f1c40f alpha(50%));
62 | }
63 | 
64 | */
65 | 
66 | main {
67 |   background-color: blue;
68 |   & section {
69 |     background-color: red;
70 |     width: 500px;
71 |     & li {
72 |       background-color: yellow;
73 |       width: 400px;
74 |       & a {
75 |         color: black;
76 |         &:hover {
77 |           font-size: 30px;
78 |         }
79 |       }
80 |     }
81 |   }
82 | }
83 | 
84 | a {
85 |   color: red;
86 | }
87 | 


--------------------------------------------------------------------------------