Merge pull request #177 from Santanujana2001/sanu

Sulagna-Dutta-Roy · web-flow · commit 6e83bae5964e · 2022-10-17T01:09:52.000+05:30
Student BioData Card With CSS
diff --git a/HTML+CSS/Student_biodata_card/1.jpg b/HTML+CSS/Student_biodata_card/1.jpg
diff --git a/HTML+CSS/Student_biodata_card/index.html b/HTML+CSS/Student_biodata_card/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Student Details</title>
+</head>
+
+<body>
+    <div class="box">
+        <img src="1.jpg" alt="" class="box-img">
+        <ul class="one">
+            <li>NAME : Annie Marie</li>
+            <li>FATHER'S NAME : Chris Marie</li>
+            <li>MOTHER'S NAME : Brayn Marie</li>
+            <li>DATE OF BIRTH : 02/11/1990</li>
+            <li>GENDER : Female</li>
+            <li>NATIONALITY : American</li>
+            <li>GRADUATION YEAR : 2012</li>
+            <li>RELIGION : Christian</li>
+            <li>QUALIFICATION : B.Tech (Computer Science)</li>
+            <li>EMAIL : annie455afk@gmail.com</li>
+            <li>PHONE NO. : +1-2217281029</li>
+            <li>ADDRESS : Washington , D.C. ,USA</li>
+            <li>ADDRESS : Washington , D.C. ,USA</li>
+        </ul>
+    </div>
+</body>
+
+</html>
diff --git a/HTML+CSS/Student_biodata_card/style.css b/HTML+CSS/Student_biodata_card/style.css
@@ -0,0 +1,65 @@
+@import url('https://fonts.googleapis.com/css2?family=Carter+One&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    height: 100%;
+    width: 100%;
+    background: linear-gradient(45deg, #0f0d23 83%, #82016f 100%);
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.box {
+    width: 700px;
+    background-image: linear-gradient(to right, #fc466a, #1f44ff);
+    border-radius: 15px;
+    padding: 40px;
+    text-align: center;
+    margin: auto;
+    margin-top: 5%;
+    margin-bottom: 5%;
+    font-family: 'Cormorant SC', serif;
+}
+
+.box-img {
+    border-radius: 50%;
+    width: 150px;
+    height: 200px;
+    border: 2.2px solid white;
+}
+
+.one {
+    list-style: none;
+    padding: 20px;
+    margin-top: 15px;
+    border-radius: 15px;
+    background-image: linear-gradient(to right, #fc5c7d, #6a82fb);
+}
+
+.box li {
+    font-size: 25px;
+    padding: 10px;
+}
+@media screen and (max-width:768px) {
+    .box{
+        width: 250px;;
+        padding: 20px;
+    }
+    .box li{
+        font-size: 20px;
+        padding: 8px;
+        color: black;
+    }
+    .box-img{
+        height:150px;
+        width: 120px;
+    }
+    .one{
+        padding:0;
+       width:100%;
+    }
+}
