How to remove the empty space above the sneaker headings ? - Build a product landing page

1

FOOTER empty space solved!

Site link: https://marccodez.github.io/Product-landing-page/

Screen Shot 2020-04-16 at 12.06.58 pm
Screen Shot 2020-04-16 at 12.06.58 pm1630×1244 282 KB

HTML code:

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="stylesheet.css" />
	</head>

	<header id="header">
		<img id="header-img" alt="sneaker" src="sw97.png" />
		<h1 style="color: #2b2262;">Vegan</h1>
		<h1 style="color: #f39a96;">
			Sneaker
		</h1>
		<nav id="nav-bar">
			<ul class="header-ul">
				<li>
					<a class="nav-link" href="#form">Sign Up</a>
				</li>
				<li>
					<a class="nav-link" href="#video">Video Review</a>
				</li>
				<li>
					<a class="nav-link" href="#releases">New Releases</a>
				</li>
			</ul>
		</nav>
	</header>

	<body>
		<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
		<div class="sign-up">
			<form id="form" action="https://www.freecodecamp.com/email-submit">
				<h1>Keep up to date with the latest vegan sneakers! Sign up now!</h1>
				<label for="email"></label>
				<input
					name="email"
					id="email"
					type="email"
					placeholder="Enter your email address"
					required
				/>
				<div>
					<input id="submit" type="submit" />
				</div>
			</form>
		</div>

		<div class="video-section">
			<div class="video">
				<h1>Video Review</h1>
				<iframe
					id="video"
					width="600"
					height="400"
					src="https://www.youtube.com/embed/FEA_hPCU3x0"
					frameborder="0"
					allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
					allowfullscreen
				></iframe>
			</div>
		</div>

		<div id="releases">
			<div id="pricing-box">
				<h4>Travis Scott AF1 Sail</h4>
				<img id="travis" alt="sneaker" src="af1.png" />
				<p class="price">$380</p>
				<p>fdfd</p>
				<p>fdfd</p>
				<p>fdfd</p>
				<p>fdfd</p>
				<a href="" class="btn">Select</a>
			</div>

			<div id="pricing-box">
				<h4>Nike Air Max Light 2</h4>
				<img id="airmax" alt="sneaker" src="max2l.png" />
				<p class="price">$500</p>
				<p>fdfd</p>
				<p>fdfd</p>
				<p>fdfd</p>
				<p>fdfd</p>
				<a href="" class="btn">Select</a>
			</div>

			<div id="pricing-box">
				<h4>Nike Air Max 270 Bauhaus</h4>
				<img id="bauhaus" alt="sneaker" src="bauhaus.png" />
				<p class="price">$380</p>
				<p>fdfd</p>
				<p>fdfd</p>
				<p>fdfd</p>
				<p>fdfd</p>
				<a href="" class="btn">Select</a>
			</div>
		</div>

		<footer>
			<div class="footer-nav">
				<ul>
					<li><a href="">Privacy</a></li>
					<li><a href="">Terms</a></li>
					<li><a href="">Contact</a></li>
				</ul>
			</div>
			<div class="copyright">
				<p>Copyright 2020, marccodez</p>
			</div>
		</footer>
	</body>
</html>

CSS code:

html {
	background-color: #fcf2bb;
	font-family: Arial, Helvetica, sans-serif;
}

#header-img {
	width: 150px;
	height: 160px;
}

#header {
	top: 0;
	width: 100%;
	display: flex;
	align-items: center;
	position: fixed; /* nav bar always at the top of the viewport solution */
	background-color: #fcf2bb;
	z-index: 1000; /*" The z-index property specifies the stack order of an element.
    An element with greater stack order is always in front of an element with a lower stack order." */
}

.header-ul {
	list-style: none;
	display: flex;
	justify-content: space-around;
}

@media screen and (max-width: 650px) {
	header {
		flex-direction: column;
	}
	nav#nav-bar ul {
		text-align: center;
	}
}
a {
	text-decoration: none;
}
nav {
	width: 100%;
}

.sign-up {
	height: 600px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.sign-up input {
	padding: 8px;
	margin: 5px;
}

.sign-up input#email {
	width: 250px;
	font-size: 15px;
}

.sign-up input#submit {
	width: 150px;
	border: none;
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
	background: #f39a96;
}
#form {
	text-align: center;
	margin-bottom: 20px; /* more than 20 creates a responsive issue */
}

.video-section {
	height: 500px;
	display: flex;
	justify-content: center;
	align-content: center;
	margin-bottom: 15px;
	padding-bottom: 80px;
}

.video {
	text-align: center;
}

#releases {
	display: grid;
	gap: 30px;
	align-content: center;
	justify-content: center;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	grid-auto-rows: repeat(3, 300px);
	margin-bottom: 5px;
}

#travis {
	width: 150px;
	height: 100px;
}

#airmax {
	width: 150px;
	height: 105px;
}

#bauhaus {
	width: 150px;
	height: 105px;
}

#pricing-box {
	text-align: center;
	line-height: 40px;
	border: 2px solid black;
}

#pricing-box h4 {
	background: #2b2262;
	color: white;
}

#pricing-box .price {
	font-weight: bold;
	font-size: 25px;
}

#pricing-box .btn {
	background: #f39a96;
	display: block;
	color: black;
	width: 150px;
	margin: 15px auto;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 18px;
}

footer {
	background: #454f4e;
	text-align: end;
	padding: 5px 25px;
	color: white;
}

.footer-nav ul {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	list-style-type: none;
}

.footer-nav ul li {
	margin-left: 15px;
}

.footer-nav ul li a {
	color: white;
}

.copyright {
	opacity: 0.7;
}
2

h4 tag has default top and bottom margin set to 1.33 em. This is how you remove it
h4{
margin-top:0px;
}

1 Like
3

I swear i attempted to that! I didn’t know that h4 had default values, thank you so much!! makes a lot of sense :open_mouth:

1 Like