From 8b760883a8149050c5cf0aaabe429dbfe0cb4557 Mon Sep 17 00:00:00 2001 From: Majeed99 <438101329@student.ksu.edu.sa> Date: Wed, 6 Oct 2021 11:34:39 +0300 Subject: [PATCH 1/3] LAB IS DONEgit add . :) --- .vscode/settings.json | 3 +++ grid.css | 23 +++++++++++++++++++++++ 2 files changed, 26 insertions(+) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6b665aa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/grid.css b/grid.css index e69de29..1e88c5a 100644 --- a/grid.css +++ b/grid.css @@ -0,0 +1,23 @@ +.container { + display: grid; + grid-gap: 3px; + grid-template-rows: repeat(5, 100px); + grid-template-areas: + "menu header header header header " + "menu content content content content" + "menu content content content content" + "menu content content content content" + "menu footer footer footer footer"; +} +.header { + grid-area: header; +} +.menu { + grid-area: menu; +} +.content { + grid-area: content; +} +.footer { + grid-area: footer; +} From 4b26b540eaed36da7ee81465180f23912facb744 Mon Sep 17 00:00:00 2001 From: Majeed99 <438101329@student.ksu.edu.sa> Date: Wed, 6 Oct 2021 11:46:21 +0300 Subject: [PATCH 2/3] some changes --- grid.css | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/grid.css b/grid.css index 1e88c5a..9325038 100644 --- a/grid.css +++ b/grid.css @@ -1,12 +1,10 @@ .container { display: grid; grid-gap: 3px; - grid-template-rows: repeat(5, 100px); + grid-template-rows: 50px 200px 50px; grid-template-areas: "menu header header header header " "menu content content content content" - "menu content content content content" - "menu content content content content" "menu footer footer footer footer"; } .header { From 632eff1a8f8edc5ce8eff6917052cf9b20b14cd3 Mon Sep 17 00:00:00 2001 From: Majeed99 <438101329@student.ksu.edu.sa> Date: Thu, 7 Oct 2021 10:21:45 +0300 Subject: [PATCH 3/3] using bootstap --- grid.css | 5 +++ index.html | 111 +++++++++++++++++++++++++++++++++++++++++++++++------ style.css | 63 +++++++++++++++--------------- 3 files changed, 135 insertions(+), 44 deletions(-) diff --git a/grid.css b/grid.css index 9325038..4c43a24 100644 --- a/grid.css +++ b/grid.css @@ -19,3 +19,8 @@ .footer { grid-area: footer; } +.padd { + text-align: center; + margin-top: 10%; + padding: 0 10%; +} diff --git a/index.html b/index.html index 535ecb1..7465925 100644 --- a/index.html +++ b/index.html @@ -1,14 +1,101 @@ - - - - - -
-
HEADER
-
MENU
-
CONTENT
-
FOOTER
+ + + + + + + +
+

Sign in Here

+
+ +
+ +
+
+
+ +
+ +
+
+
+
+
+ +
+
+
HEADER
+
MENU
+
CONTENT
+
FOOTER
+
+ + diff --git a/style.css b/style.css index 47a3d4c..d9432ca 100644 --- a/style.css +++ b/style.css @@ -1,34 +1,33 @@ .container > div { - display: flex; - justify-content: center; - align-items: center; - font-size: 2em; - color: #ffeead; - } - - html, body { - box-sizing: border-box; - background-color: #ffeead; - height: 100%; - padding: 10px; - margin: 0px; - } - - .container > div:nth-child(1n) { - background-color: #96ceb4; - } - - .container > div:nth-child(3n) { - background-color: #88d8b0; - } - - .container > div:nth-child(2n) { - background-color: #ff6f69; - } - - .container > div:nth-child(4n) { - background-color: #ffcc5c; - } + display: flex; + justify-content: center; + align-items: center; + font-size: 2em; + color: #ffeead; +} - - \ No newline at end of file +html, +body { + box-sizing: border-box; + background-color: #ffeead !important; + height: 100%; + padding: + 0px; + margin: 0px; +} + +.container > div:nth-child(1n) { + background-color: #96ceb4; +} + +.container > div:nth-child(3n) { + background-color: #88d8b0; +} + +.container > div:nth-child(2n) { + background-color: #ff6f69; +} + +.container > div:nth-child(4n) { + background-color: #ffcc5c; +}