Skip to content

Commit

Permalink
Update HarshPatel.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@rajatgupta-dev
rajatgupta-dev authored Jun 16, 2024
1 parent a7c5267 commit 4d305be
Showing 1 changed file with 48 additions and 246 deletions.
294 changes: 48 additions & 246 deletions HarshPatel.html
View file
Original file line number Diff line number Diff line change
@@ -1,256 +1,58 @@

<!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">
<style>
body {
background-color: #f8f9fa;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
.header {
width: 80px;
height: 80px;
margin-bottom: 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;
cursor: pointer;
}
.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 {
background: #fff;
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: 80%;
object-fit: cover;
}
.card-front .details {
text-align: center;
padding: 10px 0;
}
.card-front .details h1 {
font-family: 'Roboto Mono', monospace;
}
.card-front .details h4 {
font-family: 'Roboto', sans-serif;
}
.card-back {
background: #FFFFFF;
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);
overflow-y: auto;
}
.detail-list {
display: grid;
grid-template-columns: max-content auto;
grid-gap: 10px;
}

dt {
font-weight: bold;
}
dd {
margin: 0;
}
.card-back .detail-row {
display: flex;
width: 100%;
margin-bottom: 10px;
}
.card-back .key {
width: 40%;
color: lightgray;
font-family: 'Roboto Mono', monospace;
}
.card-back .value {
width: 60%;
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
.hint-footer {
width: 100%;
text-align: center;
position: absolute;
bottom: 10px;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
.hint-icon {
font-size: 24px;
color: #007bff;
}
.detail-wrapper {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.detail-row {
display: grid;
grid-template-columns: max-content auto;
grid-gap: 10px;
align-items: center;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="header">
<img src="ganesh.png" alt="Header Image">
</div>
<div class="card-container">
<div class="card" id="flipCard">
<div class="card-front">
<img src="1.jpg" alt="Profile Picture">
<div class="details">
<h1>Harsh Patel</h1>
<h4>Education: Software Engineer</h4>
<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 class="card-back">
<dl class="detail-list">
<dt>Name : </dt>
<dd>Harsh Joginbhai Patel</dd>
</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>

<dt>Date of birth : </dt>
<dd>31/May/1998</dd>

<dt>Time of birth : </dt>
<dd>11:15 AM</dd>

<dt>Place of birth : </dt>
<dd>Khambhat, Gujarat</dd>

<dt>Complexion : </dt>
<dd>Fair</dd>

<dt>Weight : </dt>
<dd>68 kg</dd>

<dt>Height : </dt>
<dd>5' 8"</dd>

<dt>Cast : </dt>
<dd>Kadva Patel</dd>

<dt>Sub Cast : </dt>
<dd>42 Gam Kadva Patel</dd>

<dt>Education : </dt>
<dd>IT Engineer</dd>

<dt>Profession : </dt>
<dd>Android Developer at Openxcell Technolabs</dd>

<dt>Father's Name : </dt>
<dd>Joginbhai Vadilal Patel</dd>

<dt>His Profession : </dt>
<dd>Social Worker</dd>

<dt>Mother's Name : </dt>
<dd>Urmilaben Joginbhai Patel</dd>

<dt>Her Profession : </dt>
<dd>House Maker</dd>

<dt>Brother : </dt>
<dd>Meet Patel</dd>

<dt>His Profession : </dt>
<dd>Mechanical Engineer</dd>

<dt>Native : </dt>
<dd>Kapadwanj</dd>

<dt>Mosal : </dt>
<dd>Finav, Khambhat</dd>

<dt>Address : </dt>
<dd>1328, Mota Patelwada, beside Swaminarayan Temple, Kapadwanj, Kheda-387620</dd>

<dt>Food Habbit : </dt>
<dd>Veg</dd>

</dl>
<!-- 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>
<div class="hint-footer">
<p>Tap to flip</p>
</div>
<script>
document.getElementById('flipCard').addEventListener('click', function() {
this.classList.toggle('flip');
});
</script>
<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>
</body>
</html>

0 comments on commit 4d305be

Please sign in to comment.