Module Assessment | Yext Hitchhikers Platform

You must include a first name and last name in your profile to create challenge environments.

Background

Turtlehead Tacos has brand guidelines that the marketing team would like them to follow as they are creating the website. To help them make sure this is configured correctly, you are going to help them style their pages based on these guidelines.

They also have some feedback on your custom HTML module. While you were so excited that you were able to make that from scratch, you realize that there’s a built in module called Announcement Bar that might make this easier. That said, they want to update the styling to better reflect their branding. They also want the banner to turn darker orange on hover - a very Turtlehead look.

Your Challenge

Go to the Restaurant template and update the design using the point-and-click interface in the “Design” tab.
- Set the colors:
  - Primary: #c81500
  - Secondary: Black (#000000)
  - Background: White (#ffffff)
- Change the fonts:
  - Header: Alfa Slab One
  - Paragraph: Lato
- Update the button font to match the header font and set the button size to small
Go to the “Banner Image” module. You want to make the header image stand out more – if you look at the CSS you can see that the overlay color black is set to 0.4, which makes it fairly dark. Modify the CSS so that:
```
        $overlay-color: transparentize(black, 0.7);
```
You want to create some separation between the Nearby Locations and OpenTable Widget modules.
- Add a ‘Divider Module’ and place it between those modules.
- Click to Edit CSS and adjust the height to 3px
Remove the Delivery Disclaimer HTML module you just worked so hard on. Turns out, there’s a built in Announcement Bar module! Add the built-in ‘Announcement Bar’ module.
- Map the text to “Delivery Disclaimer” field
- Set the Announcement url to https://turtleheadtacos.com/delivery-partners
- Move the Announcement Bar under the Navigation Bar
Using the CSS Editor, make the following edits to the Announcement Bar Module:

On the class .module-announcement-bar a:
- Add a rule to make the text uppercase after all existing rules in this class.
On the class .module-announcement-bar .btn:
- Set the background color to #ff9500
- Change the border to 8px solid #db8000
Lastly, add a hover state by adding the follow snippet within the .module-announcement-bar .btn class:
```
    &:hover
    {
        background-color: #db8000;
    }
```

You can play around here for the changes to .module-announcement-bar .btn (you’ll need to make the text-transform change in .module-announcement-bar a in the actual module):

CopyCopied!

a { // background-color: gray; border-radius: 0px; word-wrap: break-word; white-space: normal; border: 0px; margin: 0px; box-shadow: none; }

All issues with orders placed via 3rd party should be resolved through that vendor

Module Assessment

+<% util.points %> points

Weekly Challenge Streak: <% util.streakWeekly %>

You must include a first name and last name in your profile to create challenge environments.

Challenge account expires in <% util.expirationHours > 24 ? Math.round((util.expirationHours * 1.0) / 24) : util.expirationHours %> <% util.expirationHours > 24 ? (Math.round((util.expirationHours * 1.0) / 24) == 1 ? 'day' : 'days') : (util.expirationHours == 1 ? 'hour' : 'hours') %>.

Challenge account has expired. Please create a new account.

Report Card

Update the colors, fonts and buttons for the Restaurant Page template

Update Banner image overlay in the CSS

Add the Divider Module and modify the CSS

Add the Announcement Bar module and modify the CSS

Common Issues

Common CSS Syntax Issues

Make sure that each rule ends with a semicolon ;, otherwise the CSS will be invalid
Check that brackets { } are closed, and any nested CSS is properly contained within its parent container
Check that you’re targetting the right class - inspect your preview link to determine what class you should target
Ensure your rule is not being overriden by a more specific rule elsewhere in the CSS

For a refresher on CSS basics, review the Introduction to CSS module

Having an issue adding the right CSS for this challenge?

CSS can be expressed in multiple ways. To crack the code on this challenge, we need you to be pretty specific which is why we provided the class names. But, as an extra hint here’s what we’re looking for:

On .module-announcement-bar a, add text-transform: uppercase;
On .module-announcement-bar .btn, update the existing CSS to reflect background-color: #ff9500 and border: 8px solid #db8000
On the .module-announcement-bar .btn class, make sure the &:hover pseudo-state is nested inside, like below.
```
.module-announcement-bar .btn {
...
...
...
{
  background-color: #db8000;
}
}
```

Did you map the Announcement Bar fields correctly?

Data Mappings is also important to get the Add the Announcement Bar section correct so don’t forget to double check Step #4 above. To push through on this challenge, you’ll need follow ensure both the CSS and the data are setup correctly. Here’s a hint in case you’re stuck:

Make sure to map the Announcement Bar text to the Delivery Disclaimer field from Content, instead of entering plain text saying “Delivery Disclaimer”.

Previous Submissions

Attempt #<% submission.attemptNumber %>

<% submission.date %>

Score: <% submission.numericScore %>

Pending

Feedback

<% elem.innerText %>