From 613a85f6982ae47a8cb23f4ae6686866981830a7 Mon Sep 17 00:00:00 2001 From: noahbibb21 Date: Fri, 10 Apr 2020 14:04:31 -0400 Subject: [PATCH 1/2] half complete --- about.html | 0 index.html | 39 ++++++++++++++-------- style/index.css | 87 +++++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 111 insertions(+), 15 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 c6405aef71..5e242b5acb 100644 --- a/index.html +++ b/index.html @@ -5,16 +5,29 @@ Sprint Challenge - Home - + - +
+
+ Lambda Company Logo + +
+
+ Background Photo +

The Future

Proin sed quam sed tellus vestibulum ultrices quis in nunc. Phasellus id dui id tortor tincidunt efficitur. Proin faucibus imperdiet erat, non varius lacus. Maecenas non nisl id turpis egestas tincidunt. Nam condimentum venenatis magna eget finibus.

@@ -30,17 +43,17 @@

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
+
diff --git a/style/index.css b/style/index.css index ae29d6ceee..1a10c9b7f3 100644 --- a/style/index.css +++ b/style/index.css @@ -71,6 +71,25 @@ p { margin: 0 auto; } +.header-content{ + display: flex; + justify-content: space-between; + align-items: flex-end; + padding-top: 20px; + padding-bottom: 40px; +} + +.header-content a{ + padding: 30px; + color: grey; + text-decoration: none; +} + +.logo{ + position: relative; + bottom: 30px; +} + .top-content { display: flex; flex-wrap: wrap; @@ -79,6 +98,10 @@ p { border-bottom: 1px dashed black; } +.top-content-img{ + padding-bottom: 20px; +} + .top-content .text-container { width: 48%; padding: 0 1%; @@ -88,6 +111,10 @@ p { .middle-content { margin-bottom: 20px; border-bottom: 1px dashed black; + display: flex; + flex-wrap: wrap; + flex-direction: column; + justify-content: center; } .middle-content h2 { @@ -98,7 +125,7 @@ p { .middle-content .boxes { display: flex; flex-wrap: wrap; - justify-content: space-evenly; + justify-content: space-between; } .middle-content .boxes .box { @@ -108,8 +135,64 @@ p { margin: 20px 2.5%; color: white; display: flex; - align-items: 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; + +} +.boxes div{ + margin: 1rem; + width: 6rem; + height: 6rem; + display: flex; justify-content: center; + align-items: center; } .bottom-content { From 8af75f465664131afd0e5accb3e9b175125c3f6b Mon Sep 17 00:00:00 2001 From: noahbibb21 Date: Fri, 10 Apr 2020 17:32:34 -0400 Subject: [PATCH 2/2] finished mobile layout --- index.html | 8 ++++---- style/index.css | 45 +++++++++++++++++++++++++++++++++++++++------ 2 files changed, 43 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 5e242b5acb..9794c875fd 100644 --- a/index.html +++ b/index.html @@ -13,8 +13,8 @@
-
- Lambda Company Logo +
+ Lambda Company Logo -
+
- Background Photo + Background Photo

The Future

diff --git a/style/index.css b/style/index.css index 1a10c9b7f3..14dc1ca33b 100644 --- a/style/index.css +++ b/style/index.css @@ -71,7 +71,7 @@ p { margin: 0 auto; } -.header-content{ +header{ display: flex; justify-content: space-between; align-items: flex-end; @@ -79,16 +79,13 @@ p { padding-bottom: 40px; } -.header-content a{ +header nav a{ padding: 30px; color: grey; text-decoration: none; } -.logo{ - position: relative; - bottom: 30px; -} + .top-content { display: flex; @@ -226,4 +223,40 @@ footer nav { footer nav a { color: white; text-decoration: none; +} +@media(max-width: 500px){ + header{ + flex-direction: column; + align-items: center; + + } + header nav{ + flex-direction: column; + display: flex; + margin: .5rem; + } + header nav a { + margin: 0px; + border: 1px solid black; + padding: .5rem 5rem; + border-radius: .5rem; + } + .top-content .text-container{ + width: 100%; + } + .middle-content .boxes{ + flex-direction: column; + align-items: center; + + } + .middle-content .boxes div:nth-child(n+5){ + display: none; + } + footer{ + display:none; + } + .bottom-content{ + display: none; + } + } \ No newline at end of file