From 9117c51a270ecf89a22cfa2998fe2cc98d26ea1e Mon Sep 17 00:00:00 2001 From: Cecilia Date: Sat, 21 Nov 2020 17:18:24 +0000 Subject: [PATCH 1/5] Created html skeleton --- .vscode/settings.json | 3 ++ index.html | 66 ++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 68 insertions(+), 1 deletion(-) create mode 100644 .vscode/settings.json 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/index.html b/index.html index 60b1afe13..c0fcc81be 100644 --- a/index.html +++ b/index.html @@ -7,10 +7,74 @@ Responsive Cake webpage + - + + +

+ +

+ Here carousel with images underneath +

+ \ No newline at end of file From 8c16a448f08d5666db1edaca0904860368143534 Mon Sep 17 00:00:00 2001 From: Cecilia Date: Mon, 23 Nov 2020 13:40:04 +0000 Subject: [PATCH 2/5] Added media queries and general responsive features --- index.html | 42 ++++++++++-------- style.css | 127 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 150 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index c0fcc81be..521156a0a 100644 --- a/index.html +++ b/index.html @@ -12,11 +12,16 @@

@@ -39,36 +44,37 @@

Welcome to our website!

- -

Cake 1

Millefoglie cake

- -

Cake 2

Profiteroles

- -

Cake 3

Fresh fruit tart

- -

Cake 4

Sacher torte

- + \ No newline at end of file diff --git a/style.css b/style.css index 2f7d6d938..71180456e 100644 --- a/style.css +++ b/style.css @@ -54,19 +54,115 @@ body { margin: 0; } -/* Introduction styles */ +/* Navigation styles */ .links { padding: 1%; margin: 1%; + justify-content: space-between; } +/* Introduction styles */ + aside { width: 30%; font-size: 3vw; margin: 1.5rem; } +.carousel { + width: 77%; + margin-right: 1rem; +} + +* { + box-sizing: border-box; +} + +/* Slideshow container */ +.slideshow-container { + max-width: 1000px; + position: relative; + margin: auto; +} + +/* Hide the images by default */ +.mySlides { + display: none; +} + +/* Next & previous buttons */ +.prev, +.next { + cursor: pointer; + position: absolute; + top: 50%; + width: auto; + margin-top: -22px; + padding: 16px; + color: white; + font-weight: bold; + font-size: 18px; + transition: 0.6s ease; + border-radius: 0 3px 3px 0; + user-select: none; +} + +/* Position the "next button" to the right */ +.next { + right: 0; + border-radius: 3px 0 0 3px; +} + +/* On hover, add a black background color with a little bit see-through */ +.prev:hover, +.next:hover { + background-color: rgba(0, 0, 0, 0.8); +} + +/* The dots/bullets/indicators */ +.dot { + cursor: pointer; + height: 15px; + width: 15px; + margin: 0 2px; + background-color: #bbb; + border-radius: 50%; + display: inline-block; + transition: background-color 0.6s ease; +} + +.active, +.dot:hover { + background-color: #717171; +} + +/* Fading animation */ +.fade { + -webkit-animation-name: fade; + -webkit-animation-duration: 1.5s; + animation-name: fade; + animation-duration: 1.5s; +} + +@-webkit-keyframes fade { + from { + opacity: 0.4; + } + to { + opacity: 1; + } +} + +@keyframes fade { + from { + opacity: 0.4; + } + to { + opacity: 1; + } +} + /* Cakes styles */ .cakes { @@ -82,9 +178,14 @@ aside { } .cake-img { - width: 100%; + width: auto; + max-width: 100%; height: auto; - max-height: 300px; + max-height: 250px; +} + +figcaption { + margin: 1rem; } /* Footer styles */ From 445b4750046334699b50057564fc1f9a3e82090d Mon Sep 17 00:00:00 2001 From: Cecilia Date: Mon, 23 Nov 2020 16:04:38 +0000 Subject: [PATCH 4/5] Finished carousel, added colours --- index.html | 8 ++++---- style.css | 53 ++++++++++++++++++++++++++++++++++++++++++++++------- 2 files changed, 50 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 6bbafcde5..a42250f4d 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,7 @@

@@ -42,15 +42,15 @@

Welcome to our website!

diff --git a/style.css b/style.css index 71180456e..25b6e9325 100644 --- a/style.css +++ b/style.css @@ -1,4 +1,11 @@ /* General styles */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + .introduction, .footer, .links { @@ -11,7 +18,7 @@ li { } html { - background-color: red; + background-color: #f2d6dc; } body { @@ -27,7 +34,14 @@ body { display: flex; flex-direction: row; justify-content: space-between; - padding: 1rem; + align-items: center; + padding-top: 1rem; + padding-left: 1rem; + padding-right: 4rem; + padding-bottom: 1rem; + margin: 0; + color: #09363f; + background-color: white; } .logo-div { @@ -37,7 +51,7 @@ body { .logo { width: 100%; - max-width: 130px; + max-width: 200px; height: auto; } @@ -57,22 +71,32 @@ body { /* Navigation styles */ .links { - padding: 1%; - margin: 1%; + padding: 3%; + margin: 0; justify-content: space-between; + background-color: #4aafc4; + color: #09363f; } /* Introduction styles */ +.introduction { + margin: 0.5rem; + border: 5px solid #e76189; + border-radius: 25px; + background-color: #f0baca; + color: #b42f57; +} + aside { width: 30%; font-size: 3vw; - margin: 1.5rem; + margin: 1rem; } .carousel { width: 77%; - margin-right: 1rem; + margin: 1rem; } * { @@ -91,6 +115,14 @@ aside { display: none; } +.carousel-img { + height: 50vw; + max-height: 300px; + width: auto; + max-width: 400px; + margin: auto; +} + /* Next & previous buttons */ .prev, .next { @@ -169,6 +201,8 @@ aside { display: flex; flex-direction: column; justify-content: center; + background-color: #9cbeb8; + color: #0a3f35; } .cake { @@ -190,6 +224,11 @@ figcaption { /* Footer styles */ +.footer { + background-color: #a56c46; + color: #4b241b; +} + .footer-item { padding: 1%; width: 33%; From 8df521268d7fa9f841435ff736be93c6335c2971 Mon Sep 17 00:00:00 2001 From: Cecilia Date: Mon, 23 Nov 2020 19:40:33 +0000 Subject: [PATCH 5/5] added hover effects --- carousel.js | 2 +- index.html | 8 ++++---- style.css | 46 ++++++++++++++++++++++++++++++++++++---------- 3 files changed, 41 insertions(+), 15 deletions(-) diff --git a/carousel.js b/carousel.js index 6a6aefa61..8fd8b4c89 100644 --- a/carousel.js +++ b/carousel.js @@ -23,6 +23,6 @@ function showSlides(n) { for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } - slides[slideIndex-1].style.display = "block"; + slides[slideIndex-1].style.display = "flex"; dots[slideIndex-1].className += " active"; } \ No newline at end of file diff --git a/index.html b/index.html index a42250f4d..86ed3228e 100644 --- a/index.html +++ b/index.html @@ -36,21 +36,21 @@

Contact us!

diff --git a/style.css b/style.css index 25b6e9325..286077d63 100644 --- a/style.css +++ b/style.css @@ -78,6 +78,11 @@ body { color: #09363f; } +.links li:hover { + color: #021e24; + font-weight: bold; +} + /* Introduction styles */ .introduction { @@ -86,6 +91,7 @@ body { border-radius: 25px; background-color: #f0baca; color: #b42f57; + align-items: center; } aside { @@ -95,14 +101,10 @@ aside { } .carousel { - width: 77%; + width: 68%; margin: 1rem; } -* { - box-sizing: border-box; -} - /* Slideshow container */ .slideshow-container { max-width: 1000px; @@ -113,13 +115,14 @@ aside { /* Hide the images by default */ .mySlides { display: none; + max-height: 150px; } .carousel-img { - height: 50vw; - max-height: 300px; width: auto; - max-width: 400px; + max-width: 100%; + height: 100%; + max-height: 150px; margin: auto; } @@ -201,6 +204,7 @@ aside { display: flex; flex-direction: column; justify-content: center; + align-items: center; background-color: #9cbeb8; color: #0a3f35; } @@ -209,13 +213,18 @@ aside { text-align: center; max-width: 100%; margin: 1rem; + border-radius: 25px; +} + +.cake:hover { + background-color: #549287; } .cake-img { width: auto; - max-width: 100%; + max-width: 350px; height: auto; - max-height: 250px; + max-height: 100%; } figcaption { @@ -254,10 +263,27 @@ figcaption { } .cakes { flex-direction: row; + flex-wrap: wrap; } aside { font-size: 1rem; } + .links { + font-size: 1.2rem; + } + .cake-img { + max-height: 250px; + } + .cake { + max-width: 50%; + } + .mySlides { + max-height: 250px; + } + + .carousel-img { + max-height: 250px; + } } @media (min-width: 62rem) { body {