Responsive landing page


My notes on how to make a responsive landing page.

The concept

The idea is to make each page make up the size of your macbook / iPhone screen like in the example bellow

img

The html

This html code can serve as your primer when fleshing out your website

<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="stylesheets/section.css">
<html>
    <body>
		 <div class="outer" id="one">
			 <div class="inner">
				 test
			 </div>
		 </div>
		 <div class="outer" id="two">
			 test
		 </div>
		 <div class="outer" id="three">test</div>
		 <div class="outer" id="four">test</div>
    </body>
</html>

The CSS:

This html code can serve as your primer when fleshing out your website

body {
  background-color: white;
}
html, body {
  height: 100%; /*This is the key to making each page fit your screen*/
  margin: 0px;
}
.outer {
 height: 100%; /*This is the key to making each page fit your screen*/
}
#one  {
  background: purple;
}
#two  {
  background: green;
}
#three  {
  background: red;
}
#four  {
  background: blue;
}