design1 – recipe with basic CSS

This week you are going to do some basic styling of your recipe by setting a number of different background colors and text colors. First though you are going to create a color palette using some tools to help – coolors.co and maketintsandshades.com.

Using Coolors you need to use your recipe image to help you generate a palette of five colors – white, black, primary, secondary, and tertiary. You will likely need to make manual adjustments to your color values, but once you’re done use the tool’s collage to create a nice image of your palette.

Next you will use Make Tints and Shades and enter your primary, secondary, and tertiary color values. This will create six sets of tints from which you will select a darker and lighter value for each of your three colors – adding six additional colors to your palette.

With all eleven colors defined in your palette, it’s now time to follow the CSS problem set created for your recipe (the CSS instructions are in the code block as well). It’s possible that your HTML for your recipe may differ slightly, so your selectors may some minor adjustments. There is an image of my recipe with CSS and without for reference. It doesn’t look great yet, but it’s on the way!

For the blog post

  • Upload to your server a new copy of the HTML recipe as well as the CSS file: recipe-with-css.html / recipe.css
  • Link to these two files in your post
  • Include your collage in your blog post. Because the generator names the file collage.png, rename your file before uploading and embeddingrecipe-name-collage.png.
  • Include a screenshot of your generated tints and shades. Name this file recipe-name-tints-shades.png.
/* Use https://coolors.co/ and your recipe image to help you generate a palette with a primary, secondary, tertiary, black, and white colors */

/* Use https://maketintsandshades.com/ to help you generate light and dark versions of your primary, secondary, and tertiary colors */

/*  From your pallete, list the hex color value after each color below */

/* 
color-primary
color-primary-dark 
color-primary-light 

color-secondary 
color-secondary-dark 
color-secondary-light 

color-tertiary 
color-tertiary-dark 
color-tertiary-light 

color-black 
color-white  
*/

/* Give the body element a background of color-white and text a color-black */

/* Make all headings uppercase */

/* Make the <h1> element color-primary */

/* Make the <h2> element color-secondary */

/* Make the <h3> element color-tertiary */


/* Make link text a primary, secondary, or tertiary color with no underline */

/* Make the hover state of links background color the same primary, secondary, or tertiary color; the text color-white, and with no underline */

/* Make the <hr> a primary, secondary, or tertiary color == you'll have to look up how to do this */

/* Make the un-ordered and ordered lists items alternate with a background color that is the light version of your primary, secondary, or tertiary color */

/* Make the unordered have no bullets before each item */

/* Make the table head row have a background color that is the dark version of your primary secondary or tertiary color; color the text your white */

/* Make the table body rows alternate a background color of your white and the light version of the primary secondary or tertiary color used in the table head */

/* Make the last table body row with the total have the same background color and text color as the table head row */

Join the Conversation

1 Comment

Leave a comment

Your email address will not be published. Required fields are marked *

css.php