Description:
Design a responsive web page with three sections: a bio section, a hobbies section, and a contact me
section. All these sections must be implemented in one page. The page must be responsive for two
states. First, for standard screens, and second, for cell phone screens whose screen width is less than
450 pixels.
In the first design, you should have a fixed left-side menu, which expands from the top to the bottom of
the viewport and remains there all the time. On top of the menu, you must put your profile picture, then
three buttons that are actually three links, one for each section. Whenever you click on one of these
links, it must navigate to the corresponding section on the page.
On cell phones, the menu must be on top of the page, and the content must be shown underneath the
menu. In this state, the menu is sticky. That means the menu remains at the top whenever you scroll the
page. Again, the corresponding section must be shown when you click these buttons. In this case, the
content might be shown underneath of the menu. This problem can be solved but not with the stuff that
you have learned. So, you do not need to fix this problem.
About the content of each section, you should implement at least something similar to mine, but feel
free to add more content.
Check the video for more detail at https://youtu.be/8YGYQ3jVNDI.
To get credit:
To earn credit, your grade will be based on the following criteria:
Making the page responsive (20%).
Implementing the menu for each state (30%).
Ensuring your page is visually appealing (20%).
The content of the page, including images, text, links, lists, etc (25%).
On time submission (10%)
Yes, it sums up 105%. The extra 5% is a bonus. ????
To Submit:
Zip all the files and upload the zip file before the deadline. You only must upload one ZIP file
containing all the images, HTML, and CSS files, nothing more, nothing less. Make sure that you include
the images in your zip file.
Note
Do NOT go beyond the course materials. If you use something that we have not talked about yet,
you will lose the credit of the assignment.
You may need to add some margin to the target of menu options in Mobile view. In that case, you
may need to add the following CSS rule to your Mobile View CSS rules.
Explanation
What is :target?
The :target pseudo-class selects an HTML element that matches the current URL fragment identifier (the
part of the URL that comes after the # symbol).
For example, if you have:
<h2 id=”section1″>Section 1</h2>
<a href=”#section1″>Go to Section 1</a>
When you click the link, the URL becomes yourpage.html#section1, and the <h2> element with
id=”section1″ becomes the :target.
What is scroll-margin-top?
This property sets a top margin used when scrolling an element into view (e.g., via anchor link
navigation like #section1). If a fixed header is covering the top of your content when jumping to a
section, scroll-margin-top is a solution.
What This Rule Does
When you navigate to an element via an anchor (#id), this rule adds 200px of space above that target
element during scrolling. So, the element won’t be flush with the top of the page — it will appear 200px
lower (leaving room, for example, for a sticky header). Change 200px to the height of your own menu.
Why Use It?
It’s helpful when:
– You have a fixed/sticky header
– You want to avoid the header overlapping your anchor target
– You want to control scroll behavior for better UX
only use syntax and code types found in the zip file
create another word document or pdf where you cite where i nthe document you pdfs in the zip you got your code
