Merge pull request Aryamanz29#43 from KartikKode/master

adding styled cards Aryamanz29#30
namanGupta-ar · Oct 7, 2021 · 321a632 · 321a632
2 parents 0c44711 + 44c8ad8
commit 321a632
Show file tree

Hide file tree

Showing 8 changed files with 679 additions and 0 deletions.
diff --git a/Styled Cards/.vscode/settings.json b/Styled Cards/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/Styled Cards/DEMO images/one.png b/Styled Cards/DEMO images/one.png
diff --git a/Styled Cards/DEMO images/three.png b/Styled Cards/DEMO images/three.png
diff --git a/Styled Cards/DEMO images/two.png b/Styled Cards/DEMO images/two.png
diff --git a/Styled Cards/README.md b/Styled Cards/README.md
@@ -0,0 +1,8 @@
+###Description
+It is a styled card using html css and vanilla js 
+Cards Description
+->Cards are visible when you hover over them
+->Card shows tilt movement when you hover over them
+->Cards have a glass effect ehuch looks really cool
+
+###Demo Image are in the DEMO images folder 
diff --git a/Styled Cards/index.html b/Styled Cards/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="card">
+            <div class="content">
+                <h2>01</h2>
+                <h3>Card one</h3>
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae corporis ratione tempora non! Unde blanditiis ex possimus sequi molestias voluptates ad voluptate amet id facere veniam dolorum repudiandae explicabo aperiam, quibusdam saepe magni esse.</p>
+                <a href="#">Read More</a>
+            </div>
+        </div>
+        <div class="card">
+            <div class="content">
+                <h2>02</h2>
+                <h3>Card Two</h3>
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae corporis ratione tempora non! Unde blanditiis ex possimus sequi molestias voluptates ad voluptate amet id facere veniam dolorum repudiandae explicabo aperiam, quibusdam saepe magni esse.</p>
+                <a href="#">Read More</a>
+            </div>
+        </div>
+        <div class="card">
+            <div class="content">
+                <h2>03</h2>
+                <h3>Card Three</h3>
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae corporis ratione tempora non! Unde blanditiis ex possimus sequi molestias voluptates ad voluptate amet id facere veniam dolorum repudiandae explicabo aperiam, quibusdam saepe magni esse.</p>
+                <a href="#">Read More</a>
+            </div>
+        </div>
+    </div>
+
+</body>
+<script type="text/javascript" src="vanilla-tilt.js"></script>
+<script>
+    VanillaTilt.init(document.querySelectorAll(".card"), {
+		max: 25,
+		speed: 400,
+        glare: true,
+        "max-glare": 1,
+	});
+</script>
+</html>
diff --git a/Styled Cards/style.css b/Styled Cards/style.css
@@ -0,0 +1,109 @@
+*{
+    margin: 0;
+    padding: 0;
+    font-family: sans-serif;
+    box-sizing: border-box;
+}
+body{
+    display: flex;
+    justify-content: center;
+    /* align-content: center; */
+    align-items: center;
+    min-height: 100vh;
+    background: #161623;
+}
+body::before
+{
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(#f00,#f0f);
+    clip-path: circle(30% at right 70%);
+}
+body::after
+{
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(#2196f3,#e91e63);
+    clip-path: circle(20% at 10% 10%);
+}
+.container{
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    max-width: 1200px;
+    flex-wrap: wrap;
+    z-index: 1;
+}
+.container .card
+{
+    position: relative;
+    width: 280px;
+    height: 400px;
+    margin: 30px;
+    box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
+    border-radius: 15px;
+    background: rgba(255,255, 255, 0.1) ;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-top: 1px solid rgba(255,255, 255, 0.5) ;
+    border-left: 1px solid rgba(255,255, 255, 0.5) ;
+    backdrop-filter: blur(5px);
+}
+.container .card .content
+{
+    padding: 20px;
+    text-align: center;
+    transform: translateY(100px);
+    opacity: 0;
+    transition: 0.5s; 
+}
+.container .card:hover .content
+{
+    transform: translateY(0px);
+    opacity: 1;
+}
+
+.container .card .content h2
+{
+    position: absolute;
+    top: -80px;
+    right: 30px;
+    font-size: 8em;
+    color: rgba(255,255, 255, 0.05) ;
+}
+.container .card .content h3
+{
+    font-size: 1.5em ;
+    color: #fff;
+    z-index: 1;
+}
+.container .card .content p
+{
+    font-size: 1em;
+    color: #fff;
+    font-weight: 300px;
+}
+.container .card .content a
+{
+    position: relative;
+    display: inline-block;
+    padding: 8px 20px;
+    margin-top: 15px;
+    background: #fff;
+    color: #000;
+    border-radius: 20px;
+    text-decoration: none;
+    font-weight: 500;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+}