How to Create a Web Design Portfolio with Google Sites (Part 1)

How to Create a Web Design Portfolio with Google Sites (Part 1):

The Definitive Guide

Today I want to show you how to create a personal web design portfolio site with Google Sites.

I'll be taking you through the entire process so as to achieve the same results as mine.

This site has:

An animated button.

A comment slide.

Awesome Font Icons.

A circular image.

And emoji.

We'll be creating each section at a time.

Let's dive right in.

Chapter 1

Setting The Theme

Chapter 2

Build The Head Section

Chapter 3

Build The Body Section

Chapter 4

Build The Footer Section

Chapter 1

Setting The Theme

To set the theme for this site follow these steps carefully.

Step 1:

Look for Themes at the sidebar at the right side of your page.

Click on Themes then click on the plus icon to create a custom theme.

Your Screen should look exactly like this;

Now, give the theme a name and click next.

Your screen should look like this;

Now, let's create a custom color for the Theme.

Click on Custom Colors, and copy and paste the colors below into the underlined area.

The first color: #1d1e21

The second color: #aaaaaa

The third color: #f9f9f9

The fourth color: #1c1c1c

The 5th color: rgb (29, 30, 33)

After you're done with that click next.

You should be seeing this;

Animated Button Code:

<!DOCTYPE html>

<html>

<head>

<style>

.button {

display: inline-block;

background-color: #29292C;

border: none;

color: #FFFFFF;

text-align: left;

font-size: 18px;

font-family: Poppins;

padding: 10px 5px 10px 6px;

width: 260px;

transition: all 0.5s;

cursor: pointer;

margin: 5px;

}

.button span {

cursor: pointer;

display: inline-block;

position: relative;

transition: 0.5s;

}

.button span:after {

content: '\00bb';

position: absolute;

opacity: 0;

top: 0;

right: -20px;

transition: 0.5s;

}

.button:hover span {

padding-right: 25px;

}

.button:hover span:after {

opacity: 1;

right: 0;

}

</style>

</head>

<body>

<h3 class="button" style="vertical-align:middle"><span>Available for freelance work </span></h3>

</body>

</html>

Awesome Font Icons For The Services Section

<!DOCTYPE html>

<html>

<head>

<title>Font Awesome Icons</title>

</head>

<body>

<h2 style="font-size:25px;font-family:poppins;color:#ffffff">Graphic <br/> Design</h2>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Font Awesome Icons</title>

</head>

<body>

<h2 style="font-size:25px;font-family:poppins;color:#ffffff">Web Design</h2>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Font Awesome Icons</title>

</head>

<body>

<h2 style="font-size:25px;font-family:poppins;color:#ffffff">Branding <br/> & <br/>Printing</h2>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Font Awesome Icons</title>

</head>

<body>

<h2 style="font-size:25px;font-family:poppins;color:#ffffff">Web <br/> Development</h2>

</div>

</body>

</html>

Awesome Font Icons For The Footer Section

<!DOCTYPE html>

<html>

<head>

<style>

body {

font-size:20px;

}

a {

color: white;

}

</style>

</head>

<body>

</body>

</html>

Create a DIY Website

Computing

Breaking News

How to Create a Web Design Portfolio with Google Sites (Part 1)

How to Create a Web Design Portfolio with Google Sites (Part 1):

The Definitive Guide