가오리의 코딩일기

3. 악어 본문

HTML+CSS+JavaScript/만들기

3. 악어

류경혜 2022. 2. 28. 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>Crocodile</title>
    <link rel="stylesheet" href="crocodile.css">
    <link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&family=Noto+Sans+KR&family=Oregano&family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
    <h1>Crocodile</h1>
    <div class="crocodile">
        <div class="square">
            <div class="change1">
                <img src="./images/croco2.jpg" class="one">
                <img src="./images/croco3.jpg" class="two">
            </div>
            <div class="change2">
                <img src="./images/croco4.jpg">
                <div class="text">
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione facere distinctio quia non nostrum quam eligendi culpa cumque. Eum soluta quo iure tempore blanditiis dolores consequuntur omnis officiis perspiciatis facere.
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, doloremque. Impedit voluptas incidunt cumque, tenetur maiores iure. Quas dicta, itaque libero minus dolores cupiditate maiores, placeat, provident consectetur fugiat suscipit.</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
*{
    padding: 0;
    margin: 0;
    font-family: 'Kaushan Script', cursive;
    text-decoration: none;
    background:  #0D526F;
}
h1{
    font-size: 120px;
    color: #52AAC1;
    text-align: center;
}
.square{
    display: flex;
    justify-content: center;
}
.change1 img{
    width: 500px;
    height: 500px;
}
.change1{
    position: relative;
}
.two{position: absolute;
    top: 0px;
    left: 0px;
    display: none;
}
.change1:hover .two{
    display: block;
}
.change2{
    position: relative;
}
.change2 img{
    position: relative;
}
.text{
    position: absolute;
    top: 0px;
    left: 0px;
    display: none;
}
.change2:hover .text{
    display: block;
}
.change2 img{
    width: 300px;
    height: 500px;
}
.change2 p{
    font-size: 14px;
    width: 260px;
    height: 460px;
    background: #3C3D52;
    color: #dbdbdb;
    opacity: 80%;
    padding: 20px;
}
저작자표시

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

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