@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
:root {
--pink-color: #f2726a;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
background: linear-gradient(45deg, #00853e, #50c878);
display: flex;
justify-content: center;
align-items: center;
}
.card {
width: 300px;
height: 400px;
border-radius: 10px;
text-align: center;
background-color: #242628;
overflow: hidden;
margin: 0 30px;
}
.card__img {
width: 120px;
height: 120px;
overflow: hidden;
transition: 0.25s;
margin: 0 auto;
transform: translateY(25px);
border-radius: 50%;
border: 4px solid var(--pink-color);
cursor: pointer;
}
.card__img:hover {
width: 100%;
height: 100%;
border-radius: unset;
border: unset;
transform: unset;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
h2 {
color: white;
margin-top: 40px;
}
p {
color: var(--pink-color);
}
.card__social a {
text-decoration: none;
color: white;
margin: 25px 20px 40px;
display: inline-block;
font-size: 18px;
transition: 0.25s;
}
.card__social a:hover {
color: var(--pink-color);
}
button {
outline: none;
border: none;
color: white;
background-color: transparent;
border: 1px solid var(--pink-color);
padding: 10px 20px;
border-radius: inherit;
cursor: pointer;
transition: 0.25s;
}
button:hover {
background-color: var(--pink-color);
}
LỘ TRÌNH LÊN FULLSTACK, trọn bộ serial course Pro HTML,CSS,JAVASCRIPT MIỄN PHÍ :
HTML : HTML căn bản cho người mới bắt đầu
CSS : CSS căn bản cho người mới bắt đầu
JS: Javascript cho người mới bắt đầu
One Response