console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Card</title>
<link rel="stylesheet" type="text/css" href="Card.css">
</head>
<body>
<div class="all">
<div class="box1">
<p class="size1">
<b>
Default size card
</b>
</p>
</div>
<div class="box2">
<p>Card content</p>
<p>Card content</p>
<p>Card content</p>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="all">
<div class="box3">
<img class="img" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png">
</div>
<div class="box4">
<p class="size1">
<b>
Europe Street beat
</b>
</p>
<p class="size2">
www.instagram.com
</p>
</div>
</div>
</body>
</html>
.box1 {
padding: 10px;
border: 1px solid rgba(0, 0, 0, 0.1);
width: 300px;
border-bottom: white;
}
.box2 {
padding: 10px;
border: 1px solid rgba(0, 0, 0, 0.1);
width: 300px;
height: 150px;
}
.size1 {
font-size: 700;
}
.size2 {
color: rgba(0, 0, 0, 0.25);
}
.box3 {
padding: 10px;
border: 1px solid rgba(0, 0, 0, 0.1);
width: 300px;
height: 300px;
}
.box4 {
padding: 10px;
border: 1px solid rgba(0, 0, 0, 0.1);
width: 300px;
border-top: white;
}
.img {
width: 300px;
height: 300px;
}
.all {
width: 320px;
}
.all:hover{
cursor: pointer;
box-shadow: 1px 1px 5px 5px gray;
}