Scribd
Upload
18 views3 pages

Css Aula

Uploaded by

kawanybandeiradasilva
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
18 views3 pages

Css Aula

Uploaded by

kawanybandeiradasilva
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

* {

margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(45deg,#ffaf00,#bb02ff);
}
.container {
position: relative;
width: 1150px;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.container .card {
position: relative;
width: 300px;
height: 420px;
background-color: #fff;
margin: 20px;
overflow: hidden;
transition: .5s ease-in-out;
}

.container:hower .card {
filter: blur(20px);
transform: scale(.9);
opacity: .5;
}

.container .card.container:hower {
filter: blur(0);
transform: scale(1);
opacity: 1;
}

.container .card:hover .circle {


clip-path: circle(600px);
}

.container .card:hover .content p {


color: #fff;
}

.container .card:hover .content a {


box-shadow: 1px 1px 2px rgba(0, 0, 0, .2),
-1px -1px 2px rgba(255,255,255, .4);
}

.container .card .content a:active {


box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .1),
inset 5px 5px 5px rgba(0, 0, 0, .04),
inset -5px -5px 5px rgba(255,255,255, .07),
inset -1px -1px 2px rgba(255,255,255, .4);
}

.container .card .circle {


position: relative;
width: 100%;
height: 100%;
background: #000;
clip-path: circle(180px at center 0);
text-align: center;
transition: 1s ease-in-out;
}

.container .card h2 {
color: #fff;
font-size: 4.5em;
padding: 30px 0;
}

.container .card .content {


position: absolute;
bottom: 10px;
padding: 20px;
text-align: center;
}

.container .card .content p {


color: #666;
transition: .5s ease-in-out;
}

.container .card .content a {


position: relative;
display: inline-block;
padding: 10px 20px;
border-radius: 40px;
text-decoration: none;
margin-top: 20px;
transition: .8s ease-in-out;
}

.container .card:nth-child(1) .circle, .container .card:nth-child(1) a {


background: #ffaf00;
}

.container .card:nth-child(2) .circle, .container .card:nth-child(2) a {


background: #da2268;
}

.container .card:nth-child(3) .circle, .container .card:nth-child(3) a {


background: #bb02ff;
}

@keyframes colorChange {
0% {
color: #fff;
}

50% {
color: #b1b493;
}

80% {
color: #4f8a8b;
}

100% {
color: #fff;
}
}

You might also like