Could someone assist me in placing the Life's Good logo on the left side of the nav bar without applying the animation from the "btn" class? Below is a snippet of my code with an example where I want the logo highlighted in Yellow:
* {
padding:0;
margin: 0;
}
body {
font-family: "Roboto";
color: #fff;
letter-spacing:1px;
}
a {
text-decoration: none;
}
.nav-bar {
padding-top: 18px;
background: #ffffff;
padding-bottom: 50px;
position: relative;
text-align: center;
color: black;
}
#main {
position: relative;
margin-top: px;
text-align: left;
}
.btn{
display: inline-block;
padding: 15px 40px;
cursor: pointer;
letter-spacing: 2px;
position:relative;
overflow:hidden;
margin: 0 1px;
outline: none;
}
.btn:before {
content: "";
position: absolute;
width: 0;
background : rgb(0, 0, 0);
left: 45%;
height: 2px;
bottom: 0;
transition: all .3s;
opacity: 0.7;
}
.btn:hover:before {
width: 100%;
left:0;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Life's Good</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/stylesheet.css">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="icon" href="images/favicon.png">
</head>
<body>
<div class="nav-bar">
<div id="main"><img src="images/logos/8870080_sunny_sun_beach_cloud_icon (3).png" alt="">Life's Good</div>
<div class="btn"><a href="index.html" title="">Home</a></div>
<div class="btn"><a href="#" title="">News</a></div>
<div class="btn"><a href="#" title="">Gaming</a></div>
<div class="btn"><a href="#" title="">Books</a></div>
<div class="btn"><a href="#" title="">Coding</a></div>
<div class="btn"><a href="#" title="">Contact</a></div>
</div>
</body>
</html>Click here to see the Yellow Area where I want the Logo ("Life's Good")