/Vanilla-CSS-Responsive-Basic-Portfolio

In this repo I demonstrate the use of vanilla css and jQuery to create a basic responsive portfolio site.

Primary LanguageHTML

Vanilla-CSS-Responsive-Basic-Portfolio

Demonstrate the use of vanilla CSS and jQuery to create a basic responsive portfolio site.

Project Overview

This repo shows my ability to code CSS and HTML without using a responsive library like Boostrap. I also, used some basic jQuery event listeners

View Demo

To view demo click on this link: (Demo Link)

Project Requirements

  1. Use three @media screen tags, each with one of these max-widths: 980px, 768px and 640px.

  2. Container width of 980px because you never want any of the content to be cut off. Since the desktop layout is about 960px wide, you want the media queries to kick in before your content gets cut off.

  3. 768px is about the width of a tablet and 640px is about the width of a phone in landscape.

  4. Make the layout match the following screenshots:

    a. index.html: 980px, 768px, 640px

    b. portfolio.html: 980px, 768px, 640px

    c. contact.html: 980px, 768px, 640px

  5. Make the position of the header static (the default positioning) when the screen is 640px wide. The header design takes up a lot of room; you don't want it to stick to the top of a small screen and leave no room for the rest of your site.