Project Feedback

[HunterSch-713]

Build a prototype page (i.e. simple example of how it will look, without making it work) for a new search engine

@egillespie Can you take a look at this? It's hosted here and meets the following criteria:

• The page includes the name of your search engine in big letters (you can make it up), with a search input below it, then a button below that to run the search (the button doesn't have to do anything for this prototype)
• The font size of the search engine name is at least 70 pixels, so that it's very easy to see
• span elements are wrapped around each letter of the name, like this: <span>G</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span>, so that they can be styled individually with classes
• The on-hover colors from the paragraphs on this page are used to color individual letters of your name (similar to the letters in Google's logo)
• Inspect the input element at the bottom of the Prototyping states page of the lesson to create an identical-looking search box for your own site (it should even use the same styles on focus)
• The styles from the "Create Account" button at the top of this page are used for your "Search" button (it should even use the same styles on hover and active)
• There are no linter errors in your CSS (this will also be expected for all future projects)
• All your CSS exists in a .css file

[egillespie]

Your elements are looking pretty slick here, Hunter. That text box especially is spot on. Nice! 🤘

Here are some recommendations to help get the page heading and buttons up to spec. Can you try these out?

Use the inspected :hover colors from the color list page

It looks like your page heading colors are using the color names (red, yellow, green, etc.) from the color list page. Since the focus of this lesson is using the browser style inspector, I would like you to use the exact color values grabbed from the :hover styles for each of those elements.

Can you use the inspector to grab those color values and apply them to your letters?

Match :hover and :active styles of button prototype

Your :hover effect looks really sweet, but I would like it and the :active styles to match the prototype from requirement 6 for this project. They're really close, but there are some small differences:

Yours:

Prototype:

Would you mind using the inspector to get the :hover and :active styles from the prototype and apply them to your button?

When I move my mouse over your buttons, I'd like to see the button "lift up" a little bit, then "push down" when I click on it.

---

Comment back if you need some tips or want another review. You're real close, keep up the good work! 🎉

[HunterSch-713]

Should be good to go! Looks like I Missed a 0 at the beginning of the box shadow making it look more intense, but I did add the :active element and the specific color codes for the name :hover as well.

[egillespie]

Sweet, these changes look and work great. Nicely done! 👏