WDD 130 | W03 | Rafting Project

W03 Rafting Project: About Us Page

Overview

Build the first page of the rafting website project, "About Us". This page provides contact information, history, and other promotions for the company. A wireframe for this page's required layout and content areas is provided.

Instructions

Folder and File Setup

In VS Code, be sure you have your wdd130 directory open and add a sub-folder named "wwr" (wwr stands for white water rafting). This folder will contain the rafting website project and you will add pages and assets to this folder for the rafting project throughout the course.
Add two folders within this wwr folder per course naming conventions to contain the images, "images", and the stylesheet, "styles".

Do not be confused that you already have root level folders named images and styles. The new folders are for your rafting website project and are contained within the wwr project folder.
Add a file named "about.html" in the wwr directory.

Design: Study the Wireframe

Refer to this wireframe sketch as you markup the basic structure of the about.html page.

Wireframe Design for Rafting Project About Us Page

You do not need to complete the header and footer horizontal layouts (i.e., the navigation and social media icons) during this assignment.

Develop the Page Structure: HTML

In your about.html document, begin your HTML page by writing the standards based basic HTML structure with the head with its standard, required content and an empty body.

Be sure to include a proper meta description and meta author elements along with all the other required head content.

Using the typography choices you made in your rafting site plan, provide the proper Google Font link references to the fonts and font styles that you plan on using.

Check Your Understanding

Here is an example of what should be in the head.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700;900&family=Roboto:wght@400;700&display=swap" rel="stylesheet">

In the body, add the following three main elements: header, main, and footer.
The header contains two items:
1. A rafting site logo that you have designed and built or that you have selected from the choices provided below. A sample logo was given in the rafting site plan link.
  
  Here are additional logos you can choose from if needed: WWR Sample Logos
  
  Where should this logo and all images used on the site be stored?
  
  Check Your Understanding
  Your logo image and all images used on the site need to be located in a images directory within your wwr directory. Remember, all images must be optimized (<= 100 kB).
2. A nav element with four child <a> tags and labeled as shown. The href attribute values, the page references, can be set now even though the pages do not all exist yet.
  - index.html (the future home page of wwr, not to be confused with the course home page.)
  - about.html
  - trips.html
  - contact.html
Do NOT worry about the horizontal layout shown in the wireframe at this point.
The main element should contain the following three(3) elements:
1. A div with a class of hero that contains these items:
  - A hero image img that will be in the entire background of the div background.
    Image Resources
    Course Rafting Image Repository
    Web Frontend Resources – see Images and Graphics section.
    
    All images used on your site must be optimized which means not pixelated and less than or equal to 100 kB in size.
  - A h1 element that has the title of the rafting company as the text content.
  - An article element that contains:
    - An smaller img element that portrays a happy client or happy, working employee.
    - A p element with the company purpose, mission, creed, motto, etc. It is Ok to use non-sense, placeholder language for now.
2. A section element with the following contents:
  - A h2 element with a section titled "History".
  - A p element with a brief history of the company. It is OK to use nonsense language.
3. A section element with the following contents.
  - A h2 element with a section titled "Adventure Awaits You!".
  - A series of five (5) img elements representing white water rafting.
    Do not worry about the layout of the images. Later you will use CSS to layout the images.
Check Your Understanding
```
<main>
  <div>
    <img src="images/..." alt="...">
    <h1>Rafting Company Name</h1>
    <article>
      <img src="images/..." alt="...">
      <p>Lorem ipsum dolor sit amet consectetur ...</p>
    </article>
  </div>
  <section>
    <h2>History</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing ...</p>
  </section>
  <section>
    <h2>Adventure Awaits You!</h2>
    <img src="images/..." alt="...">
    <img src="images/..." alt="...">
    <img src="images/..." alt="...">
    <img src="images/..." alt="...">
    <img src="images/..." alt="...">
  </section>
</main>
```
A footer element that contains:
- A p paragraph element containing a copyright symbol, the year, the rafting company name, and your name.
- Three (3) img elements that are encased by a anchor elements pointing to three different social media outlets. The links can be generic.
  Example
```
<nav class="sociallinks">
  <a href="https://facebook.com">
    <img src="images/facebook.svg" alt="Facebook">
  </a>
  <a href="https://twitter.com">
    <img src="images/twitter.svg" alt="Twitter">
  </a>
  <a href="https://instagram.com">
    <img src="images/instagram.svg" alt="Instagram">
  </a>
</nav>
```
  Social Media Icon Resources
  iconfinder.com
  Google Icons

Write the CSS

Create a CSS file for your rafting site named "rafting.css" and store it in the styles folder within the wwr folder.
Remember to add a link to this stylesheet in the <head> of your about.html page.
Check Your Understanding
```
<link rel="stylesheet" href="styles/rafting.css">
```
Define the CSS variables in the document :root pseudo-class selector using the color scheme you selected and documented in this week's site plan/graphic identity assignment.
Begin by styling the headings and paragraph elements.
Add colors to the fonts.
Remove the underlines from the social media image links. Allowing the default underline on a hyperlink that is an image is not a good design and may lead to confusion of function.
To remove the default style of having underlines under <a> hyperlinks, use the CSS declaration
```
text-decoration: none;
```
However, the CSS rule in which you use this declaration cannot just be all hyperlinks. Your future navigation links and other hyperlinks may still want to use underlines
```
/* The following CSS selector (rule) removes underlines from all hyperlinks. Do not do this.*/
a  {  
  text-decoration: none; 
}
```
Use a specific selector that only selects the hyperlinks within the social media series of image hyperlinks.
Consider limiting the entire width of the page to make it easier to design the content.

Style the Hero Container using Position Absolute

The div with the class of hero is positioned relative in order the h1 and the article elements to be positioned on top of the hero image using absolute positioning.
The hero image fits within the allocated space.
Use a relative width CSS declaration for the hero image and make the image a block to fill the width of the container.
Example
```
.hero img {
    display: block;
    width: 100%;
    height: auto;
  }
```
We use height auto in order to maintain the aspect ratio of the image which is critical. In addition, your image should be edited to be large enough to fill this space. You cannot force images to be larger than their original size otherwise the images will be pixelated or distorted.
The h1 heading is positioned absolutely.
The article is positioned absolutely.
The img inside the article floats to the right of the p paragraph.
Consider styling the background-color and opacity of the article to fit the design and make sure it is readable.

Click here to see a sample of what the page may look like at this point.
Your page will have different colors, fonts, content, and images than the example page, but at this point it should have a similar layout.

Testing

Every page in this course will be expected to pass the development standards checklist.
Validate and correct any errors with your HTML and CSS using the Web Developer browser extension under Tools and Validate Local HTML and CSS.
Test your work continuously as you work through the steps by having your page loaded in your local browser using Five Server.

You do not need to be connected to the internet while using Live rServer to test your pages locally during development.
Commit your changes and sync them to your wdd130 GitHub Pages enabled repository.
Audit your page using the ✔ page evaluation tool to verify that you have the basic document content.
Make corrections as needed and be sure to recommit and sync your updated work.

Submission

Submit your GitHub pages URL (website address) in Canvas.
Here is the sample URL. You will substitute your GitHub username for githubusername.
```
https://githubusername.github.io/wdd130/wwr/about.html
```