add my mini project

ZeroOctave · Oct 8, 2023 · 58a2d35 · 58a2d35
1 parent b65a4b2
commit 58a2d35
Show file tree

Hide file tree

Showing 2 changed files with 139 additions and 0 deletions.
diff --git a/Public/profileCard/index.html b/Public/profileCard/index.html
@@ -0,0 +1,43 @@
+<!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>Profile Card UI Design</title>
+    <link rel="stylesheet" href="style.css" />
+    <link
+      href="https://unpkg.com/[email protected]/css/boxicons.min.css"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div class="profile-card">
+      <div class="image">
+        <img src="picwish.png" alt="image" class="profile-img" />
+      </div>
+      <div class="text-data">
+        <span class="name">Himanshu Gupta</span>
+        <span class="job">Student</span>
+      </div>
+      <div class="media-buttons">
+        <a href="#" style="background: #000000" class="link">
+          <i class="bx bxl-github bx-tada"></i>
+        </a>
+        <a href="#" style="background: #1da1f2" class="link">
+          <i class="bx bxl-twitter bx-tada"></i>
+        </a>
+        <a href="#" style="background: #e1306c" class="link">
+          <i class="bx bxl-instagram-alt bx-tada"></i>
+        </a>
+        <a href="#" style="background: #0a66c2" class="link">
+          <i class="bx bxl-linkedin-square bx-tada"></i>
+        </a>
+      </div>
+      <div class="buttons">
+        <button class="button">Connect</button>
+        <button class="button">Join</button>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/Public/profileCard/style.css b/Public/profileCard/style.css
@@ -0,0 +1,96 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
+*{
+    font-family: 'Poppins', sans-serif;
+}
+.image{
+  position: relative;
+  height:150px;
+  width:150px;
+  border-radius: 24px;
+  padding: 25px;
+  box-shadow: 0 0 #fff;
+}
+ .image .profile-img{
+position: relative;
+height: 100%;
+width: 100%;
+object-fit: cover;
+border-radius: 50%;
+border: 3px solid #fff;
+}
+body{
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color:#f4f4f4;
+}
+.profile-card{
+  display: flex;
+  flex-direction: column;
+  align-items:center;
+  max-width: 370px;
+  width:100%;
+  background: #fff;
+  border-radius: 24px;
+  padding: 25px;
+  box-shadow: 0 5px 10px rgba(0,1, 0, 1);
+
+}
+.profile-card::before{
+  position:absolute;
+  height:36%;
+  width:100%;
+  background-color: #4070f4;
+
+}
+.profile-card .text-data{
+  display: flex;
+  flex-direction: column;
+  align-items:center;
+}
+.text-data .name{
+  font-size: 17px;
+  font-weight: 500;
+}
+.text-data .job{
+  font-size: 15px;
+  font-weight: 400;
+}
+.profile-card .media-buttons{
+  display: flex;
+  align-items: center;
+  margin-top: 15px;
+
+}
+.media-buttons .link{
+  text-decoration: none;
+  background-color:#4070f4;
+  height: 34px;
+  margin: 0 8px;
+  width: 34px;
+  border-radius: 50%;
+  align-items:center;
+  justify-content: center;
+  color:#fff;
+  font-size: 18px;
+  display: flex;
+}
+.profile-card .buttons{
+  display:flex;
+  align-items: center;
+  margin-top: 25px;
+}
+.buttons .button{
+  margin:0 10px;
+  padding: 8px 24px;
+  background-color: #4070f4;
+  border-radius: 24px;
+  color: #fff;
+  border: none;
+  font-size: 14px;
+  font-weight:400;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}