diff --git a/basic-muffin-recipe-8cde647.jpg b/basic-muffin-recipe-8cde647.jpg new file mode 100644 index 000000000..91ff65778 Binary files /dev/null and b/basic-muffin-recipe-8cde647.jpg differ diff --git a/design/1.jpeg b/design/1.jpeg new file mode 100644 index 000000000..5a4396658 Binary files /dev/null and b/design/1.jpeg differ diff --git a/design/2.jpeg b/design/2.jpeg new file mode 100644 index 000000000..081a2b988 Binary files /dev/null and b/design/2.jpeg differ diff --git a/design/3.jpg b/design/3.jpg new file mode 100644 index 000000000..b7ec19310 Binary files /dev/null and b/design/3.jpg differ diff --git a/design/4.jpg b/design/4.jpg new file mode 100644 index 000000000..a5a91cacc Binary files /dev/null and b/design/4.jpg differ diff --git a/design/My project-1(3).png b/design/My project-1(3).png new file mode 100644 index 000000000..c24781f80 Binary files /dev/null and b/design/My project-1(3).png differ diff --git a/design/big_cake.jpg b/design/big_cake.jpg new file mode 100644 index 000000000..90d84f709 Binary files /dev/null and b/design/big_cake.jpg differ diff --git a/design/big_img.jpg b/design/big_img.jpg new file mode 100644 index 000000000..1dc63f245 Binary files /dev/null and b/design/big_img.jpg differ diff --git a/design/white_logo.png b/design/white_logo.png new file mode 100644 index 000000000..dd7bbfbc7 Binary files /dev/null and b/design/white_logo.png differ diff --git a/index.html b/index.html index 60b1afe13..f74de1b39 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,112 @@ - - - - - + + + + Responsive Cake webpage - - - - - - + + + + + + + - \ No newline at end of file + +
+ +
+

The best cakes in town delivered to your door

+
+
+
+
+
+

Welcome

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet congue dui. + Maecenas quis magna enim. Ut dignissim facilisis tortor, nec volutpat neque placerat + volutpat. Praesent venenatis cursus dui malesuada volutpat. Vivamus in convallis magna. + Phasellus iaculis velit nibh, id fermentum sapien accumsan nec. Phasellus dictum nulla + sit amet dui auctor, eu pharetra libero tempus. Donec vulputate sem vel nibh tristique, + vitae placerat ipsum gravida. Vivamus vulputate eros et nulla accumsan, in porta sapien + commodo. Vivamus ultrices sit amet sapien id facilisis. Phasellus sed efficitur diam, + nec gravida ipsum. Sed vitae fermentum libero, sed accumsan arcu. Vivamus semper tellus + eu lectus ultricies, at sollicitudin augue scelerisque. Donec fermentum velit orci, id + mollis augue facilisis mattis. Pellentesque scelerisque felis in viverra dapibus. +

+
+
+

+ Cake
+ $10.99 +

+ Big_cakes +
+
+
+
+

+ Cake
+ $10.99 +

+ Cake_1 +
+
+

+ Cake
+ $10.99 +

+ Cake_2 +
+
+

+ Cake
+ $10.99 +

+ Cake_3 +
+
+

+ Cake
+ $10.99 +

+ Cake_4 +
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet congue dui. Maecenas quis magna enim. Ut dignissim facilisis tortor, nec volutpat neque placerat volutpat. Praesent venenatis cursus dui malesuada volutpat. Vivamus in convallis magna. Phasellus iaculis velit nibh, id fermentum sapien accumsan nec. Phasellus dictum nulla sit amet dui auctor, eu pharetra libero tempus.

+ Ad Image +
+
+ + + diff --git a/style.css b/style.css index 6de1b3567..6f3a9ed19 100644 --- a/style.css +++ b/style.css @@ -1 +1,210 @@ -/* Add your styling here */ +:root { + --chicken-yellow: rgba(250, 252, 209, 0.8); + --yellow: #ffeead; + --light-green: rgba(218, 255, 211, 0.5); + --light-blue: #9bf6ff; + --blue: #3d58d1; +} +body { + margin: 0; + display: grid; + grid-template-rows: auto 6fr 1fr; + width: 100vw; + font-family: 'Comfortaa', cursive; +} +/* Header */ +header { + display: grid; + grid-template-areas: + 'logo button' + 'heading heading'; + background: var(--blue); + font-family: 'Permanent Marker', cursive; +} + +#logo img { + grid-area: logo; + height: 8vw; +} +#parag { + width: 100vw; + grid-area: heading; +} + +#parag > h1 { + font-size: 3rem; + font-style: italic; + text-align: center; +} + +#menu_button { + margin: 0.5rem 0.5rem; + background-color: var(--chicken-yellow); + padding: 0 1vw 0 1vw; + border-radius: 5px; +} +#menu_button > div { + width: 35px; + height: 5px; + background-color: black; + margin: 6px 0; +} +/* Content */ +main { + margin: 1vw; + display: grid; + grid-template-rows: auto auto; +} + +.frist { + display: flex; + height: 65vh; +} +article > p, +h2 { + text-align: justify; + text-indent: 4vw; + padding: 0 5vw 0 5vw; +} + +/* Images */ +#large_img { + position: relative; + display: grid; + grid-gap: 1vw; + color: #ffeead; + margin: 0; + align-items: end; +} + +#large_img > img { + object-fit: cover; + width: 100%; + height: 100%; +} + +.small_images > div { + display: flex; + align-items: end; +} +.price { + z-index: 2; + position: absolute; + font-size: 1rem; + background: var(--chicken-yellow); + border-radius: 0.5em; + padding: 0.4vw; + color: black; + margin-left: 0.4vw; +} + +.small_images > div > img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.small_images { + display: grid; + grid-gap: 1vw; + grid-template-columns: repeat(4, minmax(200px, 1fr)); + grid-template-rows: 40vh; +} +/* Advertisement */ +.ad { + margin-top: 1vw; + display: flex; + flex-direction: row-reverse; + height: fit-content; + gap: 1vw; + background: #ffeead; + width: 98vw; + padding-right: 1vw; +} +.ad img { + height: 20vh; +} +.ad p { + text-align: justify; + text-indent: 1vw; +} + +/* Footer */ +footer { + padding-left: 5vw; + padding-right: 5vw; + display: flex; + gap: 3vw; + justify-content: center; + background: var(--blue); +} +footer div > h3 { + font-family: 'Permanent Marker', cursive; + color: white; +} + +footer div p > a { + line-height: 2vw; + color: white; +} +#contact_section { + text-align: right; +} +@media (max-width: 400px) { + #parag h1 { + font-size: 2rem; + } + #logo img { + height: 10vh; + } + #large_img { + display: none; + } + .frist { + position: absolute; + } + footer { + position: relative; + top: 33vh; + } + + .small_images { + position: relative; + top: 100vh; + display: grid; + grid-gap: 1vw; + grid-template-columns: repeat(2, minmax(200px, 1fr)); + grid-template-rows: repeat(2, 40vh); + } + + .small_images > img { + width: 2vw; + } + .ad { + display: none; + } +} + +@media (max-width: 800px) { + .frist { + flex-direction: column; + } + + #large_img { + display: none; + } + + .small_images { + display: grid; + grid-gap: 1vw; + grid-template-columns: repeat(2, minmax(200px, 1fr)); + grid-template-rows: repeat(2, 40vh); + } + + .small_images > img { + width: 10vw; + } + .ad { + display: none; + } +}