/index.html

## index.html
<html lang="eng-US">

<head>
  <meta charset="UTF-8">
  <title>SpideyBeats - Home</title>
  <link type="text/css" rel="stylesheet" href="css/style.css">
  <meta name="author" content="Casey Heath, Exhibit Arts | 2016">
  <link type="text/css" rel="stylesheet" href="css/mediascreen1279px.css">
  <link type="text/css" rel="stylesheet" href="css/mediascreen1023px.css">
  <link type="text/css" rel="stylesheet" href="css/mediascreen830px.css">
  <link type="text/css" rel="stylesheet" href="css/mediascreen767px.css">
  <link type="text/css" rel="stylesheet" href="css/mediascreen420px.css">
  <link type="text/css" rel="stylesheet" href="css/mediascreen320px.css">
  <link type="image/png" rel="icon" href="images/spidey-favicon.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="keywords" content="Chillstep, Rap, RnB, Dubstep, Inspirational, Music, Party, DJ">
  <meta name="description" content="Displaying the best musical content of 2016. Get free chillstep and inspirational party music.">
  <style>
    input[type='text'] {
      font-weight: bold;
    }
  </style>
  <style>
    input[type='password'] {
      font-weight: bold;
    }
  </style>
  <style>
    /* Login Form Style Start */

    #btnfrm {
      width: 100px;
      height: 30px;
      border-radius: 3px;
      position: absolute;
      background: #D5E4E6;
      color: #53A1E1;
      text-transform: uppercase;
      font-family: 'Open Sans';
      box-shadow: 0px 0px 8px #C7AFAF;
      box-sizing: content-box;
      text-align: -webkit-center;
      border-bottom: 4px solid #53a1e1;
      border-top: 1px solid #C7D4D6;
      border-left: 1px solid #C7D4D6;
      border-right: 1px solid #C7D4D6;
      right: 381px;
      top: 285px;
    }

    em {
      position: relative;
      font-size: 40px;
      right: 5px;
      top: -27px;
      font-style: normal;
      width: 100%;
      left: -6px;
    }

    #txtfield {
      background: #D5E4E6;
      border-bottom: 4px solid #53a1e1;
      border-top: 1px solid #C7D4D6;
      border-left: 1px solid #C7D4D6;
      border-right: 1px solid #C7D4D6;
      box-shadow: 0px 0px 8px #C7AFAF;
      color: #ABAEBD;
      padding: 8px;
      border-radius: 3px;
      font-family: 'Open Sans';
      position: absolute;
      right: 380px;
      top: 235px;
      width: 299px;
      height: 17px;
    }

    .btnfrmcode-text {
      font-family: 'Open Sans';
      position: absolute;
      text-transform: uppercase;
      right: 349px;
      text-align: -webkit-center;
      margin: auto;
      top: 0px;
      font-size: 40px;
      color: #1581BC;
      background: #000000;
      padding: 71px;
      width: 238px;
      height: 56px;
      border-bottom: 1px solid #A8C3D8;
      box-shadow: 0px 0px 15px 0px #53A1E1;
      opacity: 0.86;
    }

    #pwrd {
      background: #D5E4E6;
      border-bottom: 4px solid #53a1e1;
      border-top: 1px solid #C7D4D6;
      border-left: 1px solid #C7D4D6;
      border-right: 1px solid #C7D4D6;
      box-shadow: 0px 0px 8px #C7AFAF;
      color: #00457d;
      padding: 8px;
      padding-right: 46px;
      border-radius: 3px;
      font-family: 'Open Sans';
      position: absolute;
      top: 285px;
      right: 508px;
      width: 132px;
      height: 16px;
    }

    .form {
      right: -729px;
      position: relative;
      float: left;
    }

    .login-container {
      background: #EBF0F1;
      width: 380px;
      height: 400px;
      position: absolute;
      top: 369px;
      z-index: -1;
      right: 39%;
      right: 37%;
      border-bottom: 4px solid #53A1E1;
      border-right: 4px solid #53A1E1;
      border-left: 4px solid #53A1E1;
      border-top: 4px solid #53A1E1;
      box-shadow: 0px 0px 11px 0px #155B94;
      z-index: 2;
    }

    #createaccount {
      background: #D5E4E6;
      border-bottom: 4px solid #20C361;
      border-top: 1px solid #C7D4D6;
      border-left: 1px solid #C7D4D6;
      border-right: 1px solid #C7D4D6;
      box-shadow: 0px 0px 8px #C7AFAF;
      color: #00457d;
      padding: 8px;
      border-radius: 3px;
      font-family: 'Open Sans';
      position: absolute;
      right: 381px;
      top: 335px;
      width: 316px;
      height: 40px;
    }

    .fillinthebox {
      position: absolute;
      right: 400px;
      top: 200px;
      font-size: 10.5px;
      font-family: 'Open Sans';
      text-transform: uppercase;
      text-align: -webkit-center;
      display: inline;
      white-space: nowrap;
      overflow: hidden;
    }

    #txtfield:hover {
      border-top: 2px solid #C7D4D6;
      border-left: 2px solid #C7D4D6;
      border-right: 2px solid #C7D4D6;
    }

    #btnfrm:hover {
      border-top: 2px solid #C7D4D6;
      border-left: 2px solid #C7D4D6;
      border-right: 2px solid #C7D4D6;
      color: #00457d;
    }

    #pwrd:hover {
      border-top: 2px solid #C7D4D6;
      border-left: 2px solid #C7D4D6;
      border-right: 2px solid #C7D4D6;
      color: #00457d;
    }

    #txtfield:active {
      border-top: 3px solid #C7D4D6;
      border-left: 3px solid #C7D4D6;
      border-right: 3px solid #C7D4D6;
    }

    #btnfrm:active {
      border-top: 3px solid #C7D4D6;
      border-left: 3px solid #C7D4D6;
      border-right: 3px solid #C7D4D6;
    }

    #pwrd:active {
      border-top: 3px solid #C7D4D6;
      border-left: 3px solid #C7D4D6;
      border-right: 3px solid #C7D4D6;
    }

    #createaccount:hover {
      color: #53A1E1;
      border-top: 2.8px solid #C7D4D6;
      border-left: 2.8px solid #C7D4D6;
      border-right: 2.8px solid #C7D4D6;
    }

    :focus {
      outline-color: #20C361;
      outline-style: 4px solid;
    }

    .forminput-container {
      top: -5px;
      position: absolute;
    }
    /* Login Form Style End */
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
    $(function() { // This will select everything with the class smoothScroll // This should prevent problems with carousel, scrollspy, etc...
      $.smoothScroll('.smoothScroll').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
          var target = $(this.hash);
          target = target.length ? target : $.smoothScroll('[name=' + this.hash.slice(1) + ']');
          if (target.length) {
            $('html,body').animate({
              scrollTop: target.offset().top
            }, 100); // The number here represents the speed of the scroll in milliseconds
            return false;
          }
        }
      });
    });
  </script>
</head>

<body class="spbeats-body">
  <div class="topwrapper">
    <a href="#" target="_blank" title="SpideyBeats">
      <div class="spiderweb">
        <img class="spidey-logo" alt="logo" src="http://dreamsupload.byethost8.com/images/spidey-logo.png" />
        <h1 class="spidey-title">Spidey <em>Beats</em></h1>
      </div>
    </a>
    <div class="searchnavlinks-wrapper">
      <div class="navlinks-righttop">

        <!-- Smooth Scroll Link -->
        <a class="smoothScroll" href="#follow" id="licenceagree-link">Licence</a>
        <a class="smoothScroll" href="#" id="ourmusic-link">Our Music</a>
        <a class="smoothScroll" href="#" id="contactus-link">Contact Us</a>
      </div>
      <a href="#" title="Search">
        <div class="search">
          <img class="search-magnify" src="http://dreamsupload.byethost8.com/images/magnify-blue.png" />
          <img class="magnify-white" src="http://dreamsupload.byethost8.com/images/magnify.png" />
      </a>
      </div>
    </div>
    <div class="grungetop-container">
      <span class="lorem">"The web (site) of beats....<br> I love it!"</span>
      <img class="grungetop" src="http://dreamsupload.byethost8.com/images/grunge101.png" />
      <input type="button" id="subscribe" name="subscribe" value="Subscribe for updates" />
      <!-- Login Form Start -->
      <div class="form-container">
        <div class="login-container">
          <form class="form" type="text" name="namehere" value="namehere" width=100px "; height="30px ">
            <h1 class="btnfrmcode-text "><em>Join the community</em></h1>
            <p class="fillinthebox ">*Fill in the the boxes with your correct login info.</p>
            <div class="forminput-container ">
                <input type="text " name="txtfield " id="txtfield " onblur="if(this.placeholder=='' ){this.placeholder='Username' ;} "
                onfocus="if(this.placeholder=='Username' ) {this.placeholder='' ; this.style.color='#20c361' ;} " placeholder="Username "/>
                <input type="password " name="pwrd " id="pwrd " onblur="if(this.placeholder=='' ){this.placeholder='Password' ;} "
                onfocus="if(this.placeholder=='Password' ) {this.placeholder='' ; this.style.color='#20c361' ;} " placeholder="Password "/>
                <input type="button " id="btnfrm " name="sign in " value="Login "/>
                <a target="_blank " alt="have an account? " href="http://dreamsupload.byethost8.com/signup.htm ">
                <input type="button " id="createaccount " name="createaccount " value="Create an account "/></a>
            </div>
          </div>
       </form>
       </div>
        <!-- Login Form End -->
        </div>
       </div>
       <div id="follow " class="social ">
           <img class="floral-pattern " src="http://dreamsupload.byethost8.com/images/bgpattern-floral.jpg "/>
       </div>
       <div id="licence " class="imagelinkpattern ">
           <img class="linkpattern " src="http://dreamsupload.byethost8.com/images/linkpattern.jpg ">
           <img class="linkpattern2 " src="http://dreamsupload.byethost8.com/images/linkpattern.jpg ">
           <img class="linkpattern3 " src="http://dreamsupload.byethost8.com/images/linkpattern.jpg ">
       </div>
    </body>
</html>

## script.js
 $(function() { // This will select everything with the class smoothScroll // This should prevent problems with carousel, scrollspy, etc...
   $.smoothScroll('.smoothScroll').click(function() {
     if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
       var target = $(this.hash);
       target = target.length ? target : $.smoothScroll('[name=' + this.hash.slice(1) + ']');
       if (target.length) {
         $('html,body').animate({
           scrollTop: target.offset().top
         }, 100); // The number here represents the speed of the scroll in milliseconds
         return false;
       }
     }
   });
 });

## style.css
   /* Designed and developed by */
   /* Casey Heath, Exhibit Arts - 2016 */
   /*          Vist my website https://www.dreamsupload.byethost8.com */

   @import url(https://fonts.googleapis.com/css?family=Open+Sans);
   .spbeats-body {
     width: 960px;
     margin: auto;
   }

   em {
     position: relative;
     font-size: 40px;
     right: 5px;
     top: -27px;
     font-style: normal;
     width: 100%;
     left: -6px;
     /* color: #176AAF; */
   }
   /* Top Navigation Start */

   .topwrapper {
     background: #1B1A1A;
     width: 100%;
     height: 70px;
     float: left;
     left: 0px;
     position: absolute;
     z-index: 1;
     border-bottom: 1px solid rgb(29, 67, 89);
   }

   .spiderweb {
     left: 25px;
     width: 158px;
     height: 50px;
     float: left;
     top: 8px;
     position: absolute;
     margin: auto;
     z-index: 1;
   }

   .spidey-logo {
     width: 40px;
     top: 5px;
     left: 5px;
     position: absolute;
   }

   .spidey-title {
     color: white;
     font-family: 'Open Sans';
     text-transform: uppercase;
     font-size: 15px;
     left: 50px;
     padding: 5px;
     position: absolute;
   }

   .spidey-title em {
     color: #1582bd;
     font-size: 15px;
     left: 55px;
     font-weight: normal;
     position: absolute;
     top: 5px;
   }

   .navlinks-righttop {
     right: 145.5px;
     position: absolute;
     top: 0px;
   }

   #licenceagree-link {
     color: white;
     font-family: 'Open Sans';
     font-size: 14px;
     text-transform: uppercase;
     right: 150px;
     position: absolute;
     top: 28px;
     text-decoration: none;
   }

   #licenceagree-link:hover {
     background: #1582bd;
     width: 75px;
     height: 40px;
     padding-top: 30px;
     top: -3px;
     text-align: center;
     position: absolute;
     right: 140px;
     opacity: 0.9;
     border-bottom: 3px solid #7ec2e7;
   }

   #ourmusic-link {
     color: white;
     font-family: 'Open Sans';
     top: 27.5px;
     width: 100px;
     font-size: 14px;
     position: absolute;
     right: 35px;
     text-transform: uppercase;
     text-decoration: none;
     text-align: -webkit-center;
   }

   #ourmusic-link:hover {
     background: #1582bd;
     width: 100px;
     height: 40px;
     padding-top: 30px;
     top: -3px;
     text-align: center;
     position: absolute;
     right: 35px;
     opacity: 0.9;
     border-bottom: 3px solid #7ec2e7;
   }

   #contactus-link {
     color: white;
     font-family: 'Open Sans';
     text-decoration: none;
     text-transform: uppercase;
     font-size: 14px;
     position: absolute;
     width: 100px;
     top: 28px;
     right: -79px;
   }

   #contactus-link:hover {
     background: #1582bd;
     width: 100px;
     height: 40px;
     padding-top: 30px;
     top: -3px;
     text-align: center;
     position: absolute;
     right: -71px;
     opacity: 0.9;
     border-bottom: 3px solid #7ec2e7;
   }

   .searchnavlinks-wrapper {
     right: 30px;
     position: absolute;
     z-index: 1;
   }

   .search {
     right: 35px;
     top: 30px;
     position: absolute;
   }

   .search-magnify {
     width: 15px;
     top: -5.6px;
     right: -10px;
     height: 15px;
     position: absolute;
     z-index: 0;
     padding: 7px;
   }

   .magnify-white {
     width: 15px;
     top: 0.5px;
     right: 0px;
     position: initial;
     opacity: 0;
   }

   .magnify-white:hover {
     opacity: 0.9;
     position: absolute;
     background: #1582db;
     padding: 27px;
     padding-top: 40px;
     top: -40px;
     right: -30px;
     height: 15px;
     width: 15px;
     border-bottom: 3px solid #7ec2e7;
     padding-bottom: 22px;
   }
   /* Search Dropdown Start */

   .dropdown:hover .dropdown-search-content {
     display: block;
   }
   /* Search Dropdown End */
   /* Top Navigation End */
   /* Top Grunge Start */

   .grungetop-container {
     float: left;
   }

   .grungetop {
     top: 71px;
     position: absolute;
     left: 0px;
     width: 100%;
     float: left;
     height: 500px;
     box-shadow: 0px 5px 10px -5px #000000;
   }

   .lorem {
     color: white;
     font-family: 'Open Sans';
     font-size: 30px;
     text-transform: uppercase;
     text-align: -webkit-center;
     top: 180px;
     position: absolute;
     z-index: 1;
     right: 470px;
   }

   #subscribe {
     background: none;
     border: 1px solid #053C5B;
     border-radius: 5px;
     top: 302px;
     position: absolute;
     text-align: -webkit-center;
     width: 30.3%;
     height: 70%;
     text-transform: uppercase;
     color: white;
     left: 410px;
     padding-left: 0px;
   }

   #subscribe:focus {
     outline: 1px solid #053C5B;
     border-radius: 0px;
     background: #1b2833;
     box-shadow: 0px 0px 11px 0px #155B94;
   }

   input:focus {
     outline: 1px solid #53A1E1;
     border-radius: 0px;
   }
   /* Top Grunge End */
   /* Licence Start */

   #licence {
     background: #52A0E1;
     width: 100%;
     height: 1200px;
     top: 700px;
     float: left;
     z-index: 0;
     position: absolute;
     right: 0px;
   }
   /* Licence End */
   /* Social Start */

   .social {
     background: #E7ECEE;
     width: 100%;
     height: 150px;
     top: 571px;
     right: 0%;
     position: absolute;
   }

   .follow-us {
     color: #147AB2;
     font-family: 'Open Sans';
     position: absolute;
     top: 45px;
     right: 1020px;
     text-transform: uppercase;
     font-weight: bold;
   }

   .floral-pattern {
     width: 100%;
     height: 150px;
     opacity: .9;
   }

   .linkpattern {
     width: 100%;
     position: absolute;
     z-index: 0;
     height: 400px;
     top: 400px;
     opacity: .4;
   }

   .linkpattern2 {
     width: 100%;
     position: absolute;
     z-index: 0;
     height: 400px;
     top: 0px;
     opacity: .4;
   }

   .linkpattern3 {
     width: 100%;
     position: absolute;
     z-index: 0;
     height: 400px;
     top: 800px;
     opacity: .4;
   }
   /* Social End */

   @media screen and (max-width: 1140px) {
     .welcome-msg-welcome {
       color: white;
       position: absolute;
       z-index: 1;
       font-size: 300%;
       font-family: 'Open Sans';
       text-transform: uppercase;
       text-align: -webkit-center;
       top: 220px;
       right: 320px;
       width: 100%;
       left: 0px;
     }
   }

   @media screen and (max-width: 600px) {
     .welcome-msg-welcome {
       color: white;
       position: absolute;
       z-index: 1;
       font-size: 300%;
       font-family: 'Open Sans';
       text-transform: uppercase;
       text-align: -webkit-center;
       top: 220px;
       width: 100%;
       left: 0px;
     }
     .grungetop {
       padding: 0px;
       top: 71px;
       position: absolute;
       width: 10px;
       z-index: -1;
     }
     .searchnavlinks-wrapper {
       visibility: hidden !important;
     }
   }

## zrePKz.markdown

      
    Raw
  

              zrePKz.markdown
            
          
    zrePKz

A Pen by Exhibit Arts on CodePen.
License.
	<html lang="eng-US">

	<head>
	<meta charset="UTF-8">
	<title>SpideyBeats - Home</title>
	<link type="text/css" rel="stylesheet" href="css/style.css">
	<meta name="author" content="Casey Heath, Exhibit Arts \| 2016">
	<link type="text/css" rel="stylesheet" href="css/mediascreen1279px.css">
	<link type="text/css" rel="stylesheet" href="css/mediascreen1023px.css">
	<link type="text/css" rel="stylesheet" href="css/mediascreen830px.css">
	<link type="text/css" rel="stylesheet" href="css/mediascreen767px.css">
	<link type="text/css" rel="stylesheet" href="css/mediascreen420px.css">
	<link type="text/css" rel="stylesheet" href="css/mediascreen320px.css">
	<link type="image/png" rel="icon" href="images/spidey-favicon.png">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="keywords" content="Chillstep, Rap, RnB, Dubstep, Inspirational, Music, Party, DJ">
	<meta name="description" content="Displaying the best musical content of 2016. Get free chillstep and inspirational party music.">
	<style>
	input[type='text'] {
	font-weight: bold;
	}
	</style>
	<style>
	input[type='password'] {
	font-weight: bold;
	}
	</style>
	<style>
	/* Login Form Style Start */

	#btnfrm {
	width: 100px;
	height: 30px;
	border-radius: 3px;
	position: absolute;
	background: #D5E4E6;
	color: #53A1E1;
	text-transform: uppercase;
	font-family: 'Open Sans';
	box-shadow: 0px 0px 8px #C7AFAF;
	box-sizing: content-box;
	text-align: -webkit-center;
	border-bottom: 4px solid #53a1e1;
	border-top: 1px solid #C7D4D6;
	border-left: 1px solid #C7D4D6;
	border-right: 1px solid #C7D4D6;
	right: 381px;
	top: 285px;
	}

	em {
	position: relative;
	font-size: 40px;
	right: 5px;
	top: -27px;
	font-style: normal;
	width: 100%;
	left: -6px;
	}

	#txtfield {
	background: #D5E4E6;
	border-bottom: 4px solid #53a1e1;
	border-top: 1px solid #C7D4D6;
	border-left: 1px solid #C7D4D6;
	border-right: 1px solid #C7D4D6;
	box-shadow: 0px 0px 8px #C7AFAF;
	color: #ABAEBD;
	padding: 8px;
	border-radius: 3px;
	font-family: 'Open Sans';
	position: absolute;
	right: 380px;
	top: 235px;
	width: 299px;
	height: 17px;
	}

	.btnfrmcode-text {
	font-family: 'Open Sans';
	position: absolute;
	text-transform: uppercase;
	right: 349px;
	text-align: -webkit-center;
	margin: auto;
	top: 0px;
	font-size: 40px;
	color: #1581BC;
	background: #000000;
	padding: 71px;
	width: 238px;
	height: 56px;
	border-bottom: 1px solid #A8C3D8;
	box-shadow: 0px 0px 15px 0px #53A1E1;
	opacity: 0.86;
	}

	#pwrd {
	background: #D5E4E6;
	border-bottom: 4px solid #53a1e1;
	border-top: 1px solid #C7D4D6;
	border-left: 1px solid #C7D4D6;
	border-right: 1px solid #C7D4D6;
	box-shadow: 0px 0px 8px #C7AFAF;
	color: #00457d;
	padding: 8px;
	padding-right: 46px;
	border-radius: 3px;
	font-family: 'Open Sans';
	position: absolute;
	top: 285px;
	right: 508px;
	width: 132px;
	height: 16px;
	}

	.form {
	right: -729px;
	position: relative;
	float: left;
	}

	.login-container {
	background: #EBF0F1;
	width: 380px;
	height: 400px;
	position: absolute;
	top: 369px;
	z-index: -1;
	right: 39%;
	right: 37%;
	border-bottom: 4px solid #53A1E1;
	border-right: 4px solid #53A1E1;
	border-left: 4px solid #53A1E1;
	border-top: 4px solid #53A1E1;
	box-shadow: 0px 0px 11px 0px #155B94;
	z-index: 2;
	}

	#createaccount {
	background: #D5E4E6;
	border-bottom: 4px solid #20C361;
	border-top: 1px solid #C7D4D6;
	border-left: 1px solid #C7D4D6;
	border-right: 1px solid #C7D4D6;
	box-shadow: 0px 0px 8px #C7AFAF;
	color: #00457d;
	padding: 8px;
	border-radius: 3px;
	font-family: 'Open Sans';
	position: absolute;
	right: 381px;
	top: 335px;
	width: 316px;
	height: 40px;
	}

	.fillinthebox {
	position: absolute;
	right: 400px;
	top: 200px;
	font-size: 10.5px;
	font-family: 'Open Sans';
	text-transform: uppercase;
	text-align: -webkit-center;
	display: inline;
	white-space: nowrap;
	overflow: hidden;
	}

	#txtfield:hover {
	border-top: 2px solid #C7D4D6;
	border-left: 2px solid #C7D4D6;
	border-right: 2px solid #C7D4D6;
	}

	#btnfrm:hover {
	border-top: 2px solid #C7D4D6;
	border-left: 2px solid #C7D4D6;
	border-right: 2px solid #C7D4D6;
	color: #00457d;
	}

	#pwrd:hover {
	border-top: 2px solid #C7D4D6;
	border-left: 2px solid #C7D4D6;
	border-right: 2px solid #C7D4D6;
	color: #00457d;
	}

	#txtfield:active {
	border-top: 3px solid #C7D4D6;
	border-left: 3px solid #C7D4D6;
	border-right: 3px solid #C7D4D6;
	}

	#btnfrm:active {
	border-top: 3px solid #C7D4D6;
	border-left: 3px solid #C7D4D6;
	border-right: 3px solid #C7D4D6;
	}

	#pwrd:active {
	border-top: 3px solid #C7D4D6;
	border-left: 3px solid #C7D4D6;
	border-right: 3px solid #C7D4D6;
	}

	#createaccount:hover {
	color: #53A1E1;
	border-top: 2.8px solid #C7D4D6;
	border-left: 2.8px solid #C7D4D6;
	border-right: 2.8px solid #C7D4D6;
	}

	:focus {
	outline-color: #20C361;
	outline-style: 4px solid;
	}

	.forminput-container {
	top: -5px;
	position: absolute;
	}
	/* Login Form Style End */
	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
	$(function() { // This will select everything with the class smoothScroll // This should prevent problems with carousel, scrollspy, etc...
	$.smoothScroll('.smoothScroll').click(function() {
	if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
	var target = $(this.hash);
	target = target.length ? target : $.smoothScroll('[name=' + this.hash.slice(1) + ']');
	if (target.length) {
	$('html,body').animate({
	scrollTop: target.offset().top
	}, 100); // The number here represents the speed of the scroll in milliseconds
	return false;
	}
	}
	});
	});
	</script>
	</head>

	<body class="spbeats-body">
	<div class="topwrapper">
	<a href="#" target="_blank" title="SpideyBeats">
	<div class="spiderweb">
	<img class="spidey-logo" alt="logo" src="http://dreamsupload.byethost8.com/images/spidey-logo.png" />
	<h1 class="spidey-title">Spidey <em>Beats</em></h1>
	</div>
	</a>
	<div class="searchnavlinks-wrapper">
	<div class="navlinks-righttop">

	<!-- Smooth Scroll Link -->
	<a class="smoothScroll" href="#follow" id="licenceagree-link">Licence</a>
	<a class="smoothScroll" href="#" id="ourmusic-link">Our Music</a>
	<a class="smoothScroll" href="#" id="contactus-link">Contact Us</a>
	</div>
	<a href="#" title="Search">
	<div class="search">
	<img class="search-magnify" src="http://dreamsupload.byethost8.com/images/magnify-blue.png" />
	<img class="magnify-white" src="http://dreamsupload.byethost8.com/images/magnify.png" />
	</a>
	</div>
	</div>
	<div class="grungetop-container">
	<span class="lorem">"The web (site) of beats....<br> I love it!"</span>
	<img class="grungetop" src="http://dreamsupload.byethost8.com/images/grunge101.png" />
	<input type="button" id="subscribe" name="subscribe" value="Subscribe for updates" />
	<!-- Login Form Start -->
	<div class="form-container">
	<div class="login-container">
	<form class="form" type="text" name="namehere" value="namehere" width=100px "; height="30px ">
	<h1 class="btnfrmcode-text "><em>Join the community</em></h1>
	<p class="fillinthebox ">*Fill in the the boxes with your correct login info.</p>
	<div class="forminput-container ">
	<input type="text " name="txtfield " id="txtfield " onblur="if(this.placeholder=='' ){this.placeholder='Username' ;} "
	onfocus="if(this.placeholder=='Username' ) {this.placeholder='' ; this.style.color='#20c361' ;} " placeholder="Username "/>
	<input type="password " name="pwrd " id="pwrd " onblur="if(this.placeholder=='' ){this.placeholder='Password' ;} "
	onfocus="if(this.placeholder=='Password' ) {this.placeholder='' ; this.style.color='#20c361' ;} " placeholder="Password "/>
	<input type="button " id="btnfrm " name="sign in " value="Login "/>
	<a target="_blank " alt="have an account? " href="http://dreamsupload.byethost8.com/signup.htm ">
	<input type="button " id="createaccount " name="createaccount " value="Create an account "/></a>
	</div>
	</div>
	</form>
	</div>
	<!-- Login Form End -->
	</div>
	</div>
	<div id="follow " class="social ">
	<img class="floral-pattern " src="http://dreamsupload.byethost8.com/images/bgpattern-floral.jpg "/>
	</div>
	<div id="licence " class="imagelinkpattern ">
	<img class="linkpattern " src="http://dreamsupload.byethost8.com/images/linkpattern.jpg ">
	<img class="linkpattern2 " src="http://dreamsupload.byethost8.com/images/linkpattern.jpg ">
	<img class="linkpattern3 " src="http://dreamsupload.byethost8.com/images/linkpattern.jpg ">
	</div>
	</body>
	</html>
	/* Designed and developed by */
	/* Casey Heath, Exhibit Arts - 2016 */
	/* Vist my website https://www.dreamsupload.byethost8.com */

	@import url(https://fonts.googleapis.com/css?family=Open+Sans);
	.spbeats-body {
	width: 960px;
	margin: auto;
	}

	em {
	position: relative;
	font-size: 40px;
	right: 5px;
	top: -27px;
	font-style: normal;
	width: 100%;
	left: -6px;
	/* color: #176AAF; */
	}
	/* Top Navigation Start */

	.topwrapper {
	background: #1B1A1A;
	width: 100%;
	height: 70px;
	float: left;
	left: 0px;
	position: absolute;
	z-index: 1;
	border-bottom: 1px solid rgb(29, 67, 89);
	}

	.spiderweb {
	left: 25px;
	width: 158px;
	height: 50px;
	float: left;
	top: 8px;
	position: absolute;
	margin: auto;
	z-index: 1;
	}

	.spidey-logo {
	width: 40px;
	top: 5px;
	left: 5px;
	position: absolute;
	}

	.spidey-title {
	color: white;
	font-family: 'Open Sans';
	text-transform: uppercase;
	font-size: 15px;
	left: 50px;
	padding: 5px;
	position: absolute;
	}

	.spidey-title em {
	color: #1582bd;
	font-size: 15px;
	left: 55px;
	font-weight: normal;
	position: absolute;
	top: 5px;
	}

	.navlinks-righttop {
	right: 145.5px;
	position: absolute;
	top: 0px;
	}

	#licenceagree-link {
	color: white;
	font-family: 'Open Sans';
	font-size: 14px;
	text-transform: uppercase;
	right: 150px;
	position: absolute;
	top: 28px;
	text-decoration: none;
	}

	#licenceagree-link:hover {
	background: #1582bd;
	width: 75px;
	height: 40px;
	padding-top: 30px;
	top: -3px;
	text-align: center;
	position: absolute;
	right: 140px;
	opacity: 0.9;
	border-bottom: 3px solid #7ec2e7;
	}

	#ourmusic-link {
	color: white;
	font-family: 'Open Sans';
	top: 27.5px;
	width: 100px;
	font-size: 14px;
	position: absolute;
	right: 35px;
	text-transform: uppercase;
	text-decoration: none;
	text-align: -webkit-center;
	}

	#ourmusic-link:hover {
	background: #1582bd;
	width: 100px;
	height: 40px;
	padding-top: 30px;
	top: -3px;
	text-align: center;
	position: absolute;
	right: 35px;
	opacity: 0.9;
	border-bottom: 3px solid #7ec2e7;
	}

	#contactus-link {
	color: white;
	font-family: 'Open Sans';
	text-decoration: none;
	text-transform: uppercase;
	font-size: 14px;
	position: absolute;
	width: 100px;
	top: 28px;
	right: -79px;
	}

	#contactus-link:hover {
	background: #1582bd;
	width: 100px;
	height: 40px;
	padding-top: 30px;
	top: -3px;
	text-align: center;
	position: absolute;
	right: -71px;
	opacity: 0.9;
	border-bottom: 3px solid #7ec2e7;
	}

	.searchnavlinks-wrapper {
	right: 30px;
	position: absolute;
	z-index: 1;
	}

	.search {
	right: 35px;
	top: 30px;
	position: absolute;
	}

	.search-magnify {
	width: 15px;
	top: -5.6px;
	right: -10px;
	height: 15px;
	position: absolute;
	z-index: 0;
	padding: 7px;
	}

	.magnify-white {
	width: 15px;
	top: 0.5px;
	right: 0px;
	position: initial;
	opacity: 0;
	}

	.magnify-white:hover {
	opacity: 0.9;
	position: absolute;
	background: #1582db;
	padding: 27px;
	padding-top: 40px;
	top: -40px;
	right: -30px;
	height: 15px;
	width: 15px;
	border-bottom: 3px solid #7ec2e7;
	padding-bottom: 22px;
	}
	/* Search Dropdown Start */

	.dropdown:hover .dropdown-search-content {
	display: block;
	}
	/* Search Dropdown End */
	/* Top Navigation End */
	/* Top Grunge Start */

	.grungetop-container {
	float: left;
	}

	.grungetop {
	top: 71px;
	position: absolute;
	left: 0px;
	width: 100%;
	float: left;
	height: 500px;
	box-shadow: 0px 5px 10px -5px #000000;
	}

	.lorem {
	color: white;
	font-family: 'Open Sans';
	font-size: 30px;
	text-transform: uppercase;
	text-align: -webkit-center;
	top: 180px;
	position: absolute;
	z-index: 1;
	right: 470px;
	}

	#subscribe {
	background: none;
	border: 1px solid #053C5B;
	border-radius: 5px;
	top: 302px;
	position: absolute;
	text-align: -webkit-center;
	width: 30.3%;
	height: 70%;
	text-transform: uppercase;
	color: white;
	left: 410px;
	padding-left: 0px;
	}

	#subscribe:focus {
	outline: 1px solid #053C5B;
	border-radius: 0px;
	background: #1b2833;
	box-shadow: 0px 0px 11px 0px #155B94;
	}

	input:focus {
	outline: 1px solid #53A1E1;
	border-radius: 0px;
	}
	/* Top Grunge End */
	/* Licence Start */

	#licence {
	background: #52A0E1;
	width: 100%;
	height: 1200px;
	top: 700px;
	float: left;
	z-index: 0;
	position: absolute;
	right: 0px;
	}
	/* Licence End */
	/* Social Start */

	.social {
	background: #E7ECEE;
	width: 100%;
	height: 150px;
	top: 571px;
	right: 0%;
	position: absolute;
	}

	.follow-us {
	color: #147AB2;
	font-family: 'Open Sans';
	position: absolute;
	top: 45px;
	right: 1020px;
	text-transform: uppercase;
	font-weight: bold;
	}

	.floral-pattern {
	width: 100%;
	height: 150px;
	opacity: .9;
	}

	.linkpattern {
	width: 100%;
	position: absolute;
	z-index: 0;
	height: 400px;
	top: 400px;
	opacity: .4;
	}

	.linkpattern2 {
	width: 100%;
	position: absolute;
	z-index: 0;
	height: 400px;
	top: 0px;
	opacity: .4;
	}

	.linkpattern3 {
	width: 100%;
	position: absolute;
	z-index: 0;
	height: 400px;
	top: 800px;
	opacity: .4;
	}
	/* Social End */

	@media screen and (max-width: 1140px) {
	.welcome-msg-welcome {
	color: white;
	position: absolute;
	z-index: 1;
	font-size: 300%;
	font-family: 'Open Sans';
	text-transform: uppercase;
	text-align: -webkit-center;
	top: 220px;
	right: 320px;
	width: 100%;
	left: 0px;
	}
	}

	@media screen and (max-width: 600px) {
	.welcome-msg-welcome {
	color: white;
	position: absolute;
	z-index: 1;
	font-size: 300%;
	font-family: 'Open Sans';
	text-transform: uppercase;
	text-align: -webkit-center;
	top: 220px;
	width: 100%;
	left: 0px;
	}
	.grungetop {
	padding: 0px;
	top: 71px;
	position: absolute;
	width: 10px;
	z-index: -1;
	}
	.searchnavlinks-wrapper {
	visibility: hidden !important;
	}
	}