From 0fb968a88e5b282d18d1f3ab29c6b93f8e281b14 Mon Sep 17 00:00:00 2001 From: Res Yeg Date: Mon, 22 Jan 2018 13:48:25 -0800 Subject: [PATCH 1/4] modified html and css --- index.html | 24 ++++++++++++++++++++++++ styles.css | 38 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 62 insertions(+) diff --git a/index.html b/index.html index f74abbf..db63613 100644 --- a/index.html +++ b/index.html @@ -7,5 +7,29 @@ +

Header

+
+

Placeholder

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. Lorem ipsum dolor sit amet. + Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. + Pellentesque dignissim enim sit amet venenatis urna cursus eget. + Cursus euismod quis viverra nibh. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit. + Nisi scelerisque eu ultrices vitae auctor. Tristique senectus et netus et malesuada fames ac. + Parturient montes nascetur ridiculus mus mauris vitae ultricies leo integer. + Rhoncus est pellentesque elit ullamcorper dignissim.

+
+
+

Placeholder

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. Lorem ipsum dolor sit amet. + Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. + Pellentesque dignissim enim sit amet venenatis urna cursus eget. + Cursus euismod quis viverra nibh. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit. + Nisi scelerisque eu ultrices vitae auctor. Tristique senectus et netus et malesuada fames ac. + Parturient montes nascetur ridiculus mus mauris vitae ultricies leo integer. + Rhoncus est pellentesque elit ullamcorper dignissim.

+
\ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..bdceb82 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,38 @@ +h1 { + text-align: center; + display: block; +} + +.div1 { + width: 50%; + border: solid 2px black; + box-sizing: border-box; + margin: 0px; + float: left; +} + +.div2 { + width: 50%; + border: solid 2px black; + box-sizing: border-box; + margin: 0px; + float: left; +} + +h2 { + display: inline-block; + margin: 5px; +} + +#modal { + float: right; + width: 40px; + height: 40px; + background-color: grey; + margin-top: 5px; + position: relative; +} + +p { + margin: 5px; +} \ No newline at end of file From d95883cbae5a47c35137a73627f4406b40becdbe Mon Sep 17 00:00:00 2001 From: Res Yeg Date: Tue, 23 Jan 2018 12:35:55 -0800 Subject: [PATCH 2/4] modifed styles.css --- styles.css | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/styles.css b/styles.css index bdceb82..0297e11 100644 --- a/styles.css +++ b/styles.css @@ -1,11 +1,17 @@ +body { + margin: 0; + padding: 0; +} + h1 { text-align: center; - display: block; } .div1 { width: 50%; - border: solid 2px black; + border-left: 2px solid black; + border-top: 2px solid black; + border-bottom: 2px solid black; box-sizing: border-box; margin: 0px; float: left; @@ -13,7 +19,9 @@ h1 { .div2 { width: 50%; - border: solid 2px black; + border-left: 2px solid black; + border-top: 2px solid black; + border-bottom: 2px solid black; box-sizing: border-box; margin: 0px; float: left; @@ -26,11 +34,14 @@ h2 { #modal { float: right; - width: 40px; - height: 40px; + width: 50px; + height: 30px; background-color: grey; margin-top: 5px; position: relative; + text-align: center; + vertical-align: middle; + line-height: 30px; } p { From 77d5fae08d5945d6854538e3e71549201508618d Mon Sep 17 00:00:00 2001 From: Res Yeg Date: Tue, 23 Jan 2018 18:57:50 -0800 Subject: [PATCH 3/4] finished flexbox implementation --- index.html | 54 +++++++++++++++++++-------------- styles.css | 88 ++++++++++++++++++++++++++++-------------------------- 2 files changed, 76 insertions(+), 66 deletions(-) diff --git a/index.html b/index.html index db63613..1e8e1b7 100644 --- a/index.html +++ b/index.html @@ -7,29 +7,37 @@ -

Header

-
-

Placeholder

- -

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. Lorem ipsum dolor sit amet. - Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. - Pellentesque dignissim enim sit amet venenatis urna cursus eget. - Cursus euismod quis viverra nibh. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit. - Nisi scelerisque eu ultrices vitae auctor. Tristique senectus et netus et malesuada fames ac. - Parturient montes nascetur ridiculus mus mauris vitae ultricies leo integer. - Rhoncus est pellentesque elit ullamcorper dignissim.

+
+

+
Header
+

+
+
+

Placeholder

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. Lorem ipsum dolor sit amet. + Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. + Pellentesque dignissim enim sit amet venenatis urna cursus eget. + Cursus euismod quis viverra nibh. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit. + Nisi scelerisque eu ultrices vitae auctor. Tristique senectus et netus et malesuada fames ac. + Parturient montes nascetur ridiculus mus mauris vitae ultricies leo integer. + Rhoncus est pellentesque elit ullamcorper dignissim.

+
+
+

Placeholder

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. Lorem ipsum dolor sit amet. + Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. + Pellentesque dignissim enim sit amet venenatis urna cursus eget. + Cursus euismod quis viverra nibh. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit. + Nisi scelerisque eu ultrices vitae auctor. Tristique senectus et netus et malesuada fames ac. + Parturient montes nascetur ridiculus mus mauris vitae ultricies leo integer. + Rhoncus est pellentesque elit ullamcorper dignissim.

+
+
-
-

Placeholder

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. Lorem ipsum dolor sit amet. - Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. - Pellentesque dignissim enim sit amet venenatis urna cursus eget. - Cursus euismod quis viverra nibh. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit. - Nisi scelerisque eu ultrices vitae auctor. Tristique senectus et netus et malesuada fames ac. - Parturient montes nascetur ridiculus mus mauris vitae ultricies leo integer. - Rhoncus est pellentesque elit ullamcorper dignissim.

-
\ No newline at end of file diff --git a/styles.css b/styles.css index 0297e11..1e4f3c4 100644 --- a/styles.css +++ b/styles.css @@ -3,47 +3,49 @@ body { padding: 0; } -h1 { - text-align: center; -} - -.div1 { - width: 50%; - border-left: 2px solid black; - border-top: 2px solid black; - border-bottom: 2px solid black; - box-sizing: border-box; - margin: 0px; - float: left; -} - -.div2 { - width: 50%; - border-left: 2px solid black; - border-top: 2px solid black; - border-bottom: 2px solid black; - box-sizing: border-box; - margin: 0px; - float: left; -} - -h2 { - display: inline-block; - margin: 5px; -} - -#modal { - float: right; +.flex-container { + width: 100%; + display: flex; + flex-direction: column; + flex-wrap: wrap; + } + h1 { + margin: auto; + } + .flex-item-header { + flex: 1; + display: flex; + } + .headertxt { + margin: auto; + } + .flex-item-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + } + .flex-item { + flex: 1; + display: flex; + flex-wrap: wrap; + border-style: solid; + border-width: 2px; + } + h2 { + flex: 1; + padding: 2px; + } + #modal { + margin: auto; + justify-content: space-around; + background-color: gray; width: 50px; - height: 30px; - background-color: grey; - margin-top: 5px; - position: relative; - text-align: center; - vertical-align: middle; - line-height: 30px; -} - -p { - margin: 5px; -} \ No newline at end of file + height: 40px; + display: flex; + } + #modaltxt { + margin: auto; + } + p { + padding: 2px; + } \ No newline at end of file From 7b6d891a33e34fd8974f1f64c7171701bee338ad Mon Sep 17 00:00:00 2001 From: Res Yeg Date: Tue, 23 Jan 2018 21:43:19 -0800 Subject: [PATCH 4/4] added @media queries --- styles.css | 45 ++++++++++++++++++++++++++------------------- 1 file changed, 26 insertions(+), 19 deletions(-) diff --git a/styles.css b/styles.css index 1e4f3c4..b398d99 100644 --- a/styles.css +++ b/styles.css @@ -8,44 +8,51 @@ body { display: flex; flex-direction: column; flex-wrap: wrap; - } - h1 { +} +h1 { margin: auto; - } - .flex-item-header { +} +.flex-item-header { flex: 1; display: flex; - } - .headertxt { +} +.headertxt { margin: auto; - } - .flex-item-container { +} +.flex-item-container { display: flex; flex-direction: row; flex-wrap: wrap; - } - .flex-item { +} +.flex-item { flex: 1; display: flex; flex-wrap: wrap; border-style: solid; border-width: 2px; - } - h2 { +} +h2 { flex: 1; padding: 2px; - } - #modal { +} +#modal { margin: auto; justify-content: space-around; background-color: gray; width: 50px; height: 40px; display: flex; - } - #modaltxt { +} +#modaltxt { margin: auto; - } - p { +} +p { padding: 2px; - } \ No newline at end of file +} + +@media (max-width: 600px) { + .flex-item-container { + flex-direction: column; + } +} + \ No newline at end of file