Merge pull request #606 from Manojkumar2806/master

Add Tech Showcase Cards
you-dont-need · Oct 15, 2024 · 174e154 · 174e154
2 parents d0287db + 90bedbd
commit 174e154
Show file tree

Hide file tree

Showing 2 changed files with 189 additions and 0 deletions.
diff --git a/Implement Interactive Tech Showcase Cards/index.html b/Implement Interactive Tech Showcase Cards/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cutting-Edge Technology Showcase</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="container">
+        <div class="card">
+            <div class="card-face card-front">
+                <img src="https://img.freepik.com/premium-photo/robot-with-chart-background_843415-645.jpg?w=2000" alt="AI Neural Network Visualization">
+                <div class="shine"></div>
+            </div>
+            <div class="card-face card-back">
+                <h3>Artificial Intelligence</h3>
+                <p>Explore the fascinating world of AI and machine learning. Discover how neural networks are revolutionizing industries and shaping our future.</p>
+                <button class="btn">Dive into AI</button>
+            </div>
+        </div>
+        <div class="card">
+            <div class="card-face card-front">
+                <img src="https://th.bing.com/th/id/OIP.jthPJtdaLTX097w3Z6NoRAHaE7?w=626&h=417&rs=1&pid=ImgDetMain" alt="Quantum Computer">
+                <div class="shine"></div>
+            </div>
+            <div class="card-face card-back">
+                <h3>Quantum Computing</h3>
+                <p>Unravel the mysteries of quantum computing. Learn how these powerful machines are solving complex problems at unprecedented speeds.</p>
+                <button class="btn">Quantum Leap</button>
+            </div>
+        </div>
+        <div class="card">
+            <div class="card-face card-front">
+                <img src="https://thumbs.dreamstime.com/z/blockchain-visualization-technology-decentralized-distributed-ledger-stores-transactions-blocks-across-network-270162645.jpg" alt="Blockchain Visualization">
+                <div class="shine"></div>
+            </div>
+            <div class="card-face card-back">
+                <h3>Blockchain Technology</h3>
+                <p>Delve into the world of decentralized systems. Discover how blockchain is transforming finance, supply chains, and digital trust.</p>
+                <button class="btn">Explore Blockchain</button>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/Implement Interactive Tech Showcase Cards/style.css b/Implement Interactive Tech Showcase Cards/style.css
@@ -0,0 +1,140 @@
+
+
+body {
+    font-family: 'Arial', sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    margin: 0;
+    background: linear-gradient(45deg, #1a2a6c, #b21f1f, #fdbb2d);
+    background-size: 400% 400%;
+    animation: gradientBG 15s ease infinite;
+}
+
+@keyframes gradientBG {
+    0% {
+        background-position: 0% 50%;
+    }
+
+    50% {
+        background-position: 100% 50%;
+    }
+
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+.container {
+    display: flex;
+    gap: 30px;
+    perspective: 1000px;
+}
+
+.card {
+    width: 250px;
+    height: 350px;
+    position: relative;
+    transform-style: preserve-3d;
+    transition: transform 0.8s;
+}
+
+.card:hover {
+    transform: rotateY(180deg);
+}
+
+.card-face {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    backface-visibility: hidden;
+    border-radius: 15px;
+    overflow: hidden;
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+}
+
+.card-front {
+    background: #f8f8f8;
+}
+
+.card-front img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.5s;
+}
+
+.card:hover .card-front img {
+    transform: scale(1.1) rotate(3deg);
+}
+
+.card-back {
+    background: rgba(255, 255, 255, 0.9);
+    transform: rotateY(180deg);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+    text-align: center;
+}
+
+h3 {
+    margin: 0 0 15px;
+    font-size: 1.5em;
+    color: #333;
+    text-transform: uppercase;
+}
+
+p {
+    margin: 0;
+    font-size: 1em;
+    color: #666;
+    line-height: 1.5;
+}
+
+.shine {
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 50%;
+    height: 100%;
+    background: linear-gradient(to right,
+            rgba(255, 255, 255, 0) 0%,
+            rgba(255, 255, 255, 0.3) 50%,
+            rgba(255, 255, 255, 0) 100%);
+    transform: skewX(-25deg);
+    animation: shine 3s infinite;
+}
+
+@keyframes shine {
+    0% {
+        left: -100%;
+    }
+
+    20% {
+        left: 100%;
+    }
+
+    100% {
+        left: 100%;
+    }
+}
+
+.btn {
+    margin-top: 20px;
+    padding: 10px 20px;
+    background: #3498db;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+
+.btn:hover {
+    background: #2980b9;
+    transform: translateY(-3px);
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+}