Course: CSS Basics

Challenge: Layout Prototype [15/15]

In this challenge, you'll have to correct a simple layout prototype. HTML Editor is locked, so please use styling only.

You'll have to fix some properties and add some missing ones. In this course, you've already used all the properties which are "corrupt" or "missing" from the prototype:

  • Width and margins,
  • Background and text color,
  • Font style and weight,
  • Layout creation.


  • Colors used: #ffffff and #333333.
  • For one element, you will have to change its font size; use the font-size property for this.
  • Paddings, margins, block width, and unknown font sizes are the multiples of 10,
  • Positioning properties like position, top, left, etc., have not been used.

Do it
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Challenge: Layout Prototype</title> </head> <body> <div class="header"> <div class="logo">Logo</div> <div class="contacts">+7 (812) 33-4-55</div> </div> <div class="about-us"> <h1>About Us</h1> <p>We offer you the top-quality HTML page layout coding services.</p> <p>We use HTML5 and CSS3, develop adaptive layouts and employ Progressive Enhancement.</p> </div> <div class="main-menu"> <a href="#about">About Us</a><br> <a href="#contacts">Careers</a><br> <a href="#contacts">Contacts</a><br> </div> <div class="footer"> &copy; 2015 — Keksby Web Production </div> </body> </html>
/* Please do not change: these are the styles common for the document and the blocks */ body { width: 450px; margin: 0; padding: 10px; font-family: Arial, sans-serif; font-size: 14px; } .logo, .contacts, .about-us, .main-menu, .footer { padding: 10px 20px 10px 20px; background-color: #f5f5f5; border: 2px solid #cccccc; } /* Block-specific styles */ .header { min-height: 40px; margin-bottom: 20px; } .logo { float: left; width: 100px; text-align: center; } .contacts { float: right; width: 110px; text-align: center; } .about-us { width: 200px; margin-bottom: 10px; } .about-us h1 { } .about-us p { font-size: 12px; } .main-menu { width: 50px; } .footer { }
<HTML Academy>