In week 10 you will be introduced to media queries and responsive styling. This week you will be creating a responsive grid, which will be the layout structure for your icon animations. YOU WILL BE...

72027/homework-vifeeqrs.docx
        
In week 10 you will be introduced to media queries and responsive styling. 
This week  you will be creating a responsive grid, which will be the layout structure for your icon animations. 
YOU WILL BE STYLING FIRST!!! See the tutorials on how to use the web inspector to view mobile sizes. 
· Starting With the starter file from last week 
· Targeting MOBILE FIRST, tablet, and small screen
· Each “box” or child div inside of the flex container should have a different background color
· MOBILE - one row of 6
· TABLET - three rows of 2
· SMALL SCREEN - two rows of 3 
· At each breakpoint the background colors of your box elements should change (you can do the body background too)
        
Week 12
· In week 12 you will be focusing on creating the icons
· You will be rendering your icons in the Response Media Query Grid that you created in week 11 and submitted. 
---------------------------------------------------------------------------------------------------------
Week 13
· In week 13 you will be focusing on adding im more animation features
· And scaling your icons to render out at the right size for each media query 
You will be using GLITCH to create these codes
72027/index.html
        
            
                1
    
                1
                1
    
            
            
                2
                2
                2
            
            
                3
                3
                3
            
            
                4
                4
                4
            
            
                5
                5
                5
            
            
                6
                6
                6
            
        
        
    
72027/style.css
@media (max-width: 480px) {
    body {
        background-color: #9933cc;
    }
    .flex-container {
     display: flex;
     flex-wrap: wrap;
     height: 600px;
    }
    .flex-container > div {
     background-color: DodgerBlue;
     margin: 10px;
     padding: 20px;
     text-align: center;
     font-size: 60px;
     width: 400px;
    }
}
@media (min-width: 481px) and (max-width:...