<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<head>
<title> product </title>
</head>
<body>
<header id="header">
</header>
<div class ="logo">
<a herf ="#header-img"><img id="header-img" src="https://upload.wikimedia.org/wikipedia/fr/thumb/3/33/Logo_federation_tunisienne_de_football.svg/1024px-Logo_federation_tunisienne_de_football.svg.png" alt="tunisia"></a>
</div>
<nav>
<ul>
<li><a class="nav-link" href="#goals">Video</a></li>
<li><a class="nav-link" href="#mailbox">Subscribe</a></li>
<li><a class="nav-link" href="#header">Home</a></li>
</ul>
</nav>
<div id="welcome-section" class="intro"> </div>
<h1>Hey i'am Mimic.</h1>
<div id="projects" class="work"> </div>
<div class="project-title">Tribute Page</div>
The projects section should contain at least one link to a project.
portfolio link
<a id='profile-link' href="https://github.com/freecodecamp" target="_blank" class="contact-details">GitHub</a>
/* nav bar fixed top
one media query.
@media
the height of the welcome section
should be equal to the height of the viewport.
*/
body{margin:0; padding:0; background:white;}
#header{
display: flex;
}
nav {
width:100%; background:white; overflow:auto;}
ul {padding:0; margin: 0 0 0 150px; list-style:none; }
li{float:right;}
.logo img {
width:124px; position:absolute; margin-top:0px; margin-left:10px; }
nav a{width:100px; display:block;padding: 30px 15px; text-decoration:none; font-family:Arial; color:black; text-align:center;}
nav a:hover { background:red; transition:0.5s; text-transform:uppercase;}
h2 {
text-align: center;
font-size: 35px;
}
p { text-align:center;
font-size: 35px;
font-family:Arial}
