diff --git a/cake1.jpg b/cake1.jpg new file mode 100644 index 000000000..f69f03318 Binary files /dev/null and b/cake1.jpg differ diff --git a/cake2.jpg b/cake2.jpg new file mode 100644 index 000000000..5983e106b Binary files /dev/null and b/cake2.jpg differ diff --git a/cake3.jpg b/cake3.jpg new file mode 100644 index 000000000..b90d7ad46 Binary files /dev/null and b/cake3.jpg differ diff --git a/html 3/.vscode/settings.json b/html 3/.vscode/settings.json new file mode 100644 index 000000000..6f3a2913e --- /dev/null +++ b/html 3/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/index.html b/index.html index 60b1afe13..8136c73fe 100644 --- a/index.html +++ b/index.html @@ -2,15 +2,88 @@ - - - - Responsive Cake webpage - + + + Responsive Cake Webpage + + + + + + - +
+ +
+

The Best Cakes in Town Delivered to Your Door

+
+
+ + +
+

Welcome

+
+

+ Welcome to our delicious world of cakes! We offer a wide variety of mouthwatering cakes that are sure to + satisfy your taste buds. From classic flavors to unique creations, our cakes are made with the finest + ingredients and are baked to perfection. Whether you're celebrating a special occasion or just craving a + sweet treat, our cakes are the perfect choice. +

+
+
+ owners +
+
+
+ Cake_1 +
+
+ Cake2 +
+
+ birthday_cake +
+
+ Cake3 +
+
+ +
+ \ No newline at end of file diff --git a/logo1.jpeg b/logo1.jpeg new file mode 100644 index 000000000..83c388ece Binary files /dev/null and b/logo1.jpeg differ diff --git a/main pic.jpg b/main pic.jpg new file mode 100644 index 000000000..85d840482 Binary files /dev/null and b/main pic.jpg differ diff --git a/style.css b/style.css index 6de1b3567..5f9ffda76 100644 --- a/style.css +++ b/style.css @@ -1 +1,137 @@ -/* Add your styling here */ +/* Default styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Comfortaa', cursive; + background-color: #f0f0f0; +} + +header { + display: flex; + justify-content: space-between; + align-items: center; + background-color: grey; + padding: 10px; +} + +#logo img { + width: 80px; +} + +#slogan { + font-size: 16px; + color: white; +} + +.navbar { + display: flex; + justify-content: flex-end; +} + +.burger { + display: block; + cursor: pointer; +} + +.burger span { + display: block; + width: 25px; + height: 3px; + background-color: #333; + margin: 4px; +} + +.nav-list { + display: none; +} + +.content { + display: grid; + grid-template-columns: 1fr; + gap: 20px; + padding: 20px; +} + +.main-section { + display: flex; +} + +#main_img img { + width: 50%; +} + +.article { + width: 50%; +} + +.small { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; +} + +.small img { + width: 100%; +} + +footer { + display: flex; + justify-content: space-around; + padding: 20px 0; + background-color: #333; + color: white; +} + +footer h3 { + margin-bottom: 10px; +} + +footer ul { + list-style-type: none; +} + +footer a { + color: white; + text-decoration: none; +} + +/* Medium styles */ +@media (min-width: 540px) { + #slogan { + font-size: 20px; + } +} + +/* Large styles */ +@media (min-width: 900px) { + #logo img { + width: 100px; + } + + #slogan { + font-size: 24px; + } + + .burger { + display: none; + } + + .nav-list { + display: flex; + gap: 10px; + } + + .nav-list a { + text-decoration: none; + color: #333; + font-size: 18px; + } + + .nav-list li { + display: inline; + } +} diff --git a/topcake.jpg b/topcake.jpg new file mode 100644 index 000000000..a0cf42657 Binary files /dev/null and b/topcake.jpg differ