FCC Portfolio

by poca123

HTML

<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" type="text/css" href="css/stylesheet.css"/>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
		<!-- <script type="text/javascript" src="https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js"></script> -->
		<title>Portfolio</title>
	</head>
	<body>
		<div class="container">
			<div class="header">
				<p>My Portfolio <span class="blink">|</span></p>
			</div>
			<div id="menuNav" class="menu">
				<div id="box1"><a class="fill-div" href="#anchor1">1 ABOUT</a></div>
				<div id="box2"><a class="fill-div" href="#anchor2">2 PROJECTS</a></div>
				<div id="box3"><a class="fill-div" href="#anchor3">3 CONTACT</a></div>
			</div>
			<div class="about">
				<h1 id="anchor1" class="title">About</h1>
				<div id="codeAbout">
					<p>
						<span class="number">1</span>&nbsp;&nbsp;&nbsp;Hello, my name is Fabien and i'm 24 years old.</br>
						<span class="number">2</span>&nbsp;&nbsp;&nbsp;I want to become a developpers !</br>
						<span class="number">3</span>&nbsp;&nbsp;&nbsp;Welcome to my simple portfolio for the FCC challenge <img class="blink" style="width: 20px; color: white;" src="file:///C:/Users/Fabien/Downloads/cursor%20(1).svg"></i>
					</p>
				</div>
			</div>
			<div class="projects">
				<h1 id="anchor2" class="title">Projects</h1>
				<div id="linkProject">
					<div class="imageProject"><a class="" href="#"><img src="https://image.noelshack.com/fichiers/2018/04/2/1516741598-miniature1.png" alt="" /></a></div>
					<div class="imageProject"><a class="" href="#"><img src="https://image.noelshack.com/fichiers/2018/04/2/1516741598-miniature1.png" alt="" /></a></div>
					<div class="imageProject"><a class="" href="#"><img src="https://image.noelshack.com/fichiers/2018/04/2/1516741598-miniature1.png" alt="" /></a></div>
					<div...

CSS

* {
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	list-style: none;
}

.iHover {
	transition: all 1s linear;
   -webkit-transition: all 1s linear;
   -moz-transition: all 1s linear;
}
.iHover:hover {
	color: red;
}
i {
	color: white;
	margin: 0px 15px 0 15px;;
}
#sLink ul li{
	display: inline-block;	
}
.container {
	display: grid;
	height: 100%;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: 200px 500px 500px auto auto 80px;
	grid-gap: 10px;
	
	grid-template-areas:
		"h h h h h h h h h h h h"
		"m m m m m m m m m m m m"
		"a a a a a a a a a a a a"
		"p p p p p p p p p p p p"
		"c c c c c c c c c c c c"
		"f f f f f f f f f f f f"

}

.header, .menu, .about, .contact, .projects, .footer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 2em;
	color: #ffeead;
}
.header {
	grid-area: h;
}
.menu {
	grid-area: m;
	color: #ffeead;

}
.about {
	grid-area: a;
}
.projects {
	grid-area: p;
}

.contact {
	grid-area: c;	
}
.footer {
	grid-area: f;
}


html, body {
	background-color: #ffeead;
	margin: 10px;
}

.container > div:nth-child(1n) {
	background-color: #96ceb4;  
}

.container > div:nth-child(2n) {
	background-color: #ff6f69;
}

.container > div:nth-child(3n) {
	background-color: #88d8b0;
}

.container > div:nth-child(4n) {
	background-color: #ffcc5c;
}

.container > div:nth-child(5n) {
	background-color: brown;
}


#menuNav {
	display: flex;
	position: relative;
}
#box1 {
	background-color: dodgerblue;
	position: absolute;
	height: 100%;
	left: 0px;
	width: 33.3333%;
	
	text-align: center;
	line-height: 500px;
}
#box1:hover {
	background-color: #006cd5;
}
#box2 {
	background-color: orangered;
	position: absolute;
	height: 100%;
	width: 33.3333%;
	
	text-align: center;
	line-height: 500px;
}
#box2:hover {
	background-color: #bf3300;
}
#box3 {
	background-color: #9b59b6;
	position: absolute;
	right: 0px;
	height: 100%;
	width: 33.3333%;
	
	text-align: center;
	line-height: 500px;
}
#box3:hover...