added cards code in component

csiddu · Oct 14, 2023 · 4fb115c · 4fb115c
1 parent 001bc9d
commit 4fb115c
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 2 deletions.
diff --git a/components.css b/components.css
@@ -82,11 +82,85 @@ header .menu {
 	display: none;
 }
 
+.wrapper{
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding: 20px;
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    gap: 24px;
+    flex-wrap: wrap;
+}
+
+.card{
+    position: relative;
+    width: 325px;
+    height: 450px;
+    background: #000;
+    border-radius: 18px;
+    overflow: hidden;
+    box-shadow: 0 5px 10px rgba(0,0,0,.2);
+}
+
+.poster{
+    position: relative;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.poster::before{
+    content: '';
+    position: absolute;
+    bottom: -45%;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.details{
+    position: absolute;
+    bottom: -100%;
+    left: 0;
+    width: 100%;
+    height: auto;
+    padding: 1.5em 1.5em 2em;
+    background: #000a;
+    backdrop-filter: blur(16px) saturate(120%);
+    transition: .3s;
+    color: #fff;
+    z-index: 2;
+}
+
+.card:hover .details{
+    bottom: 0;
+}
+
+.details h1,
+.details h2{
+    font-weight: 700;
+}
+
+.details h1{
+    font-size: 1.5em;
+    margin-bottom: 5px;
+}
+
+.details h2{
+    font-weight: 400;
+    font-size: 1em;
+    margin-left: 10px;
+    opacity: .6;
+}
+
 @media (max-width: 1000px) {
 	.search-box button {
 		position: absolute;
 	}
-
 	header ul {
 		position: fixed;
 		top: 100px;
@@ -99,6 +173,10 @@ header .menu {
 		transition: right 0.5s linear;
 	}
 
+    .card{
+        width: 250px;
+        height: 375px;
+    }
 	header .menu {
 		display: block;
 		width: 100px;
@@ -121,6 +199,11 @@ header .menu {
 		flex-wrap: wrap;
 		justify-content: center;
 	}
+
+    .card{
+        height: 325px;
+        width: 225px;
+    }
 }
 .navbar-brand {
 	color: #2a2a2a;
@@ -145,3 +228,10 @@ header .menu {
 		font-size: 150%;
 	}
 }
+
+
+/* cards css */
+
+/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap'); */
+
+
diff --git a/components.html b/components.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
         integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
         crossorigin="anonymous" referrerpolicy="no-referrer" />
-        <link rel="stylesheet" href="components.css">
+    <link rel="stylesheet" href="components.css">
 </head>
 
 <body>
@@ -37,6 +37,19 @@
             </div>
         </div>
     </nav>
+
+    <div class="wrapper">
+        <div class="card">
+            <!-- <div class="poster"><a href="#"><img src="images/pexels-bich-tran-2481177.jpg"  style="width: auto;" alt="" /></a></div> -->
+            <div class="card h-100">
+                <img src="images/pexels-bich-tran-2481177.jpg" class="card-img-top" alt="...">
+                <div class="card-body">
+            <div class="details">
+                <h1>Tool Name</h1>
+                <h2>Developer</h2>
+            </div>
+        </div>
+    </div>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
         crossorigin="anonymous"></script>

diff --git a/images/pexels-bich-tran-2481177.jpg b/images/pexels-bich-tran-2481177.jpg