diff --git a/Cakes-Co/images/Cake 1.jpg b/Cakes-Co/images/Cake 1.jpg new file mode 100644 index 00000000..ec2629a9 Binary files /dev/null and b/Cakes-Co/images/Cake 1.jpg differ diff --git a/Cakes-Co/images/Cake 2.jpg b/Cakes-Co/images/Cake 2.jpg new file mode 100644 index 00000000..b66201b2 Binary files /dev/null and b/Cakes-Co/images/Cake 2.jpg differ diff --git a/Cakes-Co/images/Cupcake.jpg b/Cakes-Co/images/Cupcake.jpg new file mode 100644 index 00000000..d9a68b87 Binary files /dev/null and b/Cakes-Co/images/Cupcake.jpg differ diff --git a/Cakes-Co/images/Donut.jpg b/Cakes-Co/images/Donut.jpg new file mode 100644 index 00000000..d8ab3dd9 Binary files /dev/null and b/Cakes-Co/images/Donut.jpg differ diff --git a/Cakes-Co/images/Featured Cake.jpg b/Cakes-Co/images/Featured Cake.jpg new file mode 100644 index 00000000..a88cab1f Binary files /dev/null and b/Cakes-Co/images/Featured Cake.jpg differ diff --git a/cakes-co.css b/cakes-co.css new file mode 100644 index 00000000..475b9f26 --- /dev/null +++ b/cakes-co.css @@ -0,0 +1,107 @@ +/* Default Mobile First CSS */ +body { + font-family: "Arial, sans-serif"; + margin: 0; + padding: 0; + box-sizing: border-box; + background-color: #fff8f0; +} + +header { + text-align: center; + padding: 1em; + background-color: #ffb6c1; + color: white; +} + +.menu-toggle { + display: block; +} + +.main { + padding: 1em; +} + +.featured-cakes img { + width: 100%; + height: auto; + border-radius: 10px; +} + +.categories { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + padding: 1em; +} + +.category img { + width: 100%; + border-radius: 8px; +} + +footer { + text-align: center; + padding: 1em; + background-color: #ffb6c1; + color: white; +} + +/* Medium Screen Styles */ +@media (min-width: 540px) { + header { + padding: 1.5em; + } + + .categories { + grid-template-columns: repeat(4, 1fr); + gap: 20px; + } + + .featured-cakes img { + width: 80%; + margin: 0 auto; + display: block; + } + + footer { + padding: 2em; + } +} + +/* Large Screen Styles */ +@media (min-width: 900px) { + body { + max-width: 1200px; + margin: 0 auto; + } + + header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .main { + display: flex; + justify-content: space-between; + } + + .featured-cakes img { + width: 60%; + height: auto; + } + + .welcome { + width: 40%; + padding: 2em; + } + + .categories { + grid-template-columns: repeat(4, 1fr); + } + + footer { + padding: 3em; + } +} diff --git a/cakes-co.html b/cakes-co.html new file mode 100644 index 00000000..430166ab --- /dev/null +++ b/cakes-co.html @@ -0,0 +1,49 @@ + + + + + + CakeLand + + + +
+ + +

The best cakes in town delivered to your door

+
+ +
+
+

Welcome

+

+ Our cakes will make your life brighter and sweeter. Order them for + your special moments or everyday joy. +

+
+ +
+ Featured Cake +
+ +
+
+ Cake 1 +
+
+ Cake 2 +
+
+ Cupcake +
+
+ Donut +
+
+
+ + + +