Harrrr
Regular Member
- Nov 5, 2017
- 332
- 169
Hi I'm randomly doing website hero, in the code below I put a div to cover the hero part including the header to make a full screen hero background. Not sure whether it's done that way by other people. I'd just like to know.
Here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Barack</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="bg">
<header>
<h2 class="logo"><a href="">True</a></h2>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</header>
<div class="banner-area">
<h3>That's me bro</h3>
<a href="" class="btn">Yeah</a>
</div>
</div>
</body>
<style>
/*defaults******/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
/*header and hero stuff*****/
header{
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 30px 10%;
}
ul{
display: flex;
flex-direction: row;
}
li{
list-style: none;
padding: 1em;
}
nav a{
text-decoration: none;
color: white;
}
nav a:hover{
color: lightcoral;
}
.logo{
font-weight: 500;
font-style: oblique;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
padding: 1em;
}
.logo a{
color: white;
text-decoration: none;
}
/*Top background******/
.bg{
background-attachment: fixed;
background: url(../img/image.jpg);
}
/*banner-area*/
.banner-area{
display: flex;
flex-direction: column;
align-items: center;
height: 90vh;
}
.banner-area h3{
color: white;
font-size: 5em;
padding-top: 2.3em;
padding-bottom: .5em;
}
.banner-area a{
background: white;
color: black;
border-radius: 50px;
text-decoration: none;
font-size: 3em;
padding:.3em .5em;
}
.banner-area a:hover{
background: gold;
}
</style>
</html>
Here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Barack</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="bg">
<header>
<h2 class="logo"><a href="">True</a></h2>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</header>
<div class="banner-area">
<h3>That's me bro</h3>
<a href="" class="btn">Yeah</a>
</div>
</div>
</body>
<style>
/*defaults******/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
/*header and hero stuff*****/
header{
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 30px 10%;
}
ul{
display: flex;
flex-direction: row;
}
li{
list-style: none;
padding: 1em;
}
nav a{
text-decoration: none;
color: white;
}
nav a:hover{
color: lightcoral;
}
.logo{
font-weight: 500;
font-style: oblique;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
padding: 1em;
}
.logo a{
color: white;
text-decoration: none;
}
/*Top background******/
.bg{
background-attachment: fixed;
background: url(../img/image.jpg);
}
/*banner-area*/
.banner-area{
display: flex;
flex-direction: column;
align-items: center;
height: 90vh;
}
.banner-area h3{
color: white;
font-size: 5em;
padding-top: 2.3em;
padding-bottom: .5em;
}
.banner-area a{
background: white;
color: black;
border-radius: 50px;
text-decoration: none;
font-size: 3em;
padding:.3em .5em;
}
.banner-area a:hover{
background: gold;
}
</style>
</html>