https://github.com/ozzies-code/doublebusinesscard
This project consists of showing two single-sided business cards in which the HOVER effect slightly changes the presentation through the opacity and the social networks and the role of each professional appear with a footer using animation
https://github.com/ozzies-code/doublebusinesscard
Last synced: 2 months ago
JSON representation
This project consists of showing two single-sided business cards in which the HOVER effect slightly changes the presentation through the opacity and the social networks and the role of each professional appear with a footer using animation
- Host: GitHub
- URL: https://github.com/ozzies-code/doublebusinesscard
- Owner: ozzies-code
- Created: 2023-07-22T20:30:36.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-07-22T20:39:31.000Z (almost 2 years ago)
- Last Synced: 2025-01-21T12:13:08.562Z (4 months ago)
- Language: CSS
- Size: 1.32 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# DoubleBusinessCard
This project consists of showing two single-sided business cards in which the HOVER effect slightly changes the presentation through the opacity and the social networks and the role of each professional appear with a footer using animation
HTML:
My Card Profile
John Smith
UI Developer
Jane Doe
UI Designer
CSS:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: "Khand", sans-serif;
background: #000;
}
.container {
max-width: 900px;
display: flex;
justify-content: space-evenly;
margin: 0 auto;
}
.card-wrapper {
width: 400px;
height: 500px;
position: relative;
}
.card {
position: absolute;
top: 50%;
left: 50%;
width: 360px;
height: 480px;
transform: translate(-50%, -50%);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 5px 18px rgba(0, 0, 0, 0.6);
cursor: pointer;
transition: 0.5s;
}
.card .card-image {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 2;
background-color: #000;
transition: 0.5s;
}
.card:hover img {
opacity: 0.4;
transition: 0.5s;
}
.card:hover .card-image {
transform: translateY(-100px);
transition: all 0.9s;
}
/**** Social Icons *****/
.social-icons {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
display: flex;
}
.social-icons li {
list-style: none;
}
.social-icons li a {
position: relative;
display: block;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
background: blue;
font-size: 23px;
color: orange;
border-radius: 30px;
font-weight: bold;
margin: 0 6px;
transition: 0.4s;
transform: translateY(200px);
opacity: 0;
}
.card:hover .social-icons li a {
transform: translateY(0px);
opacity: 1;
}
.social-icons li a:hover {
background: #000;
color: #fff;
transition: 0.2s;
}
.social-icons li a:hover .fab {
color: #fff;
}
.social-icons li a .fab {
transition: 0.8s;
}
.social-icons li a .fab:hover {
transform: rotateY(360deg);
color: #fff;
}
.card:hover li:nth-child(1) a {
transition-delay: 0.1s;
}
.card:hover li:nth-child(2) a {
transition-delay: 0.2s;
}
.card:hover li:nth-child(3) a {
transition-delay: 0.3s;
}
.card:hover li:nth-child(4) a {
transition-delay: 0.4s;
}
/**** Personal Details ****/
.details {
position: absolute;
bottom: 0;
left: 0;
background: blue;
color: #fff;
width: 100%;
height: 120px;
z-index: 1;
padding: 10px;
}
.details h2 {
margin: 30px 0;
padding: 0;
text-align: center;
}
.details h2 .job-title {
font-size: 1rem;
line-height: 2.5rem;
color: #fff;
font-weight: 300;
}
.jane {
position: absolute;
left: 0;
padding: 10px;
transition: 0.4s;
}
.profile-two .social-icons li a {
border-radius: 50%;
}
.card:hover .jane {
bottom: 0;
left: 0;
transition-delay: 0.5s;
opacity: 1;
}