Hello there! Today in Part 2(Part 1) of this series, we’ll dive into the styling of our website by using CSS. By the end of this tutorial, we’ll have a responsive webpage that makes use of the parallax effect. Cool stuff!😀
CSS
Let’s start by creating a style file and including it into our HTML page.
I want you to create a new folder, called style on the same directory as the file from the previous tutorial and inside that folder, we’ll create a file called style.css.
We need to make sure that the file extension is .css because that’s what tells the browser top process the rules in this file as style rules.
Now we should include the css file into our HTML from the last article.
In order to do so, we’ll open the index.html file we created last time and at the top of the file, inside the <head> tag we’ll put the reference to our styles and it will look like this:
Now that we have added the reference to our CSS file, we can start styling our page.
We’ll start by adding some general styling to the entire page, then we can move on to styling the different rows where we’ll have our images.
body, html {
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #777;
}
Pretty straight forward code. It simply tells the browser to make sure our page fills the screen, set the default font and the default font color.
Now we can add the styling for the css classes we added on the first part of the tutorial.
.bgimg-1, .bgimg-2, .bgimg-3 {
position: relative;
opacity: 0.9;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bgimg-1 {
background-image: url("../img/img_parallax.jpg");
min-height: 100%;
}
.bgimg-2 {
background-image: url("../img/img_parallax2.jpg");
min-height: 400px;
}
.bgimg-3 {
background-image: url("../img/img_parallax3.jpg");
min-height: 400px;
}
Before you run this, make sure to replace all the background-image URLs with images that are either on your computer or on the internet(just copy the link to it). You’ll get the images that I’m using on the git repository for this project in Part 3 of this tutorial.
Now let’s take a look at how the page looks after these style rules are applied.
There you have it! With those simple steps, we managed to build a website that uses the parallax effect from scratch using some neat CSS techniques.
On the next and final part of this tutorial series, we’ll look into some JavaScript. We’ll make a request to an external API and populate our website with pictures of various cities around the world.
Thank you for reading,
Gásten Sauzande.