<!DOCTYPE html>
<html>
<head>
<title>Summer Music Festival</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/earlyaccess/notosanskr.css" rel="stylesheet">
</head>
<body>
<div class="hero-header">
<div id="navbar">
<a href="#" id="logo">SMF</a>
</div>
<div class="helper"></div><div class="info">
<h1>10th Summer Music Festival</h1>
<h2>20 - 21 August, 2017</h2>
<a href="#" class="learn-more">Learn More</a>
</div>
</div>
</body>
</html>
body {
margin: 0;
font-family: 'Noto Sans KR', sans-serif;
}
.hero-header {
position: relative;
height: 684px;
/*사진 암거나 해도 됨 ㅇㅇ*/
background-image: url('../images/hero_image.jpg');
background-size: cover;
}
/* 세로 가운데 정렬을 위해서 */
.hero-header .helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
#navbar {
padding: 10px 20px;
position: absolute;
top: 0;
}
#logo {
color: white;
font-size: 28px;
text-decoration: none;
font-weight: bold;
}
.info {
color: white;
text-align: center;
display: inline-block;
width: 100%;
vertical-align: middle;
}
.info h1 {
margin-top: 0;
margin-bottom: 10px;
font-size: 40px;
}
.info h2 {
margin-top: 0;
margin-bottom: 50px;
font-size: 20px;
font-weight: normal;
}
.learn-more {
padding: 8px 40px;
font-size: 18px;
color: white;
border: 2px solid white;
text-decoration: none;
}