Editing the Remaining Pages

Need a little more pratice? In this article we explain how to edit the HTML and CSS of the remaining pages of our project. Follow along with the instructions and your Nova theme will be up and running in no time.

about.html

Step 1:

Open the about.html for editing and replace the Lorum Ipsum text with the text that will be on your website.

Step 2:

Now add an active class to the About link This class will be created in the “Adding the Additional CSS” section below.

<a class="link-text nav-link active" href="about.html">About</a>

services.html

Step 1:

Open the services.html for editing and replace the Lorum Ipsum text with the text that will be on your website.

Step 2:

Now add an active class to the Services link. This class will be created in the “Adding the Additional CSS” section below.

<a class="link-text nav-link active" href="services.html">Services</a>

contact.html

Step 1:

Open the contact.html for editing and replace the Lorum Ipsum text with the text that will be on your website.

Step 2:

Now add an active class to the Contact link. This class will be created in the “Adding the Additional CSS” section below.

<a class="link-text nav-link active" href="contact.html">Contact</a>

Adding the CSS Rules

Now that we have completed the HTML pages we can start editing the CSS! We have already taken care of the Sitewide and Index CSS in the first article. Here we will focus on getting the rest of the pages prettyfied.

About CSS

Step 1:

Open the custom.css file for editing along with the about.html

Step 2:

The team-member-info-row and team-member-image on the about page need a little bit of spice. Add a border to the team-column class and give the team-image pictures some corners!  

.team-member-info-row {
	border-top: solid 1px #eee;
	border-bottom: solid 1px #eee;
}

.team-member-image {
	border-radius:50px;
}

Step 3:

Add a small border-radius to the process-images using the code below:

.process-image {
	border-radius: 10px;
}

Step 4:

Center the team-member-social buttons at the tablet (768px) breakpoint. You can do this by adding this code to the bottom of the custom.css file:

@media screen and (max-width: 768px) {
.social-media.team-member-social {
	text-align: center;
}
}

Services CSS

Step 1:

Open the custom.css file for editing along with the services.html.

Step 2:

For the services page only one class needs to be created for the services-image-option-1 class to round the corners of the three images.  

.services-image-option-1 {
	border-radius:20px
}

Contact CSS

Step 1:

Open the custom.css file for editing along with the contact.html

Step 2:

The contact.html page has a map header image. This will give the contact page a little flare by adding a bit of color to the page. To accomplish this enter:  

.header-map-bg {
	background: url('../img/contact-map-bg.png');
	background-size:cover;
	border-radius: 0 0 5px 5px;
}

You're all done!

You are now ready to upload your website for you and your customers to enjoy.