├── .gitignore ├── 1-selectors ├── 01-picasso │ ├── index.html │ └── styles.css ├── 02-syntax │ ├── index.html │ └── styles.css ├── 03-selectors-1 │ ├── index.html │ └── styles.css ├── 04-selectors-2 │ ├── index.html │ └── styles.css └── 05-concert-flyer │ ├── index.html │ └── styles.css ├── 2-properties ├── 06-rainbow │ ├── index.html │ └── styles.css ├── 07-measurements │ ├── index.html │ └── styles.css ├── 08-five-families │ ├── index.html │ └── styles.css ├── 09-spellcheck │ ├── index.html │ └── styles.css ├── 10-wallpaper │ ├── index.html │ └── styles.css ├── 11-shorthands │ ├── index.html │ └── styles.css └── 12-invitation │ ├── index.html │ └── styles.css ├── 3-box-model ├── 14-profile-status │ ├── index.html │ └── styles.css ├── 15-wiggle-room │ ├── index.html │ └── styles.css ├── 16-spaced-out │ ├── index.html │ └── styles.css ├── 17-make-it-count │ ├── index.html │ └── styles.css └── 18-local-library │ ├── index.html │ └── styles.css ├── 4-layout ├── 19-lines-and-blocks │ ├── index.html │ └── styles.css ├── 20-go-with-the-flow │ ├── index.html │ └── styles.css ├── 21-its-all-relative │ ├── index.html │ └── styles.css ├── 22-absolute-removal │ ├── index.html │ └── styles.css ├── 23-fixed-banner │ ├── index.html │ └── styles.css ├── 24-sticky-elements │ ├── index.html │ └── styles.css └── 25-art-gallery │ ├── images │ ├── avant-garde-painting.png │ ├── dippy-the-dinosaur.png │ ├── ghibli-museum.png │ ├── greek-sculpture.png │ ├── mondrian-composition-with-rby.png │ ├── morning-at-montrose.png │ ├── picture-frame.png │ └── winged-victory-of-samothrace.png │ ├── solution │ ├── index.html │ └── styles.css │ └── starter │ ├── index.html │ └── styles.css ├── LICENSE └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | 3 | # Other files and folders 4 | .settings/ 5 | 6 | # Executables 7 | *.swf 8 | *.air 9 | *.ipa 10 | *.apk 11 | 12 | # Project files, i.e. `.project`, `.actionScriptProperties` and `.flexProperties` 13 | # should NOT be excluded as they contain compiler settings and other important 14 | # information for Eclipse / Flash Builder. -------------------------------------------------------------------------------- /1-selectors/01-picasso/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Mineo's Pizza House 9 | 10 | 11 |
12 |
13 |

Mineo's Pizza House

14 |
15 |
16 |
17 | A small, 8-cut pepperoni pizza. 18 |
19 |
20 | 23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /1-selectors/01-picasso/styles.css: -------------------------------------------------------------------------------- 1 | /* Picasso 🖌️ */ 2 | /* Codédex */ 3 | 4 | body { 5 | font-family: "Chalkduster", fantasy; 6 | width: 100%; 7 | height: 100vh; 8 | position: absolute; 9 | text-align: center; 10 | } 11 | 12 | main { 13 | background-color: tomato; 14 | width: 70%; 15 | margin: auto; 16 | position: relative; 17 | border-radius: 5px; 18 | margin-top: 50px; 19 | } 20 | 21 | #hero-copy { 22 | padding: 5px; 23 | } 24 | 25 | #hero-img > figure > img { 26 | width: 70%; 27 | border-radius: 10px; 28 | } 29 | 30 | footer { 31 | background-color: lightgreen; 32 | height: 100px; 33 | } 34 | 35 | footer > p { 36 | padding: 37px; 37 | } 38 | -------------------------------------------------------------------------------- /1-selectors/02-syntax/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Commentary 9 | 10 | 11 |

Malcolm in the Middle

12 | 13 | 14 | -------------------------------------------------------------------------------- /1-selectors/02-syntax/styles.css: -------------------------------------------------------------------------------- 1 | /* Syntax 🧱 */ 2 | /* Codédex */ 3 | 4 | p { 5 | color: red; 6 | font-size: 25px; 7 | } -------------------------------------------------------------------------------- /1-selectors/03-selectors-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Selectors 9 | 10 | 11 |
12 |

Roses are red.

13 |

Violets are blue.

14 |

Sugar is sweet.

15 |

And so are you!

16 |
17 | 18 | -------------------------------------------------------------------------------- /1-selectors/03-selectors-1/styles.css: -------------------------------------------------------------------------------- 1 | /* Selectors Pt. 1 👇 */ 2 | /* Codédex */ 3 | 4 | div { 5 | border: 1px solid; 6 | text-align: center; 7 | } 8 | 9 | .line { 10 | width: 50%; 11 | margin: auto; 12 | padding: 10px 0; 13 | text-decoration: underline; 14 | } 15 | 16 | #roses { 17 | background-color: red; 18 | } 19 | 20 | #violets { 21 | background-color: violet; 22 | } 23 | 24 | #sugar { 25 | background-color: beige; 26 | } 27 | -------------------------------------------------------------------------------- /1-selectors/04-selectors-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 |

Continents 🗺️

12 | 21 | 22 |

Oceans By Size 🌊

23 |
    24 |
  1. Pacific
  2. 25 |
  3. Atlantic
  4. 26 |
  5. Indian
  6. 27 |
  7. Antarctic/Southern
  8. 28 |
  9. Arctic
  10. 29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /1-selectors/04-selectors-2/styles.css: -------------------------------------------------------------------------------- 1 | /* Selectors Pt. 2 👪 */ 2 | /* Codédex */ 3 | 4 | ul, ol { 5 | border: 1px solid; 6 | width: 200px; 7 | } 8 | 9 | ul { 10 | background-color: lightgreen; 11 | } 12 | 13 | ol { 14 | background-color: skyblue; 15 | color: white; 16 | } 17 | 18 | ul > li { 19 | text-decoration: underline wavy 3px brown; 20 | 21 | /* For Safari */ 22 | text-decoration-line: underline; 23 | text-decoration-style: wavy; 24 | text-decoration-color: brown; 25 | text-decoration-thickness: 3px; 26 | } 27 | 28 | ol > li { 29 | text-decoration: underline dotted 3px indigo; 30 | 31 | /* For Safari */ 32 | text-decoration-line: underline; 33 | text-decoration-style: dotted; 34 | text-decoration-color: indigo; 35 | text-decoration-thickness: 3px; 36 | } 37 | -------------------------------------------------------------------------------- /1-selectors/05-concert-flyer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Musicodes NYC 9 | 10 | 11 |
12 |
13 | New York City Skyline 14 |

Musicodes NYC

15 |
16 |
17 |

Brandon & the Banshees

18 |

Act one · Act two

19 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut aliquam ligula. Pellentesque ac maximus leo. Nam quis sodales mi. Donec eleifend fermentum posuere. Vestibulum nibh enim, vulputate id ipsum tristique, accumsan bibendum purus. Etiam lacinia, arcu in interdum semper, nulla erat tincidunt diam, ut sollicitudin ante felis sit amet justo. Nunc vel mauris egestas, interdum nunc eu, consectetur ex. Mauris blandit lacus nec volutpat fringilla. Praesent erat orci, tincidunt in lectus sed, posuere sodales ante. Integer ut massa ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam efficitur ultrices consequat. Nullam tempus ultrices enim, in tempus ex dapibus rhoncus.

20 |
21 |
22 |

Lil' Prank

23 |

Act one · Act two

24 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut aliquam ligula. Pellentesque ac maximus leo. Nam quis sodales mi. Donec eleifend fermentum posuere. Vestibulum nibh enim, vulputate id ipsum tristique, accumsan bibendum purus. Etiam lacinia, arcu in interdum semper, nulla erat tincidunt diam, ut sollicitudin ante felis sit amet justo. Nunc vel mauris egestas, interdum nunc eu, consectetur ex. Mauris blandit lacus nec volutpat fringilla. Praesent erat orci, tincidunt in lectus sed, posuere sodales ante. Integer ut massa ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam efficitur ultrices consequat. Nullam tempus ultrices enim, in tempus ex dapibus rhoncus.

25 |
26 |
27 | 31 | 32 | -------------------------------------------------------------------------------- /1-selectors/05-concert-flyer/styles.css: -------------------------------------------------------------------------------- 1 | /* Concert Flyer 🎶 */ 2 | /* Codédex */ 3 | 4 | body { 5 | background: linear-gradient(skyblue, green); 6 | margin: 0; 7 | padding: 0; 8 | min-height: 100vh; 9 | width: 100%; 10 | } 11 | 12 | main, header, footer { 13 | width: 70%; 14 | margin: auto; 15 | } 16 | 17 | header, footer { 18 | text-align: center; 19 | } 20 | 21 | header > img { 22 | display: block; 23 | width: 50%; 24 | margin: auto; 25 | } 26 | 27 | #night-2 { 28 | text-align: right; 29 | } -------------------------------------------------------------------------------- /2-properties/06-rainbow/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Rainbow 6 | 7 | 8 |

Top Three Colors of the Rainbow

9 |

Green

10 |

Purple

11 |

Orange

12 | 13 | -------------------------------------------------------------------------------- /2-properties/06-rainbow/styles.css: -------------------------------------------------------------------------------- 1 | #first-color { 2 | color: green; 3 | } 4 | 5 | #second-color { 6 | color: rgb(128, 0, 128); 7 | } 8 | 9 | #third-color { 10 | color: #ffa500; 11 | } -------------------------------------------------------------------------------- /2-properties/07-measurements/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Measurements 6 | 7 | 8 |

Absolute Units

9 | Soccer Ball 10 |

Relative Units

11 | Soccer Ball 12 | 13 | -------------------------------------------------------------------------------- /2-properties/07-measurements/styles.css: -------------------------------------------------------------------------------- 1 | #absolute { 2 | width: 100px; 3 | } 4 | 5 | #relative { 6 | width: 50%; 7 | } -------------------------------------------------------------------------------- /2-properties/08-five-families/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Five Families 6 | 7 | 8 |

9 | 10 |

11 | 12 | -------------------------------------------------------------------------------- /2-properties/08-five-families/styles.css: -------------------------------------------------------------------------------- 1 | p { 2 | font-family: Arial, Helvetica, sans-serif; 3 | font-size: 4em; 4 | font-weight: 700; 5 | } 6 | -------------------------------------------------------------------------------- /2-properties/09-spellcheck/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Spellcheck 6 | 7 | 8 |

The quick brwn fox jumped overthe lazy dogs.

9 | 10 | -------------------------------------------------------------------------------- /2-properties/09-spellcheck/styles.css: -------------------------------------------------------------------------------- 1 | h4 { 2 | text-align: center; 3 | } 4 | 5 | span { 6 | text-decoration: underline wavy red 2px; 7 | } -------------------------------------------------------------------------------- /2-properties/10-wallpaper/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Wallpaper 6 | 7 | 8 |
9 |
10 | 11 |
12 |
13 | 14 | -------------------------------------------------------------------------------- /2-properties/10-wallpaper/styles.css: -------------------------------------------------------------------------------- 1 | #outer { 2 | width: 500px; 3 | height: 500px; 4 | background-color: green; 5 | } 6 | 7 | #inner { 8 | width: 400px; 9 | height: 400px; 10 | background-image: url('https://cdn.pixabay.com/photo/2017/08/14/20/45/ring-tailed-lemur-2641910_1280.jpg'); 11 | } -------------------------------------------------------------------------------- /2-properties/11-shorthands/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Shorthands 6 | 7 | 8 |

Favorite Song

9 |

10 | 11 | 12 | -------------------------------------------------------------------------------- /2-properties/11-shorthands/styles.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | border: 2px solid blue; 3 | } 4 | 5 | p { 6 | font: 800 12px Georgia, serif; 7 | } -------------------------------------------------------------------------------- /2-properties/12-invitation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Invitation 6 | 7 | 8 |
9 |

You're Invited!

10 |
11 |

12 | Come join us for a night of fun, laughter, and good company at the most exciting party of the year! We're thrilled to invite you to our exclusive soirée, where you'll rub shoulders with the city's most interesting and influential personalities. 13 |

14 |

15 | Expect an unforgettable night filled with live music, delicious drinks, and mouthwatering hors d'oeuvres. The dress code is cocktail attire, so put on your most stylish outfit and get ready to mix and mingle with some of the brightest minds and biggest hearts around. 16 |

17 |

18 | We can't wait to see you there! 19 |

20 |
21 |

22 | Date:
23 | Time:
24 | Location:
25 | RSVP by to let us know you'll be joining! 26 |

27 |

28 | Sincerely, 29 |

30 | 31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /2-properties/12-invitation/styles.css: -------------------------------------------------------------------------------- 1 | #invite-wrapper { 2 | width: 25%; 3 | padding: 25px; 4 | background: violet; 5 | color: #fff; 6 | } 7 | 8 | h1 { 9 | font-family: 'Lobster', cursive; 10 | text-align: center; 11 | } 12 | 13 | #invite-text { 14 | width: 80%; 15 | } 16 | 17 | #itinerary { 18 | text-align: center; 19 | } -------------------------------------------------------------------------------- /3-box-model/14-profile-status/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 7 | 23 |
24 | -------------------------------------------------------------------------------- /3-box-model/14-profile-status/styles.css: -------------------------------------------------------------------------------- 1 | /* Profile Status 👤 */ 2 | /* Codédex */ 3 | 4 | * { 5 | font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 6 | } 7 | 8 | div { 9 | border: 2px solid grey; 10 | } 11 | 12 | #post-list > li { 13 | list-style-type: none; 14 | } 15 | 16 | li > div { 17 | text-align: left; 18 | } 19 | 20 | #top-img { 21 | width: 10em; 22 | height: 10em; 23 | border: 12px solid green; 24 | border-radius: 50%; 25 | } 26 | 27 | #outside-wrapper { 28 | width: 90%; 29 | background-color: rgb(169, 206, 221); 30 | text-align: center; 31 | } 32 | 33 | .post-wrapper { 34 | text-align: left; 35 | background-color: #f5f5f5; 36 | border-radius: 5px; 37 | } 38 | 39 | .post-img { 40 | width: 100%; 41 | border-radius: 5px; 42 | } -------------------------------------------------------------------------------- /3-box-model/15-wiggle-room/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 7 | 22 |
23 | -------------------------------------------------------------------------------- /3-box-model/15-wiggle-room/styles.css: -------------------------------------------------------------------------------- 1 | /* Wiggle Room 🔲 */ 2 | /* Codédex */ 3 | 4 | * { 5 | font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 6 | } 7 | 8 | div { 9 | border: 2px solid grey; 10 | } 11 | 12 | #post-list { 13 | padding-right: 40px; 14 | } 15 | 16 | #post-list > li { 17 | list-style-type: none; 18 | } 19 | 20 | li > div { 21 | text-align: left; 22 | } 23 | 24 | #top-img { 25 | width: 10em; 26 | height: 10em; 27 | border: 12px solid green; 28 | border-radius: 50%; 29 | } 30 | 31 | #outside-wrapper { 32 | width: 90%; 33 | background-color: rgb(169, 206, 221); 34 | text-align: center; 35 | } 36 | 37 | .post-wrapper { 38 | text-align: left; 39 | background-color: #f5f5f5; 40 | border-radius: 5px; 41 | padding: 50px 50px 0 50px; 42 | } 43 | 44 | .post-img { 45 | width: 100%; 46 | border-radius: 5px; 47 | } -------------------------------------------------------------------------------- /3-box-model/16-spaced-out/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 7 | 22 |
23 | -------------------------------------------------------------------------------- /3-box-model/16-spaced-out/styles.css: -------------------------------------------------------------------------------- 1 | /* Spaced Out 🛰️ */ 2 | /* Codédex */ 3 | 4 | * { 5 | font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 6 | } 7 | 8 | div { 9 | border: 2px solid grey; 10 | } 11 | 12 | #post-list { 13 | padding-right: 40px; 14 | } 15 | 16 | #post-list > li { 17 | list-style-type: none; 18 | } 19 | 20 | li > div { 21 | text-align: left; 22 | } 23 | 24 | #top-img { 25 | width: 10em; 26 | height: 10em; 27 | border: 12px solid green; 28 | border-radius: 50%; 29 | } 30 | 31 | #outside-wrapper { 32 | width: 90%; 33 | background-color: rgb(169, 206, 221); 34 | text-align: center; 35 | margin: auto; 36 | } 37 | 38 | .post-wrapper { 39 | text-align: left; 40 | background-color: #f5f5f5; 41 | border-radius: 5px; 42 | padding: 50px 50px 0 50px; 43 | margin-top: 15px; 44 | margin-bottom: 15px; 45 | } 46 | 47 | .post-img { 48 | width: 100%; 49 | border-radius: 5px; 50 | } 51 | -------------------------------------------------------------------------------- /3-box-model/17-make-it-count/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 7 | 22 |
23 | -------------------------------------------------------------------------------- /3-box-model/17-make-it-count/styles.css: -------------------------------------------------------------------------------- 1 | /* Make It Count 2 📐 */ 2 | /* Codédex */ 3 | 4 | * { 5 | font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | div { 12 | border: 2px solid grey; 13 | } 14 | 15 | #post-list { 16 | padding-right: 40px; 17 | padding-left: 40px; 18 | } 19 | 20 | #post-list > li { 21 | list-style-type: none; 22 | } 23 | 24 | li > div { 25 | text-align: left; 26 | } 27 | 28 | #top-img { 29 | width: 10em; 30 | height: 10em; 31 | border: 12px solid green; 32 | border-radius: 50%; 33 | } 34 | 35 | #outside-wrapper { 36 | width: 90%; 37 | background-color: rgb(169, 206, 221); 38 | text-align: center; 39 | margin: auto; 40 | } 41 | 42 | .post-wrapper { 43 | text-align: left; 44 | background-color: #f5f5f5; 45 | border-radius: 5px; 46 | padding: 50px 50px 0 50px; 47 | margin-top: 15px; 48 | margin-bottom: 15px; 49 | } 50 | 51 | .post-img { 52 | width: 100%; 53 | border-radius: 5px; 54 | } 55 | -------------------------------------------------------------------------------- /3-box-model/18-local-library/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Library 9 | 10 | 11 |
12 |
13 | 19 |
20 |
21 |

22 | Guided by our dedication to literacy and learning and patron-focused services and programs, the Library is a fun space for using information and technology to build knowledge and foster community, social connection. 23 |

24 |
25 |
26 |
27 | 28 | 29 |
30 |
31 |
32 |

Staff Picks

33 |
34 | The Outsiders by S.E. Hinton 35 | Shoe Dog by Phil Knight 36 | Make: Getting Started with p5.js by Lauren McCarthy, Casey Reas, & Ben Fry 37 |
38 |
39 | The Courage to be Happy by Ichiro Kishimi & Fumitake Koga 40 | The Hobbit by J.R.R. Tolkien 41 | Ripley's Believe It or Not! 42 |
43 |
44 |
45 | 46 | 47 | -------------------------------------------------------------------------------- /3-box-model/18-local-library/styles.css: -------------------------------------------------------------------------------- 1 | /* Local Library 💳 */ 2 | /* Codédex */ 3 | 4 | * { 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | } 9 | 10 | body { 11 | width: 100%; 12 | font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 13 | text-align: center; 14 | } 15 | 16 | header { 17 | background-image: url('https://cdn.pixabay.com/photo/2020/07/23/01/29/books-5430104_1280.jpg'); 18 | background-size: cover; 19 | background-repeat: no-repeat; 20 | height: 200px; 21 | } 22 | 23 | h1 { 24 | margin: 10px 0; 25 | } 26 | 27 | .nav-item { 28 | width: 33%; 29 | display: inline-block; 30 | border: 3px solid purple; 31 | border-radius: 5px; 32 | padding: 5px; 33 | margin: 10px; 34 | } 35 | 36 | main { 37 | margin-top: 20px; 38 | } 39 | 40 | section { 41 | margin-top: 10px; 42 | margin-bottom: 10px; 43 | } 44 | 45 | #welcome > p { 46 | text-align: center; 47 | margin: 0 5em; 48 | } 49 | 50 | #catalog-input, #form-btn { 51 | text-align: center; 52 | font-size: 1.25rem; 53 | font-weight: 800; 54 | padding: 8px; 55 | } 56 | 57 | #catalog-input { 58 | border: 2px solid black; 59 | width: 37.5%; 60 | } 61 | 62 | #staff-picks { 63 | text-align: center; 64 | } 65 | 66 | .staff-pick-img { 67 | border: 1px solid black; 68 | border-radius: 0 7px 7px 0; 69 | width: 10em; 70 | height: 15em; 71 | } 72 | 73 | -------------------------------------------------------------------------------- /4-layout/19-lines-and-blocks/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Lines & Blocks 7 | 8 | 9 | 10 |
11 |

Rendezvous Tutoring

12 |

Top-notch 1:1 Instructors!

13 | 20 |
21 |
22 |
23 |

Our Story

24 |

For over 15 years, we have provided an impactful, results-focused tutoring experience to all of our pupils!

25 |

It all started as homework-help between two friends at the library. One friend needed the other's help with algebra and how they could apply it in everyday life.

26 | An image of someone growing success in tutoring 27 |
28 |
29 |

Services

30 |

We offer a multitude of tutoring services across many platforms, including:

31 | 36 |
37 | 46 |
47 | 48 | 49 | -------------------------------------------------------------------------------- /4-layout/19-lines-and-blocks/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: Lato, sans-serif; 3 | box-sizing: border-box; 4 | padding: 0; 5 | margin: 0; 6 | } 7 | 8 | header { 9 | background-color:#492b7c; 10 | color: #fff; 11 | border-bottom: 2px solid #313131; 12 | } 13 | 14 | header, h2 { 15 | text-align: center; 16 | } 17 | 18 | nav > ul { 19 | margin: 5px 0; 20 | } 21 | 22 | nav li { 23 | background-color: #c2c2ff; 24 | padding: 7px; 25 | margin: 1em auto; 26 | width: 25%; 27 | border: 2px solid; 28 | border-radius: 5px; 29 | list-style-type: none; 30 | display: inline-block; 31 | } 32 | 33 | section { 34 | min-height: 100vh; 35 | } 36 | 37 | footer > p { 38 | width: 80%; 39 | margin: auto; 40 | } 41 | 42 | section > h2 { 43 | border-bottom: 0.5px solid grey; 44 | } 45 | 46 | #story-section { 47 | background-color: #fffbc4; 48 | } 49 | 50 | #story-section > h2 { 51 | background-color: #c2ffff; 52 | } 53 | 54 | #story-image { 55 | max-width: 100%; 56 | max-height: 250px; 57 | border-radius: 5px; 58 | display: block; 59 | margin: auto; 60 | } 61 | 62 | #services-section > h2 { 63 | background-color: #88b3b3; 64 | } 65 | 66 | #services-section > ul { 67 | list-style-position: inside; 68 | } 69 | 70 | #contact-section { 71 | background-color: #492b7c; 72 | color: #fff; 73 | } 74 | 75 | form { 76 | width: max-content; 77 | margin: auto; 78 | } -------------------------------------------------------------------------------- /4-layout/20-go-with-the-flow/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Lines & Blocks 7 | 8 | 9 | 10 |
11 |

Rendezvous Tutoring

12 |

Top-notch 1:1 Instructors!

13 | 20 |
21 |
22 |
23 |
24 | New Course Offering!🎥📓 25 |

We've got a new 6-week course on video editing where you get to meet one-on-one with an industry professional each week! Join here!

26 |
27 |
28 |
29 |

Our Story

30 |

For over 15 years, we have provided an impactful, results-focused tutoring experience to all of our pupils!

31 |

It all started as homework-help between two friends at the library. One friend needed the other's help with algebra and how they could apply it in everyday life.

32 | 33 |
34 |
35 |

Services

36 |

We offer a multitude of tutoring services across many platforms, including:

37 | 42 |
43 | 51 |
52 | 53 | -------------------------------------------------------------------------------- /4-layout/20-go-with-the-flow/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: Lato, sans-serif; 3 | box-sizing: border-box; 4 | padding: 0; 5 | margin: 0; 6 | } 7 | 8 | header { 9 | background-color:#492b7c; 10 | color: #fff; 11 | border-bottom: 2px solid #313131; 12 | } 13 | 14 | header, h2 { 15 | text-align: center; 16 | } 17 | 18 | nav > ul { 19 | margin: 5px 0; 20 | } 21 | 22 | nav li { 23 | background-color: #c2c2ff; 24 | padding: 7px; 25 | margin: 1em auto; 26 | width: 25%; 27 | border: 2px solid; 28 | border-radius: 5px; 29 | list-style-type: none; 30 | display: inline-block; 31 | } 32 | 33 | section { 34 | min-height: 100vh; 35 | } 36 | 37 | footer > p { 38 | width: 80%; 39 | margin: auto; 40 | } 41 | 42 | section > h2 { 43 | border-bottom: 0.5px solid grey; 44 | } 45 | 46 | #story-section { 47 | background-color: #fffbc4; 48 | } 49 | 50 | #story-section > h2 { 51 | background-color: #c2ffff; 52 | } 53 | 54 | #story-image { 55 | max-width: 100%; 56 | max-height: 250px; 57 | border-radius: 5px; 58 | display: block; 59 | margin: auto; 60 | } 61 | 62 | #services-section > h2 { 63 | background-color: #88b3b3; 64 | } 65 | 66 | #services-section > ul { 67 | list-style-position: inside; 68 | } 69 | 70 | #contact-section { 71 | background-color: #492b7c; 72 | color: #fff; 73 | } 74 | 75 | form { 76 | width: max-content; 77 | margin: auto; 78 | } 79 | 80 | #notification-div { 81 | background-color: #ed8a0a; 82 | color: #313131; 83 | padding: 5px; 84 | border: 2px solid darkred; 85 | border-radius: 5px; 86 | width: 25%; 87 | } -------------------------------------------------------------------------------- /4-layout/21-its-all-relative/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Lines & Blocks 7 | 8 | 9 | 10 |
11 |

Rendezvous Tutoring

12 |

Top-notch 1:1 Instructors!

13 | 20 |
21 |
22 |
23 |

Our Story

24 |

For over 15 years, we have provided an impactful, results-focused tutoring experience to all of our pupils!

25 |

It all started as homework-help between two friends at the library. One friend needed the other's help with algebra and how they could apply it in everyday life.

26 | 27 |
28 |
29 |

Services

30 |
31 |
32 | New Course Offering!🎥📓 33 |

We've got a new 6-week course on video editing where you get to meet one-on-one with an industry professional each week! Join here!

34 |
35 |
36 |

We offer a multitude of tutoring services across many platforms, including:

37 | 42 |
43 | 51 |
52 | 53 | -------------------------------------------------------------------------------- /4-layout/21-its-all-relative/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: Lato, sans-serif; 3 | box-sizing: border-box; 4 | padding: 0; 5 | margin: 0; 6 | } 7 | 8 | header { 9 | background-color:#492b7c; 10 | color: #fff; 11 | border-bottom: 2px solid #313131; 12 | } 13 | 14 | header, h2 { 15 | text-align: center; 16 | } 17 | 18 | nav > ul { 19 | margin: 5px 0; 20 | } 21 | 22 | nav li { 23 | background-color: #c2c2ff; 24 | padding: 7px; 25 | margin: 1em auto; 26 | width: 25%; 27 | border: 2px solid; 28 | border-radius: 5px; 29 | list-style-type: none; 30 | display: inline-block; 31 | } 32 | 33 | section { 34 | min-height: 100vh; 35 | } 36 | 37 | footer > p { 38 | width: 80%; 39 | margin: auto; 40 | } 41 | 42 | section > h2 { 43 | border-bottom: 0.5px solid grey; 44 | } 45 | 46 | #story-section { 47 | background-color: #fffbc4; 48 | } 49 | 50 | #story-section > h2 { 51 | background-color: #c2ffff; 52 | } 53 | 54 | #story-image { 55 | max-width: 100%; 56 | max-height: 250px; 57 | border-radius: 5px; 58 | display: block; 59 | margin: auto; 60 | } 61 | 62 | #services-section > h2 { 63 | background-color: #88b3b3; 64 | } 65 | 66 | #services-section > ul { 67 | list-style-position: inside; 68 | } 69 | 70 | #contact-section { 71 | background-color: #492b7c; 72 | color: #fff; 73 | } 74 | 75 | form { 76 | width: max-content; 77 | margin: auto; 78 | } 79 | 80 | #notification-div { 81 | background-color: #ed8a0a; 82 | color: #313131; 83 | padding: 5px; 84 | border: 2px solid darkred; 85 | border-radius: 5px; 86 | width: 25%; 87 | position: relative; 88 | top: 10px; 89 | left: 5%; 90 | } -------------------------------------------------------------------------------- /4-layout/22-absolute-removal/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Lines & Blocks 7 | 8 | 9 | 10 |
11 |

Rendezvous Tutoring

12 |

Top-notch 1:1 Instructors!

13 | 20 |
21 |
22 |
23 |
24 | New Course Offering!🎥📓 25 |

We've got a new 6-week course on video editing where you get to meet one-on-one with an industry professional each week! Join here!

26 |
27 |
28 |
29 |

Our Story

30 |

For over 15 years, we have provided an impactful, results-focused tutoring experience to all of our pupils!

31 |

It all started as homework-help between two friends at the library. One friend needed the other's help with algebra and how they could apply it in everyday life.

32 | 33 |
34 |
35 |

Services

36 |

We offer a multitude of tutoring services across many platforms, including:

37 | 42 |
43 | 51 |
52 | 53 | -------------------------------------------------------------------------------- /4-layout/22-absolute-removal/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: Lato, sans-serif; 3 | box-sizing: border-box; 4 | padding: 0; 5 | margin: 0; 6 | } 7 | 8 | header { 9 | background-color:#492b7c; 10 | color: #fff; 11 | border-bottom: 2px solid #313131; 12 | position: absolute; 13 | width: 100%; 14 | } 15 | 16 | header, h2 { 17 | text-align: center; 18 | } 19 | 20 | nav > ul { 21 | margin: 5px 0; 22 | } 23 | 24 | nav li { 25 | background-color: #c2c2ff; 26 | padding: 7px; 27 | margin: 1em auto; 28 | width: 25%; 29 | border: 2px solid; 30 | border-radius: 5px; 31 | list-style-type: none; 32 | display: inline-block; 33 | } 34 | 35 | main { 36 | position: relative; 37 | top: 133px; 38 | } 39 | 40 | section { 41 | min-height: 100vh; 42 | } 43 | 44 | footer > p { 45 | width: 80%; 46 | margin: auto; 47 | } 48 | 49 | section > h2 { 50 | border-bottom: 0.5px solid grey; 51 | } 52 | 53 | #story-section { 54 | background-color: #fffbc4; 55 | } 56 | 57 | #story-section > h2 { 58 | background-color: #c2ffff; 59 | } 60 | 61 | #story-image { 62 | max-width: 100%; 63 | max-height: 250px; 64 | border-radius: 5px; 65 | display: block; 66 | margin: auto; 67 | } 68 | 69 | #services-section > h2 { 70 | background-color: #88b3b3; 71 | } 72 | 73 | #services-section > ul { 74 | list-style-position: inside; 75 | } 76 | 77 | #contact-section { 78 | background-color: #492b7c; 79 | color: #fff; 80 | } 81 | 82 | form { 83 | width: max-content; 84 | margin: auto; 85 | } 86 | 87 | #notification-div { 88 | background-color: #ed8a0a; 89 | color: #313131; 90 | padding: 5px; 91 | border: 2px solid darkred; 92 | border-radius: 5px; 93 | width: 25%; 94 | position: absolute; 95 | top: 10px; 96 | left: 5%; 97 | } 98 | -------------------------------------------------------------------------------- /4-layout/23-fixed-banner/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Lines & Blocks 7 | 8 | 9 | 10 |
11 |

Rendezvous Tutoring

12 |

Top-notch 1:1 Instructors!

13 | 20 |
21 |
22 |
23 |
24 | New Course Offering!🎥📓 25 |

We've got a new 6-week course on video editing where you get to meet one-on-one with an industry professional each week! Join here!

26 |
27 |
28 |
29 |

Our Story

30 |

For over 15 years, we have provided an impactful, results-focused tutoring experience to all of our pupils!

31 |

It all started as homework-help between two friends at the library. One friend needed the other's help with algebra and how they could apply it in everyday life.

32 | 33 |
34 |
35 |

Services

36 |

We offer a multitude of tutoring services across many platforms, including:

37 | 42 |
43 | 51 |
52 | 53 | -------------------------------------------------------------------------------- /4-layout/23-fixed-banner/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: Lato, sans-serif; 3 | box-sizing: border-box; 4 | padding: 0; 5 | margin: 0; 6 | } 7 | 8 | header { 9 | background-color:#492b7c; 10 | color: #fff; 11 | border-bottom: 2px solid #313131; 12 | position: fixed; 13 | width: 100%; 14 | z-index: 1; 15 | } 16 | 17 | header, h2 { 18 | text-align: center; 19 | } 20 | 21 | nav > ul { 22 | margin: 5px 0; 23 | } 24 | 25 | nav li { 26 | background-color: #c2c2ff; 27 | padding: 7px; 28 | margin: 1em auto; 29 | width: 25%; 30 | border: 2px solid #000; 31 | border-radius: 5px; 32 | list-style-type: none; 33 | display: inline-block; 34 | } 35 | 36 | main { 37 | position: relative; 38 | top: 103px; 39 | } 40 | 41 | section { 42 | min-height: 100vh; 43 | } 44 | 45 | footer > p { 46 | width: 80%; 47 | margin: auto; 48 | } 49 | 50 | section > h2 { 51 | border-bottom: 0.5px solid grey; 52 | } 53 | 54 | #story-section { 55 | background-color: #fffbc4; 56 | } 57 | 58 | #story-section > h2 { 59 | background-color: #c2ffff; 60 | } 61 | 62 | #story-image { 63 | max-width: 100%; 64 | max-height: 250px; 65 | border-radius: 5px; 66 | display: block; 67 | margin: auto; 68 | } 69 | 70 | #services-section > h2 { 71 | background-color: #88b3b3; 72 | } 73 | 74 | #services-section > ul { 75 | list-style-position: inside; 76 | } 77 | 78 | #contact-section { 79 | background-color: #492b7c; 80 | color: #fff; 81 | } 82 | 83 | form { 84 | width: max-content; 85 | margin: auto; 86 | } 87 | 88 | #notification-div { 89 | background-color: #ed8a0a; 90 | color: #313131; 91 | padding: 5px; 92 | border: 2px solid darkred; 93 | border-radius: 5px; 94 | width: 25%; 95 | position: fixed; 96 | top: 100px; 97 | left: 15px; 98 | z-index: 1; 99 | } 100 | -------------------------------------------------------------------------------- /4-layout/24-sticky-elements/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Lines & Blocks 7 | 8 | 9 | 10 |
11 |

Rendezvous Tutoring

12 |

Top-notch 1:1 Instructors!

13 | 20 |
21 |
22 |
23 |
24 | New Course Offering!🎥📓 25 |

We've got a new 6-week course on video editing where you get to meet one-on-one with an industry professional each week! Join here!

26 |
27 |
28 |
29 |

Our Story

30 |

For over 15 years, we have provided an impactful, results-focused tutoring experience to all of our pupils!

31 |

It all started as homework-help between two friends at the library. One friend needed the other's help with algebra and how they could apply it in everyday life.

32 | 33 |
34 |
35 |

Services

36 |

We offer a multitude of tutoring services across many platforms, including:

37 | 42 |
43 | 51 |
52 | 53 | -------------------------------------------------------------------------------- /4-layout/24-sticky-elements/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: Lato, sans-serif; 3 | box-sizing: border-box; 4 | padding: 0; 5 | margin: 0; 6 | } 7 | 8 | header { 9 | background-color:#492b7c; 10 | color: #fff; 11 | border-bottom: 2px solid #313131; 12 | position: sticky; 13 | width: 100%; 14 | z-index: 1; 15 | top: 0; 16 | } 17 | 18 | header, h2 { 19 | text-align: center; 20 | } 21 | 22 | nav > ul { 23 | margin: 5px 0; 24 | } 25 | 26 | nav li { 27 | background-color: #c2c2ff; 28 | padding: 7px; 29 | margin: 1em auto; 30 | width: 25%; 31 | border: 2px solid; 32 | border-radius: 5px; 33 | list-style-type: none; 34 | display: inline-block; 35 | } 36 | 37 | /* main { 38 | position: relative; 39 | top: 103px; 40 | } */ 41 | 42 | section { 43 | min-height: 100vh; 44 | } 45 | 46 | footer > p { 47 | width: 80%; 48 | margin: auto; 49 | } 50 | 51 | section > h2 { 52 | border-bottom: 0.5px solid grey; 53 | position: sticky; 54 | top: 103px; 55 | } 56 | 57 | #story-section { 58 | background-color: #fffbc4; 59 | } 60 | 61 | #story-section > h2 { 62 | background-color: #c2ffff; 63 | } 64 | 65 | #story-image { 66 | max-width: 100%; 67 | max-height: 250px; 68 | border-radius: 5px; 69 | display: block; 70 | margin: auto; 71 | } 72 | 73 | #services-section > h2 { 74 | background-color: #88b3b3; 75 | } 76 | 77 | #services-section > ul { 78 | list-style-position: inside; 79 | } 80 | 81 | #contact-section { 82 | background-color: #492b7c; 83 | color: #fff; 84 | } 85 | 86 | form { 87 | width: max-content; 88 | margin: auto; 89 | } 90 | 91 | #notification-div { 92 | background-color: #ed8a0a; 93 | color: #313131; 94 | padding: 5px; 95 | border: 2px solid darkred; 96 | border-radius: 5px; 97 | width: 25%; 98 | position: fixed; 99 | top: 100px; 100 | left: 15px; 101 | z-index: 1; 102 | } -------------------------------------------------------------------------------- /4-layout/25-art-gallery/images/avant-garde-painting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedex-io/css-101/fe4e041e2624d107fdee95682ff9cf719a01378f/4-layout/25-art-gallery/images/avant-garde-painting.png -------------------------------------------------------------------------------- /4-layout/25-art-gallery/images/dippy-the-dinosaur.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedex-io/css-101/fe4e041e2624d107fdee95682ff9cf719a01378f/4-layout/25-art-gallery/images/dippy-the-dinosaur.png -------------------------------------------------------------------------------- /4-layout/25-art-gallery/images/ghibli-museum.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedex-io/css-101/fe4e041e2624d107fdee95682ff9cf719a01378f/4-layout/25-art-gallery/images/ghibli-museum.png -------------------------------------------------------------------------------- /4-layout/25-art-gallery/images/greek-sculpture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedex-io/css-101/fe4e041e2624d107fdee95682ff9cf719a01378f/4-layout/25-art-gallery/images/greek-sculpture.png -------------------------------------------------------------------------------- /4-layout/25-art-gallery/images/mondrian-composition-with-rby.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedex-io/css-101/fe4e041e2624d107fdee95682ff9cf719a01378f/4-layout/25-art-gallery/images/mondrian-composition-with-rby.png -------------------------------------------------------------------------------- /4-layout/25-art-gallery/images/morning-at-montrose.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedex-io/css-101/fe4e041e2624d107fdee95682ff9cf719a01378f/4-layout/25-art-gallery/images/morning-at-montrose.png -------------------------------------------------------------------------------- /4-layout/25-art-gallery/images/picture-frame.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedex-io/css-101/fe4e041e2624d107fdee95682ff9cf719a01378f/4-layout/25-art-gallery/images/picture-frame.png -------------------------------------------------------------------------------- /4-layout/25-art-gallery/images/winged-victory-of-samothrace.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedex-io/css-101/fe4e041e2624d107fdee95682ff9cf719a01378f/4-layout/25-art-gallery/images/winged-victory-of-samothrace.png -------------------------------------------------------------------------------- /4-layout/25-art-gallery/solution/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Museum Gallery 10 | 11 | 12 | 16 |
17 | 18 | 24 | 30 | 36 | 42 | 48 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /4-layout/25-art-gallery/solution/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | /* box-sizing: border-box; */ 5 | } 6 | 7 | body { 8 | font-family: Arial, Helvetica, sans-serif; 9 | position: relative; 10 | } 11 | 12 | img, .gallery-item > p { 13 | width: 100%; 14 | position: relative; 15 | z-index: 1; 16 | } 17 | 18 | hr { 19 | border: 0px solid; 20 | } 21 | 22 | h1 { 23 | position: fixed; 24 | z-index: 10; 25 | } 26 | 27 | #gallery-header > p { 28 | font-weight: 800; 29 | display: inline; 30 | } 31 | 32 | /* Add code here */ 33 | 34 | #gallery-container { 35 | display: inline-block; 36 | position: absolute; 37 | top: 10px; 38 | left: 50px; 39 | z-index: 10; 40 | } 41 | 42 | #item-1 { 43 | position: fixed; 44 | top: 50%; 45 | width: 50%; 46 | left: 50%; 47 | transform: translate(-50%, -50%); 48 | z-index: 10; 49 | } 50 | 51 | p { 52 | text-align: center; 53 | position: fixed; 54 | z-index: 10; 55 | top: 5%; 56 | left: 10%; 57 | display: inline-block; 58 | } 59 | 60 | #item-4 { 61 | position: sticky; 62 | top: 100px; 63 | } 64 | 65 | -------------------------------------------------------------------------------- /4-layout/25-art-gallery/starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Museum Gallery 10 | 11 | 12 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /4-layout/25-art-gallery/starter/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: Arial, Helvetica, sans-serif; 9 | } 10 | 11 | img, .gallery-item > p { 12 | width: 500px; 13 | } 14 | 15 | hr { 16 | border: 2px solid; 17 | } 18 | 19 | #gallery-header { 20 | padding-bottom: 6px; 21 | width: 80%; 22 | margin: auto; 23 | text-align: left; 24 | } 25 | 26 | #gallery-header > h1 { 27 | margin-left: 0; 28 | } 29 | 30 | #gallery-header > p { 31 | color: #5e96ff; 32 | font-weight: 800; 33 | } 34 | 35 | /* Add code here */ 36 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Codédex 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 |
3 |

The Origins II: CSS 🌈

4 | GitHub repo with beginner-friendly problems in CSS 5 |
6 |
7 | 8 | Welcome to The Origins II: CSS GitHub repo! We are super excited to have you. Here, you will find all the solutions to the Codédex challenges. 9 | 10 | 11 | ### Website: www.codedex.io/css 12 | 13 | ## Selectors 14 | 15 | - [`picasso`](https://github.com/codedex-io/css-101/tree/main/1-selectors/01-picasso) 16 | - [`syntax`](https://github.com/codedex-io/css-101/tree/main/1-selectors/02-syntax) 17 | - [`selectors-1`](https://github.com/codedex-io/css-101/tree/main/1-selectors/03-selectors-1) 18 | - [`selectors-2`](https://github.com/codedex-io/css-101/tree/main/1-selectors/04-selectors-2) 19 | - [`concert-flyer`](https://github.com/codedex-io/css-101/tree/main/1-selectors/05-concert-flyer) 20 | 21 | ## Properties 22 | 23 | - [`rainbow`](https://github.com/codedex-io/css-101/tree/main/2-properties/06-rainbow) 24 | - [`measurements`](https://github.com/codedex-io/css-101/tree/main/2-properties/07-measurements) 25 | - [`five-families`](https://github.com/codedex-io/css-101/tree/main/2-properties/08-five-families) 26 | - [`spellcheck`](https://github.com/codedex-io/css-101/tree/main/2-properties/09-spellcheck) 27 | - [`wallpaper`](https://github.com/codedex-io/css-101/tree/main/2-properties/10-wallpaper) 28 | - [`shorthands`](https://github.com/codedex-io/css-101/tree/main/2-properties/11-shorthands) 29 | - [`invitation`](https://github.com/codedex-io/css-101/tree/main/2-properties/12-invitation) 30 | 31 | ## Box Model 32 | 33 | - [`profile-status`](https://github.com/codedex-io/css-101/tree/main/3-box-model/14-profile-status) 34 | - [`wiggle-room`](https://github.com/codedex-io/css-101/tree/main/3-box-model/15-wiggle-room) 35 | - [`spaced-out`](https://github.com/codedex-io/css-101/tree/main/3-box-model/16-spaced-out) 36 | - [`make-it-count`](https://github.com/codedex-io/css-101/tree/main/3-box-model/17-make-it-count) 37 | - [`local-library`](https://github.com/codedex-io/css-101/tree/main/3-box-model/18-local-library) 38 | 39 | ## Layout 40 | 41 | - [`lines-and-blocks`](https://github.com/codedex-io/css-101/tree/main/4-layout/19-lines-and-blocks) 42 | - [`go-with-the-flow`](https://github.com/codedex-io/css-101/tree/main/4-layout/20-go-with-the-flow) 43 | - [`its-all-relative`](https://github.com/codedex-io/css-101/tree/main/4-layout/21-its-all-relative) 44 | - [`absolute-removal`](https://github.com/codedex-io/css-101/tree/main/4-layout/22-absolute-removal) 45 | - [`fixed-banner`](https://github.com/codedex-io/css-101/tree/main/4-layout/23-fixed-banner) 46 | - [`sticky-elements`](https://github.com/codedex-io/css-101/tree/main/4-layout/24-sticky-elements) 47 | - [`art-gallery`](https://github.com/codedex-io/css-101/tree/main/4-layout/25-art-gallery) 48 | --------------------------------------------------------------------------------