diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..e649bbef --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "livePreview.defaultPreviewPath": "/Cakes-Co/index.html" +} diff --git a/Cakes-Co/img/background-img.webp b/Cakes-Co/img/background-img.webp new file mode 100644 index 00000000..67fcb4b9 Binary files /dev/null and b/Cakes-Co/img/background-img.webp differ diff --git a/Cakes-Co/img/img1.avif b/Cakes-Co/img/img1.avif new file mode 100644 index 00000000..3e353174 Binary files /dev/null and b/Cakes-Co/img/img1.avif differ diff --git a/Cakes-Co/img/img2.jpeg b/Cakes-Co/img/img2.jpeg new file mode 100644 index 00000000..9dffa1e9 Binary files /dev/null and b/Cakes-Co/img/img2.jpeg differ diff --git a/Cakes-Co/img/img3.jpeg b/Cakes-Co/img/img3.jpeg new file mode 100644 index 00000000..67c5b94f Binary files /dev/null and b/Cakes-Co/img/img3.jpeg differ diff --git a/Cakes-Co/img/img4.jpeg b/Cakes-Co/img/img4.jpeg new file mode 100644 index 00000000..b95ba764 Binary files /dev/null and b/Cakes-Co/img/img4.jpeg differ diff --git a/Cakes-Co/img/logo.png b/Cakes-Co/img/logo.png new file mode 100644 index 00000000..eafd4a6b Binary files /dev/null and b/Cakes-Co/img/logo.png differ diff --git a/Cakes-Co/index.html b/Cakes-Co/index.html index 60b1afe1..e288162a 100644 --- a/Cakes-Co/index.html +++ b/Cakes-Co/index.html @@ -1,16 +1,58 @@ - - - - - + + + + Responsive Cake webpage - - + + - - - + + +
+ logo +
+ + +

The best cakes in town delivered to your door

+
+
+ +
+
+

Welcome

+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae + voluptatem accusantium, necessitatibus cum accusamus, id cumque harum + voluptates ipsum nisi vero illo dolore! Doloribus, quae hic. Facilis + voluptate nobis eum. +

+
+
+ vanilla chocolate cake +
+
+ + + + +
+
- \ No newline at end of file + + + + + + diff --git a/Cakes-Co/style.css b/Cakes-Co/style.css index 6de1b356..5dccf293 100644 --- a/Cakes-Co/style.css +++ b/Cakes-Co/style.css @@ -1 +1,153 @@ -/* Add your styling here */ +* { + margin: 0px; + padding: 0px; +} +*::before, +*::after { + box-sizing: border-box; + margin: 0px; + padding: 0px; +} +img { + width: 100%; + height: 100%; +} +:root { + --bar-width: 30px; + --bar-height: 5px; + --gap: 30px; +} + +.logo-img { + width: 100px; + height: 100px; + align-self: center; +} +header { + background-color: blanchedalmond; + width: auto; + height: 140px; + display: flex; + justify-content: space-between; + align-items: stretch; + padding: 30px; +} +.inner-header { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-end; +} +.motto-p { + text-align: right; + max-width: 20ch; +} + +.ham-label { + display: flex; + flex-direction: column; + gap: 5px; + z-index: 3; +} + +.ham-label input, +.ham-label::before, +.ham-label::after { + content: ""; + width: var(--bar-width); + height: var(--bar-height); + background-color: black; +} + +.ham-label input { + appearance: none; + outline: none; + pointer-events: none; +} + +.menu-aside { + position: absolute; + background-color: grey; + width: 220px; + height: 400px; + top: 0px; + right: 0px; + z-index: 2; + display: none; +} + +.ham-label:has(input:checked) + .menu-aside { + display: block; +} + +nav { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +main { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: repeat(3, auto); + gap: var(--gap); +} + +.p-sec { + grid-column: 1/-1; + grid-row: 1/2; +} +.hero-sec { + grid-column: 1/-1; + grid-row: 2/3; +} +.img-sec { + grid-column: 1/-1; + grid-row: 3/-1; + + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, auto); + gap: var(--gap); +} + +@media screen and (min-width: 640px) { + main { + margin-top: 100px; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: 2fr 1fr; + } + .p-sec { + grid-column: 2/-1; + grid-row: 1/2; + } + .hero-sec { + grid-column: 1/2; + grid-row: 1/2; + } + + .img-sec { + grid-column: 1/-1; + grid-row: 2/-1; + + grid-template-columns: repeat(4, 1fr); + grid-template-rows: auto; + } + + .ham-label { + display: none; + } + .menu-aside { + position: absolute; + background-color: grey; + width: 220px; + height: 400px; + top: 0px; + right: 0px; + z-index: 2; + display: block; + } +}