From 567b8bd84c482e76fb561b1e98690a697b3688fc Mon Sep 17 00:00:00 2001 From: EleMashige Date: Mon, 20 Jun 2022 21:02:26 +0200 Subject: [PATCH 01/10] update --- index.html | 61 +++++++++++++++++++++++++++++++++++++++++++++--------- style.css | 35 +++++++++++++++++++++++++++++++ 2 files changed, 86 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 60b1afe13..1837af694 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,57 @@ - - - - - + + + + Responsive Cake webpage + - + - - - + +
+
+ cupcake-img +
+
The best cakes in town delivered to your door
+
+ - \ No newline at end of file +
+
+ cake-image +
+
+

Welcome

+

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolore + adipisci vel esse eligendi officia harum dicta minus assumenda nihil + magnam! Doloremque enim nesciunt omnis, dolorem ratione repudiandae + corporis quisquam officia! +

+

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis + nisi velit ab ut dicta neque obcaecati natus doloribus, nam pariatur + consequuntur laborum illum accusantium. Eum autem architecto officiis + veritatis rerum. +

+

+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. + Exercitationem, cumque incidunt! Facere natus necessitatibus nemo + possimus? Voluptatibus, voluptate. Molestiae aliquid, ut quisquam + commodi tenetur obcaecati nisi deleniti nesciunt cupiditate est! +

+
+
+ + diff --git a/style.css b/style.css index 6de1b3567..9b1d7d0a4 100644 --- a/style.css +++ b/style.css @@ -1 +1,36 @@ /* Add your styling here */ +.heading { +display: grid; +grid-template-columns: 1fr 1fr; + +} +.h-5 { +color: green; +vertical-align: bottom; +} + +.cupcake-img { +width: 200px; +height: auto; +} +.nav-items { +display: flex; +flex-direction: row; +justify-content:flex-end; +padding: 30px; +} +.nav-list { +text-decoration: none; +margin-left: 30px; +} + +.body-info { + display: flex; + flex-direction: row; + background-color: black; +} + +.cake-img { +width: 200px; +height: auto; +} From b1d2445a0df6470c266f945b0af01d0c3b1e318f Mon Sep 17 00:00:00 2001 From: EleMashige Date: Mon, 20 Jun 2022 21:23:25 +0200 Subject: [PATCH 02/10] update --- index.html | 5 +++-- style.css | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 1837af694..f5fdfc298 100644 --- a/index.html +++ b/index.html @@ -27,8 +27,8 @@ ABOUT -
-
+
+
cake-image
@@ -52,6 +52,7 @@

Welcome

commodi tenetur obcaecati nisi deleniti nesciunt cupiditate est!

+
diff --git a/style.css b/style.css index 9b1d7d0a4..134c29b73 100644 --- a/style.css +++ b/style.css @@ -27,10 +27,11 @@ margin-left: 30px; .body-info { display: flex; flex-direction: row; - background-color: black; + justify-content: space-around; +background-color: brown; } .cake-img { -width: 200px; +width: 2000px; height: auto; } From e185cfd83f6590cb241371a0720aff6d6881a227 Mon Sep 17 00:00:00 2001 From: EleMashige Date: Mon, 20 Jun 2022 21:27:43 +0200 Subject: [PATCH 03/10] updated --- index.html | 2 +- style.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index f5fdfc298..3e7a92a36 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@
cupcake-img
The best cakes in town delivered to your door
diff --git a/style.css b/style.css index 134c29b73..4ceb2aa9a 100644 --- a/style.css +++ b/style.css @@ -10,7 +10,7 @@ vertical-align: bottom; } .cupcake-img { -width: 200px; +width: 800px; height: auto; } .nav-items { From 423888c0f622d2eee70b980a073ccee4a7715e92 Mon Sep 17 00:00:00 2001 From: EleMashige Date: Wed, 22 Jun 2022 00:16:11 +0200 Subject: [PATCH 04/10] update --- index.html | 79 ++++++++++++++++++++++++++++++------------------------ style.css | 78 ++++++++++++++++++++++++++++++++++++++++++----------- 2 files changed, 106 insertions(+), 51 deletions(-) diff --git a/index.html b/index.html index 3e7a92a36..b6e510dff 100644 --- a/index.html +++ b/index.html @@ -10,15 +10,16 @@ -
-
- -
-
The best cakes in town delivered to your door
-
+
+
+
+ cupcake-img + +

The best cakes in town delivered to your door

+
+
+
+
+
+
+ -
-
- cake-image -
-
-

Welcome

-

- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolore - adipisci vel esse eligendi officia harum dicta minus assumenda nihil - magnam! Doloremque enim nesciunt omnis, dolorem ratione repudiandae - corporis quisquam officia! -

-

- Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis - nisi velit ab ut dicta neque obcaecati natus doloribus, nam pariatur - consequuntur laborum illum accusantium. Eum autem architecto officiis - veritatis rerum. -

-

- Lorem ipsum dolor, sit amet consectetur adipisicing elit. - Exercitationem, cumque incidunt! Facere natus necessitatibus nemo - possimus? Voluptatibus, voluptate. Molestiae aliquid, ut quisquam - commodi tenetur obcaecati nisi deleniti nesciunt cupiditate est! -

-
+
+
+ cake-image +
+
+

Welcome

+

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolore + adipisci vel esse eligendi officia harum dicta minus assumenda nihil + magnam! Doloremque enim nesciunt omnis, dolorem ratione repudiandae + corporis quisquam officia! +

+

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis + nisi velit ab ut dicta neque obcaecati natus doloribus, nam pariatur + consequuntur laborum illum accusantium. Eum autem architecto officiis + veritatis rerum. +

+

+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. + Exercitationem, cumque incidunt! Facere natus necessitatibus nemo + possimus? Voluptatibus, voluptate. Molestiae aliquid, ut quisquam + commodi tenetur obcaecati nisi deleniti nesciunt cupiditate est! +

+
+
+
+ +
Footer
+
Last Footer
+
-
diff --git a/style.css b/style.css index 4ceb2aa9a..a0d4b8973 100644 --- a/style.css +++ b/style.css @@ -1,37 +1,83 @@ -/* Add your styling here */ -.heading { -display: grid; -grid-template-columns: 1fr 1fr; +.container { + display: grid; + height: 100vh; + grid-template-columns: 1fr 1fr 1fr 1fr; + margin: 40px; + grid-template-areas: "header header header header" + "nav nav nav nav" + "section section section section" + "footer footer footer footer" + "footer-2 footer-2 footer-2 footer-2"; + grid-gap: 50px; +} +.header { + background-color: brown; + grid-area: header; +} +.nav { + background-color: beige; + grid-area: nav; +} +.section { + background-color: blueviolet; + grid-area: section; + align-self: center; + justify-self: end; } -.h-5 { -color: green; -vertical-align: bottom; +.footer { + background-color: grey; + grid-area: footer; } +.footer-2 { + background-color: orange; + grid-area: footer-2; +} + +/* h2 { + text-align: end; +} */ + +.nested-grid-1 { + display: grid; + grid-template-columns: 1fr 1fr; + margin: 30px; +} +.heading { +display: grid; +grid-template-columns: 2fr 1fr; +margin: 30px; +} + .cupcake-img { -width: 800px; +width: 500px; height: auto; -} +} + .nav-items { display: flex; flex-direction: row; justify-content:flex-end; padding: 30px; } + .nav-list { text-decoration: none; margin-left: 30px; +background-color: grey; +color: white; } -.body-info { - display: flex; - flex-direction: row; - justify-content: space-around; -background-color: brown; +.nested-grid { + display: grid; + grid-template-columns: 1fr 1fr; + margin: 30px; + } .cake-img { -width: 2000px; +width: 500px; height: auto; -} + +} From a9055b7dea06bdc6dee97d5c645b673956683a1c Mon Sep 17 00:00:00 2001 From: EleMashige Date: Wed, 22 Jun 2022 23:34:18 +0200 Subject: [PATCH 05/10] updated --- index.html | 17 ++++++++++++++++- style.css | 26 +++++++++++++++++++------- 2 files changed, 35 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index b6e510dff..e3a856192 100644 --- a/index.html +++ b/index.html @@ -59,7 +59,22 @@

Welcome

-
Footer
+
+
+
+ cake-image +
+
+ cake-image +
+
+ cake-image +
+
+ cake-image +
+
+
Last Footer
diff --git a/style.css b/style.css index a0d4b8973..acfe1a4ce 100644 --- a/style.css +++ b/style.css @@ -18,6 +18,7 @@ .nav { background-color: beige; grid-area: nav; + margin-top: -500px; } .section { background-color: blueviolet; @@ -34,14 +35,15 @@ grid-area: footer-2; } -/* h2 { - text-align: end; -} */ .nested-grid-1 { display: grid; grid-template-columns: 1fr 1fr; margin: 30px; + align-items: flex-end; + grid-template-rows: 60px auto; + + } .heading { display: grid; @@ -51,7 +53,7 @@ margin: 30px; .cupcake-img { -width: 500px; +width: 100px; height: auto; } @@ -59,25 +61,35 @@ height: auto; display: flex; flex-direction: row; justify-content:flex-end; -padding: 30px; +padding-left: 20px; } .nav-list { text-decoration: none; margin-left: 30px; -background-color: grey; +background-color: #D3D3D3; color: white; +padding: 5px; } .nested-grid { display: grid; grid-template-columns: 1fr 1fr; margin: 30px; + align-items:center; } .cake-img { -width: 500px; +width: 600px; height: auto; } +.footer-grid { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; +} +.footer-img { + width: 300px; + height: auto; +} From ced41ed03301f7e0cb6ebf489f1c9c4d1e942fd9 Mon Sep 17 00:00:00 2001 From: EleMashige Date: Thu, 23 Jun 2022 00:13:29 +0200 Subject: [PATCH 06/10] Update --- index.html | 10 ++++++++-- style.css | 23 +++++++++++++++++------ 2 files changed, 25 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index e3a856192..10fa01a61 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@
cupcake-img -

The best cakes in town delivered to your door

+

The best cakes in town delivered to your door!

@@ -75,7 +75,13 @@

Welcome

-
Last Footer
+
+
+
1
+
2
+
3
+
+
diff --git a/style.css b/style.css index acfe1a4ce..5430f1a97 100644 --- a/style.css +++ b/style.css @@ -2,17 +2,20 @@ display: grid; height: 100vh; grid-template-columns: 1fr 1fr 1fr 1fr; - margin: 40px; + margin-top: 40px; grid-template-areas: "header header header header" "nav nav nav nav" "section section section section" "footer footer footer footer" "footer-2 footer-2 footer-2 footer-2"; grid-gap: 50px; + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } .header { background-color: brown; grid-area: header; + height: 120px; + } .nav { @@ -41,9 +44,8 @@ grid-template-columns: 1fr 1fr; margin: 30px; align-items: flex-end; - grid-template-rows: 60px auto; - - + text-align: end; + font-style: italic; } .heading { display: grid; @@ -53,7 +55,7 @@ margin: 30px; .cupcake-img { -width: 100px; +width: 120px; height: auto; } @@ -61,7 +63,9 @@ height: auto; display: flex; flex-direction: row; justify-content:flex-end; -padding-left: 20px; +padding: 30px; +font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; +font-size: 12px; } .nav-list { @@ -77,6 +81,8 @@ padding: 5px; grid-template-columns: 1fr 1fr; margin: 30px; align-items:center; + text-align:end; + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } @@ -93,3 +99,8 @@ height: auto; width: 300px; height: auto; } +.footer-2 { + display: flex; + flex-direction: row; + +} From bcd7168a8d15c311ec4a26eb69fb2d3a32c5897f Mon Sep 17 00:00:00 2001 From: EleMashige Date: Thu, 23 Jun 2022 13:54:33 +0200 Subject: [PATCH 07/10] updated --- index.html | 12 +++++++++--- style.css | 7 +++++-- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 10fa01a61..a6d0dcbeb 100644 --- a/index.html +++ b/index.html @@ -77,9 +77,15 @@

Welcome

-
1
-
2
-
3
+ +
+ Careers +
+
+ FAQ +
diff --git a/style.css b/style.css index 5430f1a97..b216ce601 100644 --- a/style.css +++ b/style.css @@ -99,8 +99,11 @@ height: auto; width: 300px; height: auto; } -.footer-2 { +.footer2-grid { display: flex; - flex-direction: row; + flex-direction: row; + justify-content: center; + padding: 40px; + margin-left: 30px; } From 5f74ea470be3ba4828e5718b4bb6cc1f943e830c Mon Sep 17 00:00:00 2001 From: EleMashige Date: Thu, 23 Jun 2022 14:39:50 +0200 Subject: [PATCH 08/10] update --- index.html | 12 +++--------- style.css | 9 ++++++--- 2 files changed, 9 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index a6d0dcbeb..83c0cd4ed 100644 --- a/index.html +++ b/index.html @@ -77,15 +77,9 @@

Welcome

- -
- Careers -
-
- FAQ -
+ Track My Order + Careers + FAQ
diff --git a/style.css b/style.css index b216ce601..f817a4f30 100644 --- a/style.css +++ b/style.css @@ -103,7 +103,10 @@ height: auto; display: flex; flex-direction: row; justify-content: center; - padding: 40px; - margin-left: 30px; - + padding: 30px; +} +.footer2-grid-class { + text-decoration: none; + margin-left: 30px; + background-color: #D3D3D3; } From 3025dcfb65bfdfe58ac40a4a2c0b4dc02c3290c1 Mon Sep 17 00:00:00 2001 From: EleMashige Date: Thu, 23 Jun 2022 15:43:52 +0200 Subject: [PATCH 09/10] updated --- index.html | 14 ++++++++++---- style.css | 36 +++++++++++++++++++++++++++++------- 2 files changed, 39 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 83c0cd4ed..705adb5c4 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ + Responsive Cake webpage @@ -18,7 +19,7 @@

The best cakes in town delivered to your door!

- +
-
cake-image @@ -82,7 +82,13 @@

Welcome

FAQ
+
- - + diff --git a/style.css b/style.css index f817a4f30..fb02e1753 100644 --- a/style.css +++ b/style.css @@ -7,24 +7,22 @@ "nav nav nav nav" "section section section section" "footer footer footer footer" - "footer-2 footer-2 footer-2 footer-2"; + "footer-2 footer-2 footer-2 footer-2" + "socials socials socials socials"; grid-gap: 50px; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } .header { - background-color: brown; grid-area: header; height: 120px; } .nav { - background-color: beige; grid-area: nav; margin-top: -500px; } .section { - background-color: blueviolet; grid-area: section; align-self: center; justify-self: end; @@ -32,12 +30,14 @@ .footer { background-color: grey; grid-area: footer; + margin-top: 120px; } .footer-2 { - background-color: orange; grid-area: footer-2; } - +.socials { + grid-area: socials; +} .nested-grid-1 { display: grid; @@ -73,7 +73,11 @@ text-decoration: none; margin-left: 30px; background-color: #D3D3D3; color: white; -padding: 5px; +width: 100px; +height: 15px; +border-radius: 7%; +text-align: center; +padding: 2px; } .nested-grid { @@ -104,9 +108,27 @@ height: auto; flex-direction: row; justify-content: center; padding: 30px; + border-radius: 50%; } .footer2-grid-class { text-decoration: none; margin-left: 30px; background-color: #D3D3D3; + width: 100px; + height: 15px; + border-radius: 7%; + text-align: center; + color: white; + font-size: 12px; + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } +.social-list { + display: flex; + flex-direction: row; + justify-content: center; +} +.fa { + text-decoration: none; + margin-left: 10px; + +} \ No newline at end of file From 960157e55416d4adb6130c97e91034ee482840fe Mon Sep 17 00:00:00 2001 From: EleMashige Date: Thu, 23 Jun 2022 16:47:56 +0200 Subject: [PATCH 10/10] updated --- style.css | 27 +++++++++++++++++++++------ 1 file changed, 21 insertions(+), 6 deletions(-) diff --git a/style.css b/style.css index fb02e1753..d097b6558 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,4 @@ + .container { display: grid; height: 100vh; @@ -28,7 +29,6 @@ justify-self: end; } .footer { - background-color: grey; grid-area: footer; margin-top: 120px; } @@ -55,7 +55,7 @@ margin: 30px; .cupcake-img { -width: 120px; +width: 300px; height: auto; } @@ -63,7 +63,7 @@ height: auto; display: flex; flex-direction: row; justify-content:flex-end; -padding: 30px; +margin-top: 100px; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 12px; } @@ -71,7 +71,7 @@ font-size: 12px; .nav-list { text-decoration: none; margin-left: 30px; -background-color: #D3D3D3; +background-color: #F68989; color: white; width: 100px; height: 15px; @@ -109,11 +109,12 @@ height: auto; justify-content: center; padding: 30px; border-radius: 50%; + padding-top: 70px; } .footer2-grid-class { text-decoration: none; margin-left: 30px; - background-color: #D3D3D3; + background-color: #F68989; width: 100px; height: 15px; border-radius: 7%; @@ -130,5 +131,19 @@ height: auto; .fa { text-decoration: none; margin-left: 10px; - +} +@media (max-width: 550px) { + .nested-grid-1 { + grid-template-columns: 1fr; + } +} +@media (max-width: 550px) { + .nested-grid { + grid-template-columns: 1fr; + } +} +@media (max-width: 550px) { + .footer-grid { + grid-template-columns: 1fr; + } } \ No newline at end of file