i wanted to postion a text in (h1) on the image but it affected by the opacity of the image so how can i make it not to get affected by it, i want also to position the button directly under the text but it positiond under the image. the third problem is that there an empty space between the nav bar and div of (the text and the image) as it shown in the screen shot `screenshot of the webpage
@import url('http://ift.tt/2eZzRT2');
body{
font-family: 'Quicksand', sans-serif;
width: 100%;
}
.container-fluid {
width: 100%;
padding: 0px;
}
#top-header {
text-align: center;
background: #480000 ;
}
.inner {
max-width:960px;
margin: 0 auto;
min-height: 50px;
}
.nav a {
display: block;
padding: 8px;
color: white;
padding-top: 15px;
}
.txt{
top: 32%;
left: 15%;
font-size: 2.5vw;
color: green;
font-weight: bolder;
}
.main-img {
opacity: 0.5;
width: 100%;
z-index: -1;
}
.btn {
top: 40%;
left: 20%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://ift.tt/2yYrQXn" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="http://ift.tt/2iF8Hmw" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<title></title>
<link href="http://ift.tt/2zcHM8r" rel="stylesheet">
<link rel="stylesheet" href="stylesheet/style.css">
</head>
<body>
<div class="container-fluid">
<div class="row header row-fluid" id="top-header">
<div class="inner">
<nav class="nav topnav">
<a href="#home">Home</a>
<a href="#protfolio">Protfolio</a>
<a href="#service">Serviice</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</nav>
</div>
</div>
<div class="container-fluid main-div">
<div class="row">
<div>
<h1 class="txt col-md-4">We Know how to get your Job done</h1>
<img class="img-fluid main-img" src="images/12.jpg" alt="main-image">
<a class="btn btn-primary" href="#">Pro</a>
</div>
</div>
</div>
</div>
</body>
</html>
thank you in advance
Aucun commentaire:
Enregistrer un commentaire