Skip to content

Instantly share code, notes, and snippets.

@pgrimaud

pgrimaud/index.html.twig

Created January 14, 2019 01:53
Show Gist options
  • Save pgrimaud/559a9e0620e8953c80a1f737947b6afa to your computer and use it in GitHub Desktop.
Save pgrimaud/559a9e0620e8953c80a1f737947b6afa to your computer and use it in GitHub Desktop.
Download ZIP
index.html.twig
Raw
index.html.twig
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->
<link rel="icon" type="image/png" href="{{ asset('images/icons/favicon.png') }}"/>
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="{{ asset('vendor/bootstrap/css/bootstrap.min.css') }}">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="{{ asset('fonts/font-awesome-4.7.0/css/font-awesome.min.css') }}">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="{{ asset('fonts/themify/themify-icons.css') }}">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="{{ asset('fonts/Linearicons-Free-v1.0.0/icon-font.min.css') }}">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="{{ asset('fonts/elegant-font/html-css/style.css') }}">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="{{ asset('vendor/animate/animate.css') }}">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="{{ asset('vendor/css-hamburgers/hamburgers.min.css') }}">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="{{ asset('vendor/animsition/css/animsition.min.css') }}">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="{{ asset('vendor/select2/select2.min.css') }}">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="{{ asset('vendor/daterangepicker/daterangepicker.css') }}">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="{{ asset('vendor/slick/slick.css') }}">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="{{ asset('vendor/lightbox2/css/lightbox.min.css') }}">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="{{ asset('css/util.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/main.css') }}">
<!--===============================================================================================-->
</head>
<body class="animsition">
<!-- Header -->
<header class="header1">
<!-- Header desktop -->
<div class="container-menu-header">
<div class="wrap_header">
<!-- Logo -->
<a href="#" class="logo">
<img src="https://via.placeholder.com/120x27" alt="IMG-LOGO">
</a>
<!-- Menu -->
<div class="wrap_menu">
<nav class="menu">
<ul class="main_menu">
<li class="sale-noti">
<a href="#">Home</a>
</li>
<li>
<a href="#">Collections</a>
<ul class="sub_menu">
<li><a href="#">Collection 1</a></li>
<li><a href="#">Collection 2</a></li>
<li><a href="#">Collection 3</a></li>
</ul>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</nav>
</div>
<!-- Header Icon -->
<div class="header-icons">
<a href="#" class="header-wrapicon1 dis-block">
<img src="{{ asset('images/icons/icon-header-01.png') }}" class="header-icon1" alt="ICON">
</a>
<span class="linedivide1"></span>
<div class="header-wrapicon2">
<img src="{{ asset('images/icons/icon-header-02.png') }}" class="header-icon1 js-show-header-dropdown" alt="ICON">
<span class="header-icons-noti">0</span>
<!-- Header cart noti -->
<div class="header-cart header-dropdown">
<ul class="header-cart-wrapitem">
<li class="header-cart-item">
<div class="header-cart-item-img">
<img src="https://via.placeholder.com/320x320" alt="IMG">
</div>
<div class="header-cart-item-txt">
<a href="#" class="header-cart-item-name">
White Shirt With Pleat Detail Back
</a>
<span class="header-cart-item-info">
1 x $19.00
</span>
</div>
</li>
<li class="header-cart-item">
<div class="header-cart-item-img">
<img src="https://via.placeholder.com/320x320" alt="IMG">
</div>
<div class="header-cart-item-txt">
<a href="#" class="header-cart-item-name">
Converse All Star Hi Black Canvas
</a>
<span class="header-cart-item-info">
1 x $39.00
</span>
</div>
</li>
<li class="header-cart-item">
<div class="header-cart-item-img">
<img src="https://via.placeholder.com/320x320" alt="IMG">
</div>
<div class="header-cart-item-txt">
<a href="#" class="header-cart-item-name">
Nixon Porter Leather Watch In Tan
</a>
<span class="header-cart-item-info">
1 x $17.00
</span>
</div>
</li>
</ul>
<div class="header-cart-total">
Total: $75.00
</div>
<div class="header-cart-buttons">
<div class="header-cart-wrapbtn">
<!-- Button -->
<a href="#" class="flex-c-m size1 bg1 bo-rad-20 hov1 s-text1 trans-0-4">
View Cart
</a>
</div>
<div class="header-cart-wrapbtn">
<!-- Button -->
<a href="#" class="flex-c-m size1 bg1 bo-rad-20 hov1 s-text1 trans-0-4">
Check Out
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Header Mobile -->
<div class="wrap_header_mobile">
<!-- Logo moblie -->
<a href="#" class="logo-mobile">
<img src="https://via.placeholder.com/120x27" alt="IMG-LOGO">
</a>
<!-- Button show menu -->
<div class="btn-show-menu">
<!-- Header Icon mobile -->
<div class="header-icons-mobile">
<a href="#" class="header-wrapicon1 dis-block">
<img src="{{ asset('images/icons/icon-header-01.png') }}" class="header-icon1" alt="ICON">
</a>
<span class="linedivide2"></span>
<div class="header-wrapicon2">
<img src="{{ asset('images/icons/icon-header-02.png') }}" class="header-icon1 js-show-header-dropdown" alt="ICON">
<span class="header-icons-noti">0</span>
<!-- Header cart noti -->
<div class="header-cart header-dropdown">
<ul class="header-cart-wrapitem">
<li class="header-cart-item">
<div class="header-cart-item-img">
<img src="https://via.placeholder.com/320x320" alt="IMG">
</div>
<div class="header-cart-item-txt">
<a href="#" class="header-cart-item-name">
White Shirt With Pleat Detail Back
</a>
<span class="header-cart-item-info">
1 x $19.00
</span>
</div>
</li>
<li class="header-cart-item">
<div class="header-cart-item-img">
<img src="https://via.placeholder.com/320x320" alt="IMG">
</div>
<div class="header-cart-item-txt">
<a href="#" class="header-cart-item-name">
Converse All Star Hi Black Canvas
</a>
<span class="header-cart-item-info">
1 x $39.00
</span>
</div>
</li>
<li class="header-cart-item">
<div class="header-cart-item-img">
<img src="https://via.placeholder.com/320x320" alt="IMG">
</div>
<div class="header-cart-item-txt">
<a href="#" class="header-cart-item-name">
Nixon Porter Leather Watch In Tan
</a>
<span class="header-cart-item-info">
1 x $17.00
</span>
</div>
</li>
</ul>
<div class="header-cart-total">
Total: $75.00
</div>
<div class="header-cart-buttons">
<div class="header-cart-wrapbtn">
<!-- Button -->
<a href="cart.html" class="flex-c-m size1 bg1 bo-rad-20 hov1 s-text1 trans-0-4">
View Cart
</a>
</div>
<div class="header-cart-wrapbtn">
<!-- Button -->
<a href="#" class="flex-c-m size1 bg1 bo-rad-20 hov1 s-text1 trans-0-4">
Check Out
</a>
</div>
</div>
</div>
</div>
</div>
<div class="btn-show-menu-mobile hamburger hamburger--squeeze">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</div>
</div>
</div>
<!-- Menu Mobile -->
<div class="wrap-side-menu">
<nav class="side-menu">
<ul class="main-menu">
<li class="item-menu-mobile">
<a href="#">Home</a>
</li>
<li class="item-menu-mobile">
<a href="#">Collection</a>
<ul class="sub-menu">
<li><a href="#">Collection 1</a></li>
<li><a href="#">Collection 2</a></li>
<li><a href="#">Collection 3</a></li>
</ul>
<i class="arrow-main-menu fa fa-angle-right" aria-hidden="true"></i>
</li>
<li class="item-menu-mobile">
<a href="#">Contact</a>
</li>
</ul>
</nav>
</div>
</header>
<!-- Slide1 -->
<section class="slide1">
<div class="wrap-slick1">
<div class="slick1">
{% for i in range(1, 3) %}
<div class="item-slick1 item{{ i }}-slick1" style="background-image: url(https://via.placeholder.com/1920x570);">
<div class="wrap-content-slide1 sizefull flex-col-c-m p-l-15 p-r-15 p-t-150 p-b-170">
<span class="caption1-slide1 m-text1 t-center animated visible-false m-b-15"
data-appear="fadeInDown">
Women Collection 2018
</span>
<h2 class="caption2-slide1 xl-text1 t-center animated visible-false m-b-37" data-appear="fadeInUp">
New arrivals
</h2>
<div class="wrap-btn-slide1 w-size1 animated visible-false" data-appear="zoomIn">
<!-- Button -->
<a href="#" class="flex-c-m size2 bo-rad-23 s-text2 bgwhite hov1 trans-0-4">
Shop Now
</a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</section>
<!-- New Product -->
<section class="newproduct bgwhite p-t-45 p-b-105">
<div class="container">
<div class="sec-title p-b-60">
<h3 class="m-text5 t-center">
Featured Products
</h3>
</div>
<!-- Slide2 -->
<div class="wrap-slick2">
<div class="slick2">
{% for i in range(0, 7) %}
<div class="item-slick2 p-l-15 p-r-15">
<!-- Block2 -->
<div class="block2">
<div class="block2-img wrap-pic-w of-hidden pos-relative">
<img src="https://via.placeholder.com/720x960" alt="IMG-PRODUCT">
<div class="block2-overlay trans-0-4">
<div class="block2-btn-addcart w-size1 trans-0-4">
<!-- Button -->
<button class="flex-c-m size1 bg4 bo-rad-23 hov1 s-text1 trans-0-4">
Add to Cart
</button>
</div>
</div>
</div>
<div class="block2-txt p-t-20">
<a href="#" class="block2-name dis-block s-text3 p-b-5">
Product #{{ i+1 }}
</a>
<span class="block2-price m-text6 p-r-5">
100€
</span>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</section>
<!-- Banner2 -->
<section class="banner2 bg5 p-t-55 p-b-55">
<div class="container">
<div class="row">
<div class="col-sm-10 col-md-8 col-lg-6 m-l-r-auto p-t-15 p-b-15">
<div class="hov-img-zoom pos-relative">
<img src="https://via.placeholder.com/720x539" alt="IMG-BANNER">
<div class="ab-t-l sizefull flex-col-c-m p-l-15 p-r-15">
<span class="m-text9 p-t-45 fs-20-sm">
The Beauty
</span>
<h3 class="l-text1 fs-35-sm">
Lookbook
</h3>
<a href="#" class="s-text4 hov2 p-t-20 ">
View Collection
</a>
</div>
</div>
</div>
<div class="col-sm-10 col-md-8 col-lg-6 m-l-r-auto p-t-15 p-b-15">
<div class="hov-img-zoom pos-relative">
<img src="https://via.placeholder.com/720x539" alt="IMG-BANNER">
<div class="ab-t-l sizefull flex-col-c-m p-l-15 p-r-15">
<span class="m-text9 p-t-45 fs-20-sm">
The Beauty
</span>
<h3 class="l-text1 fs-35-sm">
Lookbook
</h3>
<a href="#" class="s-text4 hov2 p-t-20 ">
View Collection
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Shipping -->
<section class="shipping bgwhite p-t-62 p-b-46">
<div class="flex-w p-l-15 p-r-15">
<div class="flex-col-c w-size5 p-l-15 p-r-15 p-t-16 p-b-15 respon1">
<h4 class="m-text12 t-center">
Free Delivery Worldwide
</h4>
<a href="#" class="s-text11 t-center">
Click here for more info
</a>
</div>
<div class="flex-col-c w-size5 p-l-15 p-r-15 p-t-16 p-b-15 bo2 respon2">
<h4 class="m-text12 t-center">
30 Days Return
</h4>
<span class="s-text11 t-center">
Simply return it within 30 days for an exchange.
</span>
</div>
<div class="flex-col-c w-size5 p-l-15 p-r-15 p-t-16 p-b-15 respon1">
<h4 class="m-text12 t-center">
Store Opening
</h4>
<span class="s-text11 t-center">
Shop open from Monday to Sunday
</span>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg6 p-t-45 p-b-43 p-l-45 p-r-45">
<div class="flex-w p-b-90">
<div class="w-size6 p-t-30 p-l-15 p-r-15 respon3">
</div>
<div class="w-size7 p-t-30 p-l-15 p-r-15 respon4">
<h4 class="s-text12 p-b-30">
Categories
</h4>
<ul>
<li class="p-b-9">
<a href="#" class="s-text7">
Men
</a>
</li>
<li class="p-b-9">
<a href="#" class="s-text7">
Women
</a>
</li>
<li class="p-b-9">
<a href="#" class="s-text7">
Dresses
</a>
</li>
<li class="p-b-9">
<a href="#" class="s-text7">
Sunglasses
</a>
</li>
</ul>
</div>
<div class="w-size7 p-t-30 p-l-15 p-r-15 respon4">
<h4 class="s-text12 p-b-30">
Links
</h4>
<ul>
<li class="p-b-9">
<a href="#" class="s-text7">
Search
</a>
</li>
<li class="p-b-9">
<a href="#" class="s-text7">
About Us
</a>
</li>
<li class="p-b-9">
<a href="#" class="s-text7">
Contact Us
</a>
</li>
<li class="p-b-9">
<a href="#" class="s-text7">
Returns
</a>
</li>
</ul>
</div>
<div class="w-size7 p-t-30 p-l-15 p-r-15 respon4">
<h4 class="s-text12 p-b-30">
Help
</h4>
<ul>
<li class="p-b-9">
<a href="#" class="s-text7">
Track Order
</a>
</li>
<li class="p-b-9">
<a href="#" class="s-text7">
Returns
</a>
</li>
<li class="p-b-9">
<a href="#" class="s-text7">
Shipping
</a>
</li>
<li class="p-b-9">
<a href="#" class="s-text7">
FAQs
</a>
</li>
</ul>
</div>
</div>
<div class="t-center p-l-15 p-r-15">
<a href="#">
<img class="h-size2" src="{{ asset('images/icons/paypal.png') }}" alt="IMG-PAYPAL">
</a>
<a href="#">
<img class="h-size2" src="{{ asset('images/icons/visa.png') }}" alt="IMG-VISA">
</a>
<a href="#">
<img class="h-size2" src="{{ asset('images/icons/mastercard.png') }}" alt="IMG-MASTERCARD">
</a>
<a href="#">
<img class="h-size2" src="{{ asset('images/icons/express.png') }}" alt="IMG-EXPRESS">
</a>
<a href="#">
<img class="h-size2" src="{{ asset('images/icons/discover.png') }}" alt="IMG-DISCOVER">
</a>
<div class="t-center s-text8 p-t-20">
Copyright © 2018 All rights reserved. | This template is made with
<i class="fa fa-heart-o" aria-hidden="true"></i> by
<a href="https://colorlib.com" target="_blank">Colorlib</a>
</div>
</div>
</footer>
<!-- Back to top -->
<div class="btn-back-to-top bg0-hov" id="myBtn">
<span class="symbol-btn-back-to-top">
<i class="fa fa-angle-double-up" aria-hidden="true"></i>
</span>
</div>
<!-- Container Selection1 -->
<div id="dropDownSelect1"></div>
<!--===============================================================================================-->
<script type="text/javascript" src="{{ asset('vendor/jquery/jquery-3.2.1.min.js') }}"></script>
<!--===============================================================================================-->
<script type="text/javascript" src="{{ asset('vendor/animsition/js/animsition.min.js') }}"></script>
<!--===============================================================================================-->
<script type="text/javascript" src="{{ asset('vendor/bootstrap/js/popper.js') }}"></script>
<script type="text/javascript" src="{{ asset('vendor/bootstrap/js/bootstrap.min.js') }}"></script>
<!--===============================================================================================-->
<script type="text/javascript" src="{{ asset('vendor/select2/select2.min.js') }}"></script>
<script type="text/javascript">
$(".selection-1").select2({
minimumResultsForSearch: 20,
dropdownParent: $('#dropDownSelect1')
});
</script>
<!--===============================================================================================-->
<script type="text/javascript" src="{{ asset('vendor/slick/slick.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/slick-custom.js') }}"></script>
<!--===============================================================================================-->
<script type="text/javascript" src="{{ asset('vendor/countdowntime/countdowntime.js') }}"></script>
<!--===============================================================================================-->
<script type="text/javascript" src="{{ asset('vendor/lightbox2/js/lightbox.min.js') }}"></script>
<!--===============================================================================================-->
<script type="text/javascript" src="{{ asset('vendor/sweetalert/sweetalert.min.js') }}"></script>
<script type="text/javascript">
$('.block2-btn-addcart').each(function () {
var nameProduct = $(this).parent().parent().parent().find('.block2-name').html();
$(this).on('click', function () {
swal(nameProduct, "is added to cart !", "success");
});
});
$('.block2-btn-addwishlist').each(function () {
var nameProduct = $(this).parent().parent().parent().find('.block2-name').html();
$(this).on('click', function () {
swal(nameProduct, "is added to wishlist !", "success");
});
});
</script>
<!--===============================================================================================-->
<script src="{{ asset('js/main.js') }}"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment