making a pet adoption page Responsive
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pet Adoption page</title>
</head>
<body>
<h2><i>adopt.me</i></h2>
<br />
<h1>Adopt a <span>Pet</span> today</h1>
<div id="pets">
<div class="card" id="dog">
<img
src="https://images.unsplash.com/photo-1534361960057-19889db9621e?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZG9nfGVufDB8fDB8fHww"
alt="chimtu"
/>
<h2>Meet Chimtu!</h2>
<p>
Chimtu is a cute puppy with heart heart as pure as gold it is a
friendly dog looking for a home<br />
It eats non-veg and curd rice along with pedigree<br />
If intersted contact:2345432344
</p>
</div>
<div class="card" id="cat">
<img
src="https://images.unsplash.com/photo-1511044568932-338cba0ad803?w=1000&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8Y2F0fGVufDB8fDB8fHww"
alt="tom"
/>
<h2>Meet Tom!</h2>
<p>
Tom is a lovely cat with brown eyes,it drinks milk thrice in a day and
eats fish once in a week <br />
It's so sweet and cute.When taken under care it can be the bestest
friend possibly. <br />
contact:87654567
</p>
</div>
</div>
</body>
</html>
CSS
.card{
height: 500px;
width: 300px;
border: 2px solid black;
border-radius: 25px;
margin: 10px;
padding: 10px;
display: inline-block;
}
img{
height: 200px;
width: 300px;
border-radius: 25px;
}
h2{
color: brown;
}
span{
color: lightsalmon;
}
#pets{
display: flex;
justify-content: space-evenly;
}
@media(max-width:375px){
#pets{
flex-wrap: wrap;
}
}
Comments
Post a Comment