diff --git a/images/favicon.ico b/images/favicon.ico new file mode 100644 index 000000000..e18ea86fe Binary files /dev/null and b/images/favicon.ico differ diff --git a/index.html b/index.html index 60b1afe13..136281511 100644 --- a/index.html +++ b/index.html @@ -6,11 +6,112 @@ 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..c72c9563a 100644 --- a/style.css +++ b/style.css @@ -1 +1,302 @@ /* Add your styling here */ +body{ + margin:0; + background-color:aliceblue; + font-family: 'Montserrat', sans-serif; +} + +button{ + padding: 0.7rem; + background-color: rgb(0 0 0 / 15%); + color: white; + border: none; +} + +.hero-Banner { + 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; + 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; + margin-left: 1rem; + color: white; +} + +.hero-banner-navbar-links ul { + display: flex; + flex-direction: row; + padding: 0 4px; + list-style: none; +} +.hero-banner-navbar-links ul li a { + 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 */ + + + .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; + + margin: auto; + + /* 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, 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, 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, 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="); +} + + + + +/* *************************************** */ + /* Styling for Top Selling */ +/* *************************************** */ + +.topSelling{ + display: flex; + flex-direction: column; + align-items: center; + padding: 4rem 20rem; + background-color: rgb(240 255 255 / 31%);; +} +.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 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; + +} + + + +/* *************************************** */ + /* Styling for Footer */ +/* *************************************** */ + + + +@media screen and (min-width: 900px) { + + body { + /* background-color: yellow; */ + } + + /* hero banner */ + .topSelling-heading{ + text-align: center; + } + .hero-Banner-content-text p { + font-size: 28px; + margin: 13px 5rem; + } + + .hero-banner-navbar-icons i{ + display: none; + } + + /* feature section */ + .features{ + font-size: 12px; + display: flex; + flex-direction: column; + margin-top: 0px; + } + + .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 (min-width: 540px) { + + body { + /* background-color: blue; */ + } + + /* hero-banner section */ + + .hero-banner-navbar-links { + display: none; + } + + .hero-Banner-content-text p{ + font-size: 21px; + } + + + /* features section */ + .features { + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + margin-top: 7rem; + } + .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-products { + display: flex; + align-items: center; + justify-content: space-between; + flex-direction: column; + } + .topSelling{ + padding: 1px; + } + .topSelling-content p{ + width: auto; + font-size: 23px; + } + +} +