Class 7

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <title>Class 8</title>
    <style>
        *{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}
.header{
    height: 70px;
    width: 100%;
    background-color: dodgerblue;
}
.navbar{
    height: 100%;
    width: 50%;
    background-color: ;
    float: right;
}
.navbar ul{
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 20px;

}
.navbar ul li a{

    text-decoration: none;
    color:white;
    font-size: 25px;
    text-transform: uppercase;
    border-bottom: 2px solid orange;
}
.navbar ul li a:hover{
    color:orange;
    border-bottom: 2px solid white;
}

.fa-home,.fa-user,.fa-volume-control-phone,.fa-wrench{
    padding-right: 5px;
    color:black;
}

    </style>
</head>
<body>
    <div class="header">
        <nav class="navbar">
            <ul>
                <li><a href="#" title=""><i class="fa fa-home" aria-hidden="true"></i>Home</a></li>
                <li><a href="#" title=""><i class="fa fa-user" aria-hidden="true"></i>Profile</a></li>
                <li><a href="#" title=""><i class="fa fa-volume-control-phone" aria-hidden="true"></i>Contuct</a></li>
                <li><a href="#" title=""><i class="fa fa-wrench" aria-hidden="true"></i>Setting</a></li>

            </ul>

        </nav>

    </div>

</body>
</html>