Merge pull request #46 from ShiveshNandan/main

created new UI card
ssitvit · Oct 16, 2022 · 742cf4f · 742cf4f
2 parents ff43fd5 + c5f156a
commit 742cf4f
Show file tree

Hide file tree

Showing 2 changed files with 167 additions and 0 deletions.
diff --git a/New_UI_Card/Index.html b/New_UI_Card/Index.html
@@ -0,0 +1,21 @@
+<!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="index.css">
+</head>
+<body>
+    <div class="card">
+        <div class="content">
+          <h2 class="title">Tittle for the background</h2>
+          <p class="copy">
+            short note about background or anything we want to add. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut, officiis cumque odit deleniti tenetur possimus, eligendi praesentium veniam dolor assumenda deserunt!
+          </p>
+          <button class="btn">More Info</button>
+        </div>
+      </div>
+</body>
+</html>
diff --git a/New_UI_Card/index.css b/New_UI_Card/index.css
@@ -0,0 +1,146 @@
+
+:root {
+    --d: 700ms;
+    --e: cubic-bezier(0.19, 1, 0.22, 1);
+ }
+  .page-content {
+    display: flex;
+    flex-wrap: wrap;
+    grid-gap: 1.3vw;
+    padding: 1vw;
+    justify-content: left;
+    /* width: 100vw; */
+    max-width: 1024px;
+    margin: 0 auto;
+ }
+  @media (min-width: 600px) {
+    .page-content {
+      grid-template-columns: repeat(2, 1fr);
+   }
+ }
+  @media (min-width: 800px) {
+    .page-content {
+      grid-template-columns: repeat(4, 1fr);
+   }
+ }
+  .card {
+    position: relative;
+    display: flex;
+    align-items: flex-end;
+    overflow: hidden;
+    padding: 1vw;
+    margin-bottom: 1vw;
+    width: 18vw;
+    height: 25vw !important;
+    border-radius: 1vw;
+    text-align: center;
+    color: whitesmoke;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1);
+ }
+  @media (min-width: 600px) {
+    .card {
+      height: 350px;
+   }
+ }
+  .card:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 110%;
+    background-size: cover;
+    background-position: 0 0;
+    transition: transform calc(var(--d) * 1.5) var(--e);
+    pointer-events: none;
+ }
+  .card:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 200%;
+    pointer-events: none;
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.009) 11.7%, rgba(0, 0, 0, 0.034) 22.1%, rgba(0, 0, 0, 0.072) 31.2%, rgba(0, 0, 0, 0.123) 39.4%, rgba(0, 0, 0, 0.182) 46.6%, rgba(0, 0, 0, 0.249) 53.1%, rgba(0, 0, 0, 0.320) 58.9%, rgba(0, 0, 0, 0.394) 64.3%, rgba(0, 0, 0, 0.468) 69.3%, rgba(0, 0, 0, 0.540) 74.1%, rgba(0, 0, 0, 0.607) 78.8%, rgba(0, 0, 0, 0.668) 83.6%, rgba(0, 0, 0, 0.721) 88.7%, rgba(0, 0, 0, 0.762) 94.1%, rgba(0, 0, 0, 0.790) 100%);
+    transform: translateY(-50%);
+    transition: transform calc(var(--d) * 2) var(--e);
+ }
+  .card:before {
+    background-image: url(https://image.winudf.com/v2/image1/Y29tLmZyZXNoZW52aXJvbm1lbnQuY29vbHdhbGxwYXBlcnNoZF9zY3JlZW5fMF8xNTk4OTcwMDU3XzA3MQ/screen-0.jpg?fakeurl=1&type=.webp);
+ }
+  .content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    padding: 1vw;
+    transition: transform var(--d) var(--e);
+    z-index: 1;
+ }
+
+  .title {
+    font-size: 1.3vw;
+    font-weight: bold;
+    line-height: 1.2;
+ }
+  .copy {
+    font-size: 1.125vw;
+    font-style: italic;
+    line-height: 1.35;
+    color: #fcfffa;
+ }
+  .btn {
+    cursor: pointer;
+    margin-top: 1.5vw;
+    padding: 0.75vw 1.5vw;
+    font-size: 0.65vw;
+    font-weight: bold;
+    letter-spacing: 0.025vw;
+    text-transform: uppercase;
+    color: white;
+    background-color: black;
+    border: none;
+ }
+  .btn:hover {
+    background-color: #0d0d0d;
+ }
+
+  @media (hover: hover) and (min-width: 600px) {
+    .card:after {
+      transform: translateY(0);
+   }
+    .content {
+      transform: translateY(calc(100% - 4.5rem));
+   }
+    .content > *:not(.title) {
+      opacity: 0;
+      transform: translateY(1rem);
+      transition: transform var(--d) var(--e), opacity var(--d) var(--e);
+   }
+    .card:hover, .card:focus-within {
+      align-items: center;
+   }
+    .card:hover:before, .card:focus-within:before {
+      transform: translateY(-4%);
+      filter: blur(8px);
+      transition: all 0.7s;
+   }
+    .card:hover:after, .card:focus-within:after {
+      transform: translateY(-50%);
+   }
+    .card:hover .content, .card:focus-within .content {
+      transform: translateY(0);
+   }
+    .card:hover .content > *:not(.title), .card:focus-within .content > *:not(.title) {
+      opacity: 1;
+      transform: translateY(0);
+      transition-delay: calc(var(--d) / 8);
+   }
+    .card:focus-within:before, .card:focus-within:after, .card:focus-within .content, .card:focus-within .content > *:not(.title) {
+      transition-duration: 0s;
+   }
+ }
+