From 3d3008564278301d964dd9e943b689a7d3f2c2bd Mon Sep 17 00:00:00 2001 From: pipicoker <89666696+pipicoker@users.noreply.github.com> Date: Wed, 22 Sep 2021 14:54:18 +0100 Subject: [PATCH 1/3] first commit --- index.html | 41 ++++++++++++++++++++++++++++++----------- style/index.css | 38 ++++++++++++++++++++++++++++++++++++-- 2 files changed, 66 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index d32d8ad25c..922374e907 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,10 @@ + + + + Sprint Challenge - Home @@ -12,6 +16,21 @@ +
+ + + Home + About + Products + Blog + Contact + + +
+
+ +
+
@@ -30,16 +49,16 @@

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 10
+
Box 1
+
Box 2
+
Box 3
+
Box 4
+
Box 5
+
Box 6
+
Box 7
+
Box 8
+
Box 9
+
Box 10
@@ -72,4 +91,4 @@

Moon

- + \ No newline at end of file diff --git a/style/index.css b/style/index.css index ae29d6ceee..61b956db24 100644 --- a/style/index.css +++ b/style/index.css @@ -61,6 +61,31 @@ h1, h2, h3, h4, h5 { margin-bottom: 15px; font-family: 'Rubik', sans-serif; } +header { + margin-bottom: 30px; + margin-top: 20px; + +} +header img { + padding-left: 270px; + text-decoration: none; + text-align: center; +} +header a { + padding-left: 34px; + padding-right: 37px; + text-decoration: none; + color: black; +} + + +main img { + padding-left: 270px; + padding-bottom: 30px; +} + + + p { line-height: 1.4; @@ -104,14 +129,23 @@ p { .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; } - +.box1{background: teal;} +.box2{background: gold;} +.box3{background: cadetblue;} +.box4{background: coral;} +.box5{background: crimson;} +.box6{background: forestgreen;} +.box7{background: darkorchid;} +.box8{background: hotpink;} +.box9{background: indigo;} +.box10{background: dodgerblue;} .bottom-content { display: flex; margin: 0 2% 20px; From b437c193a0ea66ec5cf23634474db721775c6c94 Mon Sep 17 00:00:00 2001 From: pipicoker <89666696+pipicoker@users.noreply.github.com> Date: Fri, 24 Sep 2021 19:11:07 +0100 Subject: [PATCH 2/3] made the website responsive to mobile --- README.md | 10 ++++++ about.html | 14 ++++++++ index.html | 38 ++++++++++---------- style/index.css | 95 +++++++++++++++++++++++++++++++++++++++---------- 4 files changed, 119 insertions(+), 38 deletions(-) create mode 100644 about.html diff --git a/README.md b/README.md index dc5314a3a1..90d866590b 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 HTML that introduces meaning to the web page + 2. What are the 4 areas of the box model? +** Content edge, Padding edge, Border edge, Margin edge + 3. While using flexbox, what axis does the following property work on: ```align-items: center```? +** It works on the Cross Axis + 4. Explain why git is valuable to a team of developers. +** Git is used for tracking changes in files. Usually used to coordinate work among the developers + 5. Define mobile-first design in your own words. +** Mobile-first design means that we start the product design from the mobile end ,which has smaller screen, and working your way up to larger screen + 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 diff --git a/about.html b/about.html new file mode 100644 index 0000000000..1af8f6a5be --- /dev/null +++ b/about.html @@ -0,0 +1,14 @@ + + + + + + + Document + + +

+ THIS IS JUST TO REDIRECT THE ABOUT LINK +

+ + \ No newline at end of file diff --git a/index.html b/index.html index 922374e907..ee8069dd05 100644 --- a/index.html +++ b/index.html @@ -5,9 +5,7 @@ - - - + Sprint Challenge - Home @@ -16,23 +14,23 @@ -
- - - Home - About - Products - Blog - Contact - - -
-
- -
+
- +
+ + + Home + About + Products + Blog + Contact + + +
+
+ +

The Future

@@ -63,7 +61,7 @@

Why Did It Have To Be Boxes...

-
+

That's

@@ -86,7 +84,7 @@

Moon

About Products Blog - Contact + Contact
diff --git a/style/index.css b/style/index.css index 61b956db24..b3c140f429 100644 --- a/style/index.css +++ b/style/index.css @@ -61,38 +61,36 @@ h1, h2, h3, h4, h5 { margin-bottom: 15px; font-family: 'Rubik', sans-serif; } +img { + max-width: 100%; + height: auto; +} header { margin-bottom: 30px; margin-top: 20px; - -} -header img { - padding-left: 270px; - text-decoration: none; - text-align: center; } + header a { - padding-left: 34px; - padding-right: 37px; + padding-left: 40px; + padding-right: 30px; text-decoration: none; - color: black; + color: rgba(0, 0, 0, 0.911); } - -main img { - padding-left: 270px; - padding-bottom: 30px; +header a:hover { + text-decoration: underline; + color: purple; } - - - +main img { + padding-bottom: 20px; +} p { line-height: 1.4; } .container { - width: 800px; + max-width: 800px; margin: 0 auto; } @@ -177,4 +175,65 @@ footer nav { footer nav a { color: white; text-decoration: none; -} \ No newline at end of file +} +@media(max-width: 760px){ + header img { + margin-left: auto; + margin-right: auto; + display: block; + padding-bottom: 20px; + } + header a { + display: block; + text-align: center; + font-size: 20px; + padding-top: 5px; + padding-bottom: 5px; + } + .top-content { + display: flex; + flex-direction: column; + padding-left: 20px; + width: 100%; + + } + .middle-content .boxes .box { + width: 30%; + height: 120px; + } + .middle-content .boxes { + display: flex; + align-items: center; + flex-direction: column; + + } + .bottom-content { + display: flex; + flex-direction: column; + padding-left: 20px; + + } + + .bottom-content p { + padding-bottom: 20px; + + } + footer nav{ + display: flex; + flex-direction: column; + margin-left: auto; + margin-right: auto; + + } + nav a{ + display: block; + text-align: center; + font-size: 20px; + padding-top: 5px; + padding-bottom: 5px; + } + + +} + + From 2f4bfc0cbb59d9f1aa322237ff2704b9624878d8 Mon Sep 17 00:00:00 2001 From: pipicoker <89666696+pipicoker@users.noreply.github.com> Date: Fri, 24 Sep 2021 20:00:43 +0100 Subject: [PATCH 3/3] a commit --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index ee8069dd05..f6cc963afd 100644 --- a/index.html +++ b/index.html @@ -22,7 +22,7 @@ Home About - Products + Products Blog Contact @@ -61,7 +61,7 @@

Why Did It Have To Be Boxes...

-
+

That's