index.html

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title> CSS Showcase</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <!-- Place favicon.ico in the root directory -->

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <!-- Add your site or application content here -->

        <header>
            <h1 class="top">Fluid Grids</h1>
        </header>


        <div class="container">

           <section class="sec1">
              <h2>What are Fluid Grids?</h2>
              <p>"Fluid grids are an undervalued commodity in web design."-Ethan Marcotte </p>
           </section>


           <section class="sec2">
               <h2>Why use Fluid Grids?</h2>
               <p>Beacause mininum screen resolutions are a big fat lie...</p>
               <p>Come on folks it's 2017 and mobile devices are getting smaller (and larger) at the same damn time. Furthermore, desktops monitor sizes are getting wider with higher resolution.</p>
               <p>The real questions is a pixel even a pixel anyone?</p>
               <p>The answer is prolly not... </p>
           </section>


           <section class="sec3">
               <h2>How to create a fluid grid? </h2>
               <p>Creating a fluid grid from scratch is hard af and will require time and effort (...aint nobody got time for that!). So it’s smart to just use Bootstrap yo! So head over to the <a href="">bootstrap website</a>and read the tuts on Youtube and you'll be good!</p>
           </section>


        </div>


        <!-- Do not change after here -->
        <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>

        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script>
            (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
            function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
            e=o.createElement(i);r=o.getElementsByTagName(i)[0];
            e.src='https://www.google-analytics.com/analytics.js';
            r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
            ga('create','UA-XXXXX-X','auto');ga('send','pageview');
        </script>
    </body>
</html>
	<!doctype html>
	<html class="no-js" lang="">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title> CSS Showcase</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="apple-touch-icon" href="apple-touch-icon.png">
	<!-- Place favicon.ico in the root directory -->

	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/main.css">
	<script src="js/vendor/modernizr-2.8.3.min.js"></script>
	</head>
	<body>
	<!--[if lt IE 8]>
	<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
	<![endif]-->

	<!-- Add your site or application content here -->

	<header>
	<h1 class="top">Fluid Grids</h1>
	</header>


	<div class="container">

	<section class="sec1">
	<h2>What are Fluid Grids?</h2>
	<p>"Fluid grids are an undervalued commodity in web design."-Ethan Marcotte </p>
	</section>


	<section class="sec2">
	<h2>Why use Fluid Grids?</h2>
	<p>Beacause mininum screen resolutions are a big fat lie...</p>
	<p>Come on folks it's 2017 and mobile devices are getting smaller (and larger) at the same damn time. Furthermore, desktops monitor sizes are getting wider with higher resolution.</p>
	<p>The real questions is a pixel even a pixel anyone?</p>
	<p>The answer is prolly not... </p>
	</section>


	<section class="sec3">
	<h2>How to create a fluid grid? </h2>
	<p>Creating a fluid grid from scratch is hard af and will require time and effort (...aint nobody got time for that!). So it’s smart to just use Bootstrap yo! So head over to the <a href="">bootstrap website</a>and read the tuts on Youtube and you'll be good!</p>
	</section>




	</div>
















	<!-- Do not change after here -->
	<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
	<script>window.jQuery \|\| document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>
	<script src="js/plugins.js"></script>
	<script src="js/main.js"></script>

	<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
	<script>
	(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]\|\|(b[l]=
	function(){(b[l].q=b[l].q\|\|[]).push(arguments)});b[l].l=+new Date;
	e=o.createElement(i);r=o.getElementsByTagName(i)[0];
	e.src='https://www.google-analytics.com/analytics.js';
	r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
	ga('create','UA-XXXXX-X','auto');ga('send','pageview');
	</script>
	</body>
	</html>