From 1475e087df10275091537a0e43cb1b2b68d36ee5 Mon Sep 17 00:00:00 2001 From: Cameron Lares Date: Fri, 8 May 2020 13:12:58 -0400 Subject: [PATCH] started on media queries --- index.html | 41 +++++++++++++++----- style/index.css | 99 ++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 129 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index d32d8ad25c..e0f0545da0 100644 --- a/index.html +++ b/index.html @@ -12,9 +12,30 @@ +
+ +
+
+
+ +
+
+ +

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,16 +51,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
diff --git a/style/index.css b/style/index.css index ae29d6ceee..f15f636d90 100644 --- a/style/index.css +++ b/style/index.css @@ -65,6 +65,45 @@ h1, h2, h3, h4, h5 { p { line-height: 1.4; } +/*-----Nav Bar*-----*/ + +.nav,.lambda,nav,.header{ + +width:100%; +display:flex; +flex-direction: row; +justify-content: center; +margin: 1% 0 2% 0; + +} + + + + + li{ + list-style:none; + } + + a{ + color:black; + text-decoration:none; + padding:17px 15px; + display:inline-block; + text-transform:uppercase; + } + + + +/*-----Nav Bar*-----*/ + + +/*boxes*/ + + +/*boxes*/ + + + .container { width: 800px; @@ -112,6 +151,9 @@ p { justify-content: center; } + + + .bottom-content { display: flex; margin: 0 2% 20px; @@ -143,4 +185,59 @@ footer nav { footer nav a { color: white; text-decoration: none; -} \ No newline at end of file +} + + +/*----Media Queries----*/ + +@media (max-width: 800px) { + + .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; + flex-direction: column; + justify-content: center; + + + } +.middle-content .boxes .box { + width: 12.5%; + height: 100px; + background: black; + margin: 20px 2.5%; + color: white; + display: flex; + flex-direction: column; + justify-content: center; + +} + +.boxes{ + display: flex; + align-items: center; + justify-content: center; + flex-flow: column wrap; + align-content: stretch; +} + +.bottom-content{ + + display: flex; + flex-wrap: wrap; + +} + + + + +}