JSFiddle - React, Tailwind, and code Playground

by Sampath_Madhuranga

HTML

<html lang="en">
	<head>
		<title>AvesDesign</title>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<div id="background-image">
			<nav>
				<img class="logo" src="Logo/AvesDesignlogo.png" width="140" height="170" alt="AvesDesignlogo">
				<ul>
				<li><a href="#">HOME</a></li>
				<li><a href="#">PORTFOLIO</a></li>
				<li><a href="#">EXPERIENCE</a></li>
				<li><a href="#">CONTACT</a></li>
			</ul>
		</nav>
		
			<header class="main-header">
			<div class="first-line-title">Welcome to</div>
	</div>
			<div class="second-line-title">AvesDesign's
				 portfolio</h1>

			</div>
		</header>
	</body>
	</html>

CSS

.main-header {
	padding-top: 0x;
	height: 250px;
	text-align: right;

}

#background-image {
	background: url("../banner/pilved.jpg") no-repeat center;
	background-size: cover;

	
}

/*Welcome to text------------------------------------*/


.first-line-title {
	font-size: 35px;
	color: white;
	font-weight: normal;
	font-style: italic;
	position: fixed;
	top: 30%;
	right: 35%;

}

/* AvesDEsign's portfolio text---------------------*/


.second-line-title {
	font-size: 90px;
	color: white;
	font-weight: normal;
	line-weight: 1.3;
	position: absolute;
	overflow: hidden;
	top: 40%;
	right: 8%;

}



/* Navigation bar -------------------------*/
* {
	margin: 0;
	padding: 0;
	font-family: Avenir;
}


	nav {
	width: 250px;
	height: 600px;
	background-color: rgba(0,0,0,0.2);
	line-height: 80px; 
	text-align: center;
}

nav ul {
	float: left;
	margin-left: 45px;
	margin-top: -5px;
}

nav ul li {
	list-style-type: none;
	transition: 0.8s all;
	font-family: Avenir;
}

nav ul li:hover {
	background-color: #d0d6da;
}

nav ul li a {
	text-decoration: none;
	color: white;
	padding: 30px;
}

/* Logo information------------------------------*/

.logo {
	margin-left: -8px;
	margin-top: 40px;
}