2021 winter-vacation HTML&CSS seminar: week3

가오리·2022년 11월 19일
winter-seminar
0

seminar

목록 보기
3/15
post-thumbnail
post-custom-banner

color

  • index.html
    <!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>The Best Colors</title>
    <link rel="stylesheet" href="color.css">
</head>
<body>
    <div class="header">
        <h1> The Best Colors</h1>
        <div class="container">
            <div class="square tomato">
                <div class="name">
                    <p>Tomato<br> #FF6347</p>
                </div>
            </div>
            <div class="square teal">
                <div class="name">
                    <p>Teal<br> #008080</p>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="square burlywood">
                <div class="name">
                    <p>Burlywood<br>#DEB887</p>
                </div>
            </div>
            <div class="square thistle">
                <div class="name">
                    <p>Thistle<br>#D7BFD7</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
  • style.css
    body{ background-color: lightgrey; overflow: hidden;}
.header h1{ text-align: center;}
p{
    font-size: x-large;
    font-weight: bolder;
}
.container{
    display: flex;
    align-items: center;
    justify-content: space-around ;
    margin: 20px 600px;
}
.name{
    width: 205px;
    height: 105px;
    margin: 10px;
    background-color: white;
    position : relative;
    right: 11px;
}
.square{
    width: 200px;
    height: 300px;
    border: 7px solid white;
}
.tomato{ background-color: #ff6347; }
.teal{ background-color: #008080;}
.burlywood{ background-color: #deb887;}
.thistle{ background-color: #d7bfd7;}




gradient

  • index.html
    <!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="gradient.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>
  • style.css
    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;}




moive

  • index.html
    <!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>Document</title>
    <link rel="stylesheet" href="moive.css">
</head>
<body>
    <div class="wrapper">
        <div class="left">
            <div>
                <h2>HOME</h2>
                <h2>MOVIE</h2>
                <h2>PHOTO</h2>
            </div>
        </div>
        <img src="image.jpg" alt="">
    </div>
</body>
</html>
  • style.css
    body{
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
.wrapper{ flex-direction: row; }
.left{
    background-color: black;
    width: 300px;
    height: 100vh;
    position: fixed;
    display: flex;
    align-items: center;
}
h2{ 
    color: white;
    text-indent: 30px; 
}
h2:hover{ color: #4D54DC; }
img{
    width: 1400px;
    height: 100%;
    margin-left: 300px;
}
profile
가오리
가오리의 코딩일기
이전 포스트

2021 winter-vacation HTML&CSS seminar: week2

다음 포스트

2021 winter-vacation HTML&CSS seminar: week4

post-custom-banner

0개의 댓글