메인페이지 작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>김보미의 홈페이지</title>
<style>
@font-face {
font-family: 'BagelFatOne-Regular';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_JAMO@1.0/BagelFatOne-Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
body {
text-align: center;
background-color: hwb(0 71% 5%);
overflow: hidden;
font-family: 'BagelFatOne-Regular';
}
a:link {text-decoration: none; color: brown; text-shadow: 1px 3px white;}
a:visited {text-decoration: bold; color: #F06464;}
a:hover {text-decoration: underline; color: hsla(0, 25%, 90%, 0.767);}
a:active {text-decoration: underline; color: hsl(0, 0%, 46%);}
h1 {
color: #F06464;
font-style: italic;
text-shadow: 5px 5px white;
margin-top: 50px;
}
@import url(https://fonts.googleapis.com/css?family=Lato:300);
a {
clear: both;
}
@media (max-width: 700px){
.box{
width: 50%;
}
}
@media (max-width: 420px){
.box{
width: 100%;
}
}
.smile1{
width: 500px;
height: 10px;
-webkit-animation:smile1 5s linear infinite;
float: left;
font-size: 100px;
color: #f79292;
}
@-webkit-keyframes smile1{
0%{
-webkit-transform:rotate(0deg);
}
100%{
-webkit-transform:rotate(360deg);
}
}
.smile2{
width: 1000;
height: 500px;
-webkit-animation:smile2 3s linear infinite;
float: right;
font-size: 200px;
color: #f88484;
}
@-webkit-keyframes smile2{
0%{
-webkit-transform:rotate(0deg);
}
100%{
-webkit-transform:rotate(360deg);
}
}
.smile3{
width: 1000;
height: 500px;
-webkit-animation:smile3 10s linear infinite;
font-size: 50px;
color: #F06464;
}
@-webkit-keyframes smile3{
0%{
-webkit-transform:rotate(0deg);
}
100%{
-webkit-transform:rotate(360deg);
}
}
.smile4{
width: 500px;
height: 10px;
-webkit-animation:smile4 5s linear infinite;
font-size: 300px;
color: white;
opacity: 50%;
}
@-webkit-keyframes smile4{
0%{
-webkit-transform:rotate(0deg);
}
100%{
-webkit-transform:rotate(360deg);
}
}
</style>
</head>
<body>
<div id="container">
<h1>: : bomi's home : :</h1>
<a href="./login.html">로그인</a>
<a href="./regist.html">회원가입</a>
<a href="./favorite.html">즐겨찾기</a>
<a href="./news.html">뉴스기사</a>
<a href="./resume.html">이력서</a>
<div class="box">
<div class="smile1">
<p>.</p>
</div>
<div class="smile2">
<p>.</p>
</div>
<div class="smile3">
<p>.</p>
</div>
<div class="smile4">
<p>.</p>
</div>
</div>
</div>
</body>
</html>
