Doctype Htm1

<!doctype html>   <!
--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->     <html class="no-js" lang="en" itemscope itemtype="http://schema.org/Product">  <head>
 <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">
<link rel="shortcut icon" href="favicon.png" type="image/x-icon" /> 
 <meta property="fb:page_id" content="" /> <meta property="og:image" content="" /> <meta property="og:description" content=""/> <meta property="og:title" content=""/>
 <meta itemprop="name" content="">
<meta itemprop="description" content=""> <meta itemprop="image" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
 <link rel="stylesheet" href="css/gumby.css">  <link rel="stylesheet" href="css/style.css">  <link rel="stylesheet" href="css/metrize.css">  <link rel="stylesheet" href="css/hoverex-all.css" > 
<script src="js/modernizr-2.6.2.min.js"></script> 
</head>
<body>
<div class="container">

<div class="cbp-af-header">
<nav class="row">
<div id="logo"><a href="#"><img alt="YOURLOGO" src="img/logo.png"></a></div>
<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 class="twelve columns centered">
<h2 class="fade-it2">we are Flat Digital Studio</h2>
<p class="lead fade-it2">CODE, VIDEO, DESIGN, EVERYTHING THAT YOU NEED</p>
</div>
</div>
</section>



<div class="row">
<div class="twelve columns">
<h3>Latest works</h3>
</div>
</div>

<section id="works">

<div id="projects_grid" class="row" >

<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>
<ul class="items three_up tiles centered">

<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" >
<div> <h5>Supview</h5> <span>Exemple of span</span> </div> </a> </li>

<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>

<div id="portfolio1" class="row slide_portfolio">
<div class="seven columns centered">
<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>
<img src="img/workexemple1.png" alt="EXEMPLE">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<iframe src="http://player.vimeo.com/video/64291127" style="paddingtop:40px;" width="100%" height="300px" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</div>
</section>


<section id="interblock">
<div class="row">
<div class="nine columns">
<h2>The most important thing to us is building products people love.</h2>
<p>Let's show you what we do.</p>
</div>
<div class="three columns buttongo">
<a href="#whatwedo"><i class='icon' data-icon=""></i></a>
</div>
</div>
</section>


<div class="row">
<h3>What we do</h3>
</div>
</div>
<section id="whatwedo">
<div class="row">
<ul class="one_up tiles">

<li class="service">
<div class="two columns">
<img src="img/service2.png" alt="EXEMPLE">
</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>

</div>
<h3>Mobile Apps</h3>
</div>
</li>

</div>
<h3>WEB INTEGRATION</h3>
</div>
</li>

</div>
<h3>Video</h3>
</div>
</li>
</ul>
</div>
</section>



<div class="row">
<h3>Our lovely Team</h3>
</div>
</div>
<section id="team">
<div class="row">

<div class="three columns member">
<div class="he-wrap tpl3 ">
<img src="img/portraits/1.png" alt="EXEMPLE">
<div class="he-view">
<div class="info-bottom a0" data-animate="fadeInUp">
<a href="http://www.facebook.com/Supview" target="_blank"><i class="icon" data-icon=""></i></a>
<a href="http://www.twitter.com/Supview" target="_blank"><i class='icon' data-icon=""></i></a>
</div>
</div>
</div>
<h3>Denis Calis</h3>
<h4>CEO / FOUNDER</h4>
</div>

<img src="img/portraits/2.png" alt="EXEMPLE" >
<a href="http://www.facebook.com/Supview" target="_blank"><i class="icon" data-icon=""></i></a>
</div>
</div>
</div>
<h3>Martine Brux</h3>
<h4>MONEY GRABBER</h4> </div>

<a href="http://www.twitter.com/Supview" target="_blank"><i class='icon' data-icon=""></i></a>
</div>
</div>
</div>
<h3>Jack Brel</h3>
<h4>WEB DESIGNER</h4>
</div>

<a href="http://www.twitter.com/Supview" target="_blank"><i class='icon' data-icon=""></i></a>
</div>
</div>
</div>
<h3>Manon Delux</h3>
<h4>Video director</h4>
</div>
</div>
<div class="row">

<img src="img/portraits/5.png" alt="EXEMPLE">
</div>
</div>
</div>
<h3>Alain Dupuis</h3>
<h4>App Builder</h4>
</div>

<a href="http://www.facebook.com/Supview" target="_blank"><i class="icon" data-icon=""></i></a>
</div>
</div>
</div>
<h3>Alex Dew</h3>
<h4>Photographer</h4> </div>

<a href="http://www.twitter.com/Supview" target="_blank"><i class='icon' data-icon=""></i></a>
</div>
</div>
</div>
<h3>Fransceco Maes</h3>
<h4>Social</h4>
</div>

<a href="http://www.twitter.com/Supview" target="_blank"><i class='icon' data-icon=""></i></a>
</div>
</div>
</div>
<h3>Kate Uptown</h3>
<h4>Social</h4>
</div>
</div>
</section>


<section id="getit">
<div class="row">
<h2>want this awesome template ?</h2>
<a class="buttom" href="#">Click and get it!</a>
</div>
</div>
</section>



<div class="row">
<h3>Contact</h3>
</div>
</div>
<section id="contact">
<div class="row contact">

<form name="htmlform" method="post" action="http://baribal.be/flatstudio/form_sender.php">
<div class="five columns">
<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 class="seven columns">
<textarea name="comments" cols="1" rows="5" placeholder="YOUR MESSAGE" required ></textarea>
</div>
<button name="send" type="submit" class="submit">SEND</button>
</form>
</div>
</div>
</section>


<section id="interblock_footer">
<div class="row">
<div class="eight columns">
<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>

<div class="four columns text-right ">
<ul>
<li><a href="http://www.facebook.com/Supview" target="_blank"><i class="icon" dataicon=""></i></a></li>
<li><a href="http://www.facebook.com/Supview" target="_blank"><i class='icon' dataicon=""></i></a></li>
<li><a href="http://www.facebook.com/Supview" target="_blank"><i class='icon' dataicon=""></i></a></li>
<li><a href="http://www.facebook.com/Supview" target="_blank"><i class='icon' dataicon=""></i></a></li>
</ul>
</div>
</div>
</section>


<section id="contact_info">
<div class="row">
<div class="four columns"> <p>Chausse de Bruxelles, 1</p> </div>
<div class="four columns text-center"> <p><a href="#">hello@circlepoint.be</a></p>
</div>
<div class="four columns text-right"> <p>+32(0) 499 11 22 33</p> </div>
</div>
</div>
</section>

</div> 
 <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>  <script src="js/waypoints.min.js" type="text/javascript"></script>  <script src="js/jquery.scrollto.js" type="text/javascript"></script>  <script src="js/classie.js" type="text/javascript"></script> 
<script src="js/jquery.hoverdir.min.js" type="text/javascript"></script>  <script src="js/jquery.isotope.js" type="text/javascript"></script>  <script src="js/jquery.hoverex.min.js" type="text/javascript"></script>  <script src="js/main.js" type="text/javascript"></script> 
 
</body>
</html>

Doctype Htm1

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Doctype Htm1

Încărcat de

Drepturi de autor:

Formate disponibile

<!doctype html>   <!

<link rel="shortcut icon" href="favicon.png" type="image/x-icon" />

<meta itemprop="name" content="">

<meta itemprop="description" content=""> <meta itemprop="image" content="">

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

<script src="js/modernizr-2.6.2.min.js"></script>

<div id="logo"><a href="#"><img alt="YOURLOGO" src="img/logo.png"></a></div>

<div class="twelve columns centered">

<h2 class="fade-it2">we are Flat Digital Studio</h2>

<p class="lead fade-it2">CODE, VIDEO, DESIGN, EVERYTHING THAT YOU NEED</p>

<div class="twelve columns">

<div id="projects_grid" class="row" >

<ul class="items three_up tiles centered">

<div> <h5>Supview</h5> <span>Exemple of span</span> </div> </a> </li>

<div id="portfolio1" class="row slide_portfolio">

<div class="seven columns centered">

<img src="img/workexemple1.png" alt="EXEMPLE">

<img src="img/workexemple2.png" alt="EXEMPLE">

<div id="portfolio2" class="row slide_portfolio">

<div class="seven columns centered">

<img src="img/workexemple1.png" alt="EXEMPLE">

<img src="img/workexemple2.png" alt="EXEMPLE">

<div id="portfolio3" class="row slide_portfolio">

<div class="seven columns centered">

<img src="img/workexemple1.png" alt="EXEMPLE">

<img src="img/workexemple2.png" alt="EXEMPLE">

<div id="portfolio4" class="row slide_portfolio">

<div class="seven columns centered">

<img src="img/workexemple1.png" alt="EXEMPLE">

<img src="img/workexemple2.png" alt="EXEMPLE">

<div id="portfolio5" class="row slide_portfolio">

<div class="seven columns centered">

<img src="img/workexemple1.png" alt="EXEMPLE">

<img src="img/workexemple2.png" alt="EXEMPLE">

<div id="portfolio6" class="row slide_portfolio">

<div class="seven columns centered">

<iframe src="http://player.vimeo.com/video/64291127" style="paddingtop:40px;" width="100%" height="300px" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

<div class="nine columns">

<h2>The most important thing to us is building products people love.</h2>

<p>Let's show you what we do.</p>

<div class="three columns buttongo">

<a href="#whatwedo"><i class='icon' data-icon=""></i></a>

<a href="http://www.facebook.com/Supview" target="_blank"><i class="icon" data-icon=""></i></a>

<a href="http://www.twitter.com/Supview" target="_blank"><i class='icon' data-icon=""></i></a>

<a href="http://www.facebook.com/Supview" target="_blank"><i class="icon" data-icon=""></i></a>

<a href="http://www.twitter.com/Supview" target="_blank"><i class='icon' data-icon=""></i></a>

<a href="http://www.facebook.com/Supview" target="_blank"><i class="icon" data-icon=""></i></a>

<a href="http://www.facebook.com/Supview" target="_blank"><i class="icon" data-icon=""></i></a>

<a href="http://www.twitter.com/Supview" target="_blank"><i class='icon' data-icon=""></i></a>

<a href="http://www.twitter.com/Supview" target="_blank"><i class='icon' data-icon=""></i></a>

<a href="http://www.facebook.com/Supview" target="_blank"><i class="icon" data-icon=""></i></a>

<a href="http://www.twitter.com/Supview" target="_blank"><i class='icon' data-icon=""></i></a>

<a href="http://www.facebook.com/Supview" target="_blank"><i class="icon" data-icon=""></i></a>

<a href="http://www.twitter.com/Supview" target="_blank"><i class='icon' data-icon=""></i></a>

<a href="http://www.facebook.com/Supview" target="_blank"><i class="icon" data-icon=""></i></a>