diff --git a/.DS_Store b/.DS_Store index c6a4b53..54cfd40 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/Flexbox Micro-layouts 2/.DS_Store b/Flexbox Micro-layouts 2/.DS_Store new file mode 100644 index 0000000..8ceb4b9 Binary files /dev/null and b/Flexbox Micro-layouts 2/.DS_Store differ diff --git a/css/responsive.css b/css/responsive.css index 1f54090..b913330 100644 --- a/css/responsive.css +++ b/css/responsive.css @@ -329,7 +329,7 @@ width: 100%; align-items: center; justify-content: space-around; } -} + .white{ line-height: normal; @@ -402,11 +402,13 @@ width: 100%; } #footer-two{ height: 100%; + } } + @media (min-width: 480px){ #bg { - height: 175%; + height: 185%; } } @media (min-width: 590px){ @@ -419,6 +421,50 @@ width: 100%; .column-one p{ width: 600px; } +} +@media (max-width: 649px){ + .big-logos img{ + width: 80%; + margin-left: 10%; + text-align: center; + margin-bottom: 10px; + + } + +} +@media (max-width: 775px){ + /*footer!*/ + + #footer-one{ + background-color: white; + height: 25vh; + display: flex; + flex-direction: column; + + } + .big-logos img{ + width: 70%; + margin-left: 16%; + text-align: center; + margin-bottom: 10px; + + } + + .white h5{ + color: black; + font-family: 'Open Sans'; + font-size: 1em; + text-align: left; + } + .white p{ + color: black; + font-family: 'Open Sans'; + font-size: 0.8em; + text-align: left; + width: 90%; + } +} + } @media (min-width: 650px){ #bg { @@ -442,9 +488,15 @@ width: 100%; .column-one p{ width: 600px; } - + /*footer!*/ + .big-logos img{ + width: 100%; + } + .white p{ + font-size: 0.7em; + width: 70%; + } } - @media (min-width: 950px){ #bg { @@ -462,6 +514,14 @@ width: 100%; .column-one p{ width: 350px; } + /*footer!*/ + .big-logos img{ + width: 85%; + } + .white p{ + font-size: 0.7em; + width: 70%; + } @@ -476,6 +536,15 @@ width: 100%; .column-one p{ width: 400px; } + /*footer!*/ + .big-logos img{ + width: 85%; + } + .white p{ + font-size: 0.7em; + width: 70%; + } + } @media (min-width: 1100px){ #bg { @@ -487,6 +556,7 @@ width: 100%; .column-one p{ width: 500px; } + } @media (min-width: 1200px){ @@ -504,6 +574,37 @@ width: 100%; .column-one p{ width: 600px; } + /*footer!*/ + + #footer-one{ + background-color: white; + height: 21vh; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; + } + .big-logos img{ + width: 90%; + } + + .white h5{ + color: black; + font-family: 'Open Sans'; + font-size: 1em; + margin-bottom: 0px; + margin-left: 10%; + margin-top: 20px; + } + .white p{ + color: black; + font-family: 'Open Sans'; + font-size: 0.8em; + margin-top: 5px; + margin-left: 10%; + margin-bottom: 20px; + width: 70%; + } } diff --git a/week-4/.DS_Store b/week-4/.DS_Store index d93bf0a..26e100b 100644 Binary files a/week-4/.DS_Store and b/week-4/.DS_Store differ diff --git a/week-4/css/index.css b/week-4/css/index.css new file mode 100644 index 0000000..35b4f86 --- /dev/null +++ b/week-4/css/index.css @@ -0,0 +1,47 @@ +body, html{ + background-color: white; +} + +.container{ + width: 100vw; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + line-height: 80%; + + +} +.image{ + width: 5%; + height: auto; +} +h1, h3{ + font-family: Arial, Helvetica, sans-serif; + color: #8a9496; +} +h1{ + font-size: 50px; +} +h3{ + font-size: 30px; +} +button{ + height: 50px; + margin: 20px 0px; + background-color: #48bce2; + color: white; + font-weight: bolder; + font-family: 'Open Sans'; + border: solid white 2px; + font-size: 15px; + color: white; + padding: 10px 25px; + border-radius: 10px; + border: 2px solid #409db2; + + } + button:hover{ + text-decoration: underline; + } \ No newline at end of file diff --git a/week-4/flexbox defense completion.png b/week-4/flexbox defense completion.png index 405fec5..6210b30 100644 Binary files a/week-4/flexbox defense completion.png and b/week-4/flexbox defense completion.png differ diff --git a/week-4/img/.DS_Store b/week-4/img/.DS_Store new file mode 100644 index 0000000..15ecbbb Binary files /dev/null and b/week-4/img/.DS_Store differ diff --git a/Flexbox Micro-layouts 2/smile-regular.svg b/week-4/img/smile-regular.svg similarity index 100% rename from Flexbox Micro-layouts 2/smile-regular.svg rename to week-4/img/smile-regular.svg diff --git a/week-4/index.html b/week-4/index.html new file mode 100644 index 0000000..79df5c7 --- /dev/null +++ b/week-4/index.html @@ -0,0 +1,21 @@ + + + + + + Layout #2 + + + +
+
+ +
+

Welcome to the app!

+

Thanks for signing up. Let's take a look around

+ + + +
+ + \ No newline at end of file