程序代写代做代考 *Words in black are requirements for the assignment. Words in red are some

*Words in black are requirements for the assignment. Words in red are some

comments/notifications that need to be noted.

Submit an Index.html and a style.css file, and any other files needed for your website.

For this assignment, you will create a near-replica of Instagram.

You can use any tools we’ve learned in class, including Bootstrap or another CSS Framework,

as long as you fulfill the requirements for the assignment and it looks as similar to Instagram

as possible.

(Please cite the framework if using something other than Bootstrap. You’ll need to find

icon/pictures yourself for the contents.)

If you do not have an Instagram account, you can use the screenshots attached as a guide.

Requirements:

• Overall, your page should look as similar to Instagram as possible, and include the

following elements:

o Header bar with logo, search box, and icons

▪ header does not need to do shrinking effect when you scroll(Header needs to be

fixed on top of the page, without overlapping any contents)

▪ search box should include background color change on “focus” but other changes

do not need to be re-created

o Main content area

▪ Must contain 2 image posts with a caption.

▪ Must contain “suggestions for you” section

o Sidebar with profile info, stories, and footer links.

▪ Make sure sidebar is stationary while you scroll on the page (may want to look at

position: sticky, but not necessary)(stick the sidebar to right)

▪ Make sure stories area has too much content to fit and scrolls(put at least 6-8

foobar in the “Stories” area. Set a certain height for the “Stories” area. When the

height of the foobars reaches the set height, user should be able to scroll this

“Stories” area)

• Your page should have responsive behavior like Instagram, where around tablet size the

sidebar disappears and the main section is centered. This can be accomplished using

Bootstrap or your own media queries.

(Please note that on Mobile view, it only shows nav bar and image posts. No sidebar and

no “Suggestions for you” area. Refer to the screenshot at the last page.)

Main layout:

Scrolled down, “suggestions for you”:

Mobile view: