111 lines
1.9 KiB
CSS
111 lines
1.9 KiB
CSS
:root {
|
|
--grey: hsla(0, 0, 217, 100);
|
|
--nfl-blue: #013369;
|
|
--nfl-red: #d50a0a;
|
|
--nfl-white: #ffffff;
|
|
}
|
|
|
|
html {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0.5rem;
|
|
|
|
display: grid;
|
|
grid-auto-flow: row;
|
|
grid-template-columns: calc(100% - (0.5rem));
|
|
grid-template-rows: 4rem calc(100% - 4rem - 0.5rem);
|
|
gap: 0.5rem;
|
|
|
|
background-color: var(--nfl-white);
|
|
}
|
|
|
|
header {
|
|
background-color: var(--nfl-blue);
|
|
padding: 0 1rem;
|
|
border-radius: 1rem;
|
|
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
|
|
color: var(--nfl-white);
|
|
font-weight: bold;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
header img{
|
|
height: 90%;
|
|
}
|
|
|
|
main {
|
|
background-color: var(--nfl-blue);
|
|
border-radius: 1rem;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.flip-card__container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
|
|
padding: 1rem;
|
|
}
|
|
|
|
|
|
.flip-card__card {
|
|
background-color: transparent;
|
|
/*width: 300px;*/
|
|
height: 300px;
|
|
aspect-ratio: 5.71 / 8.89;
|
|
perspective: 1000px;
|
|
}
|
|
|
|
.flip-card__inner {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
transition: transform 0.6s;
|
|
transform-style: preserve-3d;
|
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.flip-card__card:hover .flip-card__inner {
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
.flip-card__front,
|
|
.flip-card__back {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
border: 3px solid white;
|
|
}
|
|
|
|
.flip-card__image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.flip-card__front {
|
|
background-color: #bbb;
|
|
color: black;
|
|
}
|
|
|
|
.flip-card__back {
|
|
background-color: #2980b9;
|
|
color: white;
|
|
transform: rotateY(180deg);
|
|
} |