Disini kita akan membuat design card secara responsive
ok langsung kita buat script HTML design card
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<title>Responsive profile card</title>
</head>
<body>
<h2>Responsive profile card</h2>
<div class="main-container">
<div class="card">
<img src="assets/3.png" alt="">
<h2>Hadi prasetyo</h2>
<p>Fullstack Development</p>
<div class="social-media">
<a href=""><i class="fa fa-facebook"></i></a>
<a href=""><i class="fa fa-instagram"></i></a>
<a href=""><i class="fa fa-youtube"></i></a>
<a href=""><i class="fa fa-github"></i></a>
</div>
</div>
<div class="card">
<img src="" alt="">
<h2>Lugia siskawati</h2>
<p>Fullstack Designer</p>
<div class="social-media">
<a href=""><i class="fa fa-facebook"></i></a>
<a href=""><i class="fa fa-instagram"></i></a>
<a href=""><i class="fa fa-youtube"></i></a>
<a href=""><i class="fa fa-github"></i></a>
</div>
</div>
<div class="card">
<img src="" alt="">
<h2>Adinda</h2>
<p>UI/UX Design</p>
<div class="social-media">
<a href=""><i class="fa fa-facebook"></i></a>
<a href=""><i class="fa fa-instagram"></i></a>
<a href=""><i class="fa fa-youtube"></i></a>
<a href=""><i class="fa fa-github"></i></a>
</div>
</div>
</div>
</body>
</html>
Buat script css untuk tampilan design card responsive
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: sans-serif;
text-transform: capitalize;
text-align: center;
}
.card {
display: inline-block;
padding: 20px 30px;
border-radius: 20px;
border: 1px solid black;
margin: 10px;
transition: 0.6s;
}
.card:hover {
transition: 0.6s;
box-shadow: 5px 5px 20px lightgray;
}
.card img {
transition: 0.2s;
width: 120px;
border-radius: 50%;
margin-bottom: 10px;
padding: 2px;
}
.card p {
color: gray;
}
.social-media a i {
color: gray;
font-size: large;
transition: 0.5s;
padding: 10px 0;
/* border-radius: 50%; */
}
.social-media a i:hover {
transition: 0.5s;
transform: scale(2);
}
.social-media {
margin-top: 20px;
display: flex;
justify-content: center;
gap: 12px;
}
.main-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
0 Komentar