Menu icon Foundation

My Posts

No Content

My Comments

Zach K commented on Zach K's post over 4 years

I honestly don't know what would be causing the issue. I have tired commenting out everything I can think of to no avail. All my code is attached if that helps at all.

Thank you!

<!doctype html>
<html class="no-js" lang="en">

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Some | Site </title>




    <link rel="stylesheet" href="css/foundation.css" />
     <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="js/vendor/modernizr.js"></script>


    <link rel="stylesheet" href="css/animate.css">

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,800' rel='stylesheet' type='text/css'>


<script src="js/wow.min.js"></script>


<script type="text/javascript"> new WOW().init();</script>

<!-- SMOOTH SCROLL -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">



$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

</script>
<!-- End of SMOOTH SCROLL -->

  </head>
  <body>




  <section class="header">

  <div class="logo wow fadeIn row" data-wow-delay=".5s" data-wow-duration="2s">
  <div class="large-7 small-12 medium-8 small-centered columns">
  <img src="img/logo2.png">
  </div>
  </div>

<div id="down" class="wow fadeIn row" data-wow-delay="2s" data-wow-duration="2s">
<div class="large-3 small-7 medium-3 small-centered columns">

<a href="#words">GO DOWN</a>

</div>
</div>


</section>

<section id="words" class="words">

  <div id="nav">
    <div class="row">
      <div class="large-4 small-5 medium-6  small-centered columns">
        <nav>
          <ul class="inline-list">
            <li><a href="#about">Home</a></li>
            <li><a href="/">Home</a></li>
            <li><a href="/">Home</a></li>
            <li><a href="/">Home</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </div>

   <div class="words row">

   <div class="row">
   <div class="large-3 small-6 medium-5 small-centered columns">
    <h1>BIG WORDS!</h1>
   </div>
   </div>
    <div class="large-10 small-11 medium-10 small-centered columns">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu tristique massa. Aenean volutpat magna et arcu suscipit tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam in ligula nec erat cursus rhoncus. Maecenas id condimentum massa, et commodo lectus. Fusce finibus ut ipsum nec laoreet. Duis eu feugiat enim, ut feugiat sapien. Etiam elementum tincidunt nulla non pellentesque. Integer ac sapien eu mauris tempor mattis convallis ut metus. Nam tincidunt feugiat gravida. Praesent pellentesque lacinia nisi, venenatis vehicula sapien.</p>


    </div>
    </div>

    <div class="row icons">
     <div class="large-8 small-8 medium-10 small-centered columns">
        <ul class="inline-list">
           <li class="wow fadeInDown" data-wow-delay=".2s">
           <img src="img/beacon.png" width="" height="" alt="" />
           </li>

            <li class="wow fadeInDown" data-wow-delay=".5s">
            <img src="img/heart.png" width="" height="" alt="" />
           </li>

            <li class="wow fadeInDown" data-wow-delay=".8s">
            <img src="img/cup.png" width="" height="" alt="" />
            </li>

            <li class="wow fadeInDown" data-wow-delay="1.1s">
            <img src="img/laptop.png" width="" height="" alt="" />
            </li>
        </ul>
      </div>
    </div>



</section>

<section class="image1 data-type="background" data-speed="10"">

</section>

<section id="about" class="about">


  <div class="wow fadeIn row" data-wow-delay=".5s">
  <div class="large-5 small-6 medium-5 small-centered columns">
  <h1>MORE BIG WORDS!</h1>
  </div>
  </div>


    <div class="wow fadeIn row" data-wow-delay=".9s">
    <div class="large-4 columns">

      <img src="img/team.jpg">

    </div>
    </div>

    <div class="wow fadeIn row" data-wow-delay="1.2s">
    <div class="large-5 large-offset-6 small-centered columns">
    <p>Lorem ipsum dolor sit amet, cnsectetur adipiscing elit. Quisque eu tristique massa. Aenean volutpat magna et arcu suscipit tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam in ligula nec erat cursus rhoncus. Maecenas id condimentum massa, et commodo lectus. Fusce finibus ut ipsum nec laoreet. Duis eu feugiat enim, ut feugiat sapien. Etiam elementum tincidunt nulla non pellentesque. Integer ac sapien eu mauris tempor mattis convallis ut metus. Nam tincidunt feugiat gravida. Praesent pellentesque lacinia nisi, venenatis vehicula sapien.</p>

    </div>
    </div>



        <div class="wow fadeIn row" data-wow-delay="1.9s">
    <div class="large-4 columns">

      <img src="img/tv.jpg">

    </div>
    </div>



    <div class="wow fadeIn row" data-wow-delay="1s">
    <div class="large-5 large-offset-6 small-centered columns">
    <p>Lorem ipsum dolor sit amet, cnsectetur adipiscing elit. Quisque eu tristique massa. Aenean volutpat magna et arcu suscipit tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam in ligula nec erat cursus rhoncus. Maecenas id condimentum massa, et commodo lectus. Fusce finibus ut ipsum nec laoreet. Duis eu feugiat enim, ut feugiat sapien. Etiam elementum tincidunt nulla non pellentesque. Integer ac sapien eu mauris tempor mattis convallis ut metus. Nam tincidunt feugiat gravida. Praesent pellentesque lacinia nisi, venenatis vehicula sapien.</p>

    </div>
    </div>

</section>

<section class="image" data-type="background" data-speed="10">

</section>

<section class="words">


    <div class="wow fadeIn row" data-wow-delay=".5s">
    <div class="large-3 small-centered columns">
    <h4>WOW SO FOOTER!</h4>
    </div>
    </div>

    <div class="wow fadeIn row" data-wow-delay="1s">
    <div class="large-8 small-centered columns">

    <p>Lorem ipsum dolor sit amet, cnsectetur adipiscing elit. Quisque eu tristique massa. Aenean volutpat magna et arcu suscipit tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
    </div>
    </div>

    <div class="wow fadeIn row" data-wow-delay="1.5s">
    <div class="large-2 small-centered columns">
    <h4>MUCH END!</h4>
    </div>
    </div>


</section>


    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>


  </body>
</html>

@charset "UTF-8";

body {
  font-family: 'Open Sans', sans-serif;
  width: 100%;
  height: 100%;
  margin: 0;
}

p{
  font-family: 'Open Sans', sans-serif;
  font-size: .8em;
  font-weight: 400;
  text-align: center;

}

h1{
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  font-size: 2.3em;
}

.header{
  background:url(img/snow.jpg) 50% 0 repeat fixed;

   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;

   height:100%;

}

#down a{
  border:solid white;
  font-size:2.5em;
  color:white;

}

#down{
  padding-top: 18%;

}

.logo{
  padding-top: 20%;
  padding-right:7%;
}

.logo img{
      opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
}

.nav{

  background-color: white;

  -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;

}


nav a{

  font-size: 1.2em;
  color: rgb(56,56,56);
}

.words{

  padding:3em 0 3em 0 ;
}

.icons ul li{
  padding:1em 2.66em 2em 0;

}


.image{

  background:url(img/coffee.jpg) 50% 0 repeat fixed;

   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;

   height: 50%;

}


.image1{

  background:url(img/water.jpg) 50% 0 repeat fixed;

   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;


   height: 50%;

}

#about{

}

#about p{
  padding-top: 3em;
}

#about h1{
  text-decoration: underline;
}

#about img{
  padding:3em 0 0 0;
}



@media screen and (min-width: 200px) and (max-width: 480px){

#down a{
  font-size:1em;
}

#down{
  padding-top: 40%;

}
.logo{
  padding-top: 50%;
  padding-right:7%;
}

.words h1{
  text-align: center;
  font-size: 1.5em;
}


}

@media screen and (min-width: 480px) and (max-width: 980px){

  #down a{
  font-size:1.5em;
}


}

Posts Followed

No Content

Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Zach K's post over 4 years

I honestly don't know what would be causing the issue. I have tired commenting out everything I can think of to no avail. All my code is attached if that helps at all.

Thank you!

<!doctype html>
<html class="no-js" lang="en">

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Some | Site </title>




    <link rel="stylesheet" href="css/foundation.css" />
     <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="js/vendor/modernizr.js"></script>


    <link rel="stylesheet" href="css/animate.css">

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,800' rel='stylesheet' type='text/css'>


<script src="js/wow.min.js"></script>


<script type="text/javascript"> new WOW().init();</script>

<!-- SMOOTH SCROLL -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">



$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

</script>
<!-- End of SMOOTH SCROLL -->

  </head>
  <body>




  <section class="header">

  <div class="logo wow fadeIn row" data-wow-delay=".5s" data-wow-duration="2s">
  <div class="large-7 small-12 medium-8 small-centered columns">
  <img src="img/logo2.png">
  </div>
  </div>

<div id="down" class="wow fadeIn row" data-wow-delay="2s" data-wow-duration="2s">
<div class="large-3 small-7 medium-3 small-centered columns">

<a href="#words">GO DOWN</a>

</div>
</div>


</section>

<section id="words" class="words">

  <div id="nav">
    <div class="row">
      <div class="large-4 small-5 medium-6  small-centered columns">
        <nav>
          <ul class="inline-list">
            <li><a href="#about">Home</a></li>
            <li><a href="/">Home</a></li>
            <li><a href="/">Home</a></li>
            <li><a href="/">Home</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </div>

   <div class="words row">

   <div class="row">
   <div class="large-3 small-6 medium-5 small-centered columns">
    <h1>BIG WORDS!</h1>
   </div>
   </div>
    <div class="large-10 small-11 medium-10 small-centered columns">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu tristique massa. Aenean volutpat magna et arcu suscipit tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam in ligula nec erat cursus rhoncus. Maecenas id condimentum massa, et commodo lectus. Fusce finibus ut ipsum nec laoreet. Duis eu feugiat enim, ut feugiat sapien. Etiam elementum tincidunt nulla non pellentesque. Integer ac sapien eu mauris tempor mattis convallis ut metus. Nam tincidunt feugiat gravida. Praesent pellentesque lacinia nisi, venenatis vehicula sapien.</p>


    </div>
    </div>

    <div class="row icons">
     <div class="large-8 small-8 medium-10 small-centered columns">
        <ul class="inline-list">
           <li class="wow fadeInDown" data-wow-delay=".2s">
           <img src="img/beacon.png" width="" height="" alt="" />
           </li>

            <li class="wow fadeInDown" data-wow-delay=".5s">
            <img src="img/heart.png" width="" height="" alt="" />
           </li>

            <li class="wow fadeInDown" data-wow-delay=".8s">
            <img src="img/cup.png" width="" height="" alt="" />
            </li>

            <li class="wow fadeInDown" data-wow-delay="1.1s">
            <img src="img/laptop.png" width="" height="" alt="" />
            </li>
        </ul>
      </div>
    </div>



</section>

<section class="image1 data-type="background" data-speed="10"">

</section>

<section id="about" class="about">


  <div class="wow fadeIn row" data-wow-delay=".5s">
  <div class="large-5 small-6 medium-5 small-centered columns">
  <h1>MORE BIG WORDS!</h1>
  </div>
  </div>


    <div class="wow fadeIn row" data-wow-delay=".9s">
    <div class="large-4 columns">

      <img src="img/team.jpg">

    </div>
    </div>

    <div class="wow fadeIn row" data-wow-delay="1.2s">
    <div class="large-5 large-offset-6 small-centered columns">
    <p>Lorem ipsum dolor sit amet, cnsectetur adipiscing elit. Quisque eu tristique massa. Aenean volutpat magna et arcu suscipit tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam in ligula nec erat cursus rhoncus. Maecenas id condimentum massa, et commodo lectus. Fusce finibus ut ipsum nec laoreet. Duis eu feugiat enim, ut feugiat sapien. Etiam elementum tincidunt nulla non pellentesque. Integer ac sapien eu mauris tempor mattis convallis ut metus. Nam tincidunt feugiat gravida. Praesent pellentesque lacinia nisi, venenatis vehicula sapien.</p>

    </div>
    </div>



        <div class="wow fadeIn row" data-wow-delay="1.9s">
    <div class="large-4 columns">

      <img src="img/tv.jpg">

    </div>
    </div>



    <div class="wow fadeIn row" data-wow-delay="1s">
    <div class="large-5 large-offset-6 small-centered columns">
    <p>Lorem ipsum dolor sit amet, cnsectetur adipiscing elit. Quisque eu tristique massa. Aenean volutpat magna et arcu suscipit tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam in ligula nec erat cursus rhoncus. Maecenas id condimentum massa, et commodo lectus. Fusce finibus ut ipsum nec laoreet. Duis eu feugiat enim, ut feugiat sapien. Etiam elementum tincidunt nulla non pellentesque. Integer ac sapien eu mauris tempor mattis convallis ut metus. Nam tincidunt feugiat gravida. Praesent pellentesque lacinia nisi, venenatis vehicula sapien.</p>

    </div>
    </div>

</section>

<section class="image" data-type="background" data-speed="10">

</section>

<section class="words">


    <div class="wow fadeIn row" data-wow-delay=".5s">
    <div class="large-3 small-centered columns">
    <h4>WOW SO FOOTER!</h4>
    </div>
    </div>

    <div class="wow fadeIn row" data-wow-delay="1s">
    <div class="large-8 small-centered columns">

    <p>Lorem ipsum dolor sit amet, cnsectetur adipiscing elit. Quisque eu tristique massa. Aenean volutpat magna et arcu suscipit tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
    </div>
    </div>

    <div class="wow fadeIn row" data-wow-delay="1.5s">
    <div class="large-2 small-centered columns">
    <h4>MUCH END!</h4>
    </div>
    </div>


</section>


    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>


  </body>
</html>

@charset "UTF-8";

body {
  font-family: 'Open Sans', sans-serif;
  width: 100%;
  height: 100%;
  margin: 0;
}

p{
  font-family: 'Open Sans', sans-serif;
  font-size: .8em;
  font-weight: 400;
  text-align: center;

}

h1{
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  font-size: 2.3em;
}

.header{
  background:url(img/snow.jpg) 50% 0 repeat fixed;

   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;

   height:100%;

}

#down a{
  border:solid white;
  font-size:2.5em;
  color:white;

}

#down{
  padding-top: 18%;

}

.logo{
  padding-top: 20%;
  padding-right:7%;
}

.logo img{
      opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
}

.nav{

  background-color: white;

  -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;

}


nav a{

  font-size: 1.2em;
  color: rgb(56,56,56);
}

.words{

  padding:3em 0 3em 0 ;
}

.icons ul li{
  padding:1em 2.66em 2em 0;

}


.image{

  background:url(img/coffee.jpg) 50% 0 repeat fixed;

   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;

   height: 50%;

}


.image1{

  background:url(img/water.jpg) 50% 0 repeat fixed;

   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;


   height: 50%;

}

#about{

}

#about p{
  padding-top: 3em;
}

#about h1{
  text-decoration: underline;
}

#about img{
  padding:3em 0 0 0;
}



@media screen and (min-width: 200px) and (max-width: 480px){

#down a{
  font-size:1em;
}

#down{
  padding-top: 40%;

}
.logo{
  padding-top: 50%;
  padding-right:7%;
}

.words h1{
  text-align: center;
  font-size: 1.5em;
}


}

@media screen and (min-width: 480px) and (max-width: 980px){

  #down a{
  font-size:1.5em;
}


}

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content