(Content) Welcome website background
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body {
color: beige;
background-color: black;
margin: 0px;
padding: 0px;
}
header::before{
content: "";
background: url('https://source.unsplash.com/random') no-repeat center center/cover;
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
top: 0;
left: 0;
opacity: 0.3;
}
h2{
font-size: 3rem;
}
}
section{
display: flex;
flex-direction: column;
}
.ul {
display: flex;
}
li {
padding: 20px 30px;
list-style: none;
}
section{
margin: 20px 20px;
/* border: 2px solid red; */
padding: 20px 20px;
height: 200px;
text-align: center;
justify-content: center;
}
.p{
font-size: 18px;
}
</style>
<body>
<header>
<div class="nav">
<ul class="ul">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Services</li>
</ul>
</div>
</header>
<section>
<h2>Welcome</h2>
<p class="p" >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut hic autem dolorum iusto totam minus, maxime
molestiae vitae ex assumenda laboriosam aspernatur tenetur quibusdam, illum nulla? Deleniti magnam vel,
dignissimos, recusandae adipisci quam explicabo veritatis commodi impedit praesentium velit repellat
culpa dolorem porro. Sed veritatis quam iusto veniam aliquid? Dicta.</p>
</section>
</body>
</html>
Comments
Post a Comment