From 372ca895ad8442bcd37590dbbb314aba186cd9dd Mon Sep 17 00:00:00 2001 From: Sagdi Formanov Date: Tue, 23 Jan 2018 05:02:39 +0500 Subject: [PATCH 1/3] 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/3] 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; } -} +}*/ From 51d1a1478799fcf5666ee87804b9975c5c417dda Mon Sep 17 00:00:00 2001 From: Sagdi Formanov Date: Wed, 24 Jan 2018 18:12:06 +0500 Subject: [PATCH 3/3] BEM naming convention --- index.html | 14 +++++++------- styles.css | 19 ++++++------------- 2 files changed, 13 insertions(+), 20 deletions(-) diff --git a/index.html b/index.html index 63d0da2..71473af 100644 --- a/index.html +++ b/index.html @@ -10,12 +10,12 @@
-

Header

-
-
+

Header

+
+
-

Placeholder

-
New!
+

Placeholder

+
New!

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut @@ -25,9 +25,9 @@

Header

in culpa qui officia deserunt mollit anim id est laborum.

-
+
-

Placeholder

+

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 diff --git a/styles.css b/styles.css index 5893362..ccb98c0 100644 --- a/styles.css +++ b/styles.css @@ -5,18 +5,18 @@ border: solid 2px black; } - .header { + .parent__header { flex: 1; align-self: center; } - .content { + .parent__content { display: flex; flex-flow: row wrap; } - .leftBox { + .parent__content--leftBox { flex: 1; margin: 10px; border-top: solid 2px black; @@ -25,7 +25,7 @@ padding: 0% 1.5% 0% 1.5% } - .rightBox { + .parent__content--rightBox { flex: 1; margin: 10px; border-top: solid 2px black; @@ -34,11 +34,11 @@ } - .placeholder { + .parent__content--placeholder { } - .grayButton { + .parent__content--leftBox__grayButton { float: right; top: 5%; text-align: center; @@ -47,13 +47,6 @@ background-color: grey; } - - - .inline { - - } - - /*@media (max-width: 600px) { .bigBox {