Initial Commit

Initial source files updated
TGAMendis · May 18, 2024 · e3417e4 · e3417e4
1 parent 4efdbaa
commit e3417e4
Show file tree

Hide file tree

Showing 2 changed files with 141 additions and 0 deletions.
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - CSS UI Design Card with Blur Hover Effect</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<head>
+        <title>CSS UI Design</title>
+        <link rel="stylesheet" href="style.css">
+        <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
+    </head>
+    <body>
+        <div class="container">
+
+          <div class="card">
+            <div class="circle">
+              <img src="https://i.ibb.co/PWx1YZ3/dc4d25837981ac475041e295e6474ebf.jpg">
+            </div>
+            <div class="content">
+              <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
+              <a href="">READ MORE</a>
+            </div>
+          </div>
+          <div class="card">
+            <div class="circle">
+              <img src="https://i.ibb.co/vXDFvjz/becc35b59c40a242f0ea9ccd8ff80f60.jpg">
+            </div>
+            <div class="content">
+              <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
+              <a href="">READ MORE</a>
+            </div>
+          </div>
+          <div class="card">
+            <div class="circle">
+              <img src="https://i.ibb.co/rMszFcp/girl2.jpg">
+            </div>
+            <div class="content">
+              <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
+              <a href="">READ MORE</a>
+            </div>
+          </div>
+
+        </div>
+    </body>
+<!-- partial -->
+
+</body>
+</html>
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,89 @@
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+   font-family: poppins, sans-serif;
+}
+body{
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  min-height: 100vh;
+  background: linear-gradient(45deg, #333, #bb02ff);
+  background-attachment: fixed;
+}
+.container{
+  position: relative;
+  width: 1150px;
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+}
+img{
+  width: 100%;
+}
+.container .card{
+  position: relative;
+  width: 300px;
+  height: 420px;
+  border-radius: 10px;
+  box-shadow: 0px 15px 25px rgba(0,0,0,.2);
+  background: #fff;
+  margin: 20px;
+  overflow: hidden;
+  transition: .5s;
+}
+.container:hover .card{
+  filter: blur(20px);
+  transform: scale(0.9);
+  opacity: 0.5;
+}
+.container .card:hover{
+  filter: blur(0);
+  transform: scale(1.1);
+  opacity: 1;
+}
+.container .card .circle{
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  clip-path: circle(180px at center 0);
+
+}
+.container .card .content{
+  position: absolute;
+  bottom: 10px;
+  page-break-after: 20px;
+  padding: 20px;
+  text-align: center;
+}
+.content p{
+  color: #666;
+  text-align: justify;
+  font-size: 15px;
+}
+.content a{
+  position: relative;
+  display: inline-block;
+  background: #000;
+  color: #fff;
+  padding: 10px 20px;
+  border-radius: 40px;
+  text-decoration: none;
+  margin-top: 20px;
+}
+.container .card:nth-child(1) .circle,
+.container .card:nth-child(1) .content a{
+  background: #ffaf00;
+}
+.container .card:nth-child(2) .circle,
+.container .card:nth-child(2) .content a{
+  background: #da2268;
+}
+.container .card:nth-child(3) .circle,
+.container .card:nth-child(3) .content a{
+  background: #bb02ff;
+}