diff --git a/foundations/flex/03-flex-header-2/style.css b/foundations/flex/03-flex-header-2/style.css
index bf4c8af10d4..86501118b6e 100644
--- a/foundations/flex/03-flex-header-2/style.css
+++ b/foundations/flex/03-flex-header-2/style.css
@@ -3,7 +3,7 @@ you'll learn about it later. */
@import url('https://fonts.googleapis.com/css2?family=Besley:ital,wght@0,400;1,900&display=swap');
body {
- margin: 0;
+ margin: 0 auto;
background: #eee;
font-family: Besley, serif;
}
@@ -12,6 +12,9 @@ body {
background: white;
border-bottom: 1px solid #ddd;
box-shadow: 0 0 8px rgba(0,0,0,.1);
+ display: flex;
+ justify-content: space-between;
+ padding: 8px;
}
.profile-image {
@@ -40,9 +43,19 @@ button {
a {
/* this removes the line under our links */
text-decoration: none;
- color: rebeccapurple;
+ color: rgb(135, 76, 195);
+
}
ul {
+ gap: 10px;
list-style-type: none;
+ display: flex;
+ gap: 16px;
}
+
+.left, .right {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+}
\ No newline at end of file
diff --git a/foundations/flex/04-flex-information/index.html b/foundations/flex/04-flex-information/index.html
index 3cc3efd262a..e7ba82ebdc4 100644
--- a/foundations/flex/04-flex-information/index.html
+++ b/foundations/flex/04-flex-information/index.html
@@ -10,17 +10,25 @@
Information!
+
+
+
+
+
+
+
This is a type of plant. We love this one.
-
+
This is another type of plant. Isn't it nice?
-
+
We have so many plants. Yay plants.
-
+
I'm running out of things to say about plants.
+
diff --git a/foundations/flex/04-flex-information/style.css b/foundations/flex/04-flex-information/style.css
index 80c00fd4bd5..8e4656cc5c7 100644
--- a/foundations/flex/04-flex-information/style.css
+++ b/foundations/flex/04-flex-information/style.css
@@ -1,17 +1,41 @@
body {
font-family: 'Courier New', Courier, monospace;
+ text-align: center;
}
img {
- width: 100px;
- height: 100px;
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
+ gap: 52px;
+ height: 0 auto;
+ width: 200px;
+ padding: 32px;
+}
+
+.text {
+ display: inline;
+ flex-wrap: wrap;
+ align-items: center;
}
+.info {
+ max-width: 200px;
+ height: auto;
+}
.title {
font-size: 36px;
font-weight: 900;
+ margin-bottom: 32px;
}
+.container{
+ display: flex;
+ justify-content: center;
+ gap: 52px
+}
+
+
/* do not edit this footer */
.footer {
position: fixed;
diff --git a/foundations/flex/05-flex-modal/index.html b/foundations/flex/05-flex-modal/index.html
index 3b4a06f2bcf..8c334cabd01 100644
--- a/foundations/flex/05-flex-modal/index.html
+++ b/foundations/flex/05-flex-modal/index.html
@@ -10,11 +10,14 @@
\ No newline at end of file
diff --git a/foundations/flex/05-flex-modal/style.css b/foundations/flex/05-flex-modal/style.css
index 780b355ef3d..0094cd07eae 100644
--- a/foundations/flex/05-flex-modal/style.css
+++ b/foundations/flex/05-flex-modal/style.css
@@ -2,14 +2,14 @@
html, body {
height: 100%;
+
}
body {
font-family: Roboto, sans-serif;
- margin: 0;
+ margin:auto auto;
background: #aaa;
color: #333;
- /* I'll give you this one for free lol */
display: flex;
align-items: center;
justify-content: center;
@@ -20,8 +20,21 @@ body {
width: 480px;
border-radius: 10px;
box-shadow: 2px 4px 16px rgba(0,0,0,.2);
+ display: flex;
+ gap: 15px;
+ padding: 20px;
}
+.header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-size: 20px;
+ margin-bottom: 10px;
+ font-weight: 700;
+}
+
+
.icon {
color: royalblue;
font-size: 26px;
@@ -33,8 +46,11 @@ body {
display: flex;
align-items: center;
justify-content: center;
+ flex-shrink: 0;
+}
+.text {
+ margin-bottom: 30px;
}
-
.close-button {
background: #eee;
border-radius: 50%;
@@ -56,14 +72,18 @@ button {
border-radius: 8px;
}
+
button.continue {
background: royalblue;
border: 1px solid royalblue;
color: white;
+ justify-content: flex-start;
}
button.cancel {
background: white;
border: 1px solid #ddd;
color: royalblue;
+ display: inline;
+ justify-content: flex-end;
}
\ No newline at end of file
diff --git a/foundations/flex/06-flex-layout/index.html b/foundations/flex/06-flex-layout/index.html
index a05f14bb025..0259932e799 100644
--- a/foundations/flex/06-flex-layout/index.html
+++ b/foundations/flex/06-flex-layout/index.html
@@ -8,6 +8,7 @@
+
+
+
+
+
+
!
- Are you sure you want to do that?
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!
-
-
+
+
Are you sure you want to do that?
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!
+
+
+