From 41bea74df0f36433e07b80a0f6413703bd879f0e Mon Sep 17 00:00:00 2001 From: Tyler Taylor <61921198+TylerOliverTaylor@users.noreply.github.com> Date: Sun, 17 May 2020 21:24:05 -0400 Subject: [PATCH 1/7] Answered the Questions --- README.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/README.md b/README.md index dc5314a3a1..1161313d91 100644 --- a/README.md +++ b/README.md @@ -36,14 +36,24 @@ Edit this document to include your answers after each question. Make sure to lea 1. If you were to describe semantic HTML to the next cohort of students, what would you say? +Semantic HTML is the foundation of good HTML. It allows you to mark up your HTML and give meaning through tags to the different parts of HTML. + 2. What are the 4 areas of the box model? +Margin, Border, Padding, and Content + 3. While using flexbox, what axis does the following property work on: ```align-items: center```? +Cross Axis + 4. Explain why git is valuable to a team of developers. +It allows any number of people to share, collaborate, review, edit, and build code while keeping projects neat and organized for all current and future edits. + 5. Define mobile-first design in your own words. +Mobile-First design is where your layout for mobile devices first and then possibly expand to larger devices such as desktop. + You are expected to be able to answer all these questions. Your responses contribute to your Sprint Challenge grade. Skipping this section *will* prevent you from passing this challenge. ## Instructions From 256d66c228b960fad530a3ee67916956584f1e0b Mon Sep 17 00:00:00 2001 From: Tyler Taylor <61921198+TylerOliverTaylor@users.noreply.github.com> Date: Sun, 17 May 2020 22:03:25 -0400 Subject: [PATCH 2/7] Finished Nav --- .vscode/settings.json | 3 +++ index.html | 18 +++++++++++-- style/index.css | 60 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 79 insertions(+), 2 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000000..6f3a2913e1 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/index.html b/index.html index d32d8ad25c..aede791823 100644 --- a/index.html +++ b/index.html @@ -9,9 +9,23 @@ - - +
+ +
+ +
+ +
diff --git a/style/index.css b/style/index.css index ae29d6ceee..888c7f7244 100644 --- a/style/index.css +++ b/style/index.css @@ -28,6 +28,66 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } +html{ + font-size: 62.5%; +} + +header{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; +} + +header nav .navbar{ + display: flex; + flex-direction: row; + justify-content: center; + font-size: 2rem; + align-items: baseline; + margin:0 auto +} +header nav .navbar .home{ + font-size: 2rem; + padding: 3rem; + color: black; +} + +header nav .navbar .about{ + font-size: 2rem; + padding: 3rem; + color: black; +} + +header nav .navbar .projects{ + font-size: 2rem; + padding: 3rem; + color: black; +} + +header nav .navbar .blog{ + font-size: 2rem; + padding: 3rem; + color: black; +} + +header nav .navbar .contact{ + font-size: 2rem; + padding: 3rem; + color: black; +} + +.mainimage{ + display: flex; + justify-content: center; + align-items: center; +} +.mainimage img{ + display: flex; + justify-content: center; + align-items: center; +} + body { line-height: 1; } From 53dd69fd5dbf5502efdff8a32622727d9b92361f Mon Sep 17 00:00:00 2001 From: Tyler Taylor <61921198+TylerOliverTaylor@users.noreply.github.com> Date: Sun, 17 May 2020 22:49:47 -0400 Subject: [PATCH 3/7] Finsished Main Page not moving to res. --- about.html | 0 index.html | 22 +++++++------- style/index.css | 81 ++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 91 insertions(+), 12 deletions(-) create mode 100644 about.html diff --git a/about.html b/about.html new file mode 100644 index 0000000000..e69de29bb2 diff --git a/index.html b/index.html index aede791823..1107c6f04d 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - + Sprint Challenge - Home @@ -15,7 +15,7 @@
lambda-black
Home
-
About
+
About
Projects
Blog
Contact
@@ -44,15 +44,15 @@

The Past

Why Did It Have To Be Boxes...

-
Box 1
-
Box 2
-
Box 3
-
Box 4
-
Box 5
-
Box 6
-
Box 7
-
Box 8
-
Box 9
+
Box 1
+
Box 2
+
Box 3
+
Box 4
+
Box 5
+
Box 6
+
Box 7
+
Box 8
+
Box 9
Box 10
diff --git a/style/index.css b/style/index.css index 888c7f7244..ee08b7fe64 100644 --- a/style/index.css +++ b/style/index.css @@ -203,4 +203,83 @@ footer nav { footer nav a { color: white; text-decoration: none; -} \ No newline at end of file +} + + +.middle-content .boxes{ + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + +} + +.box1{ + background-color: teal; + width: 10rem; + height: 10rem; + margin: 2rem +} + +.box2{ + background-color:gold; + width: 10rem; + height: 10rem; + margin: 2rem +} +.box3{ + background-color:cadetblue; + width: 10rem; + height: 10rem; + margin: 2rem +} + +.box4{ + background-color: coral; + width: 10rem; + height: 10rem; + margin: 2rem +} + +.box5{ + background-color: crimson; + width: 10rem; + height: 10rem; + margin: 2rem +} + +.box6{ + background-color:forestgreen; + width: 10rem; + height: 10rem; + margin: 2rem +} + +.box7{ + background-color:darkorchid; + width: 10rem; + height: 10rem; + margin: 2rem +} + +.box8{ + background-color: hotpink; + width: 10rem; + height: 10rem; + margin: 2rem +} + +.box9{ + background-color:indigo; + width: 10rem; + height: 10rem; + margin: 2rem +} + +.box10{ + background-color:dodgerblue; + width: 10rem; + height: 10rem; + margin: 2rem +} + From f3317b88fee24cb849e1e29a533b500cbec54bdd Mon Sep 17 00:00:00 2001 From: Tyler Taylor <61921198+TylerOliverTaylor@users.noreply.github.com> Date: Sun, 17 May 2020 23:19:53 -0400 Subject: [PATCH 4/7] turnin --- about.html | 1 + style/index.css | 158 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 159 insertions(+) diff --git a/about.html b/about.html index e69de29bb2..a5d3a7fc84 100644 --- a/about.html +++ b/about.html @@ -0,0 +1 @@ +About Page \ No newline at end of file diff --git a/style/index.css b/style/index.css index ee08b7fe64..000d0b729d 100644 --- a/style/index.css +++ b/style/index.css @@ -46,7 +46,9 @@ header nav .navbar{ font-size: 2rem; align-items: baseline; margin:0 auto + color: black; } + header nav .navbar .home{ font-size: 2rem; padding: 3rem; @@ -283,3 +285,159 @@ footer nav a { margin: 2rem } +@media (max-width:500px){ + header{ + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: space-around; + } + .container { + width: 800px; + margin: 0 auto; + } + + .top-content { + display: flex; + flex-wrap: wrap; + flex-direction: column; + justify-content: space-evenly; + margin-bottom: 20px; + border-bottom: 1px dashed black; + } + + .top-content .text-container { + width: 48%; + padding: 0 1%; + padding-bottom: 20px; + font-size: 2em; + } + + .middle-content { + margin-bottom: 20px; + border-bottom: 1px dashed black; + } + + .middle-content h2 { + padding: 0 2%; + margin-bottom: 0; + } + + .middle-content .boxes { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .middle-content .boxes .box { + width: 12.5%; + height: 100px; + background: black; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; + } + + .bottom-content { + display: flex; + flex-direction: column; + margin: 0 2% 20px; + justify-content: space-around; + } + + .bottom-content .text-container { + padding-right: 4%; + font-size: 4rem; + } + + .bottom-content .text-container:last-child { + padding-right: 0; + font-size: 4rem; + } + + footer { + width: 100%; + background: black; + display: flex; + flex-direction: column; + } + + footer nav { + width: 60%; + display: flex; + justify-content: space-between; + flex-direction: column; + align-items: center; + padding: 20px 2%; + font-size: 4rem; + } + + footer nav a { + color: white; + text-decoration: none; + } + + + .middle-content .boxes{ + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + } + + header nav .navbar{ + display: flex; + margin: 0 auto; + flex-direction: column; + justify-content: center; + font-size: 2rem; + align-items: center; + margin:0 auto + color: black; + } + header nav .navbar .home{ + font-size: 2rem; + padding: 1rem; + color: black; + } + + header nav .navbar .about{ + font-size: 2rem; + padding: 1rem; + color: black; + } + + header nav .navbar .projects{ + font-size: 2rem; + padding: 1rem; + color: black; + } + + header nav .navbar .blog{ + font-size: 2rem; + padding: 1rem; + color: black; + } + + header nav .navbar .contact{ + font-size: 2rem; + padding: 1rem; + color: black; + } + + .mainimage{ + display: flex; + justify-content: center; + align-items: center; + } + .mainimage img{ + display: flex; + justify-content: center; + align-items: center; + width:100% + } + +} \ No newline at end of file From bdb5d078ab4ab002cc49dee408b48ae241c25d64 Mon Sep 17 00:00:00 2001 From: Tyler Taylor <61921198+TylerOliverTaylor@users.noreply.github.com> Date: Mon, 18 May 2020 21:11:59 -0400 Subject: [PATCH 5/7] Adjustment --- style/index.css | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/style/index.css b/style/index.css index 000d0b729d..ae639c2be6 100644 --- a/style/index.css +++ b/style/index.css @@ -282,7 +282,7 @@ footer nav a { background-color:dodgerblue; width: 10rem; height: 10rem; - margin: 2rem + margin: 2rem; } @media (max-width:500px){ @@ -316,17 +316,24 @@ footer nav a { .middle-content { margin-bottom: 20px; border-bottom: 1px dashed black; + display: flex; + align-content: center; + justify-content: center; + width: 50rem; } .middle-content h2 { padding: 0 2%; margin-bottom: 0; + display: flex; + justify-content: center; + align-content: center; } .middle-content .boxes { display: flex; flex-wrap: wrap; - justify-content: space-evenly; + justify-content: center; } .middle-content .boxes .box { @@ -345,16 +352,18 @@ footer nav a { flex-direction: column; margin: 0 2% 20px; justify-content: space-around; + width: 80% } .bottom-content .text-container { padding-right: 4%; - font-size: 4rem; + font-size: 3rem; + width: 70%; } .bottom-content .text-container:last-child { padding-right: 0; - font-size: 4rem; + font-size: 3rem; } footer { @@ -395,7 +404,7 @@ footer nav a { justify-content: center; font-size: 2rem; align-items: center; - margin:0 auto + margin:0 auto; color: black; } header nav .navbar .home{ From fcd9f82518801923437f25fadf65d94d0fba0084 Mon Sep 17 00:00:00 2001 From: Tyler Taylor <61921198+TylerOliverTaylor@users.noreply.github.com> Date: Mon, 18 May 2020 22:01:29 -0400 Subject: [PATCH 6/7] finalProject --- index.html | 2 +- style/index.css | 62 ++++++++++++++++++++++++++++++++++++++----------- 2 files changed, 49 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 1107c6f04d..cdf85fbf72 100644 --- a/index.html +++ b/index.html @@ -53,7 +53,7 @@

Why Did It Have To Be Boxes...

Box 7
Box 8
Box 9
-
Box 10
+
Box 10
diff --git a/style/index.css b/style/index.css index ae639c2be6..007694456c 100644 --- a/style/index.css +++ b/style/index.css @@ -119,7 +119,7 @@ html, body { } h1, h2, h3, h4, h5 { - font-size: 18px; + font-size: 2.5rem; margin-bottom: 15px; font-family: 'Rubik', sans-serif; } @@ -220,62 +220,90 @@ footer nav a { background-color: teal; width: 10rem; height: 10rem; - margin: 2rem + margin: 2rem; + display: flex; + justify-content: center; + align-items: center; } .box2{ background-color:gold; width: 10rem; height: 10rem; - margin: 2rem + margin: 2rem; + display: flex; + justify-content: center; + align-items: center; } + .box3{ background-color:cadetblue; width: 10rem; height: 10rem; - margin: 2rem + margin: 2rem; + display: flex; + justify-content: center; + align-items: center; } .box4{ background-color: coral; width: 10rem; height: 10rem; - margin: 2rem + margin: 2rem; + justify-content: center; + align-items: center; + display: flex; } .box5{ background-color: crimson; width: 10rem; height: 10rem; - margin: 2rem + margin: 2rem; + display: flex; + justify-content: center; + align-items: center; } .box6{ background-color:forestgreen; width: 10rem; height: 10rem; - margin: 2rem + margin: 2rem; + display: flex; + justify-content: center; + align-items: center; } .box7{ background-color:darkorchid; width: 10rem; height: 10rem; - margin: 2rem + margin: 2rem; + display: flex; + justify-content: center; + align-items: center; } .box8{ background-color: hotpink; width: 10rem; height: 10rem; - margin: 2rem + margin: 2rem; + display: flex; + justify-content: center; + align-items: center; } .box9{ background-color:indigo; width: 10rem; height: 10rem; - margin: 2rem + margin: 2rem; + display: flex; + justify-content: center; + align-items: center; } .box10{ @@ -283,6 +311,9 @@ footer nav a { width: 10rem; height: 10rem; margin: 2rem; + display: flex; + justify-content: center; + align-items: center; } @media (max-width:500px){ @@ -317,6 +348,7 @@ footer nav a { margin-bottom: 20px; border-bottom: 1px dashed black; display: flex; + flex-direction: column; align-content: center; justify-content: center; width: 50rem; @@ -332,8 +364,10 @@ footer nav a { .middle-content .boxes { display: flex; - flex-wrap: wrap; + flex-wrap: column; + flex-direction: column; justify-content: center; + align-content: center; } .middle-content .boxes .box { @@ -357,13 +391,13 @@ footer nav a { .bottom-content .text-container { padding-right: 4%; - font-size: 3rem; + font-size: 2rem; width: 70%; } .bottom-content .text-container:last-child { padding-right: 0; - font-size: 3rem; + font-size: 2rem; } footer { @@ -380,7 +414,7 @@ footer nav a { flex-direction: column; align-items: center; padding: 20px 2%; - font-size: 4rem; + font-size: 1.5rem; } footer nav a { From 75637b49dd8b9ae2261c2fe8cc3a55f33c436c9f Mon Sep 17 00:00:00 2001 From: Tyler Taylor <61921198+TylerOliverTaylor@users.noreply.github.com> Date: Mon, 18 May 2020 22:41:32 -0400 Subject: [PATCH 7/7] animations --- style/index.css | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/style/index.css b/style/index.css index 007694456c..71c11c8a46 100644 --- a/style/index.css +++ b/style/index.css @@ -216,6 +216,7 @@ footer nav a { } + .box1{ background-color: teal; width: 10rem; @@ -482,5 +483,16 @@ footer nav a { align-items: center; width:100% } - + @keyframes example { + from {background-color: red;} + to {background-color: yellow;} + } + .box1{ + animation-name: example; + animation-duration: 4s; + } + .box2{ + animation-name: example; + animation-duration: 4s; + } } \ No newline at end of file