https://github.com/ozzies-code/businesscard.
This project was made using HTML5.0 and CSS3.0. This project consists of a two-sided business card. The developer is shown on the front and the developer's name and a small interaction with each of the social networks is shown on the back.
https://github.com/ozzies-code/businesscard.
Last synced: over 1 year ago
JSON representation
This project was made using HTML5.0 and CSS3.0. This project consists of a two-sided business card. The developer is shown on the front and the developer's name and a small interaction with each of the social networks is shown on the back.
- Host: GitHub
- URL: https://github.com/ozzies-code/businesscard.
- Owner: ozzies-code
- Created: 2023-07-22T19:41:56.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-07-22T19:51:15.000Z (almost 3 years ago)
- Last Synced: 2025-01-21T12:13:09.331Z (over 1 year ago)
- Language: CSS
- Size: 305 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Businesscard.
This project was made using HTML5.0 and CSS3.0. This project consists of a two-sided business card. The developer is shown on the front and the developer's name and a small interaction with each of the social networks is shown on the back.
HTML:
Mi Tarjeta de Presentación
Oswaldo Jesús Marín Pagés
Web Dev
CSS:
@import "https://fonts.googleapis.com/css?family=Josefin+Sans:400,700";
body {
margin: 0;
padding: 0;
font-family: "Josefin Sans", sans-serif;
background-color: #000;
color: #fff;
}
body a {
color: orange;
text-decoration: none;
}
.card {
position: absolute;
top: 50%;
left: 50%;
height: 400px;
width: 300px;
transform: translate(-50%, -50%);
transform-style: preserve-3d;
perspective: 600px;
transition: 0.5s;
}
.card:hover .card-front {
transform: rotateX(-180deg);
}
.card:hover .card-back {
transform: rotateX(0deg);
}
.card-front {
height: 100%;
width: 100%;
background-image: url(img/A7Rm2gSV_400x400.jpg);
background-position: 50% 50%;
background-size: cover;
position: absolute;
top: 0;
left: 0;
background-color: blue;
backface-visibility: hidden;
transform: rotateX(0deg);
transition: 0.5s;
}
.card-back {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: darkblue;
backface-visibility: hidden;
transform: rotateX(180deg);
transition: 0.5s;
color: #ffffff;
text-align: center;
}
.card-back h2 {
margin: 60% auto 35% auto;
font-size: 26px;
}
.card-back h2 span {
font-size: 20px;
}
.card-back a {
height: 20px;
width: 20px;
padding: 5px 5px;
border-radius: 4px;
line-height: 20px;
}
.card-back a:hover {
color: blue;
background-color: #000;
}