trjhtr

/* Global -------------------------- */

body 
 font: 1.5rem/1.5 Lato, Arial, Helvetica, Sans-serif;
 background: #e3e3e3;
 color: rgb(71, 71, 71);
 text-align: center;


.content-wrapper 
 width: 95%;
 margin: auto;



/* Header -------------------------- */

.logo 
 font-weight: bold;


.info h3 
 display: inline-block;


.navigation-wrapper,
.navbar-width 
 width: 95%;
 margin: auto;


header 
 padding-bottom: .5rem;


header nav a 
 display: block;
 background: rgb(184, 184, 184);
 margin-bottom: .5rem;
 color: white;
 text-shadow: 0 0 8px #000;


header nav a:hover,
#active 
 background: rgb(211, 211, 211);
 -webkit-transition: 0.2s;
 -o-transition: 0.2s;
 transition: 0.2s;


.info a img 
 padding-left: .5rem;


.info a img:hover 
 -webkit-filter: brightness(130%);
 filter: brightness(130%);
 -webkit-transition: 0.2s;
 -o-transition: 0.2s;
 transition: 0.2s;



/* Footer ------------------------ */

.footer-grid 
 display: -ms-grid;
 display: grid;
 -ms-grid-columns: (1fr)[3];
 grid-template-columns: repeat(3, 1fr);


footer 
 background: rgb(34, 34, 34);
 color: white;
 font-size: 1.2rem;
 padding: .3rem;
 margin-top: 1rem;


footer .row-a 
 vertical-align: middle;
 line-height: 80px;


footer .row-b a 
 color: white;
 background: transparent !important;


footer .row-b a:hover,
#foot-active 
 color: rgb(136, 136, 136);
 -webkit-transition: 0.2s;
 -o-transition: 0.2s;
 transition: 0.2s;


footer .row-c a:hover 
 -webkit-filter: brightness(120%);
 filter: brightness(120%);
 -webkit-transition: 0.2s;
 -o-transition: 0.2s;
 transition: 0.2s;



/* Landing Image -------------------------- */

.landing-image 
 background: url('https://images.pexels.com/photos/91217/pexels-photo-91217.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb') no-repeat center;
 background-size: 100% 100%;
 min-height: 15rem;


.landing-text 
 padding-top: 6.5rem;


.landing-text h3 
 background: rgba(255, 255, 255, 0.2);
 color: white;
 text-shadow: 0 0 8px #000;



/* Main Content -------------------------- */

.image-a 
 background: url('https://images.pexels.com/photos/434252/pexels-photo-434252.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb') no-repeat center;
 background-size: 100% 100%;
 height: 200px;
 width: auto;


.image-b 
 background: url('https://images.pexels.com/photos/3018/cup-mug-water-tea.jpg?w=1260&h=750&auto=compress&cs=tinysrgb') no-repeat center;
 background-size: 100% 100%;
 height: 200px;
 width: auto;


.image-a:hover,
.image-b:hover 
 opacity: 0.6;
 -webkit-transition: 0.2s;
 -o-transition: 0.2s;
 transition: 0.2s;


.main-content h2 
 background: rgba(0, 0, 0, 0.2);
 color: white;
 text-shadow: 0 0 8px #000;
 text-transform: uppercase;
 margin: 1rem 0;


.main-content p 
 text-align: left;
 margin-left: .5rem;



/* Clearfix ------------------ */

.clearfix::after 
 content: "";
 clear: both;
 display: table;


/* Media Queries --------------------------- */

@media (min-width: 700px) 
 /* Header ---------------------- */
 .nav-grid 
 display: -ms-grid;
 display: grid;
 -ms-grid-columns: 1fr 1fr;
 grid-template-columns: 1fr 1fr;
 
 .info 
 padding-top: 1rem;
 
 /* Navigation Bar -------------------- */
 header nav li 
 float: left;
 
 header nav a 
 padding: .5rem 1rem;
 margin: 0;
 
 header nav 
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
 
 .navbar-bg 
 background: rgb(184, 184, 184);
 
 .navbar-width 
 width: 100%;
 
 /* Main Content --------------------- */
 .main-content img 
 height: 400px;
 
 .content-grid 
 display: -ms-grid;
 display: grid;
 -ms-grid-columns: 1fr 1fr;
 grid-template-columns: 1fr 1fr;
 grid-template-areas: "part-a" "part-b" "image-a" "image-b";
 grid-gap: 1rem;
 
 .part-a 
 -ms-grid-row: 1;
 -ms-grid-column: 1;
 grid-area: part-a;
 -ms-grid-column: 1;
 -ms-grid-column-span: 1;
 grid-column: 1/2;
 -ms-grid-row: 1;
 grid-row: 1;
 
 .part-b 
 -ms-grid-row: 2;
 -ms-grid-column: 1;
 grid-area: part-b;
 -ms-grid-column: 2;
 -ms-grid-column-span: 2;
 grid-column: 2/4;
 -ms-grid-row: 1;
 grid-row: 1;
 
 .image-a 
 -ms-grid-row: 3;
 -ms-grid-column: 1;
 grid-area: image-a;
 -ms-grid-column: 1;
 -ms-grid-column-span: 1;
 grid-column: 1/2;
 -ms-grid-row: 2;
 grid-row: 2;
 
 .image-b 
 -ms-grid-row: 4;
 -ms-grid-column: 1;
 grid-area: image-b;
 -ms-grid-column: 2;
 -ms-grid-column-span: 2;
 grid-column: 2/4;
 -ms-grid-row: 2;
 grid-row: 2;
 


@media (min-width: 1000px) 
 .navigation-wrapper 
 width: 70%;
 
 .content-wrapper 
 width: 75%;
 


@media (min-width: 1000px) 
 .navigation-wrapper 
 width: 75%;
 
 .content-wrapper 
 width: 65%;
 



/**
 * Remove list styling.
 */

ul 
 padding: 0;
 margin: 0;
 list-style-type: none;



/* Remove padding & margin from text elements. */

h1,
h2,
h3,
h4,
h5,
h6,
p,
a 
 padding: 0;
 margin: 0;



/* Remove underline from links */

a 
 text-decoration: none;



/* Box sizing */

*,
*:before,
*:after 
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Louis Young | Site 3</title>
 <link rel="icon" href="./img/favicon.ico" type="image/x-icon" />
 <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon" />
 <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato">
 <link rel="stylesheet" href="./css/normalize.css">
 <link rel="stylesheet" href="./css/style.css">
 <link rel="stylesheet" href="./css/mediaquery.css">
</head>

<body>

 <!-- Header & Navigation ------------------------------------------------ -->

 <header>

 <div class="navigation-wrapper clearfix">

 <div class="nav-grid">
 <div class="logo">
 <h1>LOGO HERE</h1>
 </div>
 <div class="info">
 <h3>Tel: 01223 123 456</h3>
 <a href="#"><img src="./img/facebook.png" alt="Facebook"></a>
 <a href="#"><img src="./img/twitter.png" alt="Twitter"></a>
 </div>
 </div>
 </div>
 <div class="navbar-bg navbar-width">
 <nav>
 <ul>
 <li><a href="../">Home</a></li>
 <li><a id="active" href="#">Site 3</a></li>
 <li><a href="#">Contact</a></li>
 </ul>
 </nav>
 </div>

 </header>

 <!-- Main Content Start ------------------------------------------------ -->

 <main>

 <!-- Landing Image ------------------------------------------------ -->

 <section>
 <div class="landing-image">
 <div class="landing-text">
 <h3>Lorem ipsum dolor sit</h3>
 </div>
 </div>
 </section>

 <!-- Main Content ------------------------------------------------ -->

 <section>
 <div class="main-content content-wrapper">
 <div class="content-grid">
 <div class="part-a">
 <h2>Headings</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur voluptatem labore delectus, distinctio excepturi aliquid facere ipsum dolore laboriosam, esse eos sunt, quibusdam doloremque quod voluptas. Alias error nobis
 a?
 </p>
 </div>

 <div class="image-a">

 </div>

 <div class="part-b">
 <h2>Headings</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur voluptatem labore delectus, distinctio excepturi aliquid facere ipsum dolore laboriosam, esse eos sunt, quibusdam doloremque quod voluptas. Alias error nobis
 a?
 </p>
 </div>

 <div class="image-b">

 </div>

 </div>
 </div>
 </section>

 </main>

 <!-- Footer ------------------------------------------------ -->

 <footer>
 <div class="content-wrapper">
 <div class="footer-grid">

 <div class="row-a">
 <h3>LOGO</h3>
 </div>

 <div class="row-b">
 <nav>
 <ul>
 <li><a id="foot-active" href="#">Home</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact</a></li>
 </ul>
 </nav>
 </div>

 <div class="row-c">
 <h3>Connect</h3>
 <a href="#"><img src="./img/facebook.png" alt="Facebook"></a>
 <a href="#"><img src="./img/twitter.png" alt="Twitter"></a>
 <a href="#"><img src="./img/instagram.png" alt="Instagram"></a>
 </div>

 </div>
 </div>
 </footer>

</body>

</html>