Html: Calendar

Content layout fundamentals
Last update: 16 May 10:28
0
Students

Calendars are very often used on web pages. They can be implemented in many different ways. You can put this challenge into any course and get completely different kinds of layout. In this challenge, you'll implement a calendar using the most accessible tools possible.

CSS Calendar

Main calendar styles

  • Text color: #fff
  • Font size: 16px
  • Line height: 1
  • Font: Rubik. Font files are in assets folder
  • Background color: #e5e5e5

Wrapper

  • Width: 250px
  • Paddings: 60 pixels from the top, right and left. 30 pixels from the bottom
  • Background color: #1e1f25
  • Corner rounding: 12px

Second level header

  • Bottom margin: 30px
  • Bold font
  • Font size: 16px

Calendar

  • Bottom margin: 30px
  • Bottom padding: 20px
  • Font size: 14px with line height 2
  • Bottom border which colored in #313131

Numbers

  • Color: #ccc, center-aligned
  • Padding: 0
  • Line height: 2.3
  • Background color of selected number: #589c5f

To-do list

  • Margins: 5px from the top, 20px from the bottom
  • Font size: 14px
  • Time color: #ccc
  • Time font size: 10px

For full access to the challenge you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
130
courses
900
exercises
2000+
hours of theory
3200
tests