First of thanks a lot for taking time to help me out with my problem. so here's my problem I am creating a persoel portfolio webpage in code pen and everything works well but when I hover of the h1 element "I Tu Coffee Into Software" a blue line appears under it. I never wrote in my code to underline it when I hover.
Here is the code pen: http://codepen.io/Loxyx/pen/PzNZPG
.block {
background-color: black;
opacity: 0.8;
padding: 10px;
width: 50%;
margin-right: auto;
margin-left: auto;
border-radius: 10px;
}
.nav-pills {
font-size: 1.7em;
background-color: black;
}
body {
background-color: white;
font-family: Lobster;
color: white;
}
h1 {
padding: 0;
margin-top: 0px;
color: white;
font-size: 5.0em;
}
h2 {
color: white;
}
.btn-default {
background-color: black;
border-color: black;
color: #337ab7;
font-size: 1.7em;
}
.page-one {
background: url("https://images.unsplash.com/photo-1462910211773-a9847b1f0e40?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=600fdca8f6340569864d4f94f5f9dfc1");
background-size: cover;
height: 800px;
}
<header>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
</header>
<ul class="nav nav-pills">
<li>
<a href="#">James Colitti</a>
</li>
<li class="pull-right">
<a href="#">About Me</a>
</li>
<li class="pull-right">
<a href="#">Portfolio</a>
</li>
<li class="pull-right">
<a href="#">Contact Me<a>
</li>
</ul>
</div>
<div class="page-one">
<div class="block text-center">
<h1>James Colitti</h1>
<h2>I Tu Coffe Into Software</h2>
</div>
<div class="btnList text-center">
<a class="btn btn-default" href="#">GitHub</a>
<a class="btn btn-default" href="#">Twitter</a>
<a class="btn btn-default" href="#">FaceBook</a>
<a class="btn btn-default" href="#">Linkedin</a>
</div>