Convert this fixed-width layout into a fluid layout which appropriately converts pixels to percentages and ems where necessary. Your layout should also include media queries which will change the layout for three different breakpoints.

HTML Code: index.html

                 
  
 
WEB132 Lab 3 Header
 
   
 
 
Link 1
 
Link 2
 
Link 3
 
Link 4
 
    
 
This is the Main Content
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend quam. Cras vel felis augue. kum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean sodales enim id neque accumsan ultricies. Sed ut arcu quis enim tristique posuere ut nec ligula. Aenean tristique tincidunt condimentum. Sed imperdiet neque nec sapien dignissim sit amet eleifend dui adipiscing. Quisque molestie turpis id orci pulvinar faucibus. Praesent ut lacus est, sed mattis lectus. Donec a ipsum non nibh eleifend bibendum. Suspendisse et sapien lectus, ut hendrerit urna.
 
Suspendisse potenti. Duis commodo, nunc eget tincidunt volutpat, ante enim blandit enim, id tincidunt eros dui vel sapien. Phasellus pulvinar semper massa, in pellentesque risus interdum eu. Praesent vel eros sed tortor ullamcorper fringilla non non nibh. Nulla ut magna massa, sit amet porta nibh. Nulla dignissim facilisis libero id consequat. Donec mattis pharetra tellus, at hendrerit erat cursus laoreet. Nunc ipsum magna, posuere eget tincidunt non, bibendum nec ante.
 
   
 
This is the Aside Content
 
 
Aside Link One
 
Aside Link Two
 
Aside Link Three
 
Aside Link Four
 
 
   
 
This is the Footer
 
  
    

CSS Code: main.css

* { padding: 0; margin: 0; } body { font-family: Arial, Helvetica, sans-serif; background-color: #7797AE; } #container { margin: 0 auto; width: 800px; } header { color: #333; width: 750px; padding: 5px 0 0 50px; float: left; height: 100px; margin: 10px 0px 0px 0px; background: #E7DBD5 url(../img/header_800x122.jpg) no-repeat top center; } nav { float: left; width: 800px; color: #333; padding: 10px 0px 10px 0px; background: #BDBEC2; } article { color: #333; padding: 10px; height: 450; width: 540px; float: left; display: inline; background: #F2F2E6; } aside { float: right; color: #333; padding: 10px; height: 300px; width: 220px; background: #AAA29F; } footer { width: 780px; font-weight: bold; text-align: center; clear: both; color: #fff; background: #7797AE url(../img/footer_800x128.jpg) no-repeat top center; padding: 10px; margin: 0px 0px 10px 0px; } ul.nav-list li { display: inline; list-style-type: none; margin: 10px 20px 10px 20px; } ul.aside-list li { list-style-type:circle; margin: 10px 5px 10px 35px; } ul.aside-list li:first-of-type { margin-top: 30px; list-style-type:circle; } article img.alignright{ display:inline; float: right; border: 1px solid black; margin: 20px 15px 5px 15px; } p { margin-top: 10px; } h1 { font-size: 30px; } h2{ font-size: 26px; } h3{ font-size: 18px; } 

Here are the included images:

Transcribed image text