Initial Commit

PRINCERAHUL1 · Feb 13, 2024 · 0d262b3 · 0d262b3
1 parent 6d08d76
commit 0d262b3
Show file tree

Hide file tree

Showing 4 changed files with 185 additions and 0 deletions.
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<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>Responsibe Profile Card</title>
+
+    <link rel="stylesheet" href="style.css" />
+    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
+</head>
+<body>
+    <div class="profile-card">
+        <div class="image">
+            <img src="Profile.jpg" alt="" class="profile-jpg">
+        </div>
+
+        <div class="text-data">
+            <span class="name">Rahul Mandal</span>
+            <span class="job">CSE Student</span>
+        </div>
+
+        <div class="media-button">
+            <a href="" style="background: #4267b2" class="link">
+            <i class='bx bxl-facebook'></i>
+            </a>
+
+            <a href="" style="background: #e1306c" class="link">
+            <i class='bx bxl-instagram' ></i>
+            </a>
+            <a href="" style="background: #0088cc" class="link">
+            <i class='bx bxl-telegram' ></i>
+            </a>
+            <a href="" style="background: #1da1f2" class="link">
+            <i class='bx bxl-twitter' ></i>
+            </a>
+        </div>
+
+        <div class="buttons">
+            <button class="button">Follow</button>
+            <button class="button">Message</button>
+        </div>
+
+        <div class="analytics">
+            <div class="data">
+                <i class='bx bx-heart'></i>
+                <span class="number">60k</span>
+            </div>
+            <div class="data">
+                <i class='bx bx-message-rounded'></i>
+                <span class="number">20k</span>
+            </div>
+            <div class="data">
+                <i class='bx bx-share'></i>
+                <span class="number">35k</span>
+            </div>
+       </div>
+    </div>
+</body>
+</html>
diff --git a/profile.jpg b/profile.jpg
diff --git a/style.css b/style.css
@@ -0,0 +1,126 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+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-color: #fff;
+    border-radius: 24px;
+    padding: 25px;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
+    position: relative;
+}
+.profile-card::before{
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 36%;
+    width: 100%;
+    border-radius: 24px 24px 0 0;
+    background-color: #4070f4;
+}
+.image{
+    position: relative;
+    height: 150px;
+    width: 150px;
+    border-radius: 50%;
+    background-color: #4070f4;
+    padding: 3px;
+    margin-bottom: 10px;
+
+}
+.image .profile-jpg{
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+    border-radius: 50%;
+    border: 3px solid #fff;
+}
+.profile-card .text-data{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: #333;
+}
+.text-data .name{
+    font-size: 22px;
+    font-weight: 500;
+}
+.text-data .job{
+    font-size: 15px;
+    font-weight: 400;
+}
+.profile-card .media-button{
+    display: flex;
+    align-items: center;
+    margin-top: 15px;
+}
+.profile-card .link{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-size: 18px;
+    height: 34px;
+    width: 34px;
+    border-radius: 50%;
+    margin: 0 8px;
+    background-color: #4070f4;
+    text-decoration: none;
+
+}
+.profile-card .buttons{
+    display: flex;
+    align-items: center;
+    margin-top: 25px;
+}
+.buttons .button{
+    color: #fff;
+    font-size: 14px;
+    font-weight: 400;
+    border: none;
+    border-radius: 24px;
+    margin: 0 10px;
+    padding: 8px 24px;
+    background-color: #4070f4;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+.buttons .button:hover{
+    background-color: #0e4bf1;
+}
+.profile-card .analytics{
+    display: flex;
+    align-items: center;
+    margin-top: 25px;
+}
+.analytics .data{
+    display: flex;
+    align-items: center;
+    color: #333;
+    padding: 0 20px;
+    border-right: 2px solid #e7e7e7;
+}
+.data i{
+    font-size: 18px;
+    margin-right: 6px;
+}
+.data:last-child{
+    border-right: none;
+}