From 2c16a0dcfdd5bdbf08bcadac424a805a11071ac1 Mon Sep 17 00:00:00 2001 From: hussein bahdon Date: Mon, 6 Feb 2023 04:08:15 +0000 Subject: [PATCH 1/5] Summary ( index.html, style.css Created the layout and basic styling for now --- index.html | 116 ++++++++++++++++++++++++++++++++++++- style.css | 164 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 277 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 60b1afe13..d2139b53f 100644 --- a/index.html +++ b/index.html @@ -6,11 +6,121 @@ Responsive Cake webpage - + + + + + + + + + + + + + + + + + +
+ + +
+
+

Amazing Cakes

+

Indulge in the sweetest creations, crafted with love just for you. +
Bite into a world of flavor, one delicious cake at a time.

+
+
+ +
+
+
+ +
+
+

Pound-Cake

+

Indulge in the timeless flavor of our decadent pound cake.

+ +
+ +
+

Red-Velvet-Cake

+

Satisfy your sweet tooth with our velvety smooth and tantalizing red velvet cake.

+ +
+ +
+

Carrot-Cake

+

Discover the perfect balance of sweet, nutty, and spicy with every bite of our irresistible carrot cake.

+ +
+ +
+ +
+
+

Top Selling

+
+
+
+

Our top selling cakes are a testament to the timeless appeal of classic flavors and irresistible sweetness.
So why wait?

+
+
+
+ + Buy Now! +
+
+ + Buy Now! +
+
+ + Buy Now! +
+
+ + Buy Now! +
+
+ +
+ +
+ +
+ + + + + + + + - - + \ No newline at end of file diff --git a/style.css b/style.css index 6de1b3567..c680429d6 100644 --- a/style.css +++ b/style.css @@ -1 +1,165 @@ /* Add your styling here */ +body{ + margin:0; + background-color:aliceblue; + font-family: 'Montserrat', sans-serif; +} + +button{ + padding: 0.7rem; + background-color:black; + color: white; +} + +.hero-Banner { + background-image:linear-gradient(0deg, rgb(4 3 3 / 30%), rgb(129 129 129 / 30%)), url("https://images.unsplash.com/photo-1464305795204-6f5bbfc7fb81?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8M3w0NTF8fGVufDB8fHx8&w=1000&q=80"); + background-repeat: no-repeat; + height: 40rem; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + +} + +.hero-banner-navbar{ + display: flex; + justify-content: space-between; + align-items: center; + /* margin:17px; */ + +} + +.hero-banner-navbar-logo h2 { + font-size: 3rem; + font-family: 'Sassy Frass', cursive; +} + +.hero-banner-navbar-links ul { + display: flex; + flex-direction: row; + padding: 0 4px; + list-style: none; +} +.hero-banner-navbar-links ul li a { + color: white; + font-size: 21px; + padding: 0 16px; + text-decoration: none; + } + + /* css for the icons if needed */ + + + .hero-Banner-content { + text-align: center; + top: 6rem; + /* left: 13rem; */ + + position: relative; + color:white; + font-size: 1.7rem; +} + + + +/* ******************************************* */ + /* styleing for the features section */ +/* ******************************************* */ + +.features{ + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + margin-top: 7rem; +} +.features-content{ + height: 26rem; + width: 32rem; + background-position: center; + background-size: cover; + + /* stlying */ + color: white; + + /* flex */ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 40%; +} + +.features-content h1 { + margin: 0; +} +.features-content p { + padding: 0 3rem; + font-size: 20px; + text-align: center; +} +.poundCake{ + background-image:linear-gradient(0deg, rgba(231, 3, 3, 0.3), rgba(3, 1, 1, 0.3)), url("https://prettysimplesweet.com/wp-content/uploads/2018/01/easy_lemon_bundt_cake_recipe.jpg"); +} +.redVelvet { + background-image:linear-gradient(0deg, rgba(234, 98, 232, 0.3), rgba(9, 4, 4, 0.3)), url("https://jessicainthekitchen.com/wp-content/uploads/2021/12/red-velvet-cake03132-V1.jpg"); +} +.carrot-Cake{ + background-image:linear-gradient(0deg, rgba(96, 255, 226, 0.3), rgba(0, 0, 0, 0.3)), url("https://media.istockphoto.com/id/466724890/photo/healthy-homemade-carrot-cake.jpg?b=1&s=612x612&w=0&k=20&c=gZECFsoulqaw6wImpJvlZ9SvPLo9PfH4EH804_Y--uM="); +} + + + + +/* *************************************** */ + /* Styling for Top Selling */ +/* *************************************** */ + +.topSelling{ + display: flex; + flex-direction: column; + align-items: center; + padding: 4rem 20rem; +} +.topSelling-heading { + font-size: 25px; +} + + +.topSelling-content p{ + text-align: center; + font-size: 18px; + padding: 0 4rem; + +} + +.topSelling-products { + display: flex; + align-items: center; + justify-content: space-between; +} +.topSelling-products-item { + display: flex; + flex-direction: column; + align-items: center; +} +.topSelling-products-item img { + width: 54px; + padding: 37px 8rem; +} +.products-Button{ + background-color:none; + color: rgba(0, 0, 0, 0.307); + border: none; + font-family: none; +} + + + +/* *************************************** */ + /* Styling for Footer */ +/* *************************************** */ +footer { + padding:4rem 0; +} + From 08eb31e1be8d07f76885e2ebaa9491047ae0b460 Mon Sep 17 00:00:00 2001 From: Hussein Bahdon <35459369+Dead-Section@users.noreply.github.com> Date: Sat, 11 Feb 2023 16:38:14 +0000 Subject: [PATCH 2/5] Summary ( index, style) --- index.html | 4 ++-- style.css | 61 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 61 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index d2139b53f..31e112ecb 100644 --- a/index.html +++ b/index.html @@ -83,7 +83,7 @@

Carrot-Cake

Top Selling

-
+

Our top selling cakes are a testament to the timeless appeal of classic flavors and irresistible sweetness.
So why wait?

@@ -107,7 +107,7 @@

Top Selling

diff --git a/style.css b/style.css index c680429d6..d0134ef7c 100644 --- a/style.css +++ b/style.css @@ -9,7 +9,7 @@ button{ padding: 0.7rem; background-color:black; color: white; -} +} .hero-Banner { background-image:linear-gradient(0deg, rgb(4 3 3 / 30%), rgb(129 129 129 / 30%)), url("https://images.unsplash.com/photo-1464305795204-6f5bbfc7fb81?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8M3w0NTF8fGVufDB8fHx8&w=1000&q=80"); @@ -17,7 +17,7 @@ button{ height: 40rem; background-position: center; background-repeat: no-repeat; - background-size: cover; + background-size: cover; } @@ -32,6 +32,7 @@ button{ .hero-banner-navbar-logo h2 { font-size: 3rem; font-family: 'Sassy Frass', cursive; + margin-left: 1rem; } .hero-banner-navbar-links ul { @@ -163,3 +164,59 @@ footer { padding:4rem 0; } + + + +/* *************************************** */ + /* Styling for Footer */ +/* *************************************** */ + + + + + + + + +@media screen and (max-width: 1050px) { + + body{ + background-color: green; + } + +} + +@media screen and (max-width: 769px) { + + body { + background-color: yellow; + } + + .topSelling-products{ + display: flex; + flex-direction: column; + } + + + +} + +@media screen and (max-width: 490px) { + + body { + background-color: blue; + } + + .features{ + display: flex; + flex-direction: column; + padding-left: 14rem; + } + + .topSelling-products { + display: block; + } + + +} + From 560bb2d0756ca4f93b2c77611b6f546a66afbe5f Mon Sep 17 00:00:00 2001 From: hussein bahdon Date: Mon, 13 Feb 2023 15:05:37 +0000 Subject: [PATCH 3/5] Summary index.html, style.css --- images/favicon.ico | Bin 0 -> 318 bytes index.html | 52 ++++++++---------- style.css | 134 +++++++++++++++++++++++++++++++++++---------- 3 files changed, 126 insertions(+), 60 deletions(-) create mode 100644 images/favicon.ico diff --git a/images/favicon.ico b/images/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..e18ea86fe604dfa6ae088ec28d6b9116ce6569d5 GIT binary patch literal 318 zcmZQzU<5(|0RbS%!l1#(z#zuJz@P!d0zj+)#2|4HXaJKC0wf0mpK2Kx{ Responsive Cake webpage - - - - - - - - + + + + - - + + + + -
@@ -50,7 +45,7 @@

Sweet Delights

Amazing Cakes

Indulge in the sweetest creations, crafted with love just for you. -
Bite into a world of flavor, one delicious cake at a time.

+
Bite into a world of flavor, one delicious cake at a time.

@@ -64,26 +59,23 @@

Pound-Cake

Indulge in the timeless flavor of our decadent pound cake.

-

Red-Velvet-Cake

Satisfy your sweet tooth with our velvety smooth and tantalizing red velvet cake.

-

Carrot-Cake

Discover the perfect balance of sweet, nutty, and spicy with every bite of our irresistible carrot cake.

-

Top Selling

-
+

Our top selling cakes are a testament to the timeless appeal of classic flavors and irresistible sweetness.
So why wait?

@@ -105,21 +97,21 @@

Top Selling

Buy Now! - -
-

© 2023 CakeBiz, Inc.

-
- +
+
+ + + +
+
+ © 2023 Cake Biz, Inc. - - - - - - +
+ +
diff --git a/style.css b/style.css index d0134ef7c..72cc911ce 100644 --- a/style.css +++ b/style.css @@ -7,12 +7,13 @@ body{ button{ padding: 0.7rem; - background-color:black; + background-color: rgb(0 0 0 / 15%); color: white; + border: none; } .hero-Banner { - background-image:linear-gradient(0deg, rgb(4 3 3 / 30%), rgb(129 129 129 / 30%)), url("https://images.unsplash.com/photo-1464305795204-6f5bbfc7fb81?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8M3w0NTF8fGVufDB8fHx8&w=1000&q=80"); + background-image:linear-gradient(0deg, rgb(240 248 255), rgb(0 0 0 / 50%)), url("https://images.unsplash.com/photo-1464305795204-6f5bbfc7fb81?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8M3w0NTF8fGVufDB8fHx8&w=1000&q=80"); background-repeat: no-repeat; height: 40rem; background-position: center; @@ -33,6 +34,7 @@ button{ font-size: 3rem; font-family: 'Sassy Frass', cursive; margin-left: 1rem; + color: white; } .hero-banner-navbar-links ul { @@ -42,11 +44,14 @@ button{ list-style: none; } .hero-banner-navbar-links ul li a { - color: white; - font-size: 21px; + color: black; + font-size: 21px; padding: 0 16px; text-decoration: none; } + .hero-banner-navbar-links ul li a:hover{ + color: white; + } /* css for the icons if needed */ @@ -80,6 +85,8 @@ button{ background-position: center; background-size: cover; + margin: auto; + /* stlying */ color: white; @@ -100,13 +107,13 @@ button{ text-align: center; } .poundCake{ - background-image:linear-gradient(0deg, rgba(231, 3, 3, 0.3), rgba(3, 1, 1, 0.3)), url("https://prettysimplesweet.com/wp-content/uploads/2018/01/easy_lemon_bundt_cake_recipe.jpg"); + background-image:linear-gradient(0deg, rgb(0 0 0 / 50%), rgb(240 248 255)), url("https://prettysimplesweet.com/wp-content/uploads/2018/01/easy_lemon_bundt_cake_recipe.jpg"); } .redVelvet { - background-image:linear-gradient(0deg, rgba(234, 98, 232, 0.3), rgba(9, 4, 4, 0.3)), url("https://jessicainthekitchen.com/wp-content/uploads/2021/12/red-velvet-cake03132-V1.jpg"); + background-image:linear-gradient(0deg, rgb(0 0 0 / 50%), rgb(240 248 255)), url("https://jessicainthekitchen.com/wp-content/uploads/2021/12/red-velvet-cake03132-V1.jpg"); } .carrot-Cake{ - background-image:linear-gradient(0deg, rgba(96, 255, 226, 0.3), rgba(0, 0, 0, 0.3)), url("https://media.istockphoto.com/id/466724890/photo/healthy-homemade-carrot-cake.jpg?b=1&s=612x612&w=0&k=20&c=gZECFsoulqaw6wImpJvlZ9SvPLo9PfH4EH804_Y--uM="); + background-image:linear-gradient(0deg, rgb(0 0 0 / 50%), rgb(240 248 255)), url("https://media.istockphoto.com/id/466724890/photo/healthy-homemade-carrot-cake.jpg?b=1&s=612x612&w=0&k=20&c=gZECFsoulqaw6wImpJvlZ9SvPLo9PfH4EH804_Y--uM="); } @@ -121,6 +128,7 @@ button{ flex-direction: column; align-items: center; padding: 4rem 20rem; + background-color: rgb(240 255 255 / 31%);; } .topSelling-heading { font-size: 25px; @@ -160,10 +168,22 @@ button{ /* *************************************** */ /* Styling for Footer */ /* *************************************** */ -footer { - padding:4rem 0; + /* footer section */ + footer{ + display: flex; + flex-direction: column; + align-items: center; + padding: 30px 0px; + background-color: azure; +} + +.footer-icon i{ + padding:20px 12px; } +.footer-icon i :hover{ + color: white; +} @@ -171,52 +191,106 @@ footer { /* Styling for Footer */ /* *************************************** */ +@media screen and (min-width: 1050px) { + + +} +@media screen and (max-width: 1565px) { + body { + /* background-color: yellow; */ + } + /* hero banner */ + .topSelling-heading{ + text-align: center; + } + .hero-Banner-content-text p { + font-size: 28px; + margin: 13px 5rem; + } - - - -@media screen and (max-width: 1050px) { - - body{ - background-color: green; + .hero-banner-navbar-icons i{ + display: none; } - -} -@media screen and (max-width: 769px) { + /* feature section */ + .features{ + font-size: 12px; + display: flex; + flex-direction: column; + margin-top: 0px; + } - body { - background-color: yellow; + .features-content { + margin: 12px; } + /* Top selling section */ + .topSelling-products{ display: flex; + } + .topSelling-content { + margin: 1px 25px; + } + .topSelling-content p{ + font-size: 2rem; + width: 28rem; + } + + .topSelling-products { flex-direction: column; } - + /* footer section */ + } -@media screen and (max-width: 490px) { +@media screen and (max-width: 700px) { body { - background-color: blue; + /* background-color: blue; */ } - .features{ - display: flex; - flex-direction: column; - padding-left: 14rem; + /* hero-banner section */ + + .hero-banner-navbar-links { + display: none; } - .topSelling-products { - display: block; + .hero-Banner-content-text p{ + font-size: 21px; + } + + + /* features section */ + + .features-content{ + width: auto; + margin: 26px; + height: 16rem; + } + .features-content p{ + font-size: 14px; + text-align: center; + width: 9rem; + margin: inherit; } + + + + /* top-selling section */ + .topSelling{ + padding: 1px; + } + .topSelling-content p{ + width: auto; + font-size: 23px; + } } From cbef2aa5b467697d48f81ca6f8e3b15e4d09b1a0 Mon Sep 17 00:00:00 2001 From: hussein bahdon Date: Wed, 15 Feb 2023 16:42:20 +0000 Subject: [PATCH 4/5] Update index.html --- index.html | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index dee9fe03f..136281511 100644 --- a/index.html +++ b/index.html @@ -36,9 +36,8 @@

Sweet Delights

  • About us
    • -
    - -
    + +
    From afca4f75fb354b72e028e1b49feaa5552ca6ff02 Mon Sep 17 00:00:00 2001 From: hussein bahdon Date: Wed, 15 Feb 2023 16:42:23 +0000 Subject: [PATCH 5/5] Update style.css --- style.css | 26 ++++++++++++++++---------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/style.css b/style.css index 72cc911ce..c72c9563a 100644 --- a/style.css +++ b/style.css @@ -191,12 +191,9 @@ button{ /* Styling for Footer */ /* *************************************** */ -@media screen and (min-width: 1050px) { - - -} -@media screen and (max-width: 1565px) { + +@media screen and (min-width: 900px) { body { /* background-color: yellow; */ @@ -249,7 +246,7 @@ button{ } -@media screen and (max-width: 700px) { +@media screen and (min-width: 540px) { body { /* background-color: blue; */ @@ -267,7 +264,13 @@ button{ /* features section */ - + .features { + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + margin-top: 7rem; + } .features-content{ width: auto; margin: 26px; @@ -280,10 +283,13 @@ button{ margin: inherit; } - - - /* top-selling section */ + .topSelling-products { + display: flex; + align-items: center; + justify-content: space-between; + flex-direction: column; + } .topSelling{ padding: 1px; }