Exercise 6 - CSS3 Media Queries, icons

CSS3 Media Queries

---

CSS definition
@media (min-width: 300px){ .myClass1{ color: red; font-size: 16px; } /* other styles definition for screen resolution >= 280px */ } @media (min-width: 600px){ .myClass1{ color: blue; font-size: 26px; } /* other styles definition for screen resolution >= 600px */ } More about media queries W3schools

Iconsets

---

GLYPHICON code
<span class="glyphicon glyphicon-education"></span>  
Font Awsome - stylesheet link
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">  
Font Awsome code
<div class="container"> <div class="col-md-3 text-center"> <!-- standard icon --> <i class="fa fa-bolt"></i> </div> <div class="col-md-3 text-center"> <!-- resized icon (x5) --> <i class="fa fa-bolt fa-5x"></i> </div> <div class="col-md-3 text-center"> <!-- resized icon (x5) and rotated (90*) --> <i class="fa fa-bolt fa-5x fa-rotate-90"></i> </div> <div class="col-md-3 text-center"> <!-- animated and resized icon --> <i class="fa fa-refresh fa-spin fa-3x fa-fw"></i> </div> </div>  
You can find all available GLYPHICONS here
You can search for more icons in Font Awsome icons search engine
More FA examples (like sizes, animations): Font Awsome webpage

Exercise
________

Use bootstrap, media queries and GLYPHICONS to create page that looks different in each screen size:
Medium screen size:

 
Small screen size:

 
Xsmall screen size: