Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Maxwell Gover
4,246 PointsAnimsition Website Not Showing Up
Hey. I thought I followed Daves directions but apparently I missed something somewhere. I checked the console and found two errors in my index.html, which I found and fixed. However, now when I try to preview the workspace, nothing shows up. It's just a white screen. Nothing is showing up in the console log so I'm not sure how to identify where the problem is. Below is my code. Thanks in advance.
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Agency - A Treehouse template</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--CSS-->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="js/animsition/animsition.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="row container animsition">
<header class="row header">
<div class="grid-third">
<a href="index.html" class="logo animsition-link"></a>
</div>
<div class="grid-third">
<h1 class="description">We build apps</h1>
</div>
<div class="grid-third">
<nav>
<a href="#" class="active animsition-link">Home</a>
<a href="work.html" class="animsition-link">Work</a>
<a href="team.html" class="animsition-link">Team</a>
</nav>
</div>
</header><!--/header-->
<div class="row">
<div class="grid-full">
</div>
<div class="main row">
<div class="grid-third">
<img src="img/sticker-team.png" alt="" />
<p>United we stand divided we fail. Meet the all star team behind the agency.</p>
<a href="team.html" class="button">Meet the Team</a>
</div><!--/team-->
<div class="grid-third">
<img src="img/sticker-work.png" alt="" />
<p>Check our latest app builds or download them in the App Store.</p>
<a href="work.html" class="button">Latest Projects</a>
</div><!--/work-->
<div class="grid-third">
<img src="img/sticker-contact.png" alt="" />
<p>Have questions or requests? Feel free to contact us, we’d love hear from you.</p>
<a href="#" class="button">Contact Us</a>
</div><!--/contact-->
</div>
</div><!--/main-->
<footer>
<div class="row">
<div class="grid-full">
<p>Connect with us</p>
<ul class="social">
<li>
<a href="#" class="pink"></a>
<a href="#" class="light-blue"></a>
<a href="#" class="dark-blue"></a>
</li>
</ul>
</div>
</div>
</footer><!--/footer-->
</div>
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/animsition/jquery.animsition.min.js"></script>
<script src"js/main.js"></script>
</body>
</html>
Main
$(".animsition").animsition({
inClass: 'fade-in-right-lg',
outClass: 'fade-out-right-lg'
});
3 Answers
tate
13,435 PointsYou forgot the equals sign!
<script src="js/main.js"></script>
maximleguennec
Full Stack JavaScript Techdegree Student 4,777 Pointsi've got the same pbme !!!!!
maximleguennec
Full Stack JavaScript Techdegree Student 4,777 Points<!DOCTYPE html> <html class="no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Agency - A Treehouse template</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--CSS--> <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/normalize.min.css"> <link rel="stylesheet" href="js/animsition/animsition.min.css"> <link rel="stylesheet" href="css/main.css"> </head>
<body>
<div class="row container animsition">
<header class="row header">
<div class="grid-third">
<a href="index.html" class="logo animsition-link"></a>
</div>
<div class="grid-third">ma
<h1 class="description">We build apps</h1>
</div>
<div class="grid-third">
<nav>
<a href="#" class="active animsition-link">Home</a>
<a href="work.html" class="animsition-link">Work</a>
<a href="team.html" class="animsition-link">Team</a>
</nav>
</div>
</header><!--/header-->
<div class="row">
<div class="grid-full">
</div>
<div class="main row">
<div class="grid-third">
<img src="img/sticker-team.png" alt="" />
<p>United we stand divided we fail. Meet the all star team behind the agency.</p>
<a href="team.html" class="button">Meet the Team</a>
</div><!--/team-->
<div class="grid-third">
<img src="img/sticker-work.png" alt="" />
<p>Check our latest app builds or download them in the App Store.</p>
<a href="work.html" class="button">Latest Projects</a>
</div><!--/work-->
<div class="grid-third">
<img src="img/sticker-contact.png" alt="" />
<p>Have questions or requests? Feel free to contact us, we’d love hear from you.</p>
<a href="#" class="button">Contact Us</a>
</div><!--/contact-->
</div>
</div><!--/main-->
<footer>
<div class="row">
<div class="grid-full">
<p>Connect with us</p>
<ul class="social">
<li>
<a href="#" class="pink"></a>
<a href="#" class="light-blue"></a>
<a href="#" class="dark-blue"></a>
</li>
</ul>
</div>
</div>
</footer><!--/footer-->
</div>
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/animsition/jquery.animsition.min.js"></script>
<script src="js/main/js"></script>
</body>
</html>