diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..6f3a2913e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/images/cake_logo.jpg b/images/cake_logo.jpg new file mode 100644 index 000000000..d1c471b2b Binary files /dev/null and b/images/cake_logo.jpg differ diff --git a/images/cake_pic1.jpg b/images/cake_pic1.jpg new file mode 100644 index 000000000..c24a61da5 Binary files /dev/null and b/images/cake_pic1.jpg differ diff --git a/images/cake_pic2.jpg b/images/cake_pic2.jpg new file mode 100644 index 000000000..7f889139a Binary files /dev/null and b/images/cake_pic2.jpg differ diff --git a/images/cake_pic3.jpg b/images/cake_pic3.jpg new file mode 100644 index 000000000..9ae6a49a9 Binary files /dev/null and b/images/cake_pic3.jpg differ diff --git a/images/cake_pic4.jpg b/images/cake_pic4.jpg new file mode 100644 index 000000000..6afe0c66b Binary files /dev/null and b/images/cake_pic4.jpg differ diff --git a/images/cake_pic5.jpg b/images/cake_pic5.jpg new file mode 100644 index 000000000..c6ff0224a Binary files /dev/null and b/images/cake_pic5.jpg differ diff --git a/images/facebook-icon.svg b/images/facebook-icon.svg new file mode 100644 index 000000000..b3e551475 --- /dev/null +++ b/images/facebook-icon.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/images/instagram-icon.svg b/images/instagram-icon.svg new file mode 100644 index 000000000..56e207086 --- /dev/null +++ b/images/instagram-icon.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/twitter-icon.svg b/images/twitter-icon.svg new file mode 100644 index 000000000..a480cdbec --- /dev/null +++ b/images/twitter-icon.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/index.html b/index.html index 60b1afe13..9fa5f83d4 100644 --- a/index.html +++ b/index.html @@ -6,10 +6,85 @@ Responsive Cake webpage + + +
+
+
+ logo-pic +
+

The best cakes in town

+

delivered to your door

+
+ +
+
+ + +
+
+
+
+ +
+ +
+

Welcome

+
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis ab amet natus, voluptates magni mollitia. Quo accusantium exercitationem voluptatibus eius ad nulla, unde eaque modi, atque a hic reiciendis odit!

+
+
+
+
+
+ +
+
+
+ + random-cake-img +
+
+
+ + + + + + +
+
+
+
+ random-cake-img + random-cake-img + random-cake-img + random-cake-img +
+
+
+ +
+ + +
+ + diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 000000000..0352aa814 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "HTML-CSS-Coursework-Week3", + "lockfileVersion": 3, + "requires": true, + "packages": {} +} diff --git a/style.css b/style.css index 6de1b3567..5cacd1b0c 100644 --- a/style.css +++ b/style.css @@ -1 +1,185 @@ /* Add your styling here */ + + +@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200&display=swap'); + + + +* { + font-family: 'Plus Jakarta Sans', sans-serif; + +} + +body { + +} + +.four-images { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + column-gap: 10px; + row-gap: 10px; + + +} + +.first-img1 { + width: 470px; + display: grid; + justify-content: center; + +} + +.first-img { + width: 235px; +} + +.logo-img { + width: 150px; +} +.welcome { + text-align: center; + letter-spacing: 1.5rem; +} +.nav { + display: none; +} + +.logo-p-nav-container { + display: grid; + grid-template-columns: 235px 235px; + grid-template-rows: 180px; + border: 2px solid black; + +} + +.nav-p { + font-size: 0.6rem; + text-align: end; + line-height: 0; + border: 2px solid blue; +} +.img-p-container { + display: grid; + grid-template-columns: 235px 235px; + grid-template-rows: 180px; + border: 2px solid brown; +} + +.footer { + text-align: center; + margin-top: 5rem; +} +.footer-icon { + width: 30px; + margin-top: 2rem; +} + +.welcome-container { + display: grid; + grid-template-columns: 1fr 470px 1fr; +} + +.left-gutter { + border: 2px solid black; +} + +.welcome-main { + border: 2px solid red; +} +.right-gutter { + border: 2px solid black; +} + +.feature-img-container { + display: grid; + grid-template-columns: 1fr 470px 1fr; + margin-bottom: 3rem; + +} + +.gallery-container { + display: grid; + grid-template-columns: 1fr 470px 1fr; + +} + + + +@media screen and (min-width: 768px) { + .nav { + display: flex; + justify-content: space-around; + align-items: center; + } + + .nav a { + color: #333; + text-decoration: none; + font-size: 1rem; + margin: 0 1rem; + padding: 0.5rem; + border-radius: 5px; + transition: all 0.3s ease; + } + + .nav a:hover { + background-color: #333; + color: #fff; + } + + .logo-p-nav-container { + grid-template-columns: 1fr 1fr; + grid-template-rows: 180px; + } + + .nav-p { + display: none; + } + + .left-gutter, + .right-gutter { + display: none; + } + + .welcome-main { + border: none; + } + + .first-img1 { + width: 100%; + } + + .four-images { + grid-template-columns: repeat(4, 1fr); + grid-template-rows: 1fr; + } + } + + + + + + +/* +@media (min-width: 540px) { + body { + background-color: pink; + + } + .feature-img-container { + display: grid; + grid-template-columns: 1fr auto 1fr; + margin-bottom: 3rem; + + } +} + + @media (min-width: 900px) { + body { + background-color: blue; + } +} + */ + \ No newline at end of file