🧩 CSS Containers

Time to create an events page on the web!

🏁 STEPS

1. Follow AND read the following HTML guide: HTML GUIDE

2. Your task is to create the same design on the web as follows:

⚠️ NOTE: You can find the design image under /design folder in the root directory.

3. Create any necessary files for your project. Ex. index.html and any other files/folders required in this project root folder.
   

4. The image you need can be found under folder /images.

5. Other than the required elements seen in class, your website MUST include the following elements:

<!-- A page title -->
<title></title>

<!-- Headings-->
<h1></h1>
<h2></h2>

<!-- Text styles like:-->
<b></b>
<i></i>

<!-- Lists -->
<ul></ul>
<li></li>

<!-- Link -->
<a></a>

<!-- image -->
<img />

<!-- Sections -->
<section></section>

<!-- new element -->
<small></small>

<!-- Divs -->
<div></div>

6. Do not forget about some useful CSS. If you do not know a property from the following list, a good Google Search might get you there.
   

• Give the right names to your classes. Ex. top-box, bottom-box, computer-hardware-container, microsoft-patch-container time-hour, event-type, etc. Based on the content, provide names.

Warning

The following properties are the only ones allowed for this challenge. Read carefully!

   body {
      font-family: "Segoe UI";
      font-weight: /* 300, 500 or 700 */;
   }

   #selector {
      margin: auto;
      width: /* value can be in px or percentage */;
      padding: /* Great use case for having space around the content */;
      border-radius: /* what do you think this might help you do in the border? 🤔*/;
   }

   img {
      display: block; /* What is this property doing to the image or any other element? 💭 */;
   }

   #box {
        display: flex /* This is not allowed in your challenge */;
   }

---

😃 Start coding

• Remember to follow excellent quality control procedures (i.e., no space in folders or names, HTML indentation/spacing, closing tags, etc.)
• Use a style guide - HTML Style Guide