Перейдите к разделу страницы

Soujanya J спросил: 28 апреля 2018 в 09:04 в: javascript

Я разрабатываю статическую страницу и перехожу к разделам с использованием ссылки id и href. После выбора раздела прокрутка не перемещается в начало раздела. Он скрывает часть метки в разделе. Может кто-то помочь мне с этим. Пара изображений на странице не работает, пожалуйста, проигнорируйте их.

var menuObject = document.getElementById("open-menu");
menuObject.addEventListener('click', function() {
  var asideObject = document.getElementById('offcanvas');
  asideObject.classList.add('open');
})
var closeBtn = document.getElementById('close-btn');
closeBtn.addEventListener('click', function() {
  var asideObject = document.getElementById('offcanvas');
  asideObject.classList.remove('open');
  event.preventDefault();
})

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
a:active,
a:focus,
a:hover,
a:visited {
  text-decoration: none;
}
@font-face {
  font-family: "Lato";
  src: url('./assets/fonts/lato-regular.eot');
  src: url('./assets/fonts/lato-regular.woff') format('woff'), url('./assets/fonts/lato-regular.woff2') format('woff2'), url('./assets/fonts/lato-regular.ttf') format('truetype'), url('./assets/fonts/lato-regular.svg#Lato') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Bitter';
  src: url('./assets/fonts/Bitter-Regular.eot');
  src: url('./assets/fonts/Bitter-Regular.woff') format('woff'), url('./assets/fonts/Bitter-Regular.ttf') format('ttf'), url('./assets/fonts/Bitter-Regular.svg') format('svg');
}
html,
body {
  font-family: 'Lato', Arial, sans-serif;
  line-height: 1;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}
body {
  color: #36384c;
  background-color: #e9dccd;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1;
  margin: 0 0 20px;
}
h1 {
  font-size: 7.5rem;
}
h2 {
  font-size: 2.125rem;
}
h3 {
  font-size: 1.875rem;
}
.app-header {
  position: fixed;
  width: 100%;
  font-size: 1.121rem;
  color: #fff;
  padding: 10px;
  background-color: #36384c;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
  z-index: 1;
}
.app-header .header-wrapper {
  max-width: 1100px;
  margin: 0 auto;
}
.app-header .header-wrapper .brand-logo {
  display: inline-block;
  color: inherit;
  vertical-align: middle;
  width: 150px;
  height: 60px;
}
.app-header .header-wrapper .brand-logo img {
  height: 100%;
}
.app-header .header-wrapper .header-nav {
  display: none;
  margin: 0;
}
.app-header .header-wrapper .header-nav > a {
  color: inherit;
  padding: 0 15px;
}
.app-header .header-wrapper .open-menu {
  display: inline-block;
  position: absolute;
  right: 5px;
  width: 55px;
  top: 16px;
  padding: 12px;
}
.app-header .header-wrapper .open-menu span {
  display: block;
  background-color: #fff;
  height: 2px;
  width: 100%;
  margin-bottom: 8px;
}
aside {
  display: none;
  position: fixed;
  width: 100%;
  height: 100vh;
  font-size: 1.121rem;
  color: #fff;
  padding: 10px;
  background-color: #36384c;
}
aside.open {
  display: block;
  z-index: 10;
}
aside .offcanvas-content {
  margin-top: 10%;
  text-align: center;
}
aside .close-btn {
  display: inline-block;
  width: 44px;
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 10px;
  margin: 10px;
}
aside .close-btn span {
  position: absolute;
  display: block;
  height: 2px;
  width: 100%;
  background-color: #fff;
}
aside .close-btn span:first-child {
  transform: rotate(135deg);
}
aside .close-btn span:last-child {
  transform: rotate(225deg);
}
aside .offcanvas-item {
  color: inherit;
  display: block;
  line-height: 2;
  font-size: 1.25rem;
}
main {
  padding-top: 80px;
}
#Main {
  position: relative;
  background-image: url('./assets/images/coffee.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
#Main.container {
  max-width: none;
}
#Main .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
#Main .full-width {
  position: relative;
  width: 100%;
  color: #fff;
  margin: 0 auto;
  text-align: center;
  margin-top: -2rem;
}
#Main .full-width h1 {
  font-family: Bitter, serif;
  font-weight: normal;
  margin: 0 0 16px;
}
#Main .full-width h2 {
  margin: 0 0 20px;
}
.container {
  width: 100%;
  max-width: 1200px;
  min-height: 600px;
  padding: 40px 30px;
  margin: 0 auto;
}
.block-wrapper:nth-child(odd) {
  color: #ffffff;
  background-color: #36384c;
}
#About p {
  font-size: 1.125rem;
  line-height: 1.8;
}
#About .grid-row div.image-bg {
  height: 200px;
  margin: 0 0 20px;
}
#About .grid-row div.image-bg:first-child {
  background-image: url('./assets/images/coffee-grid.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
#About .grid-row div.image-bg:nth-child(2) {
  background-image: url('./assets/images/people.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
#About .grid-row div.image-bg:nth-child(3) {
  background-image: url('./assets/images/coffee-grid3.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
#About .grid-row div.image-bg:last-child {
  background-image: url('./assets/images/blackcoffee.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
#Menu .grid-row {
  text-align: center;
}
#Menu .grid-row img {
  width: 100%;
}
#Location .grid-row {
  margin-top: 30px;
}
#Location .grid-row .grid-item {
  margin: 0 10px;
}
#Location .grid-row .grid-item img {
  width: 460px;
}
.block-content.text {
  font-size: 1.125rem;
  padding: 1.5rem 0;
  line-height: 1.8;
}
footer {
  color: #fff;
  padding: 20px 0;
  text-align: center;
  background-color: #36384c;
}
@media only screen and (min-width: 655px) {
  main {
    padding-top: 100px;
  }
  .app-header .header-wrapper .brand-logo {
    height: 80px;
  }
  .app-header .header-wrapper .header-nav {
    display: inline-block;
    float: right;
    padding: 32px 0;
  }
  .app-header .header-wrapper .open-menu {
    display: none;
  }
  aside {
    display: none;
  }
  #Main .full-width {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
  #About .grid-row div.image-bg {
    display: inline-block;
    width: 21%;
    height: 200px;
    margin-left: 12px;
    margin-right: 12px;
  }
  #Menu .grid-item {
    display: inline-block;
    width: 48%;
  }
  #Menu .grid-item:nth-child(odd) {
    float: right;
  }
  #Location .grid-row .grid-item {
    display: inline-block;
    float: left;
  }
  #Location .grid-row .grid-item img {
    width: auto;
  }
}
@media only screen and (min-width: 655px) and (max-width: 990px) {
  #About .grid-row div.image-bg {
    display: inline-block;
    width: 46%;
    margin-left: 10px;
    margin-right: 10px;
  }
}
@media only screen and (min-width: 990px) and (max-width: 1000px) {
  
}
@media only screen and (max-width: 665px) {
  #Main.container {
    min-height: auto;
  }
}
@media only screen and (min-width: 800px) {
  .block-content.text {
    max-width: 80%;
    margin: 0 auto;
  }
}
<header class="app-header">
  <div class="header-wrapper">
    <a class="brand-logo" href="#Main">
      <img src="./assets/images/logo-central-coffee.png"></a>
    <nav class="header-nav">
      <a href="#About">About</a>
      <a href="#Menu">Menu</a>
      <a href="#Location">Location</a>
    </nav>
    <a id="open-menu" class="open-menu" href="#">
      <span></span>
      <span></span>
      <span></span>
    </a>
  </div>
</header>
<aside id="offcanvas" class="offcanvas">
  <div class="offcanvas-content">
    <a id="close-btn" class="close-btn" href="">
      <span></span>
      <span></span>
    </a>
    <a class="offcanvas-item" href="#About">About</a>
    <a class="offcanvas-item" href="#Menu">Menu</a>
    <a class="offcanvas-item" href="#Location">Location</a>
  </div>
</aside>
<main>
  <section id="Main" class="container">
    <div class="overlay"></div>
    <div class="full-width">
      <hgroup>
        <h1>Central Coffee</h1>
        <h3>Bespoke organically-sourced coffee</h3>
      </hgroup>
    </div>

  </section>
  <section id="About" class="block-wrapper">
    <div class="container">
      <div class="block-content text">
        <h2>About</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis urna, a fermentum mauris. Mauris sagittis eu urna at sollicitudin. Sed et dui accumsan, vulputate dui ut, fringilla tellus. Vivamus a ex commodo, vulputate metus gravida,
          congue arcu. Fusce vehicula laoreet lorem vel lacinia. Etiam ac erat turpis. Morbi nec urna aliquet, placerat nisl ac, venenatis justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
        <div class="grid-row">
          <div class="image-bg"></div>
          <div class="image-bg"></div>
          <div class="image-bg"></div>
          <div class="image-bg"></div>
        </div>
      </div>
    </div>
  </section>
  <section id="Menu" class="block-wrapper">
    <div class="container">
      <div class="block-content text">
        <h2>Menu</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis urna, a fermentum mauris. Mauris sagittis eu urna at sollicitudin. Sed et dui accumsan, vulputate dui ut, fringilla tellus. Vivamus a ex commodo, vulputate metus gravida,
          congue arcu. Fusce vehicula laoreet lorem vel lacinia. Etiam ac erat turpis. Morbi nec urna aliquet, placerat nisl ac, venenatis justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="grid-row">
          <div class="grid-item">
            <header>DRINKS</header>
            <img src="./assets/images/food-3249174_640.jpg">
            <div>
              <p>La Catalina (Colombia)</p>
              <p>Guarumales (Ecuador)</p>
              <p>Rukondo (Rwanda)</p>
              <p>Peppermint Tea</p>
              <p>Black tea</p>
            </div>
          </div>
          <div class="grid-item">
            <header>FOOD</header>
            <img src="./assets/images/coffee-3297326_640.jpg">
            <div>
              <p>Frittata (Herb and Veggie, Italian, Corned Beef)</p>
              <p>Breakfast sandwich</p>
              <p>Cobb salad</p>
              <p>Various baked goods</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section id="Location" class="block-wrapper">
    <div class="container">
      <div class="block-content text">
        <h2>Location</h2>
        <div class="grid-row">
          <div class="grid-item">
            <img src="./assets/images/map.png" alt="">
          </div>
          <div class="grid-item">
            <header>Hours</header>
            <p>Mon-Thurs -- 7am - 8pm</p>
            <p>Fri-Sun -- 8am - 10pm</p>
          </div>
        </div>

      </div>
    </div>
  </section>
</main>
<footer> @2018 Central Coffee</footer>

2 ответа

Yahya Essam ответил: 28 апреля 2018 в 09:13

Вы можете добавить некоторые дополнения к каждому разделу следующим образом:

var menuObject = document.getElementById("open-menu");
menuObject.addEventListener('click', function() {
  var asideObject = document.getElementById('offcanvas');
  asideObject.classList.add('open');
})
var closeBtn = document.getElementById('close-btn');
closeBtn.addEventListener('click', function() {
  var asideObject = document.getElementById('offcanvas');
  asideObject.classList.remove('open');
  event.preventDefault();
})
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
a:active,
a:focus,
a:hover,
a:visited {
  text-decoration: none;
}
@font-face {
  font-family: "Lato";
  src: url('./assets/fonts/lato-regular.eot');
  src: url('./assets/fonts/lato-regular.woff') format('woff'), url('./assets/fonts/lato-regular.woff2') format('woff2'), url('./assets/fonts/lato-regular.ttf') format('truetype'), url('./assets/fonts/lato-regular.svg#Lato') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Bitter';
  src: url('./assets/fonts/Bitter-Regular.eot');
  src: url('./assets/fonts/Bitter-Regular.woff') format('woff'), url('./assets/fonts/Bitter-Regular.ttf') format('ttf'), url('./assets/fonts/Bitter-Regular.svg') format('svg');
}
html,
body {
  font-family: 'Lato', Arial, sans-serif;
  line-height: 1;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}
body {
  color: #36384c;
  background-color: #e9dccd;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1;
  margin: 0 0 20px;
}
h1 {
  font-size: 7.5rem;
}
h2 {
  font-size: 2.125rem;
}
h3 {
  font-size: 1.875rem;
}
.app-header {
  position: fixed;
  width: 100%;
  font-size: 1.121rem;
  color: #fff;
  padding: 10px;
  background-color: #36384c;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
  z-index: 1;
}
.app-header .header-wrapper {
  max-width: 1100px;
  margin: 0 auto;
}
.app-header .header-wrapper .brand-logo {
  display: inline-block;
  color: inherit;
  vertical-align: middle;
  width: 150px;
  height: 60px;
}
.app-header .header-wrapper .brand-logo img {
  height: 100%;
}
.app-header .header-wrapper .header-nav {
  display: none;
  margin: 0;
}
.app-header .header-wrapper .header-nav > a {
  color: inherit;
  padding: 0 15px;
}
.app-header .header-wrapper .open-menu {
  display: inline-block;
  position: absolute;
  right: 5px;
  width: 55px;
  top: 16px;
  padding: 12px;
}
.app-header .header-wrapper .open-menu span {
  display: block;
  background-color: #fff;
  height: 2px;
  width: 100%;
  margin-bottom: 8px;
}
aside {
  display: none;
  position: fixed;
  width: 100%;
  height: 100vh;
  font-size: 1.121rem;
  color: #fff;
  padding: 10px;
  background-color: #36384c;
}
aside.open {
  display: block;
  z-index: 10;
}
aside .offcanvas-content {
  margin-top: 10%;
  text-align: center;
}
aside .close-btn {
  display: inline-block;
  width: 44px;
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 10px;
  margin: 10px;
}
aside .close-btn span {
  position: absolute;
  display: block;
  height: 2px;
  width: 100%;
  background-color: #fff;
}
aside .close-btn span:first-child {
  transform: rotate(135deg);
}
aside .close-btn span:last-child {
  transform: rotate(225deg);
}
aside .offcanvas-item {
  color: inherit;
  display: block;
  line-height: 2;
  font-size: 1.25rem;
}
main {
  padding-top: 80px;
}
#Main {
  position: relative;
  background-image: url('./assets/images/coffee.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
#Main.container {
  max-width: none;
}
#Main .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
#Main .full-width {
  position: relative;
  width: 100%;
  color: #fff;
  margin: 0 auto;
  text-align: center;
  margin-top: -2rem;
}
#Main .full-width h1 {
  font-family: Bitter, serif;
  font-weight: normal;
  margin: 0 0 16px;
}
#Main .full-width h2 {
  margin: 0 0 20px;
}
.container {
  width: 100%;
  max-width: 1200px;
  min-height: 600px;
  padding: 40px 30px;
  margin: 0 auto;
}
.block-wrapper:nth-child(odd) {
  color: #ffffff;
  background-color: #36384c;
}
#About p {
  font-size: 1.125rem;
  line-height: 1.8;
}
#About .grid-row div.image-bg {
  height: 200px;
  margin: 0 0 20px;
}
#About .grid-row div.image-bg:first-child {
  background-image: url('./assets/images/coffee-grid.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
#About .grid-row div.image-bg:nth-child(2) {
  background-image: url('./assets/images/people.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
#About .grid-row div.image-bg:nth-child(3) {
  background-image: url('./assets/images/coffee-grid3.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
#About .grid-row div.image-bg:last-child {
  background-image: url('./assets/images/blackcoffee.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
#Menu .grid-row {
  text-align: center;
}
#Menu .grid-row img {
  width: 100%;
}
#Location .grid-row {
  margin-top: 30px;
}
#Location .grid-row .grid-item {
  margin: 0 10px;
}
#Location .grid-row .grid-item img {
  width: 460px;
}
.block-content.text {
  font-size: 1.125rem;
  padding: 1.5rem 0;
  line-height: 1.8;
}
footer {
  color: #fff;
  padding: 20px 0;
  text-align: center;
  background-color: #36384c;
}
@media only screen and (min-width: 655px) {
  main {
    padding-top: 100px;
  }
  .app-header .header-wrapper .brand-logo {
    height: 80px;
  }
  .app-header .header-wrapper .header-nav {
    display: inline-block;
    float: right;
    padding: 32px 0;
  }
  .app-header .header-wrapper .open-menu {
    display: none;
  }
  aside {
    display: none;
  }
  #Main .full-width {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
  #About .grid-row div.image-bg {
    display: inline-block;
    width: 21%;
    height: 200px;
    margin-left: 12px;
    margin-right: 12px;
  }
  #Menu .grid-item {
    display: inline-block;
    width: 48%;
  }
  #Menu .grid-item:nth-child(odd) {
    float: right;
  }
  #Location .grid-row .grid-item {
    display: inline-block;
    float: left;
  }
  #Location .grid-row .grid-item img {
    width: auto;
  }
}
@media only screen and (min-width: 655px) and (max-width: 990px) {
  #About .grid-row div.image-bg {
    display: inline-block;
    width: 46%;
    margin-left: 10px;
    margin-right: 10px;
  }
}
@media only screen and (min-width: 990px) and (max-width: 1000px) {
  
}
@media only screen and (max-width: 665px) {
  #Main.container {
    min-height: auto;
  }
}
@media only screen and (min-width: 800px) {
  .block-content.text {
    max-width: 80%;
    margin: 0 auto;
  }
}
section {
  padding:50px 0;
}
<header class="app-header">
  <div class="header-wrapper">
    <a class="brand-logo" href="#Main">
      <img src="./assets/images/logo-central-coffee.png"></a>
    <nav class="header-nav">
      <a href="#About">About</a>
      <a href="#Menu">Menu</a>
      <a href="#Location">Location</a>
    </nav>
    <a id="open-menu" class="open-menu" href="#">
      <span></span>
      <span></span>
      <span></span>
    </a>
  </div>
</header>
<aside id="offcanvas" class="offcanvas">
  <div class="offcanvas-content">
    <a id="close-btn" class="close-btn" href="">
      <span></span>
      <span></span>
    </a>
    <a class="offcanvas-item" href="#About">About</a>
    <a class="offcanvas-item" href="#Menu">Menu</a>
    <a class="offcanvas-item" href="#Location">Location</a>
  </div>
</aside>
<main>
  <section id="Main" class="container">
    <div class="overlay"></div>
    <div class="full-width">
      <hgroup>
        <h1>Central Coffee</h1>
        <h3>Bespoke organically-sourced coffee</h3>
      </hgroup>
    </div>

  </section>
  <section id="About" class="block-wrapper">
    <div class="container">
      <div class="block-content text">
        <h2>About</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis urna, a fermentum mauris. Mauris sagittis eu urna at sollicitudin. Sed et dui accumsan, vulputate dui ut, fringilla tellus. Vivamus a ex commodo, vulputate metus gravida,
          congue arcu. Fusce vehicula laoreet lorem vel lacinia. Etiam ac erat turpis. Morbi nec urna aliquet, placerat nisl ac, venenatis justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
        <div class="grid-row">
          <div class="image-bg"></div>
          <div class="image-bg"></div>
          <div class="image-bg"></div>
          <div class="image-bg"></div>
        </div>
      </div>
    </div>
  </section>
  <section id="Menu" class="block-wrapper">
    <div class="container">
      <div class="block-content text">
        <h2>Menu</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis urna, a fermentum mauris. Mauris sagittis eu urna at sollicitudin. Sed et dui accumsan, vulputate dui ut, fringilla tellus. Vivamus a ex commodo, vulputate metus gravida,
          congue arcu. Fusce vehicula laoreet lorem vel lacinia. Etiam ac erat turpis. Morbi nec urna aliquet, placerat nisl ac, venenatis justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="grid-row">
          <div class="grid-item">
            <header>DRINKS</header>
            <img src="./assets/images/food-3249174_640.jpg">
            <div>
              <p>La Catalina (Colombia)</p>
              <p>Guarumales (Ecuador)</p>
              <p>Rukondo (Rwanda)</p>
              <p>Peppermint Tea</p>
              <p>Black tea</p>
            </div>
          </div>
          <div class="grid-item">
            <header>FOOD</header>
            <img src="./assets/images/coffee-3297326_640.jpg">
            <div>
              <p>Frittata (Herb and Veggie, Italian, Corned Beef)</p>
              <p>Breakfast sandwich</p>
              <p>Cobb salad</p>
              <p>Various baked goods</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section id="Location" class="block-wrapper">
    <div class="container">
      <div class="block-content text">
        <h2>Location</h2>
        <div class="grid-row">
          <div class="grid-item">
            <img src="./assets/images/map.png" alt="">
          </div>
          <div class="grid-item">
            <header>Hours</header>
            <p>Mon-Thurs -- 7am - 8pm</p>
            <p>Fri-Sun -- 8am - 10pm</p>
          </div>
        </div>

      </div>
    </div>
  </section>
</main>
<footer> @2018 Central Coffee</footer>
suzan ответил: 28 апреля 2018 в 09:35

Вам нужно указать верхний предел класса .block-content.text. Он уменьшит содержимое div и отобразит заголовок этого раздела.

var menuObject = document.getElementById("open-menu");
menuObject.addEventListener('click', function() {
  var asideObject = document.getElementById('offcanvas');
  asideObject.classList.add('open');
})
var closeBtn = document.getElementById('close-btn');
closeBtn.addEventListener('click', function() {
  var asideObject = document.getElementById('offcanvas');
  asideObject.classList.remove('open');
  event.preventDefault();
})
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
a:active,
a:focus,
a:hover,
a:visited {
  text-decoration: none;
}
@font-face {
  font-family: "Lato";
  src: url('./assets/fonts/lato-regular.eot');
  src: url('./assets/fonts/lato-regular.woff') format('woff'), url('./assets/fonts/lato-regular.woff2') format('woff2'), url('./assets/fonts/lato-regular.ttf') format('truetype'), url('./assets/fonts/lato-regular.svg#Lato') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Bitter';
  src: url('./assets/fonts/Bitter-Regular.eot');
  src: url('./assets/fonts/Bitter-Regular.woff') format('woff'), url('./assets/fonts/Bitter-Regular.ttf') format('ttf'), url('./assets/fonts/Bitter-Regular.svg') format('svg');
}
html,
body {
  font-family: 'Lato', Arial, sans-serif;
  line-height: 1;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}
body {
  color: #36384c;
  background-color: #e9dccd;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1;
  margin: 0 0 20px;
}
h1 {
  font-size: 7.5rem;
}
h2 {
  font-size: 2.125rem;
}
h3 {
  font-size: 1.875rem;
}
.app-header {
  position: fixed;
  width: 100%;
  font-size: 1.121rem;
  color: #fff;
  padding: 10px;
  background-color: #36384c;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
  z-index: 1;
}
.app-header .header-wrapper {
  max-width: 1100px;
  margin: 0 auto;
}
.app-header .header-wrapper .brand-logo {
  display: inline-block;
  color: inherit;
  vertical-align: middle;
  width: 150px;
  height: 60px;
}
.app-header .header-wrapper .brand-logo img {
  height: 100%;
}
.app-header .header-wrapper .header-nav {
  display: none;
  margin: 0;
}
.app-header .header-wrapper .header-nav > a {
  color: inherit;
  padding: 0 15px;
}
.app-header .header-wrapper .open-menu {
  display: inline-block;
  position: absolute;
  right: 5px;
  width: 55px;
  top: 16px;
  padding: 12px;
}
.app-header .header-wrapper .open-menu span {
  display: block;
  background-color: #fff;
  height: 2px;
  width: 100%;
  margin-bottom: 8px;
}
aside {
  display: none;
  position: fixed;
  width: 100%;
  height: 100vh;
  font-size: 1.121rem;
  color: #fff;
  padding: 10px;
  background-color: #36384c;
}
aside.open {
  display: block;
  z-index: 10;
}
aside .offcanvas-content {
  margin-top: 10%;
  text-align: center;
}
aside .close-btn {
  display: inline-block;
  width: 44px;
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 10px;
  margin: 10px;
}
aside .close-btn span {
  position: absolute;
  display: block;
  height: 2px;
  width: 100%;
  background-color: #fff;
}
aside .close-btn span:first-child {
  transform: rotate(135deg);
}
aside .close-btn span:last-child {
  transform: rotate(225deg);
}
aside .offcanvas-item {
  color: inherit;
  display: block;
  line-height: 2;
  font-size: 1.25rem;
  margin-top: 20px;
}
main {
  padding-top: 80px;
}
#Main {
  position: relative;
  background-image: url('./assets/images/coffee.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
#Main.container {
  max-width: none;
}
#Main .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
#Main .full-width {
  position: relative;
  width: 100%;
  color: #fff;
  margin: 0 auto;
  text-align: center;
  margin-top: -2rem;
}
#Main .full-width h1 {
  font-family: Bitter, serif;
  font-weight: normal;
  margin: 0 0 16px;
}
#Main .full-width h2 {
  margin: 0 0 20px;
}
.container {
  width: 100%;
  max-width: 1200px;
  min-height: 600px;
  padding: 40px 30px;
  margin: 0 auto;
}
.block-wrapper:nth-child(odd) {
  color: #ffffff;
  background-color: #36384c;
}
#About p {
  font-size: 1.125rem;
  line-height: 1.8;
}
#About .grid-row div.image-bg {
  height: 200px;
  margin: 0 0 20px;
}
#About .grid-row div.image-bg:first-child {
  background-image: url('./assets/images/coffee-grid.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
#About .grid-row div.image-bg:nth-child(2) {
  background-image: url('./assets/images/people.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
#About .grid-row div.image-bg:nth-child(3) {
  background-image: url('./assets/images/coffee-grid3.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
#About .grid-row div.image-bg:last-child {
  background-image: url('./assets/images/blackcoffee.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
#Menu .grid-row {
  text-align: center;
}
#Menu .grid-row img {
  width: 100%;
}
#Location .grid-row {
  margin-top: 30px;
}
#Location .grid-row .grid-item {
  margin: 0 10px;
}
#Location .grid-row .grid-item img {
  width: 460px;
}
.block-content.text {
  font-size: 1.125rem;
  padding: 1.5rem 0;
  line-height: 1.8;
  margin-top: 45px;
}
footer {
  color: #fff;
  padding: 20px 0;
  text-align: center;
  background-color: #36384c;
}
@media only screen and (min-width: 655px) {
  main {
    padding-top: 100px;
  }
  .app-header .header-wrapper .brand-logo {
    height: 80px;
  }
  .app-header .header-wrapper .header-nav {
    display: inline-block;
    float: right;
    padding: 32px 0;
  }
  .app-header .header-wrapper .open-menu {
    display: none;
  }
  aside {
    display: none;
  }
  #Main .full-width {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
  #About .grid-row div.image-bg {
    display: inline-block;
    width: 21%;
    height: 200px;
    margin-left: 12px;
    margin-right: 12px;
  }
  #Menu .grid-item {
    display: inline-block;
    width: 48%;
  }
  #Menu .grid-item:nth-child(odd) {
    float: right;
  }
  #Location .grid-row .grid-item {
    display: inline-block;
    float: left;
  }
  #Location .grid-row .grid-item img {
    width: auto;
  }
}
@media only screen and (min-width: 655px) and (max-width: 990px) {
  #About .grid-row div.image-bg {
    display: inline-block;
    width: 46%;
    margin-left: 10px;
    margin-right: 10px;
  }
}
@media only screen and (min-width: 990px) and (max-width: 1000px) {
  
}
@media only screen and (max-width: 665px) {
  #Main.container {
    min-height: auto;
  }
}
@media only screen and (min-width: 800px) {
  .block-content.text {
    max-width: 80%;
    margin: 0 auto;

  }
}
<header class="app-header">
  <div class="header-wrapper">
    <a class="brand-logo" href="#Main">
      <img src="./assets/images/logo-central-coffee.png"></a>
    <nav class="header-nav">
      <a href="#About">About</a>
      <a href="#Menu">Menu</a>
      <a href="#Location">Location</a>
    </nav>
    <a id="open-menu" class="open-menu" href="#">
      <span></span>
      <span></span>
      <span></span>
    </a>
  </div>
</header>
<aside id="offcanvas" class="offcanvas">
  <div class="offcanvas-content">
    <a id="close-btn" class="close-btn" href="">
      <span></span>
      <span></span>
    </a>
    <a class="offcanvas-item" href="#About">About</a>
    <a class="offcanvas-item" href="#Menu">Menu</a>
    <a class="offcanvas-item" href="#Location">Location</a>
  </div>
</aside>
<main>
  <section id="Main" class="container">
    <div class="overlay"></div>
    <div class="full-width">
      <hgroup>
        <h1>Central Coffee</h1>
        <h3>Bespoke organically-sourced coffee</h3>
      </hgroup>
    </div>

  </section>
  <section id="About" class="block-wrapper">
    <div class="container">
      <div class="block-content text">
        <h2>About</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis urna, a fermentum mauris. Mauris sagittis eu urna at sollicitudin. Sed et dui accumsan, vulputate dui ut, fringilla tellus. Vivamus a ex commodo, vulputate metus gravida,
          congue arcu. Fusce vehicula laoreet lorem vel lacinia. Etiam ac erat turpis. Morbi nec urna aliquet, placerat nisl ac, venenatis justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
        <div class="grid-row">
          <div class="image-bg"></div>
          <div class="image-bg"></div>
          <div class="image-bg"></div>
          <div class="image-bg"></div>
        </div>
      </div>
    </div>
  </section>
  <section id="Menu" class="block-wrapper">
    <div class="container">
      <div class="block-content text">
        <h2>Menu</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis urna, a fermentum mauris. Mauris sagittis eu urna at sollicitudin. Sed et dui accumsan, vulputate dui ut, fringilla tellus. Vivamus a ex commodo, vulputate metus gravida,
          congue arcu. Fusce vehicula laoreet lorem vel lacinia. Etiam ac erat turpis. Morbi nec urna aliquet, placerat nisl ac, venenatis justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="grid-row">
          <div class="grid-item">
            <header>DRINKS</header>
            <img src="./assets/images/food-3249174_640.jpg">
            <div>
              <p>La Catalina (Colombia)</p>
              <p>Guarumales (Ecuador)</p>
              <p>Rukondo (Rwanda)</p>
              <p>Peppermint Tea</p>
              <p>Black tea</p>
            </div>
          </div>
          <div class="grid-item">
            <header>FOOD</header>
            <img src="./assets/images/coffee-3297326_640.jpg">
            <div>
              <p>Frittata (Herb and Veggie, Italian, Corned Beef)</p>
              <p>Breakfast sandwich</p>
              <p>Cobb salad</p>
              <p>Various baked goods</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section id="Location" class="block-wrapper">
    <div class="container">
      <div class="block-content text">
        <h2>Location</h2>
        <div class="grid-row">
          <div class="grid-item">
            <img src="./assets/images/map.png" alt="">
          </div>
          <div class="grid-item">
            <header>Hours</header>
            <p>Mon-Thurs -- 7am - 8pm</p>
            <p>Fri-Sun -- 8am - 10pm</p>
          </div>
        </div>

      </div>
    </div>
  </section>
</main>
<footer> @2018 Central Coffee</footer>