KatieMFritz
commented
7 years ago Nice start to this! 😁
Use colors from skillful-clouds.surge.sh for site name letters
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)
You've got the right idea, but I'm looking for the exact colors from skillful-clouds.surge.sh. You'll need to force the :hover state on the paragraphs on that page so you can see the colors in dev tools, like you did to get the styles for the input box. Let me know if you can't figure out what I mean. 🙂
Name CSS classes for what they do, not their content
To color your letters, you've used class names like first and second. This works, for now, but there are some weaknesses to this strategy:
- What if you want to color two letters the same color? Then you'll be out of order (for example, two letters might have the class
third). - Looking just at your HTML, how do you (or I, or another developer) know what that class does?
A more flexible and resilient way to structure CSS is to name classes after their function, not the content they are applied to. In this case, you might name your classes after the colors they assign (red, orange, etc.).
If you are using this kind of CSS setup, then you can change the styling on your HTML elements simply by adding/removing classes. You've actually seen this before, in the Skeleton/Bootstrap lesson, with classes like row, btn, and lead. You don't have to dictate the order of a row, button, or paragraph to style them with classes. Does that make sense? 😄
💡 Another tip: If you put each of your spans on a new line, it's a little easier to scan down the screen and see what the classes and content are.
<span class="this">A</span>
<span class="is">N</span>
<span class="an">I</span>
<span class="example">M</span>Search bar styles
Good job getting the border for the hover state on the search bar! :sparkles:
Your search bar is a lot shorter than the one in the lesson. It's okay for the width to not be the same, if you're using 100% for the width, but the height should be the same.
Submit button color
Also great job getting the hover and active styles for this! 🌯
Looks like in its default state, your button has darker blue text than the source button. The color on hover and active looks right. If you inspect the button on the Stripe demo page, you'll see that the darker blue color is given, but crossed out. In the "Computed Styles" section, you can see what rule is actually being applied for the color property. Let me know if you want help finding this! 😸
After you’ve made your changes and pushed them to GitHub and your hosted site, give it a once-over to make sure it looks right, then comment back here and I’ll take another look.
Thanks! :rocket:
woodsbr6
@KatieMFritz Can you take a look at this? It's hosted here and meets the following criteria:
inputbelow it, then a button below that to run the search (the button doesn't have to do anything for this prototype)spanelements 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 classesinputelement 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 onfocus)hoverandactive).cssfile