├── images
    ├── bread.jpg
    ├── bus.jpg
    ├── ocean.jpg
    ├── apples.jpg
    ├── barksalot.jpg
    ├── meowsalot.jpg
    └── library-hero.jpg
├── css
    ├── base
    │   ├── variables.scss
    │   ├── baseline.scss
    │   └── utility-classes.scss
    ├── modules
    │   ├── acf-map.scss
    │   ├── post-item.scss
    │   ├── link-list.scss
    │   ├── full-width-split.scss
    │   ├── main-navigation.scss
    │   ├── page-banner.scss
    │   ├── event-summary.scss
    │   ├── generic-content.scss
    │   ├── professor-card.scss
    │   ├── headline.scss
    │   ├── metabox.scss
    │   ├── login.scss
    │   ├── page-links.scss
    │   ├── site-footer.scss
    │   ├── btn.scss
    │   ├── site-header.scss
    │   ├── search-overlay.scss
    │   ├── hero-slider.scss
    │   ├── my-notes.scss
    │   └── shame.scss
    └── style.scss
├── src
    ├── index.js
    └── modules
    │   ├── MobileMenu.js
    │   ├── HeroSlider.js
    │   └── GoogleMap.js
├── package.json
├── interior-page.html
└── index.html


/images/bread.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LearnWebCode/university-static/HEAD/images/bread.jpg


--------------------------------------------------------------------------------
/images/bus.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LearnWebCode/university-static/HEAD/images/bus.jpg


--------------------------------------------------------------------------------
/images/ocean.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LearnWebCode/university-static/HEAD/images/ocean.jpg


--------------------------------------------------------------------------------
/images/apples.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LearnWebCode/university-static/HEAD/images/apples.jpg


--------------------------------------------------------------------------------
/images/barksalot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LearnWebCode/university-static/HEAD/images/barksalot.jpg


--------------------------------------------------------------------------------
/images/meowsalot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LearnWebCode/university-static/HEAD/images/meowsalot.jpg


--------------------------------------------------------------------------------
/images/library-hero.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LearnWebCode/university-static/HEAD/images/library-hero.jpg


--------------------------------------------------------------------------------
/css/base/variables.scss:
--------------------------------------------------------------------------------
1 | $beige: #FAF0CA;
2 | $mainYellow: #F4D35E;
3 | $mainBlue: #0D3B66;
4 | $lightOrange: #EE964B;
5 | $darkOrange: #F95738;


--------------------------------------------------------------------------------
/css/modules/acf-map.scss:
--------------------------------------------------------------------------------
 1 | .acf-map {
 2 | width: 100%;
 3 | height: 400px;
 4 | border: #ccc solid 1px;
 5 | margin: 20px 0;
 6 | }
 7 | 
 8 | /* fixes potential theme css conflict */
 9 | .acf-map img {
10 |  max-width: inherit !important;
11 | }


--------------------------------------------------------------------------------
/css/modules/post-item.scss:
--------------------------------------------------------------------------------
 1 | .post-item {
 2 |   border-bottom: 1px dotted #DEDEDE;
 3 |   padding-bottom: 1.7rem;
 4 |   margin-bottom: 1.7rem;
 5 | 
 6 |   &:last-of-type {
 7 |     border-bottom: none;
 8 |     margin-bottom: 0;
 9 |   }
10 | }


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import "../css/style.scss"
 2 | 
 3 | // Our modules / classes
 4 | import MobileMenu from "./modules/MobileMenu"
 5 | import HeroSlider from "./modules/HeroSlider"
 6 | 
 7 | // Instantiate a new object using our modules/classes
 8 | const mobileMenu = new MobileMenu()
 9 | const heroSlider = new HeroSlider()
10 | 


--------------------------------------------------------------------------------
/css/modules/link-list.scss:
--------------------------------------------------------------------------------
 1 | .link-list {
 2 |   li {
 3 |     padding: 1rem 0;
 4 |     font-size: 1.5rem;
 5 |     border-bottom: 1px dotted #DEDEDE;
 6 | 
 7 |     .search-overlay & {
 8 |       font-size: 1.3rem;
 9 |     }
10 |   }
11 | 
12 |   li:last-child {
13 |     border-bottom: none;
14 |   }
15 | 
16 |   a {
17 |     color: $darkOrange;
18 |   }
19 | }


--------------------------------------------------------------------------------
/src/modules/MobileMenu.js:
--------------------------------------------------------------------------------
 1 | class MobileMenu {
 2 |   constructor() {
 3 |     this.menu = document.querySelector(".site-header__menu")
 4 |     this.openButton = document.querySelector(".site-header__menu-trigger")
 5 |     this.events()
 6 |   }
 7 | 
 8 |   events() {
 9 |     this.openButton.addEventListener("click", () => this.openMenu())
10 |   }
11 | 
12 |   openMenu() {
13 |     this.openButton.classList.toggle("fa-bars")
14 |     this.openButton.classList.toggle("fa-window-close")
15 |     this.menu.classList.toggle("site-header__menu--active")
16 |   }
17 | }
18 | 
19 | export default MobileMenu
20 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "fictional-university-theme",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "build": "wp-scripts build",
 8 |     "start": "wp-scripts start",
 9 |     "dev": "wp-scripts start",
10 |     "devFast": "wp-scripts start",
11 |     "test": "echo \"Error: no test specified\" && exit 1"
12 |   },
13 |   "keywords": [],
14 |   "author": "",
15 |   "license": "ISC",
16 |   "dependencies": {
17 |     "@glidejs/glide": "^3.4.1",
18 |     "@wordpress/scripts": "*",
19 |     "axios": "^0.21.1",
20 |     "normalize.css": "^8.0.1"
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/css/modules/full-width-split.scss:
--------------------------------------------------------------------------------
 1 | .full-width-split {
 2 |   @include atMedium {
 3 |     display: flex;
 4 |   }
 5 | 
 6 |   &__one {
 7 |     flex: 1;
 8 |     padding: 1.6rem 16px;
 9 |     @include atMedium {
10 |       padding: 40px;
11 |     }
12 | 
13 |     .full-width-split__inner {
14 |       @include atMedium {
15 |         float: right;
16 |       }
17 |     }
18 |   }
19 | 
20 |   &__two {
21 |     flex: 1;
22 |     background-color: $beige;
23 |     padding: 1.6rem 16px;
24 |     @include atMedium {
25 |       padding: 40px;
26 |     }
27 |   }
28 | 
29 |   &__inner {
30 |     @media (min-width: 1350px) {
31 |       width: 610px;
32 |     }
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/css/base/baseline.scss:
--------------------------------------------------------------------------------
 1 | @mixin atSmall {
 2 |   @media (min-width: 530px) {
 3 |     @content;
 4 |   }
 5 | }
 6 | 
 7 | @mixin atSmallMedium {
 8 |   @media (min-width: 767px) {
 9 |     @content;
10 |   }
11 | }
12 | 
13 | @mixin atMedium {
14 |   @media (min-width: 960px) {
15 |     @content;
16 |   }
17 | }
18 | 
19 | body {
20 |   color: #333;
21 |   font-family: "Roboto", sans-serif;
22 |   overflow-x: hidden;
23 |   position: relative;
24 | }
25 | 
26 | img {
27 |   max-width: 100%;
28 |   height: auto;
29 | }
30 | 
31 | a {
32 |   color: $mainBlue;
33 | }
34 | 
35 | a:hover {
36 |   text-decoration: none;
37 | }
38 | 
39 | p,
40 | ul,
41 | ol {
42 |   margin: 0 0 1.65em 0;
43 | }
44 | 
45 | p,
46 | li {
47 |   line-height: 1.65;
48 | }
49 | 


--------------------------------------------------------------------------------
/css/modules/main-navigation.scss:
--------------------------------------------------------------------------------
 1 | .main-navigation {
 2 |   padding-top: 2px;
 3 | 
 4 |   ul {
 5 |     padding: 0;
 6 |     margin: 0;
 7 |   }
 8 | 
 9 |   ul:before,
10 |   ul:after {
11 |     content: " ";
12 |     display: table;
13 |   }
14 | 
15 |   ul:after {
16 |     clear: both;
17 |   }
18 | 
19 |   @include atMedium {
20 |     float: left;
21 |     margin-right: 20px;
22 |   }
23 | }
24 | 
25 | .main-navigation li {
26 |   list-style: none;
27 | 
28 |   @include atMedium {
29 |     float: left;
30 |     padding-left: 20px;
31 |   }
32 | }
33 | 
34 | .main-navigation a {
35 |   display: block;
36 |   padding: 10px 20px;
37 |   color: #fff;
38 |   text-decoration: none;
39 |   font-weight: 300;
40 |   @include atMedium {
41 |     display: inline-block;
42 |     padding: 0;
43 |   }
44 | }
45 | 
46 | .main-navigation .current-menu-item a,
47 | .main-navigation a:hover {
48 |   color: $beige;
49 | }
50 | 


--------------------------------------------------------------------------------
/src/modules/HeroSlider.js:
--------------------------------------------------------------------------------
 1 | import Glide from "@glidejs/glide"
 2 | 
 3 | class HeroSlider {
 4 |   constructor() {
 5 |     if (document.querySelector(".hero-slider")) {
 6 |       // count how many slides there are
 7 |       const dotCount = document.querySelectorAll(".hero-slider__slide").length
 8 | 
 9 |       // Generate the HTML for the navigation dots
10 |       let dotHTML = ""
11 |       for (let i = 0; i < dotCount; i++) {
12 |         dotHTML += `<button class="slider__bullet glide__bullet" data-glide-dir="=${i}"></button>`
13 |       }
14 | 
15 |       // Add the dots HTML to the DOM
16 |       document.querySelector(".glide__bullets").insertAdjacentHTML("beforeend", dotHTML)
17 | 
18 |       // Actually initialize the glide / slider script
19 |       var glide = new Glide(".hero-slider", {
20 |         type: "carousel",
21 |         perView: 1,
22 |         autoplay: 3000
23 |       })
24 | 
25 |       glide.mount()
26 |     }
27 |   }
28 | }
29 | 
30 | export default HeroSlider
31 | 


--------------------------------------------------------------------------------
/css/style.scss:
--------------------------------------------------------------------------------
 1 | /* 3rd party packages */
 2 | @import "normalize.css";
 3 | @import "../node_modules/@glidejs/glide/dist/css/glide.core.min.css";
 4 | 
 5 | /* SASS and Global'ish Stuff */
 6 | @import "base/variables";
 7 | @import "base/baseline";
 8 | @import "base/utility-classes";
 9 | 
10 | /* BEM Blocks */
11 | @import "modules/shame";
12 | @import "modules/login";
13 | @import "modules/btn";
14 | @import "modules/my-notes";
15 | @import "modules/site-header";
16 | @import "modules/site-footer";
17 | @import "modules/main-navigation";
18 | @import "modules/page-banner";
19 | @import "modules/hero-slider";
20 | @import "modules/search-overlay";
21 | @import "modules/professor-card";
22 | @import "modules/headline";
23 | @import "modules/generic-content";
24 | @import "modules/full-width-split";
25 | @import "modules/event-summary";
26 | @import "modules/page-links";
27 | @import "modules/acf-map";
28 | @import "modules/link-list";
29 | @import "modules/metabox";
30 | @import "modules/post-item";


--------------------------------------------------------------------------------
/css/modules/page-banner.scss:
--------------------------------------------------------------------------------
 1 | .page-banner {
 2 |   background-color: #000;
 3 |   padding: 80px 0 40px 0;
 4 |   position: relative;
 5 |   @include atSmall {
 6 |     padding: 130px 0 60px 0;
 7 |   }
 8 | 
 9 |   &__content {
10 |     position: relative;
11 |     z-index: 2;
12 |   }
13 | 
14 |   &__title {
15 |     font-family: "Roboto Condensed", sans-serif;
16 |     font-weight: 300;
17 |     font-size: 3.6rem;
18 |     margin: 0 0 1rem 0;
19 |     color: #fff;
20 |     @include atSmall {
21 |       font-size: 5rem;
22 |     }
23 |   }
24 | 
25 |   &__bg-image {
26 |     opacity: 0.33;
27 |     background-size: cover;
28 |     position: absolute;
29 |     top: 0;
30 |     bottom: 0;
31 |     left: 0;
32 |     right: 0;
33 |   }
34 | 
35 |   &__intro {
36 |     font-weight: 300;
37 |     font-size: 1.2rem;
38 |     line-height: 1.3;
39 |     color: #ededed;
40 |     @include atSmall {
41 |       font-size: 1.65rem;
42 |     }
43 |   }
44 | 
45 |   &__intro p {
46 |     margin: 0;
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/css/modules/event-summary.scss:
--------------------------------------------------------------------------------
 1 | .event-summary {
 2 |   position: relative;
 3 |   padding-left: 107px;
 4 |   min-height: 77px;
 5 |   padding-bottom: 1px;
 6 |   margin-bottom: 20px;
 7 | 
 8 |   &__title a {
 9 |     color: #173f58;
10 |   }
11 | 
12 |   &__date {
13 |     text-decoration: none;
14 |     display: block;
15 |     top: 0;
16 |     left: 0;
17 |     position: absolute;
18 |     padding: 14px 0 11px 0;
19 |     color: #FFF;
20 |     border-radius: 50%;
21 |     background-color: $mainBlue;
22 |     width: 80px;
23 |     line-height: 1;
24 |     transition: opacity .33s;
25 |     text-shadow: 1px 1px 1px rgba(0, 0, 0, .22);
26 |   }
27 | 
28 |   &__date:hover {
29 |     opacity: .75;
30 |   }
31 | 
32 |   &__date--beige {
33 |     background-color: $mainYellow;
34 |   }
35 | 
36 |   &__month {
37 |     display: block;
38 |     font-size: 1.5rem;
39 |     font-weight: 300;
40 |     text-transform: uppercase;
41 |   }
42 | 
43 |   &__day {
44 |     display: block;
45 |     font-size: 2.02rem;
46 |     font-weight: 700;
47 |   }
48 | }


--------------------------------------------------------------------------------
/css/modules/generic-content.scss:
--------------------------------------------------------------------------------
 1 | .generic-content {
 2 |   p,
 3 |   li {
 4 |     font-size: 1.15rem;
 5 |   }
 6 | 
 7 |   blockquote,
 8 |   blockquote p {
 9 |     font-size: 1.5rem;
10 |     font-style: italic;
11 |   }
12 | 
13 |   h1,
14 |   h2,
15 |   h3,
16 |   h4,
17 |   h5,
18 |   h6 {
19 |     font-family: "Roboto Condensed", sans-serif;
20 |     font-weight: 300;
21 |     margin-top: 0;
22 |     margin-bottom: 1rem;
23 |   }
24 | 
25 |   h1 {
26 |     font-size: 3.6rem;
27 |   }
28 |   h2 {
29 |     font-size: 3.1rem;
30 |   }
31 |   h3 {
32 |     font-size: 2.6rem;
33 |   }
34 |   h4 {
35 |     font-size: 2.1rem;
36 |   }
37 |   h5 {
38 |     font-size: 1.6rem;
39 |   }
40 |   h6 {
41 |     font-size: 1.15rem;
42 |   }
43 | 
44 |   @include atSmall {
45 |     h1 {
46 |       font-size: 6.25rem;
47 |     }
48 |     h2 {
49 |       font-size: 5rem;
50 |     }
51 |     h3 {
52 |       font-size: 3.125rem;
53 |     }
54 |     h4 {
55 |       font-size: 2.4rem;
56 |     }
57 |     h5 {
58 |       font-size: 1.9rem;
59 |     }
60 |     h6 {
61 |       font-size: 1.15rem;
62 |     }
63 |   }
64 | }
65 | 


--------------------------------------------------------------------------------
/css/modules/professor-card.scss:
--------------------------------------------------------------------------------
 1 | .professor-cards {
 2 |   margin: 0;
 3 |   padding: 0;
 4 | 
 5 |   .search-overlay & {
 6 |     padding-top: 21px;
 7 |   }
 8 | }
 9 | 
10 | .professor-card {
11 |   position: relative;
12 |   display: inline-block;
13 |   width: 200px;
14 |   margin-right: 15px;
15 |   background-color: $darkOrange;
16 |   overflow: hidden;
17 | 
18 |   .search-overlay & {
19 |     width: 180px;
20 |   }
21 | 
22 |   &__image {
23 |     display: block;
24 |     transition: opacity 0.3s ease-out, transform 0.3s ease-out;
25 |   }
26 | 
27 |   &:hover &__image {
28 |     opacity: 0.8;
29 |     transform: scale(1.1) rotate(4deg);
30 |   }
31 | 
32 |   &__name {
33 |     font-weight: 300;
34 |     font-size: 0.9rem;
35 |     position: absolute;
36 |     bottom: 0;
37 |     color: #fff;
38 |     left: 0;
39 |     right: 0;
40 |     padding: 3px 10px;
41 |     background-color: adjust-color($darkOrange, $alpha: -0.15, $lightness: -9%, $saturation: -6%);
42 |   }
43 | 
44 |   &:hover &__name {
45 |     background-color: adjust-color($darkOrange, $alpha: -0.15, $lightness: -15%, $saturation: -6%);
46 |   }
47 | 
48 |   &__list-item {
49 |     display: inline-block;
50 |     list-style: none;
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/css/modules/headline.scss:
--------------------------------------------------------------------------------
 1 | .headline {
 2 |   margin: 0;
 3 |   font-family: "Roboto Condensed", sans-serif;
 4 |   font-weight: 300;
 5 | 
 6 |   &--large {
 7 |     font-size: 3.6rem;
 8 |     @include atSmall {
 9 |       font-size: 6.25rem;
10 |     }
11 |   }
12 | 
13 |   &--large-medium {
14 |     font-size: 5rem;
15 |     margin: 0 0 1rem 0;
16 |   }
17 | 
18 |   &--medium {
19 |     font-size: 1.9rem;
20 |     margin-bottom: 0.75rem;
21 |     @include atSmall {
22 |       font-size: 3.125rem;
23 |     }
24 |   }
25 | 
26 |   &--small-plus {
27 |     font-family: "Roboto", sans-serif;
28 |     font-size: 1.6875rem;
29 |     font-weight: 400;
30 |     margin-bottom: 1.9rem;
31 |   }
32 | 
33 |   &--small {
34 |     font-size: 1.2rem;
35 |     margin-bottom: 1.9rem;
36 |     @include atSmall {
37 |       font-size: 1.6875rem;
38 |     }
39 |   }
40 | 
41 |   &--smaller {
42 |     font-size: 1.5rem;
43 |   }
44 | 
45 |   &--tiny {
46 |     font-family: "Roboto", sans-serif;
47 |     font-size: 1.3875rem;
48 |     margin-bottom: 0.25rem;
49 |   }
50 | 
51 |   &--post-title a {
52 |     color: $mainBlue;
53 |     text-decoration: none;
54 |   }
55 | 
56 |   &--post-title a:hover {
57 |     text-decoration: underline;
58 |   }
59 | }
60 | 


--------------------------------------------------------------------------------
/css/modules/metabox.scss:
--------------------------------------------------------------------------------
 1 | .metabox {
 2 |   background-color: $beige;
 3 |   border-radius: 3px;
 4 |   padding: 10px 15px;
 5 |   display: inline-block;
 6 |   margin-bottom: 30px;
 7 |   box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.07);
 8 | 
 9 |   &--position-up {
10 |     position: absolute;
11 |     top: 0;
12 |     transform: translateY(-50%);
13 |   }
14 | 
15 |   &--with-home-link {
16 |     padding: 0;
17 |   }
18 | 
19 |   &__main {
20 |     padding: 10px 15px 10px 11px;
21 |   }
22 | 
23 |   p {
24 |     margin: 0;
25 |     font-size: 0.9rem;
26 |     color: adjust-color($beige, $lightness: -45%, $saturation: -33%);
27 |   }
28 | 
29 |   a {
30 |     color: adjust-color($beige, $lightness: -45%, $saturation: -33%);
31 |     text-decoration: none;
32 |     font-weight: bold;
33 |   }
34 | 
35 |   a:hover {
36 |     text-decoration: underline;
37 |   }
38 | 
39 |   & &__blog-home-link {
40 |     background-color: $mainBlue;
41 |     color: #fff;
42 |     display: inline-block;
43 |     padding: 10px 15px;
44 |     border-radius: 3px 0 0 3px;
45 |     font-weight: normal;
46 |   }
47 | 
48 |   & &__blog-home-link:hover {
49 |     text-decoration: none;
50 |     background-color: adjust-color($mainBlue, $lightness: -5%);
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/css/modules/login.scss:
--------------------------------------------------------------------------------
 1 | /* Customize Login Screen */
 2 | 
 3 | body.login .button-primary {
 4 |   background-color: $darkOrange;
 5 |   border-color: scale-color($darkOrange, $lightness: -10%);
 6 |   text-shadow: 0 -1px 1px scale-color($darkOrange, $lightness: -15%), 1px 0 1px scale-color($darkOrange, $lightness: -15%), 0 1px 1px scale-color($darkOrange, $lightness: -15%), -1px 0 1px scale-color($darkOrange, $lightness: -15%);
 7 |   box-shadow: 0 1px 0 scale-color($darkOrange, $lightness: -20%);
 8 | }
 9 | 
10 | body.login .button-primary:active,
11 | body.login .button-primary:focus,
12 | body.login .button-primary:hover {
13 |   background-color: scale-color($darkOrange, $lightness: -9%);
14 |   border-color: $darkOrange;
15 |   text-shadow: 0 -1px 1px scale-color($darkOrange, $lightness: -20%), 1px 0 1px scale-color($darkOrange, $lightness: -20%), 0 1px 1px scale-color($darkOrange, $lightness: -20%), -1px 0 1px scale-color($darkOrange, $lightness: -20%);
16 |   box-shadow: 0 1px 0 scale-color($darkOrange, $lightness: -25%);
17 | }
18 | 
19 | body.login {
20 |   background-color: $beige;
21 | }
22 | 
23 | .login h1 a {
24 |   color: $mainBlue;
25 |   font-size: 30px;
26 |   font-weight: 300;
27 |   background-image: none;
28 |   width: auto;
29 |   height: auto;
30 |   text-indent: 0;
31 | }
32 | 


--------------------------------------------------------------------------------
/css/modules/page-links.scss:
--------------------------------------------------------------------------------
 1 | .page-links {
 2 |   position: relative;
 3 |   z-index: 1;
 4 |   background-color: $beige;
 5 |   margin: 0 0 40px 0;
 6 |   @include atSmallMedium {
 7 |     margin: 0 0 40px 20px;
 8 |     width: 300px;
 9 |     float: right;
10 |   }
11 | 
12 |   &__title {
13 |     margin: 0;
14 |     font-weight: normal;
15 |     text-align: center;
16 |     padding: 20px 0;
17 |     background-color: $mainBlue;
18 |     color: #fff;
19 | 
20 |     a {
21 |       color: #fff;
22 |       text-decoration: none;
23 |       background-color: $mainBlue;
24 |     }
25 |   }
26 | 
27 |   li {
28 |     border-top: 1px solid adjust-color($beige, $lightness: -14%);
29 |   }
30 | 
31 |   li:first-child {
32 |     border-top: none;
33 |   }
34 | 
35 |   &__active,
36 |   & .current_page_item {
37 |     text-align: center;
38 |     background-color: scale-color($beige, $lightness: -7%, $saturation: -10%);
39 |     color: $mainBlue;
40 |     font-weight: bold;
41 |   }
42 | 
43 |   li a {
44 |     display: block;
45 |     text-align: center;
46 |     padding: 17px 10px;
47 |     text-decoration: none;
48 |     color: $mainBlue;
49 |     transition: all 0.3s;
50 |   }
51 | 
52 |   li a:hover {
53 |     color: adjust-color($mainBlue, $lightness: -6%);
54 |     background-color: scale-color($beige, $lightness: -9%, $saturation: -12%);
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/css/modules/site-footer.scss:
--------------------------------------------------------------------------------
 1 | .site-footer {
 2 |   padding: 2rem 0 3.5rem 0;
 3 |   background-image: linear-gradient(#fff, #ececec);
 4 | 
 5 |   p {
 6 |     font-size: 0.9rem;
 7 |   }
 8 | 
 9 |   .headline {
10 |     color: #666;
11 |     margin-bottom: 0.33rem;
12 |   }
13 | 
14 |   &__link {
15 |     color: #999;
16 |     text-decoration: none;
17 |   }
18 | 
19 |   &__link:hover {
20 |     color: $mainBlue;
21 |     text-decoration: underline;
22 |   }
23 | 
24 |   &__inner {
25 |     border-top: 1px dotted #dedede;
26 |     padding-top: 3.5rem;
27 |   }
28 | 
29 |   &__col-one {
30 |     text-align: center;
31 |     @include atMedium {
32 |       text-align: left;
33 |       width: 33%;
34 |       float: left;
35 |     }
36 |   }
37 | 
38 |   &__col-two-three-group {
39 |     text-align: center;
40 |     width: 85%;
41 |     margin: 0 auto;
42 |     @include atMedium {
43 |       text-align: left;
44 |       float: left;
45 |       width: 42%;
46 |       margin: 0;
47 |     }
48 |   }
49 | 
50 |   &__col-two {
51 |     width: 50%;
52 |     float: left;
53 |   }
54 |   &__col-three {
55 |     width: 50%;
56 |     float: left;
57 |   }
58 |   &__col-four {
59 |     padding-top: 20px;
60 |     width: 85%;
61 |     margin: 0 auto;
62 |     clear: both;
63 |     text-align: center;
64 |     @include atMedium {
65 |       padding-top: 0;
66 |       margin: 0;
67 |       clear: none;
68 |       text-align: left;
69 |       width: 25%;
70 |       float: right;
71 |     }
72 |   }
73 | }
74 | 


--------------------------------------------------------------------------------
/css/base/utility-classes.scss:
--------------------------------------------------------------------------------
 1 | .container {
 2 |   max-width: 1300px;
 3 |   margin: 0 auto;
 4 |   padding: 0 16px;
 5 |   position: relative;
 6 | }
 7 | 
 8 | .container--narrow {
 9 |   max-width: 960px;
10 | }
11 | 
12 | .section-break {
13 |   border: none;
14 |   border-top: 1px solid #ddd;
15 |   margin: 2.5rem 0;
16 | }
17 | 
18 | .min-list {
19 |   padding: 0;
20 |   margin: 0;
21 | }
22 | 
23 | .min-list li {
24 |   list-style: none;
25 | }
26 | 
27 | .p-top-small {
28 |   padding-top: 1rem;
29 | }
30 | .p-top-large {
31 |   padding-top: 1.6rem;
32 | }
33 | .p-bottom-large {
34 |   padding-bottom: 1.6rem;
35 | }
36 | 
37 | @include atSmall {
38 |   .p-top-large {
39 |     padding-top: 3.5rem;
40 |   }
41 |   .p-bottom-large {
42 |     padding-bottom: 3.5rem;
43 |   }
44 | }
45 | 
46 | .no-margin {
47 |   margin: 0;
48 | }
49 | .nu {
50 |   text-decoration: none;
51 | }
52 | .nu:hover {
53 |   text-decoration: underline;
54 | }
55 | 
56 | .t-left {
57 |   text-align: left;
58 | }
59 | .t-right {
60 |   text-align: right;
61 | }
62 | .t-center {
63 |   text-align: center;
64 | }
65 | 
66 | .t-small {
67 |   font-size: 0.85rem;
68 | }
69 | 
70 | .float-left {
71 |   float: left;
72 | }
73 | .float-right {
74 |   float: right;
75 | }
76 | .push-right {
77 |   margin-right: 20px;
78 | }
79 | 
80 | .container:before,
81 | .container:after,
82 | .group:before,
83 | .group:after {
84 |   content: " ";
85 |   display: table;
86 | }
87 | 
88 | .container:after,
89 | .group:after {
90 |   clear: both;
91 | }
92 | 
93 | .hide {
94 |   display: none;
95 | }
96 | 


--------------------------------------------------------------------------------
/css/modules/btn.scss:
--------------------------------------------------------------------------------
 1 | .btn {
 2 |   display: inline-block;
 3 |   cursor: pointer;
 4 |   border-radius: 4px;
 5 |   overflow: hidden;
 6 |   text-decoration: none;
 7 |   color: #fff;
 8 |   font-size: 1.19rem;
 9 |   padding: 12px 24px;
10 |   border: none;
11 |   outline: none;
12 | 
13 |   &--small {
14 |     font-size: 0.88rem;
15 |     padding: 7px 13px;
16 |     font-weight: 300;
17 |   }
18 | 
19 |   &--with-photo {
20 |     padding-left: 40px;
21 |     position: relative;
22 |   }
23 | 
24 |   &--orange {
25 |     background-color: $lightOrange;
26 |   }
27 | 
28 |   &--orange:hover {
29 |     background: linear-gradient($lightOrange, scale-color($lightOrange, $lightness: -25%, $saturation: 100%));
30 |   }
31 | 
32 |   &--dark-orange {
33 |     background-color: $darkOrange;
34 |   }
35 | 
36 |   &--dark-orange:hover {
37 |     background: linear-gradient($darkOrange, scale-color($darkOrange, $lightness: -35%, $saturation: 100%));
38 |   }
39 | 
40 |   &--blue {
41 |     background-color: $mainBlue;
42 |   }
43 | 
44 |   &--blue:hover {
45 |     background: linear-gradient(scale-color($mainBlue, $lightness: 11%), $mainBlue);
46 |   }
47 | 
48 |   &--yellow {
49 |     background-color: $mainYellow;
50 |     text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.22);
51 |   }
52 | 
53 |   &--yellow:hover {
54 |     background: linear-gradient($mainYellow, scale-color($mainYellow, $lightness: -29%, $saturation: 100%));
55 |   }
56 | 
57 |   &--beige {
58 |     background-color: $beige;
59 |     color: #173f58;
60 |   }
61 | 
62 |   &--beige:hover {
63 |     background-color: $mainYellow;
64 |   }
65 | 
66 |   &--gray {
67 |     background-color: #222;
68 |   }
69 | 
70 |   &--white {
71 |     background-color: #fff;
72 |     color: #173f58;
73 |   }
74 | 
75 |   &--white:hover {
76 |     background-color: #ddd;
77 |   }
78 | 
79 |   &--large {
80 |     font-size: 1.3rem;
81 |     padding: 16px 34px;
82 |     border-radius: 7px;
83 |     @include atSmall {
84 |       font-size: 1.9rem;
85 |     }
86 |   }
87 | 
88 |   &--inactive {
89 |     background-color: transparent;
90 |     cursor: default;
91 |     color: #333;
92 |   }
93 | }
94 | 


--------------------------------------------------------------------------------
/src/modules/GoogleMap.js:
--------------------------------------------------------------------------------
 1 | class GMap {
 2 |   constructor() {
 3 |     document.querySelectorAll(".acf-map").forEach(el => {
 4 |       this.new_map(el)
 5 |     })
 6 |   }
 7 | 
 8 |   new_map($el) {
 9 |     var $markers = $el.querySelectorAll(".marker")
10 | 
11 |     var args = {
12 |       zoom: 16,
13 |       center: new google.maps.LatLng(0, 0),
14 |       mapTypeId: google.maps.MapTypeId.ROADMAP
15 |     }
16 | 
17 |     var map = new google.maps.Map($el, args)
18 |     map.markers = []
19 |     var that = this
20 | 
21 |     // add markers
22 |     $markers.forEach(function (x) {
23 |       that.add_marker(x, map)
24 |     })
25 | 
26 |     // center map
27 |     this.center_map(map)
28 |   } // end new_map
29 | 
30 |   add_marker($marker, map) {
31 |     var latlng = new google.maps.LatLng($marker.getAttribute("data-lat"), $marker.getAttribute("data-lng"))
32 | 
33 |     var marker = new google.maps.Marker({
34 |       position: latlng,
35 |       map: map
36 |     })
37 | 
38 |     map.markers.push(marker)
39 | 
40 |     // if marker contains HTML, add it to an infoWindow
41 |     if ($marker.innerHTML) {
42 |       // create info window
43 |       var infowindow = new google.maps.InfoWindow({
44 |         content: $marker.innerHTML
45 |       })
46 | 
47 |       // show info window when marker is clicked
48 |       google.maps.event.addListener(marker, "click", function () {
49 |         infowindow.open(map, marker)
50 |       })
51 |     }
52 |   } // end add_marker
53 | 
54 |   center_map(map) {
55 |     var bounds = new google.maps.LatLngBounds()
56 | 
57 |     // loop through all markers and create bounds
58 |     map.markers.forEach(function (marker) {
59 |       var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng())
60 | 
61 |       bounds.extend(latlng)
62 |     })
63 | 
64 |     // only 1 marker?
65 |     if (map.markers.length == 1) {
66 |       // set center of map
67 |       map.setCenter(bounds.getCenter())
68 |       map.setZoom(16)
69 |     } else {
70 |       // fit to bounds
71 |       map.fitBounds(bounds)
72 |     }
73 |   } // end center_map
74 | }
75 | 
76 | export default GMap
77 | 


--------------------------------------------------------------------------------
/css/modules/site-header.scss:
--------------------------------------------------------------------------------
  1 | .site-header {
  2 |   z-index: 3;
  3 |   position: absolute;
  4 |   top: 0;
  5 |   left: 0;
  6 |   right: 0;
  7 |   padding: 20px 0;
  8 | 
  9 |   &__avatar {
 10 |     position: absolute;
 11 |     top: 0;
 12 |     left: 0;
 13 |   }
 14 | 
 15 |   &__avatar img {
 16 |     display: block;
 17 |     width: 30px;
 18 |     height: 30px;
 19 |   }
 20 | 
 21 |   &__menu {
 22 |     visibility: hidden;
 23 |     position: absolute;
 24 |     background-color: adjust-color($mainBlue, $alpha: -0.11, $lightness: -1%);
 25 |     left: 0;
 26 |     right: 0;
 27 |     top: -20px;
 28 |     padding-top: 58px;
 29 |     opacity: 0;
 30 |     transform: translateY(-20%);
 31 |     transition: opacity 0.3s ease-out, visibility 0.3s ease-out, transform 0.3s ease-out;
 32 |     padding-bottom: 20px;
 33 | 
 34 |     &--active {
 35 |       opacity: 1;
 36 |       transform: translateY(0);
 37 |       visibility: visible;
 38 |     }
 39 | 
 40 |     @include atMedium {
 41 |       visibility: visible;
 42 |       opacity: 1;
 43 |       transform: translateY(0) scale(1);
 44 |       position: static;
 45 |       background-color: transparent;
 46 |       float: right;
 47 |       padding-top: 0;
 48 |       padding-bottom: 0;
 49 |       top: 0;
 50 |     }
 51 |   }
 52 | 
 53 |   &__search-trigger {
 54 |     cursor: pointer;
 55 |     color: #fff;
 56 |     font-size: 1.2rem;
 57 |     position: absolute;
 58 |     top: 6px;
 59 |     right: 16px;
 60 | 
 61 |     @include atSmall {
 62 |       top: 4px;
 63 |       font-size: 1.4rem;
 64 |     }
 65 | 
 66 |     @include atMedium {
 67 |       display: none;
 68 |     }
 69 |   }
 70 | 
 71 |   &__menu-trigger {
 72 |     color: #fff;
 73 |     cursor: pointer;
 74 |     font-size: 1.2rem;
 75 |     position: absolute;
 76 |     z-index: 10;
 77 |     top: 7px;
 78 |     right: 46px;
 79 | 
 80 |     @include atSmall {
 81 |       top: 5px;
 82 |       font-size: 1.4rem;
 83 |     }
 84 | 
 85 |     @include atMedium {
 86 |       display: none;
 87 |     }
 88 |   }
 89 | 
 90 |   &__util {
 91 |     padding: 0 0 0 20px;
 92 | 
 93 |     @include atMedium {
 94 |       padding: 0;
 95 |       float: right;
 96 |     }
 97 |   }
 98 | 
 99 |   &__btn {
100 |     margin-right: 20px;
101 |     @include atMedium {
102 |       float: left;
103 |     }
104 |   }
105 | 
106 |   .btn--with-photo {
107 |     margin-right: 0;
108 |   }
109 | }
110 | 


--------------------------------------------------------------------------------
/css/modules/search-overlay.scss:
--------------------------------------------------------------------------------
  1 | .search-overlay {
  2 |   overflow-y: auto;
  3 |   overflow-x: hidden;
  4 |   z-index: 110;
  5 |   position: fixed;
  6 |   top: 0;
  7 |   left: 0;
  8 |   right: 0;
  9 |   bottom: 0;
 10 |   background-color: rgba(255, 255, 255, 0.96);
 11 |   visibility: hidden;
 12 |   opacity: 0;
 13 |   transform: scale(1.09);
 14 |   transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
 15 |   box-sizing: border-box;
 16 | 
 17 |   p {
 18 |     padding-top: 15px;
 19 |   }
 20 | 
 21 |   .event-summary p {
 22 |     padding-top: 0;
 23 |   }
 24 | 
 25 |   .event-summary {
 26 |     margin-bottom: 0;
 27 |     margin-top: 20px;
 28 |   }
 29 | 
 30 |   body.admin-bar & {
 31 |     top: 32px;
 32 |   }
 33 | 
 34 |   &__top {
 35 |     background-color: rgba(0, 0, 0, 0.12);
 36 |   }
 37 | 
 38 |   &__icon {
 39 |     margin-right: 10px;
 40 |     font-size: 1.8rem;
 41 |     color: $darkOrange;
 42 |     @include atMedium {
 43 |       font-size: 2.5rem;
 44 |     }
 45 |   }
 46 | 
 47 |   &--active {
 48 |     visibility: visible;
 49 |     opacity: 1;
 50 |     transform: scale(1);
 51 |   }
 52 | 
 53 |   &__section-title {
 54 |     margin: 30px 0 1px 0;
 55 |     font-weight: 400;
 56 |     color: $mainBlue;
 57 |     font-size: 2rem;
 58 |     padding: 15px 0;
 59 |     border-bottom: 1px solid #ccc;
 60 |   }
 61 | 
 62 |   &__close {
 63 |     position: absolute;
 64 |     top: 13px;
 65 |     right: 16px;
 66 |     font-size: 2.1rem;
 67 |     cursor: pointer;
 68 |     transition: all 0.3s;
 69 |     background-color: #fff;
 70 |     color: $darkOrange;
 71 |     line-height: 0.7;
 72 |     @include atSmall {
 73 |       top: 18px;
 74 |       font-size: 2.1rem;
 75 |     }
 76 |     @include atMedium {
 77 |       top: 26px;
 78 |       font-size: 2.8rem;
 79 |     }
 80 |   }
 81 | 
 82 |   &__close:hover {
 83 |     opacity: 1;
 84 |   }
 85 | 
 86 |   .one-half {
 87 |     padding-bottom: 0;
 88 |   }
 89 | }
 90 | 
 91 | .search-term {
 92 |   width: 75%;
 93 |   box-sizing: border-box;
 94 |   border: none;
 95 |   padding: 15px 0;
 96 |   margin: 0;
 97 |   background-color: transparent;
 98 |   font-size: 1rem;
 99 |   font-weight: 300;
100 |   outline: none;
101 |   color: $darkOrange;
102 |   @include atSmall {
103 |     font-size: 1.5rem;
104 |   }
105 |   @include atMedium {
106 |     width: 80%;
107 |     font-size: 3rem;
108 |   }
109 | }
110 | 
111 | .body-no-scroll {
112 |   overflow: hidden;
113 | }
114 | 


--------------------------------------------------------------------------------
/css/modules/hero-slider.scss:
--------------------------------------------------------------------------------
  1 | .hero-slider {
  2 |   position: relative;
  3 | 
  4 |   div {
  5 |     outline: none;
  6 |   }
  7 | 
  8 |   &__interior {
  9 |     padding-top: 60px;
 10 |     padding-bottom: 60px;
 11 | 
 12 |     @include atMedium {
 13 |       padding-top: 130px;
 14 |       padding-bottom: 130px;
 15 |     }
 16 |   }
 17 | 
 18 |   &__slide {
 19 |     background-size: cover;
 20 |     background-repeat: no-repeat;
 21 |   }
 22 | 
 23 |   &__overlay {
 24 |     margin: 0 auto;
 25 |     background-color: rgba(0, 0, 0, 0.68);
 26 |     padding: 40px;
 27 |     color: #fff;
 28 |     @include atMedium {
 29 |       width: 50%;
 30 |     }
 31 |   }
 32 | }
 33 | 
 34 | .slick-dots {
 35 |   z-index: 100;
 36 |   position: absolute;
 37 |   left: 0;
 38 |   right: 0;
 39 |   padding: 0;
 40 |   margin: 0;
 41 |   text-align: center;
 42 |   top: 15px;
 43 |   @include atMedium {
 44 |     top: 50px;
 45 |   }
 46 | }
 47 | 
 48 | .slick-dots {
 49 |   li {
 50 |     list-style: none;
 51 |     display: inline;
 52 |   }
 53 | 
 54 |   li button {
 55 |     display: inline-block;
 56 |     text-indent: -9999px;
 57 |     font-size: 0;
 58 |     line-height: 0;
 59 |     width: 10px;
 60 |     height: 10px;
 61 |     background-color: rgba(255, 255, 255, 0.5);
 62 |     box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
 63 |     border-radius: 50%;
 64 |     border: none;
 65 |     margin: 0 4px;
 66 |     padding: 0;
 67 |     outline: none;
 68 |     transition: background-color 0.3s ease-out;
 69 |     cursor: pointer;
 70 |   }
 71 | 
 72 |   .slick-active button {
 73 |     background-color: #fff;
 74 |   }
 75 | }
 76 | 
 77 | /* GlideJS */
 78 | .glide__bullets {
 79 |   z-index: 100;
 80 |   position: absolute;
 81 |   left: 0;
 82 |   right: 0;
 83 |   padding: 0;
 84 |   margin: 0;
 85 |   text-align: center;
 86 |   top: 15px;
 87 |   @include atMedium {
 88 |     top: 50px;
 89 |   }
 90 | 
 91 |   button {
 92 |     display: inline-block;
 93 |     text-indent: -9999px;
 94 |     font-size: 0;
 95 |     line-height: 0;
 96 |     width: 10px;
 97 |     height: 10px;
 98 |     background-color: rgba(255, 255, 255, 0.5);
 99 |     box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
100 |     border-radius: 50%;
101 |     border: none;
102 |     margin: 0 3px;
103 |     padding: 0;
104 |     outline: none;
105 |     transition: background-color 0.3s ease-out;
106 |     cursor: pointer;
107 |   }
108 | 
109 |   button.glide__bullet--active {
110 |     background-color: #fff;
111 |   }
112 | }
113 | 


--------------------------------------------------------------------------------
/css/modules/my-notes.scss:
--------------------------------------------------------------------------------
  1 | /* My Notes */
  2 | .edit-note,
  3 | .delete-note,
  4 | .submit-note {
  5 |   font-size: 0.9rem;
  6 |   background-color: #eee;
  7 |   padding: 8px 16px;
  8 |   display: inline-block;
  9 |   margin-right: 7px;
 10 |   border-radius: 4px;
 11 |   cursor: pointer;
 12 | }
 13 | 
 14 | .submit-note {
 15 |   color: #fff;
 16 |   border: none;
 17 |   background-color: $darkOrange;
 18 |   line-height: 1.65;
 19 | }
 20 | 
 21 | .submit-note:hover {
 22 |   background-color: adjust-color($darkOrange, $lightness: -10%, $saturation: -20%);
 23 | }
 24 | 
 25 | .edit-note,
 26 | .delete-note {
 27 |   @media (min-width: 635px) {
 28 |     position: relative;
 29 |     top: -12px;
 30 |   }
 31 | }
 32 | 
 33 | .edit-note:hover,
 34 | .delete-note:hover {
 35 |   background-color: #ddd;
 36 | }
 37 | 
 38 | .delete-note {
 39 |   color: red;
 40 | }
 41 | 
 42 | .update-note {
 43 |   visibility: hidden;
 44 | }
 45 | 
 46 | .update-note--visible {
 47 |   visibility: visible;
 48 | }
 49 | 
 50 | .note-title-field {
 51 |   width: 40%;
 52 |   font-size: 1.85rem;
 53 |   font-family: "Roboto Condensed", sans-serif;
 54 |   font-weight: 300;
 55 |   color: $mainBlue;
 56 |   border: 1px solid transparent;
 57 |   padding: 7px;
 58 |   outline: none;
 59 |   position: relative;
 60 |   top: 1px;
 61 | 
 62 |   @media (max-width: 400px) {
 63 |     width: 100%;
 64 |   }
 65 | 
 66 |   @media (min-width: 635px) {
 67 |     width: 65%;
 68 |     font-size: 3.125rem;
 69 |   }
 70 | }
 71 | 
 72 | .note-body-field {
 73 |   color: #333;
 74 |   font-family: "Roboto", sans-serif;
 75 |   resize: none;
 76 |   display: block;
 77 |   width: 100%;
 78 |   line-height: 1.65;
 79 |   font-size: 1.15rem;
 80 |   padding: 7px;
 81 |   border: 1px solid transparent;
 82 |   height: 175px;
 83 |   outline: none;
 84 | }
 85 | 
 86 | .note-active-field {
 87 |   border: 1px solid #ddd;
 88 |   animation: pulseBorder 0.75s alternate infinite;
 89 | }
 90 | 
 91 | @keyframes pulseBorder {
 92 |   0% {
 93 |     border: 1px solid #fff;
 94 |   }
 95 | 
 96 |   100% {
 97 |     border: 1px solid #ccc;
 98 |   }
 99 | }
100 | 
101 | /* Create Note */
102 | .create-note {
103 |   background-color: #ddd;
104 |   padding: 20px;
105 |   margin-bottom: 20px;
106 | }
107 | 
108 | .new-note-title {
109 |   width: 100%;
110 |   padding: 10px;
111 |   font-family: "Roboto", sans-serif;
112 |   border: none;
113 |   margin-bottom: 10px;
114 |   font-size: 1.15rem;
115 |   box-sizing: border-box;
116 | }
117 | 
118 | .new-note-body {
119 |   width: 100%;
120 |   box-sizing: border-box;
121 |   resize: none;
122 |   padding: 10px;
123 |   font-family: "Roboto", sans-serif;
124 |   border: none;
125 |   margin-bottom: 10px;
126 |   height: 170px;
127 |   font-size: 1.15rem;
128 |   line-height: 1.65;
129 | }
130 | 
131 | /* Reveal and Hide Fade Transitions */
132 | #my-notes {
133 |   position: relative;
134 | }
135 | 
136 | #my-notes li {
137 |   transition: all 0.4s ease-out;
138 |   opacity: 1;
139 | }
140 | 
141 | #my-notes li.fade-out {
142 |   height: 0px !important;
143 |   overflow: hidden !important;
144 |   padding: 0 !important;
145 |   margin: 0 !important;
146 |   opacity: 0.5;
147 | }
148 | 
149 | #my-notes li.fade-in-calc {
150 |   padding: 0 !important;
151 |   margin: 0 !important;
152 |   border: none !important;
153 |   position: absolute;
154 |   left: 0;
155 |   right: 0;
156 |   opacity: 0;
157 | }
158 | 


--------------------------------------------------------------------------------
/css/modules/shame.scss:
--------------------------------------------------------------------------------
  1 | .remove-favorite {
  2 |   display: inline-block;
  3 |   transition: all 0.3s;
  4 |   color: #999;
  5 |   font-size: 0.9rem;
  6 |   cursor: pointer;
  7 |   padding: 4px 6px;
  8 |   border-radius: 3px;
  9 | }
 10 | 
 11 | .remove-favorite:hover {
 12 |   background-color: #dedede;
 13 | }
 14 | 
 15 | .page-section {
 16 |   padding-top: 1.6rem;
 17 |   padding-bottom: 1.6rem;
 18 |   @include atSmall {
 19 |     padding-top: 3.5rem;
 20 |     padding-bottom: 3.5rem;
 21 |   }
 22 | 
 23 |   &--white {
 24 |     background-color: #fff;
 25 |   }
 26 | 
 27 |   &--beige {
 28 |     background-color: $beige;
 29 |   }
 30 | 
 31 |   p:last-of-type {
 32 |     margin-bottom: 0;
 33 |   }
 34 | }
 35 | 
 36 | .school-logo-text {
 37 |   position: relative;
 38 |   z-index: 20;
 39 |   margin: 0;
 40 |   font-size: 1.75rem;
 41 |   font-weight: 100;
 42 | }
 43 | 
 44 | .school-logo-text strong {
 45 |   font-weight: 400;
 46 | }
 47 | 
 48 | .school-logo-text a {
 49 |   color: #fff;
 50 |   text-decoration: none;
 51 | }
 52 | 
 53 | .school-logo-text--alt-color a {
 54 |   color: #666;
 55 | 
 56 |   &:hover {
 57 |     color: $mainBlue;
 58 |     text-decoration: underline;
 59 |   }
 60 | }
 61 | 
 62 | @keyframes spin {
 63 |   0% {
 64 |     -webkit-transform: rotate(0deg);
 65 |     transform: rotate(0deg);
 66 |   }
 67 |   100% {
 68 |     -webkit-transform: rotate(360deg);
 69 |     transform: rotate(360deg);
 70 |   }
 71 | }
 72 | 
 73 | .spinner-loader {
 74 |   margin-top: 45px;
 75 |   border-radius: 50%;
 76 |   width: 24px;
 77 |   height: 24px;
 78 |   border: 0.25rem solid rgba(0, 0, 0, 0.2);
 79 |   border-top-color: black;
 80 |   -webkit-animation: spin 1s infinite linear;
 81 |   animation: spin 1s infinite linear;
 82 | }
 83 | 
 84 | .c-orange {
 85 |   color: $darkOrange;
 86 | }
 87 | .c-blue {
 88 |   color: $mainBlue;
 89 | }
 90 | .c-white {
 91 |   color: #fff;
 92 | }
 93 | .c-dark {
 94 |   color: #333;
 95 | }
 96 | .gray {
 97 |   color: #999999;
 98 | }
 99 | 
100 | .search-trigger {
101 |   display: none;
102 |   color: #fff;
103 |   position: relative;
104 |   cursor: pointer;
105 |   top: 1px;
106 |   margin-left: 20px;
107 |   @include atMedium {
108 |     display: inline-block;
109 |     top: 6px;
110 |   }
111 | }
112 | 
113 | .search-trigger:hover {
114 |   opacity: 0.65;
115 | }
116 | 
117 | .social-icons-list {
118 |   display: flex;
119 |   margin: 0 -8px;
120 | }
121 | 
122 | .social-icons-list li {
123 |   flex: 1;
124 |   margin: 0 8px;
125 | }
126 | 
127 | .social-icons-list li a {
128 |   display: block;
129 |   text-align: center;
130 |   color: #fff;
131 |   font-size: 1.25rem;
132 | }
133 | 
134 | .social-icons-list li a:hover {
135 |   opacity: 0.75;
136 | }
137 | 
138 | .social-color-facebook {
139 |   background-color: #4862a3;
140 | }
141 | .social-color-twitter {
142 |   background-color: #55acee;
143 | }
144 | .social-color-youtube {
145 |   background-color: #cc1e1f;
146 | }
147 | .social-color-linkedin {
148 |   background-color: #0077b5;
149 | }
150 | .social-color-instagram {
151 |   background-color: #d8226b;
152 | }
153 | 
154 | .nav-list ul {
155 |   padding: 0;
156 |   margin: 0;
157 | }
158 | 
159 | .nav-list li {
160 |   list-style: none;
161 | }
162 | 
163 | .nav-list a {
164 |   font-size: 0.9rem;
165 |   color: #999;
166 |   text-decoration: none;
167 | }
168 | 
169 | .nav-list a:hover {
170 |   color: $mainBlue;
171 |   text-decoration: underline;
172 | }
173 | 
174 | .one-half,
175 | .one-third,
176 | .one-fourth,
177 | .one-fifth,
178 | .one-sixth {
179 |   padding-bottom: 1.6rem;
180 | }
181 | 
182 | @include atMedium {
183 |   .row {
184 |     margin-right: -50px;
185 |   }
186 | 
187 |   .one-half,
188 |   .one-third,
189 |   .two-thirds,
190 |   .one-fourth,
191 |   .one-fifth,
192 |   .one-sixth {
193 |     padding-bottom: 0;
194 |     float: left;
195 |     box-sizing: border-box;
196 |     padding-right: 50px;
197 |   }
198 | 
199 |   .two-thirds {
200 |     width: 66.66%;
201 |   }
202 |   .one-half {
203 |     width: 50%;
204 |   }
205 |   .one-third {
206 |     width: 33.33%;
207 |   }
208 |   .one-quarter {
209 |     width: 25%;
210 |   }
211 |   .one-fifth {
212 |     width: 20%;
213 |   }
214 |   .one-sixth {
215 |     width: 16.66%;
216 |   }
217 | }
218 | 
219 | /* Make Top WP Admin Bar Fixed on Mobile */
220 | @media screen and (max-width: 600px) {
221 |   #wpadminbar {
222 |     position: fixed;
223 |   }
224 | }
225 | 
226 | /* Seach Form */
227 | .search-form {
228 |   background-color: #dedede;
229 |   padding: 20px;
230 |   text-align: center;
231 | }
232 | 
233 | .search-form label {
234 |   display: block;
235 | }
236 | 
237 | .search-form-row {
238 |   display: flex;
239 | }
240 | 
241 | .search-form .s {
242 |   min-width: 20px;
243 |   flex-basis: auto;
244 |   flex-grow: 1;
245 |   border: none;
246 |   font-family: "Roboto", sans-serif;
247 |   padding: 10px;
248 |   @include atSmall {
249 |     font-size: 1.4rem;
250 |   }
251 | }
252 | 
253 | .search-submit {
254 |   color: #fff;
255 |   border: none;
256 |   border-radius: 4px;
257 |   outline: none;
258 |   background-color: $mainBlue;
259 |   font-family: "Roboto", sans-serif;
260 |   padding: 0 20px;
261 |   margin-left: 10px;
262 | }
263 | 
264 | .note-limit-message {
265 |   visibility: hidden;
266 |   opacity: 0;
267 |   transition: all 0.3s ease-out;
268 |   color: #c32929;
269 |   font-weight: bold;
270 | }
271 | 
272 | .note-limit-message.active {
273 |   visibility: visible;
274 |   opacity: 1;
275 | }
276 | 
277 | /* Like Box */
278 | .generic-content .like-box {
279 |   float: right;
280 |   font-size: 1rem;
281 |   background-color: #ededed;
282 |   box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
283 |   color: red;
284 |   padding: 10px 10px 10px 25px;
285 |   border-radius: 4px;
286 |   cursor: pointer;
287 |   margin: 0 0 30px 30px;
288 |   position: relative;
289 | }
290 | 
291 | .generic-content .like-box:hover {
292 |   background-color: #dedede;
293 | }
294 | 
295 | .like-count {
296 |   padding-left: 10px;
297 | }
298 | 
299 | .like-box .fa-heart-o {
300 |   transition: all 0.35s ease-out;
301 |   position: absolute;
302 |   left: 10px;
303 | }
304 | 
305 | .like-box .fa-heart {
306 |   left: 10px;
307 |   transition: all 0.4s ease-out;
308 |   position: absolute;
309 |   visibility: hidden;
310 |   transform: scale(0.2);
311 |   opacity: 0;
312 | }
313 | 
314 | .like-box[data-exists="yes"] .fa-heart {
315 |   transform: scale(1);
316 |   visibility: visible;
317 |   opacity: 1;
318 | }
319 | 
320 | .like-box[data-exists="yes"] .fa-heart-o {
321 |   visibility: hidden;
322 |   opacity: 0;
323 | }
324 | 


--------------------------------------------------------------------------------
/interior-page.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
  6 |     <title>Fictional University</title>
  7 |     <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" />
  8 |     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />
  9 |     <link rel="stylesheet" href="build/index.css" />
 10 |     <link rel="stylesheet" href="build/style-index.css" />
 11 |   </head>
 12 |   <body>
 13 |     <header class="site-header">
 14 |       <div class="container">
 15 |         <h1 class="school-logo-text float-left">
 16 |           <a href="#"><strong>Fictional</strong> University</a>
 17 |         </h1>
 18 |         <span class="js-search-trigger site-header__search-trigger"><i class="fa fa-search" aria-hidden="true"></i></span>
 19 |         <i class="site-header__menu-trigger fa fa-bars" aria-hidden="true"></i>
 20 |         <div class="site-header__menu group">
 21 |           <nav class="main-navigation">
 22 |             <ul>
 23 |               <li class="current-menu-item"><a href="#">About Us</a></li>
 24 |               <li><a href="#">Programs</a></li>
 25 |               <li><a href="#">Events</a></li>
 26 |               <li><a href="#">Campuses</a></li>
 27 |               <li><a href="#">Blog</a></li>
 28 |             </ul>
 29 |           </nav>
 30 |           <div class="site-header__util">
 31 |             <a href="#" class="btn btn--small btn--orange float-left push-right">Login</a>
 32 |             <a href="#" class="btn btn--small btn--dark-orange float-left">Sign Up</a>
 33 |             <span class="search-trigger js-search-trigger"><i class="fa fa-search" aria-hidden="true"></i></span>
 34 |           </div>
 35 |         </div>
 36 |       </div>
 37 |     </header>
 38 | 
 39 |     <div class="page-banner">
 40 |       <div class="page-banner__bg-image" style="background-image: url(images/ocean.jpg)"></div>
 41 |       <div class="page-banner__content container container--narrow">
 42 |         <h1 class="page-banner__title">Our History</h1>
 43 |         <div class="page-banner__intro">
 44 |           <p>Learn how the school of your dreams got started.</p>
 45 |         </div>
 46 |       </div>
 47 |     </div>
 48 | 
 49 |     <div class="container container--narrow page-section">
 50 |       <div class="metabox metabox--position-up metabox--with-home-link">
 51 |         <p>
 52 |           <a class="metabox__blog-home-link" href="#"><i class="fa fa-home" aria-hidden="true"></i> Back to About Us</a> <span class="metabox__main">Our History</span>
 53 |         </p>
 54 |       </div>
 55 | 
 56 |       <div class="page-links">
 57 |         <h2 class="page-links__title"><a href="#">About Us</a></h2>
 58 |         <ul class="min-list">
 59 |           <li class="current_page_item"><a href="#">Our History</a></li>
 60 |           <li><a href="#">Our Goals</a></li>
 61 |         </ul>
 62 |       </div>
 63 | 
 64 |       <div class="generic-content">
 65 |         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia voluptates vero vel temporibus aliquid possimus, facere accusamus modi. Fugit saepe et autem, laboriosam earum reprehenderit illum odit nobis, consectetur dicta. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos molestiae, tempora alias atque vero officiis sit commodi ipsa vitae impedit odio repellendus doloremque quibusdam quo, ea veniam, ad quod sed.</p>
 66 |         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia voluptates vero vel temporibus aliquid possimus, facere accusamus modi. Fugit saepe et autem, laboriosam earum reprehenderit illum odit nobis, consectetur dicta. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos molestiae, tempora alias atque vero officiis sit commodi ipsa vitae impedit odio repellendus doloremque quibusdam quo, ea veniam, ad quod sed.</p>
 67 |       </div>
 68 |     </div>
 69 | 
 70 |     <div class="page-section page-section--beige">
 71 |       <div class="container container--narrow generic-content">
 72 |         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia voluptates vero vel temporibus aliquid possimus, facere accusamus modi. Fugit saepe et autem, laboriosam earum reprehenderit illum odit nobis, consectetur dicta. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos molestiae, tempora alias atque vero officiis sit commodi ipsa vitae impedit odio repellendus doloremque quibusdam quo, ea veniam, ad quod sed.</p>
 73 | 
 74 |         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia voluptates vero vel temporibus aliquid possimus, facere accusamus modi. Fugit saepe et autem, laboriosam earum reprehenderit illum odit nobis, consectetur dicta. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos molestiae, tempora alias atque vero officiis sit commodi ipsa vitae impedit odio repellendus doloremque quibusdam quo, ea veniam, ad quod sed.</p>
 75 |       </div>
 76 |     </div>
 77 | 
 78 |     <div class="page-section page-section--white">
 79 |       <div class="container container--narrow">
 80 |         <h2 class="headline headline--medium">Biology Professors:</h2>
 81 | 
 82 |         <ul class="professor-cards">
 83 |           <li class="professor-card__list-item">
 84 |             <a href="#" class="professor-card">
 85 |               <img class="professor-card__image" src="images/barksalot.jpg" />
 86 |               <span class="professor-card__name">Dr. Barksalot</span>
 87 |             </a>
 88 |           </li>
 89 |           <li class="professor-card__list-item">
 90 |             <a href="#" class="professor-card">
 91 |               <img class="professor-card__image" src="images/meowsalot.jpg" />
 92 |               <span class="professor-card__name">Dr. Meowsalot</span>
 93 |             </a>
 94 |           </li>
 95 |         </ul>
 96 |         <hr class="section-break" />
 97 | 
 98 |         <div class="row group generic-content">
 99 |           <div class="one-third">
100 |             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia voluptates vero vel temporibus aliquid possimus, facere accusamus modi. Fugit saepe et autem, laboriosam earum reprehenderit illum odit nobis, consectetur dicta. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos molestiae, tempora alias atque vero officiis sit commodi ipsa vitae impedit odio repellendus doloremque quibusdam quo, ea veniam, ad quod sed.</p>
101 |           </div>
102 | 
103 |           <div class="one-third">
104 |             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia voluptates vero vel temporibus aliquid possimus, facere accusamus modi. Fugit saepe et autem, laboriosam earum reprehenderit illum odit nobis, consectetur dicta. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos molestiae, tempora alias atque vero officiis sit commodi ipsa vitae impedit odio repellendus doloremque quibusdam quo, ea veniam, ad quod sed.</p>
105 |           </div>
106 | 
107 |           <div class="one-third">
108 |             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia voluptates vero vel temporibus aliquid possimus, facere accusamus modi. Fugit saepe et autem, laboriosam earum reprehenderit illum odit nobis, consectetur dicta. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos molestiae, tempora alias atque vero officiis sit commodi ipsa vitae impedit odio repellendus doloremque quibusdam quo, ea veniam, ad quod sed.</p>
109 |           </div>
110 |         </div>
111 |       </div>
112 |     </div>
113 | 
114 |     <footer class="site-footer">
115 |       <div class="site-footer__inner container container--narrow">
116 |         <div class="group">
117 |           <div class="site-footer__col-one">
118 |             <h1 class="school-logo-text school-logo-text--alt-color">
119 |               <a href="#"><strong>Fictional</strong> University</a>
120 |             </h1>
121 |             <p><a class="site-footer__link" href="#">555.555.5555</a></p>
122 |           </div>
123 | 
124 |           <div class="site-footer__col-two-three-group">
125 |             <div class="site-footer__col-two">
126 |               <h3 class="headline headline--small">Explore</h3>
127 |               <nav class="nav-list">
128 |                 <ul>
129 |                   <li><a href="#">About Us</a></li>
130 |                   <li><a href="#">Programs</a></li>
131 |                   <li><a href="#">Events</a></li>
132 |                   <li><a href="#">Campuses</a></li>
133 |                 </ul>
134 |               </nav>
135 |             </div>
136 | 
137 |             <div class="site-footer__col-three">
138 |               <h3 class="headline headline--small">Learn</h3>
139 |               <nav class="nav-list">
140 |                 <ul>
141 |                   <li><a href="#">Legal</a></li>
142 |                   <li><a href="#">Privacy</a></li>
143 |                   <li><a href="#">Careers</a></li>
144 |                 </ul>
145 |               </nav>
146 |             </div>
147 |           </div>
148 | 
149 |           <div class="site-footer__col-four">
150 |             <h3 class="headline headline--small">Connect With Us</h3>
151 |             <nav>
152 |               <ul class="min-list social-icons-list group">
153 |                 <li>
154 |                   <a href="#" class="social-color-facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a>
155 |                 </li>
156 |                 <li>
157 |                   <a href="#" class="social-color-twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a>
158 |                 </li>
159 |                 <li>
160 |                   <a href="#" class="social-color-youtube"><i class="fa fa-youtube" aria-hidden="true"></i></a>
161 |                 </li>
162 |                 <li>
163 |                   <a href="#" class="social-color-linkedin"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
164 |                 </li>
165 |                 <li>
166 |                   <a href="#" class="social-color-instagram"><i class="fa fa-instagram" aria-hidden="true"></i></a>
167 |                 </li>
168 |               </ul>
169 |             </nav>
170 |           </div>
171 |         </div>
172 |       </div>
173 |     </footer>
174 | 
175 |     <script src="build/index.js"></script>
176 |   </body>
177 | </html>
178 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
  6 |     <title>Fictional University</title>
  7 |     <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" />
  8 |     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />
  9 |     <link rel="stylesheet" href="build/index.css" />
 10 |     <link rel="stylesheet" href="build/style-index.css" />
 11 |   </head>
 12 |   <body>
 13 |     <header class="site-header">
 14 |       <div class="container">
 15 |         <h1 class="school-logo-text float-left">
 16 |           <a href="#"><strong>Fictional</strong> University</a>
 17 |         </h1>
 18 |         <span class="js-search-trigger site-header__search-trigger"><i class="fa fa-search" aria-hidden="true"></i></span>
 19 |         <i class="site-header__menu-trigger fa fa-bars" aria-hidden="true"></i>
 20 |         <div class="site-header__menu group">
 21 |           <nav class="main-navigation">
 22 |             <ul>
 23 |               <li><a href="#">About Us</a></li>
 24 |               <li><a href="#">Programs</a></li>
 25 |               <li><a href="#">Events</a></li>
 26 |               <li><a href="#">Campuses</a></li>
 27 |               <li><a href="#">Blog</a></li>
 28 |             </ul>
 29 |           </nav>
 30 |           <div class="site-header__util">
 31 |             <a href="#" class="btn btn--small btn--orange float-left push-right">Login</a>
 32 |             <a href="#" class="btn btn--small btn--dark-orange float-left">Sign Up</a>
 33 |             <span class="search-trigger js-search-trigger"><i class="fa fa-search" aria-hidden="true"></i></span>
 34 |           </div>
 35 |         </div>
 36 |       </div>
 37 |     </header>
 38 | 
 39 |     <div class="page-banner">
 40 |       <div class="page-banner__bg-image" style="background-image: url(images/library-hero.jpg)"></div>
 41 |       <div class="page-banner__content container t-center c-white">
 42 |         <h1 class="headline headline--large">Welcome!</h1>
 43 |         <h2 class="headline headline--medium">We think you&rsquo;ll like it here.</h2>
 44 |         <h3 class="headline headline--small">Why don&rsquo;t you check out the <strong>major</strong> you&rsquo;re interested in?</h3>
 45 |         <a href="#" class="btn btn--large btn--blue">Find Your Major</a>
 46 |       </div>
 47 |     </div>
 48 | 
 49 |     <div class="full-width-split group">
 50 |       <div class="full-width-split__one">
 51 |         <div class="full-width-split__inner">
 52 |           <h2 class="headline headline--small-plus t-center">Upcoming Events</h2>
 53 | 
 54 |           <div class="event-summary">
 55 |             <a class="event-summary__date t-center" href="#">
 56 |               <span class="event-summary__month">Mar</span>
 57 |               <span class="event-summary__day">25</span>
 58 |             </a>
 59 |             <div class="event-summary__content">
 60 |               <h5 class="event-summary__title headline headline--tiny"><a href="#">Poetry in the 100</a></h5>
 61 |               <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>
 62 |             </div>
 63 |           </div>
 64 |           <div class="event-summary">
 65 |             <a class="event-summary__date t-center" href="#">
 66 |               <span class="event-summary__month">Apr</span>
 67 |               <span class="event-summary__day">02</span>
 68 |             </a>
 69 |             <div class="event-summary__content">
 70 |               <h5 class="event-summary__title headline headline--tiny"><a href="#">Quad Picnic Party</a></h5>
 71 |               <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>
 72 |             </div>
 73 |           </div>
 74 | 
 75 |           <p class="t-center no-margin"><a href="#" class="btn btn--blue">View All Events</a></p>
 76 |         </div>
 77 |       </div>
 78 |       <div class="full-width-split__two">
 79 |         <div class="full-width-split__inner">
 80 |           <h2 class="headline headline--small-plus t-center">From Our Blogs</h2>
 81 | 
 82 |           <div class="event-summary">
 83 |             <a class="event-summary__date event-summary__date--beige t-center" href="#">
 84 |               <span class="event-summary__month">Jan</span>
 85 |               <span class="event-summary__day">20</span>
 86 |             </a>
 87 |             <div class="event-summary__content">
 88 |               <h5 class="event-summary__title headline headline--tiny"><a href="#">We Were Voted Best School</a></h5>
 89 |               <p>For the 100th year in a row we are voted #1. <a href="#" class="nu gray">Read more</a></p>
 90 |             </div>
 91 |           </div>
 92 |           <div class="event-summary">
 93 |             <a class="event-summary__date event-summary__date--beige t-center" href="#">
 94 |               <span class="event-summary__month">Feb</span>
 95 |               <span class="event-summary__day">04</span>
 96 |             </a>
 97 |             <div class="event-summary__content">
 98 |               <h5 class="event-summary__title headline headline--tiny"><a href="#">Professors in the National Spotlight</a></h5>
 99 |               <p>Two of our professors have been in national news lately. <a href="#" class="nu gray">Read more</a></p>
100 |             </div>
101 |           </div>
102 | 
103 |           <p class="t-center no-margin"><a href="#" class="btn btn--yellow">View All Blog Posts</a></p>
104 |         </div>
105 |       </div>
106 |     </div>
107 | 
108 |     <div class="hero-slider">
109 |       <div data-glide-el="track" class="glide__track">
110 |         <div class="glide__slides">
111 |           <div class="hero-slider__slide" style="background-image: url(images/bus.jpg)">
112 |             <div class="hero-slider__interior container">
113 |               <div class="hero-slider__overlay">
114 |                 <h2 class="headline headline--medium t-center">Free Transportation</h2>
115 |                 <p class="t-center">All students have free unlimited bus fare.</p>
116 |                 <p class="t-center no-margin"><a href="#" class="btn btn--blue">Learn more</a></p>
117 |               </div>
118 |             </div>
119 |           </div>
120 |           <div class="hero-slider__slide" style="background-image: url(images/apples.jpg)">
121 |             <div class="hero-slider__interior container">
122 |               <div class="hero-slider__overlay">
123 |                 <h2 class="headline headline--medium t-center">An Apple a Day</h2>
124 |                 <p class="t-center">Our dentistry program recommends eating apples.</p>
125 |                 <p class="t-center no-margin"><a href="#" class="btn btn--blue">Learn more</a></p>
126 |               </div>
127 |             </div>
128 |           </div>
129 |           <div class="hero-slider__slide" style="background-image: url(images/bread.jpg)">
130 |             <div class="hero-slider__interior container">
131 |               <div class="hero-slider__overlay">
132 |                 <h2 class="headline headline--medium t-center">Free Food</h2>
133 |                 <p class="t-center">Fictional University offers lunch plans for those in need.</p>
134 |                 <p class="t-center no-margin"><a href="#" class="btn btn--blue">Learn more</a></p>
135 |               </div>
136 |             </div>
137 |           </div>
138 |         </div>
139 |         <div class="slider__bullets glide__bullets" data-glide-el="controls[nav]"></div>
140 |       </div>
141 |     </div>
142 | 
143 |     <footer class="site-footer">
144 |       <div class="site-footer__inner container container--narrow">
145 |         <div class="group">
146 |           <div class="site-footer__col-one">
147 |             <h1 class="school-logo-text school-logo-text--alt-color">
148 |               <a href="#"><strong>Fictional</strong> University</a>
149 |             </h1>
150 |             <p><a class="site-footer__link" href="#">555.555.5555</a></p>
151 |           </div>
152 | 
153 |           <div class="site-footer__col-two-three-group">
154 |             <div class="site-footer__col-two">
155 |               <h3 class="headline headline--small">Explore</h3>
156 |               <nav class="nav-list">
157 |                 <ul>
158 |                   <li><a href="#">About Us</a></li>
159 |                   <li><a href="#">Programs</a></li>
160 |                   <li><a href="#">Events</a></li>
161 |                   <li><a href="#">Campuses</a></li>
162 |                 </ul>
163 |               </nav>
164 |             </div>
165 | 
166 |             <div class="site-footer__col-three">
167 |               <h3 class="headline headline--small">Learn</h3>
168 |               <nav class="nav-list">
169 |                 <ul>
170 |                   <li><a href="#">Legal</a></li>
171 |                   <li><a href="#">Privacy</a></li>
172 |                   <li><a href="#">Careers</a></li>
173 |                 </ul>
174 |               </nav>
175 |             </div>
176 |           </div>
177 | 
178 |           <div class="site-footer__col-four">
179 |             <h3 class="headline headline--small">Connect With Us</h3>
180 |             <nav>
181 |               <ul class="min-list social-icons-list group">
182 |                 <li>
183 |                   <a href="#" class="social-color-facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a>
184 |                 </li>
185 |                 <li>
186 |                   <a href="#" class="social-color-twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a>
187 |                 </li>
188 |                 <li>
189 |                   <a href="#" class="social-color-youtube"><i class="fa fa-youtube" aria-hidden="true"></i></a>
190 |                 </li>
191 |                 <li>
192 |                   <a href="#" class="social-color-linkedin"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
193 |                 </li>
194 |                 <li>
195 |                   <a href="#" class="social-color-instagram"><i class="fa fa-instagram" aria-hidden="true"></i></a>
196 |                 </li>
197 |               </ul>
198 |             </nav>
199 |           </div>
200 |         </div>
201 |       </div>
202 |     </footer>
203 | 
204 |     <script src="build/index.js"></script>
205 |   </body>
206 | </html>
207 | 


--------------------------------------------------------------------------------