2. (Part 2) Name and profile picture

By Andrei Boscor

The HTML part

In order to create the name element we need to add the following to our code:

<div class="square-box"></div>
<div class="square-content">
    <h3>Your Name Here</h3>
</div>

Remember that this must be INSIDE the <div id=“cover photo”> element, after the images.
Whilst you’re at it, type your name in the <h3> tag.

For the profile picture we simply need to add this:

<div id="profile_pic">
    <img src="https://sonnyandchad.files.wordpress.com/2010/08/demi_lovato_profile.jpg" />
</div>

Remember that this must be OUTSIDE the <div id=“cover photo”> element, before the end of the </body>

In order to transfer your own Facebook profile picture do the following:

Open your profile picture on Facebook.
Right click and select “Copy Image Address”
Now paste the link in the <img> tag.

The CSS part

Now our idea is to create a black line on the screen that has the opacity set to 50% and to center the name there.

The end result will look something like this:

In our stylesheet.css file, we will first create the properties for the box:

.square-box{
    position: relative;
    width: 100%;
    height: 40px;
    overflow: hidden;
    background: #000000;
    opacity: 0.5;
    filter: alpha(opacity=50); // For IE
    -moz-opacity:0.5; // For Firefox < 5.0
}

The width is 100% so it stretches out across the screen and the height is 40px for it to be big enough to fit text. The background color is set to black and the position is relative. The opacity filters are there for all browsers and set to 50%.

Now we have to style the text:

.square-content{ 
    position:  absolute;
    top:10px;
    left: 0;
    bottom: 0;
    right: 0;
    color: white;
    text-align: center;
}

This will simply put your name in the middle of the black line.

The next step is to center the profile picture and resize it:

#profile_pic img{
    position: relative;
    display:block;
    margin-left:auto;
    margin-right:auto;
    max-height: 40%;
    max-width:20%;
}

Margin-left and -right auto means that the image is centered. Max-height and max-width are set for browser window rescaling.

References:

Next lesson

In the next lesson we will be creating an about page, with a dynamic vertical menu, that will allow viewers to quickly switch between sections.