[CSS] 14. 실습 예제

Mar 10, 2025

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .box1 {
            text-align: center;
            color: rgb(247, 150, 166);
            font-size: 20px;
        }

        .box2 {
            text-align: center;
            font-size: 20px;
        }

        .box3 {
            display: flex;
            justify-content: center;
            gap: 10px;
        }

        .box3 img {
            width: 300px;
            height: 300px;
        }

        .box4 {
            text-align: center;
            margin-top: 20px;
        }

        .btn {
            background-color: rgb(247, 150, 166);
            border: 1px solid black;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            color: white;
        }

        .box5 {
            text-align: center;
            margin-top: 20px;
        }

        .box6 {
            text-align: center;
            margin-top: 20px;
        }

        .box7 {
            display: flex;
            justify-content: center;
            gap: 10px;
        }

        .box7 img {
            width: 300px;
            height: 300px;
        }

        .box8 {
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="box1">
        <h1>Meet GuideBooks</h1>
    </div>
    <div class="box2">
        <p>Discover hundreds of local spots recommended by Airbnb hosts</p>
    </div>
    <div class="box3">
        <img src="san-francisco.jpg">
        <img src="new-york.jpg">
        <img src="london.jpg">
    </div>
    <div class="box4">
        <button class="btn">See All GuideBooks</button>
    </div>
    <div class="box5">
        <h1>Just for the weekend</h1>
    </div>
    <div class="box6">
        <p>Discover new, inspiring places close to home</p>
    </div>
    <div class="box7">
        <img src="napa.jpg">
        <img src="sonoma.jpg">
        <img src="san-francisco-2.jpg">
    </div>
    <div class="box8">
        <button class="btn">See All Destinations</button>
    </div>
</body>

</html>
See more posts
[CSS] 14. 실습 예제

More articles

[CSS] 16. 구조 짜보기

[CSS] 15. 인블로그 만들기

[CSS] 13. Object-fit

[CSS] 12. 아이콘 & 스타일 시트
