Bách khoa toàn thư mở Wikipedia
.page{
font-family: 'Palatino Linotype', 'Geogria', serif;
width: 100%;
display: flex;
justify-content: center;
}
.container {
max-width: 700px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #e0b1cb;
color:#FFFFFF;
}
.title {
padding: 1rem;
text-align: center;
letter-spacing: 0.1rem;
font-family: 'Segoe Print', 'Palatino Linotype', 'Geogria', serif;
}
.h1 {
font-size: 3rem;
}
.h2 {
font-size: 1.2rem;
font-weight: 400;
}
.card {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-left: 2rem;
margin-right: 2rem;
margin-bottom: 2.5rem;
}
.card:first-of-type {
margin-top: 3rem;
}
.card p {
width: calc(100% - 4rem - 182px);
font-size:12px;
font-family:Verdana, sans-serif;
font-weight:normal;
line-height:24px;
letter-spacing:normal;
text-align: center;
}
.img1 {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/2/2c/Young_woman_wearing_a_blue_dress_with_matching_bolero.jpg');
width: 182px;
height: 182px;
background-size: cover;
margin-bottom: 1rem;
border-radius: 61% 39% 60% 40% / 27% 65% 35% 73%;
animation: change ease-in-out 5s infinite;
}
.button {
background: #fff;
color: black;
border: none;
font-family:'Comic Sans', 'Trebuchet MS', sans-serif;
font-size:16px;
font-weight:400;
font-style:normal;
letter-spacing:1.75px;
font-variant:normal;
line-height:44px;
text-align:center;
text-decoration:none;
width:189px;
margin-bottom:2rem;
}
@keyframes change {
0% {border-radius: 61% 39% 60% 40% / 27% 65% 35% 73%;}
25% {border-radius: 30% 70% 45% 55% / 78% 30% 70% 22%;}
50% {border-radius: 11% 89% 22% 78% / 44% 33% 67% 56%;}
75% {border-radius: 38% 62% 70% 30% / 78% 74% 26% 22%;}
100% {border-radius: 61% 39% 60% 40% / 27% 65% 35% 73%;}
}
@media only screen and (min-width: 700px){
.card:nth-child(even) {
flex-direction: row-reverse;
}
}
@media screen and (max-width: 700px) {
.container {
width: 100%;
}
.card {
display: flex;
flex-direction: column;
align-items: center;
}
.card p{
width: calc(100% - 4rem);
}
}