diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 000000000..b2004928c Binary files /dev/null and b/.DS_Store differ diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..6b665aaa0 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/cakepics/cake-main.jpg b/cakepics/cake-main.jpg new file mode 100644 index 000000000..6da9d8ca0 Binary files /dev/null and b/cakepics/cake-main.jpg differ diff --git a/cakepics/cake.jpg b/cakepics/cake.jpg new file mode 100644 index 000000000..0a0e907a3 Binary files /dev/null and b/cakepics/cake.jpg differ diff --git a/cakepics/cake2.jpg b/cakepics/cake2.jpg new file mode 100644 index 000000000..0d029897d Binary files /dev/null and b/cakepics/cake2.jpg differ diff --git a/cakepics/cake3.jpg b/cakepics/cake3.jpg new file mode 100644 index 000000000..9b16e5325 Binary files /dev/null and b/cakepics/cake3.jpg differ diff --git a/cakepics/cake4.jpg b/cakepics/cake4.jpg new file mode 100644 index 000000000..07ae6f6a6 Binary files /dev/null and b/cakepics/cake4.jpg differ diff --git a/cakepics/smallcake.jpg b/cakepics/smallcake.jpg new file mode 100644 index 000000000..b5545a3ee Binary files /dev/null and b/cakepics/smallcake.jpg differ diff --git a/design/.DS_Store b/design/.DS_Store new file mode 100644 index 000000000..b6ad80e34 Binary files /dev/null and b/design/.DS_Store differ diff --git a/index.html b/index.html index 60b1afe13..2a83503e0 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,67 @@ - + + + Cake & Co. + + + + + + + + +
+ cake +

The best cakes delivered in town

+
+ +
+
+
+ Cake image +
+

About our cakes

+

+ Cake is a beloved dessert enjoyed all around the world. A good + cake should have the perfect texture - moist but not too dense, + with a soft, tender crumb. Achieving the perfect texture requires + careful measurements and precise baking techniques. Whether you're + using a traditional recipe or experimenting with new flavors, a + well-made cake is a treat for the taste buds and a delight for the + eyes. +

+
+
+
+
+
+ Cake image +
+
+ Cake image +
+
+ Cake image +
+
+ Cake image +
+
+
- - - - - Responsive Cake webpage - - - - - - - - \ No newline at end of file + + + diff --git a/style.css b/style.css index 6de1b3567..73dace5c4 100644 --- a/style.css +++ b/style.css @@ -1 +1,194 @@ /* Add your styling here */ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: "Quicksand", sans-serif; + } + + /* Set the root font size to 16px */ + html { + font-size: 16px; + } + + /* Style the header */ + header { + height: 100px; + background-color: #fff; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 2rem; + } + + /* Style the logo */ + header .logo { + font-size: 2rem; + font-weight: bold; + color: #333; + } + + /* Style the navigation bar */ + nav { + margin: 2rem 0; + } + + nav ul { + list-style: none; + display: flex; + justify-content: flex-end; + } + + nav li { + margin: 0 1rem; + } + + nav a { + color: #333; + text-decoration: none; + font-weight: bold; + text-transform: uppercase; + padding: 1rem; + } + + nav a:hover { + color: #555; + background-color: #f4f4f4; + border-radius: 4px; + } + + /* Style the main section */ + main { + display: flex; + flex-wrap: wrap; + justify-content: center; + max-width: 1200px; + margin: 2rem auto; + } + + section { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + } + + section article { + width: 50%; + display: flex; + flex-direction: column; + justify-content: center; + gap: 5rem; + } + + .wrapper { + display: flex; + gap: 1rem; + } + + .section__cakes { + margin-top: 2rem; + gap: 1rem; + } + + /* Style the cakes section */ + .cakes { + display: flex; + flex-wrap: wrap; + justify-content: center; + max-width: 1200px; + margin: 2rem auto; + } + + .cake { + width: calc(25% - 2rem); + margin: 1rem; + } + + .cake img { + width: 100%; + height: auto; + margin-bottom: 1rem; + } + + .cake h3 { + font-size: 1.5rem; + margin-bottom: 0.5rem; + } + + .cake p { + font-size: 1rem; + line-height: 1.5; + margin-bottom: 1rem; + } + + /* Style the footer */ + footer { + background-color: #333; + color: #fff; + text-align: center; + padding: 2rem; + margin-top: 2rem; + } + + /* Responsive styles */ + + @media screen and (max-width: 1200px) { + .section__cakes { + display: grid; + grid-template-columns: 1fr 1fr; + } + } + @media screen and (max-width: 768px) { + header { + height: auto; + padding: 1rem; + } + + header .logo { + margin-bottom: 1rem; + } + + nav { + margin-top: 1rem; + } + + nav li { + margin: 1rem 0; + } + + main { + margin: 1rem; + } + + .wrapper { + flex-direction: column; + } + + section img { + width: 100%; + margin-right: 0; + margin-bottom: 1rem; + } + + section article { + width: 100%; + } + + .cakes { + margin: 1rem; + } + } + + @media screen and (max-width: 468px) { + nav ul { + flex-direction: column; + align-items: center; + } + + .section__cakes { + flex-direction: column; + } + } + \ No newline at end of file diff --git a/untitled folder.textClipping b/untitled folder.textClipping new file mode 100644 index 000000000..4a513a513 Binary files /dev/null and b/untitled folder.textClipping differ