diff --git a/expanding-cards/index.html b/expanding-cards/index.html index 164951d..a0c0c0e 100644 --- a/expanding-cards/index.html +++ b/expanding-cards/index.html @@ -1,31 +1,39 @@ - - - - - Expanding Cards - - -
-
-

Explore The World

-
-
-

Wild Forest

-
-
-

Sunny Beach

-
-
-

City on Winter

-
-
-

Mountains - Clouds

-
+ + + + + Expanding Cards + + + +
+
+

Explore The World

+
+
+

Wild Forest

+
+
+

Sunny Beach

+
+
+

City on Winter

+
+

Mountains - Clouds

+
+ +
+ + + - - - + \ No newline at end of file diff --git a/expanding-cards/script.js b/expanding-cards/script.js index 68d6b5c..333d838 100644 --- a/expanding-cards/script.js +++ b/expanding-cards/script.js @@ -2,13 +2,13 @@ const panels = document.querySelectorAll('.panel') panels.forEach(panel => { panel.addEventListener('click', () => { - removeActiveClasses() - panel.classList.add('active') + removeActiveClasses(); + panel.classList.add('active'); }) }) function removeActiveClasses() { panels.forEach(panel => { - panel.classList.remove('active') + panel.classList.remove('active'); }) } \ No newline at end of file diff --git a/expanding-cards/style.css b/expanding-cards/style.css index a6fe024..99d0db8 100644 --- a/expanding-cards/style.css +++ b/expanding-cards/style.css @@ -10,6 +10,7 @@ body { align-items: center; justify-content: center; height: 100vh; + /* width is 100vw by default*/ overflow: hidden; margin: 0; } @@ -25,19 +26,19 @@ body { background-repeat: no-repeat; height: 80vh; border-radius: 50px; - color: #fff; + color: #ffffff; cursor: pointer; flex: 0.5; margin: 10px; position: relative; - -webkit-transition: all 700ms ease-in; + transition: all 700ms ease-in; } .panel h3 { font-size: 24px; position: absolute; - bottom: 20px; - left: 20px; + bottom: 30px; + left: 30px; margin: 0; opacity: 0; } @@ -60,4 +61,4 @@ body { .panel:nth-of-type(5) { display: none; } -} +} \ No newline at end of file