├── 12-tables-to-grid ├── 01-tables │ ├── .gitignore │ ├── .stylelintrc.json │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ └── scss │ │ ├── _base.scss │ │ ├── _table.scss │ │ └── index.scss ├── 02-float │ ├── .gitignore │ ├── .stylelintrc.json │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ └── scss │ │ ├── _base.scss │ │ ├── _float.scss │ │ └── index.scss ├── 03-flex │ ├── .gitignore │ ├── .stylelintrc.json │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ └── scss │ │ ├── _base.scss │ │ ├── _flex.scss │ │ └── index.scss └── 04-grid │ ├── .gitignore │ ├── .stylelintrc.json │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ └── scss │ ├── _base.scss │ ├── _grid.scss │ └── index.scss ├── 13-grid-first-steps ├── .gitignore ├── .stylelintrc.json ├── README.md ├── index.html ├── package-lock.json ├── package.json └── scss │ ├── _base.scss │ ├── _grid.scss │ └── index.scss ├── 21-align-grid ├── .gitignore ├── .stylelintrc.json ├── README.md ├── index.html ├── package-lock.json ├── package.json └── scss │ ├── _base.scss │ ├── _grid.scss │ └── index.scss ├── 22-fr-unit ├── .gitignore ├── .stylelintrc.json ├── README.md ├── index.html ├── package-lock.json ├── package.json └── scss │ ├── _base.scss │ ├── _grid.scss │ └── index.scss ├── 23-grid-area ├── .gitignore ├── .stylelintrc.json ├── README.md ├── img │ ├── ad-bg.png │ └── logo.png ├── index.html ├── package-lock.json ├── package.json └── scss │ ├── _base.scss │ ├── _grid.scss │ └── index.scss ├── 31-place-items ├── .gitignore ├── .stylelintrc.json ├── README.md ├── img │ ├── ad-bg.png │ └── logo.png ├── index.html ├── package-lock.json ├── package.json └── scss │ ├── _base.scss │ ├── _grid.scss │ └── index.scss ├── 32-align-items ├── .gitignore ├── .stylelintrc.json ├── README.md ├── img │ ├── ad-bg.png │ └── logo.png ├── index.html ├── package-lock.json ├── package.json └── scss │ ├── _base.scss │ ├── _grid.scss │ └── index.scss ├── 33-z-index ├── .gitignore ├── .stylelintrc.json ├── README.md ├── img │ └── team │ │ ├── cat-1.png │ │ ├── cat-2.png │ │ ├── member-1.png │ │ ├── member-2.png │ │ ├── member-3.png │ │ ├── member-4.png │ │ ├── member-5.png │ │ └── member-6.png ├── index.html ├── package-lock.json ├── package.json └── scss │ ├── _base.scss │ ├── _grid.scss │ └── index.scss ├── 41-implicit-grid ├── .gitignore ├── .stylelintrc.json ├── README.md ├── index.html ├── package-lock.json ├── package.json └── scss │ ├── _base.scss │ ├── _grid.scss │ └── index.scss ├── 42-responsive ├── .gitignore ├── .stylelintrc.json ├── README.md ├── index.html ├── package-lock.json ├── package.json └── scss │ ├── _base.scss │ ├── _grid.scss │ └── index.scss ├── 43-old-browsers ├── .gitignore ├── .stylelintrc.json ├── README.md ├── index.html ├── package-lock.json ├── package.json └── scss │ ├── _base.scss │ ├── _grid.scss │ └── index.scss ├── 52-mobile-first ├── .gitignore ├── .prettierrc ├── .stylelintrc.json ├── README.md ├── index.html ├── package-lock.json ├── package.json └── scss │ └── index.scss ├── 53-desktop ├── .gitignore ├── .prettierrc ├── .stylelintrc.json ├── README.md ├── index.html ├── package-lock.json ├── package.json └── scss │ └── index.scss ├── 61-subgrid ├── .gitignore ├── .prettierrc ├── .stylelintrc.json ├── README.md ├── index.html ├── package-lock.json ├── package.json └── scss │ └── index.scss └── README.md /12-tables-to-grid/01-tables/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | css 3 | dist -------------------------------------------------------------------------------- /12-tables-to-grid/01-tables/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["stylelint-scss"], 3 | "extends": ["stylelint-config-standard", "stylelint-config-idiomatic-order"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /12-tables-to-grid/01-tables/README.md: -------------------------------------------------------------------------------- 1 | # From tables to grid 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | ``` 14 | -------------------------------------------------------------------------------- /12-tables-to-grid/01-tables/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | News website 7 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

👌 News with tables

18 | 19 | 20 | 21 | 43 | 65 | 85 | 86 | 87 | 109 | 131 | 132 | 133 |
22 |
23 |
24 | A Super Blood Moon Is Nicer Than It Sounds 28 |
29 | 30 |

31 | 35 | A Super Blood Moon Is Nicer Than It Sounds 36 | 37 |

38 |

39 | Find out what a super blood Moon is, and celebrate a milestone in Mars exploration. 40 |

41 |
42 | 		44 |
45 |
46 | Solar Cruiser, NASA's Large Solar Sail Test 50 |
51 | 52 |

53 | 57 | Solar Cruiser, NASA's Large Solar Sail Test 58 | 59 |

60 |

61 | The biggest solar sail yet will create an artificial orbit between the Earth and Sun. 62 |

63 |
64 | 		66 |
67 |
68 | NEA Scout, NASA's Solar Sail Mission to an Asteroid 72 |
73 | 74 |

75 | 79 | NEA Scout, NASA's Solar Sail Mission to an Asteroid 80 | 81 |

82 |

NEA Scout will use a solar sail to leave the Moon's orbit and visit a near-Earth asteroid.

83 |
84 |
88 |
89 |
90 | The companions of the planets 94 |
95 | 96 |

97 | 101 | The companions of the planets 102 | 103 |

104 |

105 | Turn your minds to the moons of our solar system, the missions to explore them, and the awe they inspire in us. 106 |

107 |
108 | 		110 |
111 |
112 | Seeking Small Worlds 116 |
117 | 118 |

119 | 123 | Seeking Small Worlds 124 | 125 |

126 |

127 | A spacecraft leaves one asteroid as planetary defense experts turn to others. 128 |

129 |
130 |
134 |
135 | 136 | 137 | -------------------------------------------------------------------------------- /12-tables-to-grid/01-tables/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-grid-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-idiomatic-order": "^8.1.0", 13 | "stylelint-config-standard": "^20.0.0", 14 | "stylelint-scss": "^3.18.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /12-tables-to-grid/01-tables/scss/_base.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: #686868; 9 | color: #fff; 10 | font-family: sans-serif; 11 | font-size: 1rem; 12 | line-height: 1.8; 13 | } 14 | 15 | a { 16 | color: #2d5d7b; 17 | text-decoration: underline; 18 | 19 | &:hover, 20 | &:focus { 21 | color: #457eac; 22 | } 23 | } 24 | 25 | .container { 26 | max-width: 72rem; 27 | padding: 1rem; 28 | margin: 0 auto; 29 | } 30 | 31 | .card { 32 | padding: 1rem; 33 | background: #fff; 34 | color: #333; 35 | 36 | &__img { 37 | display: block; 38 | width: calc(100% + 2rem); 39 | height: 12rem; 40 | border-bottom: 3px solid #9191e9; 41 | margin: -1rem -1rem 0; 42 | background: #9191e9; 43 | 44 | img { 45 | display: block; 46 | width: 100%; 47 | height: 100%; 48 | object-fit: cover; 49 | } 50 | } 51 | 52 | &__title { 53 | margin-bottom: 0.5rem; 54 | font-size: 1.2rem; 55 | font-weight: 400; 56 | line-height: 1.3; 57 | 58 | a { 59 | text-decoration: none; 60 | } 61 | } 62 | 63 | &__meta { 64 | display: block; 65 | margin-bottom: 0.5rem; 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /12-tables-to-grid/01-tables/scss/_table.scss: -------------------------------------------------------------------------------- 1 | .gallery { 2 | border-collapse: separate; 3 | border-spacing: 1rem; 4 | 5 | td { 6 | width: 33.333%; 7 | padding: 0; 8 | background: #fff; 9 | vertical-align: top; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /12-tables-to-grid/01-tables/scss/index.scss: -------------------------------------------------------------------------------- 1 | @import "./base"; 2 | @import "./table"; 3 | -------------------------------------------------------------------------------- /12-tables-to-grid/02-float/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | css 3 | dist -------------------------------------------------------------------------------- /12-tables-to-grid/02-float/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["stylelint-scss"], 3 | "extends": ["stylelint-config-standard", "stylelint-config-idiomatic-order"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /12-tables-to-grid/02-float/README.md: -------------------------------------------------------------------------------- 1 | # From tables to grid 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | ``` 14 | -------------------------------------------------------------------------------- /12-tables-to-grid/02-float/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | News website 7 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

👌 News with floats

18 |
19 | 39 | 59 | 77 |
78 |
79 |
80 | The companions of the planets 84 |
85 | 86 |

87 | 91 | The companions of the planets 92 | 93 |

94 |

95 | Turn your minds to the moons of our solar system, the missions to explore them, and the awe they inspire in us. 96 |

97 |
98 |
99 |
100 | Seeking Small Worlds 104 |
105 | 106 |

107 | 111 | Seeking Small Worlds 112 | 113 |

114 |

115 | A spacecraft leaves one asteroid as planetary defense experts turn to others. 116 |

117 |
118 |
119 |
120 |
121 | 122 | 123 | -------------------------------------------------------------------------------- /12-tables-to-grid/02-float/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-grid-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-idiomatic-order": "^8.1.0", 13 | "stylelint-config-standard": "^20.0.0", 14 | "stylelint-scss": "^3.18.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /12-tables-to-grid/02-float/scss/_base.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: #686868; 9 | color: #fff; 10 | font-family: sans-serif; 11 | font-size: 1rem; 12 | line-height: 1.8; 13 | } 14 | 15 | a { 16 | color: #2d5d7b; 17 | text-decoration: underline; 18 | 19 | &:hover, 20 | &:focus { 21 | color: #457eac; 22 | } 23 | } 24 | 25 | .container { 26 | max-width: 72rem; 27 | padding: 1rem; 28 | margin: 0 auto; 29 | } 30 | 31 | .card { 32 | padding: 1rem; 33 | background: #fff; 34 | color: #333; 35 | 36 | &__img { 37 | display: block; 38 | width: calc(100% + 2rem); 39 | height: 12rem; 40 | border-bottom: 3px solid #9191e9; 41 | margin: -1rem -1rem 0; 42 | background: #9191e9; 43 | 44 | img { 45 | display: block; 46 | width: 100%; 47 | height: 100%; 48 | object-fit: cover; 49 | } 50 | } 51 | 52 | &__title { 53 | margin-bottom: 0.5rem; 54 | font-size: 1.2rem; 55 | font-weight: 400; 56 | line-height: 1.3; 57 | 58 | a { 59 | text-decoration: none; 60 | } 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /12-tables-to-grid/02-float/scss/_float.scss: -------------------------------------------------------------------------------- 1 | .gallery { 2 | margin: 0 -0.5rem; 3 | 4 | > .card { 5 | width: calc(33.333% - 1rem); 6 | min-height: 31rem; 7 | margin: 0.5rem; 8 | float: left; 9 | 10 | // &:nth-child(3n + 1) { 11 | // clear: both; 12 | // } 13 | } 14 | } 15 | 16 | .clearfix { 17 | clear: both; 18 | } 19 | -------------------------------------------------------------------------------- /12-tables-to-grid/02-float/scss/index.scss: -------------------------------------------------------------------------------- 1 | @import "./base"; 2 | @import "./float"; 3 | -------------------------------------------------------------------------------- /12-tables-to-grid/03-flex/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | css 3 | dist -------------------------------------------------------------------------------- /12-tables-to-grid/03-flex/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["stylelint-scss"], 3 | "extends": ["stylelint-config-standard", "stylelint-config-idiomatic-order"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /12-tables-to-grid/03-flex/README.md: -------------------------------------------------------------------------------- 1 | # From tables to grid 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | ``` 14 | -------------------------------------------------------------------------------- /12-tables-to-grid/03-flex/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | News website 7 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

👌 News with flex

18 |
19 | 39 | 59 | 77 |
78 |
79 | The companions of the planets 83 |
84 | 85 |

86 | 90 | The companions of the planets 91 | 92 |

93 |

94 | Turn your minds to the moons of our solar system, the missions to explore them, and the awe they inspire in us. 95 |

96 |
97 |
98 |
99 | Seeking Small Worlds 103 |
104 | 105 |

106 | 110 | Seeking Small Worlds 111 | 112 |

113 |

114 | A spacecraft leaves one asteroid as planetary defense experts turn to others. 115 |

116 |
117 |
118 |
119 |
120 | 121 | 122 | -------------------------------------------------------------------------------- /12-tables-to-grid/03-flex/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-grid-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-idiomatic-order": "^8.1.0", 13 | "stylelint-config-standard": "^20.0.0", 14 | "stylelint-scss": "^3.18.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /12-tables-to-grid/03-flex/scss/_base.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: #686868; 9 | color: #fff; 10 | font-family: sans-serif; 11 | font-size: 1rem; 12 | line-height: 1.8; 13 | } 14 | 15 | a { 16 | color: #2d5d7b; 17 | text-decoration: underline; 18 | 19 | &:hover, 20 | &:focus { 21 | color: #457eac; 22 | } 23 | } 24 | 25 | .container { 26 | max-width: 72rem; 27 | padding: 1rem; 28 | margin: 0 auto; 29 | } 30 | 31 | .card { 32 | padding: 1rem; 33 | background: #fff; 34 | color: #333; 35 | 36 | &__img { 37 | display: block; 38 | width: calc(100% + 2rem); 39 | height: 12rem; 40 | border-bottom: 3px solid #9191e9; 41 | margin: -1rem -1rem 0; 42 | background: #9191e9; 43 | 44 | img { 45 | display: block; 46 | width: 100%; 47 | height: 100%; 48 | object-fit: cover; 49 | } 50 | } 51 | 52 | &__title { 53 | margin-bottom: 0.5rem; 54 | font-size: 1.2rem; 55 | font-weight: 400; 56 | line-height: 1.3; 57 | 58 | a { 59 | text-decoration: none; 60 | } 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /12-tables-to-grid/03-flex/scss/_flex.scss: -------------------------------------------------------------------------------- 1 | .gallery { 2 | display: flex; 3 | flex-wrap: wrap; 4 | justify-content: space-between; 5 | margin: 0 -0.5rem; 6 | 7 | > * { 8 | min-width: 15rem; 9 | min-height: 31rem; 10 | flex: 1 1 0; 11 | padding: 1rem; 12 | margin: 0.5rem; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /12-tables-to-grid/03-flex/scss/index.scss: -------------------------------------------------------------------------------- 1 | @import "./base"; 2 | @import "./flex"; 3 | -------------------------------------------------------------------------------- /12-tables-to-grid/04-grid/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | css 3 | dist -------------------------------------------------------------------------------- /12-tables-to-grid/04-grid/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["stylelint-scss"], 3 | "extends": ["stylelint-config-standard", "stylelint-config-idiomatic-order"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /12-tables-to-grid/04-grid/README.md: -------------------------------------------------------------------------------- 1 | # From tables to grid 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | ``` 14 | -------------------------------------------------------------------------------- /12-tables-to-grid/04-grid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | News website 7 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

👌 News with grid

18 |
19 | 39 | 59 | 77 |
78 |
79 | The companions of the planets 83 |
84 | 85 |

86 | 90 | The companions of the planets 91 | 92 |

93 |

94 | Turn your minds to the moons of our solar system, the missions to explore them, and the awe they inspire in us. 95 |

96 |
97 |
98 |
99 | Seeking Small Worlds 103 |
104 | 105 |

106 | 110 | Seeking Small Worlds 111 | 112 |

113 |

114 | A spacecraft leaves one asteroid as planetary defense experts turn to others. 115 |

116 |
117 |
118 |
119 | 120 | 121 | -------------------------------------------------------------------------------- /12-tables-to-grid/04-grid/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-grid-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-idiomatic-order": "^8.1.0", 13 | "stylelint-config-standard": "^20.0.0", 14 | "stylelint-scss": "^3.18.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /12-tables-to-grid/04-grid/scss/_base.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: #686868; 9 | color: #fff; 10 | font-family: sans-serif; 11 | font-size: 1rem; 12 | line-height: 1.8; 13 | } 14 | 15 | a { 16 | color: #2d5d7b; 17 | text-decoration: underline; 18 | 19 | &:hover, 20 | &:focus { 21 | color: #457eac; 22 | } 23 | } 24 | 25 | .container { 26 | max-width: 72rem; 27 | padding: 1rem; 28 | margin: 0 auto; 29 | } 30 | 31 | .card { 32 | padding: 1rem; 33 | background: #fff; 34 | color: #333; 35 | 36 | &__img { 37 | display: block; 38 | width: calc(100% + 2rem); 39 | height: 12rem; 40 | border-bottom: 3px solid #9191e9; 41 | margin: -1rem -1rem 0; 42 | background: #9191e9; 43 | 44 | img { 45 | display: block; 46 | width: 100%; 47 | height: 100%; 48 | object-fit: cover; 49 | } 50 | } 51 | 52 | &__title { 53 | margin-bottom: 0.5rem; 54 | font-size: 1.2rem; 55 | font-weight: 400; 56 | line-height: 1.3; 57 | 58 | a { 59 | text-decoration: none; 60 | } 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /12-tables-to-grid/04-grid/scss/_grid.scss: -------------------------------------------------------------------------------- 1 | .gallery { 2 | display: grid; 3 | gap: 1rem; 4 | grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); 5 | } 6 | -------------------------------------------------------------------------------- /12-tables-to-grid/04-grid/scss/index.scss: -------------------------------------------------------------------------------- 1 | @import "./base"; 2 | @import "./grid"; 3 | -------------------------------------------------------------------------------- /13-grid-first-steps/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | css 3 | dist -------------------------------------------------------------------------------- /13-grid-first-steps/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["stylelint-scss"], 3 | "extends": ["stylelint-config-standard", "stylelint-config-idiomatic-order"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /13-grid-first-steps/README.md: -------------------------------------------------------------------------------- 1 | # CSS Grid 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | ``` 14 | -------------------------------------------------------------------------------- /13-grid-first-steps/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | News website 7 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

👌 News

18 |
19 | 39 | 59 | 77 |
78 |
79 | The companions of the planets 83 |
84 | 85 |

86 | 90 | The companions of the planets 91 | 92 |

93 |

94 | Turn your minds to the moons of our solar system, the missions to explore them, and the awe they inspire in us. 95 |

96 |
97 |
98 |
99 | Seeking Small Worlds 103 |
104 | 105 |

106 | 110 | Seeking Small Worlds 111 | 112 |

113 |

114 | A spacecraft leaves one asteroid as planetary defense experts turn to others. 115 |

116 |
117 |
118 |
119 | 120 | 121 | -------------------------------------------------------------------------------- /13-grid-first-steps/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-grid-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-idiomatic-order": "^8.1.0", 13 | "stylelint-config-standard": "^20.0.0", 14 | "stylelint-scss": "^3.18.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /13-grid-first-steps/scss/_base.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: #686868; 9 | color: #fff; 10 | font-family: sans-serif; 11 | font-size: 1rem; 12 | line-height: 1.8; 13 | } 14 | 15 | a { 16 | color: #2d5d7b; 17 | text-decoration: underline; 18 | 19 | &:hover, 20 | &:focus { 21 | color: #457eac; 22 | } 23 | } 24 | 25 | .container { 26 | max-width: 72rem; 27 | padding: 1rem; 28 | margin: 0 auto; 29 | } 30 | 31 | .card { 32 | overflow: hidden; 33 | padding: 1rem; 34 | background: #fff; 35 | border-radius: 0.3rem; 36 | box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.4); 37 | color: #333; 38 | 39 | &__img { 40 | display: block; 41 | width: calc(100% + 2rem); 42 | height: 12rem; 43 | border-bottom: 3px solid #9191e9; 44 | margin: -1rem -1rem 0; 45 | background: #9191e9; 46 | 47 | img { 48 | display: block; 49 | width: 100%; 50 | height: 100%; 51 | object-fit: cover; 52 | } 53 | } 54 | 55 | &__title { 56 | margin-bottom: 0.5rem; 57 | font-size: 1.2rem; 58 | font-weight: 400; 59 | line-height: 1.3; 60 | 61 | a { 62 | text-decoration: none; 63 | } 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /13-grid-first-steps/scss/_grid.scss: -------------------------------------------------------------------------------- 1 | .gallery { 2 | display: grid; 3 | gap: 1rem; 4 | grid-template-columns: 15rem; 5 | grid-template-rows: 31rem 31rem 31rem 31rem 31rem; 6 | 7 | @media screen and (min-width: 40rem) { 8 | grid-template: 31rem 31rem 31rem / 15rem 15rem; 9 | } 10 | 11 | @media screen and (min-width: 55rem) { 12 | grid-template: 31rem 31rem / 15rem 15rem 15rem; 13 | } 14 | 15 | @media screen and (min-width: 70rem) { 16 | grid-template: 31rem / 15rem 15rem 15rem 15rem; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /13-grid-first-steps/scss/index.scss: -------------------------------------------------------------------------------- 1 | @import "./base"; 2 | @import "./grid"; 3 | -------------------------------------------------------------------------------- /21-align-grid/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | css 3 | dist -------------------------------------------------------------------------------- /21-align-grid/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["stylelint-scss"], 3 | "extends": ["stylelint-config-standard", "stylelint-config-idiomatic-order"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /21-align-grid/README.md: -------------------------------------------------------------------------------- 1 | # CSS Grid 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | ``` 14 | -------------------------------------------------------------------------------- /21-align-grid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | News website 7 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

👌 News

18 |
19 | 39 | 59 | 77 |
78 |
79 | The companions of the planets 83 |
84 | 85 |

86 | 90 | The companions of the planets 91 | 92 |

93 |

94 | Turn your minds to the moons of our solar system, the missions to explore them, and the awe they inspire in us. 95 |

96 |
97 |
98 |
99 | Seeking Small Worlds 103 |
104 | 105 |

106 | 110 | Seeking Small Worlds 111 | 112 |

113 |

114 | A spacecraft leaves one asteroid as planetary defense experts turn to others. 115 |

116 |
117 |
118 |
119 | 120 | 121 | -------------------------------------------------------------------------------- /21-align-grid/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-grid-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-idiomatic-order": "^8.1.0", 13 | "stylelint-config-standard": "^20.0.0", 14 | "stylelint-scss": "^3.18.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /21-align-grid/scss/_base.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: #686868; 9 | color: #fff; 10 | font-family: sans-serif; 11 | font-size: 1rem; 12 | line-height: 1.8; 13 | } 14 | 15 | a { 16 | color: #2d5d7b; 17 | text-decoration: underline; 18 | 19 | &:hover, 20 | &:focus { 21 | color: #457eac; 22 | } 23 | } 24 | 25 | .container { 26 | max-width: 72rem; 27 | padding: 1rem; 28 | margin: 0 auto; 29 | } 30 | 31 | .card { 32 | overflow: hidden; 33 | padding: 1rem; 34 | background: #fff; 35 | border-radius: 0.3rem; 36 | box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.4); 37 | color: #333; 38 | 39 | &__img { 40 | display: block; 41 | width: calc(100% + 2rem); 42 | height: 12rem; 43 | border-bottom: 3px solid #9191e9; 44 | margin: -1rem -1rem 0; 45 | background: #9191e9; 46 | 47 | img { 48 | display: block; 49 | width: 100%; 50 | height: 100%; 51 | object-fit: cover; 52 | } 53 | } 54 | 55 | &__title { 56 | margin-bottom: 0.5rem; 57 | font-size: 1.2rem; 58 | font-weight: 400; 59 | line-height: 1.3; 60 | 61 | a { 62 | text-decoration: none; 63 | } 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /21-align-grid/scss/_grid.scss: -------------------------------------------------------------------------------- 1 | .gallery { 2 | display: grid; 3 | gap: 1rem; 4 | grid-template-columns: 15rem; 5 | grid-template-rows: repeat(5, 31rem); 6 | place-content: center; 7 | 8 | @media screen and (min-width: 40rem) { 9 | grid-template: repeat(3, 31rem) / repeat(2, 15rem); 10 | } 11 | 12 | @media screen and (min-width: 55rem) { 13 | grid-template: repeat(2, 31rem) / repeat(3, 15rem); 14 | } 15 | 16 | @media screen and (min-width: 70rem) { 17 | grid-template: 31rem / repeat(4, 15rem); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /21-align-grid/scss/index.scss: -------------------------------------------------------------------------------- 1 | @import "./base"; 2 | @import "./grid"; 3 | -------------------------------------------------------------------------------- /22-fr-unit/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | css 3 | dist -------------------------------------------------------------------------------- /22-fr-unit/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["stylelint-scss"], 3 | "extends": ["stylelint-config-standard", "stylelint-config-idiomatic-order"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /22-fr-unit/README.md: -------------------------------------------------------------------------------- 1 | # CSS Grid 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | ``` 14 | -------------------------------------------------------------------------------- /22-fr-unit/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | News website 7 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

👌 News

18 |
19 | 39 | 59 | 77 |
78 |
79 | The companions of the planets 83 |
84 | 85 |

86 | 90 | The companions of the planets 91 | 92 |

93 |

94 | Turn your minds to the moons of our solar system, the missions to explore them, and the awe they inspire in us. 95 |

96 |
97 |
98 |
99 | Seeking Small Worlds 103 |
104 | 105 |

106 | 110 | Seeking Small Worlds 111 | 112 |

113 |

114 | A spacecraft leaves one asteroid as planetary defense experts turn to others. 115 |

116 |
117 |
118 |
119 | 120 | 121 | -------------------------------------------------------------------------------- /22-fr-unit/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-grid-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-idiomatic-order": "^8.1.0", 13 | "stylelint-config-standard": "^20.0.0", 14 | "stylelint-scss": "^3.18.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /22-fr-unit/scss/_base.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: #686868; 9 | color: #fff; 10 | font-family: sans-serif; 11 | font-size: 1rem; 12 | line-height: 1.8; 13 | } 14 | 15 | a { 16 | color: #2d5d7b; 17 | text-decoration: underline; 18 | 19 | &:hover, 20 | &:focus { 21 | color: #457eac; 22 | } 23 | } 24 | 25 | .container { 26 | max-width: 72rem; 27 | padding: 1rem; 28 | margin: 0 auto; 29 | } 30 | 31 | .card { 32 | overflow: hidden; 33 | padding: 1rem; 34 | background: #fff; 35 | border-radius: 0.3rem; 36 | box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.4); 37 | color: #333; 38 | 39 | &__img { 40 | display: block; 41 | width: calc(100% + 2rem); 42 | height: 12rem; 43 | border-bottom: 3px solid #9191e9; 44 | margin: -1rem -1rem 0; 45 | background: #9191e9; 46 | 47 | img { 48 | display: block; 49 | width: 100%; 50 | height: 100%; 51 | object-fit: cover; 52 | } 53 | } 54 | 55 | &__title { 56 | margin-bottom: 0.5rem; 57 | font-size: 1.2rem; 58 | font-weight: 400; 59 | line-height: 1.3; 60 | 61 | a { 62 | text-decoration: none; 63 | } 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /22-fr-unit/scss/_grid.scss: -------------------------------------------------------------------------------- 1 | .gallery { 2 | display: grid; 3 | gap: 1rem; 4 | grid-template: 31rem / 1fr; 5 | place-content: center; 6 | 7 | @media screen and (min-width: 40rem) { 8 | grid-template-columns: repeat(2, 1fr); 9 | } 10 | 11 | @media screen and (min-width: 55rem) { 12 | grid-template-columns: repeat(3, 1fr); 13 | } 14 | 15 | @media screen and (min-width: 70rem) { 16 | grid-template-columns: repeat(4, 1fr); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /22-fr-unit/scss/index.scss: -------------------------------------------------------------------------------- 1 | @import "./base"; 2 | @import "./grid"; 3 | -------------------------------------------------------------------------------- /23-grid-area/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | css 3 | dist -------------------------------------------------------------------------------- /23-grid-area/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["stylelint-scss"], 3 | "extends": ["stylelint-config-standard", "stylelint-config-idiomatic-order"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /23-grid-area/README.md: -------------------------------------------------------------------------------- 1 | # CSS Grid 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | ``` 14 | -------------------------------------------------------------------------------- /23-grid-area/img/ad-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-grid-course/2c1c0e829f92f94930d1b522840b92de4a77d588/23-grid-area/img/ad-bg.png -------------------------------------------------------------------------------- /23-grid-area/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-grid-course/2c1c0e829f92f94930d1b522840b92de4a77d588/23-grid-area/img/logo.png -------------------------------------------------------------------------------- /23-grid-area/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | News website 7 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

👌 News

18 |
19 |

Tags

20 | 26 |
27 |
28 | 48 | 68 | 86 |
87 |
88 | The companions of the planets 92 |
93 | 94 |

95 | 99 | The companions of the planets 100 | 101 |

102 |

103 | Turn your minds to the moons of our solar system, the missions to explore them, and the awe they inspire in us. 104 |

105 |
106 |
107 |
108 | Seeking Small Worlds 112 |
113 | 114 |

115 | 119 | Seeking Small Worlds 120 | 121 |

122 |

123 | A spacecraft leaves one asteroid as planetary defense experts turn to others. 124 |

125 |
126 |
127 | Codely 128 | Subscribe to Codely 129 |
130 |
131 |
132 | 133 | 134 | -------------------------------------------------------------------------------- /23-grid-area/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-grid-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-idiomatic-order": "^8.1.0", 13 | "stylelint-config-standard": "^20.0.0", 14 | "stylelint-scss": "^3.18.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /23-grid-area/scss/_base.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: #686868; 9 | color: #fff; 10 | font-family: sans-serif; 11 | font-size: 1rem; 12 | line-height: 1.8; 13 | } 14 | 15 | a { 16 | color: #2d5d7b; 17 | text-decoration: underline; 18 | 19 | &:hover, 20 | &:focus { 21 | color: #457eac; 22 | } 23 | } 24 | 25 | .container { 26 | max-width: 72rem; 27 | padding: 1rem; 28 | margin: 0 auto; 29 | } 30 | 31 | .card { 32 | overflow: hidden; 33 | padding: 1rem; 34 | background: #fff; 35 | border-radius: 0.3rem; 36 | box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.4); 37 | color: #333; 38 | 39 | &__img { 40 | display: block; 41 | width: calc(100% + 2rem); 42 | height: 12rem; 43 | border-bottom: 3px solid #9191e9; 44 | margin: -1rem -1rem 0; 45 | background: #9191e9; 46 | 47 | img { 48 | display: block; 49 | width: 100%; 50 | height: 100%; 51 | object-fit: cover; 52 | } 53 | } 54 | 55 | &__title { 56 | margin-bottom: 0.5rem; 57 | font-size: 1.2rem; 58 | font-weight: 400; 59 | line-height: 1.3; 60 | 61 | a { 62 | text-decoration: none; 63 | } 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /23-grid-area/scss/_grid.scss: -------------------------------------------------------------------------------- 1 | .main { 2 | display: grid; 3 | column-gap: 1rem; 4 | grid-template-areas: 5 | 'title title title title' 6 | 'gallery gallery gallery sidebar'; 7 | grid-template-columns: repeat(4, 21rem); 8 | place-content: center; 9 | row-gap: 2rem; 10 | } 11 | 12 | h1 { 13 | grid-area: title; 14 | } 15 | 16 | .sidebar { 17 | padding: 1rem; 18 | background: #fff; 19 | color: #333; 20 | grid-area: sidebar; 21 | } 22 | 23 | .gallery { 24 | display: grid; 25 | gap: 1rem; 26 | grid-area: gallery; 27 | grid-template: 31rem / 1fr; 28 | place-content: center; 29 | 30 | @media screen and (min-width: 40rem) { 31 | grid-template-columns: repeat(2, 1fr); 32 | } 33 | 34 | @media screen and (min-width: 55rem) { 35 | grid-template-columns: repeat(3, 1fr); 36 | } 37 | 38 | @media screen and (min-width: 70rem) { 39 | grid-template-areas: '. . ad ad'; 40 | grid-template-columns: repeat(4, 1fr); 41 | } 42 | } 43 | 44 | .ad { 45 | display: flex; 46 | flex-direction: column; 47 | align-items: center; 48 | justify-content: center; 49 | background: url('/img/ad-bg.png') no-repeat center; 50 | background-size: cover; 51 | color: #fff; 52 | font-weight: 700; 53 | grid-area: ad; 54 | text-align: center; 55 | text-transform: uppercase; 56 | 57 | a { 58 | display: block; 59 | color: #fff; 60 | font-size: 1.5rem; 61 | line-height: 1; 62 | text-decoration: none; 63 | 64 | &:hover { 65 | opacity: 0.9; 66 | } 67 | } 68 | 69 | img { 70 | width: 20rem; 71 | max-width: 80%; 72 | margin-bottom: 1rem; 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /23-grid-area/scss/index.scss: -------------------------------------------------------------------------------- 1 | @import "./base"; 2 | @import "./grid"; 3 | -------------------------------------------------------------------------------- /31-place-items/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | css 3 | dist -------------------------------------------------------------------------------- /31-place-items/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["stylelint-scss"], 3 | "extends": ["stylelint-config-standard", "stylelint-config-idiomatic-order"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /31-place-items/README.md: -------------------------------------------------------------------------------- 1 | # CSS Grid 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | ``` 14 | -------------------------------------------------------------------------------- /31-place-items/img/ad-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-grid-course/2c1c0e829f92f94930d1b522840b92de4a77d588/31-place-items/img/ad-bg.png -------------------------------------------------------------------------------- /31-place-items/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-grid-course/2c1c0e829f92f94930d1b522840b92de4a77d588/31-place-items/img/logo.png -------------------------------------------------------------------------------- /31-place-items/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | News website 7 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

👌 News

18 |
19 | 39 | 59 | 77 |
78 |
79 | The companions of the planets 83 |
84 | 85 |

86 | 90 | The companions of the planets 91 | 92 |

93 |

94 | Turn your minds to the moons of our solar system, the missions to explore them, and the awe they inspire in us. 95 |

96 |
97 |
98 |
99 | Seeking Small Worlds 103 |
104 | 105 |

106 | 110 | Seeking Small Worlds 111 | 112 |

113 |

114 | A spacecraft leaves one asteroid as planetary defense experts turn to others. 115 |

116 |
117 |
118 | Codely 119 | Subscribe to Codely 120 |
121 |
122 |
123 | 124 | 125 | -------------------------------------------------------------------------------- /31-place-items/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-grid-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-idiomatic-order": "^8.1.0", 13 | "stylelint-config-standard": "^20.0.0", 14 | "stylelint-scss": "^3.18.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /31-place-items/scss/_base.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: #686868; 9 | color: #fff; 10 | font-family: sans-serif; 11 | font-size: 1rem; 12 | line-height: 1.8; 13 | } 14 | 15 | a { 16 | color: #2d5d7b; 17 | text-decoration: underline; 18 | 19 | &:hover, 20 | &:focus { 21 | color: #457eac; 22 | } 23 | } 24 | 25 | .container { 26 | max-width: 72rem; 27 | padding: 1rem; 28 | margin: 0 auto; 29 | } 30 | 31 | .card { 32 | overflow: hidden; 33 | padding: 1rem; 34 | background: #fff; 35 | border-radius: 0.3rem; 36 | box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.4); 37 | color: #333; 38 | 39 | &__img { 40 | display: block; 41 | width: calc(100% + 2rem); 42 | height: 12rem; 43 | border-bottom: 3px solid #9191e9; 44 | margin: -1rem -1rem 0; 45 | background: #9191e9; 46 | 47 | img { 48 | display: block; 49 | width: 100%; 50 | height: 100%; 51 | object-fit: cover; 52 | } 53 | } 54 | 55 | &__title { 56 | margin-bottom: 0.5rem; 57 | font-size: 1.2rem; 58 | font-weight: 400; 59 | line-height: 1.3; 60 | 61 | a { 62 | text-decoration: none; 63 | } 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /31-place-items/scss/_grid.scss: -------------------------------------------------------------------------------- 1 | .gallery { 2 | display: grid; 3 | gap: 1rem; 4 | grid-area: gallery; 5 | grid-template: 31rem / 1fr; 6 | place-content: center; 7 | 8 | @media screen and (min-width: 40rem) { 9 | grid-template-columns: repeat(2, 1fr); 10 | } 11 | 12 | @media screen and (min-width: 55rem) { 13 | grid-template-columns: repeat(4, 1fr); 14 | } 15 | } 16 | 17 | .featured { 18 | grid-column: span 2; 19 | } 20 | 21 | .ad { 22 | display: none; 23 | flex-direction: column; 24 | align-items: center; 25 | justify-content: center; 26 | background: url('/img/ad-bg.png') no-repeat center; 27 | background-size: cover; 28 | color: #fff; 29 | font-weight: 700; 30 | grid-area: ad; 31 | grid-column: 3 / 5; 32 | grid-row-start: 1; 33 | text-align: center; 34 | text-transform: uppercase; 35 | 36 | a { 37 | display: block; 38 | color: #fff; 39 | font-size: 1.5rem; 40 | line-height: 1; 41 | text-decoration: none; 42 | 43 | &:hover { 44 | opacity: 0.9; 45 | } 46 | } 47 | 48 | img { 49 | width: 20rem; 50 | max-width: 80%; 51 | margin-bottom: 1rem; 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /31-place-items/scss/index.scss: -------------------------------------------------------------------------------- 1 | @import "./base"; 2 | @import "./grid"; 3 | -------------------------------------------------------------------------------- /32-align-items/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | css 3 | dist -------------------------------------------------------------------------------- /32-align-items/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["stylelint-scss"], 3 | "extends": ["stylelint-config-standard", "stylelint-config-idiomatic-order"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /32-align-items/README.md: -------------------------------------------------------------------------------- 1 | # CSS Grid 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | ``` 14 | -------------------------------------------------------------------------------- /32-align-items/img/ad-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-grid-course/2c1c0e829f92f94930d1b522840b92de4a77d588/32-align-items/img/ad-bg.png -------------------------------------------------------------------------------- /32-align-items/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-grid-course/2c1c0e829f92f94930d1b522840b92de4a77d588/32-align-items/img/logo.png -------------------------------------------------------------------------------- /32-align-items/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | News website 7 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

👌 News

18 |
19 | 39 | 59 | 77 |
78 |
79 | The companions of the planets 83 |
84 | 85 |

86 | 90 | The companions of the planets 91 | 92 |

93 |

94 | Turn your minds to the moons of our solar system, the missions to explore them, and the awe they inspire in us. 95 |

96 |
97 |
98 |
99 | Seeking Small Worlds 103 |
104 | 105 |

106 | 110 | Seeking Small Worlds 111 | 112 |

113 |

114 | A spacecraft leaves one asteroid as planetary defense experts turn to others. 115 |

116 |
117 |
118 | Codely 119 | Subscribe to Codely 120 |
121 |
122 |
123 | 124 | 125 | -------------------------------------------------------------------------------- /32-align-items/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-grid-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-idiomatic-order": "^8.1.0", 13 | "stylelint-config-standard": "^20.0.0", 14 | "stylelint-scss": "^3.18.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /32-align-items/scss/_base.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: #686868; 9 | color: #fff; 10 | font-family: sans-serif; 11 | font-size: 1rem; 12 | line-height: 1.8; 13 | } 14 | 15 | a { 16 | color: #2d5d7b; 17 | text-decoration: underline; 18 | 19 | &:hover, 20 | &:focus { 21 | color: #457eac; 22 | } 23 | } 24 | 25 | .container { 26 | max-width: 72rem; 27 | padding: 1rem; 28 | margin: 0 auto; 29 | } 30 | 31 | .card { 32 | overflow: hidden; 33 | padding: 1rem; 34 | background: #fff; 35 | border-radius: 0.3rem; 36 | box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.4); 37 | color: #333; 38 | 39 | &__img { 40 | display: block; 41 | width: calc(100% + 2rem); 42 | height: 12rem; 43 | border-bottom: 3px solid #9191e9; 44 | margin: -1rem -1rem 0; 45 | background: #9191e9; 46 | 47 | img { 48 | display: block; 49 | width: 100%; 50 | height: 100%; 51 | object-fit: cover; 52 | } 53 | } 54 | 55 | &__title { 56 | margin-bottom: 0.5rem; 57 | font-size: 1.2rem; 58 | font-weight: 400; 59 | line-height: 1.3; 60 | 61 | a { 62 | text-decoration: none; 63 | } 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /32-align-items/scss/_grid.scss: -------------------------------------------------------------------------------- 1 | .gallery { 2 | display: grid; 3 | gap: 1rem; 4 | grid-template: 31rem / 1fr; 5 | place-content: center; 6 | 7 | @media screen and (min-width: 40rem) { 8 | grid-template-columns: repeat(2, 1fr); 9 | } 10 | 11 | @media screen and (min-width: 55rem) { 12 | grid-template-columns: repeat(4, 1fr); 13 | } 14 | } 15 | 16 | .ad { 17 | display: flex; 18 | flex-direction: column; 19 | align-items: center; 20 | align-self: center; 21 | justify-content: center; 22 | padding: 2rem 0; 23 | background: url('/img/ad-bg.png') no-repeat center; 24 | background-size: cover; 25 | color: #fff; 26 | font-weight: 700; 27 | text-align: center; 28 | text-transform: uppercase; 29 | 30 | a { 31 | display: block; 32 | color: #fff; 33 | font-size: 1.5rem; 34 | line-height: 1; 35 | text-decoration: none; 36 | 37 | &:hover { 38 | opacity: 0.9; 39 | } 40 | } 41 | 42 | img { 43 | width: 20rem; 44 | max-width: 80%; 45 | margin-bottom: 1rem; 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /32-align-items/scss/index.scss: -------------------------------------------------------------------------------- 1 | @import "./base"; 2 | @import "./grid"; 3 | -------------------------------------------------------------------------------- /33-z-index/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | css 3 | dist -------------------------------------------------------------------------------- /33-z-index/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["stylelint-scss"], 3 | "extends": ["stylelint-config-standard", "stylelint-config-idiomatic-order"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /33-z-index/README.md: -------------------------------------------------------------------------------- 1 | # CSS Grid 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | ``` 14 | -------------------------------------------------------------------------------- /33-z-index/img/team/cat-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-grid-course/2c1c0e829f92f94930d1b522840b92de4a77d588/33-z-index/img/team/cat-1.png -------------------------------------------------------------------------------- /33-z-index/img/team/cat-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-grid-course/2c1c0e829f92f94930d1b522840b92de4a77d588/33-z-index/img/team/cat-2.png -------------------------------------------------------------------------------- /33-z-index/img/team/member-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-grid-course/2c1c0e829f92f94930d1b522840b92de4a77d588/33-z-index/img/team/member-1.png -------------------------------------------------------------------------------- /33-z-index/img/team/member-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-grid-course/2c1c0e829f92f94930d1b522840b92de4a77d588/33-z-index/img/team/member-2.png -------------------------------------------------------------------------------- /33-z-index/img/team/member-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-grid-course/2c1c0e829f92f94930d1b522840b92de4a77d588/33-z-index/img/team/member-3.png -------------------------------------------------------------------------------- /33-z-index/img/team/member-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-grid-course/2c1c0e829f92f94930d1b522840b92de4a77d588/33-z-index/img/team/member-4.png -------------------------------------------------------------------------------- /33-z-index/img/team/member-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-grid-course/2c1c0e829f92f94930d1b522840b92de4a77d588/33-z-index/img/team/member-5.png -------------------------------------------------------------------------------- /33-z-index/img/team/member-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-grid-course/2c1c0e829f92f94930d1b522840b92de4a77d588/33-z-index/img/team/member-6.png -------------------------------------------------------------------------------- /33-z-index/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CodelyTV Pro 7 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

🙌 Team

18 |
19 |
20 | cat 21 |
22 |
23 | cat 24 |
25 |
26 | person 27 |
28 |
29 | person 30 |
31 |
32 | person 33 |
34 |
35 | person 36 |
37 |
38 | person 39 |
40 |
41 | person 42 |
43 |
44 |
45 | 46 | 47 | -------------------------------------------------------------------------------- /33-z-index/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-grid-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-idiomatic-order": "^8.1.0", 13 | "stylelint-config-standard": "^20.0.0", 14 | "stylelint-scss": "^3.18.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /33-z-index/scss/_base.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: #ddd; 9 | color: #333; 10 | font-family: sans-serif; 11 | font-size: 1rem; 12 | line-height: 1.8; 13 | } 14 | 15 | a { 16 | color: #289f5f; 17 | text-decoration: underline; 18 | 19 | &:hover, 20 | &:focus { 21 | color: #19623b; 22 | } 23 | } 24 | 25 | .container { 26 | max-width: 72rem; 27 | padding: 1rem; 28 | margin: 0 auto; 29 | } 30 | -------------------------------------------------------------------------------- /33-z-index/scss/_grid.scss: -------------------------------------------------------------------------------- 1 | .team { 2 | display: grid; 3 | gap: 1rem; 4 | grid-template-columns: repeat(6, 1fr); 5 | } 6 | 7 | .member { 8 | overflow: hidden; 9 | background: #fff; 10 | grid-row: span 2; 11 | 12 | &:nth-child(3) { 13 | grid-area: 1 / 1 / 3 / 3; 14 | } 15 | 16 | &:nth-child(4) { 17 | grid-area: 1 / 3 / 3 / 5; 18 | } 19 | 20 | &:nth-child(5) { 21 | grid-area: 1 / 5 / 3 / 7; 22 | } 23 | 24 | &:nth-child(6) { 25 | grid-area: 3 / 1 / 5 / 3; 26 | } 27 | 28 | &:nth-child(7) { 29 | grid-area: 3 / 3 / 5 / 5; 30 | } 31 | 32 | &:nth-child(8) { 33 | grid-area: 3 / 5 / 5 / 7; 34 | } 35 | 36 | img { 37 | display: block; 38 | width: 100%; 39 | height: 100%; 40 | object-fit: cover; 41 | } 42 | 43 | &--highlighted { 44 | z-index: 1; 45 | border: 0.8rem solid #fff; 46 | grid-column: 2 / 4; 47 | grid-row: 2 / 4; 48 | transform: rotate(45deg); 49 | 50 | &:nth-child(2) { 51 | grid-column: 4 / 6; 52 | } 53 | 54 | img { 55 | transform: scale(1.5) rotate(-45deg); 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /33-z-index/scss/index.scss: -------------------------------------------------------------------------------- 1 | @import "./base"; 2 | @import "./grid"; 3 | -------------------------------------------------------------------------------- /41-implicit-grid/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | css 3 | dist -------------------------------------------------------------------------------- /41-implicit-grid/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["stylelint-scss"], 3 | "extends": ["stylelint-config-standard", "stylelint-config-idiomatic-order"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /41-implicit-grid/README.md: -------------------------------------------------------------------------------- 1 | # CSS Grid 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | ``` 14 | -------------------------------------------------------------------------------- /41-implicit-grid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | News website 7 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

👌 News

18 |
19 | 39 |
40 |
41 | Solar Cruiser, NASA's Large Solar Sail Test 45 |
46 | 47 |

48 | 52 | Solar Cruiser, NASA's Large Solar Sail Test 53 | 54 |

55 |

56 | The biggest solar sail yet will create an artificial orbit between the Earth and Sun. 57 | Solar Cruiser is a NASA mission launching in 2025 to test a large solar sail at an artificial orbit between the Earth and Sun. 58 | Solar sails use the gentle push of sunlight for propulsion, giving them unlimited fuel to reach unique orbits and perhaps one day visit other stars. 59 | Solar Cruiser’s sail will be the largest ever tested in space, covering an area of more than six tennis courts. 60 |

61 |
62 | 80 |
81 |
82 | The companions of the planets 86 |
87 | 88 |

89 | 93 | The companions of the planets 94 | 95 |

96 |

97 | Turn your minds to the moons of our solar system, the missions to explore them, and the awe they inspire in us. 98 |

99 |
100 |
101 |
102 | Seeking Small Worlds 106 |
107 | 108 |

109 | 113 | Seeking Small Worlds 114 | 115 |

116 |

117 | A spacecraft leaves one asteroid as planetary defense experts turn to others. 118 |

119 |
120 |
121 |
122 | 123 | 124 | -------------------------------------------------------------------------------- /41-implicit-grid/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-grid-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-idiomatic-order": "^8.1.0", 13 | "stylelint-config-standard": "^20.0.0", 14 | "stylelint-scss": "^3.18.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /41-implicit-grid/scss/_base.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | margin: 0; 9 | background: #686868; 10 | color: #fff; 11 | font-family: sans-serif; 12 | font-size: 1rem; 13 | line-height: 1.8; 14 | } 15 | 16 | a { 17 | color: #2d5d7b; 18 | text-decoration: underline; 19 | 20 | &:hover, 21 | &:focus { 22 | color: #457eac; 23 | } 24 | } 25 | 26 | .container { 27 | max-width: 80rem; 28 | padding: 1rem; 29 | margin: 0 auto; 30 | } 31 | 32 | .card { 33 | overflow: hidden; 34 | padding: 1rem; 35 | background: #fff; 36 | border-radius: 0.3rem; 37 | box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.4); 38 | color: #333; 39 | 40 | &__img { 41 | display: block; 42 | width: calc(100% + 2rem); 43 | height: 12rem; 44 | border-bottom: 3px solid #9191e9; 45 | margin: -1rem -1rem 0; 46 | background: #9191e9; 47 | 48 | img { 49 | display: block; 50 | width: 100%; 51 | height: 100%; 52 | object-fit: cover; 53 | } 54 | } 55 | 56 | &__title { 57 | margin-bottom: 0.5rem; 58 | font-size: 1.2rem; 59 | font-weight: 400; 60 | line-height: 1.3; 61 | 62 | a { 63 | text-decoration: none; 64 | } 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /41-implicit-grid/scss/_grid.scss: -------------------------------------------------------------------------------- 1 | .gallery { 2 | display: grid; 3 | overflow: hidden; 4 | margin-right: -1rem; 5 | gap: 1rem; 6 | grid-auto-columns: 5rem; 7 | grid-auto-flow: column; 8 | grid-auto-rows: 22rem; 9 | grid-template-columns: 1fr; 10 | 11 | > * { 12 | min-width: 12rem; 13 | } 14 | 15 | @media screen and (min-width: 40rem) { 16 | grid-template-columns: repeat(2, 1fr); 17 | } 18 | 19 | @media screen and (min-width: 58rem) { 20 | grid-template-columns: repeat(3, 1fr); 21 | } 22 | 23 | @media screen and (min-width: 70rem) { 24 | grid-template-columns: repeat(4, 1fr); 25 | } 26 | 27 | @media screen and (min-width: 78rem) { 28 | grid-template-columns: repeat(5, 1fr); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /41-implicit-grid/scss/index.scss: -------------------------------------------------------------------------------- 1 | @import "./base"; 2 | @import "./grid"; 3 | -------------------------------------------------------------------------------- /42-responsive/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | css 3 | dist -------------------------------------------------------------------------------- /42-responsive/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["stylelint-scss"], 3 | "extends": ["stylelint-config-standard", "stylelint-config-idiomatic-order"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /42-responsive/README.md: -------------------------------------------------------------------------------- 1 | # CSS Grid 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | ``` 14 | -------------------------------------------------------------------------------- /42-responsive/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | News website 7 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

👌 News

18 |
19 | 39 | 59 | 77 |
78 |
79 | The companions of the planets 83 |
84 | 85 |

86 | 90 | The companions of the planets 91 | 92 |

93 |

94 | Turn your minds to the moons of our solar system, the missions to explore them, and the awe they inspire in us. 95 |

96 |
97 |
98 |
99 | Seeking Small Worlds 103 |
104 | 105 |

106 | 110 | Seeking Small Worlds 111 | 112 |

113 |

114 | A spacecraft leaves one asteroid as planetary defense experts turn to others. 115 |

116 |
117 |
118 |
119 | 120 | 121 | -------------------------------------------------------------------------------- /42-responsive/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-grid-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-idiomatic-order": "^8.1.0", 13 | "stylelint-config-standard": "^20.0.0", 14 | "stylelint-scss": "^3.18.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /42-responsive/scss/_base.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | margin: 0; 9 | background: #686868; 10 | color: #fff; 11 | font-family: sans-serif; 12 | font-size: 1rem; 13 | line-height: 1.8; 14 | } 15 | 16 | a { 17 | color: #2d5d7b; 18 | text-decoration: underline; 19 | 20 | &:hover, 21 | &:focus { 22 | color: #457eac; 23 | } 24 | } 25 | 26 | .container { 27 | max-width: 80rem; 28 | padding: 1rem; 29 | margin: 0 auto; 30 | } 31 | 32 | .card { 33 | overflow: hidden; 34 | padding: 1rem; 35 | background: #fff; 36 | border-radius: 0.3rem; 37 | box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.4); 38 | color: #333; 39 | 40 | &__img { 41 | display: block; 42 | width: calc(100% + 2rem); 43 | height: 12rem; 44 | border-bottom: 3px solid #9191e9; 45 | margin: -1rem -1rem 0; 46 | background: #9191e9; 47 | 48 | img { 49 | display: block; 50 | width: 100%; 51 | height: 100%; 52 | object-fit: cover; 53 | } 54 | } 55 | 56 | &__title { 57 | margin-bottom: 0.5rem; 58 | font-size: 1.2rem; 59 | font-weight: 400; 60 | line-height: 1.3; 61 | 62 | a { 63 | text-decoration: none; 64 | } 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /42-responsive/scss/_grid.scss: -------------------------------------------------------------------------------- 1 | .gallery { 2 | display: grid; 3 | gap: 1rem; 4 | grid-auto-flow: dense; 5 | grid-auto-rows: 28rem; 6 | grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 1rem), 15rem), 1fr)); 7 | } 8 | 9 | .featured { 10 | grid-column: span 2; 11 | } 12 | -------------------------------------------------------------------------------- /42-responsive/scss/index.scss: -------------------------------------------------------------------------------- 1 | @import "./base"; 2 | @import "./grid"; 3 | -------------------------------------------------------------------------------- /43-old-browsers/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | css 3 | dist -------------------------------------------------------------------------------- /43-old-browsers/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["stylelint-scss"], 3 | "extends": ["stylelint-config-standard", "stylelint-config-idiomatic-order"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /43-old-browsers/README.md: -------------------------------------------------------------------------------- 1 | # CSS Grid 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | ``` 14 | -------------------------------------------------------------------------------- /43-old-browsers/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | News website 7 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

👌 News

18 |
19 | 39 | 59 | 77 |
78 |
79 | The companions of the planets 83 |
84 | 85 |

86 | 90 | The companions of the planets 91 | 92 |

93 |

94 | Turn your minds to the moons of our solar system, the missions to explore them, and the awe they inspire in us. 95 |

96 |
97 |
98 |
99 | Seeking Small Worlds 103 |
104 | 105 |

106 | 110 | Seeking Small Worlds 111 | 112 |

113 |

114 | A spacecraft leaves one asteroid as planetary defense experts turn to others. 115 |

116 |
117 |
118 |
119 | 120 | 121 | -------------------------------------------------------------------------------- /43-old-browsers/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-grid-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-idiomatic-order": "^8.1.0", 13 | "stylelint-config-standard": "^20.0.0", 14 | "stylelint-scss": "^3.18.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /43-old-browsers/scss/_base.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | margin: 0; 9 | background: #686868; 10 | color: #fff; 11 | font-family: sans-serif; 12 | font-size: 1rem; 13 | line-height: 1.8; 14 | } 15 | 16 | a { 17 | color: #2d5d7b; 18 | text-decoration: underline; 19 | 20 | &:hover, 21 | &:focus { 22 | color: #457eac; 23 | } 24 | } 25 | 26 | .container { 27 | max-width: 80rem; 28 | padding: 1rem; 29 | margin: 0 auto; 30 | } 31 | 32 | .card { 33 | overflow: hidden; 34 | padding: 1rem; 35 | background: #fff; 36 | border-radius: 0.3rem; 37 | box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.4); 38 | color: #333; 39 | 40 | &__img { 41 | display: block; 42 | width: calc(100% + 2rem); 43 | height: 12rem; 44 | border-bottom: 3px solid #9191e9; 45 | margin: -1rem -1rem 0; 46 | background: #9191e9; 47 | 48 | img { 49 | display: block; 50 | width: 100%; 51 | height: 100%; 52 | object-fit: cover; 53 | } 54 | } 55 | 56 | &__title { 57 | margin-bottom: 0.5rem; 58 | font-size: 1.2rem; 59 | font-weight: 400; 60 | line-height: 1.3; 61 | 62 | a { 63 | text-decoration: none; 64 | } 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /43-old-browsers/scss/_grid.scss: -------------------------------------------------------------------------------- 1 | .gallery { 2 | display: grid; 3 | gap: 1rem; 4 | grid-auto-rows: 28rem; 5 | grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); 6 | 7 | > * { 8 | min-height: 28rem; 9 | margin: 0 0.5rem 1rem; 10 | 11 | @media (min-width: 35rem) { 12 | width: 15rem; 13 | float: left; 14 | 15 | &:nth-child(2n + 1) { 16 | clear: both; 17 | } 18 | } 19 | 20 | @media (min-width: 50rem) { 21 | &:nth-child(2n + 1) { 22 | clear: none; 23 | } 24 | 25 | &:nth-child(3n + 1) { 26 | clear: both; 27 | } 28 | } 29 | 30 | @supports (display: grid) { 31 | width: auto; 32 | min-height: 0; 33 | margin: 0; 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /43-old-browsers/scss/index.scss: -------------------------------------------------------------------------------- 1 | @import "./base"; 2 | @import "./grid"; 3 | -------------------------------------------------------------------------------- /52-mobile-first/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | css 3 | dist -------------------------------------------------------------------------------- /52-mobile-first/.prettierrc: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /52-mobile-first/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["stylelint-scss"], 3 | "extends": ["stylelint-config-standard", "stylelint-config-rational-order"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /52-mobile-first/README.md: -------------------------------------------------------------------------------- 1 | # CSS Grid 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | ``` 14 | -------------------------------------------------------------------------------- /52-mobile-first/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Helvetica Neue 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |

Helvetica Neue

15 |
16 |
In war
17 |
truth
18 |
is the first casuality
19 |
by Aeschylus
20 |
21 | ABCDEFGHI 22 | JKLMNOPQRSTUVWXYZ 23 |
24 |
25 | abcdef
26 | ghijklmnopqr
27 | stuv
28 | wxyz 29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 | 0123456789 43 |
44 |
45 | 46 | 47 | -------------------------------------------------------------------------------- /52-mobile-first/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-grid-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-idiomatic-order": "^8.1.0", 13 | "stylelint-config-rational-order": "^0.1.2", 14 | "stylelint-config-standard": "^20.0.0", 15 | "stylelint-scss": "^3.18.0" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /52-mobile-first/scss/index.scss: -------------------------------------------------------------------------------- 1 | $dark-red: #a41121; 2 | $light-red: #c20116; 3 | 4 | html { 5 | font-size: 16px; 6 | } 7 | 8 | *, 9 | *::before, 10 | *::after { 11 | box-sizing: border-box; 12 | } 13 | 14 | body { 15 | margin: 0; 16 | color: #000; 17 | font-size: 1.4rem; 18 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 19 | line-height: 1.3; 20 | background: #fff; 21 | } 22 | 23 | a { 24 | text-decoration: none; 25 | } 26 | 27 | p { 28 | margin: 0; 29 | } 30 | 31 | .grid { 32 | display: grid; 33 | grid-template-rows: 1fr repeat(2, auto) 3.5rem repeat(3, auto) 1fr; 34 | grid-template-columns: 1fr repeat(3, auto) 1fr; 35 | min-height: 100vh; 36 | } 37 | 38 | .title { 39 | z-index: 1; 40 | grid-row: 3; 41 | grid-column: 1 / 5; 42 | margin: 0; 43 | padding: 1rem 0.5rem; 44 | color: #fff; 45 | font-weight: 300; 46 | font-size: 4rem; 47 | line-height: 0.9; 48 | text-align: right; 49 | background: #000; 50 | 51 | strong { 52 | display: block; 53 | font-weight: 700; 54 | } 55 | } 56 | 57 | .title-block { 58 | grid-row: 3; 59 | grid-column: 5; 60 | background: #000; 61 | } 62 | 63 | .quote { 64 | padding: 0.3rem; 65 | font-size: 2rem; 66 | white-space: nowrap; 67 | text-align: center; 68 | } 69 | 70 | .quote1 { 71 | grid-row: 4 / 9; 72 | grid-column: 2; 73 | color: #000; 74 | font-weight: 700; 75 | background: $dark-red; 76 | } 77 | 78 | .quote2 { 79 | display: flex; 80 | grid-row: 1 / 5; 81 | grid-column: 3 / 4; 82 | align-items: flex-end; 83 | justify-content: center; 84 | color: #fff; 85 | font-weight: 700; 86 | font-size: 2.5rem; 87 | letter-spacing: 0.1rem; 88 | background: $light-red; 89 | } 90 | 91 | .quote3 { 92 | grid-row: 5; 93 | grid-column: 3 / 5; 94 | padding: 0.3rem 0 0.3rem 0.5rem; 95 | font-size: 1.7rem; 96 | text-align: right; 97 | } 98 | 99 | .attribution { 100 | grid-row: 6; 101 | grid-column: 3 / 5; 102 | font-size: 1rem; 103 | text-align: right; 104 | } 105 | 106 | .uppercase { 107 | grid-row: 2; 108 | grid-column: 4; 109 | justify-self: flex-end; 110 | padding: 0.5rem 0; 111 | writing-mode: vertical-lr; 112 | 113 | strong { 114 | display: block; 115 | } 116 | } 117 | 118 | .lowercase { 119 | grid-row: 1 / 3; 120 | grid-column: 2; 121 | padding: 0.4rem; 122 | color: #fff; 123 | font-weight: 700; 124 | line-height: 1.2; 125 | text-align: right; 126 | background: $dark-red; 127 | writing-mode: vertical-rl; 128 | } 129 | 130 | .numbers { 131 | display: flex; 132 | flex-direction: column; 133 | grid-row: 7; 134 | grid-column: 3 / 5; 135 | font-weight: 700; 136 | font-size: 1.1rem; 137 | letter-spacing: 0.1rem; 138 | writing-mode: vertical-rl; 139 | } 140 | 141 | .bars { 142 | display: flex; 143 | flex-grow: 1; 144 | align-items: flex-end; 145 | justify-content: space-around; 146 | block-size: 100%; 147 | } 148 | 149 | .bar { 150 | background: #000; 151 | block-size: 100%; 152 | inline-size: 0.15rem; 153 | 154 | &:nth-child(odd) { 155 | inline-size: 0.3rem; 156 | } 157 | 158 | &:nth-child(3n) { 159 | block-size: 30%; 160 | } 161 | 162 | &:nth-child(3n + 1) { 163 | block-size: 60%; 164 | } 165 | 166 | &:last-child { 167 | block-size: 100%; 168 | } 169 | } 170 | -------------------------------------------------------------------------------- /53-desktop/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | css 3 | dist -------------------------------------------------------------------------------- /53-desktop/.prettierrc: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /53-desktop/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["stylelint-scss"], 3 | "extends": ["stylelint-config-standard", "stylelint-config-rational-order"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /53-desktop/README.md: -------------------------------------------------------------------------------- 1 | # CSS Grid 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | ``` 14 | -------------------------------------------------------------------------------- /53-desktop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Helvetica Neue 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |

Helvetica Neue

15 |
16 |
In war
17 |
truth
18 |
is the first casuality
19 |
by Aeschylus
20 |
21 | ABCDEFGHI 22 | JKLMNOPQRSTUVWXYZ 23 |
24 |
25 | abcdef
26 | ghijklmnopqr
27 | stuv
28 | wxyz 29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 | 0123456789 43 |
44 |
45 | 46 | 47 | -------------------------------------------------------------------------------- /53-desktop/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-grid-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-idiomatic-order": "^8.1.0", 13 | "stylelint-config-rational-order": "^0.1.2", 14 | "stylelint-config-standard": "^20.0.0", 15 | "stylelint-scss": "^3.18.0" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /53-desktop/scss/index.scss: -------------------------------------------------------------------------------- 1 | $dark-red: #a41121; 2 | $light-red: #c20116; 3 | 4 | html { 5 | font-size: 16px; 6 | 7 | @media (min-width: 30rem) { 8 | font-size: 18px; 9 | } 10 | } 11 | 12 | *, 13 | *::before, 14 | *::after { 15 | box-sizing: border-box; 16 | } 17 | 18 | body { 19 | margin: 0; 20 | color: #000; 21 | font-size: 1.4rem; 22 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 23 | line-height: 1.3; 24 | background: #fff; 25 | 26 | @media (min-width: 90rem) { 27 | width: 100vw; 28 | height: 100vh; 29 | overflow: hidden; 30 | } 31 | } 32 | 33 | a { 34 | text-decoration: none; 35 | } 36 | 37 | p { 38 | margin: 0; 39 | } 40 | 41 | .grid { 42 | display: grid; 43 | grid-template-rows: 1.5fr repeat(2, auto) 3.5rem repeat(3, auto) 1fr; 44 | grid-template-columns: 1fr repeat(3, auto) 1fr; 45 | min-height: 100vh; 46 | 47 | @media (min-width: 90rem) { 48 | min-width: 200vw; 49 | min-height: 200vh; 50 | transform: translateX(-50vw) translateY(-50vh) rotate(-45deg); 51 | } 52 | } 53 | 54 | .title { 55 | z-index: 1; 56 | grid-row: 3; 57 | grid-column: 1 / 5; 58 | margin: 0; 59 | padding: 1rem 0.5rem; 60 | color: #fff; 61 | font-weight: 300; 62 | font-size: 4rem; 63 | line-height: 0.9; 64 | text-align: right; 65 | background: #000; 66 | 67 | strong { 68 | display: block; 69 | font-weight: 700; 70 | } 71 | } 72 | 73 | .title-block { 74 | grid-row: 3; 75 | grid-column: 5; 76 | background: #000; 77 | } 78 | 79 | .quote { 80 | padding: 0.3rem; 81 | font-size: 2rem; 82 | white-space: nowrap; 83 | text-align: center; 84 | } 85 | 86 | .quote1 { 87 | grid-row: 4 / 9; 88 | grid-column: 2; 89 | color: #000; 90 | font-weight: 700; 91 | background: $dark-red; 92 | } 93 | 94 | .quote2 { 95 | display: flex; 96 | grid-row: 1 / 5; 97 | grid-column: 3 / 4; 98 | align-items: flex-end; 99 | justify-content: center; 100 | color: #fff; 101 | font-weight: 700; 102 | font-size: 2.5rem; 103 | letter-spacing: 0.1rem; 104 | background: $light-red; 105 | } 106 | 107 | .quote3 { 108 | grid-row: 5; 109 | grid-column: 3 / 5; 110 | padding: 0.3rem 0 0.3rem 0.5rem; 111 | font-size: 1.7rem; 112 | text-align: right; 113 | 114 | @media (min-width: 50rem) { 115 | grid-row: 4; 116 | grid-column: 4 / 5; 117 | } 118 | } 119 | 120 | .attribution { 121 | grid-row: 6; 122 | grid-column: 3 / 5; 123 | font-size: 1rem; 124 | text-align: right; 125 | 126 | @media (min-width: 50rem) { 127 | grid-row: 5; 128 | grid-column: 4; 129 | } 130 | } 131 | 132 | .uppercase { 133 | grid-row: 2; 134 | grid-column: 4; 135 | justify-self: flex-end; 136 | padding: 0.5rem 0; 137 | writing-mode: vertical-lr; 138 | 139 | @media (min-width: 50rem) { 140 | grid-column: 4 / 6; 141 | justify-self: flex-start; 142 | padding-left: 5rem; 143 | writing-mode: horizontal-tb; 144 | } 145 | 146 | strong { 147 | display: block; 148 | } 149 | } 150 | 151 | .lowercase { 152 | grid-row: 1 / 3; 153 | grid-column: 2; 154 | padding: 0.4rem; 155 | color: #fff; 156 | font-weight: 700; 157 | line-height: 1.2; 158 | text-align: right; 159 | background: $dark-red; 160 | writing-mode: vertical-rl; 161 | } 162 | 163 | .numbers { 164 | display: flex; 165 | flex-direction: column; 166 | grid-row: 7; 167 | grid-column: 3 / 5; 168 | font-weight: 700; 169 | font-size: 1.1rem; 170 | letter-spacing: 0.1rem; 171 | writing-mode: vertical-rl; 172 | 173 | @media (min-width: 50rem) { 174 | grid-row: 5; 175 | grid-column: 3 / 4; 176 | min-height: 17rem; 177 | writing-mode: horizontal-tb; 178 | } 179 | } 180 | 181 | .bars { 182 | display: flex; 183 | flex-grow: 1; 184 | align-items: flex-end; 185 | justify-content: space-around; 186 | block-size: 100%; 187 | } 188 | 189 | .bar { 190 | background: #000; 191 | block-size: 100%; 192 | inline-size: 0.15rem; 193 | 194 | &:nth-child(odd) { 195 | inline-size: 0.3rem; 196 | } 197 | 198 | &:nth-child(3n) { 199 | block-size: 30%; 200 | } 201 | 202 | &:nth-child(3n + 1) { 203 | block-size: 60%; 204 | } 205 | 206 | &:last-child { 207 | block-size: 100%; 208 | } 209 | } 210 | -------------------------------------------------------------------------------- /61-subgrid/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | css 3 | dist -------------------------------------------------------------------------------- /61-subgrid/.prettierrc: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /61-subgrid/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["stylelint-scss"], 3 | "extends": ["stylelint-config-standard", "stylelint-config-rational-order"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /61-subgrid/README.md: -------------------------------------------------------------------------------- 1 | # CSS Grid 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | ``` 14 | -------------------------------------------------------------------------------- /61-subgrid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Helvetica Neue 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |

15 | Helvetica Neue 16 |

17 |
18 | In war 19 | truth 20 | is the first casuality 21 | by Aeschylus 22 |
23 |
24 | ABCDEFGHI 25 | JKLMNOPQRSTUVWXYZ 26 |
27 |
28 | abcdef
29 | ghijklmnopqr
30 | stuv
31 | wxyz 32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 | 0123456789 46 |
47 |
48 | 49 | 50 | -------------------------------------------------------------------------------- /61-subgrid/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-grid-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-idiomatic-order": "^8.1.0", 13 | "stylelint-config-rational-order": "^0.1.2", 14 | "stylelint-config-standard": "^20.0.0", 15 | "stylelint-scss": "^3.18.0" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /61-subgrid/scss/index.scss: -------------------------------------------------------------------------------- 1 | $dark-red: #a41121; 2 | $light-red: #c20116; 3 | 4 | html { 5 | font-size: 16px; 6 | 7 | @media (min-width: 30rem) { 8 | font-size: 18px; 9 | } 10 | } 11 | 12 | *, 13 | *::before, 14 | *::after { 15 | box-sizing: border-box; 16 | } 17 | 18 | body { 19 | margin: 0; 20 | color: #000; 21 | font-size: 1.4rem; 22 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 23 | line-height: 1.3; 24 | background: #fff; 25 | 26 | @media (min-width: 90rem) { 27 | width: 100vw; 28 | height: 100vh; 29 | overflow: hidden; 30 | } 31 | } 32 | 33 | a { 34 | text-decoration: none; 35 | } 36 | 37 | p { 38 | margin: 0; 39 | } 40 | 41 | .grid { 42 | display: grid; 43 | grid-template-rows: 1.5fr repeat(2, auto) 3.5rem repeat(3, auto) 1fr; 44 | grid-template-columns: 1fr repeat(3, auto) 1fr; 45 | min-height: 100vh; 46 | 47 | @media (min-width: 90rem) { 48 | min-width: 200vw; 49 | min-height: 200vh; 50 | transform: translateX(-50vw) translateY(-50vh) rotate(-45deg); 51 | } 52 | } 53 | 54 | .title { 55 | z-index: 1; 56 | display: grid; 57 | grid-row: 3; 58 | grid-column: 1 / 6; 59 | grid-template-rows: subgrid; 60 | grid-template-columns: subgrid; 61 | margin: 0; 62 | padding: 1rem 0.5rem; 63 | color: #fff; 64 | font-weight: 300; 65 | font-size: 4rem; 66 | line-height: 0.9; 67 | text-align: right; 68 | background: #000; 69 | 70 | > * { 71 | grid-column: 1 / 5; 72 | } 73 | 74 | strong { 75 | display: block; 76 | font-weight: 700; 77 | } 78 | } 79 | 80 | .quote { 81 | display: grid; 82 | grid-row: 1 / 9; 83 | grid-column: 1 / 5; 84 | grid-template-rows: subgrid; 85 | grid-template-columns: subgrid; 86 | margin: 0; 87 | font-size: 2rem; 88 | white-space: nowrap; 89 | text-align: center; 90 | } 91 | 92 | .quote1 { 93 | grid-row: 4 / 9; 94 | grid-column: 2; 95 | padding-top: 0.5rem; 96 | color: #000; 97 | font-weight: 700; 98 | background: $dark-red; 99 | } 100 | 101 | .quote2 { 102 | display: flex; 103 | grid-row: 1 / 5; 104 | grid-column: 3 / 4; 105 | align-items: flex-end; 106 | justify-content: center; 107 | color: #fff; 108 | font-weight: 700; 109 | font-size: 2.5rem; 110 | letter-spacing: 0.1rem; 111 | background: $light-red; 112 | } 113 | 114 | .quote3 { 115 | grid-row: 5; 116 | grid-column: 3 / 5; 117 | padding: 0.8rem 0 0.3rem 0.5rem; 118 | font-size: 1.7rem; 119 | text-align: right; 120 | 121 | @media (min-width: 50rem) { 122 | grid-row: 4; 123 | grid-column: 4 / 5; 124 | } 125 | } 126 | 127 | .attribution { 128 | grid-row: 6; 129 | grid-column: 3 / 5; 130 | font-size: 1rem; 131 | text-align: right; 132 | 133 | @media (min-width: 50rem) { 134 | grid-row: 5; 135 | grid-column: 4; 136 | } 137 | } 138 | 139 | .uppercase { 140 | grid-row: 1 / 3; 141 | grid-column: 4; 142 | justify-self: flex-end; 143 | padding: 0.5rem 0; 144 | writing-mode: vertical-lr; 145 | 146 | @media (min-width: 50rem) { 147 | grid-row: 2; 148 | grid-column: 4 / 6; 149 | justify-self: flex-start; 150 | padding-left: 5rem; 151 | writing-mode: horizontal-tb; 152 | } 153 | 154 | strong { 155 | display: block; 156 | } 157 | } 158 | 159 | .lowercase { 160 | grid-row: 1 / 3; 161 | grid-column: 2; 162 | padding: 0.4rem; 163 | color: #fff; 164 | font-weight: 700; 165 | line-height: 1.2; 166 | text-align: right; 167 | background: $dark-red; 168 | writing-mode: vertical-rl; 169 | } 170 | 171 | .numbers { 172 | display: flex; 173 | flex-direction: column; 174 | grid-row: 7; 175 | grid-column: 3 / 5; 176 | font-weight: 700; 177 | font-size: 1.1rem; 178 | letter-spacing: 0.1rem; 179 | writing-mode: vertical-rl; 180 | 181 | @media (min-width: 50rem) { 182 | grid-row: 5; 183 | grid-column: 3 / 4; 184 | min-height: 17rem; 185 | writing-mode: horizontal-tb; 186 | } 187 | } 188 | 189 | .bars { 190 | display: flex; 191 | flex-grow: 1; 192 | align-items: flex-end; 193 | justify-content: space-around; 194 | block-size: 100%; 195 | } 196 | 197 | .bar { 198 | background: #000; 199 | block-size: 100%; 200 | inline-size: 0.15rem; 201 | 202 | &:nth-child(odd) { 203 | inline-size: 0.3rem; 204 | } 205 | 206 | &:nth-child(3n) { 207 | block-size: 30%; 208 | } 209 | 210 | &:nth-child(3n + 1) { 211 | block-size: 60%; 212 | } 213 | 214 | &:last-child { 215 | block-size: 100%; 216 | } 217 | } 218 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # css-grid-course --------------------------------------------------------------------------------