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..4c43a24 100644 --- a/grid.css +++ b/grid.css @@ -0,0 +1,26 @@ +.container { + display: grid; + grid-gap: 3px; + grid-template-rows: 50px 200px 50px; + grid-template-areas: + "menu header header header header " + "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; +} +.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; +}