Run-Buddy (Module-2)

Purpose

A website that offers fitness training services.

Built With

1. HTML
2. CSS

Code for this lesson

Completed with these Steps

Flexbox Flexbox is a one-dimensional layout method for arranging items in rows or columns.

• Position
• CSS variables, on the " :root " pseudo-class
• pueudo class and element
• @media screen , to view the site on various screens and devices

Header

• main heading is written with "h1" tag
• navigation var is done that includes "list in unoreder list" tag
• main headind and nav are linked with "a" tag.
• In Css, h1 is used with "display: inline;" to show oneline and nav slector must be kept with "float: right" and margin: 7px 0.
• Universal slector should be used with "margin: 0; padding: 0;" to be inline.
• The challenge is that nav is difficult to move without using universal selector.

Challenges:

• One of our members forgot to write ID in Form section. But we tried to solved it and got a nice form.

Body

Body include four-sections. They are...

1. What We Do Section
2. What You Do Section
3. Your Trainers Section
4. Reach Out Section

• The section is coded with h2 tag.
• The body section is colored with blue.

Reach out section

• The title is coded with h2 tag.
• The section of information for inquiring is wittern with p tag.
• In the contact-info, a map is showed with iframe.
• Address, including email with a tag is given.

Privacy-Policy

• It explains about copyright policy in detail.
• Privacy-policy-html and css files are added.
• In this section, title and navigation links are included in the header.
• There is a hero section. In this section, page title is used with h2.
• There is also a secondary-content. It is written with p tag but its title is h3 tag.
• Footer is similar to previous one.

Challenge:

It is confused to write new html and css.

Footer

• Footer is written with h2.

• It includes copy right policy written with a tag.

• Heart icon is copied from (https://emojiguide.org/red-heart).

• Footer h2 selector is kept display: inline; color: blue and margin: 0;

• In the footer div selector, float: right and text-align: right.

• Its backgroung color is yellow.

Main challenges:

• Git push
• Git merge