first commit, file added

adityamamta · Nov 3, 2024 · 39ad1fa · 39ad1fa
commit 39ad1fa
Show file tree

Hide file tree

Showing 10 changed files with 314 additions and 0 deletions.
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,120 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: "Poppins", serif;
+}
+
+html {
+  font-size: 62.5%;
+}
+
+main {
+  width: 100%;
+  height: auto;
+  display: flex;
+  justify-content: center;
+}
+
+.container {
+  display: flex;
+  max-width: 132rem;
+  margin-inline: auto;
+  -moz-column-gap: 2rem;
+       column-gap: 2rem;
+  row-gap: 4rem;
+  padding-inline: 2.8rem;
+  flex-wrap: wrap;
+  margin-block: 8rem;
+}
+
+.card {
+  display: flex;
+  position: relative;
+  overflow: hidden;
+  width: 30rem;
+  height: 45rem;
+}
+.card img {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  scale: 1.1;
+  transition: scale 0.3s ease;
+}
+.card:hover img {
+  scale: 1;
+}
+.card::after {
+  transition: opacity 0.3s ease;
+  position: absolute;
+  content: "";
+  inset: 0;
+  opacity: 0;
+  background: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0.2));
+}
+.card:hover::after {
+  opacity: 1;
+}
+.card figcaption {
+  position: absolute;
+  z-index: 999;
+  display: flex;
+  padding-inline: 2.4rem;
+  padding-bottom: 3.4rem;
+  flex-direction: column;
+  inset: 0;
+  justify-content: end;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+.card figcaption h1 {
+  color: white;
+  font-size: 4rem;
+  line-height: 140%;
+}
+.card figcaption .para {
+  color: white;
+  margin-top: 1.2rem;
+  margin-bottom: 0.6rem;
+  font-size: 1.2rem;
+  font-weight: 200;
+}
+.card figcaption .location {
+  color: white;
+  font-size: 1.4rem;
+  font-weight: 400;
+}
+.card:hover figcaption {
+  opacity: 1;
+  animation: text-show 0.4s ease;
+}
+
+@keyframes text-show {
+  0% {
+    transform: translateY(3rem);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+@media (max-width: 991px) {
+  html {
+    font-size: 60%;
+  }
+}
+@media (max-width: 649px) {
+  .container {
+    justify-content: center;
+  }
+}
+@media (max-width: 450%) {
+  html {
+    font-size: 55%;
+  }
+}/*# sourceMappingURL=style.css.map */
diff --git a/css/style.css.map b/css/style.css.map
diff --git a/img/img1.png b/img/img1.png
diff --git a/img/img2.png b/img/img2.png
diff --git a/img/img3.png b/img/img3.png
diff --git a/img/img4.png b/img/img4.png
diff --git a/img/img5.png b/img/img5.png
diff --git a/img/readme-btn.png b/img/readme-btn.png
diff --git a/index.html b/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Card Hover</title>
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+    <main>
+        <ul class="container">
+            <li class="card">
+                <figure>
+                    <img src="img/img1.png" alt="">
+                    <figcaption>
+                        <h1>Petra</h1>
+                        <p class="para">Ancient city carved into rose-red cliffs, once a bustling trade hub.</p>
+                        <p class="location">Jordan</p>
+                    </figcaption>
+                </figure>
+            </li>
+            <li class="card">
+                <figure>
+                    <img src="img/img2.png" alt="">
+                    <figcaption>
+                        <h1>Taj Mahal</h1>
+                        <p class="para">Marble masterpiece symbolizing love and one of the seven wonders.</p>
+                        <p class="location">India</p>
+                    </figcaption>
+                </figure>
+            </li>
+            <li class="card">
+                <figure>
+                    <img src="img/img3.png" alt="">
+                    <figcaption>
+                        <h1>Stonehenge</h1>
+                        <p class="para">Mysterious prehistoric stone circle.</p>
+                        <p class="location">England</p>
+                    </figcaption>
+                </figure>
+            </li>
+            <li class="card">
+                <figure>
+                    <img src="img/img4.png" alt="">
+                    <figcaption>
+                        <h1>Pyramids of Giza</h1>
+                        <p class="para">Ancient pyramids and Sphinx, marvels of engineering.</p>
+                        <p class="location">Egypt</p>
+                    </figcaption>
+                </figure>
+            </li>
+            <li class="card">
+                <figure>
+                    <img src="img/img5.png" alt="">
+                    <figcaption>
+                        <h1>Angkor Wat</h1>
+                        <p class="para">Largest religious monument in the world, showcasing Khmer architecture.</p>
+                        <p class="location">Cambodia</p>
+                    </figcaption>
+                </figure>
+            </li>
+        </ul>
+    </main>
+</body>
+</html>
diff --git a/style.scss b/style.scss
@@ -0,0 +1,128 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-family: "Poppins", serif;
+}
+
+html {
+    font-size: 62.5%;
+}
+
+$white: white;
+
+main {
+    width: 100%;
+    height: auto;
+    display: flex;
+    justify-content: center;
+}
+
+.container {
+    display: flex;
+    max-width: 132rem;
+    margin-inline: auto;
+    column-gap: 2rem;
+    row-gap: 4rem;
+    padding-inline: 2.8rem;
+    flex-wrap: wrap;
+    margin-block: 8rem;
+}
+
+.card {
+    display: flex;
+    position: relative;
+    overflow: hidden;
+    width: 30rem;
+    height: 45rem;
+    img {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        scale: 1.1;
+        transition: scale .3s ease;
+    }
+    &:hover img {
+        scale: 1;
+    }
+    &::after {
+        transition: opacity .3s ease;
+        position: absolute;
+        content: "";
+        inset: 0;
+        opacity: 0;
+        background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.2));
+    }
+    &:hover::after {
+       opacity: 1;
+    }
+    figcaption {
+        position: absolute;
+        z-index: 999;
+        display: flex;
+        padding-inline: 2.4rem;
+        padding-bottom: 3.4rem;
+        flex-direction: column;
+        inset: 0;
+        justify-content: end;
+        opacity: 0;
+        transition: opacity .3s ease;
+        h1 {
+            color: $white;
+            font-size: 4rem;
+            line-height: 140%;
+        }
+        .para {
+            color: $white;
+            margin-top: 1.2rem;
+            margin-bottom: .6rem;
+            font-size: 1.2rem;
+            font-weight: 200;
+        }
+        .location {
+            color: $white;
+            font-size: 1.4rem;
+            font-weight: 400;
+        }
+    }
+    &:hover figcaption {
+        opacity: 1;
+        animation: text-show .4s ease;
+    }
+
+
+}
+
+@keyframes text-show {
+    0% {
+        transform: translateY(3rem);
+    }
+    100% {
+        transform: translateY(0);
+    }
+}
+
+
+
+
+@media (max-width: 991px) {
+    html {
+        font-size: 60%;
+    }
+}
+
+@media (max-width: 649px) {
+    .container {
+        justify-content: center;
+    }
+}
+
+@media (max-width: 450%) {
+    html {
+        font-size: 55%;
+    }
+}