diff --git a/assets/photos/fantasy-2770468_1920.jpg b/assets/photos/fantasy-2770468_1920.jpg new file mode 100644 index 0000000..851b26d Binary files /dev/null and b/assets/photos/fantasy-2770468_1920.jpg differ diff --git a/assets/photos/science-fiction-2907434_1920.jpg b/assets/photos/science-fiction-2907434_1920.jpg new file mode 100644 index 0000000..74dfb80 Binary files /dev/null and b/assets/photos/science-fiction-2907434_1920.jpg differ diff --git a/assets/photos/space-4678686_1920.jpg b/assets/photos/space-4678686_1920.jpg new file mode 100644 index 0000000..41c645f Binary files /dev/null and b/assets/photos/space-4678686_1920.jpg differ diff --git a/assets/photos/universe-1622107_1920.jpg b/assets/photos/universe-1622107_1920.jpg new file mode 100644 index 0000000..7e6a557 Binary files /dev/null and b/assets/photos/universe-1622107_1920.jpg differ diff --git a/css/styles.css b/css/styles.css index b6d8db3..5ad1c6f 100644 --- a/css/styles.css +++ b/css/styles.css @@ -28,7 +28,7 @@ body { } } -#textWindow { +#landing { width: 100vw; height: 100vh; display: flex; @@ -39,7 +39,7 @@ body { position: relative; } -#textWindow #background { +#landing #background { position: absolute; top: 0; left: 0; @@ -48,7 +48,7 @@ body { z-index: -2; } -#textWindow #background-transition { +#landing #background-transition { display: none; position: absolute; top: 0; @@ -85,7 +85,7 @@ h1 { #colorSelector { display: flex; - position: fixed; + position: absolute; top: 0; right: 0; margin: 10px; @@ -104,6 +104,91 @@ h1 { font-size: 1.5em; } +#carousel { + height: 910px; + background-color: #0d0d0d; + position: relative; + display: flex; +} + +#carousel-container { + display: flex; + width: 100%; + padding: 50px; +} + +.carousel-item { + position: relative; + display:block; + height: 800px; + width: 150px; + min-width: 150px; + margin-inline: 12px; + border-radius: 81px; + border: 5px solid black; + overflow: hidden; + + transition: width 1s ease; +} + +.carousel-item .carousel-id { + position: absolute; + bottom: 0; + left: 0; + transform: translate(10px, 0); + width: 120px; + height: 120px; + background-color: #202020; + border-radius: 70px; + text-align: center; + line-height: 120px; + font-size: 100px; + margin: 0; + margin-bottom: 15px; + color: white; + border: 5px solid black; + text-shadow: black 5px 5px 5px; +} + +.carousel-item .carousel-title { + position: absolute; + bottom: 0; + left: 0; + transform: translate(180px, -50px); + color: white; + font-size: 50px; + margin: 0; + text-shadow: black 3px 3px 3px; +} + +#carousel-container .active { + width:100%; +} + +#carousel-container #carousel-1 { + background-image: url("/assets/photos/space-4678686_1920.jpg"); + background-size: cover; + background-position: center; +} + +#carousel-container #carousel-2 { + background-image: url("/assets/photos/universe-1622107_1920.jpg"); + background-size: cover; + background-position: center; +} + +#carousel-container #carousel-3 { + background-image: url("/assets/photos/science-fiction-2907434_1920.jpg"); + background-size: cover; + background-position: center; +} + +#carousel-container #carousel-4 { + background-image: url("/assets/photos/fantasy-2770468_1920.jpg"); + background-size: cover; + background-position: center; +} + /* TABLET STYLES */ @media screen and (min-width: 500px) { diff --git a/index.html b/index.html index fff4c31..b9ba111 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@
-
+

Tom Cornes

@@ -17,6 +17,26 @@
+
diff --git a/js/scripts.js b/js/scripts.js index 9ba2e0d..bc60cf3 100644 --- a/js/scripts.js +++ b/js/scripts.js @@ -1,5 +1,7 @@ console.log("hello"); +// COLOUR PICKER BACKGROUND + function changeBackground(R, G, B) { const colours = [ [255, 255, 255], @@ -171,4 +173,36 @@ function transitionLake() { transitionBackground("assets/photos/hintersee-3601004.jpg", "white"); } -transitionBackground("assets/photos/fog-8519076-nordseher.jpg", "black") \ No newline at end of file +// ACCORDIAN IMAGES + +function carouselExpand(i) { + const carousel = document.getElementById(`carousel-container`); + const carouselItems = carousel.getElementsByClassName("carousel-item"); + + i = i - 1; + + if (i < carouselItems.length) { + for (let j = 0; j < carouselItems.length; j++) { + carouselItems[j].className = "carousel-item"; + } + carouselItems[i].className = "carousel-item active"; + } +} + +function initCarousel() { + const carousel = document.getElementById(`carousel-container`); + const carouselItems = carousel.getElementsByClassName("carousel-item"); + + for (let i = 0; i < carouselItems.length; i++) { + carouselItems[i].addEventListener("mouseover", () => { + carouselExpand(i + 1); + }); + } + +} + +// INITIALIZATION + +transitionBackground("assets/photos/fog-8519076-nordseher.jpg", "black") +initCarousel(); +carouselExpand(1); \ No newline at end of file