가오리의 코딩일기

4. 메인 본문

HTML+CSS+JavaScript/만들기

4. 메인

류경혜 2022. 2. 28. 17:00

https://gaori.netlify.app/

 

In The Water Friends

 

gaori.netlify.app

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&family=Noto+Sans+KR&family=Oregano&family=Poppins&display=swap" rel="stylesheet">
    <title>In The Water Friends</title>
</head>
<body>

        <div class="menu">
            <li><a href="#turtle">Turtle</a></li>
            <li><a href="#stingray">Stingray</a></li>
            <li><a href="#crocodile">Crocodile</a></li>
        </div>
    <div class="header">
        <div class="header_img">
            <img src="./images/header-img.jpg" alt="">
        </div>
        <div class="title">
            <h1>Sea Creature</h1>
            <h3>In The Water Friends</h3>
        </div>
    </div>
    <!--header end-->
    <div id="turtle">
        <div class="square top">
            <div class="text">
                <h2>Turtle</h2>
                <h3>Animalia Chordata Reptilia</h3>
                <h4><a href="turtle.html">Read More</a></h4>
            </div>
            <div class="top_img">
                <img src="./images/turtle-img.jpg" alt="">
            </div>
        </div>
    </div>
    <!--turtle end-->
    <div id="stingray">
        <div class="square middle">
            <div class="middle_img">
                <img src="./images/stingray-img.jpg" alt="">
            </div>
            <div class="text color">
                <h2>Stingray</h2>
                <h3>Animalia Chordata Chondrichthyes</h3>
                <h3>Elasmobranchii  Selachimorpha</h3>
                <h4><a href="stingray.html">Read More</a></h4>
            </div>

        </div>
    </div>
    <!--stingray end-->
    <div id="crocodile">
        <div class="square bottom">
            <div class="text">
                <h2>Crocodile</h2>
                <h3>Animalia Chordata Reptilia Crocodilia</h3>
                <h4><a href="crocodile.html">Read More</a></h4>
            </div>
            <div class="bottom_img">
                <img src="./images/croco-img.jpg" alt="">
            </div>
        </div>
    </div>
</body>
</html>
*{
    padding: 0;
    margin: 0;
    font-family: 'Kaushan Script', cursive;
    text-decoration: none;
    color: #0F7798;
}
h1{
    font-size: 120px;
    text-align: center;
}
h2{font-size: 90px;}
h3{font-size: 45px;}
h4{
    border: 1px solid;
    width: 180px;
    height: 50px;
    margin: auto;
    text-align: center;
    font-size: 30px;
}
.text{
    position: relative; 
    text-align: center;
}
/*header start*/
.header{
    display: flex;
    background: #000000;
}
.title h1,
.title h3{
    color: #dbdbdb;
    position: absolute;
}
.title h1{
    font-size: 100px;
    padding-top: 150px;
}
.title h3{
    font-size: 80px;
    padding-top: 300px;
}
.menu{
    display: flex;
    background-color: #000000;
}
.menu li{
    flex: 1;
    list-style: none;
    font-size: 30px;
    text-align: right;
}
.menu li a{
    text-decoration: none;
    color: #dbdbdb;
}
.menu li a:hover{
    color: #7e8b4b;
}

.square{
    display: flex;
    justify-content: center;
    margin: auto;
    padding-top: 200px;
    padding-bottom: 100px;
}
.top .text, .bottom .text{
    color: #0f7798;
    background: #ffffff;
}
.top_img img, .middle_img img{
    width: 500px;
    height: 500px;
}
.color h2, .color h3, .color h4, .color h4 a{
    color: #dbdbdb;
}
.text_white{color: #dbdbdb;}
.middle{background: #000000;}
.bottom_img img{
    width: 410px;
    height: 570px;
}
저작자표시

'HTML+CSS+JavaScript > 만들기' 카테고리의 다른 글

타이핑 효과 랜딩 페이지 만들기  (0) 2022.05.10
calculator  (0) 2022.04.05
3. 악어  (0) 2022.02.28
2. 가오리  (0) 2022.02.27
1. 거북이  (0) 2022.02.27
'HTML+CSS+JavaScript/만들기' Related Articles more