From 10445356a1c1050ee5062468c13bbfad0ea0cc4d Mon Sep 17 00:00:00 2001
From: PeterMortensen <penge@pmortensen.eu>
Date: Mon, 15 Jul 2019 02:04:19 +0200
Subject: [PATCH] Fixed indentation, etc. to make it easier to follow YouTube
 video "Become a WordPress Developer: Unlocking Power with Code"
 (https://www.youtube.com/watch?v=FVqzKAUsM68) at approximately 02 h 07 min 09
 secs. The most important changes are for "hero-slider" (line 107-135) and
 "page-banner" (line 37-45).

---
 index.html | 320 +++++++++++++++++++++++++++--------------------------
 1 file changed, 161 insertions(+), 159 deletions(-)
diff --git a/index.html b/index.html
index f3e9840..340c016 100644
--- a/index.html
+++ b/index.html
@@ -1,192 +1,194 @@
 <!doctype html>
 <html>
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Fictional University</title>
-  <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,300,400,400i,700,700i" rel="stylesheet">
-  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
-  <link rel="stylesheet" href="style.css"/>
-</head>
-<body>
-  
-  <header class="site-header">
-    <div class="container">
-      <h1 class="school-logo-text float-left"><a href="#"><strong>Fictional</strong> University</a></h1>
-      <span class="js-search-trigger site-header__search-trigger"><i class="fa fa-search" aria-hidden="true"></i></span>
-      <i class="site-header__menu-trigger fa fa-bars" aria-hidden="true"></i>
-      <div class="site-header__menu group">
-        <nav class="main-navigation">
-          <ul>
-            <li><a href="#">About Us</a></li>
-            <li><a href="#">Programs</a></li>
-            <li><a href="#">Events</a></li>
-            <li><a href="#">Campuses</a></li>
-            <li><a href="#">Blog</a></li>
-          </ul>
-        </nav>
-        <div class="site-header__util">
-          <a href="#" class="btn btn--small btn--orange float-left push-right">Login</a>
-          <a href="#" class="btn btn--small  btn--dark-orange float-left">Sign Up</a>
-          <span class="search-trigger js-search-trigger"><i class="fa fa-search" aria-hidden="true"></i></span>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Fictional University</title>
+    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,300,400,400i,700,700i" rel="stylesheet">
+    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
+    <link rel="stylesheet" href="style.css"/>
+  </head>
+
+  <body>
+    <header class="site-header">
+      <div class="container">
+        <h1 class="school-logo-text float-left"><a href="#"><strong>Fictional</strong> University</a></h1>
+        <span class="js-search-trigger site-header__search-trigger"><i class="fa fa-search" aria-hidden="true"></i></span>
+        <i class="site-header__menu-trigger fa fa-bars" aria-hidden="true"></i>
+        <div class="site-header__menu group">
+          <nav class="main-navigation">
+            <ul>
+              <li><a href="#">About Us</a></li>
+              <li><a href="#">Programs</a></li>
+              <li><a href="#">Events</a></li>
+              <li><a href="#">Campuses</a></li>
+              <li><a href="#">Blog</a></li>
+            </ul>
+          </nav>
+          <div class="site-header__util">
+            <a href="#" class="btn btn--small btn--orange float-left push-right">Login</a>
+            <a href="#" class="btn btn--small  btn--dark-orange float-left">Sign Up</a>
+            <span class="search-trigger js-search-trigger"><i class="fa fa-search" aria-hidden="true"></i></span>
+          </div>
         </div>
       </div>
+    </header>
+
+    <div class="page-banner">
+      <div class="page-banner__bg-image" style="background-image: url(images/library-hero.jpg);"></div>
+      <div class="page-banner__content container t-center c-white">
+        <h1 class="headline headline--large">Welcome!</h1>
+        <h2 class="headline headline--medium">We think you&rsquo;ll like it here.</h2>
+        <h3 class="headline headline--small">Why don&rsquo;t you check out the <strong>major</strong> you&rsquo;re interested in?</h3>
+        <a href="#" class="btn btn--large btn--blue">Find Your Major</a>
+      </div>
     </div>
-  </header>
-
-  <div class="page-banner">
-  <div class="page-banner__bg-image" style="background-image: url(images/library-hero.jpg);"></div>
-    <div class="page-banner__content container t-center c-white">
-      <h1 class="headline headline--large">Welcome!</h1>
-      <h2 class="headline headline--medium">We think you&rsquo;ll like it here.</h2>
-      <h3 class="headline headline--small">Why don&rsquo;t you check out the <strong>major</strong> you&rsquo;re interested in?</h3>
-      <a href="#" class="btn btn--large btn--blue">Find Your Major</a>
-    </div>
-  </div>
-
-  <div class="full-width-split group">
-    <div class="full-width-split__one">
-      <div class="full-width-split__inner">
-        <h2 class="headline headline--small-plus t-center">Upcoming Events</h2>
-        
-        <div class="event-summary">
-          <a class="event-summary__date t-center" href="#">
-            <span class="event-summary__month">Mar</span>
-            <span class="event-summary__day">25</span>  
-          </a>
-          <div class="event-summary__content">
-            <h5 class="event-summary__title headline headline--tiny"><a href="#">Poetry in the 100</a></h5>
-            <p>Bring poems you&rsquo;ve wrote to the 100 building this Tuesday for an open mic and snacks. <a href="#" class="nu gray">Learn more</a></p>
+
+    <div class="full-width-split group">
+      <div class="full-width-split__one">
+        <div class="full-width-split__inner">
+          <h2 class="headline headline--small-plus t-center">Upcoming Events</h2>
+
+          <div class="event-summary">
+            <a class="event-summary__date t-center" href="#">
+              <span class="event-summary__month">Mar</span>
+              <span class="event-summary__day">25</span>
+            </a>
+            <div class="event-summary__content">
+              <h5 class="event-summary__title headline headline--tiny"><a href="#">Poetry in the 100</a></h5>
+              <p>Bring poems you&rsquo;ve wrote to the 100 building this Tuesday for an open mic and snacks. <a href="#" class="nu gray">Learn more</a></p>
+            </div>
           </div>
-        </div>
-        <div class="event-summary">
-          <a class="event-summary__date t-center" href="#">
-            <span class="event-summary__month">Apr</span>
-            <span class="event-summary__day">02</span>  
-          </a>
-          <div class="event-summary__content">
-            <h5 class="event-summary__title headline headline--tiny"><a href="#">Quad Picnic Party</a></h5>
-            <p>Live music, a taco truck and more can found in our third annual quad picnic day. <a href="#" class="nu gray">Learn more</a></p>
+          <div class="event-summary">
+            <a class="event-summary__date t-center" href="#">
+              <span class="event-summary__month">Apr</span>
+              <span class="event-summary__day">02</span>
+            </a>
+            <div class="event-summary__content">
+              <h5 class="event-summary__title headline headline--tiny"><a href="#">Quad Picnic Party</a></h5>
+              <p>Live music, a taco truck and more can found in our third annual quad picnic day. <a href="#" class="nu gray">Learn more</a></p>
+            </div>
           </div>
-        </div>
-        
-        <p class="t-center no-margin"><a href="#" class="btn btn--blue">View All Events</a></p>
 
+          <p class="t-center no-margin"><a href="#" class="btn btn--blue">View All Events</a></p>
+
+        </div>
       </div>
-    </div>
-    <div class="full-width-split__two">
-      <div class="full-width-split__inner">
-        <h2 class="headline headline--small-plus t-center">From Our Blogs</h2>
-
-        <div class="event-summary">
-          <a class="event-summary__date event-summary__date--beige t-center" href="#">
-            <span class="event-summary__month">Jan</span>
-            <span class="event-summary__day">20</span>  
-          </a>
-          <div class="event-summary__content">
-            <h5 class="event-summary__title headline headline--tiny"><a href="#">We Were Voted Best School</a></h5>
-            <p>For the 100th year in a row we are voted #1. <a href="#" class="nu gray">Read more</a></p>
+      <div class="full-width-split__two">
+        <div class="full-width-split__inner">
+          <h2 class="headline headline--small-plus t-center">From Our Blogs</h2>
+
+          <div class="event-summary">
+            <a class="event-summary__date event-summary__date--beige t-center" href="#">
+              <span class="event-summary__month">Jan</span>
+              <span class="event-summary__day">20</span>
+            </a>
+            <div class="event-summary__content">
+              <h5 class="event-summary__title headline headline--tiny"><a href="#">We Were Voted Best School</a></h5>
+              <p>For the 100th year in a row we are voted #1. <a href="#" class="nu gray">Read more</a></p>
+            </div>
           </div>
-        </div>
-        <div class="event-summary">
-          <a class="event-summary__date event-summary__date--beige t-center" href="#">
-            <span class="event-summary__month">Feb</span>
-            <span class="event-summary__day">04</span>  
-          </a>
-          <div class="event-summary__content">
-            <h5 class="event-summary__title headline headline--tiny"><a href="#">Professors in the National Spotlight</a></h5>
-            <p>Two of our professors have been in national news lately. <a href="#" class="nu gray">Read more</a></p>
+          <div class="event-summary">
+            <a class="event-summary__date event-summary__date--beige t-center" href="#">
+              <span class="event-summary__month">Feb</span>
+              <span class="event-summary__day">04</span>
+            </a>
+            <div class="event-summary__content">
+              <h5 class="event-summary__title headline headline--tiny"><a href="#">Professors in the National Spotlight</a></h5>
+              <p>Two of our professors have been in national news lately. <a href="#" class="nu gray">Read more</a></p>
+            </div>
           </div>
+
+          <p class="t-center no-margin"><a href="#" class="btn btn--yellow">View All Blog Posts</a></p>
         </div>
-        
-        <p class="t-center no-margin"><a href="#" class="btn btn--yellow">View All Blog Posts</a></p>
       </div>
     </div>
-  </div>
-
-  <div class="hero-slider">
-  <div class="hero-slider__slide" style="background-image: url(images/bus.jpg);">
-    <div class="hero-slider__interior container">
-      <div class="hero-slider__overlay">
-        <h2 class="headline headline--medium t-center">Free Transportation</h2>
-        <p class="t-center">All students have free unlimited bus fare.</p>
-        <p class="t-center no-margin"><a href="#" class="btn btn--blue">Learn more</a></p>
+
+    <div class="hero-slider">
+      <div class="hero-slider__slide" style="background-image: url(images/bus.jpg);">
+        <div class="hero-slider__interior container">
+          <div class="hero-slider__overlay">
+            <h2 class="headline headline--medium t-center">Free Transportation</h2>
+            <p class="t-center">All students have free unlimited bus fare.</p>
+            <p class="t-center no-margin"><a href="#" class="btn btn--blue">Learn more</a></p>
+          </div>
+        </div>
       </div>
-    </div>
-  </div>
-  <div class="hero-slider__slide" style="background-image: url(images/apples.jpg);">
-    <div class="hero-slider__interior container">
-      <div class="hero-slider__overlay">
-        <h2 class="headline headline--medium t-center">An Apple a Day</h2>
-        <p class="t-center">Our dentistry program recommends eating apples.</p>
-        <p class="t-center no-margin"><a href="#" class="btn btn--blue">Learn more</a></p>
+      <div class="hero-slider__slide" style="background-image: url(images/apples.jpg);">
+        <div class="hero-slider__interior container">
+          <div class="hero-slider__overlay">
+            <h2 class="headline headline--medium t-center">An Apple a Day</h2>
+            <p class="t-center">Our dentistry program recommends eating apples.</p>
+            <p class="t-center no-margin"><a href="#" class="btn btn--blue">Learn more</a></p>
+          </div>
+        </div>
       </div>
-    </div>
-  </div>
-  <div class="hero-slider__slide" style="background-image: url(images/bread.jpg);">
-    <div class="hero-slider__interior container">
-      <div class="hero-slider__overlay">
-        <h2 class="headline headline--medium t-center">Free Food</h2>
-        <p class="t-center">Fictional University offers lunch plans for those in need.</p>
-        <p class="t-center no-margin"><a href="#" class="btn btn--blue">Learn more</a></p>
+      <div class="hero-slider__slide" style="background-image: url(images/bread.jpg);">
+        <div class="hero-slider__interior container">
+          <div class="hero-slider__overlay">
+            <h2 class="headline headline--medium t-center">Free Food</h2>
+            <p class="t-center">Fictional University offers lunch plans for those in need.</p>
+            <p class="t-center no-margin"><a href="#" class="btn btn--blue">Learn more</a></p>
+          </div>
+        </div>
       </div>
     </div>
-  </div>
-</div>
 
-  <footer class="site-footer">
+    <footer class="site-footer">
 
-    <div class="site-footer__inner container container--narrow">
+      <div class="site-footer__inner container container--narrow">
 
-      <div class="group">
+        <div class="group">
 
-        <div class="site-footer__col-one">
-          <h1 class="school-logo-text school-logo-text--alt-color"><a href="#"><strong>Fictional</strong> University</a></h1>
-          <p><a class="site-footer__link" href="#">555.555.5555</a></p>
-        </div>
+          <div class="site-footer__col-one">
+            <h1 class="school-logo-text school-logo-text--alt-color"><a href="#"><strong>Fictional</strong> University</a></h1>
+            <p><a class="site-footer__link" href="#">555.555.5555</a></p>
+          </div>
 
-        <div class="site-footer__col-two-three-group">
-          <div class="site-footer__col-two">
-            <h3 class="headline headline--small">Explore</h3>
-            <nav class="nav-list">
-              <ul>
-                <li><a href="#">About Us</a></li>
-                <li><a href="#">Programs</a></li>
-                <li><a href="#">Events</a></li>
-                <li><a href="#">Campuses</a></li>
-              </ul>
-            </nav>
+          <div class="site-footer__col-two-three-group">
+            <div class="site-footer__col-two">
+              <h3 class="headline headline--small">Explore</h3>
+              <nav class="nav-list">
+                <ul>
+                  <li><a href="#">About Us</a></li>
+                  <li><a href="#">Programs</a></li>
+                  <li><a href="#">Events</a></li>
+                  <li><a href="#">Campuses</a></li>
+                </ul>
+              </nav>
+            </div>
+
+            <div class="site-footer__col-three">
+              <h3 class="headline headline--small">Learn</h3>
+              <nav class="nav-list">
+                <ul>
+                  <li><a href="#">Legal</a></li>
+                  <li><a href="#">Privacy</a></li>
+                  <li><a href="#">Careers</a></li>
+                </ul>
+              </nav>
+            </div>
           </div>
 
-          <div class="site-footer__col-three">
-            <h3 class="headline headline--small">Learn</h3>
-            <nav class="nav-list">
-              <ul>
-                <li><a href="#">Legal</a></li>
-                <li><a href="#">Privacy</a></li>
-                <li><a href="#">Careers</a></li>
+          <div class="site-footer__col-four">
+            <h3 class="headline headline--small">Connect With Us</h3>
+            <nav>
+              <ul class="min-list social-icons-list group">
+                <li><a href="#" class="social-color-facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
+                <li><a href="#" class="social-color-twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
+                <li><a href="#" class="social-color-youtube"><i class="fa fa-youtube" aria-hidden="true"></i></a></li>
+                <li><a href="#" class="social-color-linkedin"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
+                <li><a href="#" class="social-color-instagram"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
               </ul>
             </nav>
           </div>
         </div>
 
-        <div class="site-footer__col-four">
-          <h3 class="headline headline--small">Connect With Us</h3>
-          <nav>
-            <ul class="min-list social-icons-list group">
-              <li><a href="#" class="social-color-facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
-              <li><a href="#" class="social-color-twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
-              <li><a href="#" class="social-color-youtube"><i class="fa fa-youtube" aria-hidden="true"></i></a></li>
-              <li><a href="#" class="social-color-linkedin"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
-              <li><a href="#" class="social-color-instagram"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
-            </ul>
-          </nav>
-        </div>
       </div>
+    </footer>
+
+    <script src="js/scripts-bundled.js"></script>
+
+  </body>
 
-    </div>
-  </footer>
-  
-  <script src="js/scripts-bundled.js"></script>
-</body>
 </html>
