Previous Lesson: Lesson 37: Album Template From Bootstrap
In this lesson, we’ll add our greetings and email button to our website. This will be a clickable email button for our visitors.
Let’s start with the greetings that we will have at the top part of our homepage:
![](https://zeddrix.com/wp-content/uploads/2020/03/portfolio-project-sketch-9.jpg)
Right now, we have that Album example here:
![This image has an empty alt attribute; its file name is Screen-Shot-2020-03-17-at-7.08.24-AM-1024x622.png](https://zeddrix.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-17-at-7.08.24-AM-1024x622.png)
Well, that’s about to change.
Hi! I’m Zedd!
Look for the Album example on our code:
![](https://zeddrix.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-17-at-7.07.32-AM-1024x640.png)
Yes, that’s it. Now let’s DELETE it. And then change it to our greetings:
![](https://zeddrix.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-17-at-7.08.48-AM-1024x640.png)
On our website:
![](https://zeddrix.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-17-at-7.08.24-AM-1024x622.png)
Refresh:
![](https://zeddrix.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-17-at-7.08.33-AM-1024x640.png)
Nice. Below our greetings, we need to enter something short about ourselves and about our portfolio website.
Short and Sweet
Let’s locate that “Something short and . . .” on our code:
![](https://zeddrix.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-17-at-7.11.40-AM-1024x640.png)
This will be the end of this paragraph:
![](https://zeddrix.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-17-at-7.11.15-AM-1024x640.png)
Okay now let’s DELETE this:
![](https://zeddrix.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-17-at-7.12.16-AM-1024x640.png)
Then, put anything that you want to say about yourself, about the contents of our portfolio website, etc.:
![](https://zeddrix.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-17-at-7.35.33-AM-1024x640.png)
On our website:
![](https://zeddrix.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-17-at-7.33.39-AM-1024x640.png)
Refresh:
![](https://zeddrix.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-17-at-7.36.38-AM-1024x638.png)
Nice. Now let’s take care of those two buttons.
Email me
Look for the Secondary action button:
![](https://zeddrix.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-17-at-7.52.16-AM-1024x640.png)
DELETE that line:
![](https://zeddrix.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-17-at-7.52.26-AM-1024x640.png)
Let’s see what it looks like now:
![](https://zeddrix.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-17-at-7.55.21-AM-1024x640.png)
Okay. Select Main call to action:
![](https://zeddrix.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-17-at-7.53.11-AM-1024x640.png)
We don’t want to have that button name so we’ll change it to Email me:
![](https://zeddrix.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-17-at-7.53.25-AM-1024x640.png)
And that should say Email me inside the button.
email Address
Of course, we need to lead the one who clicks on this to our email address, not just on a mere octothorpe here:
![](https://zeddrix.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-17-at-7.53.44-AM-1024x640.png)
Instead, we’ll change this to an actual link by saying mailto:
![](https://zeddrix.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-17-at-7.54.00-AM-1024x640.png)
And then we’ll put our email address like this (this is mine):
![](https://zeddrix.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-17-at-7.54.36-AM-1024x640.png)
On our website:
![](https://zeddrix.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-17-at-7.55.59-AM-1024x640.png)
Upon clicking on the Email me button, it will ask for a mail account provider:
![](https://zeddrix.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-17-at-7.56.18-AM-1024x637.png)
Now, carry on! Do your thing. Before ending this lesson, we’ll do a Git commit to GitHub:
![](https://zeddrix.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-17-at-7.59.58-AM-1024x640.png)
Alright! We were able to add our greetings and an email button to our website! On the next lesson, we’ll talk about how to put our copyright at the footer.