In style.css add media queries for THREE different breakpoints. Do your research on common breakpoints and be sure to add comments defining each and explaining why you chose that specific one. Your comments should be in the CSS sheet within comment tags. Target two specific elements in your index.html file for each breakpoint, so if the browser screen size is dragged larger and smaller, you are able to clearly see the two different styling changes in the browser for each breakpoint. It can be anything: text color change, background color, etc. Get creative, but be sure to apply other style changes than just the background color. Feel free to add classes or IDs attributes, or tags, to your index.html file to help target your HTML elements.

I need a step-by-step on entering this into html and css folders. I'm using sublime and WINSCP

My current index.html folder:

Gaylisha Walker

• HOME
• ABOUT
• EXAMPLES
• CONTACT

Maecenas quis odio sit amet ipsum maximus egestas. Maecenas gravida magna vehicula quam pulvinar varius. Vestibulum venenatis quam enim, a eleifend tortor blandit non. >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.

Footer

My css.style folder:

/* Mobile first */ body { font-family: Arial, sans-serif; font-size: 16px; background-color: #e0e0e0; color: #333; }

header h1 { text-align: center; color: #333; }

nav ul { display: flex; justify-content: space-around; background-color: #333; color: #fff; list-style: none; padding: 0; }

nav a { flex: 1; text-transform: uppercase; text-decoration: none; color: #fff; padding: 10px 20px; }

nav a:hover { background-color: #ddd; color: #333; }

article h2 { text-align: center; color: #333; }

footer { text-align: center; padding: 30px; background-color: #333; color: #fff; }

/* Tablet Breakpoint */ @media (min-width: 768px) { body { font-size: 18px; }

nav ul { justify-content: center; } }

/* Desktop Breakpoint */ @media (min-width: 1024px) { body { font-size: 20px; }

header h1 { text-align: left; }

nav a { padding: 20px 30px; } }