가오리의 코딩일기

세미나 3회차 전(1) 본문

HTML+CSS+JavaScript/세미나

세미나 3회차 전(1)

류경혜 2022. 1. 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>Gradient</title>
    <link rel="stylesheet" href="style01.css">
</head>
<body>
    <div class="circle">
        <div class="square big">
            <div class="square"></div>
            <div class="container">
                <div class="square middle"></div>
                <div class="square middle"></div>
            </div>
            <div class="container">
                <div class="square bottom"></div>
                <div class="square bottom"></div>
                <div class="square bottom"></div>
            </div>
        </div>
    </div>
</body>
</html>
body{ 
    background-color: khaki; 
    overflow: hidden;
}
.circle{
    margin: 40px auto;
    background: linear-gradient(0.25turn,#ffb6c1, #f08080,#ffb6c1);
    border-radius: 100%;
    border: 5px solid white;
    width: 600px;
    height: 600px;
}
.square{
    border: 5px solid white;
    margin: 27px auto;
    width: 70px;
    height: 70px;
    background-color: #b0e0e6;
}
.big{
    width: 400px;
    height: 400px;
    margin-top: 100px;
    border-color: black;
    background: linear-gradient(45deg, #b0e0e6,#649cc9 ,#663399);
}
.container{
    display: flex;
    align-items: center;
    justify-content: space-around ;
}
.middle{background-color: #649cc9 ;}
.bottom{background-color: #663399;}

 

저작자표시

'HTML+CSS+JavaScript > 세미나' 카테고리의 다른 글

세미나 3회차(1)  (0) 2022.02.06
세미나 3회차 전(2)  (0) 2022.01.28
세미나 2회차  (0) 2022.01.25
세미나 2회차 전  (0) 2022.01.18
세미나 1회차  (0) 2022.01.18
'HTML+CSS+JavaScript/세미나' Related Articles more