HTML 실습3. 화면 구현하기

[출처]

https://blog.naver.com/getinthere/222136112744

HTML 실습3 아래의 화면을 구현하시오.

getinthere님의블로그

blog.naver.com

<!DOCTYPE html>
<html>

<head>
    <script src="https://kit.fontawesome.com/b1af5d6df7.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script src="https://kit.fontawesome.com/b1af5d6df7.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body>


    <div class="background_box">
        <div class="background_img_box"></div>
        <div class="background_color_box">

            <div class="background_color_text_box">
                <div class="text_box">
                    <div class="color_txt_box">
                        New <br />
                        collection
                    </div>
                </div>
            </div>

            <div class="background_color_icon_box">
                <div class="icon_left_box">
                    <i class="fas fa-chevron-left icon_img"></i>
                    <i class="fas fa-chevron-right icon_img"></i>
                </div>
                <div class="icon_right_box">
                    <i class="fab fa-facebook-square icon_img"></i>
                    <i class="fab fa-instagram-square icon_img"></i>
                    <i class="fab fa-twitter-square icon_img"></i>
                </div>
            </div>
        </div>
        <div>
            <div class="menu_box">
                <div class="logo_box">zuzu.</div>
                <div class="menu_list_box">
                    <dev>about</dev>
                    <dev>collections</dev>
                    <dev>videos</dev>
                    <dev>contact</dev>
                </div>
                <div class="menu_img_box">
                    <i class="fas fa-search"></i> ENG
                </div>
            </div>
        </div>

    </div>
</body>

</html>

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.background_box {
    display: flex;
    position: relative;
}

.background_img_box {
    display: inline;
    background-image: url("/vacation.jpg");
    background-size: cover;
    background-position: center;
    width: 50%;
    height: 900px;
}

.background_color_box {
    background-color: #F8ECEB;
    display: inline-block;
    left: 50%;
    width: 50%;
    height: 800px;
}

.background_color_text_box {
    width: 100%;
    height: 100%;
}

.background_color_icon_box {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100px;
}

.icon_left_box {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.icon_right_box {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.icon_img {
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(78, 78, 78);
    width: 30px;
    height: 30px;
}

.menu_box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 30px;
}

.logo_box {
    font-size: 50px;
    font-weight: 900;
}

.menu_list_box {
    display: flex;
    justify-content: space-around;
    width: 30%;
    font-weight: 600;
    font-size: 20px;
    color: rgb(78, 78, 78);
}

.menu_img_box {
    color: rgb(78, 78, 78);
    font-weight: 900;
    font-size: 20px;
}

.text_box {
    position: relative;
    top: 250px;
    left: 50px;
}

.color_txt_box {
    font-size: 110px;
    font-weight: 900;
}

* 완성 화면 *

저작자표시

티스토리툴바