Skip to content

Latest commit

 

History

History
180 lines (155 loc) · 6.15 KB

README.md

File metadata and controls

180 lines (155 loc) · 6.15 KB

designer-calendar

Create a stylish calendar for the month.

Example

Objective

Use CSS Flexbox and more to create a stylish calendar.

Prerequisites

To complete this project, students should have the following:

  • Intermediate understanding of HTML elements (divs, images, attributes, structure...etc.)
  • Intermediate understanding of CSS (Flexbox, margin, padding...etc.)

Your Challenge

Part I

To complete Part I, fulfill the following requirements:

  1. Set up your file structure through the command line:
  • index.html
  • styles.css
  1. Link your CSS file to your index.html file.

Part II HTML

To complete Part II, fulfill the following requirements:

  1. Create your HTML elements with this nested structure as follows:
  • div with id of "container"
    • div with id of "section1"
      • div with id of "year" and text of 2018
      • div with id of "title-container"
        • h1 with text of "DEC" (short for December)
    • div with id of "section2"
      • div with id of "top-title"
        • h3 with text of "DECEMBER 2018"
      • div with id of "calendar"

        • div with id of "weeks" and class of "row"

          • p with text of "S"
          • p with text of "M"
          • p with text of "T"
          • p with text of "W"
          • p with text of "T"
          • p with text of "F"
          • p with text of "S"

        • div with class of "row"

          • p with class of "oth-mo" (short for other month) and text of "25"
          • p with class of "oth-mo" and text of "26"
          • p with class of "oth-mo" and text of "27"
          • p with class of "oth-mo" and text of "28"
          • p with class of "oth-mo" and text of "29"
          • p with class of "oth-mo" and text of "30"
          • p with text of "1"

        • div with class of "row"

          • p with text of "2"
          • p with text of "3"
          • p with text of "4"
          • p with text of "5"
          • p with text of "6"
          • p with text of "7"
          • p with text of "8"

        • div with class of "row"

          • p with text of "9"
          • p with text of "10"
          • p with text of "11"
          • p with text of "12"
          • p with text of "13"
          • p with text of "14"
          • p with text of "15"

        • div with class of "row"

          • p with text of "16"
          • p with text of "17"
          • p with text of "18"
          • p with text of "19"
          • p with text of "20"
          • p with text of "21"
          • p with text of "22"

        • div with class of "row"

          • p with text of "23"
          • p with text of "24"
          • p with text of "25"
          • p with text of "26"
          • p with text of "27"
          • p with text of "28"
          • p with text of "29"

Part III CSS

To complete Part III, fulfill the following requirements:

Go to Google fonts and add the Lato and Oswald fonts to your HTML file.

  1. Target the body element.
  • Set its margin to 0px
  1. Target the id of "container".
  • Set the width to 100%
  • Set the height to calc(100vh)
  • Activate flexbox!
  • Use flexbox to set the direction of elements to a row.
  1. Target the id of "year".
  • Set the color to white
  • Set the font-family to 'Oswald', sans-serif
  • Set the size of the font to 30px
  • Set the background color to rgb(50,50,50)
  • Set the height to 10%
  • Activate flexbox!
  • Use flexbox to center the items horizontally and vertically
  • Set the letter-spacing to 3px
  1. Target the id of "section1" {
  • Set the width to 40%
  • Set the height to 100%
  • Set the background color to rgb(30,30,30)
  1. Target the h1 element of #section1
  • Set the font family to 'Oswald', sans-serif
  • Set the font size to 200px
  • Set the color to white
  1. Target the h3 element of #section1
  • Set the font-family to 'Oswald', sans-serif
  • Set the font size to 50px
  • Set the color to white
  • Set the padding to 0px
  1. Target the id of "section2"
  • Set the width to 60%
  • Set the height to 100%
  1. Target the id of "title-container"
  • Set the width to 100%
  • Set the height to 80%
  • Activate flexbox!
  • Use flexbox to center items horizontally and vertically
  • Use flexbox to set the direction of items to a column
  1. Target the id of "weeks"
  • Set the color to #3b9789
  • Set the font-weight to bold
  1. Target the id of "top-title"
  • Set the width to 100%
  • Set the height to 10%
  • Set the font-family to Oswald
  • Set the letter spacing to 2px
  • Activate flexbox!
  • Use flexbox to center items horizontally and vertically
  • Use flexbox to set the direction of items to a column
  1. Target the id of "calendar"
  • Set the width to 100%
  • Set the height to 80%
  • Activate flexbox!
  • Use flexbox to center items horizontally and vertically
  • Use flexbox to set the direction of items to a column
  1. Target the class of "row"
  • Set the width to 100%
  • Activate flexbox!
  • Use flexbox to set the direction of elements to a row
  • Use flexbox to evenly give horizontal space around each element
  1. Target the p elements of .row
  • Set the width to 50px
  • Set the height to 50px
  • Set the font family to Lato
  • Set the padding to 0px
  • Activate flexbox!
  • Use flexbox to center items horizontally and vertically
  1. Target the class of "oth-mo"
  • Set the color to rgb(120,120,120)

Stretch Goals

  1. Mark special days for this month by applying a class to those days and styling them in CSS!
  2. Super Stretch: Use click events to add notes to a day on click. Resources: