Skip to content

Instantly share code, notes, and snippets.

@kaoussi
Created April 24, 2018 09:20
Show Gist options
  • Select an option

  • Save kaoussi/9e9f6560de40d4d62f8ba6e3433284a0 to your computer and use it in GitHub Desktop.

Select an option

Save kaoussi/9e9f6560de40d4d62f8ba6e3433284a0 to your computer and use it in GitHub Desktop.
9sos html
<!DOCTYPE HTML>
<!--
Aesthetic by gettemplates.co
Twitter: http://twitter.com/gettemplateco
URL: http://gettemplates.co
-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Q'SOS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Free HTML5 Website Template by GetTemplates.co" />
<meta name="keywords" content="free website templates, free html5, free template, free bootstrap, free website template, html5, css3, mobile first, responsive" />
<meta name="author" content="GetTemplates.co" />
<!-- Facebook and Twitter integration -->
<meta property="og:title" content=""/>
<meta property="og:image" content=""/>
<meta property="og:url" content=""/>
<meta property="og:site_name" content=""/>
<meta property="og:description" content=""/>
<meta name="twitter:title" content="" />
<meta name="twitter:image" content="" />
<meta name="twitter:url" content="" />
<meta name="twitter:card" content="" />
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">
<!-- Animate.css -->
<link rel="stylesheet" href="css/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="css/icomoon.css">
<!-- Themify Icons-->
<link rel="stylesheet" href="css/themify-icons.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Magnific Popup -->
<link rel="stylesheet" href="css/magnific-popup.css">
<!-- Bootstrap DateTimePicker -->
<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css">
<!-- Owl Carousel -->
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="css/style.css">
<!-- Modernizr JS -->
<script src="js/modernizr-2.6.2.min.js"></script>
<!-- FOR IE9 below -->
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="gtco-loader"></div>
<div id="page">
<!-- <div class="page-inner"> -->
<nav class="gtco-nav" role="navigation">
<div class="gtco-container">
<div class="row">
<div class="col-sm-4 col-xs-12">
<div id="gtco-logo"><a href="index.html">Q'SOS <em>.</em></a></div>
</div>
<div class="col-xs-8 text-right menu-1">
<ul>
<li><a href="menu.html">Menu</a></li>
<li class="has-dropdown">
<a href="services.html">Services</a>
<ul class="dropdown">
<li><a href="#">Plats pré-préparés</a></li>
<li><a href="#">Sur commande</a></li>
<li><a href="#">Spécial fêtes</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
<li class="btn-cta"><a href="#"><span>Reservation</span></a></li>
</ul>
</div>
</div>
</div>
</nav>
<header id="gtco-header" class="gtco-cover gtco-cover-md" role="banner" style="background-image: url(images/img_bg_1.jpg)" data-stellar-background-ratio="0.5">
<div class="overlay"></div>
<div class="gtco-container">
<div class="row">
<div class="col-md-12 col-md-offset-0 text-left">
<div class="row row-mt-15em">
<div class="col-md-7 mt-text animate-box" data-animate-effect="fadeInUp">
<span class="intro-text-small">Le meilleur service chez <a href="http://gettemplates.co" target="_blank">qsos.ma</a></span>
<h1 class="cursive-font">Le regal de manger...</h1>
</div>
<div class="col-md-4 col-md-push-1 animate-box" data-animate-effect="fadeInRight">
<div class="form-wrap">
<div class="tab">
<div class="tab-content">
<div class="tab-content-inner active" data-content="signup">
<h3 class="cursive-font">Table Reservation</h3>
<form action="#">
<div class="row form-group">
<div class="col-md-12">
<label for="activities">Persons</label>
<select name="#" id="activities" class="form-control">
<option value="">Persons</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5+</option>
</select>
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<label for="date-start">Date</label>
<input type="text" id="date" class="form-control">
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<label for="date-start">Time</label>
<input type="text" id="time" class="form-control">
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<input type="submit" class="btn btn-primary btn-block" value="Reserve Now">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="gtco-section">
<div class="gtco-container">
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center gtco-heading">
<h2 class="cursive-font primary-color">Populaire</h2>
<p>Savourez nos plats les plus demandés</p>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6">
<a href="images/img_1.jpg" class="fh5co-card-item image-popup">
<figure>
<div class="overlay"><i class="ti-plus"></i></div>
<img src="images/img_1.jpg" alt="Image" class="img-responsive">
</figure>
<div class="fh5co-text">
<h2>Champignon français</h2>
<p>Les champignons les plus frais au coeur de votre assiette</p>
<p><span class="price cursive-font">$19.15</span></p>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<a href="images/img_2.jpg" class="fh5co-card-item image-popup">
<figure>
<div class="overlay"><i class="ti-plus"></i></div>
<img src="images/img_2.jpg" alt="Image" class="img-responsive">
</figure>
<div class="fh5co-text">
<h2>Cheese and Garlic Toast</h2>
<p>Far far away, behind the word mountains, far from the countries Vokalia..</p>
<p><span class="price cursive-font">$20.99</span></p>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<a href="images/img_3.jpg" class="fh5co-card-item image-popup">
<figure>
<div class="overlay"><i class="ti-plus"></i></div>
<img src="images/img_3.jpg" alt="Image" class="img-responsive">
</figure>
<div class="fh5co-text">
<h2>Grilled Chiken Salad</h2>
<p>Far far away, behind the word mountains, far from the countries Vokalia..</p>
<p><span class="price cursive-font">$8.99</span></p>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<a href="images/img_4.jpg" class="fh5co-card-item image-popup">
<figure>
<div class="overlay"><i class="ti-plus"></i></div>
<img src="images/img_4.jpg" alt="Image" class="img-responsive">
</figure>
<div class="fh5co-text">
<h2>Organic Egg</h2>
<p>Far far away, behind the word mountains, far from the countries Vokalia..</p>
<p><span class="price cursive-font">$12.99</span></p>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<a href="images/img_5.jpg" class="fh5co-card-item image-popup">
<figure>
<div class="overlay"><i class="ti-plus"></i></div>
<img src="images/img_5.jpg" alt="Image" class="img-responsive">
</figure>
<div class="fh5co-text">
<h2>Tomato Soup with Chicken</h2>
<p>Far far away, behind the word mountains, far from the countries Vokalia..</p>
<p><span class="price cursive-font">$23.10</span></p>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<a href="images/img_6.jpg" class="fh5co-card-item image-popup">
<figure>
<div class="overlay"><i class="ti-plus"></i></div>
<img src="images/img_6.jpg" alt="Image" class="img-responsive">
</figure>
<div class="fh5co-text">
<h2>Salad with Crispy Chicken</h2>
<p>Far far away, behind the word mountains, far from the countries Vokalia..</p>
<p><span class="price cursive-font">$5.59</span></p>
</div>
</a>
</div>
</div>
</div>
</div>
<div id="gtco-features">
<div class="gtco-container">
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center gtco-heading animate-box">
<h2 class="cursive-font">Our Services</h2>
<p>Dignissimos asperiores vitae velit veniam totam fuga molestias accusamus alias autem provident. Odit ab aliquam dolor eius.</p>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="feature-center animate-box" data-animate-effect="fadeIn">
<span class="icon">
<i class="ti-face-smile"></i>
</span>
<h3>Happy People</h3>
<p>Dignissimos asperiores vitae velit veniam totam fuga molestias accusamus alias autem provident. Odit ab aliquam dolor eius.</p>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="feature-center animate-box" data-animate-effect="fadeIn">
<span class="icon">
<i class="ti-thought"></i>
</span>
<h3>Creative Culinary</h3>
<p>Dignissimos asperiores vitae velit veniam totam fuga molestias accusamus alias autem provident. Odit ab aliquam dolor eius.</p>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="feature-center animate-box" data-animate-effect="fadeIn">
<span class="icon">
<i class="ti-truck"></i>
</span>
<h3>Food Delivery</h3>
<p>Dignissimos asperiores vitae velit veniam totam fuga molestias accusamus alias autem provident. Odit ab aliquam dolor eius.</p>
</div>
</div>
</div>
</div>
</div>
<div class="gtco-cover gtco-cover-sm" style="background-image: url(images/img_bg_1.jpg)" data-stellar-background-ratio="0.5">
<div class="overlay"></div>
<div class="gtco-container text-center">
<div class="display-t">
<div class="display-tc">
<h1>&ldquo; Their high quality of service makes me back over and over again!&rdquo;</h1>
<p>&mdash; John Doe, CEO of XYZ Co.</p>
</div>
</div>
</div>
</div>
<div id="gtco-counter" class="gtco-section">
<div class="gtco-container">
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center gtco-heading animate-box">
<h2 class="cursive-font primary-color">Fun Facts</h2>
<p>Dignissimos asperiores vitae velit veniam totam fuga molestias accusamus alias autem provident. Odit ab aliquam dolor eius.</p>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6 animate-box" data-animate-effect="fadeInUp">
<div class="feature-center">
<span class="counter js-counter" data-from="0" data-to="5" data-speed="5000" data-refresh-interval="50">1</span>
<span class="counter-label">Avg. Rating</span>
</div>
</div>
<div class="col-md-3 col-sm-6 animate-box" data-animate-effect="fadeInUp">
<div class="feature-center">
<span class="counter js-counter" data-from="0" data-to="43" data-speed="5000" data-refresh-interval="50">1</span>
<span class="counter-label">Food Types</span>
</div>
</div>
<div class="col-md-3 col-sm-6 animate-box" data-animate-effect="fadeInUp">
<div class="feature-center">
<span class="counter js-counter" data-from="0" data-to="32" data-speed="5000" data-refresh-interval="50">1</span>
<span class="counter-label">Chef Cook</span>
</div>
</div>
<div class="col-md-3 col-sm-6 animate-box" data-animate-effect="fadeInUp">
<div class="feature-center">
<span class="counter js-counter" data-from="0" data-to="1985" data-speed="5000" data-refresh-interval="50">1</span>
<span class="counter-label">Year Started</span>
</div>
</div>
</div>
</div>
</div>
<div id="gtco-subscribe">
<div class="gtco-container">
<div class="row animate-box">
<div class="col-md-8 col-md-offset-2 text-center gtco-heading">
<h2 class="cursive-font">Subscribe</h2>
<p>Be the first to know about the new templates.</p>
</div>
</div>
<div class="row animate-box">
<div class="col-md-8 col-md-offset-2">
<form class="form-inline">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label for="email" class="sr-only">Email</label>
<input type="email" class="form-control" id="email" placeholder="Your Email">
</div>
</div>
<div class="col-md-6 col-sm-6">
<button type="submit" class="btn btn-default btn-block">Subscribe</button>
</div>
</form>
</div>
</div>
</div>
</div>
<footer id="gtco-footer" role="contentinfo" style="background-image: url(images/img_bg_1.jpg)" data-stellar-background-ratio="0.5">
<div class="overlay"></div>
<div class="gtco-container">
<div class="row row-pb-md">
<div class="col-md-12 text-center">
<div class="gtco-widget">
<h3>Get In Touch</h3>
<ul class="gtco-quick-contact">
<li><a href="#"><i class="icon-phone"></i> +1 234 567 890</a></li>
<li><a href="#"><i class="icon-mail2"></i> info@GetTemplates.co</a></li>
<li><a href="#"><i class="icon-chat"></i> Live Chat</a></li>
</ul>
</div>
<div class="gtco-widget">
<h3>Get Social</h3>
<ul class="gtco-social-icons">
<li><a href="#"><i class="icon-twitter"></i></a></li>
<li><a href="#"><i class="icon-facebook"></i></a></li>
<li><a href="#"><i class="icon-linkedin"></i></a></li>
<li><a href="#"><i class="icon-dribbble"></i></a></li>
</ul>
</div>
</div>
<div class="col-md-12 text-center copyright">
<p><small class="block">&copy; 2016 Free HTML5. All Rights Reserved.</small>
<small class="block">Designed by <a href="http://gettemplates.co/" target="_blank">GetTemplates.co</a> Demo Images: <a href="http://unsplash.com/" target="_blank">Unsplash</a></small></p>
</div>
</div>
</div>
</footer>
<!-- </div> -->
</div>
<div class="gototop js-top">
<a href="#" class="js-gotop"><i class="icon-arrow-up"></i></a>
</div>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="js/jquery.waypoints.min.js"></script>
<!-- Carousel -->
<script src="js/owl.carousel.min.js"></script>
<!-- countTo -->
<script src="js/jquery.countTo.js"></script>
<!-- Stellar Parallax -->
<script src="js/jquery.stellar.min.js"></script>
<!-- Magnific Popup -->
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/magnific-popup-options.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>
<!-- Main -->
<script src="js/main.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment