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/images/cake1.jpg b/images/cake1.jpg new file mode 100644 index 000000000..e045b21d2 Binary files /dev/null and b/images/cake1.jpg differ diff --git a/images/cake2.jpg b/images/cake2.jpg new file mode 100644 index 000000000..983b54cfa Binary files /dev/null and b/images/cake2.jpg differ diff --git a/images/cake6.jpg b/images/cake6.jpg new file mode 100644 index 000000000..3407e1dd5 Binary files /dev/null and b/images/cake6.jpg differ diff --git a/images/cupcake.png b/images/cupcake.png new file mode 100644 index 000000000..58e008988 Binary files /dev/null and b/images/cupcake.png differ diff --git a/images/cupcake1.webp b/images/cupcake1.webp new file mode 100644 index 000000000..bd8dc2562 Binary files /dev/null and b/images/cupcake1.webp differ diff --git a/images/cupcake2.jpg b/images/cupcake2.jpg new file mode 100644 index 000000000..3cdde1aed Binary files /dev/null and b/images/cupcake2.jpg differ diff --git a/images/cupcakes-5.jpg b/images/cupcakes-5.jpg new file mode 100644 index 000000000..137e5ef76 Binary files /dev/null and b/images/cupcakes-5.jpg differ diff --git a/index.html b/index.html index 60b1afe13..a95c4f45b 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,65 @@ - - - - - + + + + Responsive Cake webpage + + - + - + - - \ No newline at end of file + +
+ + +
The best cakes in town delivered to your door
+
+ + + + +
+ HOME + CAKES + ORDERIN + LESSONS + ABOUT +
+ + + +
+
+

Welcome

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse eaque + ratione dolor qui veritatis tempore suscipit? Possimus omnis odio sint + totam. Earum expedita voluptates enim nam sit optio magni magnam? +

+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse eaque + ratione dolor qui veritatis tempore suscipit? Possimus omnis odio sint + totam. Earum expedita voluptates enim nam sit optio magni magnam? +

+
+ + cake with chocolates +
+
+ +
+ white_cake + cupcakes + chocolate_cupcakes + wedding_cakes +
+ + diff --git a/style.css b/style.css index 6de1b3567..2de75c21c 100644 --- a/style.css +++ b/style.css @@ -1 +1,63 @@ /* Add your styling here */ +body { + margin: 20px; +} + +.header { + display: grid; + grid-template-columns: 1fr 1fr; + align-items: end; +} + +.headline { + text-align: center; + font-size: 1em; + margin-bottom: 2em; +} + +.article { + display: flex; + flex-direction: column; + flex-wrap: nowrap; +} + +h2 { + margin-left: 10px; +} + +p { + margin-left: 10px; + font-size: 20px; +} + +.article img { + width: 100%; + display: flex; +} + +.more { + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: 1rem; +} + +.more img { + width: 100%; +} + +@media only screen and (min-width: 540px) { + .more { + grid-template-columns: 1fr 1fr 1fr; + } +} + +@media only screen and (min-width: 900px) { + .more { + grid-template-columns: 1fr 1fr 1fr 1fr; + } + + .article { + display: flex; + flex-direction: row-reverse; + } +}