DiyaVj · devmohan20 · Oct 13, 2022 · Oct 13, 2022 · Oct 13, 2022 · Oct 13, 2022
diff --git a/Code/madhanmohan/index.html b/Code/madhanmohan/index.html
@@ -0,0 +1,42 @@
+<!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>Madhan's Profile Card</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
+</head>
+<body>
+    <section class="main-content">
+        <div class="container">
+            <div class="row">
+                <div class="col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-4 offset-lg-4">
+                    <div class="profile-card card rounded-lg shadow p-4 p-xl-5 mb-4 text-center position-relative overflow-hidden">
+                        <div class="banner"></div>
+                        <img src="profile.jpg" alt="profile picture" class="img-circle mx-auto mb-3">
+                        <h3 class="mb-4">Madhan Mohan</h3>
+                        <h4 class="mb-4">Computer Science Student</h4>
+                        <div class="text-left mb-4">
+                            <p class="mb-2"><i class="fa fa-envelope mr-2"></i> madhanmohannandyala20@gmail.com</p>
+                            <p class="mb-2"><i class="fa fa-phone mr-2"></i>+91 9392313804</p>
+                            <p class="mb-2"><i class="fa fa-map-marker-alt mr-2"></i> Tirupati</p>
+                        </div>
+                        <div class="social-links d-flex justify-content-center">
+                            <a href="https://www.linkedin.com/in/madhan-mohan-nandyala-bb4632247/" class="mx-2">
+                                <img class="linkedin" src="social/icons8-linkedin-circled.svg" alt="Linkedin">
+                            </a>
+                            <a href="https://github.com/devmohan20" class="mx-2">
+                                <img class="github" src="social/icons8-github.svg" alt="Github">
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </section>
+</body>
+</html>
diff --git a/Code/madhanmohan/profile.jpg b/Code/madhanmohan/profile.jpg
diff --git a/Code/madhanmohan/social/banner.jpg b/Code/madhanmohan/social/banner.jpg
diff --git a/Code/madhanmohan/social/icons8-github.svg b/Code/madhanmohan/social/icons8-github.svg
diff --git a/Code/madhanmohan/social/icons8-linkedin-circled.svg b/Code/madhanmohan/social/icons8-linkedin-circled.svg
diff --git a/Code/madhanmohan/style.css b/Code/madhanmohan/style.css
@@ -0,0 +1,35 @@
+.shadow{
+    box-shadow: 0 5px 20px rgba(0,0,0,0.06);
+}
+.main-content{
+    padding-top: 100px;
+}
+.banner{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 140px;
+    background-image:url('social/banner.jpg');
+    background-position: center;
+    background-size: cover;
+}
+.img-circle{
+    height: 150px;
+    width: 150px;
+    border-radius: 150px;
+    border: 3px solid #fff;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    z-index: 1;
+}
+.profile-card h4{
+    color: #7f00ff;
+    opacity: .6;
+    font-weight: bold;
+}
+.github{
+    height:55px;
+}
+.linkedin{
+    height:50px;
+}