From 690cd3f8de85198195973917294c8b9e7f633db5 Mon Sep 17 00:00:00 2001 From: Angelina Minshall <119457689+AngelinaMinshall@users.noreply.github.com> Date: Tue, 17 Jan 2023 12:09:13 -0800 Subject: [PATCH 01/23] grid fundamentals --- .../css-grid-fundamentals-START.html | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/03 - CSS Grid Fundamentals/css-grid-fundamentals-START.html b/03 - CSS Grid Fundamentals/css-grid-fundamentals-START.html index 2bb34e5d..0720799c 100644 --- a/03 - CSS Grid Fundamentals/css-grid-fundamentals-START.html +++ b/03 - CSS Grid Fundamentals/css-grid-fundamentals-START.html @@ -9,6 +9,26 @@ +
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
+ From 575ab7f4718692c019ec1bd24bad091e03da29d5 Mon Sep 17 00:00:00 2001 From: Angelina Minshall <119457689+AngelinaMinshall@users.noreply.github.com> Date: Tue, 17 Jan 2023 12:26:04 -0800 Subject: [PATCH 02/23] dev tools --- 04 - CSS Grid Dev Tools/dev-tools-START.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/04 - CSS Grid Dev Tools/dev-tools-START.html b/04 - CSS Grid Dev Tools/dev-tools-START.html index a9fde7c0..14c3f3a8 100644 --- a/04 - CSS Grid Dev Tools/dev-tools-START.html +++ b/04 - CSS Grid Dev Tools/dev-tools-START.html @@ -25,6 +25,8 @@ From 06c65b543f566abb3082a431f0456597f91a28d0 Mon Sep 17 00:00:00 2001 From: Angelina Minshall <119457689+AngelinaMinshall@users.noreply.github.com> Date: Wed, 18 Jan 2023 15:03:13 -0800 Subject: [PATCH 03/23] Ilicit and explicit, autoflow, and sizing tracks --- .../implicit-vs-explicit-START.html | 10 +++++++++- .../autoflow-START.html | 12 ++++++++++++ .../sizing-tracks-START.html | 4 ++++ 3 files changed, 25 insertions(+), 1 deletion(-) 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..867ab201 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,19 @@
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..4ce4f070 100644 --- a/06 - CSS grid-auto-flow Explained/autoflow-START.html +++ b/06 - CSS grid-auto-flow Explained/autoflow-START.html @@ -12,12 +12,24 @@
1
2
+
2
+
2
+
2
+
2
+
2
+
2
+
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..1dddfff0 100644 --- a/07 - Sizing tracks in CSS Grid/sizing-tracks-START.html +++ b/07 - Sizing tracks in CSS Grid/sizing-tracks-START.html @@ -30,7 +30,11 @@ From 28288e23209d0dbc5d2dcc4b1236bde82eb43251 Mon Sep 17 00:00:00 2001 From: Angelina Minshall <119457689+AngelinaMinshall@users.noreply.github.com> Date: Wed, 18 Jan 2023 15:09:14 -0800 Subject: [PATCH 04/23] learning repeat --- 08 - CSS Grid repeat function/repeat-START.html | 1 + 1 file changed, 1 insertion(+) diff --git a/08 - CSS Grid repeat function/repeat-START.html b/08 - CSS Grid repeat function/repeat-START.html index e1e34251..b3c1dba8 100644 --- a/08 - CSS Grid repeat function/repeat-START.html +++ b/08 - CSS Grid repeat function/repeat-START.html @@ -31,6 +31,7 @@ .container { display: grid; grid-gap: 20px; + grid-template-columns: 100px repeat(2 1fr auto) 200px repeat(5fr); } From 54acd56d21652603a22c09cf3fec6915c5796ed1 Mon Sep 17 00:00:00 2001 From: Angelina Minshall <119457689+AngelinaMinshall@users.noreply.github.com> Date: Wed, 18 Jan 2023 15:43:24 -0800 Subject: [PATCH 05/23] sizing items in a grid --- .../sizing-items-START.html | 38 +++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/09 - Sizing Grid Items/sizing-items-START.html b/09 - Sizing Grid Items/sizing-items-START.html index 381ec93b..758ad4fe 100644 --- a/09 - Sizing Grid Items/sizing-items-START.html +++ b/09 - Sizing Grid Items/sizing-items-START.html @@ -10,6 +10,37 @@
+
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
@@ -17,6 +48,13 @@ .container { display: grid; grid-gap: 20px; + grid-template-columns: repeat(5 1fr); + } + .item9 { + background: mistyrose; + grid-column: span 10; + grid-row: span 2; + } From 9a3432ec437ea2cdedb38b80fc54dd0691990f79 Mon Sep 17 00:00:00 2001 From: Angelina Minshall <119457689+AngelinaMinshall@users.noreply.github.com> Date: Wed, 18 Jan 2023 15:54:40 -0800 Subject: [PATCH 06/23] placing grid items --- 10 - Placing Grid Items/placing-START.html | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/10 - Placing Grid Items/placing-START.html b/10 - Placing Grid Items/placing-START.html index c492d2bd..9e3dab0f 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,12 @@ 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; } From 1de4535f40e007f5ef5bf4d7b9ff5bea89a73411 Mon Sep 17 00:00:00 2001 From: Angelina Minshall <119457689+AngelinaMinshall@users.noreply.github.com> Date: Wed, 18 Jan 2023 16:16:27 -0800 Subject: [PATCH 07/23] practice span and place --- .../get-sweaty-START.html | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/11 - Spanning and Placing Cardio/get-sweaty-START.html b/11 - Spanning and Placing Cardio/get-sweaty-START.html index e20f141e..90d1ac84 100644 --- a/11 - Spanning and Placing Cardio/get-sweaty-START.html +++ b/11 - Spanning and Placing Cardio/get-sweaty-START.html @@ -48,22 +48,46 @@ display: grid; grid-gap: 20px; /* 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); } /* 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 */ + .item8 { + grid-row: span 2; + } /* 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/span 3 ; + } From fb02997af0bdc292bf73eca96bb31f7f731cebd6 Mon Sep 17 00:00:00 2001 From: Angelina Minshall <119457689+AngelinaMinshall@users.noreply.github.com> Date: Wed, 18 Jan 2023 17:05:39 -0800 Subject: [PATCH 08/23] autofit auto fill --- .../auto-fit-and-auto-fill-START.html | 21 +++++-------------- 1 file changed, 5 insertions(+), 16 deletions(-) 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..527722b9 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 @@ -14,22 +14,6 @@
Item 02
Item 03
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
From fa22ab8470e3ab1aafe9600ead35727e64be9ff7 Mon Sep 17 00:00:00 2001 From: Angelina Minshall <119457689+AngelinaMinshall@users.noreply.github.com> Date: Wed, 18 Jan 2023 17:21:09 -0800 Subject: [PATCH 09/23] minmax --- 13 - Using minmax() for Responsive Grids/minmax-START.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/13 - Using minmax() for Responsive Grids/minmax-START.html b/13 - Using minmax() for Responsive Grids/minmax-START.html index ced1acdd..cb838f0a 100644 --- a/13 - Using minmax() for Responsive Grids/minmax-START.html +++ b/13 - Using minmax() for Responsive Grids/minmax-START.html @@ -21,7 +21,8 @@ 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: fit-content(100px) 150px 150px 150px; } From aade853bf73699420a29a9fd430825408e13f3b5 Mon Sep 17 00:00:00 2001 From: Angelina Minshall <119457689+AngelinaMinshall@users.noreply.github.com> Date: Wed, 18 Jan 2023 18:08:50 -0800 Subject: [PATCH 10/23] grid template areas --- .../area-line-names-START.html | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/14 - Grid Template Areas/area-line-names-START.html b/14 - Grid Template Areas/area-line-names-START.html index c60f960b..4675bcba 100644 --- a/14 - Grid Template Areas/area-line-names-START.html +++ b/14 - Grid Template Areas/area-line-names-START.html @@ -46,7 +46,34 @@ .container { display: grid; grid-gap: 20px; + 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; + } + .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" + } + } + From 2095573500f4bd76eb8c4c410557c42f7d256b24 Mon Sep 17 00:00:00 2001 From: Angelina Minshall <119457689+AngelinaMinshall@users.noreply.github.com> Date: Wed, 18 Jan 2023 18:10:59 -0800 Subject: [PATCH 11/23] grid template areas --- 14 - Grid Template Areas/areas-START.html | 26 +++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/14 - Grid Template Areas/areas-START.html b/14 - Grid Template Areas/areas-START.html index 9cc27899..aa174d92 100644 --- a/14 - Grid Template Areas/areas-START.html +++ b/14 - Grid Template Areas/areas-START.html @@ -29,6 +29,32 @@ .container { display: grid; grid-gap: 20px; + 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; + } + .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" + } } From fcd8370b8e8d5c6ad70ee713b6847f2fff8e54c7 Mon Sep 17 00:00:00 2001 From: Angelina Minshall <119457689+AngelinaMinshall@users.noreply.github.com> Date: Wed, 18 Jan 2023 18:18:47 -0800 Subject: [PATCH 12/23] Update area-line-names-START.html --- .../area-line-names-START.html | 32 ++++--------------- 1 file changed, 7 insertions(+), 25 deletions(-) diff --git a/14 - Grid Template Areas/area-line-names-START.html b/14 - Grid Template Areas/area-line-names-START.html index 4675bcba..a5c99167 100644 --- a/14 - Grid Template Areas/area-line-names-START.html +++ b/14 - Grid Template Areas/area-line-names-START.html @@ -46,33 +46,15 @@ .container { display: grid; grid-gap: 20px; - 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; - } - .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" - } + "poop poop poop poop burger burger burger burger" + "poop poop poop poop burger burger burger burger" + "poop poop poop poop burger burger burger burger" + "poop poop poop poop burger burger burger burger" } + .item3 { + grid-column: poop-start/burger-end; + grid-row-end: poop-end; From b2d014002f42d315fa50b422b92bdd392768e107 Mon Sep 17 00:00:00 2001 From: Angelina Minshall <119457689+AngelinaMinshall@users.noreply.github.com> Date: Wed, 18 Jan 2023 18:51:42 -0800 Subject: [PATCH 13/23] Update naming-lines-START.html --- .../naming-lines-START.html | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) 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..da8713c0 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,18 @@ .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 [content-start] 500px [content-end] 1fr [sight-right]; + grid-template-rows: [content-top] repeat(10, auto) + [content-bottom]; + } + .item3 { + background: slateblue; + grid-column: content-start; + grid-row: content-top/ content-bottom; + + /*grid-row: 1/span 10;*/ + + } From 38eac0aa7462de26be3333b6f3bf63b1606c01ab Mon Sep 17 00:00:00 2001 From: Angelina Minshall <119457689+AngelinaMinshall@users.noreply.github.com> Date: Wed, 18 Jan 2023 19:33:36 -0800 Subject: [PATCH 14/23] flow dense --- .../dense-START.html | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) 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..90d23811 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,23 @@ .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; + } + .item:nth-child(9n) { + grid-row: span 2; + } + .item18 { + background: greenyellow !important; + grid-column-end: -1 !important; } From 59982f8865f9cc9376219d08e26894f3fd84cb29 Mon Sep 17 00:00:00 2001 From: Angelina Minshall <119457689+AngelinaMinshall@users.noreply.github.com> Date: Thu, 19 Jan 2023 10:08:53 -0800 Subject: [PATCH 15/23] alignment and centering --- .../alignment-and-centering-START.html | 51 +++++++------------ 1 file changed, 19 insertions(+), 32 deletions(-) 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..04dae83f 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
+ From ab5e85845aeb14d9b00e3c5cce04cec825db674b Mon Sep 17 00:00:00 2001 From: Angelina Minshall <119457689+AngelinaMinshall@users.noreply.github.com> Date: Thu, 19 Jan 2023 11:08:31 -0800 Subject: [PATCH 16/23] reordering grid items --- 18 - Re-ordering Grid Items/order-START.html | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/18 - Re-ordering Grid Items/order-START.html b/18 - Re-ordering Grid Items/order-START.html index 6a4d4e90..566d1e32 100644 --- a/18 - Re-ordering Grid Items/order-START.html +++ b/18 - Re-ordering Grid Items/order-START.html @@ -21,6 +21,19 @@ .container { display: grid; grid-gap: 20px; + grid-template-columns: repeat(10, 1fr); + } + .content { + grid-column: 1/-1; + order: 3; + } + .nav { + grid-column: span 8; + order: 1; + } + .logo { + grid-column: span 2; + order: 2; } From 576bd79d77ccbe3e6e2058cc2c42e98684cff717 Mon Sep 17 00:00:00 2001 From: Angelina Minshall <119457689+AngelinaMinshall@users.noreply.github.com> Date: Thu, 19 Jan 2023 18:28:48 -0800 Subject: [PATCH 17/23] grid centering --- .../alignment-and-centering-START.html | 16 +++++++++++++++- .../albums-START.html | 19 +++++++++++++++++++ 2 files changed, 34 insertions(+), 1 deletion(-) 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..7c4de31f 100644 --- a/17 - CSS Grid Alignment + Centering/alignment-and-centering-START.html +++ b/17 - CSS Grid Alignment + Centering/alignment-and-centering-START.html @@ -70,7 +70,21 @@ .container { display: grid; grid-gap: 20px; - grid-template-columns: repeat(10, 1fr); + grid-template-columns: repeat(5, 130px); + /* justify-items: center; + align-items: center; */ + place-items: stretch stretch; + justify-content: space-between; + align-content: space-between; + } + + .itm { + background: white; + } + + .itm5 { + justify-self: center; + align-self: center; } diff --git a/19 - Nesting Grid with Album Layouts/albums-START.html b/19 - Nesting Grid with Album Layouts/albums-START.html index 1f9a4288..c6900779 100644 --- a/19 - Nesting Grid with Album Layouts/albums-START.html +++ b/19 - Nesting Grid with Album Layouts/albums-START.html @@ -97,6 +97,25 @@

Album Title

From c25e2f49254ddbb773b9965c40a5f8b2bc27d3fc Mon Sep 17 00:00:00 2001 From: Angelina Minshall <119457689+AngelinaMinshall@users.noreply.github.com> Date: Thu, 19 Jan 2023 19:13:11 -0800 Subject: [PATCH 18/23] image gallery w js --- .../image-gallery-START.html | 111 +++++++++++++++++- 1 file changed, 109 insertions(+), 2 deletions(-) diff --git a/20 - CSS Grid Image Gallery/image-gallery-START.html b/20 - CSS Grid Image Gallery/image-gallery-START.html index 2b48911f..bfd801df 100644 --- a/20 - CSS Grid Image Gallery/image-gallery-START.html +++ b/20 - CSS Grid Image Gallery/image-gallery-START.html @@ -47,14 +47,78 @@ .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 { + overflow: hidden; + display: grid; + grid-template-columns: 1; + grid-template-rows: 1; + } + .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 { + display: grid; + 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.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; background: rgba(0, 0, 0, 0.7); @@ -68,6 +132,8 @@ .overlay.open { display: grid; + align-items: center; + justify-items: center; } .overlay figure { @@ -82,6 +148,47 @@ From 68b76b5dfa3d64174dcf1e332fa21e3d7bd22e54 Mon Sep 17 00:00:00 2001 From: Angelina Minshall <119457689+AngelinaMinshall@users.noreply.github.com> Date: Fri, 20 Jan 2023 19:39:31 -0800 Subject: [PATCH 19/23] so many changes --- 21 - Flexbox vs CSS Grid/axis-flipping-START.html | 8 ++++++++ .../controls-on-right-START.html | 4 ++++ 21 - Flexbox vs CSS Grid/flex-on-item-START.html | 4 ++++ .../perfectly-centered-START.html | 9 ++++++++- 21 - Flexbox vs CSS Grid/self-control-START.html | 12 +++++++++--- 21 - Flexbox vs CSS Grid/stacked-layout-START.html | 6 +++++- .../unknown-content-size-START.html | 4 ++++ .../unknown-number-of-items-START.html | 6 +++++- .../variable-widths-each-row-START.html | 11 +++++++++-- 9 files changed, 56 insertions(+), 8 deletions(-) diff --git a/21 - Flexbox vs CSS Grid/axis-flipping-START.html b/21 - Flexbox vs CSS Grid/axis-flipping-START.html index 24a5f994..57038168 100644 --- a/21 - Flexbox vs CSS Grid/axis-flipping-START.html +++ b/21 - Flexbox vs CSS Grid/axis-flipping-START.html @@ -35,6 +35,14 @@ 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..15057e7e 100644 --- a/21 - Flexbox vs CSS Grid/controls-on-right-START.html +++ b/21 - Flexbox vs CSS Grid/controls-on-right-START.html @@ -55,6 +55,10 @@

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

background: white; padding: 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); + grid-template-columns: 1fr; + display: grid; + grid-auto-flow: column; + } 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..70a050dd 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..7f10e585 100644 --- a/21 - Flexbox vs CSS Grid/perfectly-centered-START.html +++ b/21 - Flexbox vs CSS Grid/perfectly-centered-START.html @@ -18,8 +18,15 @@

Something Big Is Coming

diff --git a/21 - Flexbox vs CSS Grid/self-control-START.html b/21 - Flexbox vs CSS Grid/self-control-START.html index 15224d9b..05fa8331 100644 --- a/21 - Flexbox vs CSS Grid/self-control-START.html +++ b/21 - Flexbox vs CSS Grid/self-control-START.html @@ -24,15 +24,21 @@ height: 200px; width: 200px; border: 10px solid var(--yellow); - + grid-template: 1fr 1fr/1fr 1fr; + 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; + } 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 @@ 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..55cdafbd 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..5830fdcd 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 @@ -21,10 +21,17 @@
Short
From cda0dc2c5b6eb5c69b28adb367011caf0d2c9869 Mon Sep 17 00:00:00 2001 From: Angelina Minshall <119457689+AngelinaMinshall@users.noreply.github.com> Date: Fri, 20 Jan 2023 22:31:55 -0800 Subject: [PATCH 20/23] codepen --- 22 - Recreating Codepen/style-START.css | 87 +++++++++++++++++++++++++ 1 file changed, 87 insertions(+) diff --git a/22 - Recreating Codepen/style-START.css b/22 - Recreating Codepen/style-START.css index 5b3fab9b..a04c443d 100644 --- a/22 - Recreating Codepen/style-START.css +++ b/22 - Recreating Codepen/style-START.css @@ -1,3 +1,7 @@ +:root { +--grey:#343436 +} + html { box-sizing: border-box; font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, @@ -32,3 +36,86 @@ h6 { margin: 0; font-size: 1.5em; } +.codepen { + display: grid; + grid-template-rows: auto 1fr 1fr auto; + height: 100vh; +} +.codepen >* { + border: 1px solid black; + color: white; +} +.code { + display: grid; + grid-template-columns: repeat(3, 1fr); + background: #1b2b34; +} +.editor__header { + display: grid; + grid-template-columns: auto, 1fr, auto; + align-items: center; + padding: 5px; + grid-gap: 5px; + background: rgba(red, green, blue, alpha); +} +.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; +} +.editor { + display: grid; + grid-template-rows: auto, 1fr; +} +.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); + padding: 6px; +} +.preview { + display: grid; + +} +.button { + background: var(--grey); + border: 0; + color: white; + padding: 10px; + border-radius: 5px; + font-size: 15px; +} +.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 +} +.setting { + padding: 5px; + background: black; + border-top: 1px solid grey; +} \ No newline at end of file From 84948eaf759fa4eafc31b5220d2ede8cd4db59d9 Mon Sep 17 00:00:00 2001 From: Angelina Minshall <119457689+AngelinaMinshall@users.noreply.github.com> Date: Sat, 21 Jan 2023 13:57:00 -0800 Subject: [PATCH 21/23] bootsrap --- .../grid-START.html | 22 ++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/23 - Bootstrappy Grid with CSS Variables/grid-START.html b/23 - Bootstrappy Grid with CSS Variables/grid-START.html index b8b44f31..1f610be1 100644 --- a/23 - Bootstrappy Grid with CSS Variables/grid-START.html +++ b/23 - Bootstrappy Grid with CSS Variables/grid-START.html @@ -11,15 +11,31 @@ -
+
1
-
2
+
+ +
+
1
+
2
+
+
3
4
From 28b469871f36366be70554cb960ae302a901589c Mon Sep 17 00:00:00 2001 From: Angelina Minshall <119457689+AngelinaMinshall@users.noreply.github.com> Date: Sat, 21 Jan 2023 20:55:36 -0800 Subject: [PATCH 22/23] making it responsive --- 24 - Responisve Website/responsive-START.css | 178 ++++++++++++++++++ 24 - Responisve Website/responsive-START.html | 8 + 2 files changed, 186 insertions(+) diff --git a/24 - Responisve Website/responsive-START.css b/24 - Responisve Website/responsive-START.css index e5d46687..11fb5ddc 100644 --- a/24 - Responisve Website/responsive-START.css +++ b/24 - Responisve Website/responsive-START.css @@ -11,4 +11,182 @@ button { img { max-width: 100%; } +.top { + display: grid; + grid-gap: 20px; + grid-template-areas: + "hero hero cta1" + "hero hero cta2" ; +} + +.wrapper { + display: grid; + grid-gap: 20px; +} + +.hero { + grid-area: hero; + min-height: 400px; + background: white url(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); +} + +.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; +} + +.menu ul { + display: grid; + grid-gap: 10px; + padding: 0; + margin: 20px, 0; + list-style: none; + grid-template-columns: repeat(autofit, minmax(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 { + display: grid; + grid-gap: 20px; + grid-template-columns: repeat(autofit, minmax(200px,1fr)); +} +.feature { + background: white; + padding: 10px; + border: 1px solid white; + text-align: center; + box-sizing: 0 0 4px rgba(0,0,0,0.4px); +} +.feature .icon { + font-size: 50px; + +} +.feature p { + color: rgba (0,0,0,0.5); +} +.about { + background: white; + padding: 50px; + display: grid; + grid-template-columns: 400px, 1fr; + align-items: center; + +} + +.gallery { + display: grid; + grid-template-columns: repeat(autofit, minmax(20px,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:before, .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: 1000px) { +.menu { + order: -1; + perspective: 800px; +} +[aria-controls="menu-list"] { + display: block; + margin-bottom: 10px; +} +.menu ul { + max-height: 0; + overflow: hidden; + transform: rotate(90deg); + transition: all 0.5s; +} + +[aria-expanded="true"] ~ ul { + display: grid; + max-height: 500px; + transform: rotate(0); +} + +[aria-expanded="false"] .close { + display: none; +} + +[aria-expanded="true"] .close { + display: block-inline; +} + +[aria-expanded="true"] .open { + display: none; +} + +@media (max-width: 700px) { + .top { + grid-template-areas: + "hero hero" + "cta1 cta2" + } +} + +.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..73dddef8 100644 --- a/24 - Responisve Website/responsive-START.html +++ b/24 - Responisve Website/responsive-START.html @@ -102,6 +102,14 @@

Instant Grams

From 5aea26002f95c0f4c27d2802bf74d45e6b80aaec Mon Sep 17 00:00:00 2001 From: Angelina Minshall <119457689+AngelinaMinshall@users.noreply.github.com> Date: Sat, 21 Jan 2023 21:35:10 -0800 Subject: [PATCH 23/23] bleed --- .../full-bleed-blog-START.html | 44 +++++++++++++++++++ 1 file changed, 44 insertions(+) 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..57026850 100644 --- a/25 - Full Bleed Blog Layout/full-bleed-blog-START.html +++ b/25 - Full Bleed Blog Layout/full-bleed-blog-START.html @@ -154,6 +154,50 @@

Dear Time

font-weight: 100; margin: 0; } + .post{ + display:grid; + max-width: 1000px; + margin: 200px auto; + grid-gap: 10px 50px; + grid-template-columns: 3fr 12fr 4fr 5fr ; + } + .post>* { + grid-column: 2/ -2 ; + } + + .post> figure { + margin: 0; + grid-column: 1/-1; + } + + figcaption { + font-size: 10px; + } + + .post > blockquote { + grid-column: 1/-1; + font-size: 60px; + font: italic; + text-align: center; + margin: 0; + } + + .tip { + background: #fafafa; + padding: 10px ; + grid-row: span 3; + } + + .tip-left { + grid-column: 1/span1; + text-align: right; + border-right: 2px solid var(--yellow); + } + + .tip-night { + grid-column: span 1/-1; + border-left: 2px solid var(--yellow); + }