가오리의 코딩일기

1. 거북이 본문

HTML+CSS+JavaScript/만들기

1. 거북이

류경혜 2022. 2. 27. 15:00 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Turtle</title>
    <link rel="stylesheet" href="turtle.css">
    <link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&family=Noto+Sans+KR&family=Oregano&family=Poppins&display=swap" rel="stylesheet">
</head>
<div>
    <h1>Turtle</h1>
    <div class="turtle">
        <div class="square up one">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat distinctio natus totam ratione molestiae modi dicta mollitia, eligendi obcaecati odit. Beatae, eius delectus voluptatibus aliquam iusto quam necessitatibus laborum sint?</p>
        </div>
        <div class="square down two">
            <img src="./images/turtle1.jpg" alt="">
        </div>
        <div class="square up three">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat distinctio natus totam ratione molestiae modi dicta mollitia, eligendi obcaecati odit. Beatae, eius delectus voluptatibus aliquam iusto quam necessitatibus laborum sint?</p>
        </div>
        <div class="square down four">
            <img src="./images/turtle2.jpg" alt="">
        </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
4. 메인  (0) 2022.02.28
3. 악어  (0) 2022.02.28
2. 가오리  (0) 2022.02.27
'HTML+CSS+JavaScript/만들기' Related Articles more