diff --git a/Components/Carousels/3D-Card-Carousel/images/bg.png b/Components/Carousels/3D-Card-Carousel/images/bg.png new file mode 100644 index 00000000..63c64c5b Binary files /dev/null and b/Components/Carousels/3D-Card-Carousel/images/bg.png differ diff --git a/Components/Carousels/3D-Card-Carousel/images/dragon_1.jpg b/Components/Carousels/3D-Card-Carousel/images/dragon_1.jpg new file mode 100644 index 00000000..73f5f280 Binary files /dev/null and b/Components/Carousels/3D-Card-Carousel/images/dragon_1.jpg differ diff --git a/Components/Carousels/3D-Card-Carousel/images/dragon_10.jpg b/Components/Carousels/3D-Card-Carousel/images/dragon_10.jpg new file mode 100644 index 00000000..2a006c43 Binary files /dev/null and b/Components/Carousels/3D-Card-Carousel/images/dragon_10.jpg differ diff --git a/Components/Carousels/3D-Card-Carousel/images/dragon_2.jpg b/Components/Carousels/3D-Card-Carousel/images/dragon_2.jpg new file mode 100644 index 00000000..d7d31cab Binary files /dev/null and b/Components/Carousels/3D-Card-Carousel/images/dragon_2.jpg differ diff --git a/Components/Carousels/3D-Card-Carousel/images/dragon_3.jpg b/Components/Carousels/3D-Card-Carousel/images/dragon_3.jpg new file mode 100644 index 00000000..dbc3e529 Binary files /dev/null and b/Components/Carousels/3D-Card-Carousel/images/dragon_3.jpg differ diff --git a/Components/Carousels/3D-Card-Carousel/images/dragon_4.jpg b/Components/Carousels/3D-Card-Carousel/images/dragon_4.jpg new file mode 100644 index 00000000..4562d719 Binary files /dev/null and b/Components/Carousels/3D-Card-Carousel/images/dragon_4.jpg differ diff --git a/Components/Carousels/3D-Card-Carousel/images/dragon_5.jpg b/Components/Carousels/3D-Card-Carousel/images/dragon_5.jpg new file mode 100644 index 00000000..335d543a Binary files /dev/null and b/Components/Carousels/3D-Card-Carousel/images/dragon_5.jpg differ diff --git a/Components/Carousels/3D-Card-Carousel/images/dragon_6.jpg b/Components/Carousels/3D-Card-Carousel/images/dragon_6.jpg new file mode 100644 index 00000000..02802226 Binary files /dev/null and b/Components/Carousels/3D-Card-Carousel/images/dragon_6.jpg differ diff --git a/Components/Carousels/3D-Card-Carousel/images/dragon_7.jpg b/Components/Carousels/3D-Card-Carousel/images/dragon_7.jpg new file mode 100644 index 00000000..eecdef9c Binary files /dev/null and b/Components/Carousels/3D-Card-Carousel/images/dragon_7.jpg differ diff --git a/Components/Carousels/3D-Card-Carousel/images/dragon_8.jpg b/Components/Carousels/3D-Card-Carousel/images/dragon_8.jpg new file mode 100644 index 00000000..edb8f5ab Binary files /dev/null and b/Components/Carousels/3D-Card-Carousel/images/dragon_8.jpg differ diff --git a/Components/Carousels/3D-Card-Carousel/images/dragon_9.jpg b/Components/Carousels/3D-Card-Carousel/images/dragon_9.jpg new file mode 100644 index 00000000..ed66836f Binary files /dev/null and b/Components/Carousels/3D-Card-Carousel/images/dragon_9.jpg differ diff --git a/Components/Carousels/3D-Card-Carousel/images/model.png b/Components/Carousels/3D-Card-Carousel/images/model.png new file mode 100644 index 00000000..bd617b19 Binary files /dev/null and b/Components/Carousels/3D-Card-Carousel/images/model.png differ diff --git a/Components/Carousels/3D-Card-Carousel/index.html b/Components/Carousels/3D-Card-Carousel/index.html new file mode 100644 index 00000000..b2302d09 --- /dev/null +++ b/Components/Carousels/3D-Card-Carousel/index.html @@ -0,0 +1,67 @@ + + + + + + 3D Card Carousel + + + + + + + + + \ No newline at end of file diff --git a/Components/Carousels/3D-Card-Carousel/styles.css b/Components/Carousels/3D-Card-Carousel/styles.css new file mode 100644 index 00000000..5bd222b9 --- /dev/null +++ b/Components/Carousels/3D-Card-Carousel/styles.css @@ -0,0 +1,133 @@ +@import url('https://fonts.cdnfonts.com/css/ica-rubrik-black'); +@import url('https://fonts.cdnfonts.com/css/poppins'); + +.banner{ + width: 100%; + height: 100vh; + text-align: center; + overflow: hidden; + position: relative; +} +.banner .slider{ + position: absolute; + width: 200px; + height: 250px; + top: 10%; + left: calc(50% - 100px); + transform-style: preserve-3d; + transform: perspective(1000px); + animation: autoRun 20s linear infinite; + z-index: 2; +} +@keyframes autoRun{ + from{ + transform: perspective(1000px) rotateX(-16deg) rotateY(0deg); + }to{ + transform: perspective(1000px) rotateX(-16deg) rotateY(360deg); + } +} + +.banner .slider .item{ + position: absolute; + inset: 0 0 0 0; + transform: + rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg)) + translateZ(550px); +} +.banner .slider .item img{ + width: 100%; + height: 100%; + object-fit: cover; +} +.banner .content{ + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: min(1400px, 100vw); + height: max-content; + padding-bottom: 100px; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + z-index: 1; +} +.banner .content h1{ + font-family: 'ICA Rubrik'; + font-size: 16em; + line-height: 1em; + color: #25283B; + position: relative; +} +.banner .content h1::after{ + position: absolute; + inset: 0 0 0 0; + content: attr(data-content); + z-index: 2; + -webkit-text-stroke: 2px #d2d2d2; + color: transparent; +} +.banner .content .author{ + font-family: Poppins; + text-align: right; + max-width: 200px; +} +.banner .content h2{ + font-size: 3em; +} +.banner .content .model{ + background-image: url(images/model.png); + width: 100%; + height: 75vh; + position: absolute; + bottom: 0; + left: 0; + background-size: auto 130%; + background-repeat: no-repeat; + background-position: top center; + z-index: 1; +} +@media screen and (max-width: 1023px) { + .banner .slider{ + width: 160px; + height: 200px; + left: calc(50% - 80px); + } + .banner .slider .item{ + transform: + rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg)) + translateZ(300px); + } + .banner .content h1{ + text-align: center; + width: 100%; + text-shadow: 0 10px 20px #000; + font-size: 7em; + } + .banner .content .author{ + color: #fff; + padding: 20px; + text-shadow: 0 10px 20px #000; + z-index: 2; + max-width: unset; + width: 100%; + text-align: center; + padding: 0 30px; + } +} +@media screen and (max-width: 767px) { + .banner .slider{ + width: 100px; + height: 150px; + left: calc(50% - 50px); + } + .banner .slider .item{ + transform: + rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg)) + translateZ(180px); + } + .banner .content h1{ + font-size: 5em; + } +} \ No newline at end of file