Beruflich Dokumente
Kultur Dokumente
--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]--> <!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]--> <!--[if IE 9]> <html class="no-js ie9" lang="en"> <![endif]--> <!-- Consider adding an manifest.appcache: h5bp.com/d/Offline --> <!--[if gt IE 9]><!--> <html class="no-js" lang="en" itemscope itemtype="http://schema.org/Product"> <!--<![endif]--> <head>
<!-- Meta tags & title /--> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Flat Studio - A Flat Responsive One Page HTML Template</title> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="author" content="humans.txt">
<!-- Facebook Metadata /--> <meta property="fb:page_id" content="" /> <meta property="og:image" content="" /> <meta property="og:description" content=""/> <meta property="og:title" content=""/>
<!-- Stylesheets /--> <link rel="stylesheet" href="css/gumby.css"> <!-- Gumby Frameworks /--> <link rel="stylesheet" href="css/style.css"> <!-- Main stylesheet /--> <link rel="stylesheet" href="css/metrize.css"> <!-- Metrize Icon /--> <link rel="stylesheet" href="css/hoverex-all.css" > <!-- Hover Info on Member /-->
</head>
<body>
<div class="container">
<div class="cbp-af-header">
<nav class="row">
<ul id="nav"> <li><a href="#contact">Contact</a></li> <li><a href="#team">About</a></li> <li><a href="#whatwedo">Services</a></li> <li><a class="selected" href="#works">Works</a></li> </ul>
</nav>
</div>
<section id="header">
<div class="row">
</div>
</div>
</section>
<div class="row">
<h3>Latest works</h3>
</div>
</div>
<section id="works">
<ul class="filter"> <li><a class="active" href="#" data-filter="*">All</a></li> <li><a href="#" data-filter=".print">Print</a></li> <li><a href="#" data-filter=".webdesign">Webdesign</a></li> <li><a href="#" data-filter=".video">Video</a></li> </ul>
<li class="item print"><a onclick="$('#portfolio1').slideDown(); $('#portfolio2, #portfolio3, #portfolio4, #portfolio5, #portfolio6').slideUp(); $('html, body').animate({scrollTop: $('#portfolio1').offset().top }, 600);"><img src="img/exemple1.jpg" alt="EXEMPLE" >
<li class="item print"><a onclick="$('#portfolio2').slideDown(); $('#portfolio1, #portfolio3, #portfolio4, #portfolio5, #portfolio6').slideUp(); $('html, body').animate({scrollTop: $('#portfolio2').offset().top }, 600);"><img src="img/exemple2.jpg" alt="EXEMPLE" > <div> <h5>iMac Mockup</h5> <span>Exemple of span</span> </div> </a> </li>
<li class="item webdesign"><a onclick="$('#portfolio3').slideDown(); $('#portfolio1, #portfolio2, #portfolio4, #portfolio5, #portfolio6').slideUp(); $('html, body').animate({scrollTop: $('#portfolio3').offset().top }, 600);"><img src="img/exemple3.jpg" alt="EXEMPLE" > <div> <h5>HALFCREATIVE</h5> <span>Template</span> </div> </a> </li>
<li class="item webdesign"><a onclick="$('#portfolio4').slideDown(); $('#portfolio1, #portfolio2, #portfolio3, #portfolio5, #portfolio6').slideUp(); $('html, body').animate({scrollTop: $('#portfolio4').offset().top }, 600);"><img src="img/exemple4.jpg" alt="EXEMPLE" > <div> <h5>MOUNTAINHEAD</h5> <span>Template</span> </div> </a> </li>
<li class="item webdesign"><a onclick="$('#portfolio5').slideDown(); $('#portfolio1, #portfolio2, #portfolio3, #portfolio4, #portfolio6').slideUp(); $('html, body').animate({scrollTop: $('#portfolio5').offset().top }, 600);"><img src=img/exemple5.jpg alt="EXEMPLE" > <div> <h5>Browser Mockup</h5> <span>Exemple of span</span> </div> </a> </li>
<li class="item video"><a onclick="$('#portfolio6').slideDown(); $('#portfolio1, #portfolio2, #portfolio3, #portfolio4, #portfolio5').slideUp(); $('html, body').animate({scrollTop: $('#portfolio6').offset().top }, 600);"><img src="img/exemple6.jpg" alt="EXEMPLE" > <div> <h5>Metrize Icon</h5> <span>Exemple of span</span> </div> </a> </li>
</ul>
</div>
<img class="closeit" src="img/close.png" alt="Close Project" onclick="$('#portfolio1').slideUp(); $('html, body').animate({scrollTop: $('#works').offset().top -70 }, 800);">
<h3>FLAT STUDIO</h3>
<p>Bacon ipsum dolor sit amet shank tri-tip pig, short loin pork belly boudin ground round flank sirloin bresaola filet mignon sausage beef ribs kielbasa. flow freely, we've created a studio where we can not only work but also have fun and learn.</p>
</div>
</div>
<img class="closeit" src="img/close.png" alt="Close Project" onclick="$('#portfolio2').slideUp(); $('html, body').animate({scrollTop: $('#works').offset().top -70 }, 800);">
<h3>FLAT STUDIO</h3>
<p>Bacon ipsum dolor sit amet shank tri-tip pig, short loin pork belly boudin ground round flank sirloin bresaola filet mignon sausage beef ribs kielbasa. flow freely, we've created a studio where we can not only work but also have fun and learn.</p>
</div>
</div>
<img class="closeit" src="img/close.png" alt="Close Project" onclick="$('#portfolio3').slideUp(); $('html, body').animate({scrollTop: $('#works').offset().top -70 }, 800);">
<h3>FLAT STUDIO</h3>
<p>Bacon ipsum dolor sit amet shank tri-tip pig, short loin pork belly boudin ground round flank sirloin bresaola filet mignon sausage beef ribs kielbasa. flow freely, we've created a studio where we can not only work but also have fun and learn.</p>
</div>
</div>
<img class="closeit" src="img/close.png" alt="Close Project" onclick="$('#portfolio4').slideUp(); $('html, body').animate({scrollTop: $('#works').offset().top -70 }, 800);">
<h3>FLAT STUDIO</h3>
<p>Bacon ipsum dolor sit amet shank tri-tip pig, short loin pork belly boudin ground round flank sirloin bresaola filet mignon sausage beef ribs kielbasa. flow freely, we've created a studio where we can not only work but also have fun and learn.</p>
</div>
</div>
<img class="closeit" src="img/close.png" alt="Close Project" onclick="$('#portfolio5').slideUp(); $('html, body').animate({scrollTop: $('#works').offset().top -70 }, 800);">
<h3>FLAT STUDIO</h3>
<p>Bacon ipsum dolor sit amet shank tri-tip pig, short loin pork belly boudin ground round flank sirloin bresaola filet mignon sausage beef ribs kielbasa. flow freely, we've created a studio where we can not only work but also have fun and learn.</p>
</div>
</div>
<img class="closeit" src="img/close.png" alt="Close Project" onclick="$('#portfolio6').slideUp(); $('html, body').animate({scrollTop: $('#works').offset().top -70 }, 800);">
<h3>FLAT STUDIO</h3>
<p>Bacon ipsum dolor sit amet shank tri-tip pig, short loin pork belly boudin ground round flank sirloin bresaola filet mignon sausage beef ribs kielbasa. flow freely, we've created a studio where we can not only work but also have fun and learn.</p>
</div>
</div>
</section>
<section id="interblock">
<div class="row">
</div>
</div>
</div>
</section>
<div class="row">
<h3>What we do</h3>
</div>
</div>
<section id="whatwedo">
<div class="row">
<li class="service">
</div>
<h3>Web Design</h3>
<p>Bacon ipsum dolor sit amet shank tri-tip pig, short loin pork belly boudin ground round flank sirloin bresaola filet mignon sausage beef ribs kielbasa. flow freely, we've created a studio where we can not only work but also have fun and learn. </p>
</div>
</li>
<li class="service">
</div>
<h3>Mobile Apps</h3>
<p>Bacon ipsum dolor sit amet shank tri-tip pig, short loin pork belly boudin ground round flank sirloin bresaola filet mignon sausage beef ribs kielbasa. flow freely, we've created a studio where we can not only work but also have fun and learn. </p>
</div>
</li>
<li class="service">
</div>
<h3>WEB INTEGRATION</h3>
<p>Bacon ipsum dolor sit amet shank tri-tip pig, short loin pork belly boudin ground round flank sirloin bresaola filet mignon sausage beef ribs kielbasa. flow freely, we've created a studio where we can not only work but also have fun and learn. </p>
</div>
</li>
<li class="service">
</div>
<h3>Video</h3>
<p>Bacon ipsum dolor sit amet shank tri-tip pig, short loin pork belly boudin ground round flank sirloin bresaola filet mignon sausage beef ribs kielbasa. flow freely, we've created a studio where we can not only work but also have fun and learn. </p>
</div>
</li>
</ul>
</div>
</section>
<div class="row">
</div>
</div>
<section id="team">
<div class="row">
<div class="he-view">
</div>
</div>
</div>
<h3>Denis Calis</h3>
<h4>CEO / FOUNDER</h4>
</div>
<div class="he-view">
</div>
</div>
</div>
<h3>Martine Brux</h3>
<div class="he-view">
</div>
</div>
</div>
<h3>Jack Brel</h3>
<h4>WEB DESIGNER</h4>
</div>
<div class="he-view">
</div>
</div>
</div>
<h3>Manon Delux</h3>
<h4>Video director</h4>
</div>
</div>
<div class="row">
<div class="he-view">
</div>
</div>
</div>
<h3>Alain Dupuis</h3>
<h4>App Builder</h4>
</div>
<div class="he-view">
</div>
</div>
</div>
<h3>Alex Dew</h3>
<h4>Photographer</h4> </div>
<div class="he-view">
</div>
</div>
</div>
<h3>Fransceco Maes</h3>
<h4>Social</h4>
</div>
<div class="he-view">
</div>
</div>
</div>
<h3>Kate Uptown</h3>
<h4>Social</h4>
</div>
</div>
</section>
<section id="getit">
<div class="row">
</div>
</div>
</section>
<div class="row">
<h3>Contact</h3>
</div>
</div>
<section id="contact">
<input type="text" name="name" placeholder="YOUR NAME" required> <input type="text" name="phone" placeholder="YOUR PHONE" required> <input type="email" name="email" placeholder="YOUR E-MAIL" required>
</div>
</div>
</form>
</div>
</div>
</section>
<section id="interblock_footer">
<div class="row">
<h2>Thank you for taking the time to look our most recent work.</h2> <p>Please feel free to contact us for any further information.</p>
</div>
<ul>
</ul>
</div>
</div>
</section>
<section id="contact_info">
<div class="row">
</div>
</div>
</div>
</section>
<!-- Grab Google CDN's jQuery, fall back to local if offline --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script> <script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script> <script src="js/jquery.parallax-1.1.3.js" type="text/javascript"></script> <!-- jQuery Parallax --> <script src="js/waypoints.min.js" type="text/javascript"></script> <!-- Smooth Scrolling --> <script src="js/jquery.scrollto.js" type="text/javascript"></script> <!-- ScrollTo --> <script src="js/classie.js" type="text/javascript"></script> <!-- Menu -->
<script src="js/jquery.hoverdir.min.js" type="text/javascript"></script> <!-- Filter Works --> <script src="js/jquery.isotope.js" type="text/javascript"></script> <!-- Also for Filter Works --> <script src="js/jquery.hoverex.min.js" type="text/javascript"></script> <!-- Hoverex for social icon on member --> <script src="js/main.js" type="text/javascript"></script> <!-- Main Javascript File -->
<!-- Change UA-XXXXX-X to be your site's ID --> <!--<script> window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']]; Modernizr.load({ load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js' }); </script> -->
</body>
</html>