Add files via upload

hpcreator · Jun 16, 2024 · a7c5267 · a7c5267
1 parent 3b7311b
commit a7c5267
Show file tree

Hide file tree

Showing 6 changed files with 338 additions and 0 deletions.
diff --git a/assets/1.jpg b/assets/1.jpg
diff --git a/assets/ganesh.png b/assets/ganesh.png
diff --git a/assets/rose-background.jpg b/assets/rose-background.jpg
diff --git a/harshBio.html b/harshBio.html
@@ -0,0 +1,59 @@
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Marriage Biodata</title>
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Roboto+Mono:wght@700&display=swap" rel="stylesheet">
+    <link href="./style.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="header">
+      <img src="./assets/ganesh.png" alt="Header Image">
+    </div>
+    <div class="card-container">
+      <div class="card" id="flipCard">
+        <div class="card-front">
+          <h5 class="font-weight-bold">Biodata</h5>
+          <img class="pop-img" src="./assets/1.jpg" alt="Profile Picture">
+          <div class="details">
+            <h4 class="font-weight-bold">Harsh Patel</h4>
+            <h5>Software Engineer</h5>
+          </div>
+        </div>
+        <div class="card-back">
+            <h5 class="text-center font-weight-bold w-100 mb-3">My Details</h5>
+            <div class=" overflow-auto">
+              <dl class="detail-list" id="detail-list"></dl>
+              <hr class="mt-5">
+              <h5 class="m-0 font-weight-bold w-100 text-center">Images</h5>
+              <div id="all-images"></div>
+            </div>
+        </div>
+      </div>
+    </div>
+    <div class="hint-footer cursor-pointer text-center" id="clickToFlap">
+      <h5 class="m-0 pb-3 font-weight-bold buttonFlipCard">Click to flip</h5>
+    </div>
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+    <script type="text/javascript" src="./main.js"></script>
+  </body>
+
+
+  <!-- Creates the bootstrap modal where the image will appear -->
+  <div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+    <div class="modal-dialog h-100 d-flex justify-conent-center align-items-center">
+      <div class="modal-content">              
+        <div class="modal-body pt-0 pb-4 px-3">
+          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+          <img src="" class="imagepreview" style="width: 100%;" >
+        </div>
+      </div>
+    </div>
+  </div>
+</html>
+
diff --git a/main.js b/main.js
@@ -0,0 +1,138 @@
+/**This function is used for flip the card */
+document.getElementById('clickToFlap').addEventListener('click', function() {
+  document.getElementById('flipCard').classList.toggle('flip');
+});
+
+//this function is used for making the details html
+$(function() {
+    var detailsWrapper = document.getElementById("detail-list"); // get the details html div
+
+    var myDetailHTML = ''; //variable that hold my details html
+
+    //variable that contains my details
+    var myData = [
+        {
+            key : "Name",
+            value : "Harsh Joginbhai Patel",
+        },
+        {
+            key : "Date of birth",
+            value : "31/May/1998",
+        },
+        {  
+            key : "Time of birth",
+            value : "11:15 AM",
+        },
+        {  
+            key : "Place of birth",
+            value : "Khambhat, Gujarat",
+        },
+        {  
+            key : "Complexion",
+            value : "Fair",
+        },
+        {  
+            key : "Weight",
+            value : "68 kg",
+        },
+        {  
+            key : "Height",
+            value : `5' 8"`,
+        },
+        {  
+            key : "Cast",
+            value : "Kadva Patel",
+        },
+        {  
+            key : "Sub Cast",
+            value : "42 Gam  Kadva Patel",
+        },
+        {
+            key : "Education",
+            value : "IT Engineer",
+        },
+        {  
+            key : "Profession",
+            value : "Android Developer at Openxcell Technolabs",
+        },
+        {  
+            key : "Father's Name",
+            value : "Joginbhai Vadilal Patel",
+        },
+        {  
+            key : "His Profession",
+            value : "Social Worker",
+        },
+        {  
+            key : "Mother's Name",
+            value : "Urmilaben Joginbhai Patel",
+        },
+        {  
+            key : "Her Profession",
+            value : "House Maker",
+        },
+        {  
+            key : "Brother",
+            value : "Meet Patel",
+        },
+        {  
+            key : "His Profession",
+            value : "Mechanical Engineer",
+        },
+        {                  
+            key : "Native",
+            value : "Kapadwanj",
+        },
+        {  
+            key : "Mosal",
+            value : "Finav, Khambhat",
+        },
+        {  
+            key : "Address",
+            value : "1328, Mota Patelwada, beside Swaminarayan Temple, Kapadwanj, Kheda-387620",
+        },
+        {  
+            key : "Food Habbit",
+            value : "Veg",
+        }
+    ]
+
+    for (var i = 0; i < myData.length; i++) { //generating my details html by using loop
+        myDetailHTML += `<dt class="font-weight-bold">${myData[i].key} </dt> <dd class="m-0">${myData[i].value}</dd>`;
+    }
+
+    detailsWrapper.innerHTML = myDetailHTML //adding the dynamic html as inner HTML of my details div
+
+});
+
+//this function is used for showing my all photos
+$(function() {
+    var imagesWrapper = document.getElementById("all-images"); //this is holding the parent container where my all photo's html will be inserted 
+
+    //this is the variable that hold my image name and my all images exist in assets folder
+    var myImageName = [
+        '1.jpg',
+        '1.jpg',
+        '1.jpg',
+        '1.jpg',
+        '1.jpg',
+        '1.jpg',
+    ]
+
+    var myImageHTML = '';  //variable that hold the html of my all photos
+
+    for (var i = 0; i < myImageName.length; i++) {//generating html by of my all photos by using loop
+        myImageHTML += `<div class="card-back-img"><img class="pop-img" src="./assets/${myImageName[i]}" alt="Profile Picture"></div>`;
+    }
+
+    imagesWrapper.innerHTML = myImageHTML  //adding the dynamic html of my all photos as inner HTML of parent div
+});
+
+
+//this function is used for open the image into popup
+$(function() {
+    $('.pop-img').on('click', function() {
+        $('.imagepreview').attr('src', $(this).attr('src'));
+        $('#imagemodal').modal('show');   
+    });		
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,141 @@
+body {
+    /* background-color: #f8f9fa; */
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    margin-top: 2%;
+    gap: 5%;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    padding: 0;
+    font-family: 'Roboto', sans-serif;
+
+    /* background-image:url('./assets/rose-background.jpg');
+    background-attachment:fixed;
+    background-repeat: no-repeat;
+    background-size: cover; */
+
+    background: linear-gradient(0deg, #868ee9c9 0%, #ffffff00 100%), no-repeat center / cover;
+
+}
+
+.header {
+    width: 80px;
+    height: auto;
+    margin-top: 10px;
+    position: relative;
+}
+
+.header img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 50%;
+}
+
+.card-container {
+    width: 95%;
+    max-width: 600px;
+    height: 75%;
+    perspective: 1000px;
+    margin-top: -20px;
+}
+
+.card {
+    width: 100%;
+    height: 100%;
+    border-radius: 20px;
+    transition: transform 0.6s;
+    transform-style: preserve-3d;
+    position: relative;
+}
+
+.card.flip {
+    transform: rotateY(180deg);
+}
+
+.card-front,
+.card-back {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    border-radius: 20px;
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+.card-front {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.card-front img {
+    border-radius: 20px;
+    width: 100%;
+    height: 75%;
+    object-fit: cover;
+    cursor: pointer;
+}
+
+.card-front .details {
+    text-align: center;
+    padding: 20px 0;
+}
+
+.card-back {
+    color: #333;
+    transform: rotateY(180deg);
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.card-back-img img {
+    border-radius: 20px;
+    width: 100%;
+    height: 75%;
+    object-fit: cover;
+    padding: 10px 0px;
+    cursor: pointer;
+}
+
+.detail-list {
+    display: grid;
+    grid-template-columns: max-content auto;
+    grid-gap: 8px;
+}
+
+hr{
+    border-width: 5px;
+}
+
+.cursor-pointer{
+    cursor: pointer;
+}
+
+.buttonFlipCard{
+    color: darkslategray;
+    mask-image: linear-gradient(-75deg, rgba(0, 0, 0, 0.6) 30%, #000 50%, rgba(0, 0, 0, 0.6) 70%);
+    mask-size: 200%;
+    animation: shine 2s infinite;
+}
+
+/* Optional: Remove vendor prefixes if browser compatibility is not a major concern */
+@keyframes shine {
+    from {
+        mask-position: 150%;
+    }
+
+    to {
+        mask-position: -50%;
+    }
+}