├── Basics ├── A Simple Card │ ├── After │ │ ├── assets │ │ │ ├── green-building.jpg │ │ │ └── shoutout.txt │ │ ├── css │ │ │ └── main.css │ │ └── index.html │ └── Starter │ │ ├── assets │ │ ├── green-building.jpg │ │ └── shoutout.txt │ │ ├── css │ │ └── main.css │ │ └── index.html ├── Absolute vs Relative Units │ ├── After │ │ ├── css │ │ │ └── main.css │ │ └── index.html │ └── Starter │ │ ├── css │ │ └── main.css │ │ └── index.html ├── Em vs Rem │ ├── After │ │ ├── css │ │ │ └── main.css │ │ └── index.html │ └── Starter │ │ ├── css │ │ └── main.css │ │ └── index.html └── Translating from Figma to CSS │ ├── After │ ├── css │ │ └── main.css │ └── index.html │ └── Starter │ ├── css │ └── main.css │ └── index.html ├── Bonus - UI Animations ├── After │ ├── assets │ │ ├── appstore.svg │ │ ├── googleplay.svg │ │ ├── graphic.svg │ │ ├── person.jpg │ │ ├── phone-new.svg │ │ └── phone.svg │ ├── css │ │ └── main.css │ └── index.html └── Before │ ├── .vscode │ └── settings.json │ ├── assets │ ├── appstore.svg │ ├── googleplay.svg │ ├── graphic.svg │ ├── person.jpg │ ├── phone-new.svg │ └── phone.svg │ ├── css │ └── main.css │ └── index.html ├── Flexbox Responsive ├── Food Gallery Responsive │ ├── After │ │ ├── .vscode │ │ │ └── settings.json │ │ ├── assets │ │ │ ├── credit.txt │ │ │ ├── food1.jpg │ │ │ ├── food2.jpg │ │ │ ├── food3.jpg │ │ │ └── food4.jpg │ │ ├── css │ │ │ └── main.css │ │ └── index.html │ └── Before │ │ ├── .vscode │ │ └── settings.json │ │ ├── assets │ │ ├── credit.txt │ │ ├── food1.jpg │ │ ├── food2.jpg │ │ ├── food3.jpg │ │ └── food4.jpg │ │ ├── css │ │ └── main.css │ │ └── index.html ├── Responsive Drum Module │ ├── After │ │ ├── .vscode │ │ │ └── settings.json │ │ ├── assets │ │ │ ├── credit.txt │ │ │ ├── drum1.jpg │ │ │ ├── drum2.jpg │ │ │ └── drum3.jpg │ │ ├── css │ │ │ └── main.css │ │ └── index.html │ └── Before │ │ ├── assets │ │ ├── credit.txt │ │ ├── drum1.jpg │ │ ├── drum2.jpg │ │ └── drum3.jpg │ │ ├── css │ │ └── main.css │ │ └── index.html ├── Responsive Navigation │ ├── After │ │ ├── assets │ │ │ ├── close.svg │ │ │ └── menu.svg │ │ ├── css │ │ │ └── main.css │ │ └── index.html │ └── Before │ │ ├── assets │ │ ├── close.svg │ │ └── menu.svg │ │ ├── css │ │ └── main.css │ │ └── index.html └── Responsive News Article │ ├── After │ ├── .vscode │ │ └── settings.json │ ├── css │ │ └── main.css │ └── index.html │ └── Before │ ├── .vscode │ └── settings.json │ ├── css │ └── main.css │ └── index.html ├── Flexbox ├── Desktop Navigation │ ├── After │ │ ├── css │ │ │ └── main.css │ │ └── index.html │ └── Before │ │ ├── css │ │ └── main.css │ │ └── index.html ├── Drum Module │ ├── After │ │ ├── assets │ │ │ ├── credit.txt │ │ │ ├── drum1.jpg │ │ │ ├── drum2.jpg │ │ │ └── drum3.jpg │ │ ├── css │ │ │ └── main.css │ │ └── index.html │ └── Before │ │ ├── assets │ │ ├── credit.txt │ │ ├── drum1.jpg │ │ ├── drum2.jpg │ │ └── drum3.jpg │ │ ├── css │ │ └── main.css │ │ └── index.html ├── Food Gallery │ ├── After │ │ ├── .vscode │ │ │ └── settings.json │ │ ├── assets │ │ │ ├── credit.txt │ │ │ ├── food1.jpg │ │ │ ├── food2.jpg │ │ │ ├── food3.jpg │ │ │ └── food4.jpg │ │ ├── css │ │ │ └── main.css │ │ └── index.html │ └── Before │ │ ├── assets │ │ ├── credit.txt │ │ ├── food1.jpg │ │ ├── food2.jpg │ │ ├── food3.jpg │ │ └── food4.jpg │ │ ├── css │ │ └── main.css │ │ └── index.html ├── News Article Listing │ ├── After │ │ ├── .vscode │ │ │ └── settings.json │ │ ├── css │ │ │ └── main.css │ │ └── index.html │ └── Starter │ │ ├── css │ │ └── main.css │ │ └── index.html └── User Avatar │ ├── After │ ├── assets │ │ ├── avatar.jpg │ │ └── credit.txt │ ├── css │ │ └── main.css │ └── index.html │ └── Starter │ ├── assets │ ├── avatar.jpg │ └── credit.txt │ ├── css │ └── main.css │ └── index.html ├── Grid Responsive ├── Brutalist Fashion Responsive │ ├── After │ │ ├── assets │ │ │ ├── pet1.jpg │ │ │ ├── pet2.jpg │ │ │ └── pet3.jpg │ │ ├── css │ │ │ └── main.css │ │ └── index.html │ └── Before │ │ ├── assets │ │ ├── pet1.jpg │ │ ├── pet2.jpg │ │ └── pet3.jpg │ │ ├── css │ │ └── main.css │ │ └── index.html ├── Car Gallery Responsive │ ├── After │ │ ├── assets │ │ │ ├── car1.jpg │ │ │ ├── car2.jpg │ │ │ ├── car3.jpg │ │ │ ├── car4.jpg │ │ │ └── car5.jpg │ │ ├── css │ │ │ └── main.css │ │ └── index.html │ └── Before │ │ ├── assets │ │ ├── car1.jpg │ │ ├── car2.jpg │ │ ├── car3.jpg │ │ ├── car4.jpg │ │ └── car5.jpg │ │ ├── css │ │ └── main.css │ │ └── index.html └── Fitness Blip Responsive │ ├── After │ ├── assets │ │ ├── fitness1.jpg │ │ ├── fitness2.jpg │ │ └── fitness3.jpg │ ├── css │ │ └── main.css │ └── index.html │ └── Before │ ├── assets │ ├── fitness1.jpg │ ├── fitness2.jpg │ └── fitness3.jpg │ ├── css │ └── main.css │ └── index.html ├── Grid ├── Brutalist Fashion │ ├── After │ │ ├── assets │ │ │ ├── pet1.jpg │ │ │ ├── pet2.jpg │ │ │ └── pet3.jpg │ │ ├── css │ │ │ └── main.css │ │ └── index.html │ └── Before │ │ ├── assets │ │ ├── pet1.jpg │ │ ├── pet2.jpg │ │ └── pet3.jpg │ │ ├── css │ │ └── main.css │ │ └── index.html ├── Calendar │ ├── After │ │ ├── css │ │ │ └── main.css │ │ └── index.html │ └── Before │ │ ├── css │ │ └── main.css │ │ └── index.html ├── Car Gallery │ ├── After │ │ ├── assets │ │ │ ├── car1.jpg │ │ │ ├── car2.jpg │ │ │ ├── car3.jpg │ │ │ ├── car4.jpg │ │ │ └── car5.jpg │ │ ├── css │ │ │ └── main.css │ │ └── index.html │ └── Before │ │ ├── assets │ │ ├── car1.jpg │ │ ├── car2.jpg │ │ ├── car3.jpg │ │ ├── car4.jpg │ │ └── car5.jpg │ │ ├── css │ │ └── main.css │ │ └── index.html ├── Fitness Blip │ ├── After │ │ ├── assets │ │ │ ├── fitness1.jpg │ │ │ ├── fitness2.jpg │ │ │ └── fitness3.jpg │ │ ├── css │ │ │ └── main.css │ │ └── index.html │ └── Before │ │ ├── assets │ │ ├── fitness1.jpg │ │ ├── fitness2.jpg │ │ └── fitness3.jpg │ │ ├── css │ │ └── main.css │ │ └── index.html └── Grid Basics │ ├── After │ ├── css │ │ └── main.css │ └── index.html │ └── Before │ ├── css │ └── main.css │ └── index.html ├── Project 1 - Recall ├── After │ ├── assets │ │ ├── appstore.svg │ │ ├── googleplay.svg │ │ ├── graphic.svg │ │ ├── person.jpg │ │ └── phone.svg │ ├── css │ │ └── main.css │ └── index.html └── Before │ ├── assets │ ├── appstore.svg │ ├── googleplay.svg │ ├── graphic.svg │ ├── person.jpg │ └── phone.svg │ ├── css │ └── main.css │ └── index.html └── Project 2 - Designalytics ├── After ├── assets │ ├── chart-top.svg │ ├── chart.svg │ ├── icon-account.svg │ ├── icon-home.svg │ ├── icon-messages.svg │ ├── icon-support.svg │ ├── logo.svg │ ├── mobile-exit.svg │ ├── right-btn.svg │ └── user.jpg ├── css │ ├── global.css │ ├── global.css.map │ ├── global.scss │ ├── main.css │ ├── main.css.map │ ├── main.scss │ ├── resets.css │ ├── resets.css.map │ ├── variables.css │ ├── variables.css.map │ └── variables.scss └── index.html └── Before ├── .vscode └── settings.json ├── assets ├── chart-top.svg ├── chart.svg ├── icon-account.svg ├── icon-home.svg ├── icon-messages.svg ├── icon-support.svg ├── logo.svg ├── mobile-exit.svg ├── right-btn.svg └── user.jpg └── index.html /Basics/A Simple Card/After/assets/green-building.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Basics/A Simple Card/After/assets/green-building.jpg -------------------------------------------------------------------------------- /Basics/A Simple Card/After/assets/shoutout.txt: -------------------------------------------------------------------------------- 1 | https://unsplash.com/photos/dqXiw7nCb9Q -------------------------------------------------------------------------------- /Basics/A Simple Card/After/css/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #20262C; 3 | margin: 0; 4 | height: 100vh; 5 | display: grid; 6 | place-content: center; 7 | font-family: 'Poppins', sans-serif; 8 | } 9 | 10 | a { 11 | text-decoration: none; 12 | } 13 | 14 | article { 15 | width: 300px; 16 | background-color: #2F3740; 17 | padding: 1.125em; 18 | border-radius: 1em; 19 | } 20 | 21 | img { 22 | width: 100%; 23 | border-radius: .4em; 24 | } 25 | 26 | .tag { 27 | background: #455260; 28 | color: #BEFF00; 29 | font-weight: bold; 30 | text-transform: uppercase; 31 | padding: .2em .6em; 32 | border-radius: .4em; 33 | margin-top: 1em; 34 | display: inline-block; 35 | } 36 | 37 | h1 a { 38 | color: white; 39 | font-size: 2.5rem; 40 | line-height: 120%; 41 | } 42 | 43 | a.cta { 44 | color: white; 45 | display: flex; 46 | } 47 | 48 | a.cta p { 49 | margin: 0; 50 | color: #B1C4D9; 51 | } 52 | 53 | svg { 54 | margin-left: .5em; 55 | align-self: center; 56 | } -------------------------------------------------------------------------------- /Basics/A Simple Card/After/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | A Simple Card 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | A Green Building 17 | Eco News 18 |

A Lush Luxurious Environment

19 | 20 |

View Property

21 | 24 | 25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /Basics/A Simple Card/Starter/assets/green-building.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Basics/A Simple Card/Starter/assets/green-building.jpg -------------------------------------------------------------------------------- /Basics/A Simple Card/Starter/assets/shoutout.txt: -------------------------------------------------------------------------------- 1 | https://unsplash.com/photos/dqXiw7nCb9Q -------------------------------------------------------------------------------- /Basics/A Simple Card/Starter/css/main.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Basics/A Simple Card/Starter/css/main.css -------------------------------------------------------------------------------- /Basics/A Simple Card/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | A Simple Card 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Basics/Absolute vs Relative Units/After/css/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | display: grid; 4 | place-items: center; 5 | height: 100vh; 6 | } 7 | 8 | .card { 9 | padding: 3em; 10 | font-size: 2rem; 11 | } -------------------------------------------------------------------------------- /Basics/Absolute vs Relative Units/After/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |

This is a very simple paragraph element for demonstration purposes.

13 |
14 | 15 | -------------------------------------------------------------------------------- /Basics/Absolute vs Relative Units/Starter/css/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | display: grid; 4 | place-items: center; 5 | height: 100vh; 6 | } 7 | 8 | .card { 9 | padding: 3em; 10 | font-size: 30px; 11 | } -------------------------------------------------------------------------------- /Basics/Absolute vs Relative Units/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |

This is a very simple paragraph element for demonstration purposes.

13 |
14 | 15 | -------------------------------------------------------------------------------- /Basics/Em vs Rem/After/css/main.css: -------------------------------------------------------------------------------- 1 | 2 | html { 3 | font-size: 16px; 4 | } 5 | body { 6 | height: 100vh; 7 | font-family: 'Poppins'; 8 | background: rgb(233, 233, 233); 9 | } 10 | 11 | .container { 12 | display: grid; 13 | grid-template-rows: repeat(2, auto); 14 | align-items: center; 15 | height: 100vh; 16 | } 17 | 18 | .card { 19 | width: 70%; 20 | margin: 0 auto; 21 | background: white; 22 | border-radius: 1em; 23 | padding: 0 2em; 24 | font-size: 30px; 25 | } 26 | 27 | .card1 h1 { 28 | font-size: 2em; 29 | } 30 | .card1 p { 31 | font-size: 1em; 32 | } 33 | 34 | .card2 h1 { 35 | font-size: 2rem; 36 | } 37 | .card2 p { 38 | font-size: 1rem; 39 | } -------------------------------------------------------------------------------- /Basics/Em vs Rem/After/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |
13 |

Amazing Feature

14 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, modi?

15 |
16 |
17 |

Amazing Benefit

18 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, modi?

19 |
20 |
21 | 22 | -------------------------------------------------------------------------------- /Basics/Em vs Rem/Starter/css/main.css: -------------------------------------------------------------------------------- 1 | 2 | html { 3 | /*font-size: 16px default*/ 4 | } 5 | body { 6 | height: 100vh; 7 | font-family: 'Poppins'; 8 | background: rgb(233, 233, 233); 9 | } 10 | 11 | .container { 12 | display: grid; 13 | grid-template-rows: repeat(2, auto); 14 | align-items: center; 15 | height: 100vh; 16 | } 17 | 18 | .card { 19 | width: 30%; 20 | height: 300px; 21 | margin: 0 auto; 22 | background: white; 23 | border-radius: 1em; 24 | padding: 0 2em; 25 | 26 | } 27 | -------------------------------------------------------------------------------- /Basics/Em vs Rem/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |
13 |

Amazing Feature

14 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, modi?

15 |
16 |
17 |

Amazing Benefit

18 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, modi?

19 |
20 |
21 | 22 | -------------------------------------------------------------------------------- /Basics/Translating from Figma to CSS/After/css/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | 5 | body { 6 | margin: 6.2em; 7 | background: #FCE7FF; 8 | font-family: "Poppins"; 9 | } 10 | 11 | h1 { 12 | font-size: 2.6rem; 13 | line-height: 120%; 14 | } 15 | 16 | a { 17 | font-size: 1.6rem; 18 | font-weight: bold; 19 | color: white; 20 | text-decoration: none; 21 | background: #933A9F; 22 | display: inline-block; 23 | padding: 1.25rem; 24 | border-radius: .375rem; 25 | } -------------------------------------------------------------------------------- /Basics/Translating from Figma to CSS/After/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |

Translating from Figma to CSS

12 | Let's do it 13 | 14 | -------------------------------------------------------------------------------- /Basics/Translating from Figma to CSS/Starter/css/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | 5 | body { 6 | margin: 6.2em; 7 | background: #FCE7FF; 8 | font-family: "Poppins"; 9 | } 10 | 11 | h1 { 12 | font-size: 2.6rem; 13 | line-height: 120%; 14 | } 15 | 16 | a { 17 | font-size: 1.6rem; 18 | font-weight: bold; 19 | color: white; 20 | text-decoration: none; 21 | background: #933A9F; 22 | display: inline-block; 23 | padding: 1.25rem; 24 | border-radius: .375rem; 25 | } -------------------------------------------------------------------------------- /Basics/Translating from Figma to CSS/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |

Translating from Figma to CSS

12 | Let's do it 13 | 14 | -------------------------------------------------------------------------------- /Bonus - UI Animations/After/assets/graphic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /Bonus - UI Animations/After/assets/person.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Bonus - UI Animations/After/assets/person.jpg -------------------------------------------------------------------------------- /Bonus - UI Animations/After/css/main.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary-color: #7E00FD; 3 | } 4 | 5 | html {font-size: 62.5%;} 6 | 7 | p, a {font-size: 1.8rem;} 8 | a {text-decoration: none;} 9 | ul {list-style-type:none;margin:0;padding:0;} 10 | .header-cta, .arrow {display: none;} 11 | 12 | body { 13 | font-family: 'Nunito', sans-serif; 14 | margin: 0; 15 | } 16 | 17 | .navbar { 18 | display: flex; 19 | justify-content: space-between; 20 | align-items: center; 21 | } 22 | 23 | .wrapper { 24 | margin: 2.6em; 25 | } 26 | 27 | a.logo { 28 | color: var(--primary-color); 29 | font-weight: bold; 30 | font-size: 2.8rem; 31 | } 32 | 33 | header ul { 34 | display: flex; 35 | gap: 2.2em; 36 | } 37 | header ul li a { 38 | color: black; 39 | } 40 | a.active { 41 | text-decoration: underline; 42 | } 43 | 44 | /* Hero Section */ 45 | 46 | section.hero { 47 | text-align: center; 48 | } 49 | 50 | h1 { 51 | font-size: 3.2rem; 52 | margin-top: 2em; 53 | margin-bottom: .5em; 54 | } 55 | 56 | p.subhead { 57 | font-size: 2rem; 58 | } 59 | 60 | .cta-btns { 61 | display: flex; 62 | justify-content: center; 63 | gap: 1em; 64 | margin-top: 3em; 65 | } 66 | 67 | .phone { 68 | width: 90%; 69 | margin-top: 5em; 70 | position: relative; 71 | z-index: 2; 72 | } 73 | 74 | /* Features Section */ 75 | 76 | section.features { 77 | background: #7E00FD; 78 | color: white; 79 | transform: skewY(12deg) translateY(-8em); /* SKEW */ 80 | } 81 | 82 | section.features .wrapper { 83 | transform: skewY(-12deg); /* UN-SKEW */ 84 | } 85 | 86 | section.features .wrapper ul { 87 | display: flex; 88 | flex-direction: column; 89 | gap: 3em; 90 | padding: 5em 0 10em; 91 | } 92 | 93 | section.features svg { 94 | width: 3.5rem; 95 | margin-left: -.15em; 96 | } 97 | 98 | section.features strong { 99 | display: flex; 100 | flex-direction: column; 101 | font-size: 2.6rem; 102 | gap: .2em; 103 | } 104 | 105 | /* Testimonials Section */ 106 | 107 | h2 { 108 | font-family: 'Playfair Display', serif; 109 | font-size: 2.8rem; 110 | font-weight: 300; 111 | } 112 | 113 | .author-pic { 114 | width: 100%; 115 | border-radius: 1.2em; 116 | height: 17.7em; 117 | object-fit: cover; 118 | margin-bottom: 2em; 119 | } 120 | 121 | .testimonial-quote p { 122 | margin-bottom: 2em; 123 | } 124 | 125 | .author strong { 126 | display: block; 127 | font-size: 2rem; 128 | } 129 | .author a { 130 | color: black; 131 | } 132 | ul.social-nav { 133 | display: flex; 134 | gap: 1em; 135 | margin-top: 2em; 136 | 137 | } 138 | ul.social-nav svg { 139 | width: 3rem; 140 | } 141 | 142 | 143 | /* Footer Section */ 144 | 145 | footer { 146 | background: #EDEDED; 147 | padding: 1.6em 0; 148 | margin-top: 5em; 149 | } 150 | 151 | .footer-header { 152 | display: flex; 153 | justify-content: space-between; 154 | align-items: center; 155 | } 156 | 157 | footer a { 158 | color: black; 159 | } 160 | 161 | nav.footer-nav ul, nav.secondary-nav ul { 162 | display: flex; 163 | gap: 2em; 164 | } 165 | 166 | nav.footer-nav ul { 167 | justify-content: right; 168 | } 169 | 170 | nav.secondary-nav ul { 171 | margin-top: 4em; 172 | } 173 | 174 | nav.secondary-nav ul li a { 175 | color: #363636; 176 | text-decoration: underline; 177 | font-size: 1.4rem; 178 | } 179 | 180 | /* Media Queries -- Tablet */ 181 | 182 | @media only screen and (min-width: 700px) { 183 | .header-cta { 184 | display: inherit; 185 | color: white; 186 | font-size: 1.6rem; 187 | font-weight: bold; 188 | background-color: var(--primary-color); 189 | padding: .5em .7em; 190 | border-radius: .3em; 191 | } 192 | .hero .wrapper { 193 | display: flex; 194 | justify-content: space-between; 195 | gap: 3em; 196 | } 197 | section.hero { 198 | text-align: left; 199 | } 200 | h1 { 201 | font-size: 5.1rem; 202 | line-height: 110%; 203 | } 204 | .cta-btns { 205 | justify-content: left; 206 | } 207 | .phone { 208 | position: absolute; 209 | width: 500px; 210 | left: 0; 211 | } 212 | .hero .right-col { 213 | position: relative; 214 | width: 500px; 215 | height: 600px; 216 | overflow: hidden; 217 | } 218 | 219 | 220 | /* Features Section */ 221 | 222 | section.features { 223 | transform: skewY(7deg) translateY(-8em); /* SKEW */ 224 | position: relative; 225 | } 226 | section.features .wrapper { 227 | transform: skewY(-7deg); /* UN-SKEW */ 228 | } 229 | 230 | section.features:before { 231 | content: ''; 232 | position: absolute; 233 | background: url('../assets/graphic.svg') no-repeat; 234 | width: 205px; 235 | height: 80px; 236 | bottom: -30px; 237 | left: 10%; 238 | } 239 | 240 | section.features .wrapper ul { 241 | display: grid; 242 | grid-template-columns: repeat(2, 1fr); 243 | grid-template-rows: repeat(2, 1fr); 244 | padding: 7em 0 12em; 245 | } 246 | 247 | section.features .wrapper ul li:last-of-type { 248 | grid-column: 1/3; 249 | } 250 | 251 | 252 | 253 | /* Testimonials Section */ 254 | 255 | .testimonial-info { 256 | display: flex; 257 | gap: 2em; 258 | } 259 | .author-pic, .author { 260 | flex: 1; 261 | } 262 | .author-pic { 263 | margin: 0; 264 | } 265 | 266 | .author { 267 | display: flex; 268 | flex-direction: column; 269 | justify-content: space-between; 270 | } 271 | 272 | } 273 | 274 | /* Media Queries -- Desktop */ 275 | 276 | @media only screen and (min-width: 950px) { 277 | .wrapper { 278 | max-width: 1000px; 279 | margin: 2em auto; 280 | } 281 | 282 | .phone { 283 | position: absolute; 284 | width: 500px; 285 | left: -100px; 286 | } 287 | .hero .right-col { 288 | position: relative; 289 | width: 500px; 290 | height: 600px; 291 | overflow: inherit; 292 | } 293 | 294 | /* Features Section */ 295 | 296 | section.features .wrapper ul { 297 | grid-template-columns: repeat(3, 1fr); 298 | grid-template-rows: 1fr; 299 | height: 300px; 300 | } 301 | 302 | section.features .wrapper ul li:last-of-type { 303 | grid-column: auto; 304 | align-self: end; 305 | } 306 | 307 | section.features .wrapper ul li:nth-of-type(2) { 308 | align-self: center; 309 | } 310 | 311 | section.features:before { 312 | left: 20%; 313 | } 314 | 315 | /* Testimonials Section */ 316 | 317 | .testimonial { 318 | display: flex; 319 | gap: 4em; 320 | margin: 12em 0; 321 | } 322 | .testimonial-quote, .testimonial-info { 323 | flex: 1; 324 | } 325 | 326 | .testimonial h2 { 327 | margin-top: 0; 328 | } 329 | 330 | } 331 | 332 | /* Animations */ 333 | 334 | .phone { 335 | animation: subtleMove 2s alternate-reverse infinite ease-in-out; 336 | } 337 | .recording, .flare, .flare2 { 338 | animation: subtleMove2 2s alternate-reverse infinite ease-in-out; 339 | } 340 | 341 | @keyframes subtleMove { 342 | from { 343 | transform: translateY(0); 344 | } 345 | to { 346 | transform: translateY(15px); 347 | } 348 | } 349 | 350 | @keyframes subtleMove2 { 351 | from { 352 | transform: translateY(0); 353 | } 354 | to { 355 | transform: translateY(25px); 356 | } 357 | } 358 | 359 | 360 | .features .wrapper ul li, h1, .subhead, .cta-btns { 361 | animation: fadeInUp 1s forwards; 362 | opacity: 0; 363 | } 364 | .subhead { 365 | animation-delay: .3s; 366 | } 367 | .cta-btns { 368 | animation-delay: .6s; 369 | } 370 | .features .wrapper ul li:nth-of-type(1) { 371 | animation-delay: .5s; 372 | } 373 | .features .wrapper ul li:nth-of-type(2) { 374 | animation-delay: .9s; 375 | } 376 | .features .wrapper ul li:nth-of-type(3) { 377 | animation-delay: 1.2s; 378 | } 379 | 380 | @keyframes fadeInUp { 381 | from { 382 | transform: translateY(30px); 383 | } 384 | to { 385 | opacity: 1; 386 | transform: translateY(0); 387 | } 388 | } -------------------------------------------------------------------------------- /Bonus - UI Animations/Before/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /Bonus - UI Animations/Before/assets/graphic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /Bonus - UI Animations/Before/assets/person.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Bonus - UI Animations/Before/assets/person.jpg -------------------------------------------------------------------------------- /Bonus - UI Animations/Before/css/main.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary-color: #7E00FD; 3 | } 4 | 5 | html {font-size: 62.5%;} 6 | 7 | p, a {font-size: 1.8rem;} 8 | a {text-decoration: none;} 9 | ul {list-style-type:none;margin:0;padding:0;} 10 | .header-cta, .arrow {display: none;} 11 | 12 | body { 13 | font-family: 'Nunito', sans-serif; 14 | margin: 0; 15 | } 16 | 17 | .navbar { 18 | display: flex; 19 | justify-content: space-between; 20 | align-items: center; 21 | } 22 | 23 | .wrapper { 24 | margin: 2.6em; 25 | } 26 | 27 | a.logo { 28 | color: var(--primary-color); 29 | font-weight: bold; 30 | font-size: 2.8rem; 31 | } 32 | 33 | header ul { 34 | display: flex; 35 | gap: 2.2em; 36 | } 37 | header ul li a { 38 | color: black; 39 | } 40 | a.active { 41 | text-decoration: underline; 42 | } 43 | 44 | /* Hero Section */ 45 | 46 | section.hero { 47 | text-align: center; 48 | } 49 | 50 | h1 { 51 | font-size: 3.2rem; 52 | margin-top: 2em; 53 | margin-bottom: .5em; 54 | } 55 | 56 | p.subhead { 57 | font-size: 2rem; 58 | } 59 | 60 | .cta-btns { 61 | display: flex; 62 | justify-content: center; 63 | gap: 1em; 64 | margin-top: 3em; 65 | } 66 | 67 | .phone { 68 | width: 90%; 69 | margin-top: 5em; 70 | position: relative; 71 | z-index: 2; 72 | } 73 | 74 | /* Features Section */ 75 | 76 | section.features { 77 | background: #7E00FD; 78 | color: white; 79 | transform: skewY(12deg) translateY(-8em); /* SKEW */ 80 | } 81 | 82 | section.features .wrapper { 83 | transform: skewY(-12deg); /* UN-SKEW */ 84 | } 85 | 86 | section.features .wrapper ul { 87 | display: flex; 88 | flex-direction: column; 89 | gap: 3em; 90 | padding: 5em 0 10em; 91 | } 92 | 93 | section.features svg { 94 | width: 3.5rem; 95 | margin-left: -.15em; 96 | } 97 | 98 | section.features strong { 99 | display: flex; 100 | flex-direction: column; 101 | font-size: 2.6rem; 102 | gap: .2em; 103 | } 104 | 105 | /* Testimonials Section */ 106 | 107 | h2 { 108 | font-family: 'Playfair Display', serif; 109 | font-size: 2.8rem; 110 | font-weight: 300; 111 | } 112 | 113 | .author-pic { 114 | width: 100%; 115 | border-radius: 1.2em; 116 | height: 17.7em; 117 | object-fit: cover; 118 | margin-bottom: 2em; 119 | } 120 | 121 | .testimonial-quote p { 122 | margin-bottom: 2em; 123 | } 124 | 125 | .author strong { 126 | display: block; 127 | font-size: 2rem; 128 | } 129 | .author a { 130 | color: black; 131 | } 132 | ul.social-nav { 133 | display: flex; 134 | gap: 1em; 135 | margin-top: 2em; 136 | 137 | } 138 | ul.social-nav svg { 139 | width: 3rem; 140 | } 141 | 142 | 143 | /* Footer Section */ 144 | 145 | footer { 146 | background: #EDEDED; 147 | padding: 1.6em 0; 148 | margin-top: 5em; 149 | } 150 | 151 | .footer-header { 152 | display: flex; 153 | justify-content: space-between; 154 | align-items: center; 155 | } 156 | 157 | footer a { 158 | color: black; 159 | } 160 | 161 | nav.footer-nav ul, nav.secondary-nav ul { 162 | display: flex; 163 | gap: 2em; 164 | } 165 | 166 | nav.footer-nav ul { 167 | justify-content: right; 168 | } 169 | 170 | nav.secondary-nav ul { 171 | margin-top: 4em; 172 | } 173 | 174 | nav.secondary-nav ul li a { 175 | color: #363636; 176 | text-decoration: underline; 177 | font-size: 1.4rem; 178 | } 179 | 180 | /* Media Queries -- Tablet */ 181 | 182 | @media only screen and (min-width: 700px) { 183 | .header-cta { 184 | display: inherit; 185 | color: white; 186 | font-size: 1.6rem; 187 | font-weight: bold; 188 | background-color: var(--primary-color); 189 | padding: .5em .7em; 190 | border-radius: .3em; 191 | } 192 | .hero .wrapper { 193 | display: flex; 194 | justify-content: space-between; 195 | gap: 3em; 196 | } 197 | section.hero { 198 | text-align: left; 199 | } 200 | h1 { 201 | font-size: 5.1rem; 202 | line-height: 110%; 203 | } 204 | .cta-btns { 205 | justify-content: left; 206 | } 207 | .phone { 208 | position: absolute; 209 | width: 500px; 210 | left: 0; 211 | } 212 | .hero .right-col { 213 | position: relative; 214 | width: 500px; 215 | height: 600px; 216 | overflow: hidden; 217 | } 218 | 219 | 220 | /* Features Section */ 221 | 222 | section.features { 223 | transform: skewY(7deg) translateY(-8em); /* SKEW */ 224 | position: relative; 225 | } 226 | section.features .wrapper { 227 | transform: skewY(-7deg); /* UN-SKEW */ 228 | } 229 | 230 | section.features:before { 231 | content: ''; 232 | position: absolute; 233 | background: url('../assets/graphic.svg') no-repeat; 234 | width: 205px; 235 | height: 80px; 236 | bottom: -30px; 237 | left: 10%; 238 | } 239 | 240 | section.features .wrapper ul { 241 | display: grid; 242 | grid-template-columns: repeat(2, 1fr); 243 | grid-template-rows: repeat(2, 1fr); 244 | padding: 7em 0 12em; 245 | } 246 | 247 | section.features .wrapper ul li:last-of-type { 248 | grid-column: 1/3; 249 | } 250 | 251 | 252 | 253 | /* Testimonials Section */ 254 | 255 | .testimonial-info { 256 | display: flex; 257 | gap: 2em; 258 | } 259 | .author-pic, .author { 260 | flex: 1; 261 | } 262 | .author-pic { 263 | margin: 0; 264 | } 265 | 266 | .author { 267 | display: flex; 268 | flex-direction: column; 269 | justify-content: space-between; 270 | } 271 | 272 | } 273 | 274 | /* Media Queries -- Desktop */ 275 | 276 | @media only screen and (min-width: 950px) { 277 | .wrapper { 278 | max-width: 1000px; 279 | margin: 2em auto; 280 | } 281 | 282 | .phone { 283 | position: absolute; 284 | width: 500px; 285 | left: -100px; 286 | } 287 | .hero .right-col { 288 | position: relative; 289 | width: 500px; 290 | height: 600px; 291 | overflow: inherit; 292 | } 293 | 294 | /* Features Section */ 295 | 296 | section.features .wrapper ul { 297 | grid-template-columns: repeat(3, 1fr); 298 | grid-template-rows: 1fr; 299 | height: 300px; 300 | } 301 | 302 | section.features .wrapper ul li:last-of-type { 303 | grid-column: auto; 304 | align-self: end; 305 | } 306 | 307 | section.features .wrapper ul li:nth-of-type(2) { 308 | align-self: center; 309 | } 310 | 311 | section.features:before { 312 | left: 20%; 313 | } 314 | 315 | /* Testimonials Section */ 316 | 317 | .testimonial { 318 | display: flex; 319 | gap: 4em; 320 | margin: 12em 0; 321 | } 322 | .testimonial-quote, .testimonial-info { 323 | flex: 1; 324 | } 325 | 326 | .testimonial h2 { 327 | margin-top: 0; 328 | } 329 | 330 | } 331 | -------------------------------------------------------------------------------- /Flexbox Responsive/Food Gallery Responsive/After/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /Flexbox Responsive/Food Gallery Responsive/After/assets/credit.txt: -------------------------------------------------------------------------------- 1 | https://unsplash.com/photos/ZuIDLSz3XLg 2 | 3 | https://unsplash.com/photos/MqT0asuoIcU 4 | 5 | https://unsplash.com/photos/kcA-c3f_3FE 6 | 7 | https://unsplash.com/photos/-YHSwy6uqvk -------------------------------------------------------------------------------- /Flexbox Responsive/Food Gallery Responsive/After/assets/food1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Flexbox Responsive/Food Gallery Responsive/After/assets/food1.jpg -------------------------------------------------------------------------------- /Flexbox Responsive/Food Gallery Responsive/After/assets/food2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Flexbox Responsive/Food Gallery Responsive/After/assets/food2.jpg -------------------------------------------------------------------------------- /Flexbox Responsive/Food Gallery Responsive/After/assets/food3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Flexbox Responsive/Food Gallery Responsive/After/assets/food3.jpg -------------------------------------------------------------------------------- /Flexbox Responsive/Food Gallery Responsive/After/assets/food4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Flexbox Responsive/Food Gallery Responsive/After/assets/food4.jpg -------------------------------------------------------------------------------- /Flexbox Responsive/Food Gallery Responsive/After/css/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | 5 | body { 6 | font-family: "Playfair Display"; 7 | margin: 2em; 8 | } 9 | 10 | h1 { 11 | font-size: 3.2rem; 12 | font-weight: normal; 13 | margin-bottom: 6.8rem; 14 | } 15 | 16 | span { 17 | color: #07801E; 18 | } 19 | 20 | .container { 21 | display: flex; 22 | flex-direction: column; 23 | gap: 2em; 24 | width: 100%; 25 | height: 400px; 26 | } 27 | 28 | .wrapper { 29 | max-width: 1200px; 30 | margin: 0 auto; 31 | } 32 | 33 | img { 34 | height: 200px; 35 | object-fit: cover; 36 | border-radius: 1em; 37 | } 38 | 39 | @media screen and (min-width: 600px) { 40 | 41 | .container { 42 | flex-direction: row; 43 | flex-wrap: wrap; 44 | } 45 | 46 | .container img { 47 | flex-grow: 1; 48 | } 49 | 50 | } 51 | 52 | -------------------------------------------------------------------------------- /Flexbox Responsive/Food Gallery Responsive/After/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Food Gallery 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

Food for thought

18 | 19 |
20 | Food 21 | Food 22 | Food 23 | Food 24 |
25 |
26 | 27 | -------------------------------------------------------------------------------- /Flexbox Responsive/Food Gallery Responsive/Before/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /Flexbox Responsive/Food Gallery Responsive/Before/assets/credit.txt: -------------------------------------------------------------------------------- 1 | https://unsplash.com/photos/ZuIDLSz3XLg 2 | 3 | https://unsplash.com/photos/MqT0asuoIcU 4 | 5 | https://unsplash.com/photos/kcA-c3f_3FE 6 | 7 | https://unsplash.com/photos/-YHSwy6uqvk -------------------------------------------------------------------------------- /Flexbox Responsive/Food Gallery Responsive/Before/assets/food1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Flexbox Responsive/Food Gallery Responsive/Before/assets/food1.jpg -------------------------------------------------------------------------------- /Flexbox Responsive/Food Gallery Responsive/Before/assets/food2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Flexbox Responsive/Food Gallery Responsive/Before/assets/food2.jpg -------------------------------------------------------------------------------- /Flexbox Responsive/Food Gallery Responsive/Before/assets/food3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Flexbox Responsive/Food Gallery Responsive/Before/assets/food3.jpg -------------------------------------------------------------------------------- /Flexbox Responsive/Food Gallery Responsive/Before/assets/food4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Flexbox Responsive/Food Gallery Responsive/Before/assets/food4.jpg -------------------------------------------------------------------------------- /Flexbox Responsive/Food Gallery Responsive/Before/css/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | 5 | body { 6 | font-family: "Playfair Display"; 7 | margin: 12em; 8 | } 9 | 10 | h1 { 11 | font-size: 3.2rem; 12 | font-weight: normal; 13 | margin-bottom: 6.8rem; 14 | } 15 | 16 | span { 17 | color: #07801E; 18 | } 19 | 20 | .container { 21 | display: flex; 22 | gap: 2em; 23 | width: 100%; 24 | height: 400px; 25 | 26 | } 27 | 28 | img { 29 | width: 250px; 30 | height: 200px; 31 | object-fit: cover; 32 | border-radius: 1em; 33 | } 34 | 35 | .second { 36 | flex-grow: 2; 37 | } -------------------------------------------------------------------------------- /Flexbox Responsive/Food Gallery Responsive/Before/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Food Gallery 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

Food for thought

17 | 18 |
19 | Food 20 | Food 21 | Food 22 | Food 23 |
24 | 25 | -------------------------------------------------------------------------------- /Flexbox Responsive/Responsive Drum Module/After/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /Flexbox Responsive/Responsive Drum Module/After/assets/credit.txt: -------------------------------------------------------------------------------- 1 | https://unsplash.com/photos/JxufJsFmvW0 2 | https://unsplash.com/photos/bRG2C0FAQEY 3 | https://unsplash.com/photos/xHow2lkVRCs -------------------------------------------------------------------------------- /Flexbox Responsive/Responsive Drum Module/After/assets/drum1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Flexbox Responsive/Responsive Drum Module/After/assets/drum1.jpg -------------------------------------------------------------------------------- /Flexbox Responsive/Responsive Drum Module/After/assets/drum2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Flexbox Responsive/Responsive Drum Module/After/assets/drum2.jpg -------------------------------------------------------------------------------- /Flexbox Responsive/Responsive Drum Module/After/assets/drum3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Flexbox Responsive/Responsive Drum Module/After/assets/drum3.jpg -------------------------------------------------------------------------------- /Flexbox Responsive/Responsive Drum Module/After/css/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | 5 | * { 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | margin: 0; 11 | min-height: 100vh; 12 | background-color: #D7DED3; 13 | font-family: 'Poppins'; 14 | } 15 | 16 | .wrapper { 17 | max-width: 1200px; 18 | margin: 0 auto; 19 | } 20 | 21 | section { 22 | background: white; 23 | padding: 3em; 24 | border-radius: .8em; 25 | display: flex; 26 | flex-direction: column; 27 | gap: 13.5em; 28 | } 29 | 30 | .left-col { 31 | display: flex; 32 | flex-direction: column; 33 | flex: .6; 34 | } 35 | 36 | h1 { 37 | font-family: 'Playfair Display', serif; 38 | font-size: 4rem; 39 | font-weight: normal; 40 | margin: 0; 41 | } 42 | 43 | p { 44 | font-size: 2rem; 45 | } 46 | 47 | a.cta { 48 | font-family: 'Playfair Display', serif; 49 | display: flex; 50 | align-items: center; 51 | gap: 1em; 52 | text-decoration: none; 53 | color: #406A29; 54 | font-weight: bold; 55 | margin-top: auto; 56 | } 57 | 58 | a.cta p { 59 | margin: 0; 60 | } 61 | 62 | .right-col { 63 | display: flex; 64 | flex: 1; 65 | flex-wrap: wrap; 66 | gap: 2.8em; 67 | } 68 | 69 | .hide-mobile { 70 | display: none; 71 | } 72 | 73 | .box { 74 | width: calc(50% - 2em); 75 | aspect-ratio: 1/1; 76 | gap: 1em; 77 | border-radius: .6em; 78 | } 79 | 80 | .box:nth-of-type(1) { 81 | background-image: url('../assets/drum1.jpg'); 82 | background-size: cover; 83 | } 84 | 85 | .box:nth-of-type(2) { 86 | background-image: url('../assets/drum2.jpg'); 87 | background-size: cover; 88 | } 89 | 90 | .box:nth-of-type(3) { 91 | background-color: #D0E1BB; 92 | } 93 | 94 | .box:nth-of-type(6) { 95 | background-image: url('../assets/drum3.jpg'); 96 | background-size: cover; 97 | } 98 | .box:nth-of-type(5) { 99 | background-color: #BBC8E1; 100 | } 101 | 102 | @media screen and (min-width: 800px) { 103 | .wrapper { 104 | margin: 10em auto; 105 | } 106 | .hide-mobile { 107 | display: block; 108 | } 109 | 110 | .box { 111 | width: calc(33.333% - 2em); 112 | } 113 | } 114 | 115 | @media screen and (min-width: 1200px) { 116 | section { 117 | flex-direction: row; 118 | } 119 | } 120 | 121 | -------------------------------------------------------------------------------- /Flexbox Responsive/Responsive Drum Module/After/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Drum Module 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |
19 |

The best sounding drum module

20 |

..that money can buy

21 | 22 | 23 |

Shop drum kits

24 | 25 | 26 | 27 | 28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 | 40 | -------------------------------------------------------------------------------- /Flexbox Responsive/Responsive Drum Module/Before/assets/credit.txt: -------------------------------------------------------------------------------- 1 | https://unsplash.com/photos/JxufJsFmvW0 2 | https://unsplash.com/photos/bRG2C0FAQEY 3 | https://unsplash.com/photos/xHow2lkVRCs -------------------------------------------------------------------------------- /Flexbox Responsive/Responsive Drum Module/Before/assets/drum1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Flexbox Responsive/Responsive Drum Module/Before/assets/drum1.jpg -------------------------------------------------------------------------------- /Flexbox Responsive/Responsive Drum Module/Before/assets/drum2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Flexbox Responsive/Responsive Drum Module/Before/assets/drum2.jpg -------------------------------------------------------------------------------- /Flexbox Responsive/Responsive Drum Module/Before/assets/drum3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Flexbox Responsive/Responsive Drum Module/Before/assets/drum3.jpg -------------------------------------------------------------------------------- /Flexbox Responsive/Responsive Drum Module/Before/css/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | 5 | * { 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | margin: 0; 11 | min-height: 100vh; 12 | background-color: #D7DED3; 13 | font-family: 'Poppins'; 14 | } 15 | .wrapper { 16 | max-width: 1200px; 17 | margin: 0 auto; 18 | } 19 | section { 20 | background: white; 21 | padding: 3em; 22 | border-radius: .8em; 23 | display: flex; 24 | flex-direction: column; 25 | gap: 13.5em; 26 | } 27 | 28 | .left-col { 29 | display: flex; 30 | flex-direction: column; 31 | height: auto; 32 | flex: .6; 33 | } 34 | 35 | h1 { 36 | font-family: 'Playfair Display', serif; 37 | font-size: 4rem; 38 | font-weight: normal; 39 | margin: 0; 40 | } 41 | 42 | p { 43 | font-size: 2rem; 44 | } 45 | 46 | a.cta { 47 | font-family: 'Playfair Display', serif; 48 | display: flex; 49 | align-items: center; 50 | gap: 1em; 51 | text-decoration: none; 52 | color: #406A29; 53 | font-weight: bold; 54 | margin-top: auto; 55 | } 56 | 57 | a.cta p { 58 | margin: 0; 59 | } 60 | 61 | .right-col { 62 | display: flex; 63 | flex: 1; 64 | flex-wrap: wrap; 65 | gap: 2.8em; 66 | } 67 | 68 | 69 | .hide-mobile { 70 | display: none; 71 | } 72 | 73 | .box { 74 | width: calc(50% - 2em); 75 | aspect-ratio: 1/1; 76 | gap: 1em; 77 | border-radius: .6em; 78 | } 79 | 80 | .box:nth-of-type(1) { 81 | background-image: url('../assets/drum1.jpg'); 82 | background-size: cover; 83 | } 84 | 85 | .box:nth-of-type(2) { 86 | background-image: url('../assets/drum2.jpg'); 87 | background-size: cover; 88 | } 89 | 90 | .box:nth-of-type(3) { 91 | background-color: #D0E1BB; 92 | } 93 | 94 | .box:nth-of-type(6) { 95 | background-image: url('../assets/drum3.jpg'); 96 | background-size: cover; 97 | } 98 | .box:nth-of-type(5) { 99 | background-color: #BBC8E1; 100 | } 101 | 102 | @media screen and (min-width: 800px) { 103 | .wrapper { 104 | margin: 10em auto; 105 | } 106 | 107 | .hide-mobile { 108 | display: block; 109 | } 110 | .box { 111 | width: calc(33.33% - 2em); 112 | } 113 | } 114 | 115 | @media screen and (min-width: 1200px) { 116 | section { 117 | flex-direction: row; 118 | } 119 | } -------------------------------------------------------------------------------- /Flexbox Responsive/Responsive Drum Module/Before/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Drum Module 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |
19 |

The best sounding drum module

20 |

..that money can buy

21 | 22 | 23 |

Shop drum kits

24 | 25 | 26 | 27 | 28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 | 40 | 41 | -------------------------------------------------------------------------------- /Flexbox Responsive/Responsive Navigation/After/assets/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Flexbox Responsive/Responsive Navigation/After/assets/menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Flexbox Responsive/Responsive Navigation/After/css/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | 5 | body { 6 | background-color: #E9EDF1; 7 | font-family: 'Nunito', sans-serif; 8 | margin: 0; 9 | } 10 | 11 | header { 12 | background-color: #DBE1E8; 13 | padding: 2.5em; 14 | } 15 | 16 | .wrapper { 17 | max-width: 1200px; 18 | margin: 0 auto; 19 | } 20 | 21 | nav { 22 | position: fixed; 23 | right: -100%; 24 | top: 0; 25 | width: 33%; 26 | background: white; 27 | height: 100vh; 28 | z-index: 2; 29 | transition: right .5s ease-in-out; 30 | padding: 4.6em; 31 | } 32 | 33 | .menu-btn { 34 | width: 3rem; 35 | height: 3rem; 36 | cursor: pointer; 37 | } 38 | 39 | .open { 40 | right: 0%; 41 | } 42 | .close { 43 | cursor: pointer; 44 | display: block; 45 | margin-left: auto; 46 | margin-bottom: 6.6em; 47 | } 48 | 49 | .navbar { 50 | display: flex; 51 | justify-content: space-between; 52 | align-items: center; 53 | } 54 | 55 | a.logo { 56 | color: #0460BC; 57 | font-size: 2.2rem; 58 | font-weight: bold; 59 | } 60 | a { 61 | text-decoration: none; 62 | } 63 | 64 | ul { 65 | list-style-type: none; 66 | margin: 0; 67 | padding: 0; 68 | display: flex; 69 | flex-direction: column; 70 | align-items: flex-end; 71 | gap: 3.5em; 72 | } 73 | 74 | ul li a { 75 | font-size: 1.8rem; 76 | color: black; 77 | } 78 | 79 | ul li a.active { 80 | font-weight: bold; 81 | } 82 | 83 | ul li a:hover { 84 | color: #0460BC; 85 | } 86 | 87 | a.cart { 88 | background-color: #C3CCD7; 89 | display: flex; 90 | gap: 1rem; 91 | align-items: center; 92 | color: black; 93 | font-size: 1.8rem; 94 | padding: 1rem; 95 | border-radius: .4rem; 96 | } 97 | 98 | a.cart p { 99 | margin: 0; 100 | } 101 | 102 | a.cart:hover { 103 | background-color: #B5C0CE; 104 | } 105 | 106 | .mobile-cart-menu { 107 | display: flex; 108 | align-items: center; 109 | gap: 2em; 110 | } 111 | 112 | @media screen and (min-width: 600px) { 113 | .menu-btn, .close { 114 | display: none; 115 | } 116 | nav { 117 | position: unset; 118 | height: auto; 119 | background: none; 120 | padding: 0; 121 | width: auto; 122 | } 123 | ul { 124 | flex-direction: row; 125 | } 126 | } -------------------------------------------------------------------------------- /Flexbox Responsive/Responsive Navigation/After/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Desktop Navigation 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 | 20 | 21 | 29 | 30 |
31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 |

Cart

41 | 42 | 43 | Open Menu 44 |
45 |
46 |
47 | 48 | 59 | 60 | -------------------------------------------------------------------------------- /Flexbox Responsive/Responsive Navigation/Before/assets/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Flexbox Responsive/Responsive Navigation/Before/assets/menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Flexbox Responsive/Responsive Navigation/Before/css/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | 5 | body { 6 | background-color: #E9EDF1; 7 | font-family: 'Nunito', sans-serif; 8 | margin: 0; 9 | } 10 | 11 | header { 12 | background-color: #DBE1E8; 13 | padding: 2.5em; 14 | } 15 | 16 | .wrapper { 17 | max-width: 1200px; 18 | margin: 0 auto; 19 | } 20 | 21 | .navbar { 22 | display: flex; 23 | justify-content: space-between; 24 | align-items: center; 25 | } 26 | 27 | a.logo { 28 | color: #0460BC; 29 | font-size: 2.2rem; 30 | font-weight: bold; 31 | } 32 | a { 33 | text-decoration: none; 34 | } 35 | 36 | ul { 37 | list-style-type: none; 38 | margin: 0; 39 | padding: 0; 40 | display: flex; 41 | gap: 4.3em; 42 | } 43 | 44 | ul li a { 45 | font-size: 1.8rem; 46 | color: black; 47 | } 48 | 49 | ul li a.active { 50 | font-weight: bold; 51 | } 52 | 53 | ul li a:hover { 54 | color: #0460BC; 55 | } 56 | 57 | a.cart { 58 | background-color: #C3CCD7; 59 | display: flex; 60 | gap: 1rem; 61 | align-items: center; 62 | color: black; 63 | font-size: 1.8rem; 64 | padding: 1rem; 65 | border-radius: .4rem; 66 | } 67 | 68 | a.cart p { 69 | margin: 0; 70 | } 71 | 72 | a.cart:hover { 73 | background-color: #B5C0CE; 74 | } -------------------------------------------------------------------------------- /Flexbox Responsive/Responsive Navigation/Before/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Desktop Navigation 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 | 20 | 21 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 |

Cart

39 | 40 |
41 |
42 | 43 | 44 | -------------------------------------------------------------------------------- /Flexbox Responsive/Responsive News Article/After/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /Flexbox Responsive/Responsive News Article/After/css/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | background: #FCF5EB; 8 | font-family: "Poppins"; 9 | } 10 | 11 | h1 { 12 | font-family: 'Playfair Display'; 13 | } 14 | 15 | h1.mainhead { 16 | font-size: 4.4rem; 17 | margin-top: 2em; 18 | position: relative; 19 | } 20 | 21 | h1.mainhead::before { 22 | position: absolute; 23 | content: 'N'; 24 | top: -13rem; 25 | left: -8rem; 26 | font-size: 30rem; 27 | color: rgba(0,0,0,0.05); 28 | pointer-events: none; 29 | z-index: -1; 30 | } 31 | 32 | main { 33 | margin: 0 auto; 34 | padding: 2.4em; 35 | max-width: 1200px; 36 | } 37 | 38 | section { 39 | display: flex; 40 | flex-direction: column; 41 | border-top: 1px solid black; 42 | } 43 | 44 | section h1 { 45 | font-size: 2.2rem; 46 | } 47 | 48 | p { 49 | font-size: 1.4rem; 50 | } 51 | 52 | @media screen and (min-width: 600px) { 53 | section { 54 | flex-direction: row; 55 | flex-wrap: wrap; 56 | gap: 3em; 57 | } 58 | article { 59 | flex: 1; 60 | } 61 | .first { 62 | flex-basis: 100%; 63 | } 64 | } 65 | 66 | @media screen and (min-width: 900px) { 67 | 68 | .first { 69 | flex-basis: 0; 70 | } 71 | } -------------------------------------------------------------------------------- /Flexbox Responsive/Responsive News Article/After/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | News 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

Latest News

16 | 17 |
18 |
19 |

Engagement at an all time low among young voters

20 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi eveniet rem veniam quidem, aliquid impedit.

21 |
22 |
23 |

Engagement at an all time low among young voters

24 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi eveniet rem veniam quidem, aliquid impedit.

25 |
26 |
27 |

Engagement at an all time low among young voters

28 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi eveniet rem veniam quidem, aliquid impedit.

29 |
30 |
31 |
32 | 33 | -------------------------------------------------------------------------------- /Flexbox Responsive/Responsive News Article/Before/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5502 3 | } -------------------------------------------------------------------------------- /Flexbox Responsive/Responsive News Article/Before/css/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | 5 | body { 6 | margin: 0 6.7em; 7 | background: #FCF5EB; 8 | font-family: "Poppins"; 9 | } 10 | 11 | h1 { 12 | font-family: 'Playfair Display'; 13 | } 14 | 15 | h1.mainhead { 16 | font-size: 4.4rem; 17 | margin-top: 5em; 18 | position: relative; 19 | } 20 | 21 | h1.mainhead::before { 22 | position: absolute; 23 | content: 'N'; 24 | top: -13rem; 25 | left: -8rem; 26 | font-size: 30rem; 27 | color: rgba(0,0,0,0.05); 28 | pointer-events: none; 29 | z-index: -1; 30 | } 31 | 32 | main { 33 | margin: 5em; 34 | } 35 | 36 | section { 37 | display: flex; 38 | gap: 5.7em; 39 | border-top: 1px solid black; 40 | } 41 | 42 | section h1 { 43 | font-size: 2.2rem; 44 | } 45 | 46 | p { 47 | font-size: 1.4rem; 48 | } 49 | 50 | -------------------------------------------------------------------------------- /Flexbox Responsive/Responsive News Article/Before/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | News 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

Latest News

16 | 17 |
18 |
19 |

Engagement at an all time low among young voters

20 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi eveniet rem veniam quidem, aliquid impedit.

21 |
22 |
23 |

Engagement at an all time low among young voters

24 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi eveniet rem veniam quidem, aliquid impedit.

25 |
26 |
27 |

Engagement at an all time low among young voters

28 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi eveniet rem veniam quidem, aliquid impedit.

29 |
30 |
31 |
32 | 33 | -------------------------------------------------------------------------------- /Flexbox/Desktop Navigation/After/css/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | 5 | body { 6 | background-color: #E9EDF1; 7 | font-family: 'Nunito', sans-serif; 8 | margin: 0; 9 | } 10 | 11 | header { 12 | background-color: #DBE1E8; 13 | padding: 2.5em; 14 | } 15 | 16 | .wrapper { 17 | max-width: 1200px; 18 | margin: 0 auto; 19 | } 20 | 21 | .navbar { 22 | display: flex; 23 | justify-content: space-between; 24 | align-items: center; 25 | } 26 | 27 | a.logo { 28 | color: #0460BC; 29 | font-size: 2.2rem; 30 | font-weight: bold; 31 | } 32 | a { 33 | text-decoration: none; 34 | } 35 | 36 | ul { 37 | list-style-type: none; 38 | margin: 0; 39 | padding: 0; 40 | display: flex; 41 | gap: 4.3em; 42 | } 43 | 44 | ul li a { 45 | font-size: 1.8rem; 46 | color: black; 47 | } 48 | 49 | ul li a.active { 50 | font-weight: bold; 51 | } 52 | 53 | ul li a:hover { 54 | color: #0460BC; 55 | } 56 | 57 | a.cart { 58 | background-color: #C3CCD7; 59 | display: flex; 60 | gap: 1rem; 61 | align-items: center; 62 | color: black; 63 | font-size: 1.8rem; 64 | padding: 1rem; 65 | border-radius: .4rem; 66 | } 67 | 68 | a.cart p { 69 | margin: 0; 70 | } 71 | 72 | a.cart:hover { 73 | background-color: #B5C0CE; 74 | } -------------------------------------------------------------------------------- /Flexbox/Desktop Navigation/After/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Desktop Navigation 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 | 20 | 21 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 |

Cart

39 | 40 |
41 |
42 | 43 | 44 | -------------------------------------------------------------------------------- /Flexbox/Desktop Navigation/Before/css/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | 5 | body { 6 | background-color: #E9EDF1; 7 | font-family: 'Nunito', sans-serif; 8 | margin: 0; 9 | } 10 | -------------------------------------------------------------------------------- /Flexbox/Desktop Navigation/Before/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Desktop Navigation 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Flexbox/Drum Module/After/assets/credit.txt: -------------------------------------------------------------------------------- 1 | https://unsplash.com/photos/JxufJsFmvW0 2 | https://unsplash.com/photos/bRG2C0FAQEY 3 | https://unsplash.com/photos/xHow2lkVRCs -------------------------------------------------------------------------------- /Flexbox/Drum Module/After/assets/drum1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Flexbox/Drum Module/After/assets/drum1.jpg -------------------------------------------------------------------------------- /Flexbox/Drum Module/After/assets/drum2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Flexbox/Drum Module/After/assets/drum2.jpg -------------------------------------------------------------------------------- /Flexbox/Drum Module/After/assets/drum3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Flexbox/Drum Module/After/assets/drum3.jpg -------------------------------------------------------------------------------- /Flexbox/Drum Module/After/css/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | 5 | * { 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | margin: 0; 11 | min-height: 100vh; 12 | display: grid; 13 | place-content: center; 14 | background-color: #D7DED3; 15 | font-family: 'Poppins'; 16 | } 17 | 18 | section { 19 | background: white; 20 | padding: 7em; 21 | width: 1200px; 22 | border-radius: .8em; 23 | display: flex; 24 | gap: 13.5em; 25 | } 26 | 27 | .left-col { 28 | display: flex; 29 | flex-direction: column; 30 | height: 100%; 31 | flex: .6; 32 | } 33 | 34 | h1 { 35 | font-family: 'Playfair Display', serif; 36 | font-size: 4rem; 37 | font-weight: normal; 38 | margin: 0; 39 | } 40 | 41 | p { 42 | font-size: 2rem; 43 | } 44 | 45 | a.cta { 46 | font-family: 'Playfair Display', serif; 47 | display: flex; 48 | align-items: center; 49 | gap: 1em; 50 | text-decoration: none; 51 | color: #406A29; 52 | font-weight: bold; 53 | margin-top: auto; 54 | } 55 | 56 | a.cta p { 57 | margin: 0; 58 | } 59 | 60 | .right-col { 61 | display: flex; 62 | flex: 1; 63 | flex-wrap: wrap; 64 | gap: 2.8em; 65 | } 66 | 67 | .box { 68 | width: 30%; 69 | aspect-ratio: 1/1; 70 | gap: 1em; 71 | border-radius: .6em; 72 | } 73 | 74 | .box:nth-of-type(1) { 75 | background-image: url('../assets/drum1.jpg'); 76 | background-size: cover; 77 | } 78 | 79 | .box:nth-of-type(2) { 80 | background-image: url('../assets/drum2.jpg'); 81 | background-size: cover; 82 | } 83 | 84 | .box:nth-of-type(3) { 85 | background-color: #D0E1BB; 86 | } 87 | 88 | .box:nth-of-type(6) { 89 | background-image: url('../assets/drum3.jpg'); 90 | background-size: cover; 91 | } 92 | .box:nth-of-type(5) { 93 | background-color: #BBC8E1; 94 | } 95 | 96 | -------------------------------------------------------------------------------- /Flexbox/Drum Module/After/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Drum Module 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |

The best sounding drum module

20 |

..that money can buy

21 | 22 | 23 |

Shop drum kits

24 | 25 | 26 | 27 | 28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 | 39 | 40 | -------------------------------------------------------------------------------- /Flexbox/Drum Module/Before/assets/credit.txt: -------------------------------------------------------------------------------- 1 | https://unsplash.com/photos/JxufJsFmvW0 2 | https://unsplash.com/photos/bRG2C0FAQEY 3 | https://unsplash.com/photos/xHow2lkVRCs -------------------------------------------------------------------------------- /Flexbox/Drum Module/Before/assets/drum1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Flexbox/Drum Module/Before/assets/drum1.jpg -------------------------------------------------------------------------------- /Flexbox/Drum Module/Before/assets/drum2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Flexbox/Drum Module/Before/assets/drum2.jpg -------------------------------------------------------------------------------- /Flexbox/Drum Module/Before/assets/drum3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Flexbox/Drum Module/Before/assets/drum3.jpg -------------------------------------------------------------------------------- /Flexbox/Drum Module/Before/css/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | 5 | * { 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | margin: 0; 11 | min-height: 100vh; 12 | display: grid; 13 | place-content: center; 14 | background-color: #D7DED3; 15 | font-family: 'Poppins'; 16 | } 17 | -------------------------------------------------------------------------------- /Flexbox/Drum Module/Before/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Drum Module 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Flexbox/Food Gallery/After/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /Flexbox/Food Gallery/After/assets/credit.txt: -------------------------------------------------------------------------------- 1 | https://unsplash.com/photos/ZuIDLSz3XLg 2 | 3 | https://unsplash.com/photos/MqT0asuoIcU 4 | 5 | https://unsplash.com/photos/kcA-c3f_3FE 6 | 7 | https://unsplash.com/photos/-YHSwy6uqvk -------------------------------------------------------------------------------- /Flexbox/Food Gallery/After/assets/food1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Flexbox/Food Gallery/After/assets/food1.jpg -------------------------------------------------------------------------------- /Flexbox/Food Gallery/After/assets/food2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Flexbox/Food Gallery/After/assets/food2.jpg -------------------------------------------------------------------------------- /Flexbox/Food Gallery/After/assets/food3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Flexbox/Food Gallery/After/assets/food3.jpg -------------------------------------------------------------------------------- /Flexbox/Food Gallery/After/assets/food4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Flexbox/Food Gallery/After/assets/food4.jpg -------------------------------------------------------------------------------- /Flexbox/Food Gallery/After/css/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | 5 | body { 6 | font-family: "Playfair Display"; 7 | margin: 12em; 8 | } 9 | 10 | h1 { 11 | font-size: 3.2rem; 12 | font-weight: normal; 13 | margin-bottom: 6.8rem; 14 | } 15 | 16 | span { 17 | color: #07801E; 18 | } 19 | 20 | .container { 21 | display: flex; 22 | gap: 2em; 23 | width: 100%; 24 | height: 400px; 25 | 26 | } 27 | 28 | img { 29 | width: 250px; 30 | height: 200px; 31 | object-fit: cover; 32 | border-radius: 1em; 33 | } 34 | 35 | .second { 36 | flex-grow: 2; 37 | } -------------------------------------------------------------------------------- /Flexbox/Food Gallery/After/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Food Gallery 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

Food for thought

17 | 18 |
19 | Food 20 | Food 21 | Food 22 | Food 23 |
24 | 25 | -------------------------------------------------------------------------------- /Flexbox/Food Gallery/Before/assets/credit.txt: -------------------------------------------------------------------------------- 1 | https://unsplash.com/photos/ZuIDLSz3XLg 2 | 3 | https://unsplash.com/photos/MqT0asuoIcU 4 | 5 | https://unsplash.com/photos/kcA-c3f_3FE 6 | 7 | https://unsplash.com/photos/-YHSwy6uqvk -------------------------------------------------------------------------------- /Flexbox/Food Gallery/Before/assets/food1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Flexbox/Food Gallery/Before/assets/food1.jpg -------------------------------------------------------------------------------- /Flexbox/Food Gallery/Before/assets/food2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Flexbox/Food Gallery/Before/assets/food2.jpg -------------------------------------------------------------------------------- /Flexbox/Food Gallery/Before/assets/food3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Flexbox/Food Gallery/Before/assets/food3.jpg -------------------------------------------------------------------------------- /Flexbox/Food Gallery/Before/assets/food4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Flexbox/Food Gallery/Before/assets/food4.jpg -------------------------------------------------------------------------------- /Flexbox/Food Gallery/Before/css/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | 5 | body { 6 | font-family: "Playfair Display"; 7 | margin: 12em; 8 | } 9 | -------------------------------------------------------------------------------- /Flexbox/Food Gallery/Before/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Food Gallery 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Flexbox/News Article Listing/After/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /Flexbox/News Article Listing/After/css/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | 5 | body { 6 | margin: 0 6.7em; 7 | background: #FCF5EB; 8 | font-family: "Poppins"; 9 | } 10 | 11 | h1 { 12 | font-family: 'Playfair Display'; 13 | } 14 | 15 | h1.mainhead { 16 | font-size: 4.4rem; 17 | margin-top: 5em; 18 | position: relative; 19 | } 20 | 21 | h1.mainhead::before { 22 | position: absolute; 23 | content: 'N'; 24 | top: -13rem; 25 | left: -8rem; 26 | font-size: 30rem; 27 | color: rgba(0,0,0,0.05); 28 | pointer-events: none; 29 | z-index: -1; 30 | } 31 | 32 | main { 33 | margin: 5em; 34 | } 35 | 36 | section { 37 | display: flex; 38 | gap: 5.7em; 39 | border-top: 1px solid black; 40 | } 41 | 42 | section h1 { 43 | font-size: 2.2rem; 44 | } 45 | 46 | p { 47 | font-size: 1.4rem; 48 | } 49 | 50 | -------------------------------------------------------------------------------- /Flexbox/News Article Listing/After/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

Latest News

16 | 17 |
18 |
19 |

Engagement at an all time low among young voters

20 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi eveniet rem veniam quidem, aliquid impedit.

21 |
22 |
23 |

Engagement at an all time low among young voters

24 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi eveniet rem veniam quidem, aliquid impedit.

25 |
26 |
27 |

Engagement at an all time low among young voters

28 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi eveniet rem veniam quidem, aliquid impedit.

29 |
30 |
31 |
32 | 33 | -------------------------------------------------------------------------------- /Flexbox/News Article Listing/Starter/css/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | 5 | body { 6 | margin: 0 6.7em; 7 | background: #FCF5EB; 8 | font-family: "Poppins"; 9 | } -------------------------------------------------------------------------------- /Flexbox/News Article Listing/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Article Listings 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Flexbox/User Avatar/After/assets/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Flexbox/User Avatar/After/assets/avatar.jpg -------------------------------------------------------------------------------- /Flexbox/User Avatar/After/assets/credit.txt: -------------------------------------------------------------------------------- 1 | avatar.jpg: 2 | https://unsplash.com/photos/3TLl_97HNJo -------------------------------------------------------------------------------- /Flexbox/User Avatar/After/css/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | * { 5 | box-sizing: border-box; 6 | } 7 | body { 8 | background: #CBE1F1; 9 | font-family: "Nunito"; 10 | margin: 3em; 11 | } 12 | 13 | img { 14 | width: 60px; 15 | height: 60px; 16 | object-fit: cover; 17 | border-radius: 50%; 18 | } 19 | 20 | .avatar { 21 | background-color: white; 22 | border-radius: 20em; 23 | display: flex; 24 | width: 100%; 25 | justify-content: space-between; 26 | align-items: center; 27 | padding: 2em; 28 | } 29 | 30 | .left-col { 31 | display: flex; 32 | align-items: center; 33 | } 34 | 35 | p { 36 | font-size: 2.5rem; 37 | font-weight: bold; 38 | margin: 0 0 0 1em; 39 | } 40 | 41 | .status { 42 | width: 2em; 43 | height: 2em; 44 | background: #5DBC3C; 45 | border-radius: 50%; 46 | margin-right: 3em; 47 | } -------------------------------------------------------------------------------- /Flexbox/User Avatar/After/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | Jane Doe 17 |

Jane Doe

18 |
19 | 20 |
21 |
22 | 23 | -------------------------------------------------------------------------------- /Flexbox/User Avatar/Starter/assets/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Flexbox/User Avatar/Starter/assets/avatar.jpg -------------------------------------------------------------------------------- /Flexbox/User Avatar/Starter/assets/credit.txt: -------------------------------------------------------------------------------- 1 | avatar.jpg: 2 | https://unsplash.com/photos/3TLl_97HNJo -------------------------------------------------------------------------------- /Flexbox/User Avatar/Starter/css/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | * { 5 | box-sizing: border-box; 6 | } 7 | body { 8 | background: #CBE1F1; 9 | font-family: "Nunito"; 10 | margin: 3em; 11 | } 12 | -------------------------------------------------------------------------------- /Flexbox/User Avatar/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | User Avatar 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Grid Responsive/Brutalist Fashion Responsive/After/assets/pet1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid Responsive/Brutalist Fashion Responsive/After/assets/pet1.jpg -------------------------------------------------------------------------------- /Grid Responsive/Brutalist Fashion Responsive/After/assets/pet2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid Responsive/Brutalist Fashion Responsive/After/assets/pet2.jpg -------------------------------------------------------------------------------- /Grid Responsive/Brutalist Fashion Responsive/After/assets/pet3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid Responsive/Brutalist Fashion Responsive/After/assets/pet3.jpg -------------------------------------------------------------------------------- /Grid Responsive/Brutalist Fashion Responsive/After/css/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | 5 | body { 6 | background: #F1EFE9; 7 | font-family: 'Montserrat', sans-serif; 8 | height: 100vh; 9 | } 10 | 11 | .wrapper { 12 | max-width: 1000px; 13 | margin: 0 auto; 14 | } 15 | 16 | section { 17 | position: relative; 18 | background: #F1EFE9; 19 | height: 500px; 20 | margin-top: 20em; 21 | padding: 2em; 22 | 23 | display: grid; 24 | grid-template-areas: 25 | "header header" 26 | "dog content" 27 | "fish tiger"; 28 | 29 | grid-template-columns: 1fr 2fr; 30 | grid-template-rows: repeat(2, auto) 100px; 31 | 32 | gap: 2em; 33 | } 34 | .tiger { 35 | grid-area: tiger; 36 | } 37 | h1 { 38 | grid-area: header; 39 | } 40 | .dog { 41 | grid-area: dog; 42 | } 43 | .content { 44 | grid-area: content; 45 | } 46 | .fish { 47 | grid-area: fish; 48 | } 49 | 50 | img { 51 | width: 100%; 52 | height: 100%; 53 | object-fit: cover; 54 | aspect-ratio: 1/1; 55 | } 56 | 57 | section:before { 58 | position: absolute; 59 | content: 'wow'; 60 | font-weight: 800; 61 | z-index: -1; 62 | font-size: 30rem; 63 | top: -190px; 64 | left: -300px; 65 | } 66 | 67 | h1 { 68 | font-size: 8rem; 69 | text-transform: uppercase; 70 | font-weight: 300; 71 | margin: 0; 72 | line-height: 1em; 73 | } 74 | 75 | p, a { 76 | font-size: 2.2rem; 77 | text-transform: uppercase; 78 | } 79 | p { 80 | margin: 0; 81 | } 82 | a { 83 | margin-top: 3em; 84 | color: black; 85 | display: flex; 86 | align-items: center; 87 | gap: 1em; 88 | } 89 | 90 | .content { 91 | display: flex; 92 | flex-direction: column; 93 | justify-content: space-between; 94 | } 95 | 96 | svg { 97 | display: none; 98 | } 99 | 100 | @media only screen and (min-width: 700px) { 101 | section { 102 | grid-template-areas: 103 | "tiger header header" 104 | "tiger dog content" 105 | "fish dog content"; 106 | 107 | grid-template-columns: repeat(2, 1fr) 2fr; 108 | grid-template-rows: auto 1fr 100px; 109 | } 110 | } -------------------------------------------------------------------------------- /Grid Responsive/Brutalist Fashion Responsive/After/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Brutalist Fashion 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | Pet 17 |

Get Fashion

18 | Pet 19 |
20 |

21 | Shop the new fall collection of wow appareal. The hottest trends, 22 | the latest vibes, and the best eco-friendly quality. 23 |

24 | 25 | Shop wow 26 | 27 | 28 | 29 | 30 |
31 | 32 | Pet 33 |
34 |
35 | 36 | -------------------------------------------------------------------------------- /Grid Responsive/Brutalist Fashion Responsive/Before/assets/pet1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid Responsive/Brutalist Fashion Responsive/Before/assets/pet1.jpg -------------------------------------------------------------------------------- /Grid Responsive/Brutalist Fashion Responsive/Before/assets/pet2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid Responsive/Brutalist Fashion Responsive/Before/assets/pet2.jpg -------------------------------------------------------------------------------- /Grid Responsive/Brutalist Fashion Responsive/Before/assets/pet3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid Responsive/Brutalist Fashion Responsive/Before/assets/pet3.jpg -------------------------------------------------------------------------------- /Grid Responsive/Brutalist Fashion Responsive/Before/css/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | 5 | body { 6 | background: #F1EFE9; 7 | font-family: 'Montserrat', sans-serif; 8 | height: 100vh; 9 | } 10 | 11 | .wrapper { 12 | width: 1000px; 13 | margin: 0 auto; 14 | } 15 | 16 | section { 17 | position: relative; 18 | background: #F1EFE9; 19 | height: 500px; 20 | margin-top: 20em; 21 | padding: 2em; 22 | 23 | display: grid; 24 | grid-template-areas: 25 | "tiger header header" 26 | "tiger dog content" 27 | "fish dog content"; 28 | 29 | grid-template-columns: repeat(2, 1fr) 2fr; 30 | grid-template-rows: auto 1fr 100px; 31 | 32 | gap: 2em; 33 | } 34 | .tiger { 35 | grid-area: tiger; 36 | } 37 | h1 { 38 | grid-area: header; 39 | } 40 | .dog { 41 | grid-area: dog; 42 | } 43 | .content { 44 | grid-area: content; 45 | } 46 | .fish { 47 | grid-area: fish; 48 | } 49 | 50 | img { 51 | width: 100%; 52 | height: 100%; 53 | object-fit: cover; 54 | aspect-ratio: 1/1; 55 | } 56 | 57 | section:before { 58 | position: absolute; 59 | content: 'wow'; 60 | font-weight: 800; 61 | z-index: -1; 62 | font-size: 30rem; 63 | top: -190px; 64 | left: -300px; 65 | } 66 | 67 | h1 { 68 | font-size: 8rem; 69 | text-transform: uppercase; 70 | font-weight: 300; 71 | margin: 0; 72 | line-height: 1em; 73 | } 74 | 75 | p, a { 76 | font-size: 2.2rem; 77 | text-transform: uppercase; 78 | } 79 | p { 80 | margin: 0; 81 | } 82 | a { 83 | text-decoration: none; 84 | color: black; 85 | display: flex; 86 | align-items: center; 87 | gap: 1em; 88 | } 89 | 90 | .content { 91 | display: flex; 92 | flex-direction: column; 93 | justify-content: space-between; 94 | } -------------------------------------------------------------------------------- /Grid Responsive/Brutalist Fashion Responsive/Before/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Brutalist Fashion 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | Pet 17 |

Get Fashion

18 | Pet 19 |
20 |

21 | Shop the new fall collection of wow appareal. The hottest trends, 22 | the latest vibes, and the best eco-friendly quality. 23 |

24 | 25 | Shop wow 26 | 27 | 28 | 29 | 30 |
31 | 32 | Pet 33 |
34 |
35 | 36 | -------------------------------------------------------------------------------- /Grid Responsive/Car Gallery Responsive/After/assets/car1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid Responsive/Car Gallery Responsive/After/assets/car1.jpg -------------------------------------------------------------------------------- /Grid Responsive/Car Gallery Responsive/After/assets/car2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid Responsive/Car Gallery Responsive/After/assets/car2.jpg -------------------------------------------------------------------------------- /Grid Responsive/Car Gallery Responsive/After/assets/car3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid Responsive/Car Gallery Responsive/After/assets/car3.jpg -------------------------------------------------------------------------------- /Grid Responsive/Car Gallery Responsive/After/assets/car4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid Responsive/Car Gallery Responsive/After/assets/car4.jpg -------------------------------------------------------------------------------- /Grid Responsive/Car Gallery Responsive/After/assets/car5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid Responsive/Car Gallery Responsive/After/assets/car5.jpg -------------------------------------------------------------------------------- /Grid Responsive/Car Gallery Responsive/After/css/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | height: 100vh; 8 | background: #1F1F1F; 9 | } 10 | 11 | .gallery { 12 | max-width: 1200px; 13 | margin: 7em auto 0; 14 | height: 100vh; 15 | } 16 | 17 | .item { 18 | background-size: cover; 19 | height: 300px; 20 | } 21 | 22 | .item:nth-of-type(1) { background-image: url('../assets/car1.jpg'); } 23 | .item:nth-of-type(2) { background-image: url('../assets/car2.jpg'); } 24 | .item:nth-of-type(3) { background-image: url('../assets/car3.jpg'); } 25 | .item:nth-of-type(4) { background-image: url('../assets/car4.jpg'); } 26 | .item:nth-of-type(5) { background-image: url('../assets/car5.jpg'); } 27 | 28 | @media only screen and (min-width: 600px) { 29 | 30 | .gallery { 31 | display: grid; 32 | grid-template-columns: repeat(2, 1fr); 33 | grid-template-rows: repeat(3,1fr); 34 | } 35 | 36 | .item { 37 | height: auto; 38 | } 39 | 40 | .item:nth-of-type(1) { 41 | grid-row: 1 / 3; 42 | } 43 | } 44 | 45 | @media only screen and (min-width: 1000px) { 46 | 47 | .item:nth-of-type(1) { 48 | grid-row: unset; 49 | } 50 | 51 | .gallery { 52 | height: 513px; 53 | grid-template-columns: repeat(3, 1fr); 54 | grid-template-rows: 40% 1fr; 55 | 56 | 57 | grid-template-areas: 58 | ". . ." 59 | ". bigimg bigimg"; 60 | } 61 | 62 | .item:nth-of-type(5) { 63 | grid-column-start: 2; 64 | grid-column-end: 4; 65 | 66 | grid-column: 2 / 4; 67 | 68 | grid-area: bigimg; 69 | } 70 | } 71 | 72 | -------------------------------------------------------------------------------- /Grid Responsive/Car Gallery Responsive/After/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Car Gallery 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | 19 | -------------------------------------------------------------------------------- /Grid Responsive/Car Gallery Responsive/Before/assets/car1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid Responsive/Car Gallery Responsive/Before/assets/car1.jpg -------------------------------------------------------------------------------- /Grid Responsive/Car Gallery Responsive/Before/assets/car2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid Responsive/Car Gallery Responsive/Before/assets/car2.jpg -------------------------------------------------------------------------------- /Grid Responsive/Car Gallery Responsive/Before/assets/car3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid Responsive/Car Gallery Responsive/Before/assets/car3.jpg -------------------------------------------------------------------------------- /Grid Responsive/Car Gallery Responsive/Before/assets/car4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid Responsive/Car Gallery Responsive/Before/assets/car4.jpg -------------------------------------------------------------------------------- /Grid Responsive/Car Gallery Responsive/Before/assets/car5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid Responsive/Car Gallery Responsive/Before/assets/car5.jpg -------------------------------------------------------------------------------- /Grid Responsive/Car Gallery Responsive/Before/css/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | height: 100vh; 8 | background: #1F1F1F; 9 | } 10 | 11 | .gallery { 12 | max-width: 1200px; 13 | margin: 7em auto 0; 14 | height: 513px; 15 | display: grid; 16 | grid-template-columns: repeat(3, 1fr); 17 | grid-template-rows: 40% 1fr; 18 | 19 | 20 | grid-template-areas: 21 | ". . ." 22 | ". bigimg bigimg"; 23 | } 24 | 25 | .item { 26 | background-size: cover; 27 | } 28 | 29 | .item:nth-of-type(1) { background-image: url('../assets/car1.jpg'); } 30 | .item:nth-of-type(2) { background-image: url('../assets/car2.jpg'); } 31 | .item:nth-of-type(3) { background-image: url('../assets/car3.jpg'); } 32 | .item:nth-of-type(4) { background-image: url('../assets/car4.jpg'); } 33 | .item:nth-of-type(5) { 34 | background-image: url('../assets/car5.jpg'); 35 | 36 | /* initial 37 | grid-column-start: 2; 38 | grid-column-end: 4; 39 | 40 | grid-column: 2 / 4; */ 41 | 42 | grid-area: bigimg; 43 | 44 | } 45 | 46 | -------------------------------------------------------------------------------- /Grid Responsive/Car Gallery Responsive/Before/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Car Gallery 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | 19 | -------------------------------------------------------------------------------- /Grid Responsive/Fitness Blip Responsive/After/assets/fitness1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid Responsive/Fitness Blip Responsive/After/assets/fitness1.jpg -------------------------------------------------------------------------------- /Grid Responsive/Fitness Blip Responsive/After/assets/fitness2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid Responsive/Fitness Blip Responsive/After/assets/fitness2.jpg -------------------------------------------------------------------------------- /Grid Responsive/Fitness Blip Responsive/After/assets/fitness3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid Responsive/Fitness Blip Responsive/After/assets/fitness3.jpg -------------------------------------------------------------------------------- /Grid Responsive/Fitness Blip Responsive/After/css/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | 5 | body { 6 | background: #DAE0EA; 7 | font-family: 'Inter'; 8 | margin: 0 4em; 9 | } 10 | 11 | img { 12 | width: 100%; 13 | height: 100%; 14 | object-fit: cover; 15 | aspect-ratio: 1/1; 16 | border-radius: 1em; 17 | } 18 | 19 | section { 20 | display: flex; 21 | flex-direction: column; 22 | gap:8em; 23 | max-width: 1000px; 24 | margin: 5em auto; 25 | position: relative; 26 | } 27 | section:before { 28 | position: absolute; 29 | content: ''; 30 | top: 0; 31 | left: -50px; 32 | width: 150px; 33 | height: 150px; 34 | background: #C7D0E0; 35 | border-radius: .5em; 36 | z-index: -1; 37 | } 38 | 39 | .leftcol { 40 | flex: 2; 41 | display: flex; 42 | flex-direction: column; 43 | justify-content: space-between; 44 | } 45 | 46 | .rightcol { 47 | flex: 1; 48 | display: grid; 49 | grid-template-areas: 50 | ". ." 51 | "primary primary"; 52 | gap: 2.3rem; 53 | } 54 | 55 | .primary { 56 | grid-area: primary; 57 | height: 200px; 58 | } 59 | 60 | h1 { 61 | font-size: 4.3rem; 62 | margin-top: 1.7em; 63 | } 64 | 65 | p { 66 | font-size: 2.2rem; 67 | } 68 | 69 | a.cta { 70 | display: flex; 71 | align-items: center; 72 | justify-content: center; 73 | gap: 1em; 74 | background: #1A63DD; 75 | color: white; 76 | text-decoration: none; 77 | padding: 1.3em; 78 | font-size: 1.8rem; 79 | font-weight: bold; 80 | border-radius: .25em; 81 | } 82 | 83 | 84 | @media only screen and (min-width: 600px) { 85 | .rightcol { 86 | flex: 1; 87 | display: grid; 88 | grid-template-areas: 89 | "primary ." 90 | "primary ."; 91 | gap: 2.3rem; 92 | } 93 | 94 | a.cta { 95 | display: inline-flex; 96 | align-self: flex-start; 97 | justify-content: auto; 98 | } 99 | 100 | .primary { 101 | height: 100%; 102 | } 103 | } 104 | 105 | @media only screen and (min-width: 1000px) { 106 | section { 107 | margin-top: 20em; 108 | flex-direction: row; 109 | gap: 2em; 110 | } 111 | } -------------------------------------------------------------------------------- /Grid Responsive/Fitness Blip Responsive/After/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Fitness Blip 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 |

Fitness made simple

18 |

It's all about calories in, vs calories out. Discover what the expects know.

19 |
20 | 21 | Lose fat today 22 | 23 | 24 | 25 | 26 |
27 |
28 | Fitness picture 29 | Fitness picture 30 | Fitness picture 31 |
32 |
33 | 34 | -------------------------------------------------------------------------------- /Grid Responsive/Fitness Blip Responsive/Before/assets/fitness1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid Responsive/Fitness Blip Responsive/Before/assets/fitness1.jpg -------------------------------------------------------------------------------- /Grid Responsive/Fitness Blip Responsive/Before/assets/fitness2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid Responsive/Fitness Blip Responsive/Before/assets/fitness2.jpg -------------------------------------------------------------------------------- /Grid Responsive/Fitness Blip Responsive/Before/assets/fitness3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid Responsive/Fitness Blip Responsive/Before/assets/fitness3.jpg -------------------------------------------------------------------------------- /Grid Responsive/Fitness Blip Responsive/Before/css/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | 5 | body { 6 | background: #DAE0EA; 7 | font-family: 'Inter'; 8 | } 9 | 10 | img { 11 | width: 100%; 12 | height: 100%; 13 | object-fit: cover; 14 | aspect-ratio: 1/1; 15 | border-radius: 1em; 16 | } 17 | 18 | section { 19 | display: flex; 20 | width: 1000px; 21 | margin: 20em auto; 22 | position: relative; 23 | } 24 | section:before { 25 | position: absolute; 26 | content: ''; 27 | top: 0; 28 | left: -50px; 29 | width: 150px; 30 | height: 150px; 31 | background: #C7D0E0; 32 | border-radius: .5em; 33 | z-index: -1; 34 | } 35 | 36 | .leftcol { 37 | flex: 2; 38 | display: flex; 39 | flex-direction: column; 40 | justify-content: space-between; 41 | } 42 | 43 | .rightcol { 44 | flex: 1; 45 | display: grid; 46 | grid-template-areas: 47 | "primary ." 48 | "primary ."; 49 | gap: 2.3rem; 50 | } 51 | 52 | .primary { 53 | grid-area: primary; 54 | } 55 | 56 | h1 { 57 | font-size: 4.3rem; 58 | margin-top: 1.7em; 59 | } 60 | 61 | p { 62 | font-size: 2.2rem; 63 | } 64 | 65 | a.cta { 66 | display: inline-flex; 67 | align-items: center; 68 | align-self: flex-start; 69 | gap: 1em; 70 | background: #1A63DD; 71 | color: white; 72 | text-decoration: none; 73 | padding: 1.3em; 74 | font-size: 1.8rem; 75 | font-weight: bold; 76 | border-radius: .25em; 77 | } -------------------------------------------------------------------------------- /Grid Responsive/Fitness Blip Responsive/Before/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Fitness Blip 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 |

Fitness made simple

18 |

It's all about calories in, vs calories out. Discover what the expects know.

19 |
20 | 21 | Lose fat today 22 | 23 | 24 | 25 | 26 |
27 |
28 | Fitness picture 29 | Fitness picture 30 | Fitness picture 31 |
32 |
33 | 34 | -------------------------------------------------------------------------------- /Grid/Brutalist Fashion/After/assets/pet1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid/Brutalist Fashion/After/assets/pet1.jpg -------------------------------------------------------------------------------- /Grid/Brutalist Fashion/After/assets/pet2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid/Brutalist Fashion/After/assets/pet2.jpg -------------------------------------------------------------------------------- /Grid/Brutalist Fashion/After/assets/pet3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid/Brutalist Fashion/After/assets/pet3.jpg -------------------------------------------------------------------------------- /Grid/Brutalist Fashion/After/css/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | 5 | body { 6 | background: #F1EFE9; 7 | font-family: 'Montserrat', sans-serif; 8 | height: 100vh; 9 | } 10 | 11 | .wrapper { 12 | width: 1000px; 13 | margin: 0 auto; 14 | } 15 | 16 | section { 17 | position: relative; 18 | background: #F1EFE9; 19 | height: 500px; 20 | margin-top: 20em; 21 | padding: 2em; 22 | 23 | display: grid; 24 | grid-template-areas: 25 | "tiger header header" 26 | "tiger dog content" 27 | "fish dog content"; 28 | 29 | grid-template-columns: repeat(2, 1fr) 2fr; 30 | grid-template-rows: auto 1fr 100px; 31 | 32 | gap: 2em; 33 | } 34 | .tiger { 35 | grid-area: tiger; 36 | } 37 | h1 { 38 | grid-area: header; 39 | } 40 | .dog { 41 | grid-area: dog; 42 | } 43 | .content { 44 | grid-area: content; 45 | } 46 | .fish { 47 | grid-area: fish; 48 | } 49 | 50 | img { 51 | width: 100%; 52 | height: 100%; 53 | object-fit: cover; 54 | aspect-ratio: 1/1; 55 | } 56 | 57 | section:before { 58 | position: absolute; 59 | content: 'wow'; 60 | font-weight: 800; 61 | z-index: -1; 62 | font-size: 30rem; 63 | top: -190px; 64 | left: -300px; 65 | } 66 | 67 | h1 { 68 | font-size: 8rem; 69 | text-transform: uppercase; 70 | font-weight: 300; 71 | margin: 0; 72 | line-height: 1em; 73 | } 74 | 75 | p, a { 76 | font-size: 2.2rem; 77 | text-transform: uppercase; 78 | } 79 | p { 80 | margin: 0; 81 | } 82 | a { 83 | text-decoration: none; 84 | color: black; 85 | display: flex; 86 | align-items: center; 87 | gap: 1em; 88 | } 89 | 90 | .content { 91 | display: flex; 92 | flex-direction: column; 93 | justify-content: space-between; 94 | } -------------------------------------------------------------------------------- /Grid/Brutalist Fashion/After/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Brutalist Fashion 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | Pet 17 |

Get Fashion

18 | Pet 19 |
20 |

21 | Shop the new fall collection of wow appareal. The hottest trends, 22 | the latest vibes, and the best eco-friendly quality. 23 |

24 | 25 | Shop wow 26 | 27 | 28 | 29 | 30 |
31 | 32 | Pet 33 |
34 |
35 | 36 | -------------------------------------------------------------------------------- /Grid/Brutalist Fashion/Before/assets/pet1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid/Brutalist Fashion/Before/assets/pet1.jpg -------------------------------------------------------------------------------- /Grid/Brutalist Fashion/Before/assets/pet2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid/Brutalist Fashion/Before/assets/pet2.jpg -------------------------------------------------------------------------------- /Grid/Brutalist Fashion/Before/assets/pet3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid/Brutalist Fashion/Before/assets/pet3.jpg -------------------------------------------------------------------------------- /Grid/Brutalist Fashion/Before/css/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | 5 | body { 6 | background: #F1EFE9; 7 | font-family: 'Montserrat', sans-serif; 8 | height: 100vh; 9 | } -------------------------------------------------------------------------------- /Grid/Brutalist Fashion/Before/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Brutalist Fashion 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Grid/Calendar/After/css/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html { 6 | font-size: 62.5%; 7 | } 8 | 9 | body { 10 | background: #0460BC; 11 | font-family: 'Poppins', sans-serif; 12 | height: 100vh; 13 | } 14 | 15 | section { 16 | background: white; 17 | border-radius: 1em; 18 | width: 380px; 19 | padding: 2em; 20 | margin: 20em auto; 21 | } 22 | 23 | header { 24 | display: flex; 25 | justify-content: space-between; 26 | margin: 1em 0; 27 | } 28 | 29 | .calendar { 30 | display: grid; 31 | grid-template-columns: repeat(7, 1fr); 32 | font-size: 1.7rem; 33 | height: 100%; 34 | text-align: center; 35 | margin-top: 1em; 36 | gap: 1em; 37 | } 38 | 39 | h1 { 40 | margin: 0; 41 | font-weight: normal; 42 | font-size: 2rem; 43 | line-height: 2em; 44 | } 45 | 46 | .gray { 47 | color: gray; 48 | } 49 | 50 | span { 51 | cursor: pointer; 52 | } 53 | span:hover { 54 | background-color: #E1E9F0; 55 | border-radius: .3em; 56 | } 57 | 58 | a { 59 | background: #E1E9F0; 60 | padding: .8em .8em .4em; 61 | border-radius: .3em; 62 | } -------------------------------------------------------------------------------- /Grid/Calendar/After/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Calendar 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | 17 | 18 | 19 | 20 | 21 |

September

22 | 23 | 24 | 25 | 26 | 27 |
28 |
29 | Mo 30 | Tu 31 | We 32 | Th 33 | Fri 34 | Sa 35 | Su 36 | 37 | 1 38 | 2 39 | 3 40 | 4 41 | 5 42 | 6 43 | 7 44 | 8 45 | 9 46 | 10 47 | 11 48 | 12 49 | 13 50 | 14 51 | 15 52 | 16 53 | 17 54 | 18 55 | 19 56 | 20 57 | 21 58 | 22 59 | 23 60 | 24 61 | 25 62 | 26 63 | 27 64 | 28 65 | 29 66 | 30 67 | 31 68 | 1 69 | 2 70 | 3 71 | 4 72 |
73 |
74 | 75 | -------------------------------------------------------------------------------- /Grid/Calendar/Before/css/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html { 6 | font-size: 62.5%; 7 | } 8 | 9 | body { 10 | background: #0460BC; 11 | font-family: 'Poppins', sans-serif; 12 | height: 100vh; 13 | } 14 | -------------------------------------------------------------------------------- /Grid/Calendar/Before/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Calendar 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Grid/Car Gallery/After/assets/car1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid/Car Gallery/After/assets/car1.jpg -------------------------------------------------------------------------------- /Grid/Car Gallery/After/assets/car2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid/Car Gallery/After/assets/car2.jpg -------------------------------------------------------------------------------- /Grid/Car Gallery/After/assets/car3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid/Car Gallery/After/assets/car3.jpg -------------------------------------------------------------------------------- /Grid/Car Gallery/After/assets/car4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid/Car Gallery/After/assets/car4.jpg -------------------------------------------------------------------------------- /Grid/Car Gallery/After/assets/car5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid/Car Gallery/After/assets/car5.jpg -------------------------------------------------------------------------------- /Grid/Car Gallery/After/css/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | height: 100vh; 8 | background: #1F1F1F; 9 | } 10 | 11 | .gallery { 12 | max-width: 1200px; 13 | margin: 7em auto 0; 14 | height: 513px; 15 | display: grid; 16 | grid-template-columns: repeat(3, 1fr); 17 | grid-template-rows: 40% 1fr; 18 | 19 | /* 20 | grid-template-areas: 21 | ". . ." 22 | ". bigimg bigimg"; */ 23 | } 24 | 25 | .item { 26 | background-size: cover; 27 | } 28 | 29 | .item:nth-of-type(1) { background-image: url('../assets/car1.jpg'); } 30 | .item:nth-of-type(2) { background-image: url('../assets/car2.jpg'); } 31 | .item:nth-of-type(3) { background-image: url('../assets/car3.jpg'); } 32 | .item:nth-of-type(4) { background-image: url('../assets/car4.jpg'); } 33 | .item:nth-of-type(5) { 34 | background-image: url('../assets/car5.jpg'); 35 | 36 | /* initial 37 | grid-column-start: 2; 38 | grid-column-end: 4; 39 | 40 | grid-column: 2 / 4; 41 | 42 | grid-area: bigimg; */ 43 | 44 | } 45 | 46 | -------------------------------------------------------------------------------- /Grid/Car Gallery/After/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Car Gallery 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | 19 | -------------------------------------------------------------------------------- /Grid/Car Gallery/Before/assets/car1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid/Car Gallery/Before/assets/car1.jpg -------------------------------------------------------------------------------- /Grid/Car Gallery/Before/assets/car2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid/Car Gallery/Before/assets/car2.jpg -------------------------------------------------------------------------------- /Grid/Car Gallery/Before/assets/car3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid/Car Gallery/Before/assets/car3.jpg -------------------------------------------------------------------------------- /Grid/Car Gallery/Before/assets/car4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid/Car Gallery/Before/assets/car4.jpg -------------------------------------------------------------------------------- /Grid/Car Gallery/Before/assets/car5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid/Car Gallery/Before/assets/car5.jpg -------------------------------------------------------------------------------- /Grid/Car Gallery/Before/css/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | height: 100vh; 8 | background: #1F1F1F; 9 | } 10 | 11 | -------------------------------------------------------------------------------- /Grid/Car Gallery/Before/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Car Gallery 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Grid/Fitness Blip/After/assets/fitness1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid/Fitness Blip/After/assets/fitness1.jpg -------------------------------------------------------------------------------- /Grid/Fitness Blip/After/assets/fitness2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid/Fitness Blip/After/assets/fitness2.jpg -------------------------------------------------------------------------------- /Grid/Fitness Blip/After/assets/fitness3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid/Fitness Blip/After/assets/fitness3.jpg -------------------------------------------------------------------------------- /Grid/Fitness Blip/After/css/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | 5 | body { 6 | background: #DAE0EA; 7 | font-family: 'Inter'; 8 | } 9 | 10 | img { 11 | width: 100%; 12 | height: 100%; 13 | object-fit: cover; 14 | aspect-ratio: 1/1; 15 | border-radius: 1em; 16 | } 17 | 18 | section { 19 | display: flex; 20 | width: 1000px; 21 | margin: 20em auto; 22 | position: relative; 23 | } 24 | section:before { 25 | position: absolute; 26 | content: ''; 27 | top: 0; 28 | left: -50px; 29 | width: 150px; 30 | height: 150px; 31 | background: #C7D0E0; 32 | border-radius: .5em; 33 | z-index: -1; 34 | } 35 | 36 | .leftcol { 37 | flex: 2; 38 | display: flex; 39 | flex-direction: column; 40 | justify-content: space-between; 41 | } 42 | 43 | .rightcol { 44 | flex: 1; 45 | display: grid; 46 | grid-template-areas: 47 | "primary ." 48 | "primary ."; 49 | gap: 2.3rem; 50 | } 51 | 52 | .primary { 53 | grid-area: primary; 54 | } 55 | 56 | h1 { 57 | font-size: 4.3rem; 58 | margin-top: 1.7em; 59 | } 60 | 61 | p { 62 | font-size: 2.2rem; 63 | } 64 | 65 | a.cta { 66 | display: inline-flex; 67 | align-items: center; 68 | align-self: flex-start; 69 | gap: 1em; 70 | background: #1A63DD; 71 | color: white; 72 | text-decoration: none; 73 | padding: 1.3em; 74 | font-size: 1.8rem; 75 | font-weight: bold; 76 | border-radius: .25em; 77 | } -------------------------------------------------------------------------------- /Grid/Fitness Blip/After/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Fitness Blip 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 |

Fitness made simple

18 |

It's all about calories in, vs calories out. Discover what the expects know.

19 |
20 | 21 | Lose fat today 22 | 23 | 24 | 25 | 26 |
27 |
28 | Fitness picture 29 | Fitness picture 30 | Fitness picture 31 |
32 |
33 | 34 | -------------------------------------------------------------------------------- /Grid/Fitness Blip/Before/assets/fitness1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid/Fitness Blip/Before/assets/fitness1.jpg -------------------------------------------------------------------------------- /Grid/Fitness Blip/Before/assets/fitness2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid/Fitness Blip/Before/assets/fitness2.jpg -------------------------------------------------------------------------------- /Grid/Fitness Blip/Before/assets/fitness3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Grid/Fitness Blip/Before/assets/fitness3.jpg -------------------------------------------------------------------------------- /Grid/Fitness Blip/Before/css/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | 5 | body { 6 | background: #DAE0EA; 7 | font-family: 'Inter'; 8 | } 9 | -------------------------------------------------------------------------------- /Grid/Fitness Blip/Before/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Fitness Blip 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Grid/Grid Basics/After/css/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: 'Nunito'; 4 | } 5 | 6 | .gallery > div { 7 | background: rgb(0, 192, 121); 8 | text-align: center; 9 | font-size: 2rem; 10 | } 11 | 12 | .gallery { 13 | height: 100vh; 14 | } 15 | 16 | /* Ex. 1 Grid container */ 17 | 18 | .gallery { 19 | display: grid; /* inline-grid */ 20 | gap: 1em; 21 | } 22 | 23 | /* Ex. 2 Columns */ 24 | 25 | .gallery { 26 | display: grid; 27 | gap: 1em; 28 | 29 | grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; 30 | grid-template-columns: repeat(6,1fr); 31 | grid-template-columns: repeat(4, 1fr) repeat(2, auto); 32 | 33 | grid-template-columns: 1fr 2fr; 34 | grid-template-columns: 2fr auto; 35 | grid-template-columns: 300px 30% auto; 36 | 37 | grid-template-columns: minmax(270px, 30%) auto; 38 | } 39 | 40 | /* Ex. 3 Rows */ 41 | 42 | .gallery { 43 | display: grid; 44 | gap: 1em; 45 | 46 | grid-template-columns: inherit; 47 | grid-template-rows: 1fr; 48 | 49 | grid-template-rows: repeat(6,1fr); 50 | grid-template-rows: repeat(2, 300px) repeat(4, auto); 51 | grid-template-rows: repeat(2, minmax(100px, 200px)) repeat(4, auto); 52 | } 53 | 54 | 55 | /* Ex. 4 Columns and Rows */ 56 | 57 | .gallery { 58 | display: grid; 59 | gap: 1em; 60 | 61 | grid-template-rows: inherit; 62 | 63 | grid-template-columns: 2fr 1fr; 64 | grid-template-rows: 2fr 1fr; 65 | } 66 | 67 | 68 | /* Ex. 4 Aligning via grid parent */ 69 | 70 | .gallery { 71 | display: grid; 72 | gap: 1em; 73 | 74 | grid-template-columns: repeat(3,80px); 75 | grid-template-rows: 400px; 76 | 77 | align-content: space-around; /* flex start, end, space-around, space-between */ 78 | justify-content: space-between; 79 | 80 | align-content: inherit; 81 | justify-content: inherit; 82 | 83 | place-content: center; 84 | } 85 | 86 | /* Ex. 5 Merging rows and columns */ 87 | 88 | .gallery { 89 | display: grid; 90 | gap: 1em; 91 | 92 | align-content: inherit; 93 | justify-content: inherit; 94 | grid-template-columns: inherit; 95 | grid-template-rows: inherit; 96 | 97 | grid-template-columns: repeat(2,1fr); 98 | } 99 | 100 | .box1 { 101 | /*grid-column-start: 1; 102 | grid-column-end: 3;*/ 103 | 104 | grid-column: 1/3; 105 | } 106 | 107 | .box3 { 108 | grid-row: 2/4; 109 | } 110 | 111 | 112 | 113 | 114 | /* Ex. 5 Merging rows and columns with template-areas */ 115 | 116 | .box1 { 117 | grid-column: unset; 118 | } 119 | 120 | .box3 { 121 | grid-row: unset; 122 | } 123 | 124 | .gallery { 125 | display: grid; 126 | gap: 1em; 127 | 128 | align-content: inherit; 129 | justify-content: inherit; 130 | grid-template-columns: inherit; 131 | grid-template-rows: inherit; 132 | 133 | grid-template-areas: 134 | "header header" 135 | "leftcol rightcol" 136 | "footer footer"; 137 | 138 | grid-template-columns: 75% 1fr; 139 | grid-template-rows: auto 1fr auto; 140 | } 141 | 142 | .box1, .box2 { 143 | grid-area: header; 144 | grid-area: unset; 145 | } 146 | 147 | .box5, .box6 { 148 | grid-area: footer; 149 | grid-area: unset; 150 | } 151 | 152 | 153 | /* Aligning via grid item */ 154 | 155 | .gallery { 156 | display: grid; 157 | gap: 1em; 158 | 159 | grid-template-columns: repeat(3,1fr); 160 | grid-template-rows: 400px; 161 | } 162 | 163 | .box3 { 164 | justify-self: center; /* flex-start/end */ 165 | align-self: flex-end; 166 | } -------------------------------------------------------------------------------- /Grid/Grid Basics/After/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Grid Basics 8 | 9 | 10 | 11 |
12 |
1
13 |
2
14 |
3
15 |
4
16 |
5
17 |
6
18 |
19 | 20 | -------------------------------------------------------------------------------- /Grid/Grid Basics/Before/css/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: 'Nunito'; 4 | } 5 | 6 | .gallery > div { 7 | background: rgb(0, 192, 121); 8 | text-align: center; 9 | font-size: 2rem; 10 | } 11 | 12 | .gallery { 13 | height: 100vh; 14 | } 15 | -------------------------------------------------------------------------------- /Grid/Grid Basics/Before/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Grid Basics 8 | 9 | 10 | 11 |
12 |
1
13 |
2
14 |
3
15 |
4
16 |
5
17 |
6
18 |
19 | 20 | -------------------------------------------------------------------------------- /Project 1 - Recall/After/assets/appstore.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /Project 1 - Recall/After/assets/graphic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /Project 1 - Recall/After/assets/person.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Project 1 - Recall/After/assets/person.jpg -------------------------------------------------------------------------------- /Project 1 - Recall/After/css/main.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary-color: #7E00FD; 3 | } 4 | 5 | html {font-size: 62.5%;} 6 | 7 | p, a {font-size: 1.8rem;} 8 | a {text-decoration: none;} 9 | ul {list-style-type:none;margin:0;padding:0;} 10 | .header-cta, .arrow {display: none;} 11 | 12 | body { 13 | font-family: 'Nunito', sans-serif; 14 | margin: 0; 15 | } 16 | 17 | .navbar { 18 | display: flex; 19 | justify-content: space-between; 20 | align-items: center; 21 | } 22 | 23 | .wrapper { 24 | margin: 2.6em; 25 | } 26 | 27 | a.logo { 28 | color: var(--primary-color); 29 | font-weight: bold; 30 | font-size: 2.8rem; 31 | } 32 | 33 | header ul { 34 | display: flex; 35 | gap: 2.2em; 36 | } 37 | header ul li a { 38 | color: black; 39 | } 40 | a.active { 41 | text-decoration: underline; 42 | } 43 | 44 | /* Hero Section */ 45 | 46 | section.hero { 47 | text-align: center; 48 | } 49 | 50 | h1 { 51 | font-size: 3.2rem; 52 | margin-top: 2em; 53 | margin-bottom: .5em; 54 | } 55 | 56 | p.subhead { 57 | font-size: 2rem; 58 | } 59 | 60 | .cta-btns { 61 | display: flex; 62 | justify-content: center; 63 | gap: 1em; 64 | margin-top: 3em; 65 | } 66 | 67 | .phone { 68 | width: 90%; 69 | margin-top: 5em; 70 | position: relative; 71 | z-index: 2; 72 | } 73 | 74 | /* Features Section */ 75 | 76 | section.features { 77 | background: #7E00FD; 78 | color: white; 79 | transform: skewY(12deg) translateY(-8em); /* SKEW */ 80 | } 81 | 82 | section.features .wrapper { 83 | transform: skewY(-12deg); /* UN-SKEW */ 84 | } 85 | 86 | section.features .wrapper ul { 87 | display: flex; 88 | flex-direction: column; 89 | gap: 3em; 90 | padding: 5em 0 10em; 91 | } 92 | 93 | section.features svg { 94 | width: 3.5rem; 95 | margin-left: -.15em; 96 | } 97 | 98 | section.features strong { 99 | display: flex; 100 | flex-direction: column; 101 | font-size: 2.6rem; 102 | gap: .2em; 103 | } 104 | 105 | /* Testimonials Section */ 106 | 107 | h2 { 108 | font-family: 'Playfair Display', serif; 109 | font-size: 2.8rem; 110 | font-weight: 300; 111 | } 112 | 113 | .author-pic { 114 | width: 100%; 115 | border-radius: 1.2em; 116 | height: 17.7em; 117 | object-fit: cover; 118 | margin-bottom: 2em; 119 | } 120 | 121 | .testimonial-quote p { 122 | margin-bottom: 2em; 123 | } 124 | 125 | .author strong { 126 | display: block; 127 | font-size: 2rem; 128 | } 129 | .author a { 130 | color: black; 131 | } 132 | ul.social-nav { 133 | display: flex; 134 | gap: 1em; 135 | margin-top: 2em; 136 | 137 | } 138 | ul.social-nav svg { 139 | width: 3rem; 140 | } 141 | 142 | 143 | /* Footer Section */ 144 | 145 | footer { 146 | background: #EDEDED; 147 | padding: 1.6em 0; 148 | margin-top: 5em; 149 | } 150 | 151 | .footer-header { 152 | display: flex; 153 | justify-content: space-between; 154 | align-items: center; 155 | } 156 | 157 | footer a { 158 | color: black; 159 | } 160 | 161 | nav.footer-nav ul, nav.secondary-nav ul { 162 | display: flex; 163 | gap: 2em; 164 | } 165 | 166 | nav.footer-nav ul { 167 | justify-content: right; 168 | } 169 | 170 | nav.secondary-nav ul { 171 | margin-top: 4em; 172 | } 173 | 174 | nav.secondary-nav ul li a { 175 | color: #363636; 176 | text-decoration: underline; 177 | font-size: 1.4rem; 178 | } 179 | 180 | /* Media Queries -- Tablet */ 181 | 182 | @media only screen and (min-width: 700px) { 183 | .header-cta { 184 | display: inherit; 185 | color: white; 186 | font-size: 1.6rem; 187 | font-weight: bold; 188 | background-color: var(--primary-color); 189 | padding: .5em .7em; 190 | border-radius: .3em; 191 | } 192 | .hero .wrapper { 193 | display: flex; 194 | justify-content: space-between; 195 | gap: 3em; 196 | } 197 | section.hero { 198 | text-align: left; 199 | } 200 | h1 { 201 | font-size: 5.1rem; 202 | line-height: 110%; 203 | } 204 | .cta-btns { 205 | justify-content: left; 206 | } 207 | .phone { 208 | position: absolute; 209 | width: 500px; 210 | left: 0; 211 | } 212 | .hero .right-col { 213 | position: relative; 214 | width: 500px; 215 | height: 600px; 216 | overflow: hidden; 217 | } 218 | 219 | 220 | /* Features Section */ 221 | 222 | section.features { 223 | transform: skewY(7deg) translateY(-8em); /* SKEW */ 224 | position: relative; 225 | } 226 | section.features .wrapper { 227 | transform: skewY(-7deg); /* UN-SKEW */ 228 | } 229 | 230 | section.features:before { 231 | content: ''; 232 | position: absolute; 233 | background: url('../assets/graphic.svg') no-repeat; 234 | width: 205px; 235 | height: 80px; 236 | bottom: -30px; 237 | left: 10%; 238 | } 239 | 240 | section.features .wrapper ul { 241 | display: grid; 242 | grid-template-columns: repeat(2, 1fr); 243 | grid-template-rows: repeat(2, 1fr); 244 | padding: 7em 0 12em; 245 | } 246 | 247 | section.features .wrapper ul li:last-of-type { 248 | grid-column: 1/3; 249 | } 250 | 251 | 252 | 253 | /* Testimonials Section */ 254 | 255 | .testimonial-info { 256 | display: flex; 257 | gap: 2em; 258 | } 259 | .author-pic, .author { 260 | flex: 1; 261 | } 262 | .author-pic { 263 | margin: 0; 264 | } 265 | 266 | .author { 267 | display: flex; 268 | flex-direction: column; 269 | justify-content: space-between; 270 | } 271 | 272 | } 273 | 274 | /* Media Queries -- Desktop */ 275 | 276 | @media only screen and (min-width: 950px) { 277 | .wrapper { 278 | max-width: 1000px; 279 | margin: 2em auto; 280 | } 281 | 282 | .phone { 283 | position: absolute; 284 | width: 500px; 285 | left: -100px; 286 | } 287 | .hero .right-col { 288 | position: relative; 289 | width: 500px; 290 | height: 600px; 291 | overflow: inherit; 292 | } 293 | 294 | /* Features Section */ 295 | 296 | section.features .wrapper ul { 297 | grid-template-columns: repeat(3, 1fr); 298 | grid-template-rows: 1fr; 299 | height: 300px; 300 | } 301 | 302 | section.features .wrapper ul li:last-of-type { 303 | grid-column: auto; 304 | align-self: end; 305 | } 306 | 307 | section.features .wrapper ul li:nth-of-type(2) { 308 | align-self: center; 309 | } 310 | 311 | section.features:before { 312 | left: 20%; 313 | } 314 | 315 | /* Testimonials Section */ 316 | 317 | .testimonial { 318 | display: flex; 319 | gap: 4em; 320 | margin: 12em 0; 321 | } 322 | .testimonial-quote, .testimonial-info { 323 | flex: 1; 324 | } 325 | 326 | .testimonial h2 { 327 | margin-top: 0; 328 | } 329 | 330 | } -------------------------------------------------------------------------------- /Project 1 - Recall/Before/assets/graphic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /Project 1 - Recall/Before/assets/person.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Project 1 - Recall/Before/assets/person.jpg -------------------------------------------------------------------------------- /Project 1 - Recall/Before/css/main.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary-color: #7E00FD; 3 | } 4 | 5 | html {font-size: 62.5%;} 6 | 7 | p, a {font-size: 1.8rem;} 8 | a {text-decoration: none;} 9 | ul {list-style-type:none;margin:0;padding:0;} 10 | .header-cta, .arrow {display: none;} 11 | .wrapper { margin: 2.6em; } 12 | 13 | body { 14 | font-family: 'Nunito', sans-serif; 15 | margin: 0; 16 | } 17 | 18 | -------------------------------------------------------------------------------- /Project 1 - Recall/Before/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Recall 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Project 2 - Designalytics/After/assets/chart-top.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Project 2 - Designalytics/After/assets/icon-account.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Project 2 - Designalytics/After/assets/icon-home.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Project 2 - Designalytics/After/assets/icon-messages.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Project 2 - Designalytics/After/assets/icon-support.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Project 2 - Designalytics/After/assets/mobile-exit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /Project 2 - Designalytics/After/assets/right-btn.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Project 2 - Designalytics/After/assets/user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Project 2 - Designalytics/After/assets/user.jpg -------------------------------------------------------------------------------- /Project 2 - Designalytics/After/css/global.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | background-color: #1F2023; 8 | font-family: "Inter", sans-serif; 9 | } 10 | 11 | .wrapper { 12 | margin: 2em; 13 | } 14 | 15 | ul { 16 | list-style-type: none; 17 | margin: 0; 18 | padding: 0; 19 | } 20 | 21 | li, p, a { 22 | font-size: 1.6rem; 23 | } 24 | 25 | a { 26 | color: var(--link-color); 27 | text-decoration: none; 28 | font-family: "Inter", sans-serif; 29 | } 30 | 31 | p { 32 | font-size: 1.6em; 33 | } 34 | 35 | svg { 36 | width: 100%; 37 | } 38 | 39 | *, *:before, *:after { 40 | box-sizing: border-box; 41 | } 42 | 43 | /* Utils */ 44 | .hide-mobile { 45 | display: none; 46 | } 47 | 48 | @media only screen and (min-width: 620px) { 49 | .hide-tablet { 50 | display: none; 51 | } 52 | }/*# sourceMappingURL=global.css.map */ -------------------------------------------------------------------------------- /Project 2 - Designalytics/After/css/global.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["global.scss","global.css"],"names":[],"mappings":"AAAA;EACI,gBAAA;ACCJ;;ADCA;EACI,SAAA;EACA,yBAAA;EACA,gCAAA;ACEJ;;ADCA;EACI,WAAA;ACEJ;;ADCA;EACI,qBAAA;EACA,SAAA;EACA,UAAA;ACEJ;;ADAA;EACI,iBAAA;ACGJ;;ADDA;EACI,wBAAA;EACA,qBAAA;EACA,gCAAA;ACIJ;;ADFA;EACI,gBAAA;ACKJ;;ADFA;EACI,WAAA;ACKJ;;ADFA;EACI,sBAAA;ACKJ;;ADFA,UAAA;AAEA;EACI,aAAA;ACIJ;;ADDA;EAEI;IACI,aAAA;ECGN;AACF","file":"global.css"} -------------------------------------------------------------------------------- /Project 2 - Designalytics/After/css/global.scss: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | body { 5 | margin: 0; 6 | background-color: #1F2023; 7 | font-family: 'Inter', sans-serif; 8 | } 9 | 10 | .wrapper { 11 | margin: 2em; 12 | } 13 | 14 | ul { 15 | list-style-type: none; 16 | margin: 0; 17 | padding: 0; 18 | } 19 | li, p, a { 20 | font-size: 1.6rem; 21 | } 22 | a { 23 | color: var(--link-color); 24 | text-decoration: none; 25 | font-family: 'Inter', sans-serif; 26 | } 27 | p { 28 | font-size: 1.6em; 29 | } 30 | 31 | svg { 32 | width: 100%; 33 | } 34 | 35 | *, *:before, *:after { 36 | box-sizing: border-box; 37 | } 38 | 39 | /* Utils */ 40 | 41 | .hide-mobile { 42 | display: none; 43 | } 44 | 45 | @media only screen and (min-width: 620px) { 46 | 47 | .hide-tablet { 48 | display: none; 49 | } 50 | 51 | } 52 | -------------------------------------------------------------------------------- /Project 2 - Designalytics/After/css/main.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary-color: #5E85F8; 3 | --secondary-color: #292B31; 4 | --link-color: #BAC2D9; 5 | --border-color: #464A56; 6 | --inner-panel-color: #32343C; 7 | } 8 | 9 | html { 10 | font-size: 62.5%; 11 | } 12 | 13 | body { 14 | margin: 0; 15 | background-color: #1F2023; 16 | font-family: "Inter", sans-serif; 17 | } 18 | 19 | .wrapper { 20 | margin: 2em; 21 | } 22 | 23 | ul { 24 | list-style-type: none; 25 | margin: 0; 26 | padding: 0; 27 | } 28 | 29 | li, p, a { 30 | font-size: 1.6rem; 31 | } 32 | 33 | a { 34 | color: var(--link-color); 35 | text-decoration: none; 36 | font-family: "Inter", sans-serif; 37 | } 38 | 39 | p { 40 | font-size: 1.6em; 41 | } 42 | 43 | svg { 44 | width: 100%; 45 | } 46 | 47 | *, *:before, *:after { 48 | box-sizing: border-box; 49 | } 50 | 51 | /* Utils */ 52 | .hide-mobile { 53 | display: none; 54 | } 55 | 56 | @media only screen and (min-width: 620px) { 57 | .hide-tablet { 58 | display: none; 59 | } 60 | } 61 | /* Header */ 62 | header.primary { 63 | display: flex; 64 | justify-content: space-between; 65 | } 66 | 67 | header svg { 68 | width: 42px; 69 | } 70 | 71 | .header-right { 72 | display: flex; 73 | align-items: center; 74 | gap: 2em; 75 | } 76 | 77 | header.primary, .user { 78 | display: flex; 79 | gap: 1em; 80 | align-items: center; 81 | } 82 | 83 | .user img { 84 | width: 30px; 85 | height: 30px; 86 | -o-object-fit: cover; 87 | object-fit: cover; 88 | border-radius: 50%; 89 | } 90 | 91 | a.logo img { 92 | width: 170px; 93 | } 94 | 95 | /* Sales Stats */ 96 | .sales, .extra-stats { 97 | padding: 3.8em; 98 | color: white; 99 | border-radius: 1em; 100 | margin-top: 2em; 101 | } 102 | 103 | .sales { 104 | background: var(--primary-color); 105 | position: relative; 106 | } 107 | .sales h2 { 108 | font-size: 6.4rem; 109 | margin: 0; 110 | } 111 | .sales .label { 112 | display: flex; 113 | align-items: baseline; 114 | gap: 0.5em; 115 | } 116 | .sales img { 117 | position: absolute; 118 | bottom: -45px; 119 | right: -5px; 120 | width: 300px; 121 | } 122 | 123 | .subtitle { 124 | text-transform: uppercase; 125 | font-size: 1.6rem; 126 | } 127 | 128 | /* Extra Stats */ 129 | .extra-stats { 130 | padding: 3.8em 0; 131 | } 132 | 133 | .extra-stats ul { 134 | display: flex; 135 | justify-content: space-between; 136 | } 137 | .extra-stats ul strong { 138 | font-size: 2.6rem; 139 | margin-bottom: 0.2em; 140 | display: block; 141 | } 142 | 143 | /* Earnings and Visitors */ 144 | h1 { 145 | color: white; 146 | font-size: 2.6rem; 147 | } 148 | 149 | .chart-container { 150 | background: var(--secondary-color); 151 | border-radius: 1em; 152 | padding: 2.8em; 153 | } 154 | 155 | /* Customers */ 156 | .customers ul { 157 | display: grid; 158 | margin-top: 2em; 159 | grid-template-columns: repeat(2, 1fr); 160 | gap: 2em; 161 | color: white; 162 | } 163 | .customers ul li { 164 | display: flex; 165 | justify-content: space-between; 166 | } 167 | .customers ul li .cta-btn img { 168 | width: 50px; 169 | height: 50px; 170 | padding: 1em; 171 | background: var(--secondary-color); 172 | border-radius: 0.3em; 173 | } 174 | .customers ul .user-left { 175 | display: flex; 176 | align-items: center; 177 | gap: 1em; 178 | } 179 | .customers ul .user-left img { 180 | width: 48px; 181 | height: 48px; 182 | -o-object-fit: cover; 183 | object-fit: cover; 184 | border-radius: 50%; 185 | } 186 | .customers ul .user-info strong { 187 | display: block; 188 | } 189 | 190 | /* Mobile Menu */ 191 | aside { 192 | position: fixed; 193 | z-index: 1; 194 | right: 0; 195 | top: 0; 196 | height: 100vh; 197 | background: var(--primary-color); 198 | width: 40%; 199 | padding: 3em; 200 | text-align: right; 201 | transition: transform 0.6s; 202 | transform: translateX(100%); 203 | } 204 | aside a { 205 | color: white; 206 | font-size: 2.6rem; 207 | } 208 | aside img { 209 | width: 30px; 210 | height: 30px; 211 | background: white; 212 | border-radius: 0.3em; 213 | cursor: pointer; 214 | } 215 | aside ul { 216 | margin-top: 6em; 217 | } 218 | aside ul li { 219 | margin-bottom: 1.5em; 220 | } 221 | 222 | .toggle-menu { 223 | transform: translateX(0); 224 | } 225 | 226 | /* Tablet */ 227 | @media only screen and (min-width: 620px) { 228 | .signout { 229 | display: block; 230 | padding: 0.7em; 231 | background-color: var(--secondary-color); 232 | border-radius: 0.3em; 233 | } 234 | .header-right nav { 235 | display: flex; 236 | align-items: center; 237 | gap: 2em; 238 | } 239 | aside { 240 | position: inherit; 241 | height: auto; 242 | background: unset; 243 | width: auto; 244 | padding: 2em; 245 | margin-top: 2em; 246 | text-align: inherit; 247 | transform: unset; 248 | transition: unset; 249 | background-color: var(--secondary-color); 250 | border-radius: 1em; 251 | } 252 | aside a { 253 | font-size: 1.8rem; 254 | } 255 | aside img { 256 | background: unset; 257 | cursor: unset; 258 | } 259 | aside nav ul { 260 | margin-top: 0; 261 | display: flex; 262 | justify-content: space-around; 263 | } 264 | aside nav ul li { 265 | margin-bottom: 0; 266 | display: flex; 267 | align-items: center; 268 | gap: 0.5em; 269 | } 270 | aside nav ul li img { 271 | display: block !important; 272 | } 273 | /* Main Area */ 274 | main { 275 | display: grid; 276 | grid-template-columns: repeat(2, 1fr); 277 | grid-template-rows: repeat(3, auto); 278 | gap: 3em; 279 | } 280 | .earnings, .customers { 281 | grid-column: 1/3; 282 | } 283 | .extra-stats ul { 284 | display: grid; 285 | grid-template-columns: repeat(2, 1fr); 286 | grid-template-rows: repeat(2, 1fr); 287 | gap: 2em; 288 | } 289 | } 290 | /* Desktop */ 291 | @media only screen and (min-width: 1000px) { 292 | .wrapper { 293 | max-width: 1200px; 294 | margin: 3em auto; 295 | padding: 0 2em; 296 | } 297 | .col2 { 298 | display: flex; 299 | gap: 2em; 300 | } 301 | aside { 302 | width: 10%; 303 | flex-grow: 3; 304 | min-width: 250px; 305 | padding: 2em; 306 | } 307 | aside nav { 308 | display: flex; 309 | justify-content: space-between; 310 | flex-direction: column; 311 | height: 100%; 312 | } 313 | aside nav ul { 314 | justify-content: space-around; 315 | flex-direction: column; 316 | gap: 2em; 317 | } 318 | aside nav ul li { 319 | margin-bottom: 0; 320 | display: flex; 321 | align-items: center; 322 | gap: 0.5em; 323 | } 324 | aside nav ul li img { 325 | display: block !important; 326 | } 327 | /* Main Area */ 328 | main { 329 | grid-template-columns: 1.2fr 2fr; 330 | grid-template-rows: repeat(3, auto); 331 | gap: 3em; 332 | flex-grow: 2; 333 | } 334 | .extra-stats { 335 | padding: 3em; 336 | display: flex; 337 | justify-content: center; 338 | border: 1px solid var(--border-color); 339 | } 340 | .extra-stats ul { 341 | display: flex; 342 | align-items: center; 343 | gap: 5em; 344 | } 345 | .premium { 346 | display: block; 347 | background: var(--inner-panel-color); 348 | padding: 2em; 349 | color: white; 350 | border-radius: 0.3em; 351 | } 352 | .premium header { 353 | display: flex; 354 | justify-content: space-between; 355 | align-items: center; 356 | } 357 | .premium header h3 { 358 | font-size: 1.6rem; 359 | margin: 0; 360 | } 361 | .premium header img { 362 | width: 20px; 363 | } 364 | .premium p { 365 | line-height: 150%; 366 | } 367 | }/*# sourceMappingURL=main.css.map */ -------------------------------------------------------------------------------- /Project 2 - Designalytics/After/css/main.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["variables.scss","main.css","global.scss","main.scss"],"names":[],"mappings":"AAAA;EACI,wBAAA;EACA,0BAAA;EACA,qBAAA;EACA,uBAAA;EACA,4BAAA;ACCJ;;ACNA;EACI,gBAAA;ADSJ;;ACPA;EACI,SAAA;EACA,yBAAA;EACA,gCAAA;ADUJ;;ACPA;EACI,WAAA;ADUJ;;ACPA;EACI,qBAAA;EACA,SAAA;EACA,UAAA;ADUJ;;ACRA;EACI,iBAAA;ADWJ;;ACTA;EACI,wBAAA;EACA,qBAAA;EACA,gCAAA;ADYJ;;ACVA;EACI,gBAAA;ADaJ;;ACVA;EACI,WAAA;ADaJ;;ACVA;EACI,sBAAA;ADaJ;;ACVA,UAAA;AAEA;EACI,aAAA;ADYJ;;ACTA;EAEI;IACI,aAAA;EDWN;AACF;AExDA,WAAA;AAEA;EACI,aAAA;EACA,8BAAA;AFyDJ;;AEtDA;EACI,WAAA;AFyDJ;;AEtDA;EACI,aAAA;EACA,mBAAA;EACA,QAAA;AFyDJ;;AEtDA;EACI,aAAA;EACA,QAAA;EACA,mBAAA;AFyDJ;;AEtDA;EACI,WAAA;EACA,YAAA;EACA,oBAAA;KAAA,iBAAA;EACA,kBAAA;AFyDJ;;AEtDA;EACI,YAAA;AFyDJ;;AEtDA,gBAAA;AAEA;EACI,cAAA;EACA,YAAA;EACA,kBAAA;EACA,eAAA;AFwDJ;;AErDA;EACI,gCAAA;EACA,kBAAA;AFwDJ;AEtDI;EACI,iBAAA;EACA,SAAA;AFwDR;AErDI;EACI,aAAA;EACA,qBAAA;EACA,UAAA;AFuDR;AEpDI;EACI,kBAAA;EACA,aAAA;EACA,WAAA;EACA,YAAA;AFsDR;;AEjDA;EACI,yBAAA;EACA,iBAAA;AFoDJ;;AEhDA,gBAAA;AAEA;EACI,gBAAA;AFkDJ;;AE/CA;EACI,aAAA;EACA,8BAAA;AFkDJ;AE/CI;EACI,iBAAA;EACA,oBAAA;EACA,cAAA;AFiDR;;AE7CA,0BAAA;AAEA;EACI,YAAA;EACA,iBAAA;AF+CJ;;AE5CA;EACI,kCAAA;EACA,kBAAA;EACA,cAAA;AF+CJ;;AE5CA,cAAA;AAEA;EACI,aAAA;EACA,eAAA;EACA,qCAAA;EACA,QAAA;EACA,YAAA;AF8CJ;AE5CI;EACI,aAAA;EACA,8BAAA;AF8CR;AE5CQ;EACI,WAAA;EACA,YAAA;EACA,YAAA;EACA,kCAAA;EACA,oBAAA;AF8CZ;AE1CI;EACI,aAAA;EACA,mBAAA;EACA,QAAA;AF4CR;AE1CQ;EACI,WAAA;EACA,YAAA;EACA,oBAAA;KAAA,iBAAA;EACA,kBAAA;AF4CZ;AExCI;EACI,cAAA;AF0CR;;AErCA,gBAAA;AAEA;EACI,eAAA;EACA,UAAA;EACA,QAAA;EACA,MAAA;EACA,aAAA;EACA,gCAAA;EACA,UAAA;EACA,YAAA;EACA,iBAAA;EACA,0BAAA;EACA,2BAAA;AFuCJ;AErCI;EACI,YAAA;EACA,iBAAA;AFuCR;AEpCI;EACI,WAAA;EACA,YAAA;EACA,iBAAA;EACA,oBAAA;EACA,eAAA;AFsCR;AEnCI;EACI,eAAA;AFqCR;AEnCQ;EACI,oBAAA;AFqCZ;;AEhCA;EACI,wBAAA;AFmCJ;;AE/BA,WAAA;AAEA;EAEI;IACI,cAAA;IACA,cAAA;IACA,wCAAA;IACA,oBAAA;EFgCN;EE7BE;IACI,aAAA;IACA,mBAAA;IACA,QAAA;EF+BN;EE5BE;IACI,iBAAA;IACA,YAAA;IACA,iBAAA;IACA,WAAA;IACA,YAAA;IACA,eAAA;IACA,mBAAA;IACA,gBAAA;IACA,iBAAA;IACA,wCAAA;IACA,kBAAA;EF8BN;EE5BM;IACI,iBAAA;EF8BV;EE3BM;IACI,iBAAA;IACA,aAAA;EF6BV;EEzBM;IACI,aAAA;IACA,aAAA;IACA,6BAAA;EF2BV;EEzBU;IACI,gBAAA;IACA,aAAA;IACA,mBAAA;IACA,UAAA;EF2Bd;EEzBc;IACI,yBAAA;EF2BlB;EElBE,cAAA;EAEA;IACI,aAAA;IACA,qCAAA;IACA,mCAAA;IACA,QAAA;EFmBN;EEhBE;IACI,gBAAA;EFkBN;EEfE;IACI,aAAA;IACA,qCAAA;IACA,kCAAA;IACA,QAAA;EFiBN;AACF;AEZA,YAAA;AAEA;EAEI;IACI,iBAAA;IACA,gBAAA;IACA,cAAA;EFYN;EETE;IACI,aAAA;IACA,QAAA;EFWN;EERE;IACI,UAAA;IACA,YAAA;IACA,gBAAA;IACA,YAAA;EFUN;EERM;IACI,aAAA;IACA,8BAAA;IACA,sBAAA;IACA,YAAA;EFUV;EEPM;IACI,6BAAA;IACA,sBAAA;IACA,QAAA;EFSV;EEPU;IACI,gBAAA;IACA,aAAA;IACA,mBAAA;IACA,UAAA;EFSd;EEPc;IACI,yBAAA;EFSlB;EEHE,cAAA;EAEA;IACI,gCAAA;IACA,mCAAA;IACA,QAAA;IACA,YAAA;EFIN;EEDE;IACI,YAAA;IACA,aAAA;IACA,uBAAA;IACA,qCAAA;EFGN;EEAE;IACI,aAAA;IACA,mBAAA;IACA,QAAA;EFEN;EECE;IACI,cAAA;IACA,oCAAA;IACA,YAAA;IACA,YAAA;IACA,oBAAA;EFCN;EECM;IACI,aAAA;IACA,8BAAA;IACA,mBAAA;EFCV;EECU;IACI,iBAAA;IACA,SAAA;EFCd;EEEU;IACI,WAAA;EFAd;EEIM;IACI,iBAAA;EFFV;AACF","file":"main.css"} -------------------------------------------------------------------------------- /Project 2 - Designalytics/After/css/main.scss: -------------------------------------------------------------------------------- 1 | @use 'variables'; 2 | @use 'global'; 3 | 4 | /* Header */ 5 | 6 | header.primary { 7 | display: flex; 8 | justify-content: space-between; 9 | } 10 | 11 | header svg { 12 | width: 42px; 13 | } 14 | 15 | .header-right { 16 | display: flex; 17 | align-items: center; 18 | gap: 2em; 19 | } 20 | 21 | header.primary, .user { 22 | display: flex; 23 | gap: 1em; 24 | align-items: center; 25 | } 26 | 27 | .user img { 28 | width: 30px; 29 | height: 30px; 30 | object-fit: cover; 31 | border-radius: 50%; 32 | } 33 | 34 | a.logo img { 35 | width: 170px; 36 | } 37 | 38 | /* Mobile Menu */ 39 | 40 | aside { 41 | position: fixed; 42 | z-index: 1; 43 | right: 0; 44 | top: 0; 45 | height: 100vh; 46 | background: var(--primary-color); 47 | width: 40%; 48 | padding: 3em; 49 | text-align: right; 50 | transition: transform .6s; 51 | transform: translateX(100%); 52 | 53 | a { 54 | color: white; 55 | font-size: 2.6rem; 56 | } 57 | 58 | img { 59 | width: 30px; 60 | height: 30px; 61 | background: white; 62 | border-radius: .3em; 63 | cursor: pointer; 64 | } 65 | 66 | ul { 67 | margin-top: 6em; 68 | 69 | li { 70 | margin-bottom: 1.5em; 71 | } 72 | } 73 | } 74 | 75 | .toggle-menu { 76 | transform: translateX(0); 77 | } 78 | 79 | /* Sales Stats */ 80 | 81 | .sales, .extra-stats { 82 | padding: 3.8em; 83 | color: white; 84 | border-radius: 1em; 85 | margin-top: 2em; 86 | } 87 | 88 | .sales { 89 | background: var(--primary-color); 90 | position: relative; 91 | 92 | h2 { 93 | font-size: 6.4rem; 94 | margin: 0; 95 | } 96 | 97 | .label { 98 | display: flex; 99 | align-items: baseline; 100 | gap: .5em; 101 | } 102 | 103 | img { 104 | position: absolute; 105 | bottom: -45px; 106 | right: -5px; 107 | width: 300px; 108 | } 109 | 110 | } 111 | 112 | .subtitle { 113 | text-transform: uppercase; 114 | font-size: 1.6rem; 115 | } 116 | 117 | 118 | /* Extra Stats */ 119 | 120 | .extra-stats { 121 | padding: 3.8em 0; 122 | } 123 | 124 | .extra-stats ul { 125 | display: flex; 126 | justify-content: space-between; 127 | 128 | 129 | strong { 130 | font-size: 2.6rem; 131 | margin-bottom: .2em; 132 | display: block; 133 | } 134 | } 135 | 136 | /* Earnings and Visitors */ 137 | 138 | h1 { 139 | color: white; 140 | font-size: 2.6rem; 141 | } 142 | 143 | .chart-container { 144 | background: var(--secondary-color); 145 | border-radius: 1em; 146 | padding: 2.8em; 147 | } 148 | 149 | /* Customers */ 150 | 151 | .customers ul { 152 | display: grid; 153 | margin-top: 2em; 154 | grid-template-columns: repeat(2, 1fr); 155 | gap: 2em; 156 | color: white; 157 | 158 | li { 159 | display: flex; 160 | justify-content: space-between; 161 | 162 | .cta-btn img { 163 | width: 50px; 164 | height: 50px; 165 | padding: 1em; 166 | background: var(--secondary-color); 167 | border-radius: .3em; 168 | } 169 | } 170 | 171 | .user-left { 172 | display: flex; 173 | align-items: center; 174 | gap: 1em; 175 | 176 | img { 177 | width: 48px; 178 | height: 48px; 179 | object-fit: cover; 180 | border-radius: 50%; 181 | } 182 | } 183 | 184 | .user-info strong { 185 | display: block; 186 | } 187 | } 188 | 189 | 190 | 191 | /* Tablet */ 192 | 193 | @media only screen and (min-width: 620px) { 194 | 195 | .signout { 196 | display: block; 197 | padding: .7em; 198 | background-color: var(--secondary-color); 199 | border-radius: .3em; 200 | } 201 | 202 | .header-right nav { 203 | display: flex; 204 | align-items: center; 205 | gap: 2em; 206 | } 207 | 208 | aside { 209 | position: inherit; 210 | height: auto; 211 | background: unset; 212 | width: auto; 213 | padding: 2em; 214 | margin-top: 2em; 215 | text-align: inherit; 216 | transform: unset; 217 | transition: unset; 218 | background-color: var(--secondary-color); 219 | border-radius: 1em; 220 | 221 | a { 222 | font-size: 1.8rem; 223 | } 224 | 225 | img { 226 | background: unset; 227 | cursor: unset; 228 | } 229 | 230 | 231 | nav ul { 232 | margin-top: 0; 233 | display: flex; 234 | justify-content: space-around; 235 | 236 | li { 237 | margin-bottom: 0; 238 | display: flex; 239 | align-items: center; 240 | gap: .5em; 241 | 242 | img { 243 | display: block !important; 244 | } 245 | } 246 | } 247 | 248 | } 249 | 250 | 251 | 252 | /* Main Area */ 253 | 254 | main { 255 | display: grid; 256 | grid-template-columns: repeat(2, 1fr); 257 | grid-template-rows: repeat(3, auto); 258 | gap: 3em; 259 | } 260 | 261 | .earnings, .customers { 262 | grid-column: 1 /3; 263 | } 264 | 265 | .extra-stats ul { 266 | display: grid; 267 | grid-template-columns: repeat(2, 1fr); 268 | grid-template-rows: repeat(2, 1fr); 269 | gap: 2em; 270 | } 271 | 272 | } 273 | 274 | 275 | /* Desktop */ 276 | 277 | @media only screen and (min-width: 1000px) { 278 | 279 | .wrapper { 280 | max-width: 1200px; 281 | margin: 3em auto; 282 | padding: 0 2em; 283 | } 284 | 285 | .col2 { 286 | display: flex; 287 | gap: 2em; 288 | } 289 | 290 | aside { 291 | width: 10%; 292 | flex-grow: 3; 293 | min-width:250px; 294 | padding: 2em; 295 | 296 | nav { 297 | display: flex; 298 | justify-content: space-between; 299 | flex-direction: column; 300 | height: 100%; 301 | } 302 | 303 | nav ul { 304 | justify-content: space-around; 305 | flex-direction: column; 306 | gap: 2em; 307 | 308 | li { 309 | margin-bottom: 0; 310 | display: flex; 311 | align-items: center; 312 | gap: .5em; 313 | 314 | img { 315 | display: block !important; 316 | } 317 | } 318 | } 319 | } 320 | 321 | /* Main Area */ 322 | 323 | main { 324 | grid-template-columns: 1.2fr 2fr; 325 | grid-template-rows: repeat(3, auto); 326 | gap: 3em; 327 | flex-grow: 2; 328 | } 329 | 330 | .extra-stats { 331 | padding: 3em; 332 | display: flex; 333 | justify-content: center; 334 | border: 1px solid var(--border-color); 335 | } 336 | 337 | .extra-stats ul { 338 | display: flex; 339 | align-items: center; 340 | gap: 5em; 341 | } 342 | 343 | .premium { 344 | display: block; 345 | background: var(--inner-panel-color); 346 | padding: 2em; 347 | color: white; 348 | border-radius: .3em; 349 | 350 | header { 351 | display: flex; 352 | justify-content: space-between; 353 | align-items: center; 354 | 355 | h3 { 356 | font-size: 1.6rem; 357 | margin: 0; 358 | } 359 | 360 | img { 361 | width: 20px; 362 | } 363 | 364 | } 365 | p { 366 | line-height: 150%; 367 | } 368 | } 369 | 370 | 371 | } -------------------------------------------------------------------------------- /Project 2 - Designalytics/After/css/resets.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | background-color: #1F2023; 8 | } 9 | 10 | ul { 11 | list-style-type: none; 12 | margin: 0; 13 | padding: 0; 14 | } 15 | 16 | li, p, a { 17 | font-size: 1.6rem; 18 | } 19 | 20 | a { 21 | color: var(--link-color); 22 | text-decoration: none; 23 | } 24 | 25 | p { 26 | font-size: 1.6em; 27 | }/*# sourceMappingURL=resets.css.map */ -------------------------------------------------------------------------------- /Project 2 - Designalytics/After/css/resets.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["resets.scss","resets.css"],"names":[],"mappings":"AAAA;EACI,gBAAA;ACCJ;;ADCA;EACI,SAAA;EACA,yBAAA;ACEJ;;ADAA;EACI,qBAAA;EACA,SAAA;EACA,UAAA;ACGJ;;ADDA;EACI,iBAAA;ACIJ;;ADFA;EACI,wBAAA;EACA,qBAAA;ACKJ;;ADHA;EACI,gBAAA;ACMJ","file":"resets.css"} -------------------------------------------------------------------------------- /Project 2 - Designalytics/After/css/variables.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary-color: #5E85F8; 3 | --secondary-color: #292B31; 4 | --link-color: #BAC2D9; 5 | --border-color: #464A56; 6 | --inner-panel-color: #32343C; 7 | }/*# sourceMappingURL=variables.css.map */ -------------------------------------------------------------------------------- /Project 2 - Designalytics/After/css/variables.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["variables.scss","variables.css"],"names":[],"mappings":"AAAA;EACI,wBAAA;EACA,0BAAA;EACA,qBAAA;EACA,uBAAA;EACA,4BAAA;ACCJ","file":"variables.css"} -------------------------------------------------------------------------------- /Project 2 - Designalytics/After/css/variables.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary-color: #5E85F8; 3 | --secondary-color: #292B31; 4 | --link-color: #BAC2D9; 5 | --border-color: #464A56; 6 | --inner-panel-color: #32343C; 7 | } -------------------------------------------------------------------------------- /Project 2 - Designalytics/Before/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /Project 2 - Designalytics/Before/assets/chart-top.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Project 2 - Designalytics/Before/assets/icon-account.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Project 2 - Designalytics/Before/assets/icon-home.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Project 2 - Designalytics/Before/assets/icon-messages.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Project 2 - Designalytics/Before/assets/icon-support.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Project 2 - Designalytics/Before/assets/mobile-exit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /Project 2 - Designalytics/Before/assets/right-btn.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Project 2 - Designalytics/Before/assets/user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/css-course/f88b9439ac90a8bbfc4ed3444a185cade312b8df/Project 2 - Designalytics/Before/assets/user.jpg -------------------------------------------------------------------------------- /Project 2 - Designalytics/Before/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Designalytics 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | --------------------------------------------------------------------------------