Product Landing Page FCC

by poca123

HTML

<html>
	<head>
		<meta charset="utf-8"/>
		<link rel="stylesheet" type="text/css"  href="css/stylesheet.css"/>
		<!--fonts-->
		<link rel="stylesheet" type="text/css" href="fonts/fonts.min.css" />
		<title>Build a Product Landing Page</title>
	</head>
	
	<body>
		<div id="main-page">
			<div class="content">
				<header>
					<img id="header-img" src="https://shadow.tech/static/svg/logo-white.svg" alt="logo"/>
					<nav id="nav-bar">
						<ul>
							<li><a href="#anchor1" class="nav-link">Performance</a></li>
							<li><a href="#anchor2" class="nav-link">Apps</a></li>
							<li><a href="#anchor3" class="nav-link">Buy</a></li>
							<div class="clear"></div>
						</ul>
					</nav><!--end #nav-bar-->
				</header>
				
				<div id="newsletter">
					<form id="subscription-form" method="get" action="https://www.freecodecamp.com/email-submit">
						<label id="email-label" for="name">SUBSCRIPTION</label>
						<input type="email" id="email" name="email" placeholder="email..." required>
						
						<input type="submit" id="submit" value="submit"/>
					</form><!--end #subscription-form-->
				</div><!--end #newsletter-->
				
				<main>
					<div id="main-content">
						<h2>Welcome to a new world</h2>
						<h1 id="anchor1" class="title">The best, without a doupt</h1>
						<section id="section1">
							<div id="div1">
								<img class="imgSVG" src="https://shadow.tech/static/svg/ultra-performance.svg" alt="ultraperf-img"/>
								<h3 class="sectionTitle">Ultraperformance</h3>
								<p>8 dedicated thread of a Intel XERO, 12Go of RAM and 256Go of stockage.</p>
							</div>
							<div id="div2">
								<img class="imgSVG" src="https://shadow.tech/static/svg/zero-latence.svg" alt="zeroLatence-img"/>
								<h3 class="sectionTitle">Zero latence</h3>
								<p>Zero lag added, a smooth experience exactly like on a local high-end computer.</p>
							</div>
							<div id="div3">
								<img class="imgSVG" src="https://shadow.tech/static/svg/HD.svg"...

CSS

body {
	font-size: 17px;
	font-family: 'Proxima Nova', Georgia, sans-serif;
}

a.fill-div {
	display: block;
	width: 100%;
	text-decoration: none;
	color: black;
	padding: 20px;
}

#div7:hover, #div8:hover, #div9:hover {
	border: 2px solid;
	border-image: linear-gradient(to bottom,#01d3a4,#029d7b);
	border-image-slice: 1;
}
#div7, #div8, #div9 {
	box-sizing: border-box;
}

/*SVG images*/
.imgSVG{
	width: 60px;
	height: 50px;
}
.sectionTitle {
	margin-bottom: 30px;
}
#main-content h2:first-child{
	margin-bottom: 50px;
	font-size: 50px;
}
#anchor2, #anchor3 {
	margin-top: 50px;
}
#section1, #section2 {
	/* background-color: yellow; */
	background-color: white;
	height: auto;
}
#section3 {
	background-color: rgb(234, 234, 234);
}
#section3 #div7, #section3 #div8, #section3 #div9 {
	background-color: rgb(251, 251, 251);
}
#section1, #section3 {
	display: flex;
	flex-direction: row;
	justify-content: center;
}
#section3 p {
	line-height: 2;
}
#div1, #div4, #div7{
	/* background-color: red; */
}
#div2, #div5, #div8 {
	/* background-color: green; */
}
#div3, #div6, #div9 {
	/* background-color: gray; */
}
#div1, #div2, #div3, #div7, #div8, #div9 {
	width: 215px;
	margin: 40px;
}
#div4, #div5, #div6 {
	width: 300px;
	margin: 40px;
}
#section2Content {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

#div6 {
	display: inline-block;
	width: 500px;
	margin: 20 auto;
}



* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}


html, body {
	height: 100%;
	margin: 0;
}
.content {
	min-height: 100%;
	padding-bottom: 50px;
}



.footer {
	height: 50px;
	margin-top: -50px;
	/* background-color: red; */
	background-color: black;
	color: white;
	
	text-align: center;
	line-height: 50px;
}

#main-content {
	margin: 0 auto;
    width: 100%; 
	background-color: rgb(222, 222, 222);
	text-align: center;
}

#newsletter {
	width: 400px;
	margin: 0 auto;
	background-image: linear-gradient(to bottom,#01d3a4,#029d7b);
	padding: 50px;
	margin-bottom: 10px;
	margin-top:...