zeek33.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.0">
<title>Background Opacity</title>
<style>
body {
margin: 0;
padding: 0;
}
header::before {
background: url(https://source.unsplash.com/user/erondu/1600x900) ;
background-size: cover ;
background-repeat: no-repeat ;
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.5;
}
ul {
display: flex;list-style-type: none;
}
li a {
margin: 15px;
text-decoration: none;
font-size: 30px;
color: rgb(11, 7, 248);
}
li a:hover {
background-color: rgb(209, 223, 250);
color: rgb(139, 32, 0);
}
section {
margin-top: 60px;
margin-left: 10%;
width: 80%;
display: flex;
flex-direction: column;
align-items: center;
}
section p {
font-size: 20px;
padding: 10px;
text-align: center;
color: rgb(28, 56, 40);
}
section h1 {
font-size: 30px;
color: rgb(28, 56, 40);
}
</style>
</head>
<body>
<header>
<div class="navBar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
</header>
<section>
<h1>Welcome To Code for setting background image opacity</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae animi
fugiat sequi quia assumenda tenetur,
nihil optio eos harum consequatur? Eligendi, odio assumenda veritatis
consequatur perferendis dolore totam
tempora quia. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quae soluta quis quibusdam nisi
provident magnam. Quasi sit aliquam optio eveniet quas laboriosam cumque
tempora, ratione atque debitis
officia? Veritatis, Lorem ipsum dolor sit amet consectetur adipisicing
elit. Ratione, similique ducimus at
iste ad laboriosam asperiores hic accusantium? Veniam voluptatibus itaque
maiores omnis facere autem,
ratione nisi aliquam blanditiis ut maxime, natus architecto esse dolorem
corrupti suscipit beatae! Assumenda
cupiditate ad corporis numquam eligendi repudiandae possimus consequatur,
enim porro facere aliquam illo
ullam tenetur nobis doloribus a id. Nisi, temporibus? Consectetur provident
laboriosam culpa. </p>
</section>
</body>
</html>
Comments
Post a Comment