Make Your Own Professional Website Using Html & CSS, Javascript

MAKE YOUR OWN PROFESSIONAL WEBSITE USING HTML & CSS, Javascript

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">

<title>Ease</title>
</head>

<style>

body{
font-family: 'Montserrat', sans-serif;
font-size: 15px;
padding: 0;
margin: 0;
}

.container{
margin: auto;
}

header{
color: #ffffff;
background-color: #353030;
padding-top: 5px;
min-height: 70px;
border-bottom: #e8491d 3px solid;
}

header h1{
letter-spacing: 10px;
padding-left: 70px;
}

header a{
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
}

header li{
font-weight: bold;
float: left;
display: inline;
padding: 0 20px 0 20px;
}

header #branding{
float: left;
}

header nav{
float: right;
padding-top: 10px;
}

header a:hover{
color: #e8491d;
font-weight: bold;
transition: 0.4s ease;
}

#showcase{
padding-top: 5px;
height: 630px;
color: #fff;
background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url('laptop.jpg');
}

#showcase h1{
color: #e8491d;
font-size: 55px;
margin-top: 160px;
text-align: center;
}

.button{
position: absolute;
left: 30%;
}

.btn{
text-transform: uppercase;
padding: 10px 30px;
color: #fff;
text-decoration: none;
transition: 1s ease;
border: 1px solid #fff;
}

.btn:hover{
background-color: #fff;
color: #000;
}

</style>

<body>
<header>
<div class="container">
   <div id="branding">
   <h1>Ease</h1>
   </div>
   <nav>
   <ul>
   <li><a href="index.html">Home</a></li>
   <li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
   <li><a href="privacy.html">Privacy</a></li>
</ul>
</nav>
</div>
</header>

<section id="showcase">
<div class="container">
<h1>Become Professional</h1>
</div>

<div class="button">
<a href="#" class="btn">Visit Our YouTube</a>
<a href="#" class="btn">Visit Our Website</a>
</div>

</section>

</body>

</html>