thiagoh · March 4, 2017 21:24
diff --git a/basic-media-queries.html b/basic-media-queries.html
 <!doctype html>
 <html>

 <head>
  <title>My First HTML Page</title>
  <!--<meta name="viewport" content="width=1200, initial-scale=1">-->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <style>
    #left {
      padding: 4px;
      box-sizing: border-box;
    }
    
    @media(max-width:768px) {
      #left {
        float: left;
        width: 100%;
      }
    }
    
    @media(min-width:768px) {
      #left {
        float: left;
        width: 50%;
      }
    }
    
    @media(min-width:1024px) {
      #left {
        float: left;
        width: 33.3%;
      }
    }
    
    @media(min-width:1200px) {
      #left {
        float: left;
        width: 25%;
      }
    }
    
    .red {
      background: darkred;
    }
    
    .blue {
      background: darkblue;
    }
    
    .green {
      background: darkgreen;
    }
    
    .yellow {
      background: darkgoldenrod;
    }
  </style>

 </head>

 <body>
  <p>This is just text</p>
  <img src="someimage.jpg" alt="Just some image" />

  <br>

  <div id="left" class="red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies justo vel ipsum euismod, et bibendum lorem vestibulum. Vivamus molestie, urna quis sollicitudin gravida, ligula arcu pulvinar mauris, in mollis dui est ac arcu. Donec hendrerit
    nulla nec ligula facilisis fringilla. Vestibulum ex nisi, tempor eget nibh id, consectetur pulvinar metus. Vivamus dignissim massa sit amet erat suscipit, nec pellentesque lacus egestas. Duis cursus ac massa ac gravida. Vestibulum vel nibh interdum,
    facilisis leo ut, tincidunt leo. Curabitur hendrerit lorem ante, in condimentum mi sodales eu. Nullam semper dictum justo vel semper. In consequat ante at purus pulvinar efficitur. Sed et aliquet arcu. In velit purus, lobortis at dapibus id, lobortis
    vel arcu. Mauris tempus sollicitudin lorem, nec ornare ante fringilla a. Quisque maximus turpis quis quam vehicula, ut cursus nisi eleifend. In hac habitasse platea dictumst.
  </div>

  <div id="left" class="blue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies justo vel ipsum euismod, et bibendum lorem vestibulum. Vivamus molestie, urna quis sollicitudin gravida, ligula arcu pulvinar mauris, in mollis dui est ac arcu. Donec hendrerit
    nulla nec ligula facilisis fringilla. Vestibulum ex nisi, tempor eget nibh id, consectetur pulvinar metus. Vivamus dignissim massa sit amet erat suscipit, nec pellentesque lacus egestas. Duis cursus ac massa ac gravida. Vestibulum vel nibh interdum,
    facilisis leo ut, tincidunt leo. Curabitur hendrerit lorem ante, in condimentum mi sodales eu. Nullam semper dictum justo vel semper. In consequat ante at purus pulvinar efficitur. Sed et aliquet arcu. In velit purus, lobortis at dapibus id, lobortis
    vel arcu. Mauris tempus sollicitudin lorem, nec ornare ante fringilla a. Quisque maximus turpis quis quam vehicula, ut cursus nisi eleifend. In hac habitasse platea dictumst.
  </div>

  <div id="left" class="green">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies justo vel ipsum euismod, et bibendum lorem vestibulum. Vivamus molestie, urna quis sollicitudin gravida, ligula arcu pulvinar mauris, in mollis dui est ac arcu. Donec hendrerit
    nulla nec ligula facilisis fringilla. Vestibulum ex nisi, tempor eget nibh id, consectetur pulvinar metus. Vivamus dignissim massa sit amet erat suscipit, nec pellentesque lacus egestas. Duis cursus ac massa ac gravida. Vestibulum vel nibh interdum,
    facilisis leo ut, tincidunt leo. Curabitur hendrerit lorem ante, in condimentum mi sodales eu. Nullam semper dictum justo vel semper. In consequat ante at purus pulvinar efficitur. Sed et aliquet arcu. In velit purus, lobortis at dapibus id, lobortis
    vel arcu. Mauris tempus sollicitudin lorem, nec ornare ante fringilla a. Quisque maximus turpis quis quam vehicula, ut cursus nisi eleifend. In hac habitasse platea dictumst.
  </div>

  <div id="left" class="yellow">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies justo vel ipsum euismod, et bibendum lorem vestibulum. Vivamus molestie, urna quis sollicitudin gravida, ligula arcu pulvinar mauris, in mollis dui est ac arcu. Donec hendrerit
    nulla nec ligula facilisis fringilla. Vestibulum ex nisi, tempor eget nibh id, consectetur pulvinar metus. Vivamus dignissim massa sit amet erat suscipit, nec pellentesque lacus egestas. Duis cursus ac massa ac gravida. Vestibulum vel nibh interdum,
    facilisis leo ut, tincidunt leo. Curabitur hendrerit lorem ante, in condimentum mi sodales eu. Nullam semper dictum justo vel semper. In consequat ante at purus pulvinar efficitur. Sed et aliquet arcu. In velit purus, lobortis at dapibus id, lobortis
    vel arcu. Mauris tempus sollicitudin lorem, nec ornare ante fringilla a. Quisque maximus turpis quis quam vehicula, ut cursus nisi eleifend. In hac habitasse platea dictumst.
  </div>

 </body>

 </html>
	<!doctype html>
	<html>

	<head>
	<title>My First HTML Page</title>
	<!--<meta name="viewport" content="width=1200, initial-scale=1">-->
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<style>
	#left {
	padding: 4px;
	box-sizing: border-box;
	}

	@media(max-width:768px) {
	#left {
	float: left;
	width: 100%;
	}
	}

	@media(min-width:768px) {
	#left {
	float: left;
	width: 50%;
	}
	}

	@media(min-width:1024px) {
	#left {
	float: left;
	width: 33.3%;
	}
	}

	@media(min-width:1200px) {
	#left {
	float: left;
	width: 25%;
	}
	}

	.red {
	background: darkred;
	}

	.blue {
	background: darkblue;
	}

	.green {
	background: darkgreen;
	}

	.yellow {
	background: darkgoldenrod;
	}
	</style>

	</head>

	<body>
	<p>This is just text</p>
	<img src="someimage.jpg" alt="Just some image" />

	<br>

	<div id="left" class="red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies justo vel ipsum euismod, et bibendum lorem vestibulum. Vivamus molestie, urna quis sollicitudin gravida, ligula arcu pulvinar mauris, in mollis dui est ac arcu. Donec hendrerit
	nulla nec ligula facilisis fringilla. Vestibulum ex nisi, tempor eget nibh id, consectetur pulvinar metus. Vivamus dignissim massa sit amet erat suscipit, nec pellentesque lacus egestas. Duis cursus ac massa ac gravida. Vestibulum vel nibh interdum,
	facilisis leo ut, tincidunt leo. Curabitur hendrerit lorem ante, in condimentum mi sodales eu. Nullam semper dictum justo vel semper. In consequat ante at purus pulvinar efficitur. Sed et aliquet arcu. In velit purus, lobortis at dapibus id, lobortis
	vel arcu. Mauris tempus sollicitudin lorem, nec ornare ante fringilla a. Quisque maximus turpis quis quam vehicula, ut cursus nisi eleifend. In hac habitasse platea dictumst.
	</div>

	<div id="left" class="blue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies justo vel ipsum euismod, et bibendum lorem vestibulum. Vivamus molestie, urna quis sollicitudin gravida, ligula arcu pulvinar mauris, in mollis dui est ac arcu. Donec hendrerit
	nulla nec ligula facilisis fringilla. Vestibulum ex nisi, tempor eget nibh id, consectetur pulvinar metus. Vivamus dignissim massa sit amet erat suscipit, nec pellentesque lacus egestas. Duis cursus ac massa ac gravida. Vestibulum vel nibh interdum,
	facilisis leo ut, tincidunt leo. Curabitur hendrerit lorem ante, in condimentum mi sodales eu. Nullam semper dictum justo vel semper. In consequat ante at purus pulvinar efficitur. Sed et aliquet arcu. In velit purus, lobortis at dapibus id, lobortis
	vel arcu. Mauris tempus sollicitudin lorem, nec ornare ante fringilla a. Quisque maximus turpis quis quam vehicula, ut cursus nisi eleifend. In hac habitasse platea dictumst.
	</div>

	<div id="left" class="green">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies justo vel ipsum euismod, et bibendum lorem vestibulum. Vivamus molestie, urna quis sollicitudin gravida, ligula arcu pulvinar mauris, in mollis dui est ac arcu. Donec hendrerit
	nulla nec ligula facilisis fringilla. Vestibulum ex nisi, tempor eget nibh id, consectetur pulvinar metus. Vivamus dignissim massa sit amet erat suscipit, nec pellentesque lacus egestas. Duis cursus ac massa ac gravida. Vestibulum vel nibh interdum,
	facilisis leo ut, tincidunt leo. Curabitur hendrerit lorem ante, in condimentum mi sodales eu. Nullam semper dictum justo vel semper. In consequat ante at purus pulvinar efficitur. Sed et aliquet arcu. In velit purus, lobortis at dapibus id, lobortis
	vel arcu. Mauris tempus sollicitudin lorem, nec ornare ante fringilla a. Quisque maximus turpis quis quam vehicula, ut cursus nisi eleifend. In hac habitasse platea dictumst.
	</div>

	<div id="left" class="yellow">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies justo vel ipsum euismod, et bibendum lorem vestibulum. Vivamus molestie, urna quis sollicitudin gravida, ligula arcu pulvinar mauris, in mollis dui est ac arcu. Donec hendrerit
	nulla nec ligula facilisis fringilla. Vestibulum ex nisi, tempor eget nibh id, consectetur pulvinar metus. Vivamus dignissim massa sit amet erat suscipit, nec pellentesque lacus egestas. Duis cursus ac massa ac gravida. Vestibulum vel nibh interdum,
	facilisis leo ut, tincidunt leo. Curabitur hendrerit lorem ante, in condimentum mi sodales eu. Nullam semper dictum justo vel semper. In consequat ante at purus pulvinar efficitur. Sed et aliquet arcu. In velit purus, lobortis at dapibus id, lobortis
	vel arcu. Mauris tempus sollicitudin lorem, nec ornare ante fringilla a. Quisque maximus turpis quis quam vehicula, ut cursus nisi eleifend. In hac habitasse platea dictumst.
	</div>

	</body>

	</html>