L3 - Create the Hero

📖 1.3.1. Introduction

In the previous lesson, you built and styled the header and footer. In this lesson, you'll build on your knowledge of HTML and CSS, and learn some new essential concepts while you build the hero. Don't worry if you don't know what that is—you'll learn soon enough!

The Run Buddy landing page currently looks like the following image:

Building a new hero component will give you a chance to accomplish the following:

• Create a form with HTML <form> elements that users can interact with.

• Explain the difference between block-level and inline-level elements.

• Use relative and absolute positioning to lay out HTML elements in the document.

• Use the Chrome DevTools to make temporary changes to the view in the browser.

📖 1.3.2. Preview

The design team wants us to create a flashy section at the top of the landing page to grab visitors' attention and capture their contact information.

The following image shows what they're looking for:

Here's a high-level overview of how we'll approach this:

1. Build the hero section's structure. You'll add new HTML elements to create the form.

2. Give the hero some style. You'll add CSS selector rules to the style sheet and HTML class attributes to form elements.

3. Position the elements. You'll use relative and absolute CSS positioning to position the form precisely within the hero section.

4. Style the sign-up form. You'll add element-specific CSS style rules to make the form look exactly like the mock-up.

Let's get started!

📖 1.3.3. Build the Hero Section's Structure

The section we're about to build is sometimes considered the most important one in any website because it will be seen by every visitor, even those who visit for only a few seconds or who arrive by accident.

This section contains something called a hero image. In web development, a hero image refers to a large banner image placed prominently at the top of the page. The placement has a specific task: to pique the visitor's curiosity enough to get them reading, scrolling, clicking, and engaging with the website. Think of the hero section as the banner, headline, or billboard for a website.

As usual, before we can add the styling pizzazz, we need to create the HTML that contains the structure and content.

Let's build on the <section> element right below the closing </header> tag that we created earlier. This will act as the parent element that contains the children elements, the heading, and sign-up form. Let's start with the form.

Add the Sign-Up Form Container

The following image offers a glimpse of the sign-up form that Run Buddy wants to see:

The first thing we need to do is add a <div> element nested entirely inside the <section> element.

One important HTML rule is that both the opening and closing tags of an element must be completely contained inside the parent element.

The folllowing code shows the wrong way to nest elements:

<section>

    <div>

</section>

   </div>

Notice that only an opening tag for the <div> element is inside the <section> element; the closing tag should be there too.

In index.html, add the <div> element for the form right after the closing </header> tag. It's good practice to indent the child element. That section should look like the following code when you're done:

<section>

  <div></div>

</section>

IMPORTANT

The browser doesn't care if lines are indented or if every element is on the same line. Nonetheless, indentation is an organizational practice that helps you and other developers read and understand the code. It's a great habit to practice as a new developer.

Now that we have a <div> element, let's insert its child elements, including a heading for this section and some text.

Add the following elements and content for the heading and paragraph text inside the <div> element:

<section>

  <div>

    <h3>Get Started Today</h3>

    <p>Fill out this form and one of our trainers will schedule a consult</p>

  </div>

</section>

You'll notice that we chose an <h3> element for the heading. But why not an <h1> or <h4>? Heading numbers represent the scope and significance of the heading. The browser makes an <h1> element the largest and boldest heading on the page, followed by the <h2>, then the <h3>, and so on.

The main heading of the page is an <h1>, and section headers are <h2>. Because this heading is less significant than an <h2>, <h3> is the right choice.

IMPORTANT

To aid accessibility, headings should fall in sequential order; this helps screen readers interpret the relative importance of content on the page.

The <p> element means "paragraph" and is used to render the text in the page's body. By default, the browser declares a <p> to be a block-level element, but—unlike a heading element—won't assign any changes to font size or weight.

The following image shows the difference between a block-level and inline-level display:

Your page should now look something like the following image:

This isn't quite what we're looking for stylistically, but the structure and content is set up the way we need it. Just like when building a house where the foundation and frame must go up before the rest can be built, the decorating (also known as CSS styling) always comes last.

Create the Sign-Up Form

It's time to add the sign-up form. Forms are a major point of interaction between users and websites. They invite and enable users to send data to the website, typically directly to the server.

The importance of the sign-up form is emphasized by its position at the top of the page. The form's ultimate goal is to generate sales leads and convert visitors into customers. Are you ready to learn how to create it? Let's do it!

First let's create the sign-up form container by using the <form> element. Within this <form> will be child elements such as <input> and <label>. <input> elements come in many flavors, such as open-ended (a text field that lets the user enter freeform text) and closed-ended (a radio button or checkbox for the user to select or check).

Let's add the form's HTML code to the hero's <section> element so it looks like the following code:

<section>

  <div>

    <h3>Get Started Today</h3>

    <p>Fill out this form and one of our trainers will schedule a consult</p>

  <!-- Add form element -->

  <form></form>

  </div>

</section>

ON THE JOB

A sign-up form is a call to action, or CTA. The main purpose of a CTA is to encourage users via a story, advertisement, or dazzling piece of content to do something. CTAs play a vital role in converting a visitor into a sales lead—that's why we want it at the top of the page!

Add Text Input Fields

Let's add the text fields to the form. Text fields are where the user will enter their name and contact information.

Let's look at the text fields that we need to add, shown in the following image:

We'll start by adding the following HTML to the <form> element. Look closely at how we pair the <input> and corresponding <label> elements and their attributes, shown in the following code:

<form>

 <label for="name">Enter full name:</label>

 <input type="text" placeholder="Your Name" name="name" id="name" />

</form>

The <label> text not only offers a visual directive of what to enter but also programmatically links to the associated <input>. When a user with a visual impairment uses a screen reader, the label will be read out loud when they focus on the input field. Labels also make it easier to fill out forms on mobile devices; clicking on the label will target the focus to the associated input field, which can be hard to do manually on a small screen.

Let's break down the attributes in the <label> and <input> elements:

• The for attribute in the <label> element programmatically links to the id attribute in the <input> element.

• The type attribute relates to the type of input element we're using. Here, we want a text field, which is also the default value.

• The placeholder attribute offers a hint or label within the text field, but will not be submitted if this field if left blank.

• The name attribute identifies the element so the response can be referenced after the form is submitted.

Given the first text input field for name, can you code the fields for email and phone number? Remember that the label and inputs will need the attributes for name, for, type, id, and placeholder.

When you're done, the HTML for these should look like the following code:

<label for="email">Enter email address:</label>

 <input type="text" placeholder="Email Address" name="email" id="email" />

 <label for="phone">Enter a telephone number:</label>

 <input type="text" placeholder="Phone Number" name="phone" id="phone"/>

Add Radio Button Input

Next, we'll create inputs for a radio button and checkbox. A radio button allows a single selection to be made from a list of choices and is typically a small circle that gets filled when clicked.

The following image shows what a radio button looks like:

So a radio type input element, commonly referred to as a radio button, is typically used in groups using the name attribute as the group reference, and each radio button must have the same name value to be considered in the same group.

Let's type some code and then explain the attributes afterwards. Add the following <p> element below the text input fields you just created (the entire form's HTML is shown):

<form>

  <label for="name">Enter full name:</label>

  <input type="text" placeholder="Your Name" name="name" id="name" />

  <label for="email">Enter email address:</label>

  <input type="text" placeholder="Email Address" name="email" id="email" />

  <label for="phone">Enter a telephone number:</label>

  <input type="text" placeholder="Phone Number" name="phone" id="phone"/>

  <p>

    Have you worked out with a trainer before?

    <input type="radio" name="trainer-confirm" id="trainer-yes" />

    <label for="trainer-yes">Yes</label>

    <input type="radio" name="trainer-confirm" id="trainer-no" />

    <label for="trainer-no">No</label>

  </p>

</form>

Save the file and then see how it looks in the browser. The page should resemble the following image:

Add Radio Button Layout

We've wrapped both of the answers, including both radio buttons, in a <p> element that also includes the question. Because the radio buttons are inline elements, the answer selections will render from left to right on the same line as the question, just like it does in the mock-up.

Next, the <label> links the displayed values, Yes and No, to their respective radio inputs. This link enhances accessibility by allowing users to click on the label's text as well as the radio buttons, which provides more clickable surface area.

IMPORTANT

The radio button elements must have the same name attribute in order to be associated with the same radio group. This is how the browser identifies that a group of choices can have an exclusive singular answer. In this case, the value of the radio group in name is trainer-confirm.

Add the Checkbox Input

Understanding what you do now about <input> element syntax and using Google if you need to, next try to code the "I acknowledge that I am at least 18 years of age" checkbox on your own. For accessibility purposes, make sure to wrap the content of the <p> in the checkbox in a <label>, enabling the checkbox to toggle when anywhere in the content is clicked. This simple fix can greatly assist anyone with a motor-skills disability when trying to check a very small box.

The HTML for this is provided, but don't peek! Try to do it yourself first.

Add the Submit Button

A button is an essential component of a user interface and can have a variety of different functions and uses. A button can link to another area on the webpage or an external site, submit data to a server, or be programmed for any activity.

The button has a special function: to submit the user data gathered inside the <form>. Once again, we'll configure the element with attributes to make it function according to the website's needs. In this case, we need a submit type to perform the needed action. The content of this element, "Get running", will be written inside the <button> element to render a label on the button itself.

Currently, the requirements in the mock-up don't have an action to assign to the button, but typically we'd assign a URL path in the <form> element in the action attribute.

Let's look at the hero section's HTML with the Submit button added, shown in the following code:

<!-- hero section -->

<section>

  <div>

    <h3>Get Started Today!</h3>

    <p>Fill out this form and one of our trainers will schedule a consult.</p>

    <form>

      <label for="name">Enter full name:</label>

      <input type="text" placeholder="Your Name" name="name" id="name" />

      <label for="email">Enter email address:</label>

      <input type="text" placeholder="Email Address" name="email" id="email" />

      <label for="phone">Enter a telephone number:</label>

      <input type="text" placeholder="Phone Number" name="phone" id="phone" />

      <p>

        Have you worked out with a trainer before?

        <input type="radio" name="trainer-confirm" id="trainer-yes" />

        <label for="trainer-yes">Yes</label>

        <input type="radio" name="trainer-confirm" id="trainer-no" />

        <label for="trainer-no">No</label>

      </p>

      <p>

        <label for="checkbox" >

          I acknowledge that I am at least 18 years of age.

        </label>

        <input type="checkbox" name="age-confirm" id="checkbox" />

      </p>

      <button type="submit">

        Get running!

      </button>

    </form>

  </div>

</section>

<!-- end hero -->

That was a lot of code we just entered! It's time to save and reload the page in the browser to see the current progress of the landing page. Make sure your file is saved, and then view it in the browser.

If your webpage resembles the following image, great job! If not, go back and audit your HTML until you get a result that resembles the following image:

Special Input Types

The form is perfectly okay the way it is. But we can improve it by employing a couple of input types that were introduced in HTML5: email and tel. Browsers treat these input types differently than classic text input types.

When a user inputs a value into an email input type and clicks the submit button, the browser automatically validates that value. If the value doesn't look like an email address, the browser will not submit the form. Instead, the browser will display a helpful validation warning next to the email input field.

Desktop browsers treat the tel input type the same as the default text type. They don't automatically validate the user's inputted value. However, browsers on mobile devices will display a numeric keypad for the user to input a value, rather than a standard keyboard. This is a lovely experience for mobile users. Considering that the majority of website visits come from browsers on mobile devices, we should provide this experience.

It's easy to convert the email and phone inputs to these special types. Just change the type attribute of the email input to email, and the type attribute of the phone input to tel. Go ahead and do that in your index.html file now.

The HTML for these two inputs should now resemble the following code:

<label for="email">Enter email address:</label>

<input type="email" placeholder="Email Address" name="email" id="email"/>

<label for="phone">Enter a telephone number:</label>

<input type="tel" placeholder="Phone Number" name="phone" id="phone"/>

Save your work and refresh the page in the browser. Type some wacky non-email text into the email field and click the submit button. Can you get a validation warning to appear?

Testing the phone field is a little more complicated. First, you need to add, commit, and push your work to GitHub. Then you can grab a mobile device and load the project's GitHub Page in its browser. You should see a numeric keypad appear when you tap on the phone number field.

The foundation work is now complete, so we can proceed to the design phase of this lesson. But first, take a quick knowledge check to see what you've learned:

📖 1.3.4. Give the Hero Some Style

So the hero section doesn't look all that great yet, but fear not—we're about to make it look super! Let's examine the styling needed to deliver the finished product, shown in the following image:

It's time to dive into CSS again. In VS Code, open the style.css file.

Add Global Styles

In similar fashion to the HTML build process, we'll start the CSS styling from a top-down approach and then drill down into the nested elements until we're satisfied with the finished product.

For the sake of consistency, there should be a few styles that will keep all the <section> elements looking similar.

Add the following code into the bottom of your style.css file:

section {

  padding: 60px;

}

As you've already learned, all HTML elements can be represented by a rectangular box, which is known as the CSS box. The CSS Box Model is a visual display of the properties in the CSS box that include content, padding, border, and margin, which are all built around each other like the layers in an onion. Some layer styles—like thickness, style, and/or color—can be manipulated using CSS.

To learn more about the CSS Box Model, watch the following video:

Use the CSS Class Selector

Now let's add some pizzazz by adding a background image to the hero section.

First you need to create an images directory inside the assets directory like you did with the css directory. Then click this link to download the hero background image.

. The image will display in your browser. Right-click the image and select "Save image as…," then navigate to the images directory you created and save the image there.

Now that we have the images, the first step is to target the hero section in CSS with a CSS selector. Let's use the <section> as the CSS selector and see what happens to the page.

In style.css, revise the section styling to match the following code:

section {

  padding: 60px;

  background-image: url("../images/hero-bg.jpg");

}

Now save and refresh the page to see your changes. The page should look like the following image:

Wait a minute! What happened here? Because we used the <section> element as the CSS selector, we ended up applying the same background image to all the <section> elements, which isn't something we want.

We need a way to target the hero section specifically. The answer lies in using the class attribute. This attribute can be added to one HTML element or multiple elements that need the same styling or CSS declarations, which saves the time of needing to write duplicate code.

Let's create a CSS rule for the hero class that will only target the hero section. Please note that the name of this class is up to us, but it is customary to name it to correspond to the element's function so it can be easily recognized in the style sheet.

We'll use the class attribute here, so let's add it to the opening <section> HTML tag for the hero section so it looks like the following code:

<section class="hero">

Let's add the following CSS rule to the style.css file and make the height match the mock-up, knowing we'll need some space for the sign-up form:

/* Hero Style Start */

.hero {

  background-image: url("../images/hero-bg.jpg");

  height: 600px;

}

/* Hero Style End */

Make sure to remove the background-image declaration from the <section> CSS rule.

Let's examine this CSS declaration block:

• Dot notation is the "." that precedes the class hero to indicate to the browser that we're using a class as the CSS selector.

• The background-image property uses the CSS function url() to link a resource such as an image, web font, or GIF. Here we're using a relative URL path to select a background image.

• The height property fixed at 600px gives an exact size of the section, which is important in this context to allow room for the sign-up form.

Let's save the file and render the changes. It should look something like the following image:

Great job! Now the background image is only being assigned to the section we want. The only problem is that the image looks clipped. How can we move or size the image a bit so it is highlighting the shoe-lacing, workout prepping action and not only the middle of the runner's body?

We will do this by adding two properties: background-size and background-position.

• The background-size property can set the size of the background image to its original size or make it stretched, repeated, or constrained to fit the available space. In this case, we'll set it to cover to shrink the image so that parts of it won't get clipped. Other options allow repeated images for a tiled look, similar to how background image displays are configured for your computer's background desktop image.

• The background-position property can set the initial position of the background image. We'll set this position to center.

• 
  

The CSS rule for the hero class should now resemble the following code:

/* Hero Style Start */

.hero {

  background-image: url("../images/hero-bg.jpg");

  height: 600px;

  background-size: cover;

  background-position: center;

}

/* Hero Style End */

Save the file and check your page. It should look like the following image:

Congrats! Give yourself a nice pat on the back. Way to hang in there! We'll now style the form box and finish up the hero section.

Style the Form and Input Fields

According to the mock-up, the box (or <div>) that contains the <form> has some styling requirements, including background color, border, font color, and width. This means we should be thinking about how we'll select this <div> to create a CSS rule. One way would be to create a new class called hero-form and add it to the opening <div>. The font color in this <div> will be #024e76 and the background color is #fce138.

Go ahead and try to finish the styling for the hero-form class on your own. Include declarations for font color, padding, width, and background color to match the mock-up. We'll handle border together when you're done.

Don't forget to add the hero-form class to the sign-up form container <div> so it looks like the following example:

<div class="hero-form">

When you're done adding that, create the CSS rule to resemble the following code:

.hero-form {

  background-color: #fce138;

  padding: 20px;

  width: 500px;

  color: #024e76;

}

Let's break down these CSS declarations a little further:

• The background-color property sets the background color to the element selected. VS Code allows typing in the names of colors as well as the hex code.

• The padding property creates an inner margin within the border.

Save and reload the webpage to view something like the following image:

Now we just need to add the border, so let's dive in a little deeper to the border property. Similar to how padding values were assigned in the last lesson, the border property can be declared with a single value that represents one value for all four sides. The border property can also be designated for each side: border-top, border-bottom,border-left, border-right.

Unlike padding, border can also have style and color values declared in addition to width.

The following code shows an example of the border declaration block:

.hero-form {

  ...

  border-style: solid;

  border-width: 3px;

  border-color: #024e76;

}

Alternatively, there is a shorthand property to include all three values on one line, as in the following code:

.hero-form {

  ...

  border: solid 3px #024e76;

}

IMPORTANT

The ... syntax is just a placeholder that indicates that there's other content in this code that shouldn't be overwritten. Just add the actual CSS from the preceding snippet.

Once the styling of the sign-up container is done, the next step is to position it to the right side of the hero section. But first we need to dive a bit deeper into the position property.

📖 1.3.5. Position the Elements

The position property is an important CSS property that defines how an element is positioned on the webpage.

Here are some of the property's values and how they affect the relationship of the element to the surrounding elements:

• A value of static is the default value and maintains the order of the natural flow of the elements on the page (i.e., the order created in the HTML). static positioning isn't affected by the top, bottom, left, and right properties. Currently, the sign-up container is in this position.

• A value of relative positioning uses the top and bottom properties to vertically offset and the left and right properties to horizontally offset the element from the static position.

• A value of absolute positioning removes the element from the natural flow of the page elements and uses the top, bottom, left, and right properties to offset relative to the element's parent, or containing, element's margins.

• A value of fixed positioning removes the element from the natural flow of the page elements and positions it relative to the viewport or browser window so that it isn't affected by scrolling. The fixed position value uses the top, bottom, left and right properties to offset the element from the viewport's margins.

Watch the following video that walks through the different property values:

Let's investigate why absolute is the right choice. If we choose relative, we'd need to move the form container from its current position and offset it from the left and top positions until we found the correct spot according to the mock-up. But if we choose absolute, we can use the parent container's margins to offset horizontally or vertically. We'll use this option because the position of the form container is in relation to the hero container.

Let's start by assuming we'd like to offset the form container from the bottom and right margins of the hero section (because the form container will reside in the bottom right quadrant of the hero section). Add the following code to your style sheet:

.hero-form {

  border: 3px solid #024e76;

  background-color: #fce138;

  padding: 20px;

  width: 500px;

  color: #024e76;

  position: absolute;

  bottom: 0px;

  right: 0px;

}

Now save and refresh the page to see something like the following image:

As you can see, the absolute position property with zero offset from the bottom and right puts this element in the bottom right corner. Do you notice how it overflows out of the section?

This is because the child element, the form container, is setting its position absolute to the <body> element, which is the entire page, and not the hero section.

To enable the absolute positioning of the form container to be taken relative to the hero section, we need to make the hero section's position relative. To do this, go to the CSS rule for the hero and add a declaration that sets the position to relative. Your CSS should now look like the following code:

/* Hero Style Start */

.hero {

  background-image: url("../images/hero-bg.jpg");

  height: 600px;

  background-size: cover;

  background-position: center;

  position: relative;

}

/* Hero Style End */

The following image shows the difference between a parent element with relative positioning as opposed to the default setting of static:

Now let's save and render again to see the effect of changing the parent element's position property to relative. Your page should resemble the following image:

As you can see, the form is now nestled in the corner, just as we positioned it.

Let's add pixels to offset the form container until it has reached the correct position according to the mock-up requirements.

Update the .hero-form CSS to update the bottom and right property values so it looks like the following code:

.hero-form {

  border: 3px solid #024e76;

  background-color: #fce138;

  padding: 20px;

  width: 500px;

  color: #024e76;

  position: absolute;

  bottom: 120px;

  right: 140px;

}

Go ahead and add the preceding code to your CSS style sheet and view the changes in the browser. Don't forget to save your file!

Nice job! After you take the following assessment, we'll look at a new way to make changes to your styling:

Introducing Chrome DevTools

Have you ever thought that it's kind of a pain to hop back and forth between the CSS file and the browser to see how style changes look, especially for little tweaks? Luckily for us, there's a tool that can eliminate the need for this: Chrome DevTools.

To access the DevTools, click the small menu button at the top-right of Chrome. It looks like the following image:

This opens a browser menu. Choose More Tools, and then Developer Tools.

Depending on your version of Chrome, you should see something like the following image:

The Chrome DevTools will appear beneath your webpage. Click the Elements tab to reveal the HTML code. On a full screen, you'll also see the Styles panel displaying your CSS code. If you click on various elements in the webpage, you can change or delete properties, attributes, content, and values.

DevTools is a tremendous asset to front-end developers because it allows you to do the following:

• Change HTML elements and attributes.

• Manipulate CSS style properties.

• Change the text content.

• And much more, which we'll continuously learn throughout this class!

Try Chrome DevTool on Another Website

To try Chrome DevTools, go to a popular website and change some of the styling properties of the body element, like the background-color. Try out the element inspector, which is the arrow icon in the top-left corner of the DevTools window, shown in the following image:

This is useful when targeting a specific element.

Notice the changes in the Element and Style panels. Feel free to play around at will. Are these changes permanent? How can we tell?

If you refresh the page, you'll see that the changes you make to HTML and CSS in Chrome DevTools are not permanent and do not change the actual code. Instead, they offer a "sandbox" to try out different styles and immediately see the effect on the webpage. Once you're satisfied, you need to adjust the actual style sheet (in this case, style.css) accordingly to make the style change permanent.

Use Chrome DevTools on the Run Buddy Landing Page

Now head back to the browser tab that has the landing page open and examine the code in the DevTools window. The CSS style sheet appears to be the same one we've been working on. However, do you notice that there are quite a few more properties for each selector than we've written? These are the default CSS property settings that are assigned by the browser. We've overwritten these in a few places, which is why they're crossed out.

Let's toggle the box-sizing property we just created to manipulate the width of the elements. You can see that having a set width property can save some headaches and need for extra calculations. It is suggested to set this property to border-box whenever possible.

Scrolling down to the bottom of the Styles panel offers an interactive CSS Box Model that allows the different layers of the CSS box to be manipulated by value. This is a very useful tool that can save a lot of time and energy when designing a page layout. The following image shows where it can be found:

Finding a solution to a layout problem using CSS isn't always straightforward or simple. It can be very useful to tinker and try out different properties to see their effect (or lack thereof) on the page. Chrome DevTools lets you do just that!

📖 1.3.6. Style the Sign-Up Form

Let's make the design team happy by following their mock-up to give the <form> some needed layout and styling.

Heading

Let's start by jazzing up the heading. This form needs to exude excitement and enthusiasm, and the current <h3> element leaves a bit to be desired.

There are several ways to select this element using CSS:

• We could give this <h3> element a class and select it as we did for the form container and the <section>.

• We could select the parent element and then the child element that's contained within it, as we did in the previous lesson in the header and footer.

We'll use the second option for one reason: class attributes are used to distinguish or select one or more set of elements from other elements. Because there is only one <h3>, creating a new class is a bit of an overkill. Simplicity is a great rule of thumb to go by when possible.

In style.css, adjust the <h3> element to make it a bit larger, and set the margin to 0 to reduce any possible word wrapping. The CSS is provided, but try it on your own before you peek!

Text Spacing

Next, add some space to the <p> element to make it more pleasant to read, specifically on the top and bottom margins. To do this, add the following CSS code:

.hero-form p {

  margin: 5px 0 15px 0;

}

Input Fields

Now we'll give the input fields some style and panache. First let's get each one to exist on its own line by making the font-size bigger with a nice border.

Part of having a good website is making it easy for a visitor to navigate. When it comes to user interaction, it's really important to make it as simple and straightforward as possible. This means having clear demarcations on each line and to address what each input field is for.

The <input> elements in your HTML code should now resemble the following example:

<label for="name">Enter full name:</label>

<input type="text" placeholder="Your Name" name="name" id="name" class="form-input">

<label for="email">Enter email address:</label>

<input type="text" placeholder="Email Address" name="email" id="email" class="form-input">

<label for="phone">Enter a telephone number:</label>

<input type="text" placeholder="Phone Number" name="phone" id="phone" class="form-input">

Now let's add a border, display each line separately, make the font larger, extend each input field box the length of the form container, and use the navy font color we used for the footer font color.

Your CSS should now look like the following code:

.hero-form h3 {

  font-size: 24px;

  margin: 0;

}

.hero-form p {

  margin: 5px 0 15px 0;

}

.form-input {

  border: 1px solid #024e76;

  display: block;

  padding: 7px 15px;

  font-size: 16px;

  color: #024e76;

  width: 100%;

  margin-bottom: 15px;

}

Let's unpack the following properties in the .form-input selector and see how they affected the form input elements:

• The border property is set to a narrow 1px border to emphasize the sign-up requests.

• The display property instructs the browser to render the element either as a <block> or inline.

Remember to save these changes and look at the new page's styles in the browser as you add them.

Style the Radio Buttons

Adding some horizontal spacing for the <label> element in the radio button elements helps the user not misinterpret which selection is for which answer. Let's go ahead and do that now.

Add the following code to style.css:

.hero-form label {

  margin: 0 5px;

}

IMPORTANT

Try to implement these styles yourself. Syntax errors and red squiggly lines are helpful reminders that you might be missing or misplacing a character. Remember, you can always experiment in Chrome DevTools until you get it just right.

Save your work and look at the browser to see what you've completed so far. It should look like the following image:

Awesome! The <section> element content looks almost finished.

Style the Button

The design team wants the "Get running" button to be navy (#024e76) and the font color yellow (#fce138), as shown in the following image:

Let's style the button as requested and add sizes to the font and padding. Open Chrome DevTools in the browser and select the button using the element selector or arrow icon. Then go to the Styles panel to experiment with some of the button element's properties. By clicking the declaration, the property or value can be changed. By clicking to the right of the declaration, a new line is added for a new declaration.

When you have the look that matches the mock-up, the CSS rule for the button should look something like the following example:

.hero-form button {

  color: #fce138;

  background-color: #024e76;

  border: none;

  padding: 10px 20px;

  font-size: 16px;

}

/* HERO STYLES END */

Let's save the file and refresh the browser. Excellent work—the section looks just like the mock-up!

You just completed a large section of the page, so it's a great time to add and commit your work using Git.

IMPORTANT

Don't worry if you haven't nailed down all the concepts yet. In programming, practice doesn't make perfect—it makes developers. If you get stuck, search the internet. Your answer is out there; you just have to go find it.

📖 1.3.7. Reflection

You did a great job making it through a dense lesson of new concepts and syntax! In this lesson, you created the hero section and learned how to make a sign-up form with a flashy background image. These concepts are the foundation on which you'll build your advancing skills in HTML and CSS.

In the next lesson, we'll continue building the Run Buddy website and learn about web icons and image sizing. But first, let's recape what we accomplished in this lesson:

• Created a sign-up form that allows interaction between the visitor and the website by using a <form> element.

• Defined the type of input the user can enter by using <input> elements.

• Targeted specific HTML elements to apply style to by using CSS class selectors when global element selectors were not selective enough. This let us set a style to a single element or group of elements.

• Controlled the document flow and designated how elements sit in a row or column by using the display property for block-level or inline-level values.

• Used relative and absolute positioning to layout HTML elements in the document or in a container depending on the element's location. This provided a mechanism that allowed precise placement in relation to the parent or document.

• Used Chrome DevTools to make temporary changes to the view in the browser by selecting an element of interest and changing the CSS and/or HTML.

Now let's continue to the next lesson and build the "What We Do" and "What You Do" sections of the Run Buddy landing page.

Lesson Code Snapshot

Download the code snapshot for this lesson to compare with your own code. It’s okay if your code isn’t exactly the same—use this code snapshot as a starting point for the next lesson.