diff --git a/app.js b/app.js new file mode 100644 index 0000000..2930955 --- /dev/null +++ b/app.js @@ -0,0 +1,23 @@ + + +function slidesPlugin(activeSlide = 0) { + const slides = document.querySelectorAll('.slide'); + + slides[activeSlide].classList.add('active'); + + for (const slide of slides) { + slide.addEventListener('click', () => { + clearActiveClasses() + + slide.classList.add('active'); + }) + } + + function clearActiveClasses() { + slides.forEach((slide) => { + slide.classList.remove('active'); + }) + } +} + +slidesPlugin(1); \ No newline at end of file diff --git a/img/Aston.avif b/img/Aston.avif new file mode 100644 index 0000000..33f67e4 Binary files /dev/null and b/img/Aston.avif differ diff --git a/img/Camaro.avif b/img/Camaro.avif new file mode 100644 index 0000000..aa12934 Binary files /dev/null and b/img/Camaro.avif differ diff --git a/img/Ferrari.avif b/img/Ferrari.avif new file mode 100644 index 0000000..4c4dbb1 Binary files /dev/null and b/img/Ferrari.avif differ diff --git a/img/Lamborghini.avif b/img/Lamborghini.avif new file mode 100644 index 0000000..16d2994 Binary files /dev/null and b/img/Lamborghini.avif differ diff --git a/img/Tesla.avif b/img/Tesla.avif new file mode 100644 index 0000000..b4b5430 Binary files /dev/null and b/img/Tesla.avif differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..655f1df --- /dev/null +++ b/index.html @@ -0,0 +1,31 @@ + + + + + + + Карточки | Проект 1 + + +
+
+

Ferrari

+
+
+

Lamborghini

+
+
+

Camaro

+
+
+

Aston

+
+
+

Tesla

+
+
+ + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..908ff60 --- /dev/null +++ b/styles.css @@ -0,0 +1,54 @@ +@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); + +* { + box-sizing: border-box; +} + +body { + font-family: 'Muli', sans-serif; + overflow: hidden; + margin: 0; + background: #111; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +.container { + width: 100%; + display: flex; + padding: 0 20px; +} + +.slide { + height: 80vh; + border-radius: 20px; + margin: 10px; + cursor: pointer; + color: #fff; + flex: 1; + background-size: cover; + background-position: center; + background-repeat: no-repeat; + position: relative; + transition: all 500ms ease-in-out; +} + +.slide h3 { + position: absolute; + font-size: 24px; + bottom: 20px; + left: 20px; + margin: 0; + opacity: 0; +} + +.slide.active { + flex: 10; +} + +.slide.active h3 { + opacity: 1; + transition: opacity 0.3s ease-in 0.4s; +} \ No newline at end of file