Scribd
Upload
14 views

Css Aula

Uploaded by

kawanybandeiradasilva
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
14 views

Css Aula

Uploaded by

kawanybandeiradasilva
Copyright
© © All Rights Reserved
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