Assignment 1 - Build Your personal website

Deadline Saturday, Feb 12- 11:59 PM

Replicate the following website using your own content and the HTML and CSS concepts that
you have practiced in the Labs 1 to 4.

Note: The website is a personal website, so the content should be your own content and not
what is shown in the picture. Your profile image is (optional) you can use any avatar, incase you
do not want to add your own. Also, you are allowed to use any font, images and background
that you like as long as the page layout design resembles the one given below, and you apply
the following concepts.

1. All the pages should use the HTML 5 Sematic tags that you have seen in the previous
labs.
2. Use the flexbox, grid and media queries to define a responsive pages layout
3. Use font-awesome to add icons to the website and Google fonts for the website font.
4. You can use beautiful box shadows from getcssScan website as shown in the lab.

Detail Description of the Website

1. Create a project named “<Your Name> Personal Blog “
2. Create the following three pages, home.html, blog.html and contact.html
3. After completing the assignment, all the pages should resemble the images shown
4. When the user cursor gets over the links, you should indicate the focused item, by
changing the color , making it underlined etc..

The home page in smaller devices < 60rem

The home page in Larger Screen >= 60rem
Blog Page
Below are the design images of the blog tab (mobile-left and desktop-right)
Contact Page
The left side image is for smaller screen and the right side image is how your contact page should

look like in larger screen greater or equal too 60rem..

After you complete the lab:

1. Fill in the TestingDoc-Grading-Sheet.docx and save it inside Assignments/Assignment 1

folder with the project
2. Sync your repository to push your work to GitHub.