NedyUdombat · January 15, 2018 21:37
diff --git a/task.html b/task.html
 <!DOCTYPE html>
 <html>
 <head>
 	<title>Landing Profile Page</title>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	
  	<style type="text/css">
  		body{
  			background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("https://res.cloudinary.com/nedy123/image/upload/v1516020817/bac_e2bhfu.jpg");
 			height: 600px;
 			background-size: cover;
 			margin: 0;
  		}
  		ul {
 		    list-style-type: none;
 		    margin: 0;
 		    padding: 3em 2em 3em 2em;
 		    overflow: hidden;
 		    background-color: transparent;
 		    position: relative;
 		}
 		li {
 		    float: left;
 		}
 		li a {
 		    display: block;
 		    color: #fff;
 		    text-align: center;
 		    padding: 14px 16px;
 		    text-decoration: none;
 		}
 		li a:hover:not(.active) {
 		    background-color: #111;
 		}
 		.active {
 		    background-color: red;
 		}
 			@media screen and (max-width: 600px){
 	    	ul.topnav li.right, 
 	    	ul.topnav li {float: none;}
 		}
 		.nav-title{
 			font-size: 30px;
 			font-family: courier;
 		}
 		img {
 		    border: 5px solid #fff;
 		    border-radius: 4px;
 		    padding: 0px;
 		    width: 350px;
 		    float: right;
 		    margin-right: 8em;
 		}
 		img:hover {
 		    box-shadow: 2px 0px 4px 3px #fff;
 		}
 		.body-text{
 			margin-left: 8em;
 		}
 		p{
 			color: #fff;
 			font-size: 25px;
 		}
 		
  	</style>
 </head>
 <body>
 	<!-- navbar -->
 	<ul>
 	    <li class="nav-title"><a href="#home">NEDY</a></li>
 	    <!-- arranging the nav in reverse so that when floated left it arranges itself well -->
 	    <li style="float:right"><a href="#news">Contact</a></li>
 	    <li style="float:right"><a href="#contact">Portfolio</a></li>
 	    <li style="float:right"><a class="active" href="#about">About</a></li>
 	</ul>

    <!-- body -->
    <img src="https://res.cloudinary.com/nedy123/image/upload/v1516020817/Dp_qtx2l8.jpg" alt="Forest" style="width:350px">

 	<div class="body-text">
 		<p style="font-size: 50px">Hi, my name is <br>
 	   	<span style="font-size: 75px; color: red"><a href="https://twitter.com/Nedy_Codes" target="_blank" style="text-decoration: none; color: red;">Nedy Udombat</a></span></p>
 	    <p>
 	    	I am front-end web developer,<br> 
 	    	passionate about building <br>
 	    	tech communities and ecosystems alike.
 	    </p>
 	    <small style="color: white;">
 			<em>[Click on my name to follow me on twitter]</em>
 		</small>
 	</div>
 	<br>


 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Landing Profile Page</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<style type="text/css">
	body{
	background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("https://res.cloudinary.com/nedy123/image/upload/v1516020817/bac_e2bhfu.jpg");
	height: 600px;
	background-size: cover;
	margin: 0;
	}
	ul {
	list-style-type: none;
	margin: 0;
	padding: 3em 2em 3em 2em;
	overflow: hidden;
	background-color: transparent;
	position: relative;
	}
	li {
	float: left;
	}
	li a {
	display: block;
	color: #fff;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	}
	li a:hover:not(.active) {
	background-color: #111;
	}
	.active {
	background-color: red;
	}
	@media screen and (max-width: 600px){
	ul.topnav li.right,
	ul.topnav li {float: none;}
	}
	.nav-title{
	font-size: 30px;
	font-family: courier;
	}
	img {
	border: 5px solid #fff;
	border-radius: 4px;
	padding: 0px;
	width: 350px;
	float: right;
	margin-right: 8em;
	}
	img:hover {
	box-shadow: 2px 0px 4px 3px #fff;
	}
	.body-text{
	margin-left: 8em;
	}
	p{
	color: #fff;
	font-size: 25px;
	}

	</style>
	</head>
	<body>
	<!-- navbar -->
	<ul>
	<li class="nav-title"><a href="#home">NEDY</a></li>
	<!-- arranging the nav in reverse so that when floated left it arranges itself well -->
	<li style="float:right"><a href="#news">Contact</a></li>
	<li style="float:right"><a href="#contact">Portfolio</a></li>
	<li style="float:right"><a class="active" href="#about">About</a></li>
	</ul>

	<!-- body -->
	<img src="https://res.cloudinary.com/nedy123/image/upload/v1516020817/Dp_qtx2l8.jpg" alt="Forest" style="width:350px">

	<div class="body-text">
	<p style="font-size: 50px">Hi, my name is <br>
	<span style="font-size: 75px; color: red"><a href="https://twitter.com/Nedy_Codes" target="_blank" style="text-decoration: none; color: red;">Nedy Udombat</a></span></p>
	<p>
	I am front-end web developer,<br>
	passionate about building <br>
	tech communities and ecosystems alike.
	</p>
	<small style="color: white;">
	<em>[Click on my name to follow me on twitter]</em>
	</small>
	</div>
	<br>


	</body>
	</html>