From 372ca895ad8442bcd37590dbbb314aba186cd9dd Mon Sep 17 00:00:00 2001 From: Sagdi Formanov Date: Tue, 23 Jan 2018 05:02:39 +0500 Subject: [PATCH 1/2] resolved using regular css --- index.html | 25 +++++++++++++++++ styles.css | 82 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 107 insertions(+) diff --git a/index.html b/index.html index f74abbf..25859da 100644 --- a/index.html +++ b/index.html @@ -7,5 +7,30 @@ + + +
+

Header

+
+ +

Placeholder

+

New!

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris + nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit + esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt + in culpa qui officia deserunt mollit anim id est laborum.

+ +

Placeholder

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris + nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit + esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt + in culpa qui officia deserunt mollit anim id est laborum.

+ +
+ \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..10c060c 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,82 @@ +@media (min-width: 600px) { + .bigBox { + border: solid 2px black; + } + + .header { + text-align: center; + } + + .leftBox { + box-sizing: border-box; + width: 50%; + border-right: solid 2px black; + border-top: solid 2px black; + } + + .leftPlaceholder { + display: inline-block; + } + + .grayish { + float: right; + width: 40px; + height: 30px; + background-color: grey; + text-align: center; + line-height: 30px; + } + + .rightBox { + box-sizing: border-box; + width: 50%; + border-top: solid 2px black; + } + + .inline { + display: inline-block; + } + +} + + +@media (max-width: 600px) { + .bigBox { + border: solid 2px black; + } + + .header { + text-align: center; + } + + .leftBox { + box-sizing: block; + width: 100%; + border-right: solid 2px black; + border-top: solid 2px black; + } + + .leftPlaceholder { + display: inline-block; + } + + .grayish { + float: right; + width: 40px; + height: 30px; + background-color: grey; + text-align: center; + line-height: 30px; + } + + .rightBox { + box-sizing: block; + width: 100%; + border-top: solid 2px black; + } + + .inline { + display: inline-block; + } + +} From 7486fab08b46e2b1e247e71c26daca5baf2b6421 Mon Sep 17 00:00:00 2001 From: Sagdi Formanov Date: Wed, 24 Jan 2018 17:32:03 +0500 Subject: [PATCH 2/2] updated with flexbox --- index.html | 50 +++++++++++++++++++++++++++-------------------- styles.css | 57 ++++++++++++++++++++++++++++++++++-------------------- 2 files changed, 65 insertions(+), 42 deletions(-) diff --git a/index.html b/index.html index 25859da..63d0da2 100644 --- a/index.html +++ b/index.html @@ -9,28 +9,36 @@ -
-

Header

-
- -

Placeholder

-

New!

+
+

Header

+
+
+ +

Placeholder

+
New!
+
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris + nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit + esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt + in culpa qui officia deserunt mollit anim id est laborum.

+
+ +
+ +

Placeholder

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris - nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit - esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt - in culpa qui officia deserunt mollit anim id est laborum.

- -

Placeholder

- -

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris - nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit - esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt - in culpa qui officia deserunt mollit anim id est laborum.

- -
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris + nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit + esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt + in culpa qui officia deserunt mollit anim id est laborum.

+
+ +
+
+ \ No newline at end of file diff --git a/styles.css b/styles.css index 10c060c..5893362 100644 --- a/styles.css +++ b/styles.css @@ -1,46 +1,61 @@ -@media (min-width: 600px) { - .bigBox { + .parent { + display: flex; + flex-direction: column; + justify-content: space-around; border: solid 2px black; } - + .header { - text-align: center; + flex: 1; + align-self: center; } + + .content { + display: flex; + flex-flow: row wrap; + } + .leftBox { - box-sizing: border-box; - width: 50%; + flex: 1; + margin: 10px; + border-top: solid 2px black; border-right: solid 2px black; + margin: 0; + padding: 0% 1.5% 0% 1.5% + } + + .rightBox { + flex: 1; + margin: 10px; border-top: solid 2px black; + margin: 0; + padding: 0% 1.5% 0% 1.5% } + + + .placeholder { - .leftPlaceholder { - display: inline-block; } - .grayish { + .grayButton { float: right; - width: 40px; + top: 5%; + text-align: center; + width: 50px; height: 30px; background-color: grey; - text-align: center; - line-height: 30px; } - .rightBox { - box-sizing: border-box; - width: 50%; - border-top: solid 2px black; - } + .inline { - display: inline-block; + } -} -@media (max-width: 600px) { +/*@media (max-width: 600px) { .bigBox { border: solid 2px black; } @@ -79,4 +94,4 @@ display: inline-block; } -} +}*/