6-jQuery full screen section start

6-jQuery full screen section start.markdown

6-jQuery full screen section start

Forked from glenda drew's Pen target practice complete.

A Pen by Spencer Mathews on CodePen.

License.

index.html

<nav>
  <ul>
    <li><a href="" class="link" id="eat">EAT.</a></li>
    <li><a href="" class="link" id="sleep">SLEEP.</a></li>
    <li><a href="" class="link" id="design">DESIGN.</a></li>
  </ul>
</nav>

<section id="overlay">
  <p>hi!</p>
  <div id="close">x</div>
</section>

script.js

$(function() {
  console.log('ready'),

    $('#design').click(function() {
      console.log('click');
      $('section#overlay').css('visibility', 'visible');
      return false;
    }) 
  
   // add a click event for the close button

});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

   * {
     margin: 0;
     padding: 0;
   }
   
   body {
     font-family: Verdana;
     background-color: #1c5284;
   }
   
   a {
     font-size: 72px;
     color: #0e7bae;
     text-decoration: none;
   }
   
   a:hover {
     color: white;
   }
   
   ul {
     width: 8in;
     margin: 0px auto;
     text-align: center;
     margin-top: 72px;
   }
   
   li {
     display: inline-block;
   }
   
   li:hover {
     color: white;
   }
   
   section#overlay {
     font-size: 40px;
     color: white;
     position: absolute;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100%;
      background-color: rgba(50, 50, 50, .8);
     visibility:hidden;
   }
   
   section#overlay p {
     text-align: center;
     position: relative;
     top: 200px;
   }
   
   section#overlay div#close {
     position: absolute;
     right: 50px;
     top:50px;
     width:50px;
     height:55px;
     border: 1px white solid;
     text-align:center;
   }

   section#overlay div#close:hover {
     background-color:orange;
}