<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">
<title>HUGO</title>
</head>
<body>
<div class="header">
<div class="nav">
<div class="navigation">
<a href="#" class="ico"><img src="img/3.png" alt="ico"></a>
<a href="#" class="ico"><img src="img/2.png" alt="ico"></a>
<a href="#" class="ico"><img src="img/1.png" alt="ico"></a>
<a href="#" class="logo"><img src="img/logo.png" alt="logo"></a>
<a href="#" class="bur"><img src="img/menu.png" alt="burger"></a>
</div>
</div>
<div class="container">
<img src="img/f_ckingjump.png" alt="" class="img-con">
</div>
</div>
<div class="body">
<div class="album-col">
<div class="album-it">
<h2 class="album-title">featured album</h2>
</div>
<div class="album-it">
<a href="#"><img src="img/HUGO_Free-Landing-Page_03.jpg" alt="BEAT"></a>
</div>
</div>
</div>
</body>
</html>*,
*::after,
*::before{
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6{
margin: 0;
}
body{
margin: 0;
font-family: 'Roboto', sans-serif;
font-size: 18px;
}
/* Container */
.container{
width: 100%;
max-width: 1170px;
margin: 0 auto;
}
/* Nav */
.nav{
background-color: #fff;
width: 100%;
}
.navigation{
width: 100%;
max-width: 1170px;
background-color: #fff;
padding: 15px 0;
position: relative;
margin: 0 auto;
display: flex;
justify-content: space-around;
align-items: center;
}
.logo{
margin: 0 auto;
}
.ico{
margin-right: 30px;
}
.bur{
margin-left: 60px;
}
/* Header */
.header{
width: 100%;
height: 100vh;
background: url(../img/HUGO_Free-Landing-Page_02.jpg) no-repeat;
background-size: cover;
}
.img-con{
margin: 260px 180px;
}
/* Body */
.body{
width: 100%;
}
.album-col{
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.album-it{
height: 480px;
flex: 1 0 auto;
}
.album-title{
font-size: 48px;
text-transform: capitalize;
color: #252525;
font-weight: lighter;
}