Web3-Bharat-ITER · biswojitpalai · Oct 31, 2022
diff --git a/ShoppingCard/card.css b/ShoppingCard/card.css
@@ -0,0 +1,107 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
+*{
+    margin: 0;
+    padding:0;
+    font-family: 'poppins',sans-serif;
+}
+
+body{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background: #232526;  /* fallback for old browsers */
+    background: -webkit-linear-gradient(to right, #414345, #232526);  /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to right, #414345, #232526); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+
+}
+.card{
+    position: relative;
+    width: 320px;
+    height: 420px;
+    background: #122936;
+    border-radius: 23px;
+    overflow: hidden;
+}
+.card::before{
+    content:'';
+    position: absolute;
+    top: -50%;
+    width: 100%;
+    height: 100%;
+    background: #d8790d;
+    transform: skewY(340deg);
+    transition: 0.5s;
+}
+.card:hover::before{
+    top: -70%;
+    transform: skewY(498deg);
+}
+.card::after{
+    content: 'Asus';
+position: absolute;
+bottom: 0;
+left: 0;
+font-weight: 600;
+font-size: 8em;
+color:rgba(0,0,0,0.1);
+}
+
+.card .imgbx{
+    position: relative;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-top: 20px;
+    z-index: 1;
+}
+.card .imgbx img{
+    max-width: 100%;
+    transition: 0.5s;
+}
+.card:hover .imgbx img{
+    max-width: 50%;
+
+}
+.card .contentbx{
+    position: relative;
+    padding: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    z-index: 1;
+}
+.card .contentbx h3{
+    font-size: 18px;
+    color: #fff;
+    font-weight: 780;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+.card .contentbx .price{
+    font-size: 24px;
+    color: #fff;
+    font-weight: 700;
+    letter-spacing: 1px;
+}
+
+.card .contentbx .buy{
+    position: relative;
+    top: 200px;
+    opacity: 0;
+    padding: 10px 30px;
+    margin-top: 13px;
+    color: #fff;
+    text-decoration: none;
+    background: #2196f3;
+    border-radius: 30px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    transition: 0.5s;
+}
+.card .contentbx .buy{
+    top: 0;
+    opacity: 1;
+}
diff --git a/ShoppingCard/card.html b/ShoppingCard/card.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset='utf-8'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <title>Shop card</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <link rel='stylesheet' type='text/css' media='screen' href='card.css'>
+
+</head>
+<body>
+    <div class="card">
+        <div class="imgbx">
+            <img src="rog.png"/>
+        </div>
+        <div class="contentbx">
+            <h3>Asus Zephyrus G14</h3>
+            <h2 class="price">$899</h2>
+            <a href="#" class="buy">Buy Now</a>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/ShoppingCard/rog.png b/ShoppingCard/rog.png