Zak Manguet
&__1{ // début card 1 //
width: 19rem;
height: 25rem;
transition: all 0.2s;
position: relative;
cursor: pointer;
&-inner{
width: inherit;
height: inherit;
background: rgba(255,255,255,.05);
box-shadow: 0 0 10px rgba(0,0,0,0.25);
backdrop-filter: blur(10px);
border-radius: 12px;
}
&:hover{
transform: scale(1.04) rotate(1deg);
}
&-circle{
width: 100px;
height: 100px;
background: radial-gradient(#337be6, #5853ef);
border-radius: 50%;
position: absolute;
animation: move-up-1 2s ease-in infinite alternate-reverse;
&--1{
top: -25px;
left: -25px;
}
&--2{
bottom: -25px;
right: -25px;
animation-name: move-down-1;
}
}
}
@keyframes move-up-1 {
to {
transform: translateY(-10px);
}
}
@keyframes move-down-1 {
to {
transform: translateY(10px);
}
} // fin card 1 //
Zak Manguet
&__2{ // début card 2 //
width: 19rem;
height: 25rem;
position: relative;
cursor: pointer;
border-radius: 14px;
z-index: 1111;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 2rem 2rem 6rem #bebebe, -2rem -2rem 6rem white;
&-bg{
position: absolute;
top: 5px;
left: 5px;
width: 18rem;
height: 24rem;
z-index: 2;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(24px);
border-radius: 12px;
overflow: hidden;
outline: 2px solid white;
}
&-blob{
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
width: 15rem;
height: 15rem;
border-radius: 50%;
background-color: #8800ff;
opacity: 1;
filter: blur(12px);
animation: blob-bounce-2 5s infinite ease;
}
@keyframes blob-bounce-2 {
0% {
transform: translate(-100%, -100%) translate3d(0, 0, 0);
}
25% {
transform: translate(-100%, -100%) translate3d(100%, 0, 0);
}
50% {
transform: translate(-100%, -100%) translate3d(100%, 100%, 0);
}
75% {
transform: translate(-100%, -100%) translate3d(0, 100%, 0);
}
100% {
transform: translate(-100%, -100%) translate3d(0, 0, 0);
}
}
} // fin card 2 //
Zak Manguet
&__3{ // début card 3 //
width: 19rem;
height: 25rem;
position: relative;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
&-box{
width: 19rem;
height: 25rem;
border-radius: 12px;
background: linear-gradient(170deg, rgba(58, 56, 56, 0.623) 0%, rgb(31, 31, 31) 100%);
position: relative;
box-shadow: 0 25px 50px rgba(0,0,0,0.55);
transition: all .3s;
&:hover{
transform: scale(0.9);
}
}
&-span{
position: absolute;
overflow: hidden;
width: 15rem;
height: 15rem;
top: -10px;
left: -10px;
display: flex;
align-items: center;
justify-content: center;
&::before{
content: 'Premium';
position: absolute;
width: 150%;
height: 4rem;
background-image: linear-gradient(45deg, #47ff8d 0%, #4dff44 51%, #89ff53 100%);
transform: rotate(-45deg) translateY(-20px);
display: flex;
align-items: center;
justify-content: center;
color: #000000;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
box-shadow: 0 5px 10px rgba(0,0,0,0.23);
}
&::after{
content: '';
position: absolute;
width: 1rem;
height: 1rem;
bottom: 0;
left: 0;
z-index: -1;
box-shadow: 140px -140px #48cc3f;
background-image: linear-gradient(45deg, #47ff8d 0%, #4dff44 51%, #89ff53 100%);
}
}
} // fin card 3 //
Populaire ce mois
Auteur
Nom de l'auteur
Zak Manguet
&__4{ // début card 4 //
width: 19rem;
height: 25rem;
position: relative;
cursor: pointer;
background-color: black;
display: flex;
flex-direction: column;
justify-content: end;
padding: 12px;
gap: 1rem;
border-radius: 12px;
color: white;
&::before{
content: '';
position: absolute;
inset: 0;
left: -5px;
margin: auto;
width: 20rem;
height: 26rem;
border-radius: 12px;
background: linear-gradient(-45deg, #ffd21c 0%, #ff4040 100% );
z-index: -10;
transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
&::after{
content: "";
z-index: -1;
position: absolute;
inset: 0;
background: linear-gradient(-45deg, #ffd21c 0%, #ff4040 100% );
transform: translate3d(0, 0, 0) scale(0.95);
filter: blur(20px);
}
&-heading{
font-size: 2rem;
text-transform: capitalize;
font-weight: 700;
}
&-name{
color: #ffa41c;
font-weight: 600;
}
& p:not(.card__4-heading) {
font-size: 1.6rem;
}
&:hover::after{
filter: blur(30px);
}
&:hover::before{
transform: rotate(-90deg) scaleX(1.34) scaleY(0.77);
}
} // fin card 4 //
Sujet
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat veritatis nobis saepe itaque rerum nostrum aliquid obcaecati odio officia deleniti. Expedita iste et illum, quaerat pariatur consequatur eum nihil itaque!
→
Zak Manguet
&__5{ // début card 5 //
width: 25rem;
height: 25rem;
position: relative;
cursor: pointer;
background-color: #f2f8f9;
border-radius: 12px;
padding: 2rem 1rem;
z-index: 0;
overflow: hidden;
background: linear-gradient(-80deg, #d6e2e8 0%, #c5e0ea 100% );
&::before{
content: '';
position: absolute;
z-index: -1;
top: -1.6rem;
right: -1.6rem;
background: linear-gradient(135deg, #567faa, #476ead);
height: 4rem;
width: 4rem;
border-radius: 3.2rem;
transform: scale(1);
transform-origin: 50% 50%;
transition: transform 0.35s ease-out;
}
&:hover::before{
transform: scale(28);
}
&-title{
color: #262626;
font-size: 2rem;
line-height: normal;
font-weight: 700;
margin-bottom: 0.5em;
}
&-desc{
font-size: 1.6rem;
line-height: 1.5em;
}
&-corner{
display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 3.5rem;
height: 3.5rem;
overflow: hidden;
top: 0;
right: 0;
background: linear-gradient(135deg, #6293c8, #476ead);
border-radius: 0 4px 0 32px;
}
&-arrow{
margin-top: -4px;
margin-right: -4px;
color: white;
}
&:hover .card__5-desc{
transition: all 0.5s ease-out;
color: white;
}
&:hover .card__5-title{
transition: all 0.5s ease-out;
color: white;
}
} // fin card 5 //
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi laboriosam at voluptas minus culpa deserunt delectus sapiente inventore pariatur
Zak Manguet
&__6{ // début card 6 //
width: 25rem;
position: relative;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
line-height: 1.4;
transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
&-content{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2.4rem;
padding: 3.6rem;
border-radius: 12px;
color: white;
overflow: hidden;
background: black;
transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
&::before{
position: absolute;
content: "";
top: -4%;
left: 50%;
width: 90%;
height: 90%;
transform: translate(-50%);
background: #0000006e;
z-index: -1;
transform-origin: bottom;
border-radius: inherit;
transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}
&::after{
position: absolute;
content: "";
top: -8%;
left: 50%;
width: 80%;
height: 80%;
transform: translate(-50%);
background: #0000002c;
z-index: -2;
transform-origin: bottom;
border-radius: inherit;
transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}
}
&-svg{
width: 4rem;
height: 4rem;
}
&-content .card__6-text{
z-index: 1;
opacity: 1;
font-size: 1.6rem;
transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}
&:hover{
transform: translate(0px, -1.6rem);
}
&:hover .card__6-content::before{
rotate: -8deg;
top: 0;
width: 100%;
height: 100%;
}
&:hover .card__6-content::after{
rotate: 8deg;
top: 0;
width: 100%;
height: 100%;
}
} // fin card 6 //
Front
survole
Back
quitter
Zak Manguet
&__7{ // début card 7 //
width: 19rem;
height: 25rem;
position: relative;
cursor: pointer;
background-color: transparent;
perspective: 100rem;
&-title{
font-size: 2rem;
font-weight: 900;
text-align: center;
}
&-inner{
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
&:hover .card__7-inner{
transform: rotateY(180deg);
}
&-front, .card__7-back{
box-shadow: 0 8px 14px 0 rgba(0,0,0,0.2);
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border: 1px solid rgb(144, 80, 255);
border-radius: 1rem;
}
&-front{
background: linear-gradient(180deg, rgba(144,80,255,1) 0%, rgba(127,66,236,1) 50%, rgba(174,138,237,1) 100%);
color: black;
}
&-back{
background: linear-gradient(180deg, rgba(174,138,237,1) 0%, rgba(127,66,236,1) 50%, rgba(144,80,255,1) 100%);
color: black;
transform: rotateY(180deg);
}
} // fin card 7 //
Titre
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
Zak Manguet
&__8{ // début card 8 //
width: 30rem;
height: 19rem;
position: relative;
cursor: pointer;
background-image: url(/img/small-background-cards.jpg);
background-position: center;
background-size: cover;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
&:hover{
transform: rotate(-5deg) scale(1.1);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
& .card__8-content{
transform: translate(-50%, -50%) rotate(0deg);
opacity: 1;
}
}
&-content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
width: 100%;
height: 100%;
padding: 12px;
box-sizing: border-box;
background-color: white;
opacity: 0;
transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}
&-title{
font-size: 2.4rem;
color: black;
font-weight: 700;
}
&-description{
margin: 1rem 0 0 0;
font-size: 1.6rem;
color: black;
line-height: 1.4;
}
} // fin card 8 //