diff --git a/Cakes-Co/img/Best-Birthday-Cake.webp b/Cakes-Co/img/Best-Birthday-Cake.webp new file mode 100644 index 00000000..fb7633cc Binary files /dev/null and b/Cakes-Co/img/Best-Birthday-Cake.webp differ diff --git a/Cakes-Co/img/cake 1.webp b/Cakes-Co/img/cake 1.webp new file mode 100644 index 00000000..da02490d Binary files /dev/null and b/Cakes-Co/img/cake 1.webp differ diff --git a/Cakes-Co/img/cake 2.jpg b/Cakes-Co/img/cake 2.jpg new file mode 100644 index 00000000..82472991 Binary files /dev/null and b/Cakes-Co/img/cake 2.jpg differ diff --git a/Cakes-Co/img/chocolate cake.avif b/Cakes-Co/img/chocolate cake.avif new file mode 100644 index 00000000..36c0fba6 Binary files /dev/null and b/Cakes-Co/img/chocolate cake.avif differ diff --git a/Cakes-Co/img/cupcakes.jpg b/Cakes-Co/img/cupcakes.jpg new file mode 100644 index 00000000..abf8244b Binary files /dev/null and b/Cakes-Co/img/cupcakes.jpg differ diff --git a/Cakes-Co/img/donuts.jfif b/Cakes-Co/img/donuts.jfif new file mode 100644 index 00000000..f9f72dd5 Binary files /dev/null and b/Cakes-Co/img/donuts.jfif differ diff --git a/Cakes-Co/img/fruit cake.jfif b/Cakes-Co/img/fruit cake.jfif new file mode 100644 index 00000000..11d1d0f6 Binary files /dev/null and b/Cakes-Co/img/fruit cake.jfif differ diff --git a/Cakes-Co/img/logo for cake.jpg b/Cakes-Co/img/logo for cake.jpg new file mode 100644 index 00000000..3d6c261a Binary files /dev/null and b/Cakes-Co/img/logo for cake.jpg differ diff --git a/Cakes-Co/img/muffin.avif b/Cakes-Co/img/muffin.avif new file mode 100644 index 00000000..ebbc88a8 Binary files /dev/null and b/Cakes-Co/img/muffin.avif differ diff --git a/Cakes-Co/index.html b/Cakes-Co/index.html index 60b1afe1..32a619cd 100644 --- a/Cakes-Co/index.html +++ b/Cakes-Co/index.html @@ -1,16 +1,62 @@ - - - Responsive Cake webpage - + + Cake Company - - - + +
+ + +
+ + +
+
+

Welcome

+

The best cakes in town delivered to your door

+
+
+ Cake Image +
+
- \ No newline at end of file + +
+
+ Birthday Cake +

Birthday Cake

+
+
+ Chocolate Cake +

Chocolate Cake

+
+
+ Fruit Cake +

Fruit Cake

+
+
+ Cupcake +

Cupcake

+
+
+ + + + + diff --git a/Cakes-Co/style.css b/Cakes-Co/style.css index 6de1b356..f451f5a7 100644 --- a/Cakes-Co/style.css +++ b/Cakes-Co/style.css @@ -1 +1,142 @@ -/* Add your styling here */ +/* General Style */ +body { + font-family: 'Arial', sans-serif; + margin: 0; + padding: 0; + background-color: #f9f9f9; + color: #333; +} + +/* Header Styling */ +header { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #fff; + padding: 20px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.logo img { + width: 80px; +} + +nav ul { + list-style: none; + margin: 0; + padding: 0; + display: flex; +} + +nav ul li { + margin-left: 20px; +} + +nav a { + text-decoration: none; + color: #333; + font-weight: bold; + transition: color 0.3s ease; +} + +nav a:hover { + color: #f39c12; +} + +/* Hero Section Styling */ +.hero { + display: flex; + justify-content: space-between; + align-items: center; + padding: 60px 20px; + background-color: #f3e5f5; +} + +.hero-text h1 { + font-size: 2.5rem; + color: #d35400; +} + +.hero-text p { + font-size: 1.2rem; + color: #7f8c8d; +} + +.hero-image img { + width: 400px; + border-radius: 15px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +/* Cake Gallery Styling */ +.gallery { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: 20px; + padding: 20px; + background-color: #fff; +} + +.gallery-item { + text-align: center; +} + +.gallery-item img { + width: 100%; + height: 250px; + object-fit: cover; /* Ensures all images maintain a uniform size without distortion */ + border-radius: 10px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.gallery-item img:hover { + transform: scale(1.05); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); +} + +.gallery-item p { + margin-top: 10px; + font-weight: bold; + color: #34495e; +} + +/* Footer Styling */ +footer { + text-align: center; + padding: 20px; + background-color: #fff; + box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); + font-size: 0.9rem; + color: #7f8c8d; +} + +/* Responsive Media Query */ +@media (max-width: 768px) { + header { + flex-direction: column; + align-items: center; + } + + nav ul { + flex-direction: column; + align-items: center; + } + + nav ul li { + margin: 10px 0; + } + + .hero { + flex-direction: column; + text-align: center; + } + + .hero-text h1 { + font-size: 2rem; + } + + .hero-image img { + width: 250px; + } +} \ No newline at end of file diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 4344b144..3877d03f 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -10,19 +10,71 @@
-

Product Pick

+

Shirt Order Form

-
- - + + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
- - \ No newline at end of file + + + diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index e69de29b..746b13f7 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -0,0 +1,59 @@ +body { + font-family: Arial, sans-serif; + background-color: #f4f4f4; + margin: 0; + padding: 20px; +} + +h1 { + text-align: center; + color: #333; +} + +form { + background: white; + padding: 20px; + border-radius: 5px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + max-width: 400px; + margin: auto; +} + +label { + display: block; + margin-bottom: 5px; + font-weight: bold; +} + +input[type="text"], +input[type="email"], +select, +input[type="date"] { + width: 100%; + padding: 10px; + margin-bottom: 15px; + border: 1px solid #ccc; + border-radius: 4px; + transition: border-color 0.3s; +} + +input:focus, +select:focus, +input[type="date"]:focus { + border-color: #66afe9; + outline: none; +} + +button { + background-color: #28a745; + color: white; + padding: 10px 15px; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 16px; +} + +button:hover { + background-color: #218838; +}