From f9afb83795624eaad9f7b7b2aa2b9eef76ead71c Mon Sep 17 00:00:00 2001
From: Lilli Paris
Date: Tue, 8 Mar 2022 11:04:12 -0700
Subject: [PATCH 1/8] Completed Flexbox 1-3
---
.../1. Responsive Grids/index.html | 2 +-
Week 2.2 - Flexbox/1. Centering/index.html | 7 +++++
.../2. Placing Items/index.html | 4 +++
.../3. Placing Items - Advanced/index.html | 31 +++++++++++++++----
4 files changed, 37 insertions(+), 7 deletions(-)
diff --git a/Week 2.1 - CSS Grid/1. Responsive Grids/index.html b/Week 2.1 - CSS Grid/1. Responsive Grids/index.html
index 2d612e63..30bbf984 100644
--- a/Week 2.1 - CSS Grid/1. Responsive Grids/index.html
+++ b/Week 2.1 - CSS Grid/1. Responsive Grids/index.html
@@ -28,7 +28,7 @@
diff --git a/Week 2.2 - Flexbox/1. Centering/index.html b/Week 2.2 - Flexbox/1. Centering/index.html
index 5283be49..346771c9 100644
--- a/Week 2.2 - Flexbox/1. Centering/index.html
+++ b/Week 2.2 - Flexbox/1. Centering/index.html
@@ -7,11 +7,15 @@
@@ -23,6 +27,9 @@
border: 2px solid thistle;
border-radius: 4px;;
background-color: whitesmoke;
+ display: flex;
+ align-items: center;
+ justify-content: center;
/* Add to your code here to center the box within the container */
}
diff --git a/Week 2.2 - Flexbox/2. Placing Items/index.html b/Week 2.2 - Flexbox/2. Placing Items/index.html
index 986e0ee4..15cae6c7 100644
--- a/Week 2.2 - Flexbox/2. Placing Items/index.html
+++ b/Week 2.2 - Flexbox/2. Placing Items/index.html
@@ -21,6 +21,10 @@
min-height: 100px;
box-shadow: 0px 3px 6px rgba(45, 35, 66, 0.102);
background-color: #fff;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
/*
Add to your code here to place the `.logo` and `.links` on either
diff --git a/Week 2.2 - Flexbox/3. Placing Items - Advanced/index.html b/Week 2.2 - Flexbox/3. Placing Items - Advanced/index.html
index 9ff4f7e7..5faf76d1 100644
--- a/Week 2.2 - Flexbox/3. Placing Items - Advanced/index.html
+++ b/Week 2.2 - Flexbox/3. Placing Items - Advanced/index.html
@@ -1,5 +1,6 @@
+
@@ -21,38 +22,56 @@
}
+
+
+ .card {
+ display: flex;
+ flex-flow: column nowrap;
+ }
+
+ .more {
+ margin-top:auto;
+ /* Add your code here to position the "read more" links to the bottom of their respective cards */
+ }
+
+
+
Lorem Ipsum Dolor
-
Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? I was part of something special. Eventually, you do plan to have dinosaurs on your dinosaur tour, right?
+
Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso
+ machine? Wh-what is-h-how did you get my espresso machine? I was part of something special. Eventually,
+ you do plan to have dinosaurs on your dinosaur tour, right?
Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? I was part of something special.
+
Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso
+ machine? Wh-what is-h-how did you get my espresso machine? I was part of something special.
Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso machine? Wh-what is-h-how did you get my espresso machine?
+
Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso
+ machine? Wh-what is-h-how did you get my espresso machine?