diff --git a/02 - Starter Files and Tooling Setup/test-START.html b/02 - Starter Files and Tooling Setup/test-START.html index 7e66c49d..0db214f7 100644 --- a/02 - Starter Files and Tooling Setup/test-START.html +++ b/02 - Starter Files and Tooling Setup/test-START.html @@ -13,11 +13,13 @@ font-size: 50px; border-bottom: 10px solid var(--yellow); color: var(--black); + text-shadow: 0 2px 0 rgba(0, green0, blue0, alpha0.07); }

Hello!

+ \ No newline at end of file diff --git a/03 - CSS Grid Fundamentals/css-grid-fundamentals-START.html b/03 - CSS Grid Fundamentals/css-grid-fundamentals-START.html index 2bb34e5d..83f386f8 100644 --- a/03 - CSS Grid Fundamentals/css-grid-fundamentals-START.html +++ b/03 - CSS Grid Fundamentals/css-grid-fundamentals-START.html @@ -9,7 +9,49 @@ +
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
+ + +
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
+ + \ No newline at end of file diff --git a/04 - CSS Grid Dev Tools/dev-tools-START.html b/04 - CSS Grid Dev Tools/dev-tools-START.html index a9fde7c0..33cce4b6 100644 --- a/04 - CSS Grid Dev Tools/dev-tools-START.html +++ b/04 - CSS Grid Dev Tools/dev-tools-START.html @@ -25,8 +25,10 @@ - + \ No newline at end of file diff --git a/05 - CSS Grid Implicit vs Explicit Tracks/implicit-vs-explicit-START.html b/05 - CSS Grid Implicit vs Explicit Tracks/implicit-vs-explicit-START.html index e49da401..c8162295 100644 --- a/05 - CSS Grid Implicit vs Explicit Tracks/implicit-vs-explicit-START.html +++ b/05 - CSS Grid Implicit vs Explicit Tracks/implicit-vs-explicit-START.html @@ -14,11 +14,21 @@
2
3
4
+
5
+
6
+
7
+
8
diff --git a/06 - CSS grid-auto-flow Explained/autoflow-START.html b/06 - CSS grid-auto-flow Explained/autoflow-START.html index 4f3c3a58..e10ccdcf 100644 --- a/06 - CSS grid-auto-flow Explained/autoflow-START.html +++ b/06 - CSS grid-auto-flow Explained/autoflow-START.html @@ -12,12 +12,30 @@
1
2
+
3
+
3
+
3
+
3
+
3
+
3
+
3
+
3
+
3
+
3
+
3
+
3
+
+
2
+
3
diff --git a/07 - Sizing tracks in CSS Grid/sizing-tracks-START.html b/07 - Sizing tracks in CSS Grid/sizing-tracks-START.html index 2ccb62a0..9c94da41 100644 --- a/07 - Sizing tracks in CSS Grid/sizing-tracks-START.html +++ b/07 - Sizing tracks in CSS Grid/sizing-tracks-START.html @@ -12,7 +12,8 @@
1
2
-
3
+
Wes Bos Is Cool
+
wes bos is cool
4
5
6
@@ -30,7 +31,11 @@ diff --git a/08 - CSS Grid repeat function/repeat-START.html b/08 - CSS Grid repeat function/repeat-START.html index e1e34251..70de8765 100644 --- a/08 - CSS Grid repeat function/repeat-START.html +++ b/08 - CSS Grid repeat function/repeat-START.html @@ -31,6 +31,9 @@ .container { display: grid; grid-gap: 20px; + grid-template-columns: 100px repeat(2, 1fr auto) 200px repeat(2, 5fr); + grid-template-columns: repeat(2, 1fr auto); + 200px repeat(2, 5fr); } diff --git a/09 - Sizing Grid Items/sizing-items-START.html b/09 - Sizing Grid Items/sizing-items-START.html index 381ec93b..7572bf2d 100644 --- a/09 - Sizing Grid Items/sizing-items-START.html +++ b/09 - Sizing Grid Items/sizing-items-START.html @@ -10,13 +10,52 @@
- +
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
poop
+
9
+
10
+
11
+
12
+
13
+
14
+
15
+
16
+
17
+
18
+
19
+
20
+
21
+
22
+
23
+
24
+
25
+
26
+
27
+
28
+
29
+
30
diff --git a/10 - Placing Grid Items/placing-START.html b/10 - Placing Grid Items/placing-START.html index c492d2bd..f6e64ff7 100644 --- a/10 - Placing Grid Items/placing-START.html +++ b/10 - Placing Grid Items/placing-START.html @@ -18,7 +18,7 @@
6
7
8
-
💩
+
💩
9
10
11
@@ -48,6 +48,16 @@ display: grid; grid-gap: 20px; grid-template-columns: repeat(5, 1fr); + grid-template-rows: repeat(5, 1fr); + } + .poop{ + background: #bada55; + grid-column: span 2; + grid-row: 1 / -1; + .poop { + grid-column: span 2; + grid-row: 1/ -1; + background: red; } diff --git a/11 - Spanning and Placing Cardio/get-sweaty-START.html b/11 - Spanning and Placing Cardio/get-sweaty-START.html index e20f141e..7bfca699 100644 --- a/11 - Spanning and Placing Cardio/get-sweaty-START.html +++ b/11 - Spanning and Placing Cardio/get-sweaty-START.html @@ -47,23 +47,73 @@ .container { display: grid; grid-gap: 20px; + grid-template-columns: repeat(5, 1fr 2fr); + grid-template-rows: repeat(10, sopx); + + /* Make the grid 10 columns wide, every other taking up twice the free space */ + grid-template-columns: repeat(5, 1fr 2fr); /* Make the grid have 10 explicit rows, 50px high each */ + grid-template-rows: repeat(10, 50px); } - + .item1 { + grid-column: 3/5; + } + .item2 { + grid-column: 5/ -1; + } + >item5 { + grid-column: span2; + grid-row: span2; + } + .item8 { + grid-row: span 2; + } + .item15 { + grid-column: 1/ -1; + } + .item18 { + grid-column: span 4/ 9; + } + .item20 { + grid-row: 4/ span 3; + } + /* With Item 1, start at col 3 and go until 5 */ + .item1 { + grid-column: 3 / 5; + } /* With Item 2, start at col 5 and go until the end */ + .item2 { + grid-column: 5 / -1; + } /* Make Item 5 double span 2 cols and rows */ + .item5 { + grid-column: span 2; + grid-row: span 2; + } /* Make Item 8 two rows high */ + .tem8 { + grid-row: 8; + } /* Make Item 15 span the entire grid width */ + .item15 { + grid-column: 1 / -1; + } /* Make item 18 span 4 widths, but end at 9 */ + .item18 { + grid-column: span 4 / 9; + } /* Make item 20 start at row 4 and have a height of 3 rows */ + .item20 { + grid-row: 4 / span3; + } diff --git a/12 - auto-fit and auto-fill/auto-fit-and-auto-fill-START.html b/12 - auto-fit and auto-fill/auto-fit-and-auto-fill-START.html index b65bd6ca..843353fc 100644 --- a/12 - auto-fit and auto-fill/auto-fit-and-auto-fill-START.html +++ b/12 - auto-fit and auto-fill/auto-fit-and-auto-fill-START.html @@ -13,23 +13,9 @@
Item 01
Item 02
Item 03
+
Item 04
I
Item 04
-
Item 05
-
Item 06
-
Item 07
-
Item 08
-
Item 09
-
Item 10
-
Item 11
-
Item 12
-
Item 13
-
Item 14
-
Item 15
-
Item 16
-
Item 17
-
Item 18
-
Item 19
-
Item 20
+ 20
diff --git a/13 - Using minmax() for Responsive Grids/minmax-START.html b/13 - Using minmax() for Responsive Grids/minmax-START.html index ced1acdd..564c434e 100644 --- a/13 - Using minmax() for Responsive Grids/minmax-START.html +++ b/13 - Using minmax() for Responsive Grids/minmax-START.html @@ -21,7 +21,9 @@ display: grid; grid-gap: 20px; border: 10px solid var(--yellow); - grid-template-columns: repeat(auto-fill, 150px); + /* grid-template-columns: repeat(auto-fit, minmax (150px, 1fr)); */ + /*grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));*/ + grid-template-columns: fit-content(100px) 150px 150px 150px; } diff --git a/14 - Grid Template Areas/area-line-names-START.html b/14 - Grid Template Areas/area-line-names-START.html index c60f960b..321d3c4b 100644 --- a/14 - Grid Template Areas/area-line-names-START.html +++ b/14 - Grid Template Areas/area-line-names-START.html @@ -46,6 +46,23 @@ .container { display: grid; grid-gap: 20px; + grid-template-areas: + "poop poop poop poop hamburger hamburger hamburger hamburger" + "poop poop poop poop hamburger hamburger hamburger hamburger" + "poop poop poop poop hamburger hamburger hamburger hamburger" + "poop poop poop poop hamburger hamburger hamburger hamburger"; + } + .item3 { + grid-column: poop-start / hamburger-end; + grid-row: poop-end; + grid-template-areas: + "p p p p h h h h" + "p p p p h h h h" + "p p p p h h h h" + "p p p p h h h h" + } + .item { + } diff --git a/14 - Grid Template Areas/areas-START.html b/14 - Grid Template Areas/areas-START.html index 9cc27899..488a9eae 100644 --- a/14 - Grid Template Areas/areas-START.html +++ b/14 - Grid Template Areas/areas-START.html @@ -29,7 +29,59 @@ .container { display: grid; grid-gap: 20px; + grid-template-columns: 1fr 10fr 1fr; + grid-template-rows: 150px 150px 100px; + grid-template-areas: + "sidebar-1 content sidebar-2" + "sidebar-1 content sidebar-2" + "footer footer footer"; } + .footer { + grid-area: footer; + } + .item1 { + grid-area: sidebar-1; + } + .item2 { + grid-area: content; + } + .item3 { + grid-area: sidebar-2; + } + @media (max-width: 700px) { + .container { + grid-template-areas: + "content content content;" + "sidebar-1 sidebar-1 sidebar-2" + "footer footer footer"; + } + grid-template-columns: 1fr 500px 1fr; + grid-template-rows: 150px 150px 100px; + grid-template-areas: + "sidebar-1 content sidebar-2" + "sidebar-1 content sidebar-2" + "footer footer footer" + } + .footer { + grid-area: footer + } + .item1 { + grid-area: sidebar-1; + } + .item2 { + grid-area: content; + } + .item { + grid-area: sidebar-2; + } + @media (max-width: 700px) { + .container { + grid-template-areas: + "content content content" + "sidebar-1 sidebar-1 sidebar-2" + "footer footer footer" + } + } diff --git a/15 - Naming Lines in CSS Grid/naming-lines-START.html b/15 - Naming Lines in CSS Grid/naming-lines-START.html index 0a3ac0f2..44ea1989 100644 --- a/15 - Naming Lines in CSS Grid/naming-lines-START.html +++ b/15 - Naming Lines in CSS Grid/naming-lines-START.html @@ -46,8 +46,24 @@ .container { display: grid; grid-gap: 20px; - grid-template-columns: 1fr 500px 1fr; - grid-template-rows: repeat(10, auto); + grid-template-columns: + [sidebar-start site-left] 1fr [sidebar-end + content-start] 500px [content-end] 1fr + [site-right]; + grid-template-rows: [content-top] repeat(10, auto) + [content-bottom]; + grid-template-columns: + [sidebar-start site-left] 1fr + [sidebar-end content-start] 500px + [content-end] 1fr [site-right]; + grid-template-rows: [content-top] repeat(10, auto)[content-bottem]; + } + .item3 { + background: slateblue; + grid-column: content-start; + grid-row: content-top / content-bottom; + /* grid-row: 1 / span 10; */ + grid-row: content-top/ cotent-bottom; } diff --git a/16 - grid-auto-flow dense Block Fitting/dense-START.html b/16 - grid-auto-flow dense Block Fitting/dense-START.html index dc4bda87..8aaab480 100644 --- a/16 - grid-auto-flow dense Block Fitting/dense-START.html +++ b/16 - grid-auto-flow dense Block Fitting/dense-START.html @@ -86,6 +86,26 @@ .container { display: grid; grid-gap: 20px; + grid-template-columns: repeat(10, 1fr); + grid-auto-flow: dense; + } + .item:nth-child(6n) { + background: cornflowerblue; + grid-column: span 6; + } + .item:nth-child(8n) { + background: tomato; + grid-column: span 2; + grid-column: span-2; + } + .item:nth-child(9n) { + grid-row: span 2; + } + .item18 { + background: greenyellow !important; + grid-column-end: -1; + background: green !important; + grid-column-end: -1 !important; } diff --git a/17 - CSS Grid Alignment + Centering/alignment-and-centering-START.html b/17 - CSS Grid Alignment + Centering/alignment-and-centering-START.html index 0dc31935..e274d55d 100644 --- a/17 - CSS Grid Alignment + Centering/alignment-and-centering-START.html +++ b/17 - CSS Grid Alignment + Centering/alignment-and-centering-START.html @@ -14,42 +14,13 @@
2
3
4
-
5
+
Wes is cool
6
7
8
9
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
-
32
-
33
-
34
-
35
-
36
-
37
-
38
-
39
-
40
+ diff --git a/18 - Re-ordering Grid Items/order-START.html b/18 - Re-ordering Grid Items/order-START.html index 6a4d4e90..4e97494b 100644 --- a/18 - Re-ordering Grid Items/order-START.html +++ b/18 - Re-ordering Grid Items/order-START.html @@ -21,6 +21,20 @@ .container { display: grid; grid-gap: 20px; + grid-template-columns: repeat(10, 1fr); + } + .logo { + grid-column: span 2; + order: 2; + } + .nav { + grid-column: span 8; + order: 1; + } + .content { + grid-column: 1 / -1; + grid-column: 1/ -1; + order: 3; } diff --git a/19 - Nesting Grid with Album Layouts/albums-START.html b/19 - Nesting Grid with Album Layouts/albums-START.html index 1f9a4288..6a8e4df2 100644 --- a/19 - Nesting Grid with Album Layouts/albums-START.html +++ b/19 - Nesting Grid with Album Layouts/albums-START.html @@ -97,6 +97,37 @@

Album Title

diff --git a/20 - CSS Grid Image Gallery/image-gallery-START.html b/20 - CSS Grid Image Gallery/image-gallery-START.html index 2b48911f..62ea4eaa 100644 --- a/20 - CSS Grid Image Gallery/image-gallery-START.html +++ b/20 - CSS Grid Image Gallery/image-gallery-START.html @@ -47,13 +47,133 @@ .close { background: none; - color: white; + color: black; border: 0; } - .gallery {} + .gallery { + display: grid; + grid-template-columns: repeat(auto-fill, 100px); + grid-auto-rows: 100px; + grid-auto-flow: dense; + } + + item { + .item { + overflow: hidden; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr; + } + + .item img { + grid-column: 1 / -1; + grid-row: 1 / -1; + width: 100%; + height: 100%; + object-fit: cover; + } + + .item_overlay { + background: #ffc60032; + grid-column: 1 / -1; + grid-row: 1 / -1; + position: relative; + display: grid; + justify-items: center; + align-items: center; + transition: 0.2s; + transform: translateY(100%) + } + + .item__overlay button { + background: none; + border: 2px solid white; + color: white; + text-transform: uppercase; + background: rgba(0, 0, 0, 0.7); + padding: 5px; + } + + .item:hover .item__overlay { + transform: translateY(0); + } + + + .item.v2 { + grid-row: span 2; + } + + + .item img { + grid-column: 1 / -1; + grid-row: 1 / -1; + width: 100%; + height: 100%; + object-fit: cover; + } + + .item__overlay { + background: #ffc60032; + grid-column: 1 / -1; + grid-row: 1 / -1; + position: relative; + display: grid; + justify-items: center; + align-items: center; + transition: 0.2s; + transform: translateY(100%); + } + + .item__overlay button { + background: none; + border: 2px solid white; + color: white; + text-transform: uppercase; + background: rgba(0, 0, 0, 0.7); + padding: 5px; + } + + .item:hover .item__overlay { + transform: translateY(0); + } + + + .item.v2 { + grid-row: span 2; + } + + .item.v3 { + grid-row: span 3; + } + + .item.v4 { + grid-row: span 4; + } + + .item.h2 { + grid-column: span 2; + } + .item.h3 { + grid-column: span 3; + } + .item.h4 { + grid-column: span 4; + } + + .item.h2 { + grid-column: span 2; + } + + .item.h3 { + grid-column: span 3; + } + + .item.h4 { + grid-column: span 4; + } .overlay { position: fixed; @@ -68,9 +188,11 @@ .overlay.open { display: grid; + align-items: center; + justify-items: center; } - .overlay figure { + .overlay-inner { background: white; width: 700px; padding: 20px; @@ -82,7 +204,54 @@ - \ No newline at end of file + diff --git a/21 - Flexbox vs CSS Grid/axis-flipping-START.html b/21 - Flexbox vs CSS Grid/axis-flipping-START.html index 24a5f994..a3a4d79b 100644 --- a/21 - Flexbox vs CSS Grid/axis-flipping-START.html +++ b/21 - Flexbox vs CSS Grid/axis-flipping-START.html @@ -18,7 +18,6 @@ flipper.classList.toggle('flip'); } -
1
@@ -35,6 +34,15 @@
diff --git a/21 - Flexbox vs CSS Grid/controls-on-right-START.html b/21 - Flexbox vs CSS Grid/controls-on-right-START.html index ef292203..e80414af 100644 --- a/21 - Flexbox vs CSS Grid/controls-on-right-START.html +++ b/21 - Flexbox vs CSS Grid/controls-on-right-START.html @@ -54,6 +54,9 @@

Bow Wow (That's My Name) (Ft. Snoop Dogg)

.track { background: white; padding: 10px; + display: grid; + grid-template-columns: 1fr; + grid-auto-flow: column; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } diff --git a/21 - Flexbox vs CSS Grid/flex-on-item-START.html b/21 - Flexbox vs CSS Grid/flex-on-item-START.html index 666be10b..fecdfcd3 100644 --- a/21 - Flexbox vs CSS Grid/flex-on-item-START.html +++ b/21 - Flexbox vs CSS Grid/flex-on-item-START.html @@ -22,6 +22,8 @@ diff --git a/21 - Flexbox vs CSS Grid/perfectly-centered-START.html b/21 - Flexbox vs CSS Grid/perfectly-centered-START.html index 63596e4f..15cec0ae 100644 --- a/21 - Flexbox vs CSS Grid/perfectly-centered-START.html +++ b/21 - Flexbox vs CSS Grid/perfectly-centered-START.html @@ -20,6 +20,13 @@

Something Big Is Coming

.hero { height: 200px; background: rgba(255, 255, 255, 0.2); + /* display: grid; + align-content: center; + justify-items: center; */ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } diff --git a/21 - Flexbox vs CSS Grid/self-control-START.html b/21 - Flexbox vs CSS Grid/self-control-START.html index 15224d9b..41d3c379 100644 --- a/21 - Flexbox vs CSS Grid/self-control-START.html +++ b/21 - Flexbox vs CSS Grid/self-control-START.html @@ -23,17 +23,23 @@ display: grid; height: 200px; width: 200px; + grid-template: 1fr 1fr / 1fr 1fr; border: 10px solid var(--yellow); - + align-items: end; + justify-items: end; } .corner:nth-child(1), - .corner:nth-child(2) {} + .corner:nth-child(2) { + align-self: start; + } .corner:nth-child(1), - .corner:nth-child(3) {} + .corner:nth-child(3) { + justify-self: start; + } - \ No newline at end of file + diff --git a/21 - Flexbox vs CSS Grid/stacked-layout-START.html b/21 - Flexbox vs CSS Grid/stacked-layout-START.html index b0d4660d..0efc2193 100644 --- a/21 - Flexbox vs CSS Grid/stacked-layout-START.html +++ b/21 - Flexbox vs CSS Grid/stacked-layout-START.html @@ -19,7 +19,11 @@ - \ No newline at end of file + diff --git a/21 - Flexbox vs CSS Grid/unknown-number-of-items-START.html b/21 - Flexbox vs CSS Grid/unknown-number-of-items-START.html index 34204cb5..89c59f58 100644 --- a/21 - Flexbox vs CSS Grid/unknown-number-of-items-START.html +++ b/21 - Flexbox vs CSS Grid/unknown-number-of-items-START.html @@ -24,7 +24,11 @@ diff --git a/21 - Flexbox vs CSS Grid/variable-widths-each-row-START.html b/21 - Flexbox vs CSS Grid/variable-widths-each-row-START.html index 6941b7b1..132bd0fb 100644 --- a/21 - Flexbox vs CSS Grid/variable-widths-each-row-START.html +++ b/21 - Flexbox vs CSS Grid/variable-widths-each-row-START.html @@ -11,8 +11,8 @@
Short
-
Longerrrrrrrrrrrrrr
-
💩
+
Longerr
+
p
This is Many Words
Lorem, ipsum.
10
@@ -21,9 +21,14 @@
Short
diff --git a/22 - Recreating Codepen/codepen-START.html b/22 - Recreating Codepen/codepen-START.html index 309b293c..f96912b5 100644 --- a/22 - Recreating Codepen/codepen-START.html +++ b/22 - Recreating Codepen/codepen-START.html @@ -5,7 +5,7 @@ Recreating Codepen! - + diff --git a/22 - Recreating Codepen/style-START.css b/22 - Recreating Codepen/style-START.css index 5b3fab9b..2f827177 100644 --- a/22 - Recreating Codepen/style-START.css +++ b/22 - Recreating Codepen/style-START.css @@ -1,3 +1,6 @@ +:root { + --grey: #343436; +} html { box-sizing: border-box; font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, @@ -32,3 +35,108 @@ h6 { margin: 0; font-size: 1.5em; } + +.codepen { + display: grid; + grid-template-rows: auto 1fr 1fr auto; + height: 100vh; + color: white; +} + +.codepen >* { + border:1px solid black; +} + + +/* Editor! */ +.code { + display:grid; + grid-template-columns: repeat(3, 1fr); + background: #1b2b34; +} + +.editor { + display: grid; + grid-template-rows: auto 1fr; +} + +.editor__header { + display: grid; + grid-template-columns: auto 1fr auto; + align-items: center; + padding: 5px; + grid-gap: 5px; + background: rgba(0,0,0,0.1); +} + +.editor__code { + display: grid; + grid-template-columns: auto 1fr; +} + +.editor__number { + display: block; + padding: 0 10px; +} + +.editor__input { + resize: none; + background: none; + border: 0; + color: grey; + font-size: 16px; + line-height: 19px; +} + +/* Pen Header */ + +.pen { + display: grid; + grid-template-columns: 1fr; + grid-auto-flow: column; + align-items: center; + grid-gap: 10px; + background: black; + border-bottom: 5px solid var(--grey); + color: white; + padding: 10px; +} + +.preview { + display: grid; +} + +/* Buttons */ + +.button { + background: var(--grey); + border: 0; + color: white; + padding: 10px; + border-radius:5px; + font-size: 15px; + position: relative; +} + +.button--small { + font-size: 12px; + padding: 4px; +} + +.button--dirty:before { + background: #ffc600; + display: block; + content: ''; + height: 2px; + width: calc(100% - 6px); + position: absolute; + left: 3px; + top: 3px; +} + + +.settings { + padding: 5px; + background: black; + border-top: 1px solid grey; +} \ No newline at end of file diff --git a/23 - Bootstrappy Grid with CSS Variables/grid-START.html b/23 - Bootstrappy Grid with CSS Variables/grid-START.html index b8b44f31..55484920 100644 --- a/23 - Bootstrappy Grid with CSS Variables/grid-START.html +++ b/23 - Bootstrappy Grid with CSS Variables/grid-START.html @@ -11,16 +11,35 @@ -
+
1
-
2
+
+ +
+
1
+
2
+
+ +
3
4
+ diff --git a/24 - Responisve Website/responsive-START.css b/24 - Responisve Website/responsive-START.css index e5d46687..015eb84b 100644 --- a/24 - Responisve Website/responsive-START.css +++ b/24 - Responisve Website/responsive-START.css @@ -12,3 +12,207 @@ img { max-width: 100%; } +/* .wrapper */ + +.wrapper { + display: grid; + grid-gap: 20px; +} + +.top { + display: grid; + grid-gap: 20px; + grid-template-areas: + "hero hero cta1" + "hero hero cta2"; +} + +.hero { + grid-area: hero; + min-height: 400px; + background: white url(images/taco.jpg); + background-size: cover; + background-position: bottom right; + padding: 50px; + display: flex; + flex-direction: column; + align-items: start; + justify-content: center; +} + +.hero > * { + background: var(--yellow); + padding: 5px; +} + +.cta { + background: var(--yellow); + display: grid; + align-items: center; + justify-items: center; + align-content: center; +} + +.cta p { + margin: 0; +} + +.cta1 { + grid-area: cta1; +} + +.cta2 { + grid-area: cta2; +} + +.price { + font-size: 60px; + font-weight: 300; +} + +/* Navigation */ + +.menu ul { + display: grid; + grid-gap: 10px; + padding: 0; + list-style: none; + grid-template-columns: repeat(auto-fit, minma(100px, 1fr)); +} + +.menu a { + background: var(--yellow); + display: block; + text-decoration: none; + padding: 10px; + text-align: center; + color: var(--black); + text-transform: uppercase; + font-size: 20px; +} + +[aria-controls="menu-list"] { + display: none; +} + +/* Features! */ + +.features { + display: grid; + grid-gap: 20px; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); +} + +.feature { + background: white; + padding: 10px; + border: 1px solid white; + text-align: center; + box-shadow: 0 0 4px rgba(0, 0, 0, 1); +} + +.feature .icon { + font-size: 50px; +} +feature p { + color: rgba(0, 0, 0, 5); +} + +/* About Section */ + +.about { + background: white; + padding: 50px; + display: grid; + grid-template-columns: 400px 1fr; + align-items: center; +} + +/* Gallery! */ + +.gallery { + display: grid; + grid-gap: 20px; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); +} + +.gallery img { + width: 100%; +} + +.gallery h2 { + grid-column: 1 / -1; + display: grid; + grid-template-columns: 1fr auto 1fr; + grid-gap: 20px; + align-items: center; +} + +.gallery h2:after { + display: block; + content: ''; + height: 10px; + background: linear-gradient(to var(--direction, left), var(--yellow), transparent); +} + +.gallery h2:after { + --direction: right; +} + +@media (max-width: 100px) { + .menu { + order: -1; + perspective: 800px; + } + [aria-controls="menu-list"] { + display: block; + margin-bottom: 10px; + } + + .menu ul { + max-height: 0; + overflow: hidden; + transform: rotateX('90deg'); + transition: all 0.5s; + } + + [aria-expanded='true'] ~ ul { + display: grid; + max-height: 500px; + transform: rotateX('0'); + } + + [aria-expanded="false"] .close { + display: none; + } + + [aria-expanded="true"] .close { + display: inline-block; + } + + [aria-expanded="true"] .open { + display: none; + } + +} + +@media (max-width: 700px) { + .top { + grid-template-areas: + "hero hero" + "cta1 cta2"; + } + /* About */ + .about { + grid-template-columns: 1fr; + } +} + +@media (max-width: 500px) { + .top { + grid-template-areas: + "hero" + "cta1" + "cta2"; + } +} \ No newline at end of file diff --git a/24 - Responisve Website/responsive-START.html b/24 - Responisve Website/responsive-START.html index 6f9a24fe..1476f3fb 100644 --- a/24 - Responisve Website/responsive-START.html +++ b/24 - Responisve Website/responsive-START.html @@ -102,8 +102,16 @@

Instant Grams

- - + \ No newline at end of file diff --git a/25 - Full Bleed Blog Layout/full-bleed-blog-START.html b/25 - Full Bleed Blog Layout/full-bleed-blog-START.html index 354d33f5..12361213 100644 --- a/25 - Full Bleed Blog Layout/full-bleed-blog-START.html +++ b/25 - Full Bleed Blog Layout/full-bleed-blog-START.html @@ -8,7 +8,6 @@ -