loading

Module Assessment| Hitchhikers Platform

loading
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

  1. 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
  2. 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);
  3. 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
  4. 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.

  5. 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;
        }

    Announcement Bar

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
loading
Weekly Challenge Streak 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 expand/collapse module
  • 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? expand/collapse module

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? expand/collapse module

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 Knowledge Graph, instead of entering plain text saying “Delivery Disclaimer”.

Previous Submissions
Attempt #<% submission.attemptNumber %>
<% submission.date %>
Score: <% submission.numericScore %>
Pending
Splash Loading