diff --git a/expanding-cards/index.html b/expanding-cards/index.html deleted file mode 100644 index 164951d5..00000000 --- a/expanding-cards/index.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - Expanding Cards - - -
-
-

Explore The World

-
-
-

Wild Forest

-
-
-

Sunny Beach

-
-
-

City on Winter

-
-
-

Mountains - Clouds

-
- -
- - - - diff --git a/expanding-cards/script.js b/expanding-cards/script.js deleted file mode 100644 index 68d6b5c3..00000000 --- a/expanding-cards/script.js +++ /dev/null @@ -1,14 +0,0 @@ -const panels = document.querySelectorAll('.panel') - -panels.forEach(panel => { - panel.addEventListener('click', () => { - removeActiveClasses() - panel.classList.add('active') - }) -}) - -function removeActiveClasses() { - panels.forEach(panel => { - panel.classList.remove('active') - }) -} \ No newline at end of file diff --git a/expanding-cards/style.css b/expanding-cards/style.css deleted file mode 100644 index a6fe024f..00000000 --- a/expanding-cards/style.css +++ /dev/null @@ -1,63 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); - -* { - box-sizing: border-box; -} - -body { - font-family: 'Muli', sans-serif; - display: flex; - align-items: center; - justify-content: center; - height: 100vh; - overflow: hidden; - margin: 0; -} - -.container { - display: flex; - width: 90vw; -} - -.panel { - background-size: cover; - background-position: center; - background-repeat: no-repeat; - height: 80vh; - border-radius: 50px; - color: #fff; - cursor: pointer; - flex: 0.5; - margin: 10px; - position: relative; - -webkit-transition: all 700ms ease-in; -} - -.panel h3 { - font-size: 24px; - position: absolute; - bottom: 20px; - left: 20px; - margin: 0; - opacity: 0; -} - -.panel.active { - flex: 5; -} - -.panel.active h3 { - opacity: 1; - transition: opacity 0.3s ease-in 0.4s; -} - -@media (max-width: 480px) { - .container { - width: 100vw; - } - - .panel:nth-of-type(4), - .panel:nth-of-type(5) { - display: none; - } -}