Part I - Learning

Part II - Preparation

Part III - Writing the Code

Part IV - Templates

Part V - Exercises

Part III - Writing the Code

In this section we will go over the code involved with the adventure camp website.

Logo

Exercises: Create <order>, <tier>, and <pier>, Insert image into a web page

HTML Side

After the <head> section of the web page, we have the <body> section. We use the <body> tag to open it, then use the <wrapper> tag to open the <wrapper>. We have our notes to state the next section is the <!-- Logo Section -->. We are going to open a couple of <:div> classes and put our <:img> in there.
This is what it looks like:

<body>
<wrapper>
<!-- Logo -->
<div class="order tier">
<div class="pier pier1of4">

The very first image on our page is the River Bend logo. The filename is “River-Bend-Logo.png”. The logo size is 262px x 166px. It is not a big image but that is good because it is not going to be big on our page:

River Bend Logo

Here is what the code looks like:

<src="images/River-Bend-Logo.png" alt="River Bend Logo"/>

NOTE: <img> is one of the tags that don't require a closing tag.
NOTE: It is important to have an <alt> tag with all your images. It helps you with the SEO of your web page and it helps those who are visually impaired.

We are not done with the <img> code for the logo to be put in the website. We also want to add a style to the image to set the width and height. Here is the code for the logo order:

<!-- Logo -->
<div class="tier order">
<div class="pier pier1of4">
<img src="images/River-Bend-Logo.png" alt="River Bend logo" style="max-width:60%; height:auto;" />
</div>

See the live version of the "logo" section

 

Navigation

Exercises: Create a List with Navigation

HTML Side

We want to put the contact information and navigation to the right of the logo. This information takes up more room than the logo and we would like it to cover about 75% of the width of the order. So the logo is <pier1of4> and the contact and navigation will be <pier3of4>. Since we want to have the address to have its own look, we add a class named, “address”. As well, we want the navigation to have its own look too, so we add a class named, “navtop”. We will go in the CSS file to define these classes. The navigation is set up using an unordered list.

<!-- Navigation -->
  <div class="pier pier3of4">
    <p class="address">27 River Bend Road,Stoneridge, NR 72465 (495) 316-4500</p>
    <ul class="navtop">
      <li class="navtop"><a href="#">Location</a></li>
      <li class="navtop"><a href="#">Contact</a></li>
      <li class="navtop"><a href="#">Forms</a></li>
      <li class="navtop"><a href="#">Home</a></li>
    </ul>
  </div>
</div>

CSS Side

From the top of our CSS file, we typed in our font families and colors. Here we picked out a font family and color for our contact information. We also want to align this information to the right side of the web page.

.address {
  font-family: 'Roboto', sans-serif;
  color: #172323;
  text-align:right;
}

We picked a font family for the navigation section and also want it to align to the right. We want to display the list of links in a line, make each one about 100px across and add 20px of padding to the left of each link. We want the color of the link to be in the green color but when a visitor moves their mouse over each link, we want the color to change to the light blue. For an added effect, we add a .5sec transition from green to the light blue. We also want the font size to be bigger than the regular content size, so we will use 1.4em.

/* Navigation */
.navtop {
  width:100%;
  font-family: 'Concert One', cursive;
  float:right;
}

.navtop ul {
}

.navtop li {
  display:inline;
  width: 100px;
  padding-left:20px;
}

.navtop a {
  color: #9CCA68;
  text-decoration:none;
  font-size:1.4em;
}

.navtop a:hover {
  transition: 0.5s;
  color:#80CEFF;
}

See the live version of the "navigation" section

 

Title

Exercises: Add <h1> and <h2> tags

This order is a pretty easy and straightforward order. We want our page title and subtitle to span across the web page.

HTML Side

<!-- Title -->
<div class="order tier">
  <div class="pier pier4of4">
  <h1>River Bend Adventure Camp</h1>
  <h2>Where the Outdoors, Learning and Fun Come Together</h2>
  </div>
</div>

 

Header Image

Exercises: Add and Resize Image Across Web Page

We added another image. This time the image expands across the width of the <body> of the web page. The key to this image is in the planning. I knew that I wanted a big image of the river to give the camp a sense of grandness. But at the same time, I didn’t want the image to be too tall and take up too much vertical space. I made the image 1024px x 483px.

HTML Side

<!-- Header Image -->
<img src="images/river-bend.jpg" alt="river bend" style="max-width:100%; height:auto;" />

 

Camp Information

Exercises: Create a Container, Create a List, Add Image

We created another list here, but we did it differently. We could have used a <dl> instead of a <ul> but the way I want the descriptions listed, it is better to do as a <ul> than a <dl>.

HTML Side

Another situation here is that we want all the information in the blue box to be the same height as the image next to it. If we use a <:pier> for each one, the piers will become the height of the information within them. We put them in a <container> tag, we will call it <campContainer>. Within that container, we create 2 tiles. In their respective CSS, the property is set as “flex”. This lets all the flexible items within the container to be the same, regardless of content.

The left side is set up as an <ul>. We use the <b> tag for the list item and leave the item description alone. The right side is set up with an image. The goal is for both sides to be the same height.

<!-- Camp information -->
<div class="campContainer">
<div class="campTile1 campInfoBox">
  <ul class="campInfo">
    <li class="campInfo"><b>4 Week Sessions:</b> Starts last week in June</li>
    <li class="campInfo"><b>Time:</b> 8:30am to 3:45pm (before and after care available)</li>
    <li class="campInfo"><b>Ages:</b> 6 to 16 years of age</li>
    <li class="campInfo"><b>Meals Included:</b> Lunch, 2 snacks and beverages</li>
    <li class="campInfo"><b>Cost:</b> $600/week - Enrollment starts April 1st of each year</li>
    <li class="campInfo"><b>Transportation:</b> Available, but must enquire about our buses near you</li>
  </ul>
</div>
<div class="campTile2"><img src="images/nature-walkway.jpg" alt="Walking path through woods" style="width:100%; height:auto;" />
</div>
</div>

CSS Side

We set up the CSS for another list. Then set up the .campContainer with a flex display and a margin on top to give spacing between this order and the previous order. Next we create two tiles, side-by-side. We will have .campTile1 and .campTile2. The first one handles the text regarding the camp information and the second handles the image. We set up a class, .campInfoBox. The class .campInfoBox sets the background color, the margin and the padding. One final thing we add to the CSS is for when the full width is below 480 pixels. We do not need to see the image on a small screen, so we hide it.

/* Camp Information Section */
.campInfo ul {
}

.campInfo li {
  font-family: 'Merriweather', serif;
  list-style-type: none;
  padding-bottom:15px;
  padding-right:10px;
  margin-top:0px;
}

.campInfo li:first-child {
  padding-top:20px;
}

.campContainer {
  display:flex;
  align-items: stretch;
  margin-top:15px;
}

.campTile1 {
  display:flex;
  min-width:50%;
}

.campTile2 {
  display:flex;
}

.campInfoBox {
  background-color:#80CEFF;
  margin:0px;
  padding:0px;
}

/* GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
.campTile1 { display:block; }
.campTile2 { display:none; }
}

 

Mission Statement

Exercises: Create a Background Image with Text Overlay, Adjust Classes and Attributes for Screen Size, Add Text Shadow

HTML Side

In this section, we want to use an image in the background and have text overlay the image. We could easily do this in Photoshop where we add a text layer over the image layer, then save as a .jpg. The problem with doing that way is the search engines can’t read text in photos or images. This hurts the web page when it comes to SEO. Instead, we will set the image to the width of the web page.

When looking at the image, we have water on the left side that we want to overlay our text. With our current pier configuration, a <pier1of4> will be too small of an area. At the same time, a <pier2of4> will cover too much of the image. To fix this, we will create a <pier1of3>, which will cover a third of the image. We already added the CSS code for this situation. Then in this pier we add our image and set the width and add a top margin of 20px.

To round out our order, we create a <pier2of3> and leave a space in there. The shortcut for leaving a space is holding the [ctrl] key and [spacebar]. You will get a space.

<!-- Mission Statement -->
<div style="backgroundimage:url('images/kayaks-in-water.jpg'); max-width:1024px; height:auto; margin-top:20px; background-repeat:no-repeat;">
<div class="tier order">
<div class="pier pier1of3">
  <h2 class="missionHeader">Our Mission</h2>
  <p class="missionSub">To enrich your child's outdoor experience</p>
  <p class="missionText">The River Bend Adventure Camp is different than the typical summer day camp. We offer outdoor fun-filled activities with an educational twist to it.</p>
</div>
<div class="pier pier2of3"> </div>
</div>
</div>

CSS Side

For CSS we only have 3 classes to create. One for the .missionHeader, one for the .missionSub (subheading) and one for the .missionText. We do have a few attributes to each one. A new one is doing a text-shadow for each of the classes. Since the image in the background is a bit busy, adding a text-shadow for the text makes it easier to read. The CSS behind this order also plays with the sizing of the <missionHeader> and <missionSub> as the web page scales down in size. On a smaller screen, we do not need the text size for these to be as large as they are. So below 480px, we made the font size smaller.

/* Mission Statement */
.missionHeader {
  font-family: 'Roboto', sans-serif;
  font-size:3.0em;
  font-weight:800;
  color:#fff;
  margin-top:0;
  padding-left:10px;
  text-shadow: #000 2px 2px;
}

.missionSub {
  font-family: 'Roboto', sans-serif;
  font-size:2.0em;
  font-weight:800;
  color:#fff;
  text-align:center;
  text-shadow: #000 2px 2px;
  padding-left:10px;
}

.missionText {
  font-family: 'Roboto', sans-serif;
  font-size:1.2em;
  color:#fff;
  text-align:center;
  padding-left:10px;
  text-shadow: #000 1px 1px;
}

/* BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
.missionHeader { font-size:2em; paddingleft:5px; }
.missionSub {font-size:1.5em; paddingleft:5px;}
}

 

Child's Experience

Exercises: Add Captions to Images, Section Layout, Modify Attributes

HTML Side

Here we create an order with 4 piers. Each pier has an image in it. Then below all the images, we will add a caption to the image. Then a content section containing a few sentences about the experiences the children obtain from the camp. The proper way to add an image with a caption is to use the <figure> tag and the <img> tag and <figcaption> tag inside the <figure> tag. We also need to set the image with a max-width of 100%, instead of just width of 100%. On a smaller screen, the images may be bigger than on the 1024px screen. This way the images won’t grow larger than 100%. We will adjust the style of the captions with CSS.

<!-- Child's Experience -->
<h2 class="margins">Your Child's Experience</h2>
  <div class="tier order">
    <div class="pier pier1of4">
    <figure><img src="images/kickball.jpg" alt="kickball" style="max-width:100%; height:auto;" />
    <figcaption>A Wide Array of Sports</figcaption>
    </figure>
  </div>
  <div class="pier pier1of4">
    <figure>
    <img src="images/fly-fishing.jpg" alt="fly fishing" style="max-width:100%; height:auto;" />
    <figcaption>Fly and Spin Fishing</figcaption>
    </figure>
  </div>
    <div class="pier pier1of4">
    <figure><img src="images/rock-wall.jpg" alt="rock wall" style="max-width:100%; height:auto;" />
    <figcaption>Land and Sea Adventures</figcaption>
    </figure>
  </div>
  <div class="pier pier1of4">
    <figure><img src="images/archery2.jpg" alt="archery" style="max-width:100%; height:auto;" />
    <figcaption>More Than Just Sports</figcaption>
    </figure>
  </div>
</div>
  <div class="tier order">
    <div class="pier pier4of4">
    <p class="experience">Our campers have a funfilled, sun-filled summer. They stay busy all day long from doing a wide range of activities. They also learn skills they can use for a lifetime. We have assembled a great camping staff that is dedicated to providing children a fun and safe environment.</p>
    </div>
  </div>

CSS Side

The only CSS we needed here is to the text for the caption and the text for the content in this order. We have not used the fontfamily: 'Concert One', cursive; yet so I think this is a good place to use it. Let us make the font-size to the captions a little smaller than the regular font size, so it is set to .8em.

/* Child's Experience */
.experience {
  font-family: 'Concert One', cursive;
  padding: 0 20px;
}

figcaption {
  text-align:center;
  font-family: 'Concert One', cursive;
  font-size: .8em;
}

 

Daily Activities

Exercises: Create a <div id>, Modify Background Color for an Order

HTML Side

Just to change things up a bit, let’s create this order with a grey background. It is a visual effect to give separation to the web page. We do this with a <div id>, which is different from a class. A <div id> is intended to be used once on a web page. We will call this <div id>, “activitiesBox”. We have 12 activities that we want to highlight. We will highlight them with an unordered list. We create four <pier1of4> tags and list 3 activities in each <pier1of4>. At the bottom of the order, we add an <h3> tag with a disclaimer on how the campers are grouped.

<!-- Daily Activities -->
<div id="activitiesBox">
<h2>Daily Activities Include</h2>
  <div class="tier order">
    <div class="pier pier1of4">
    <ul class="activities">
      <li class="activities">Canoeing
      <li class="activities">Kayaking
      <li class="activities">SUP-Stand Up Paddleboard
    </ul>
  </div>
  <div class="pier pier1of4">
    <ul class="activities">
      <li class="activities">Archery
      <li class="activities">Yoga
      <li class="activities">Rock Wall Climbing
    </ul>
  </div>
  <div class="pier pier1of4">
    <ul class="activities">
      <li class="activities">Spin Fishing
      <li class="activities">Fly Fishing
      <li class="activities">Nature Walks
    </ul>
  </div>
  <div class="pier pier1of4">
    <ul class="activities">
      <li class="activities">Paddleboard Yoga
      <li class="activities">Nature Classes
      <li class="activities">Environment Awareness
    </ul>
  </div>
</div>
<h3 class="activities">Campers are placed in group based on ages
</div>

CSS Side

To achieve our goal of making the whole element in light gray, we put the <div id> at the top of the section and use its closing tag at the bottom of the section. We modify the backgroundcolor and add some padding to the top and bottom. We name the <div id> “activitiesBox” so that we do not confuse it with the class, “activities”. We could have used the same name because a <div id> starts with a “#” whereas classes start with “.”. But to not cause any confusion, give a <div id> a similar but different name than the classes that go inside of it.

NOTE: <div id> tags in CSS start with a “#” sign, not a “.”.

For the list part of this order, everything should be familiar by now.

/* Daily Activities */
#activitiesBox {
  background-color:#efefef;
  padding: 10px 0;
}

h3.activities {
  text-align:center;
  font-size:1.2em;
  color:#172323;
}

.activities ul {
}

.activities li {
  font-family: 'Merriweather', serif;
  list-style-type: none;
  padding-bottom:8px;
  margin-top:0px;
}

 

Your Child's Safety

Exercises: Insert Image, Create Piers, Play with CSS Attributes

HTML Side

This section is more practice in creating <piers> and inserting a <img>. By now, we should be able to easily create the <h2> tag, set up the <order>, <tier> and <piers>, add an <img> and a <p>.

<!-- Your Child's Safety -->
<h2 class="margins">Your Child's Safety is Our Top Priority</h2>
  <div class="tier order">
    <div class="pier pier1of4">
    <img src="images/bird-watching.jpg" alt="bird watching" style="width:100%; height:auto;" />
  </div>
  <div class="pier pier3of4">
    <p class="large">We have a secured site - Fenced perimeter - Security cameras – Registered Nurse on Site - Lifeguards - Certified Instructors - Experienced Group counselors</p>
  </div>
</div>

CSS Side

We create a new class called, “large”. This class increases the size of the text within the <p>. For organizational reasons, we put this class under the “p” class in the CSS. It is a variation to the “p” class so it is named, “p.large”. You may recall that we did this with our “h2.margins” class too. If we want to have a variation of our <p> text or our <h2> margins, we do this by taking the “p” attribute, then add a period and a name. For example: “p.large”

Let us see how the variation looks:

p {
  font-family: 'Roboto', sans-serif;
  color: #172323;
  font-size: 1em;
  font-weight: 200;
  word-spacing:3px;
  letter-spacing:1px;
}

p.large {
  font-size:1.75em;
  font-style:italic;
  text-transform:capitalize;
  word-spacing:5px;
  text-align:center;
  padding:0 20px;
}

We want the paragraph to have the same styling as a normal content paragraph, but with a couple of slight variations. We increase the font size to “1.75em”. We change the font style to “italic”. We transform the text to be all capitalized. That means if we typed out the paragraph in a normal format of the first word being capitalized and the rest of the sentence in lower case, this attribute capitalizes the first letter of every word in the sentence. Changing the word-spacing gives more space between words for an added visual effect. You guessed it, you can also change the spacing of the letters in the word with the attribute, “letterspacing”.

 

Sign Up

Exercises: Create a Button, Modify Button Attributes

HTML Side

One purpose to a web page is to provide information. Another purpose is to get your visitors to do something. In our example, we want our visitors to sign up their children to the adventure camp. It’s called, “CTA” or “Call To Action”. We do this with a button that visitors can click. The visitor is then brought to another part of the website. For our example, the button brings our visitors to a signup sheet.

The HTML code for this section is not exceptionally long and it is based on all code that we have done before. We do another background image and set the width and height, plus add a top and bottom margin. After we do our <h2> tag, we create a button with a link.

how to set up a button with html

We start with <a href> and set the link to the signup sheet. Then we open a <button> tag and set the class to “btn”. Then we add the text we want for the button, then close the <button> tag and then close the <a> tag.

<!-- Sign Up -->
<div style="background-image:url('images/rivergrass.jpg'); max-width:1024px; height:100%; margin-top:10px; margin-bottom:20px;">
  <div class="tier order">
    <div class="pier pier1of3">
    <h2 class="getStarted">Sign your kids up to experience the River Bend Adventure Camp this Summer
    <a href="sign-up.html"> <button class="btn">Get Started
    </div>
    <div class="pier pier2of3"> 
    </div>
  </div>
</div>

CSS Side

The “magic” to create the button is all in the CSS. We set up two classes, “.btn” and “.btn:hover”. The “.btn” class designates all the attributes to the button and how it will look. The “.btn:hover” class changes the look of the button when you hover the mouse over it.

Most of the CSS in the “.btn” class should look familiar. We want the button to look like this:

get started button

The attributes are:

Let us go over some of the new attributes. The “cursor” attribute designates what the mouse cursor will look like when you hover over the button. There are over 35 different types of cursors that you can use. Not all pertain to buttons, but a few do (contextmenu, crosshair, default, help, pointer, url).

The “display” attribute designates the display of the rendering box of an element. There are over 20 different ways to use the “display” attribute. For buttons like this we could use “inline”, “block”, “inline-block”. We will use the “inline-block” as it can be formatted as an inline element and we can apply values to it like height and width values.

The “border-radius” attribute is a fun one. This gives the button a rounded edge. The higher the px, the more round the button. We assign a value of 8px, which will give the button a nice, rounded look.

The “.btn:hover” class changes the button color when a visitor hovers their mouse over the button.

.btn {
  color: white;
  border:none;
  background-color:orange;
  padding: 12px 24px;
  font-size: 1.5em;
  font-weight:bold;
  text-transform:uppercase;
  cursor:pointer;
  display:inline-block;
  margin: 4px 2px;
  margin-left: 40px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.btn:hover {
  background-color:#4B7890;
}

Before we end this section, I would like to take a moment to discuss forms and email addresses. Many “homemade” websites include email addresses for the business. This is not good practice. There are programs that people use to “scrape” the internet for email addresses and then sell them or spam them. One thing that people did to try to prevent this from happening was to break up the email address on the contact page. Something like this:

Email us at: info @ mybusiness . com (no spaces)

Personally, it does not look too professional. Unfortunately, there is not a way to create a Submit Form with using just HTML and CSS. There are free software programs that you can include into your web page to accomplish an email submit form. Most of these also have spam protection built in so you do not receive emails from “robots”.

 

Footer

Exercises: Create List, Create Links, Create Social Media Icons

Throughout this book, I have followed a certain path for describing each order. Since this order has a lot going on, I opted to show you this order by each pier. Below will be the HTML for each pier followed by its respective CSS.

The footer section or bottom navigation section of the website has a lot going on. Footer section of any website is usually broken down into multiple columns with links and other information within it. The layout of it is important and should not be overlooked. Common items to most website footers:

The <pier> setup for this section is a <pier1of4>, <pier1of4>, <pier2of4> setup. The quick navigation is in the first column, the social media icons in the second column and the more information in the third column. Since this is a fictitious company, I opted not to have a map or show a location of the camp but use this section for a “More About Us” section.

Navigate
Let us create the first <pier>. We create the footer with a <div id> and call it, “footer”. Since there is another list of links, we also create another class to the list. We call this class, “.navbot”. Here is the first column of the footer:

HTML Side

<!-- Footer -->
<div id="footer">
<div class="order tier">
  <div class="pier pier1of4">
    <h3 class="footer">Navigate</h3>
    <ul class="navbot">
      <li class="navbot"><a href="#">Home</a></li>
      <li class="navbot"><a href="#">Forms</a></li>
      <li class="navbot"><a href="#">Contact</a></li>
      <li class="navbot"><a href="#">Privacy</a></li>
    </ul>
  </div>

CSS Side

The whole order is going to have the darker blue color for the background and the green color for the text. We set the CSS for the footer, unordered list and the class, “navbot”. We also want to add a variation to the <p> and <h3> tags. When we made a variation to a tag previously, we kept the code for it towards the top of the file with its original tag. I opted to leave them here, under the /* Footer */ area. The way you organize your code is up to you and what makes sense to you. You can create your own style for organizing your code.

/* Footer */
#footer {
  background-color:#4B7890;
  padding:20px;
}

h3.footer {
  color:#9CCA68;
  font-family: 'Concert One', cursive;
}

p.footer {
  font-family: 'Roboto', sans-serif;
  color:#9CCA68;
}

.navbot ul {
}

.navbot li {
  font-family: 'Roboto', sans-serif;
  font-size:1.0em;
  width: 120px;
  list-style-type:none;
}

.navbot a {
  color: #9CCA68;
  text-decoration:none;
  font-size:1.0em;
}

.navbot a:hover {
  color:#80CEFF;
}

Stay Connected
Our second pier is the “Stay Connected” pier. In previous websites that I have created, I would find my own social media icons and save them as .png files and add to the site I was working on. During my research on this book, I discovered a different way to do the icons that makes the work easier. We connect the social media icons to the Cloud Flare website. Cloud Flare is an Integrated Global Cloud Network.

HTML Side

We connect to the link to the social media icons like how we connect the CSS file or our fonts via Google Fonts, we create a link in our <head> tag. This is what the link looks like: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

CSS Side

The second step is to create the CSS associated with it. The first class sets up all the icons to be the same in height, width, margin, font size. You can customize them any way that fits your needs.

The second class, “.fa:hover” sets the opacity of the icon. Rather than have a class for every icon to change different colors when you hover over the icon, this reduces the opacity of the icon. You can also customize the opacity from a scale of 0.1 to 0.9. It is another way to add a visual effect to your icons.

.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

.fa:hover {
  opacity: 0.7;
}

The following CSS is specific to each social media icon. A complete list can be found in Appendix E. You only need the code for the icons that you are using. For our case, we are using Facebook, Twitter, Google, and Instagram. Each icon is then linked to the camp’s social media platform. All the background colors have been set to each social media’s colors. You could also change them all to the same color for an added effect. Here are two examples of how you could style the social media icons:

The CSS for our website is using the respective colors to the social media icons.

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-google {
  background: #dd4b39;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}

Now that we have the CSS for the social icons set, we can go back to the HTML side for this pier. We start with a <h3> tag and then a <p> tag with a short sentence. Next, we add in the icons for the four social media accounts we have for the camp. All the “#” signs get changed to the URL for each social media platform. For example, if our Facebook page was at: https://www.facebook.com/RiverBendAdventureCamp, then we replace the “#” for this URL.

<div class="pier pier1of4">
<h3 class="footer">Stay Connected</h3>
<p class="footer">Keep up-to-date on the latest news about our Adventure Camp. Follow us on social media.lt;/p>
  <a href="#" class="fa fa-facebook"></a>
  <a href="#" class="fa fa-twitter"></a>
  <a href="#" class="fa fa-google"></a>
  <a href="#" class="fa fa-instagram"></a>
</div>

Now is a good time to test to make sure that the social icons worked the way we want them to work.

More About Us

HTML Side

The third <pier> is straightforward. It is a <pier2of4> with a <h3> and <p> tag. Since we already set the CSS for the footer, we do not need to add any additional CSS.

<div class="pier pier2of4">
  <h3 class="footer">More About Us</h3>
  <p class="footer">Founded in 2010, River Bend Adventure Camp has had over 5000 campers spend their summers learning new skills and making life-long friends. We are committed to making your child's summer a memorable one.</p>
</div>
</div>
</div>

Note: The last two closing tags are to close the <order tier> and the <footer>.

 

Masthead

Exercises: Resize Image, Create Copyright Symbol, Create Links, Inline Styling

We are almost complete in coding the web page. The last section also contains some important information that all websites should have. The following should be included in every website:

A lot of websites also include the web designer link. It is a way to see who created the website and if you find something wrong with the website, to be able to contact them.

Do You Really Need These for Your Website?
Having a Terms and Conditions (T&C) page may not seem exciting, but it is a smart thing to include in your website. The T&C can limit your liability should a customer opt to take you to court. You should have a basic disclaimer removing your liability from errors in your web content. If your website allows visitors to post to your website, you need a section that limits your liability from offensive posts. Add that you do not endorse visitors and are not responsible for statements made by third parties. Add a Copyright symbol and year to your website along with the domain name of the website.

If you are collecting any information from your customers, you need to have a Privacy Policy page.

HTML Side

The pier setup for this section is a <pier1of4> and a <pier3of4>. In the first pier, we put the logo image in there and set the maxwidth to 80px. The second pier has the links and information regarding the website.

We could use a class to style our text in the mast but let us do something new. We are going to use an inline-style for the <p>. We want the text in the <p> to be right justified, the font size a bit smaller than the content text and we want a little padding on the right side. We open the <p> tag and then do the following:

<p style=”text-align:right; font-size:.8em; padding-right:10px;”>

Then we put the text we want after it. Here we are adding the text that will be links for our T&C (Terms & Conditions), Privacy Policy, and Site Map. Then we are adding a </br>, which is a line break. Then we add the “All Rights Reserved”, copyright symbol, the year the site was made, hosting link and finally the domain name with a link to itself.

<!-- Mast -->
<div class="tier order">
  <div class="pier pier1of4">
    <img src="images/River-Bend-Logo.png" alt="River Bend logo" style="max-width:80px; height:auto; align:left;" />
  </div>
  <div class="pier pier3of4">
    <p style="text-align:right; font-size:.8em; padding-right:10px;"><a href="#" class="mast">Terms and Conditions</a> | <a href="#" class="mast">Privacy Policy</a> | <a href="#" class="mast">Site Map</a></br> All Rights Reserved. © 2020. <a href="www.hostingdomainsweb.com" class="mast" target="_blank"> Hosting</a> | <a href="index.html" class="mast">www.RiverBendAdventureCamp.com</a> </p>
  </div>
</div>
</>
</body>
</html>

NOTE: The </> closes the <wrapper>, the </body> closes the <body> tag and finally the </html> closes the entire HTML file.

CSS Side

As for the links within this section, they are not a part of a list, so we need to create some CSS to handle how the links look. Each link can be in several states:

The look of the links depends on the CSS behind them. In our case, we want the links to be the same color all the time, unless you hover over them. We assign the same color to a:link, a:visited and a:active. We made the a:hover another color so when the mouse is over it, it changes to a different color.

I struggled in the past to figure out why a link would not change colors when I hovered the mouse over it. This only happened to me if I had previously clicked on the link. After some research, I found out that the reason for it was that one of the other attributes was overriding the hover attribute. The fix for this was to add !important in the a:hover attribute. What this does is override the other attributes. See below for how it is coded:

/* Mast */
a.mast:link {
  color:#172323;
}

a.mast:hover {
  color:#9CCA68 !important;
}

a.mast:visited {
  color:#172323;
}

a.mast:active {
  color:#172323;
}

See the live version of the "mast" section