Tehnologii Web/2022-2023/Laborator 3

Introduction
This is an assignment-driven laboratory.


 * You are encouraged to continue the work from the previous laboratory.
 * You can use the existing CSS classes and HTML components.
 * You will need a separate HTML file for this task.
 * We are going to implement a responsive grid system (similar to Bootstrap) from scratch.

Task
Implement the following web dashboard having responsiveness in your mind.

Approach
In general terms, there are 3 viable approaches:


 * 1) Standard layout (default / stacked, in-line, floats and breakpoints)
 * 2) Flex layout
 * 3) Grid layout
 * 4) Responsive grid based on 12 columns - in this lab

Tips

 * The navbar takes 100% width (12 columns).
 * The left sidebar takes 2-3 columns on desktop and 12 columns on mobile.
 * The main content takes around 8-10 columns on desktop and 12 columns on mobile

Step 1
Generally, it is a good practice to set the sizing for all the elements as border-box.

Border-box means, essentially, the width and height values would take account of the element's padding and border.

Step 2
In your CSS stylesheet add the following classes for the columns.

Step 3
When the browser width is less than 768px, we will trigger our mobile view, then, our columns will take the entire width.

Step 4
Our content will be displayed under several rows. We want to clear the rest of the content in the row container. Also, adding some padding for our columns is also a popular practice.

Step 5
Your HTML body could look like this. Your task: complete the HTML and CSS files in order to match the desktop and the mobile view.