├── .gitignore
├── README.md
├── css
    └── index.css
├── design-files
    ├── desktop-view.png
    ├── mobile-view.png
    └── tablet-view.png
├── img
    ├── header-img.png
    ├── logo.png
    └── mid-page-accent.jpg
└── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Responsive-Web-Design: Fully Responsive
 2 | 
 3 | You have experienced building fixed layout web pages, adaptive web pages, and now it's time to go fully responsive!  Using your new knowledge with responsive units, contstraints, and media queries you are now prepared to take on today's fully reponsive website project.
 4 | 
 5 | ## Task 1: Set Up The Project With Git
 6 | 
 7 | * [ ] Fork the project into your GitHub user account
 8 | * [ ] Clone the forked project into a directory on your machine
 9 | * [ ] You are now ready to build this project with your preferred IDE
10 | 
11 | ## Task 2: Project Objectives
12 | 
13 | * [ ] Review each [design file](design-files) and build your styles at each breakpoint.
14 | * [ ] Introduce `font-size: 62.5%;` into your `html` selector.
15 | * [ ] Constrain your container element with a `max-width` of 880px
16 | * [ ] Introduce max-width media queries into your project at 800px and 500px  
17 | * [ ] Convert all fixed widths, left and right margins and paddings throughout the site into percents. You will know this is working if you never see a horizontal scroll bar when you resize your browser.
18 | * [ ] Convert all `font-size` values into rem units
19 | * [ ] Do your best to make the breakpoints look pixel-close-enough 
20 | * [ ] Once you have completed all of the project objectives, push your commits and make a pull request against the original fork
21 | 
22 | ## Stretch Goals: 
23 | * [ ] Build the services page from earlier assignments into a responsive design using your own creativity
24 | * [ ] [Look at BEM](http://getbem.com/) and convert your existing CSS into the appropriate selectors.
25 | * [ ] Introduce CSS animations at different break points across your site
26 | * [ ] Build another page based on one of the navigation items and use your creativity on how it looks.
27 | 
28 | 
29 | 
30 | 


--------------------------------------------------------------------------------
/css/index.css:
--------------------------------------------------------------------------------
1 | /* Use your CSS from RWD - I here.  IF you don't have CSS, use the solution CSS from RWD - I*/


--------------------------------------------------------------------------------
/design-files/desktop-view.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloominstituteoftechnology/Responsive-Web-Design-II/d4d40f9c4bdd9519512d29a91dc6163ea93d1ac5/design-files/desktop-view.png


--------------------------------------------------------------------------------
/design-files/mobile-view.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloominstituteoftechnology/Responsive-Web-Design-II/d4d40f9c4bdd9519512d29a91dc6163ea93d1ac5/design-files/mobile-view.png


--------------------------------------------------------------------------------
/design-files/tablet-view.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloominstituteoftechnology/Responsive-Web-Design-II/d4d40f9c4bdd9519512d29a91dc6163ea93d1ac5/design-files/tablet-view.png


--------------------------------------------------------------------------------
/img/header-img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloominstituteoftechnology/Responsive-Web-Design-II/d4d40f9c4bdd9519512d29a91dc6163ea93d1ac5/img/header-img.png


--------------------------------------------------------------------------------
/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloominstituteoftechnology/Responsive-Web-Design-II/d4d40f9c4bdd9519512d29a91dc6163ea93d1ac5/img/logo.png


--------------------------------------------------------------------------------
/img/mid-page-accent.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloominstituteoftechnology/Responsive-Web-Design-II/d4d40f9c4bdd9519512d29a91dc6163ea93d1ac5/img/mid-page-accent.jpg


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | 
 3 | <html lang="en">
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | 
 8 |   <title>Great Idea! - Fully Responsive!</title>
 9 | 
10 |   <link href="https://fonts.googleapis.com/css?family=Bangers|Titillium+Web" rel="stylesheet">
11 |   <link rel="stylesheet" href="css/index.css">
12 | 
13 |   <!--[if lt IE 9]>
14 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
15 |   <![endif]-->
16 | </head>
17 | 
18 | <body>
19 | <!-- Use your own code or past solution here! -->
20 | </body>
21 | </html>


--------------------------------------------------------------------------------