<!doctype html>

<html lang="en">
<head>

	<meta charset="utf-8">
	<title>Tractr | Agence créative</title>
	
	<meta name="description" content="Tractr Agence créative web de Montreal QC">
	<meta name="keywords" content="Tractr Agence créative web de Montreal QC" />
	<meta name="robots" content="follow, all" />
	<meta name="author" content="Tractr">

	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

	<link rel="shortcut icon" href="/images/favicon.ico">
	
	<!-- CSS -->
	<link rel="stylesheet" href="/css/style.css">
	<link rel="stylesheet" href="/css/grid.css">

	<link rel="stylesheet" href="/webfonts/ss-social.css">
	<!-- <link rel="stylesheet" href="js/bootstrap/css/bootstrap.css"> -->
    
	<!--[if IE]>
        <style>
        	.fade {opacity:1;}
        	#hover {diplay:none;}
	</style>
	<![endif]-->
	
	<!--[if lt IE 9]>
		<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
    
	<!-- Typekit -->
	<script src="//use.typekit.net/hgp1bjc.js"></script>
	<script>try{Typekit.load();}catch(e){}</script>
    
	<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
	<script src="/js/modernizr.custom.js"></script>
	<script src="/js/waypoints.min.js"></script>

	<script>
		// Wait for window load
		$(window).load(function() {
			// Animate loader off screen
			$("#loading").fadeOut(1000);
		});
	</script>
    <script src="/js/script.js" type="text/javascript"></script>
    
</head>


<body id="home">

        
        <header id="site-header" class="">
            <div class="container">
                <div class="row-fluid">
                <div id="logo-holder" class="span6">
                    <a id="logo" href="/">
                        <img src="/images/logo-1.png" title="Tractr" alt="Tractr" >
                    </a>
                </div>
                <div id="nav-wrapper" class="span6">
                    <ul id="nav">
                        <li style="padding-top:17px"><a style="" href="/">Projets</a></li>
                        <li style="padding-top:17px"><a style="" href="/a_propos">À propos</a></li>   
                    </ul>
                </div>
            </div>
            </div>
        </header>
    
  
    
    <!-- Page Wrapper -->
        <script type="text/javascript">
            $("#nav li:first-child a").css("color","black");
        </script>
        <!-- Project Container -->
        <div class="container">
        	
            <div class="work-heading">
                <h1 style="margin-bottom:50px">Culture Web</h1>

            </div>

            
 
            <div class="six columns">
                <div class="landscape">
                   
                        <img src="images/rds-t.jpg" title="RDS" alt="RDS" >
                        <div id="hover">
                            <div class="link-text">
                                <h2>RDS</h2>
                                <h3>Détails à venir.<br></h3>
                            </div>
                        </div>
                    
                </div>
            </div>

             
            <div class="six columns">
                <div class="landscape">
                    <a href="desjardins-hull">
                        <img src="images/desjardins-hull-t.jpg" title="Desjardins" alt="Desjardins" >
                        <div id="hover">
                            <div class="link-text">
                                <h2>Desjardins</h2>
                                <h3>Caisse de Hull-Aylmer</h3>
                            </div>
                        </div>
                    </a>
                </div>
            </div>

          
            <div class="eight columns">
            	<div class="landscape">
                	<a href="sonographe">
                    	<img src="images/sonographe-t.jpg" title="Sonographe" alt="Sonographe" >
                        <div id="hover">
                            <div class="link-text">
                                <h2>Sonographe</h2>
                                <h3>Répertoire musical</h3>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            
            <div class="four columns">
            	<div class="portrait">
                	<a href="vichy">
                        <img src="images/vichy-t.jpg" title="Vichy" alt="Vichy" >
                        <div id="hover">
                            <div class="link-text">
                                <h2>Vichy</h2>
                                <h3>Site & application Facebook</h3>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            
           
            
            <div class="six columns">
            	<div class="landscape">
                	<a href="dm">
                    	<img src="images/dm-t.jpg" title="Dominic & Martin" alt="Dominic & Martin" >
                        <div id="hover">
                            <div class="link-text">
                                <h2>Dominic & Martin</h2>
                                <h3>Site concept</h3>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            
            <div class="six columns" style="float:right;">
            	<div class="portrait">
                    <a href="rt21">
                        <img src="images/rt21-t.jpg" title="Regroupement pour la trisomie 21" alt="Regroupement pour la trisomie 21" >
                        <div id="hover">
                            <div class="link-text">
                                <h2>Regroupement pour la trisomie 21</h2>
                                <h3>"Grand Prix Boomerang 2012"</h3>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            
            <div class="six columns">
            	<div class="landscape">
                	<a href="hydro-quebec">
                        <img src="images/hq-t.jpg" title="Hydro-Québec" alt="Hydro-Québec" >
                        <div id="hover">
                            <div class="link-text">
                                <h2>Hydro-Québec</h2>
                                <h3>Congrès mondial de l'énergie</h3>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            
            <div class="eight columns">
            	<div class="landscape">
                	<a href="pharmablogue">
                    	<img src="images/pharmablogue-t.jpg" title="Pharmablogue" alt="Pharmablogue" >
                        <div id="hover">
                            <div class="link-text">
                                <h2>Pharmablogue</h2>
                                <h3>Portail de santé multi-disciplinaire</h3>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            
            <div class="four columns">
            	<div class="landscape">
                	<a href="educaloi">
                    	<img src="images/educaloi-t.jpg" title="Éducaloi" alt="Éducaloi" >
                        <div id="hover">
                            <div class="link-text">
                                <h2>Éducaloi</h2>
                                <h3>"Mention spéciale Boomerang 2011"</h3>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            
             <div class="four columns">
            	<div class="landscape">
                	<a href="ypg">
                        <img src="images/ypg-t.jpg" title="Pages jaunes Solution 360" alt="Pages jaunes Solution 360" >
                        <div id="hover">
                            <div class="link-text">
                                <h2>Pages jaunes Solution 360</h2>
                                <h3>"Grand Prix B2B Boomerang 2011"</h3>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            
        </div><!-- END Project Container -->
        

<!-- Footer -->
    <div id="footer-container">
        <div id="bottom">
            <div class="container">
                <div class="social">
                    <a href="mailto:info@tractr.net" target="_blank"><span class="ss-icon">&#x2709;</span>info@tractr.net</a>
                    
                </div>
                <p class="copyright">&copy; Tractr 2013. Tous droits réservés.</p>
            </div>
        </div>
        
    </div><!-- END Footer -->
        
	</div><!-- END Page Wrapper -->


<!-- Google Analytics -->	 
<script>

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-22136917-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

  //<![CDATA[
    $(window).load(function() { // makes sure the whole site is loaded
      $('#status').fadeOut(); // will first fade out the loading animation
      $('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
      $('body').delay(350).css({'overflow':'visible'});
    })
  //]]>



</script>
  
</body>
</html>
<!-- Localized -->