add an arrow up on the bottom centre of section 3 to bring the user back up to section 1.
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section id="contact-me" class="contact_section">
</section>
</body>
<footer>
</footer>
</html>
You don't have to use a programming language like JavaScript to achieve it, you can use HTML with what's called anchor links.
Essentially you would give an id to the element you want to be brought down to. You would then just write a link with an href equal to the id with the number sign before the id name. For example if you wanted the html document to reach the div with the id "tt":
<a href="#tt"> Link</a> --> Will send the browser down to the div with an id "tt"
If you had an image of an arrow, you could just wrap the anchor link around the image i.e.:
<a href="#tt"> <img src = "arrow.jpg"> </img> </a>
Added relevant code below:
I added the id section2 to the i element with the class section2, and just surrounded it with the anchor tag. I'm assuming by section3, you meant the section with the id contact-me. Added the link for that portion as well.
You're going to have to draw the up arrow on the last part yourself, but just copy the same style for the hyperlink. Wrap the anchor link (<a> </a>) around the up arrow, and give it an href attribute of "#section1", and also put section1 as the id for the section with the class name "section1".
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<title>Liam Docherty | London Web Developer & GFX designer</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<style>
body{
margin: 0;
padding: 0;
}
header{
height: 10vh;
background-color: #4D5061;
}
nav ul{
list-style-type: none;
overflow: hidden;
text-align: center;
}
nav ul li a{
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family:'Roboto', sans-serif;
}
nav ul li{
padding-bottom:6px;
position:relative;
display: inline-block;
}
nav ul li:after{
content:'';
position:absolute;
right:50%;
bottom:0;
left:50%;
height:3px;
background-color:red;
border-radius:9px;
transition:all .2s;
}
nav ul li:hover:after{
right:0;
left:0;
}
a:hover{
color:red;
text-decoration:none;
}
#logo{
padding-top: 2vh;
padding-left: 20px;
float: left;
}
section{
position:relative;
}
.section1{
height:93vh;
background-color: #FFFFFF;
text-align: center;
}
.section2{
height:93vh;
background-color: #A59E8C;
text-align:center;
color:white;
padding-top:23vh;
}
.contact_section{
height:93vh;
background-color: grey;
}
.hero{
height:750px;
}
h1{
font-family:'Roboto', sans-serif;
color: white;
}
.container-fluid{
padding: 60px 50px;
}
.bg-grey{
background-color: #f6f6f6;
}
.logo-small{
color: #000000;
font-size: 50px;
}
.logo{
color: #000000;
font-size: 200px;
}
@media screen and (max-width: 768px){
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
.fa-angle-down{
color: #4D5061;
}
footer{
height:10vh;
}
}
</style>
<body>
<header>
<div id="logo">
<img src="http://placehold.it/60x60" alt=""></div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Units</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#contact-me">Contact Me</a></li>
</ul>
</nav>
</header>
<section class="section1">
<div class="hero"></div>
<a href= "#section2"><i class="fa fa-angle-down" style="font-size:100px;"></i></a>
</section>
<section class="section2" id = "section2">
<div class="banner">
<h1>What I can offer you</h1>
<p> Feel free to contact me regarding any </p>
<div class="container-fluid text-center">
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-off logo-small"></span>
<h4>Availability</h4>
<p>You can expect a response with 24 hours of the sent message.</p>
</div>
</div>
</div>
</div>
<a href = "#contact-me"> <i class="fa fa-angle-down" style="font-size:100px;"></i></a>
</section>
<section id="contact-me" class="contact_section">
</section>
</body>
<footer>
</footer>
</html>
