가오리의 코딩일기

2. 가오리 본문

HTML+CSS+JavaScript/만들기

2. 가오리

류경혜 2022. 2. 27. 17: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>Stingary</title>
    <link rel="stylesheet" href="stingray.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>Stingray</h1>
        <div class="stingray">
            <div class="square up one">
                <img src="./images/stingray1.jpg" alt="">
            </div>
            <div class="square down two">
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
                    Pariatur consectetur optio natus vel mollitia quasi dolores recusandae, 
                    ipsum explicabo eaque nobis vero eum temporibus esse dolor ullam veritatis animi quas?</p>
            </div>
            <div class="square up three">
                <img src="./images/stingray2.jpg" alt="">                
            </div>
            <div class="square down four">
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
                    Maiores, ipsam sunt unde neque dolore asperiores nihil saepe, 
                    quas provident id adipisci beatae consectetur tempore obcaecati ipsa quisquam minus quos atque.</p>    
            </div>
        </div>
</body>
</html>
*{
    padding: 0;
    margin: 0;
    font-family: 'Kaushan Script', cursive;
    text-decoration: none;
    background: #8BA2B0;
}
h1{
    font-size: 120px;
    color: #31394D;
    text-align: center;
}
.stingray{
    display: flex;
}
.up{
    margin-top: 50px;
}
.down{
    margin-top: 100px;
}
.one{
    margin-left: 60px;
}
.square img{
    flex: 1;
    width: 350px;
    height: 500px;
    text-align: center;
}
.one:hover,
.three:hover{
    transform: translateY(+20%);
    transition: 1s;
}
.two:hover,
.four:hover{
    transform: translateY(-20%);
    transition: 1s;
}
p{
    width:350px;
    height: 450px;
    background: #37465D;
    color: #dbdbdb;
    font-size: 25px;
    opacity: 80%;
    text-align: center;
    vertical-align: center;
    padding-top: 50px;
}
저작자표시

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

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