I set the buttons to bottom:0; why are they up near the forms? Also I have a second div behind each of the last four boxes it doesn't change background-color?
Also what to do about the video that doesn't show? I have to put in more writing as the post is mostly code, but you could answer that too.
* {
box-sizing: border-box;
}
body {
background-color: green;
}
img {
width: 150px;
height: auto;
}
#header {
position: fixed;
width: 100%;
}
.nav-bar {
width: 100%;
float: right;
background-color: #555;
text-align: justify;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
#nav-bar a.active {
background-color: #740053;
}
.nav-link {
text-decoration: none;
padding: 3px;
display: inline-block;
width: 25%;
color: coral;
}
.ul,
li {
display: inline-block;
}
ul {
border: solid 1px black;
display: flex;
align-items: stretch;
justify-content: space-between;
width: 100%;
margin: 0;
padding: 0;
height: 20px;
}
li {
display: block;
flex: 1 1 auto;
list-style-type: none;
text-align: center;
}
.nav-link:hover {
color: blue;
}
#video-div {
position: relative;
height: 40%;
width: 100%;
top: 100px;
margin-left: 250px;
}
#form {
display: block;
text-align: center;
margin-left: 150px;
margin-right: 150px;
margin-top: 150px;
border-radius: 3px;
background-color: yellow;
border-shadow: 4px;
}
.spacer {
position: relative;
width: 100%;
height: 100px;
margin-bottom: 50px;
}
#email {
margin-top: 50px;
text-align: center
}
#submit {
position: relative;
display: inline;
width: 6em;
top: 30px;
right: 130px;
}
img {
width: 25%;
height: 2vh;
float: left;
}
.box1,
.box2,
.box3,
.box4 {
float: left;
border: 3px solid black;
width: 23%;
height: 300px;
background-color: white;
margin-right: 20px;
overflow: hidden;
}
.innerbox {
width: 100%;
height: auto;
border-bottom: 3px solid black;
display: inline-block;
margin-right: 22%;
text-align: center;
background-color: grey;
}
.btn {
position: absolute;
margin: auto;
bottom: 0;
}
@media (max-width: 100%px) and (min-width: 99%) {}<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome /4.7.0/css/font-awesome.min.css">
<title>Product Landing</title>
</head>
<body>
<header id="header"><img id="header-img" src="https://logos-world.net/huawei-logo/" />
<nav id="nav-bar">
<ul>
<li>
<a class="nav-link" href="#forms">
<i class="fa fa-fw fa-home">Form</i></a>
</li>|
<li>
<a class="nav-link" href="#video">
<i class="fa fa-fw fa-home">Resolution</i></a>
</li>|
<li>
<a class="nav-link" href="#email">
<i class="fa fa-fw fa-home">Status</i></a>
</li>|
<li><a class="nav-link" href="#products"><i class="fa fa-fw fa- home"> Pricing</i></a></li>
</ul>
</nav>
</header>
<main>
<div id="video-div">
<video width="300" height="250" controls id="video" src="https://www.youtube.com/watch?v=TfdRmdUc12w&list=RDTfdRmdUc12w&index=1">
</video>
</div>
<div id="forms">
<form id="form" action="https://www.freecodecamp.com/email-submit">
<label id="email-label">
<h3>Good Resolution Packages for grabs!</h3> Email:<input id="email" type="email" placeholder="Please input your email:" name="email" required/> <input id="submit" value="Submit" type="submit">
</label>
</form>
</div>
<div class="spacer">
</div>
<section id="products">
<div class="box1">
<div class="inner-box">
<h2>Read</h2>
</div>
</div>
<p>
This is the text that hold the information in the "Read" category.
</p>
<button class="btn">Select</button>
</div>
<div class="box2">
<div class="inner-box">
<h2>Learn</h2>
</div>
<p>
This is the text that hold the information in the "Learn" category.
</p>
<button class="btn">Select</button>
</div>
<div class="box3">
<div class="inner-box">
<h2>Write</h2>
</div>
<p>
This is the text that hold the information in the "Write" category.
</p>
<button class="btn">Select</button>
</div>
<div class="box4">
<div class="inner-box">
<h2>Play</h2>
</div>
<p>
This is the text that hold the information in the "Play" category.
</p>
<button class="btn">Select</button>
</div>
</section>
<footer class="footer"></footer>
</main>
</body>
