CSS · HTML · Viking Code School

Facebook Login & About Pages with HTML & CSS

This assignment for the advanced prep work of Viking Code School involved using HTML and CSS to clone the login and about pages of Facebook. Harry Potter was used for the demo profile as displayed in the mockup provided with the assignment. It was recommended we use a single CSS file rather than separate ones for each page.

View the source code for the index.html, about.html, and sytle.css files at my Github repo.

View the actual pages published here (click the login button to advance to the about page).

Some techniques I used to accomplish the layout in the pages:

  • The flexbox was used, both in a row and column setting multiple times to achieve the proper layout of the elements on both pages.
  • Padding and margins were used for flexbox items to position them apart from one another.
  • The entire login page and the header for the about page were provided properties for a responsive design on smaller screens.
  • The buttons on the login page were given properties within CSS to change color upon a mouse hover, as well as change the cursor to a pointer.
  • The cover photo was centered with margin: auto, was given a defined width and height, and a position of relative was applied. The profile photo and profile name were then given position values of absolute, a higher z-index than the cover photo, and then lain out on top of the cover photo.
  • Information in the about section was written into the HTML in tables and then the tables were formatted and placed within larger elements that were made flexbox columns.
fb-clone1
My clone of the Facebook login page.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s