200 lines
3.2 KiB
CSS
200 lines
3.2 KiB
CSS
:root {
|
|
--height: 300px;
|
|
--width: 550px;
|
|
}
|
|
|
|
body {
|
|
font-family: "Roboto";
|
|
|
|
background-image: url("background.svg");
|
|
background-color: black;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: cover;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
padding: 0;
|
|
margin: 0;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
}
|
|
|
|
.card-container {
|
|
width: var(--width);
|
|
height: var(--height);
|
|
perspective: 1000px;
|
|
}
|
|
|
|
.card {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: transform 1s;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.card-container:hover .card, #flip:target {
|
|
transform: rotateX(180deg);
|
|
}
|
|
|
|
.card .front, .card .back {
|
|
background-image: url("noise.png");
|
|
background-repeat: repeat;
|
|
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
backface-visibility: hidden;
|
|
|
|
border-radius: 10px;
|
|
background-color: white;
|
|
}
|
|
|
|
.card .front {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.card .front img {
|
|
border-radius: 50%;
|
|
max-height: 200px;
|
|
}
|
|
|
|
.card .front hr {
|
|
height: calc(var(--height) / 2);
|
|
width: 0px;
|
|
|
|
border-radius: 10px;
|
|
border: 2px dashed lightgray;
|
|
|
|
margin: 0 10px;
|
|
}
|
|
|
|
.card .front .name {
|
|
margin-left: 30px;
|
|
}
|
|
|
|
.card .front .name h1 {
|
|
text-align: left;
|
|
margin: 0 0 10px 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.card .front .name ul {
|
|
padding: 0 0 0 20px;
|
|
margin: 0;
|
|
list-style: square;
|
|
}
|
|
|
|
.card .back {
|
|
transform: rotateX(180deg);
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.card .back ul {
|
|
list-style: none;
|
|
text-align: left;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.card .back ul li {
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.card .back ul li i {
|
|
width: 20px;
|
|
margin-right: 7px;
|
|
text-align: center;
|
|
color: #404040;
|
|
font-size: 0.9em;
|
|
line-height: 1em;
|
|
}
|
|
|
|
.card .back .interests {
|
|
font-size: 1.4em;
|
|
letter-spacing: 0.3em;
|
|
line-height: 1.6em;
|
|
text-align: center;
|
|
}
|
|
|
|
.card .back .interests h2 {
|
|
font-size: 0.7em;
|
|
letter-spacing: 0;
|
|
line-height: 1em;
|
|
text-align: center;
|
|
padding: 0;
|
|
margin: 0;
|
|
margin-bottom: 5px;
|
|
color: #404040;
|
|
}
|
|
|
|
.card .flip-button {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding: 0 20px 10px 0;
|
|
|
|
font-size: 1.5em;
|
|
color: #404040;
|
|
}
|
|
|
|
.mobile-visible {
|
|
visibility: visible;
|
|
}
|
|
|
|
a {
|
|
font-style: normal;
|
|
text-decoration: none;
|
|
color: black;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.requires-js {
|
|
display: none;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.mobile-visible {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 600px) {
|
|
:root {
|
|
--height: 550px;
|
|
--width: 300px;
|
|
}
|
|
.card .front, .card .back {
|
|
flex-direction: column;
|
|
}
|
|
.card-container:hover .card, #flip:target {
|
|
transform: rotateY(180deg);
|
|
}
|
|
.card .back {
|
|
transform: rotateY(180deg);
|
|
}
|
|
.card .front hr {
|
|
width: calc(var(--width) / 2);
|
|
height: 0px;
|
|
|
|
border-radius: 10px;
|
|
border: 2px dashed lightgray;
|
|
|
|
margin: 0 10px;
|
|
}
|
|
.card .front .name {
|
|
margin-top: 30px;
|
|
margin-left: 0;
|
|
}
|
|
}
|