From 8203eb4432723e4553459a8d6b42871fac6899b9 Mon Sep 17 00:00:00 2001 From: Crackncode Date: Wed, 2 Dec 2020 20:59:45 -0500 Subject: [PATCH 1/5] Lab ! --- images | 0 index.html | 67 ++++++++++++++++++++++++++++++++++ main.css | 105 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 172 insertions(+) create mode 100644 images create mode 100644 index.html create mode 100644 main.css diff --git a/images b/images new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html new file mode 100644 index 0000000..fbb7737 --- /dev/null +++ b/index.html @@ -0,0 +1,67 @@ + + + + + + + Page Title + + + + + + +
+
+

MyWebsite

+ +
+ +
+ logo + +

The Golden Gate Bridge

+

The golden gate bridge is a suspension bridge spanning the golden gates, + the one mile wide strait connecting San Francisco Bay and the pacific ocean.

+ Read More + + + +
+ + + +
+

Copyright YourSite. All Rights Reserved

+ + +
+
+ + + + \ No newline at end of file diff --git a/main.css b/main.css new file mode 100644 index 0000000..cc5f5f5 --- /dev/null +++ b/main.css @@ -0,0 +1,105 @@ +/* ===================================== + Grid Layout +======================================== */ + +.container { + height: 100vh; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 300px minmax(200px, 1fr) 100px; + grid-auto-rows: minmax(150px, auto); + /* gap: 10px; */ + grid-template-areas: + "header" + "nav" + "main" + "aside" + "footer"; + } + + + header { + grid-area: header; + background-color: rgb(0, 0, 0); + } + + main { + grid-area: main; + background-color: aliceblue; + padding-top: 20px; + } + + aside { + grid-area: aside; + + } + + nav { + grid-area: nav; + + } + + aside, nav { + background-color: grey; + padding: 20px; + } + + footer { + grid-area: footer; + background-color: rgb(3, 3, 3); + color: white; + + } + + footer p { + text-align: center; + } + + h1 { + color: orange; + padding: 0 20px; + font-size: 4em; + + } + + img { + + float: left; + max-width: 30%; + height: auto; + margin: 0 20px ; + } + + a { + color: orange; + text-decoration: none; + } + + #readmore { + font-weight: bold; + } + + ul { + list-style-type: none; + } + + hr { + background-color: rgb(182, 22, 22); + } + + li { + padding: 10px 0; + } + + + + .container { + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: minmax(50px, auto) minmax(150px, auto) minmax(150px, auto) minmax(40px, auto); + grid-template-areas: + "header header header" + "main main nav" + "main main aside" + "footer footer footer"; + } + From caf89ac6dbbaf61117a35ccbc76540091edc6c41 Mon Sep 17 00:00:00 2001 From: Nick Satinover Date: Thu, 3 Dec 2020 11:23:31 -0500 Subject: [PATCH 2/5] updated h1 hr li nav aside: spacing margin color --- main.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/main.css b/main.css index cc5f5f5..3bf4c97 100644 --- a/main.css +++ b/main.css @@ -40,7 +40,7 @@ } aside, nav { - background-color: grey; + background-color: lightgray; padding: 20px; } @@ -58,7 +58,7 @@ h1 { color: orange; padding: 0 20px; - font-size: 4em; + font-size: 3em; } @@ -84,11 +84,12 @@ } hr { - background-color: rgb(182, 22, 22); + background-color: grey; + border: solid 1px grey; } li { - padding: 10px 0; + margin: 8px 0; } From d21e3bc0f9e3643a33c5bfcf7efc4937fbc85f4d Mon Sep 17 00:00:00 2001 From: Nick Satinover Date: Thu, 3 Dec 2020 16:56:02 -0500 Subject: [PATCH 3/5] Practice --- main.css | 1 - 1 file changed, 1 deletion(-) diff --git a/main.css b/main.css index 3bf4c97..83104b8 100644 --- a/main.css +++ b/main.css @@ -59,7 +59,6 @@ color: orange; padding: 0 20px; font-size: 3em; - } img { From c2c0de33e7f0f0d927998678cf0eb954078b752b Mon Sep 17 00:00:00 2001 From: Nick Satinover Date: Thu, 3 Dec 2020 17:04:15 -0500 Subject: [PATCH 4/5] practice --- main.css | 1 + 1 file changed, 1 insertion(+) diff --git a/main.css b/main.css index 83104b8..618a796 100644 --- a/main.css +++ b/main.css @@ -55,6 +55,7 @@ text-align: center; } + h1 { color: orange; padding: 0 20px; From 89557f975d7a91d2cc1827ad7d71680993ef31cb Mon Sep 17 00:00:00 2001 From: Nick Satinover Date: Fri, 4 Dec 2020 17:20:01 -0500 Subject: [PATCH 5/5] . --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index fbb7737..47687e8 100644 --- a/index.html +++ b/index.html @@ -33,6 +33,7 @@

The Golden Gate Bridge

Side Links

+