Website portal page [Fully responsive] 2 styles to choose from

[Mahan]

Hi everyone,
I was a little bored so I decided to make this portal page and share it with you guys for free.

If you know how to code HTML and CSS then you can go ahead to the end of this thread and just download the files. If not then read this thread since I will be explaining how it works.

First thing first, there are 2 styles with this code.
You can view them yourself here.
Example of style 1: http://www.blasticdesigns.com/projects/freebies/portal/example1.html
Example of style 2: http://www.blasticdesigns.com/projects/freebies/portal/example2.html

This is an example of what style 1 can look like with proper images:

Spoiler

RESPONSIVE
Both of these styles are fully responsive for any screen size.

Style 1:

Spoiler

Style 2:

Spoiler

So now that you have seen what they look like we can get to installing this code.

INSTALLATION:

1. Download portal.zip from the bottom of this thread.
2. As you can see in the folder there is a style.css and 2 .html files.
3. Upload the style.css alongside the .html file that you prefer (1 or 2) to your website.
4. Change the image links to your own images.

HOW TO
To change the images.
Style 1:

1. Open "style.css" with a program like Notepad++
2. Go down to line 50.
3. The first 4 links are for the 4 portal images before they are hovered.
4. Change the URL of the images to your own image.
5. As you see below, change icon.jpg to your own DEFAULT image and change icon2.jpg to the image that you want to show when icon.jpg is hovered.

.blastic-portal span .home {
    background-image: url('icon.jpg');
}
 
.blastic-portal span .home:hover {
        background-image: url('icon2.jpg');
    }

Style 2:

1. Open the .html file (by default it is example2.html
2. go down to line 4
3. simply change the image destination in the lines 4 to 7

<span><a href="#"><img src="icon.jpg" /></a></span>

Give this thread a like if you liked the portal image and comment below if you had any questions.