Skip to content

Commit

Permalink
1
Browse files Browse the repository at this point in the history
  • Loading branch information
tanmoy-12 committed Mar 28, 2024
1 parent fd6e9c3 commit dd5fc79
Show file tree
Hide file tree
Showing 5 changed files with 11,848 additions and 27 deletions.
124 changes: 124 additions & 0 deletions 1.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card Gallery</title>
<style>

.wrapper {
display: flex;
width: 90%;
justify-content: center;
}

.employeecard {
width: 200px;
height: 280px;
margin: 20px;
border-radius: 15px;
padding: 1.5rem;
background: white;
position: relative;
display: flex;
align-items: flex-end;
transition: 0.4s ease-out;
box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.5);
}

.employeecard:hover {
transform: translateY(20px);
}

.employeecard:before {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
border-radius: 15px;
background: rgba(0, 0, 0, 0.6);
z-index: 2;
transition: 0.5s;
opacity: 0;
}

.employeecard:hover:before {
opacity: 1;
}

.employeecard img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
border-radius: 15px;
}

.employeecard .info {
position: relative;
z-index: 3;
color: white;
opacity: 0;
transform: translateY(30px);
transition: 0.5s;
}

.employeecard:hover .info {
opacity: 1;
transform: translateY(0px);
}

.employeecard .info h1 {
margin: 0px;
}

.employeecard .info p {
letter-spacing: 1px;
font-size: 16px;
font-weight: 700;
margin-top: 8px;
}

.employeecard .info button {
padding: 0.6rem;
outline: none;
border: none;
border-radius: 3px;
background: white;
color: black;
font-weight: bold;
cursor: pointer;
transition: 0.4s ease;
}

.employeecard .info button:hover {
background: dodgerblue;
color: white;
}

</style>
</head>
<body>
<div class="wrapper">
<div class="employeecard">
<img src="R.png" alt="Mountain">
<div class="info">
<h1>Mountain</h1>
<p>Lorem Ipsum is simply dummy text from the printing and typeseting industry</p>
</div>
</div>
<div class="employeecard">
<img src="R.png" alt="Road">
<div class="info">
<h1>Road</h1>
<p>Lorem Ipsum is simply dummy text from the printing and typeseting industry</p>
</div>
</div>
</div>
</body>
</html>
Binary file added R.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit dd5fc79

Please sign in to comment.