From 8064dc7a72af891581a44ac51ffabc9e317918d2 Mon Sep 17 00:00:00 2001 From: Tatiana Poleacov Date: Mon, 20 May 2019 00:44:46 +0300 Subject: [PATCH 1/7] css grid and flex implemented --- index.css | 161 +++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 36 ++++++++++++ 2 files changed, 197 insertions(+) create mode 100644 index.css create mode 100644 index.html diff --git a/index.css b/index.css new file mode 100644 index 0000000..c2344d0 --- /dev/null +++ b/index.css @@ -0,0 +1,161 @@ +html,body { + margin: 10px; + background-color: #ffeead; + } + + .wrapper { + display: grid; + grid-gap: 5px; + grid-template-columns: repeat(12, [col] 1fr) ; + /* grid-template-rows: repeat(6, [row] auto ); */ + grid-template-rows: auto 150px 150px 150px 150px auto; + background-color: #ffeead; + color: #444; + } + + .box { + padding: 10px; + font-size: 150%; + + } + + .box .box { + font-size: 30px; + } + + ul { + display: block; + list-style-type: none; + margin-block-start: 0; + margin-block-end: 0; + margin-inline-start: 0px; + margin-inline-end: 0px; + padding-inline-start: 0; + } + + nav { + flex: 1; + display: inline; + } + + nav ul { + display: flex; + } + + nav li { + list-style: none; + } + + .gallery { + flex: 1; + } + + .header > li { + padding: 0 10px 0 10px; + font-size: 1em; + color: #f7e6d7; + box-sizing: border-box; + list-style-type: none; + } + + .aside-bottom { + display: flex; + flex-direction: column; + justify-content: flex-end; + height: 95%; + align-items: center; + } + + .aside-bottom > div { + padding: 10px; + } + + + .a { + text-align: center; + background-color: #ffcc5c; + grid-column: col / span 2; + } + + .b { + background-color: #8dcfb1; + grid-column: col 3 / -1; + } + + .c { + text-align: center; + background-color: #ff6f69; + grid-column: col / span 2; + grid-row: 2 / 6; + } + + .d{ + background-color: rgb(255, 182, 86); + grid-column: col 3 / -1; + grid-row: 2 / 6; + display: grid; + grid-gap: 10px; + padding: 20px; + justify-content: center; + align-content: center; + grid-template-columns: 1fr 3fr 2fr; + grid-template-rows: 1fr 1fr 1fr 1fr; + } + + .d > div { + display: flex; + align-items: center; + justify-content: center; + } + + .e { + background-color: #e67b90; + grid-column: 1 / 1; + grid-row: 1 / 3; + } + + .f { + background-color: #ae7ece; + grid-column: 2 / 2; + grid-row: 1 / 3; + } + + .g { + background-color: #9dcf90; + grid-column: 3 / 3; + grid-row: 1 / 5; + } + + .h { + background-color: #8fdbdb; + grid-column: 1 / 3; + grid-row: 3 / 5; + } + + .j { + text-align: center; + background-color: #a9e069; + grid-column: col 1 / -1; + grid-row: 6 / 7; + } + + + + + @media all and (max-width: 615px) { + .header { + flex-wrap: wrap; + } + + .header > li { + flex: 1 1 50%; + text-align: center; + } + + .galerry > li { + text-align: center; + } + } + + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..9bd925a --- /dev/null +++ b/index.html @@ -0,0 +1,36 @@ + + + + + + +
+
LOGO
+
+ +
+ +
+
CONTENT 1
+
CONTENT 2
+
CONTENT 3
+
CONTENT 4
+
+
FOOTER
+
+ + \ No newline at end of file From 8d408a815ce4ed3fa302e8ae24af87cc4ccbd125 Mon Sep 17 00:00:00 2001 From: Tatiana Poleacov Date: Mon, 20 May 2019 00:46:54 +0300 Subject: [PATCH 2/7] made it responsive --- index.css | 68 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- index.html | 2 +- 2 files changed, 67 insertions(+), 3 deletions(-) diff --git a/index.css b/index.css index c2344d0..64e8d6b 100644 --- a/index.css +++ b/index.css @@ -16,11 +16,10 @@ html,body { .box { padding: 10px; font-size: 150%; - } .box .box { - font-size: 30px; + font-size: 1em; } ul { @@ -140,7 +139,45 @@ html,body { } + @media all and (max-width: 1192px) { + .d{ + background-color: rgb(255, 182, 86); + grid-column: col 3 / -1; + grid-row: 2 / 6; + display: grid; + grid-gap: 10px; + padding: 20px; + justify-content: center; + align-content: center; + grid-template-columns: 2fr 2fr 2fr; + grid-template-rows: 1fr 1fr 1fr 1fr; + } + + .e { + background-color: #e67b90; + grid-column: 1 / 2; + grid-row: 1 / 3; + } + + .f { + background-color: #ae7ece; + grid-column: 2 / 4; + grid-row: 1 / 3; + } + + .g { + background-color: #9dcf90; + grid-column: 1 / 3; + grid-row: 3 / 5; + } + + .h { + background-color: #8fdbdb; + grid-column: 3 / 4; + grid-row: 3 / 5; + } + } @media all and (max-width: 615px) { .header { @@ -157,5 +194,32 @@ html,body { } } + @media all and (max-width: 652px) { + .e { + background-color: #e67b90; + grid-column: 1 / 4; + grid-row: 1 / 1; + } + + .f { + background-color: #ae7ece; + grid-column: 1 / 4; + grid-row: 2 / 2; + } + + .g { + background-color: #9dcf90; + grid-column: 1 / 4; + grid-row: 3 / 3; + } + + .h { + background-color: #8fdbdb; + grid-column: 1 / 4; + grid-row: 4 / 4; + } + + } + \ No newline at end of file diff --git a/index.html b/index.html index 9bd925a..b9e9668 100644 --- a/index.html +++ b/index.html @@ -30,7 +30,7 @@
CONTENT 3
CONTENT 4
-
FOOTER
+
FOOTER
\ No newline at end of file From 7dca38d3cc2524450750e22f4935e0f460198785 Mon Sep 17 00:00:00 2001 From: Tatiana Poleacov Date: Wed, 22 May 2019 20:57:05 +0300 Subject: [PATCH 3/7] added main tag --- index.css | 2 ++ index.html | 8 ++++++-- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/index.css b/index.css index 64e8d6b..ef44a06 100644 --- a/index.css +++ b/index.css @@ -222,4 +222,6 @@ html,body { } + + \ No newline at end of file diff --git a/index.html b/index.html index b9e9668..2c15eb8 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,9 @@ + + Homework-VueJS-HTML + + @@ -24,12 +28,12 @@
Blog
-
+
CONTENT 1
CONTENT 2
CONTENT 3
CONTENT 4
-
+
FOOTER
From ce37abe83f348543c2d246ecbd62d19ecb6b29b2 Mon Sep 17 00:00:00 2001 From: Tatiana Poleacov Date: Wed, 22 May 2019 21:30:45 +0300 Subject: [PATCH 4/7] header mistake resolved --- index.css | 1 - index.html | 36 +++++++++++++++++++----------------- 2 files changed, 19 insertions(+), 18 deletions(-) diff --git a/index.css b/index.css index ef44a06..d7c6b7e 100644 --- a/index.css +++ b/index.css @@ -1,5 +1,4 @@ html,body { - margin: 10px; background-color: #ffeead; } diff --git a/index.html b/index.html index 2c15eb8..43bfd15 100644 --- a/index.html +++ b/index.html @@ -8,18 +8,20 @@ -
-
LOGO
-
- -
+
+
+
LOGO
+
+ +
+
-
CONTENT 1
-
CONTENT 2
-
CONTENT 3
-
CONTENT 4
+
CONTENT 1
+
CONTENT 2
+
CONTENT 3
+
CONTENT 4
FOOTER
-
+ \ No newline at end of file From 4eac98abc9286f6bfe6a73d171c4c47c932d0015 Mon Sep 17 00:00:00 2001 From: Tatiana Poleacov Date: Wed, 22 May 2019 23:07:21 +0300 Subject: [PATCH 5/7] made layout changes --- index.css | 181 +++++++++++++++++++++++------------------------------ index.html | 48 +++++++------- 2 files changed, 103 insertions(+), 126 deletions(-) diff --git a/index.css b/index.css index d7c6b7e..497807a 100644 --- a/index.css +++ b/index.css @@ -2,135 +2,112 @@ html,body { background-color: #ffeead; } - .wrapper { - display: grid; - grid-gap: 5px; - grid-template-columns: repeat(12, [col] 1fr) ; - /* grid-template-rows: repeat(6, [row] auto ); */ - grid-template-rows: auto 150px 150px 150px 150px auto; - background-color: #ffeead; - color: #444; - } - - .box { - padding: 10px; - font-size: 150%; - } - - .box .box { - font-size: 1em; - } - - ul { - display: block; - list-style-type: none; - margin-block-start: 0; - margin-block-end: 0; - margin-inline-start: 0px; - margin-inline-end: 0px; - padding-inline-start: 0; - } - - nav { - flex: 1; - display: inline; - } - - nav ul { - display: flex; - } - - nav li { - list-style: none; - } - - .gallery { - flex: 1; - } - - .header > li { - padding: 0 10px 0 10px; - font-size: 1em; - color: #f7e6d7; - box-sizing: border-box; - list-style-type: none; - } - - .aside-bottom { - display: flex; - flex-direction: column; - justify-content: flex-end; - height: 95%; - align-items: center; - } - - .aside-bottom > div { - padding: 10px; - } - +.wrapper { + display: grid; + grid-gap: 5px; + grid-template-columns: repeat(12, [col] 1fr) ; + /* grid-template-rows: repeat(6, [row] auto ); */ + grid-template-rows: auto 150px 150px 150px 150px auto; + padding: 10px; + background-color: #ffeead; + color: #444; +} - .a { - text-align: center; - background-color: #ffcc5c; - grid-column: col / span 2; - } +.box { + padding: 10px; + font-size: 150%; +} + +ul { + list-style-type: none; + margin: 0; + padding: 0; +} + +ul:last-child { + margin-left: auto; +} + +nav li { + list-style: none; +} + +.topbar > li { + padding: 0 10px 0 10px; + color: #f7e6d7; + box-sizing: border-box; + list-style-type: none; +} + +.leftbar { + display: flex; + flex-direction: column; +} + +ul:first-child { + margin-bottom: auto; +} + +.logo { + text-align: center; + background-color: #ffcc5c; + grid-column: 1 / 2; +} - .b { - background-color: #8dcfb1; - grid-column: col 3 / -1; - } +.topbar { + background-color: #8dcfb1; + grid-column: col 2/ -1; +} - .c { - text-align: center; - background-color: #ff6f69; - grid-column: col / span 2; - grid-row: 2 / 6; - } +.leftbar { + text-align: center; + background-color: #ff6f69; + grid-column: 1 / 2; + grid-row: 2 / 6; +} - .d{ - background-color: rgb(255, 182, 86); - grid-column: col 3 / -1; - grid-row: 2 / 6; - display: grid; - grid-gap: 10px; - padding: 20px; - justify-content: center; - align-content: center; - grid-template-columns: 1fr 3fr 2fr; - grid-template-rows: 1fr 1fr 1fr 1fr; - } - - .d > div { +.content{ + background-color: rgb(255, 182, 86); + grid-column: col 3 / -1; + grid-row: 2 / 6; + display: grid; + grid-gap: 10px; + padding: 20px; + grid-template-columns: 1fr 3fr 2fr; + grid-template-rows: 1fr 1fr 1fr 1fr; +} + + .content > div { display: flex; align-items: center; justify-content: center; } - .e { + .first-content { background-color: #e67b90; grid-column: 1 / 1; grid-row: 1 / 3; } - .f { + .second-content { background-color: #ae7ece; grid-column: 2 / 2; grid-row: 1 / 3; } - .g { + .third-content { background-color: #9dcf90; grid-column: 3 / 3; grid-row: 1 / 5; } - .h { + .forth-content { background-color: #8fdbdb; grid-column: 1 / 3; grid-row: 3 / 5; } - .j { + .bottom { text-align: center; background-color: #a9e069; grid-column: col 1 / -1; @@ -178,7 +155,7 @@ html,body { } - @media all and (max-width: 615px) { + /* @media all and (max-width: 615px) { .header { flex-wrap: wrap; } @@ -218,7 +195,7 @@ html,body { grid-row: 4 / 4; } - } + } */ diff --git a/index.html b/index.html index 43bfd15..df05582 100644 --- a/index.html +++ b/index.html @@ -10,33 +10,33 @@
-
LOGO
-
- -
+ +
-
\ No newline at end of file From 8440e84199b1eb4a376ba27d1717cc60df3e0dd2 Mon Sep 17 00:00:00 2001 From: Tatiana Poleacov Date: Thu, 23 May 2019 14:55:30 +0300 Subject: [PATCH 6/7] layout style mistakes resolved --- index.css | 166 +++++++++++++++++++++-------------------------------- index.html | 24 ++++---- 2 files changed, 77 insertions(+), 113 deletions(-) diff --git a/index.css b/index.css index 497807a..6240403 100644 --- a/index.css +++ b/index.css @@ -32,6 +32,10 @@ nav li { list-style: none; } +.navigation ul { + display: flex; +} + .topbar > li { padding: 0 10px 0 10px; color: #f7e6d7; @@ -39,121 +43,81 @@ nav li { list-style-type: none; } -.leftbar { - display: flex; - flex-direction: column; +ul > li:last-child { + margin-left: auto; } -ul:first-child { - margin-bottom: auto; -} - .logo { - text-align: center; - background-color: #ffcc5c; - grid-column: 1 / 2; + text-align: center; + background-color: #ffcc5c; + grid-column: 1 / 2; } - -.topbar { - background-color: #8dcfb1; - grid-column: col 2/ -1; + +header{ + background-color: #8dcfb1; + grid-column: 2/ -1; } - -.leftbar { - text-align: center; - background-color: #ff6f69; - grid-column: 1 / 2; - grid-row: 2 / 6; + +aside { + display: flex; + flex-direction: column; + text-align: center; + background-color: #ff6f69; + grid-column: 1 / 2; + grid-row: 2 / 6; } - -.content{ - background-color: rgb(255, 182, 86); - grid-column: col 3 / -1; - grid-row: 2 / 6; - display: grid; - grid-gap: 10px; - padding: 20px; - grid-template-columns: 1fr 3fr 2fr; - grid-template-rows: 1fr 1fr 1fr 1fr; + +aside nav ul > li:first-child { + margin-bottom: auto; } - .content > div { - display: flex; - align-items: center; - justify-content: center; - } - - .first-content { - background-color: #e67b90; - grid-column: 1 / 1; - grid-row: 1 / 3; - } - - .second-content { - background-color: #ae7ece; - grid-column: 2 / 2; - grid-row: 1 / 3; - } - - .third-content { - background-color: #9dcf90; - grid-column: 3 / 3; - grid-row: 1 / 5; - } +main{ + display: grid; + grid-column: 2 / -1; + grid-row: 2 / 6; + grid-gap: 10px; + padding: 20px; + grid-template-columns: repeat(12, 1fr); + grid-template-rows: repeat(4, 1fr); + background-color: rgb(255, 182, 86); +} - .forth-content { - background-color: #8fdbdb; - grid-column: 1 / 3; - grid-row: 3 / 5; - } +main > div{ + display: flex; + justify-content: center; + align-items: center; +} - .bottom { - text-align: center; - background-color: #a9e069; - grid-column: col 1 / -1; - grid-row: 6 / 7; - } +.first-content { + background-color: #e67b90; + grid-column: 1 / 3; + grid-row: 1 / 3; +} +.second-content { + background-color: #ae7ece; + grid-column: 3 / 8; + grid-row: 1 / 3; +} - @media all and (max-width: 1192px) { - .d{ - background-color: rgb(255, 182, 86); - grid-column: col 3 / -1; - grid-row: 2 / 6; - display: grid; - grid-gap: 10px; - padding: 20px; - justify-content: center; - align-content: center; - grid-template-columns: 2fr 2fr 2fr; - grid-template-rows: 1fr 1fr 1fr 1fr; - } - - .e { - background-color: #e67b90; - grid-column: 1 / 2; - grid-row: 1 / 3; - } - - .f { - background-color: #ae7ece; - grid-column: 2 / 4; - grid-row: 1 / 3; - } - - .g { - background-color: #9dcf90; - grid-column: 1 / 3; - grid-row: 3 / 5; - } +.third-content { + background-color: #9dcf90; + grid-column: 8 / -1; + grid-row: 1 / 5; +} - .h { - background-color: #8fdbdb; - grid-column: 3 / 4; - grid-row: 3 / 5; - } +.forth-content { + background-color: #8fdbdb; + grid-column: 1 / 8; + grid-row: 3 / 5; +} - } +.bottom { + text-align: center; + background-color: #a9e069; + grid-column: col 1 / -1; + grid-row: 6 / 7; +} /* @media all and (max-width: 615px) { .header { diff --git a/index.html b/index.html index df05582..8a8e17f 100644 --- a/index.html +++ b/index.html @@ -9,19 +9,19 @@
-
- - -
+ +
+ +