SOURCE

console 命令行工具 X clear

                    
>
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;
}