déplacement du site Zaap sur le domaine principal
This commit is contained in:
parent
38e76f59c8
commit
04866dc178
1
branches/zaap-sufokien/index.php
Normal file
1
branches/zaap-sufokien/index.php
Normal file
@ -0,0 +1 @@
|
||||
<?php header('Location: http://zaap.camelia-studio.org/v3/'); ?>
|
||||
1
branches/zaap-sufokien/v2/index.php
Normal file
1
branches/zaap-sufokien/v2/index.php
Normal file
@ -0,0 +1 @@
|
||||
<?php header('Location: http://zaap.camelia-studio.org/v3/'); ?>
|
||||
157
branches/zaap-sufokien/v3/about.html
Normal file
157
branches/zaap-sufokien/v3/about.html
Normal file
@ -0,0 +1,157 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<title>Le Zaap Sufokien</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="description" content="Zaap Sufokien, communauté multi-jeux de l'association Camélia Studio.">
|
||||
<meta name="keywords" content="zaap sufokien, association, camélia studio, jeu vidéo, dofus, honkai impact 3rd, genshin impact, gardian tales, epic seven">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
<!-- Stylesheets -->
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css"/>
|
||||
<link rel="stylesheet" href="css/font-awesome.min.css"/>
|
||||
<link rel="stylesheet" href="css/themify-icons.css"/>
|
||||
<link rel="stylesheet" href="css/accordion.css"/>
|
||||
<link rel="stylesheet" href="css/owl.carousel.min.css"/>
|
||||
|
||||
<!-- Main Stylesheets -->
|
||||
<link rel="stylesheet" href="css/style.css"/>
|
||||
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
||||
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!-- Page Preloder -->
|
||||
<div id="preloder">
|
||||
<div class="loader"></div>
|
||||
</div>
|
||||
|
||||
<!-- Offcanvas Menu Section -->
|
||||
<div class="menu-wrapper">
|
||||
<div class="menu-switch">
|
||||
<i class="ti-menu"></i>
|
||||
</div>
|
||||
<div class="menu-social-warp">
|
||||
<div class="menu-social">
|
||||
<a href="https://www.facebook.com/lezaapsufokien/?ref=bookmarks" target="_blank"><i class="ti-facebook"></i></a>
|
||||
<a href="https://twitter.com/Zaap_Sufokien" target="_blank"><i class="ti-twitter-alt"></i></a>
|
||||
<a href="https://www.twitch.tv/zaap_sufokien" target="_blank"><i class="ti-tumblr-alt"></i></a>
|
||||
<a href="https://www.youtube.com/channel/UCkhY6tQxoLPKEQ4xAoWlclA" target="_blank"><i class="ti-youtube"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="side-menu-wrapper">
|
||||
<div class="sm-header">
|
||||
<div class="menu-close">
|
||||
<i class="ti-arrow-left"></i>
|
||||
</div>
|
||||
<a href="index.html" class="site-logo">
|
||||
<img src="img/logo.jpg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<nav class="main-menu">
|
||||
<ul>
|
||||
<li><a href="index.html" class="active">Accueil</a></li>
|
||||
<li><a href="about.html">Qui sommes nous ?</a></li>
|
||||
<li><a href="https://ico.camelia-studio.org" target="_blank">Galerie ↗</a></li>
|
||||
<li><a href="https://dicord.gg/nBuZ9vJ" target="_blank">Discord ↗</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="sm-footer">
|
||||
<div class="sm-socail">
|
||||
<a href="https://www.facebook.com/lezaapsufokien/?ref=bookmarks" target="_blank"><i class="ti-facebook"></i></a>
|
||||
<a href="https://twitter.com/Zaap_Sufokien" target="_blank"><i class="ti-twitter-alt"></i></a>
|
||||
<a href="https://www.youtube.com/channel/UCkhY6tQxoLPKEQ4xAoWlclA" target="_blank"><i class="ti-youtube"></i></a>
|
||||
</div>
|
||||
<div class="copyright-text"><p><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
|
||||
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made by <a href="https://colorlib.com" target="_blank">Colorlib</a>
|
||||
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Offcanvas Menu Section end -->
|
||||
|
||||
<!-- About Section end -->
|
||||
<section class="about-section">
|
||||
<div class="about-warp">
|
||||
<div class="about-left">
|
||||
<div class="about-img">
|
||||
<img src="img/about.jpg" alt="">
|
||||
</div>
|
||||
<div class="profile-text text-white">
|
||||
<h2>Selamat pagi !</h2>
|
||||
<h2>C'est <strong>Esenjin Asakha</strong> !</h2>
|
||||
<p>Je suis le fondateur de la communauté du <strong>Zaap Sufokien</strong> et l'un de ses responsables actuels. J'ai créé ce groupe dans le but de partager de palpitantes aventures avec des aventuriers venus de tous les horizons !</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about-right">
|
||||
<div class="about-text">
|
||||
<h2>Qui sommes nous ?</h2>
|
||||
<p><strong>Le Zaap Sufokien</strong> est une communauté de joueurs, venant de divers MMO. Fondée en 2007 avec une guilde sur <strong>Dofus</strong>, elle s'est vite étendue à d'autres jeux en ligne.</p>
|
||||
<p>Notre objectif est d'être un lieu d'accroche calme et posé, où nos membres peuvent évoluer à leur rythme, sans pression de performance ou de score. Chez nous, l'aspect familiale est primordial et la convivialité est un pilier sur lequel nous reposons. Loin d'être des mots en l'air, nous faisons chaque jour notre possible, pour que nos membres passent du bon temps chez nous.</p>
|
||||
<p>Le fun avant tout !</p>
|
||||
</br>
|
||||
<p><center><img src="img/about+.gif"></center></p>
|
||||
</br>
|
||||
<h2>Où nous trouver ?</h2>
|
||||
<p>Nous sommes actuellement présent sur ces jeux-ci :</p>
|
||||
<ul>
|
||||
<li><strong>Dofus</strong> | <strong>La Compagnie de Sufokia</strong> (depuis 2007)</li>
|
||||
<li><strong>Honkai Impact 3rd</strong> | <strong>Amour&Waifus</strong> (depuis 2019)</li>
|
||||
<li><strong>Epic 7</strong> | <strong>ToolToulTo</strong> (depuis 2020)</strong></li>
|
||||
<li><strong>Genshin Impact</strong> | <strong>Larmes salées</strong> (depuis 2020)</li>
|
||||
<li><strong>Guardian Tales</strong> | <strong>Cercle_des_Cendres</strong> (depuis 2021)</li>
|
||||
</ul>
|
||||
</br>
|
||||
<p>Nous étions également présent là bas par le passé :</p>
|
||||
<ul>
|
||||
<li><strong>OGame</strong> | <strong>Le clan des Yokaï</strong> (2010~2012)</li>
|
||||
<li><strong>Minecraft</strong> | <strong>Mini Team</strong> (2010~2013)</li>
|
||||
<li><strong>ArcheAge</strong> | <strong>La Compagnie d'Hasla</strong> (2014~2016)</li>
|
||||
<li><strong>TERA</strong> | <strong>Serpiens Sapientae</strong> (2015~2016)</li>
|
||||
<li><strong>Wakfu</strong> | <strong>La Compagnie des Abysses</strong> (2012~2017)</li>
|
||||
<li><strong>TESO</strong> | <strong>Le Cœur d'Euclase</strong> (2017~2017)</li>
|
||||
<li><strong>Black Desert Online</strong> | <strong>Lia</strong> (2016~2019)</li>
|
||||
<li><strong>Overwatch</strong> | <strong>Guérande</strong> (2018~2020)</li>
|
||||
<li><strong>Destiny 2</strong> | <strong>Froide lumière du Soleil</strong> (2018~2020)</li>
|
||||
<li><strong>Monster Hunter World</strong> | <strong>0292</strong> (2019~2021)</li>
|
||||
<li><strong>Illusion Connect</strong> | <strong>Eliana</strong> (2020~2021)</li>
|
||||
</ul>
|
||||
<p><i>Plusieurs de nos joueurs peuvent encore se trouver sur ces derniers, mais plus autant qu'à la belle époque !</i></p>
|
||||
</br>
|
||||
<h2>Nos projets en collaboration avec la branche <strong>CILA</strong> de notre association</h2>
|
||||
<ul>
|
||||
<li><a href="https://zaap.camelia-studio.org/roulette-donjons/" target="_blank">Roulette à donjons</a> | Outil conçu pour nos joueurs sur Dofus. Il sélectionne un donjon au hasard dans la fourchette de niveaux choisie.</li>
|
||||
<li><a href="https://ico.camelia-studio.org/" target="_blank">ICO</a> | Il s'agit de la galerie d'images de l'association Camélia Studio, à laquelle nous appartenons. Vous y trouverez un dossier pour chacun de nos jeux.</li>
|
||||
</ul>
|
||||
</br>
|
||||
<h2>Sources des images en une</h2>
|
||||
<ul>
|
||||
<li><a href="https://twitter.com/AntoineMazMaz/status/1295407941407866880" target="_blank">Dofus</a></li>
|
||||
<li><a href="https://pixiv.net/i/76003872" target="_blank">Honkai Impact 3rd</a></li>
|
||||
<li><a href="https://pixiv.net/i/84103588" target="_blank">Epic 7</a></li>
|
||||
<li><a href="https://twitter.com/jeonghee1414/status/1310474369307537410" target="_blank">Genshin Impact</a></li>
|
||||
<li><a href="https://pixiv.net/i/86628787" target="_blank">Guardian Tales</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- About Section end -->
|
||||
|
||||
<!--====== Javascripts & Jquery ======-->
|
||||
<script src="js/vendor/jquery-3.2.1.min.js"></script>
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<script src="js/owl.carousel.min.js"></script>
|
||||
<script src="js/imagesloaded.pkgd.min.js"></script>
|
||||
<script src="js/isotope.pkgd.min.js"></script>
|
||||
<script src="js/jquery.nicescroll.min.js"></script>
|
||||
<script src="js/circle-progress.min.js"></script>
|
||||
<script src="js/pana-accordion.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
51
branches/zaap-sufokien/v3/css/accordion.css
Normal file
51
branches/zaap-sufokien/v3/css/accordion.css
Normal file
@ -0,0 +1,51 @@
|
||||
.pana-accordion {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.pana-accordion .pana-accordion-wrap {
|
||||
margin-left: -1px;
|
||||
position: relative;
|
||||
width: 300%
|
||||
}
|
||||
|
||||
.pana-accordion .pana-accordion-wrap .pana-accordion-item {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-position: top left -200px;
|
||||
transition: background-position 0.4s;
|
||||
|
||||
}
|
||||
.pana-accordion .pana-accordion-wrap .pana-accordion-item.active {
|
||||
background-position: top center;
|
||||
}
|
||||
|
||||
.pana-accordion .pana-accordion-wrap .pana-accordion-item .pana-accordion-mask {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
background-color: #000;
|
||||
filter: alpha(opacity=40);
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
|
||||
-webkit-opacity: 0.4;
|
||||
-khtml-opacity: 0.4;
|
||||
-moz-opacity: 0.4;
|
||||
-ms-opacity: 0.4;
|
||||
-o-opacity: 0.4;
|
||||
opacity: 0.4
|
||||
}
|
||||
|
||||
.pana-accordion .pana-accordion-wrap .pana-accordion-item.active .pana-accordion-mask {
|
||||
display: none
|
||||
}
|
||||
3494
branches/zaap-sufokien/v3/css/animate.css
vendored
Normal file
3494
branches/zaap-sufokien/v3/css/animate.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
7
branches/zaap-sufokien/v3/css/bootstrap.min.css
vendored
Normal file
7
branches/zaap-sufokien/v3/css/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
4
branches/zaap-sufokien/v3/css/font-awesome.min.css
vendored
Normal file
4
branches/zaap-sufokien/v3/css/font-awesome.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1616
branches/zaap-sufokien/v3/css/fresco.css
Normal file
1616
branches/zaap-sufokien/v3/css/fresco.css
Normal file
File diff suppressed because it is too large
Load Diff
BIN
branches/zaap-sufokien/v3/css/fresco/skins/fresco/sprite.png
Normal file
BIN
branches/zaap-sufokien/v3/css/fresco/skins/fresco/sprite.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
2111
branches/zaap-sufokien/v3/css/fresco/skins/fresco/sprite.svg
Normal file
2111
branches/zaap-sufokien/v3/css/fresco/skins/fresco/sprite.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 144 KiB |
6
branches/zaap-sufokien/v3/css/owl.carousel.min.css
vendored
Normal file
6
branches/zaap-sufokien/v3/css/owl.carousel.min.css
vendored
Normal file
@ -0,0 +1,6 @@
|
||||
/**
|
||||
* Owl Carousel v2.3.4
|
||||
* Copyright 2013-2018 David Deutsch
|
||||
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
|
||||
*/
|
||||
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}
|
||||
1825
branches/zaap-sufokien/v3/css/style.css
Normal file
1825
branches/zaap-sufokien/v3/css/style.css
Normal file
File diff suppressed because it is too large
Load Diff
1081
branches/zaap-sufokien/v3/css/themify-icons.css
Normal file
1081
branches/zaap-sufokien/v3/css/themify-icons.css
Normal file
File diff suppressed because it is too large
Load Diff
265
branches/zaap-sufokien/v3/divers/blog-details.html
Normal file
265
branches/zaap-sufokien/v3/divers/blog-details.html
Normal file
@ -0,0 +1,265 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zxx">
|
||||
<head>
|
||||
<title>Tulen | Photography HTML Template</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="description" content="Tulen Photography HTML Template"">
|
||||
<meta name="keywords" content="photo, html">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- Stylesheets -->
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css"/>
|
||||
<link rel="stylesheet" href="css/font-awesome.min.css"/>
|
||||
<link rel="stylesheet" href="css/themify-icons.css"/>
|
||||
<link rel="stylesheet" href="css/accordion.css"/>
|
||||
<link rel="stylesheet" href="css/fresco.css"/>
|
||||
<link rel="stylesheet" href="css/owl.carousel.min.css"/>
|
||||
|
||||
<!-- Main Stylesheets -->
|
||||
<link rel="stylesheet" href="css/style.css"/>
|
||||
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
||||
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!-- Page Preloder -->
|
||||
<div id="preloder">
|
||||
<div class="loader"></div>
|
||||
</div>
|
||||
|
||||
<!-- Offcanvas Menu Section -->
|
||||
<div class="menu-wrapper">
|
||||
<div class="menu-switch">
|
||||
<i class="ti-menu"></i>
|
||||
</div>
|
||||
<div class="menu-social-warp">
|
||||
<div class="menu-social">
|
||||
<a href="#"><i class="ti-facebook"></i></a>
|
||||
<a href="#"><i class="ti-twitter-alt"></i></a>
|
||||
<a href="#"><i class="ti-linkedin"></i></a>
|
||||
<a href="#"><i class="ti-instagram"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="side-menu-wrapper">
|
||||
<div class="sm-header">
|
||||
<div class="menu-close">
|
||||
<i class="ti-arrow-left"></i>
|
||||
</div>
|
||||
<a href="index.html" class="site-logo">
|
||||
<img src="img/logo.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<nav class="main-menu">
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
<li><a href="gallery.html">Gallery</a></li>
|
||||
<li><a href="blog.html" class="active">Blog</a></li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="sm-footer">
|
||||
<div class="sm-socail">
|
||||
<a href="#"><i class="ti-facebook"></i></a>
|
||||
<a href="#"><i class="ti-twitter-alt"></i></a>
|
||||
<a href="#"><i class="ti-linkedin"></i></a>
|
||||
<a href="#"><i class="ti-instagram"></i></a>
|
||||
</div>
|
||||
<div class="copyright-text"><p><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
|
||||
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="ti-heart" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
|
||||
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Offcanvas Menu Section end -->
|
||||
|
||||
<!-- Blog Section end -->
|
||||
<section class="blog-details">
|
||||
<div class="container">
|
||||
<div class="single-blog-page">
|
||||
<div class="blog-metas">
|
||||
<div class="blog-meta">May 19, 2019</div>
|
||||
<div class="blog-meta">3 Comment</div>
|
||||
</div>
|
||||
<h2>The Female Body Shape Men Find</h2>
|
||||
<div class="blog-thumb">
|
||||
<div class="thumb-cata">people</div>
|
||||
<img src="img/blog-details/thumbnail.jpg" alt="">
|
||||
</div>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
|
||||
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
|
||||
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo</p>
|
||||
<div class="row blog-gallery">
|
||||
<div class="col-lg-3 p-0">
|
||||
<div class="bg-item">
|
||||
<img src="img/blog-details/1.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-9 p-0">
|
||||
<div class="row m-0">
|
||||
<div class="col-lg-4 p-0">
|
||||
<div class="bg-item">
|
||||
<img src="img/blog-details/2.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-8 p-0">
|
||||
<div class="bg-item">
|
||||
<img src="img/blog-details/3.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-8 p-0">
|
||||
<div class="bg-item">
|
||||
<img src="img/blog-details/4.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 p-0">
|
||||
<div class="bg-item">
|
||||
<img src="img/blog-details/5.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row pt-5">
|
||||
<div class="col-lg-6 mb-4">
|
||||
<a href="#" class="post-cata">people</a>
|
||||
<a href="#" class="post-cata">Photography</a>
|
||||
<a href="#" class="post-cata">nature</a>
|
||||
</div>
|
||||
<div class="col-lg-6 mb-5 text-left text-md-right">
|
||||
<div class="post-share">
|
||||
<span>Share:</span>
|
||||
<a href="#"><i class="fa fa-facebook"></i></a>
|
||||
<a href="#"><i class="fa fa-twitter"></i></a>
|
||||
<a href="#"><i class="fa fa-google-plus"></i></a>
|
||||
<a href="#"><i class="fa fa-linkedin"></i></a>
|
||||
<a href="#"><i class="fa fa-envelope"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blog-navigation">
|
||||
<div class="row m-0">
|
||||
<div class="col-lg-6 p-0">
|
||||
<a href="#" class="bn-item set-bg" data-setbg="img/blog-details/blog-prev.jpg">
|
||||
<h4><i class="ti-arrow-left"></i> The Female Body Shape Men Find Most Attractive</h4>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-6 p-0">
|
||||
<a href="#" class="bn-item bn-next set-bg" data-setbg="img/blog-details/blog-next.jpg">
|
||||
<h4><i class="ti-arrow-right"></i>Vietnam's largest art community</h4>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recent-blog">
|
||||
<h3 class="mb-4 pb-2">Recommended For You</h3>
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<div class="blog-item rp-item set-bg" data-setbg="img/blog/6.jpg">
|
||||
<div class="bi-tag">nature</div>
|
||||
<div class="bi-text">
|
||||
<div class="bi-date">May 19, 2019 | 3 Comment</div>
|
||||
<h3><a href="blog-details.html">The Biggest Cinema Event In 2019</a></h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="blog-item rp-item set-bg" data-setbg="img/blog/4.jpg">
|
||||
<div class="bi-tag">nature</div>
|
||||
<div class="bi-text">
|
||||
<div class="bi-date">May 19, 2019 | 3 Comment</div>
|
||||
<h3><a href="blog-details.html">The Biggest Cinema Event In 2019</a></h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="blog-item rp-item set-bg" data-setbg="img/blog/3.jpg">
|
||||
<div class="bi-tag">nature</div>
|
||||
<div class="bi-text">
|
||||
<div class="bi-date">May 19, 2019 | 3 Comment</div>
|
||||
<h3><a href="blog-details.html">The Biggest Cinema Event In 2019</a></h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment-option">
|
||||
<h3>2 Comments</h3>
|
||||
<div class="single-comment-item first-comment">
|
||||
<div class="sc-author">
|
||||
<img src="img/blog-details/user-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="sc-text">
|
||||
<span>27 Aug 2019</span>
|
||||
<h5>Brandon Kelley</h5>
|
||||
<p>Neque porro qui squam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora.lit, sed quia non numquam eius modi tempora numquam eius modi tempora..</p>
|
||||
<a href="#" class="comment-btn like-btn">Like</a>
|
||||
<a href="#" class="comment-btn">Reply</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="single-comment-item reply-comment">
|
||||
<div class="sc-author">
|
||||
<img src="img/blog-details/user-2.jpg" alt="">
|
||||
</div>
|
||||
<div class="sc-text">
|
||||
<span>27 Aug 2019</span>
|
||||
<h5>Mia Maya</h5>
|
||||
<p>Neque porro qui squam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora.lit, sed quia non numquam eius modi tempora numquam eius modi tempora.</p>
|
||||
<a href="#" class="comment-btn like-btn">Like</a>
|
||||
<a href="#" class="comment-btn">Reply</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="single-comment-item second-comment ">
|
||||
<div class="sc-author">
|
||||
<img src="img/blog-details/user-3.jpg" alt="">
|
||||
</div>
|
||||
<div class="sc-text">
|
||||
<span>27 Aug 2019</span>
|
||||
<h5>Mike Phillips</h5>
|
||||
<p>Neque porro qui squam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora.lit, sed quia non numquam eius modi tempora numquam eius modi tempora.</p>
|
||||
<a href="#" class="comment-btn like-btn">Like</a>
|
||||
<a href="#" class="comment-btn">Reply</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment-form">
|
||||
<h3>Leave A Comment</h3>
|
||||
<form action="#">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<input type="text" placeholder="Name">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<input type="text" placeholder="Email">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<input type="text" placeholder="Phone">
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<textarea placeholder="Comment"></textarea>
|
||||
<button type="submit">Post Comment</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Blog Section end -->
|
||||
|
||||
<!--====== Javascripts & Jquery ======-->
|
||||
<script src="js/vendor/jquery-3.2.1.min.js"></script>
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<script src="js/owl.carousel.min.js"></script>
|
||||
<script src="js/imagesloaded.pkgd.min.js"></script>
|
||||
<script src="js/isotope.pkgd.min.js"></script>
|
||||
<script src="js/jquery.nicescroll.min.js"></script>
|
||||
<script src="js/circle-progress.min.js"></script>
|
||||
<script src="js/pana-accordion.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
117
branches/zaap-sufokien/v3/divers/blog.html
Normal file
117
branches/zaap-sufokien/v3/divers/blog.html
Normal file
@ -0,0 +1,117 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<title>Le Zaap Sufokien</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="description" content="Zaap Sufokien, communauté multi-jeux de l'association Camélia Studio.">
|
||||
<meta name="keywords" content="zaap sufokien, association, camélia studio, jeu vidéo, dofus, black desert online, honkai impact 3rd, genshin impact">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
<!-- Stylesheets -->
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css"/>
|
||||
<link rel="stylesheet" href="css/font-awesome.min.css"/>
|
||||
<link rel="stylesheet" href="css/themify-icons.css"/>
|
||||
<link rel="stylesheet" href="css/accordion.css"/>
|
||||
<link rel="stylesheet" href="css/fresco.css"/>
|
||||
<link rel="stylesheet" href="css/owl.carousel.min.css"/>
|
||||
|
||||
<!-- Main Stylesheets -->
|
||||
<link rel="stylesheet" href="css/style.css"/>
|
||||
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
||||
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!-- Page Preloder -->
|
||||
<div id="preloder">
|
||||
<div class="loader"></div>
|
||||
</div>
|
||||
|
||||
<!-- Offcanvas Menu Section -->
|
||||
<div class="menu-wrapper">
|
||||
<div class="menu-switch">
|
||||
<i class="ti-menu"></i>
|
||||
</div>
|
||||
<div class="menu-social-warp">
|
||||
<div class="menu-social">
|
||||
<a href="https://www.facebook.com/lezaapsufokien/?ref=bookmarks" target="_blank"><i class="ti-facebook"></i></a>
|
||||
<a href="https://twitter.com/Zaap_Sufokien" target="_blank"><i class="ti-twitter-alt"></i></a>
|
||||
<a href="https://www.youtube.com/channel/UCkhY6tQxoLPKEQ4xAoWlclA" target="_blank"><i class="ti-youtube"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="side-menu-wrapper">
|
||||
<div class="sm-header">
|
||||
<div class="menu-close">
|
||||
<i class="ti-arrow-left"></i>
|
||||
</div>
|
||||
<a href="index.html" class="site-logo">
|
||||
<img src="img/logo.jpg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<nav class="main-menu">
|
||||
<ul>
|
||||
<li><a href="index.html" class="active">Accueil</a></li>
|
||||
<li><a href="about.html">Qui sommes nous ?</a></li>
|
||||
<li><a href="https://ico.camelia-studio.org" target="_blank">Galerie</a></li>
|
||||
<li><a href="blog.html">Projets</a></li>
|
||||
<li><a href="contact.html">Nous contacter</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="sm-footer">
|
||||
<div class="sm-socail">
|
||||
<a href="https://www.facebook.com/lezaapsufokien/?ref=bookmarks" target="_blank"><i class="ti-facebook"></i></a>
|
||||
<a href="https://twitter.com/Zaap_Sufokien" target="_blank"><i class="ti-twitter-alt"></i></a>
|
||||
<a href="https://www.youtube.com/channel/UCkhY6tQxoLPKEQ4xAoWlclA" target="_blank"><i class="ti-youtube"></i></a>
|
||||
</div>
|
||||
<div class="copyright-text"><p><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
|
||||
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="ti-heart" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
|
||||
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Offcanvas Menu Section end -->
|
||||
|
||||
<!-- Blog Section end -->
|
||||
<section class="blog-section">
|
||||
<div class="nice-scroll">
|
||||
<div class="blog-grid-warp">
|
||||
<div class="blog-grid-sizer"></div>
|
||||
<div class="blog-item">
|
||||
<img src="img/blog/ico.jpg" alt="">
|
||||
<div class="bi-tag">Tous</div>
|
||||
<div class="bi-text">
|
||||
<div class="bi-date">17 avril 2019</div>
|
||||
<h3><a href="blog/ico.html">ICO</a></h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blog-grid">
|
||||
<div class="blog-item">
|
||||
<img src="img/blog/donjons.jpg" alt="">
|
||||
<div class="bi-tag">Dofus</div>
|
||||
<div class="bi-text">
|
||||
<div class="bi-date">17 février 2019</div>
|
||||
<h3><a href="blog/roulette.html">Roulette à donjons</a></h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Blog Section end -->
|
||||
|
||||
<!--====== Javascripts & Jquery ======-->
|
||||
<script src="js/vendor/jquery-3.2.1.min.js"></script>
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<script src="js/owl.carousel.min.js"></script>
|
||||
<script src="js/imagesloaded.pkgd.min.js"></script>
|
||||
<script src="js/isotope.pkgd.min.js"></script>
|
||||
<script src="js/jquery.nicescroll.min.js"></script>
|
||||
<script src="js/circle-progress.min.js"></script>
|
||||
<script src="js/pana-accordion.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
121
branches/zaap-sufokien/v3/divers/contact.html
Normal file
121
branches/zaap-sufokien/v3/divers/contact.html
Normal file
@ -0,0 +1,121 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zxx">
|
||||
<head>
|
||||
<title>Tulen | Photography HTML Template</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="description" content="Tulen Photography HTML Template">
|
||||
<meta name="keywords" content="photo, html">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- Stylesheets -->
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css"/>
|
||||
<link rel="stylesheet" href="css/font-awesome.min.css"/>
|
||||
<link rel="stylesheet" href="css/themify-icons.css"/>
|
||||
<link rel="stylesheet" href="css/accordion.css"/>
|
||||
<link rel="stylesheet" href="css/fresco.css"/>
|
||||
<link rel="stylesheet" href="css/owl.carousel.min.css"/>
|
||||
|
||||
<!-- Main Stylesheets -->
|
||||
<link rel="stylesheet" href="css/style.css"/>
|
||||
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
||||
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!-- Page Preloder -->
|
||||
<div id="preloder">
|
||||
<div class="loader"></div>
|
||||
</div>
|
||||
|
||||
<!-- Offcanvas Menu Section -->
|
||||
<div class="menu-wrapper">
|
||||
<div class="menu-switch">
|
||||
<i class="ti-menu"></i>
|
||||
</div>
|
||||
<div class="menu-social-warp">
|
||||
<div class="menu-social">
|
||||
<a href="#"><i class="ti-facebook"></i></a>
|
||||
<a href="#"><i class="ti-twitter-alt"></i></a>
|
||||
<a href="#"><i class="ti-linkedin"></i></a>
|
||||
<a href="#"><i class="ti-instagram"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="side-menu-wrapper">
|
||||
<div class="sm-header">
|
||||
<div class="menu-close">
|
||||
<i class="ti-arrow-left"></i>
|
||||
</div>
|
||||
<a href="index.html" class="site-logo">
|
||||
<img src="img/logo.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<nav class="main-menu">
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
<li><a href="gallery.html">Gallery</a></li>
|
||||
<li><a href="blog.html">Blog</a></li>
|
||||
<li><a href="contact.html" class="active">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="sm-footer">
|
||||
<div class="sm-socail">
|
||||
<a href="#"><i class="ti-facebook"></i></a>
|
||||
<a href="#"><i class="ti-twitter-alt"></i></a>
|
||||
<a href="#"><i class="ti-linkedin"></i></a>
|
||||
<a href="#"><i class="ti-instagram"></i></a>
|
||||
</div>
|
||||
<div class="copyright-text"><p><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
|
||||
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="ti-heart" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
|
||||
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Offcanvas Menu Section end -->
|
||||
|
||||
<!-- Contact Section end -->
|
||||
<div class="contact-section">
|
||||
<div class="map-warp"><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d14376.077865872314!2d-73.879277264103!3d40.757667781624285!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sbd!4v1546528920522" style="border:0" allowfullscreen></iframe></div>
|
||||
<div class="contact-box">
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<div class="contact-info">
|
||||
<i class="ti-location-pin"></i>
|
||||
<p>60-49 Road 11378<br>New York</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="contact-info">
|
||||
<i class="ti-email"></i>
|
||||
<p><span>Phone:</span> +65 11.188.888</p>
|
||||
<p><span>Mail:</span> colorlib@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="contact-info">
|
||||
<i class="ti-timer"></i>
|
||||
<p><span>Week Days:</span> 10:00 – 22:00</p>
|
||||
<p><span>Sunday:</span> Close</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Contact Section end -->
|
||||
|
||||
<!--====== Javascripts & Jquery ======-->
|
||||
<script src="js/vendor/jquery-3.2.1.min.js"></script>
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<script src="js/owl.carousel.min.js"></script>
|
||||
<script src="js/imagesloaded.pkgd.min.js"></script>
|
||||
<script src="js/isotope.pkgd.min.js"></script>
|
||||
<script src="js/jquery.nicescroll.min.js"></script>
|
||||
<script src="js/circle-progress.min.js"></script>
|
||||
<script src="js/pana-accordion.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
212
branches/zaap-sufokien/v3/divers/gallery.html
Normal file
212
branches/zaap-sufokien/v3/divers/gallery.html
Normal file
@ -0,0 +1,212 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zxx">
|
||||
<head>
|
||||
<title>Tulen | Photography HTML Template</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="description" content="Tulen Photography HTML Template"">
|
||||
<meta name="keywords" content="photo, html">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- Stylesheets -->
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css"/>
|
||||
<link rel="stylesheet" href="css/font-awesome.min.css"/>
|
||||
<link rel="stylesheet" href="css/themify-icons.css"/>
|
||||
<link rel="stylesheet" href="css/accordion.css"/>
|
||||
<link rel="stylesheet" href="css/fresco.css"/>
|
||||
<link rel="stylesheet" href="css/owl.carousel.min.css"/>
|
||||
|
||||
<!-- Main Stylesheets -->
|
||||
<link rel="stylesheet" href="css/style.css"/>
|
||||
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
||||
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!-- Page Preloder -->
|
||||
<div id="preloder">
|
||||
<div class="loader"></div>
|
||||
</div>
|
||||
|
||||
<!-- Offcanvas Menu Section -->
|
||||
<div class="menu-wrapper">
|
||||
<div class="menu-switch">
|
||||
<i class="ti-menu"></i>
|
||||
</div>
|
||||
<div class="menu-social-warp">
|
||||
<div class="menu-social">
|
||||
<a href="#"><i class="ti-facebook"></i></a>
|
||||
<a href="#"><i class="ti-twitter-alt"></i></a>
|
||||
<a href="#"><i class="ti-linkedin"></i></a>
|
||||
<a href="#"><i class="ti-instagram"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="side-menu-wrapper">
|
||||
<div class="sm-header">
|
||||
<div class="menu-close">
|
||||
<i class="ti-arrow-left"></i>
|
||||
</div>
|
||||
<a href="index.html" class="site-logo">
|
||||
<img src="img/logo.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<nav class="main-menu">
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
<li><a href="gallery.html" class="active">Gallery</a></li>
|
||||
<li><a href="blog.html">Blog</a></li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="sm-footer">
|
||||
<div class="sm-socail">
|
||||
<a href="#"><i class="ti-facebook"></i></a>
|
||||
<a href="#"><i class="ti-twitter-alt"></i></a>
|
||||
<a href="#"><i class="ti-linkedin"></i></a>
|
||||
<a href="#"><i class="ti-instagram"></i></a>
|
||||
</div>
|
||||
<div class="copyright-text"><p><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
|
||||
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="ti-heart" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
|
||||
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Offcanvas Menu Section end -->
|
||||
|
||||
<!-- Gallery Section end -->
|
||||
<section class="gallery-section">
|
||||
<div class="gallery-header">
|
||||
<h4>Gallery</h4>
|
||||
<ul class="gallery-filter">
|
||||
<li class="filter all active" data-filter="*">All</li>
|
||||
<li class="filter" data-filter=".featured">Featured</li>
|
||||
<li class="filter" data-filter=".people">People</li>
|
||||
<li class="filter" data-filter=".nature">Nature</li>
|
||||
<li class="filter" data-filter=".animal">Animal</li>
|
||||
<li class="filter" data-filter=".travel">Travel</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nice-scroll">
|
||||
<div class="gallery-warp">
|
||||
<div class="grid-sizer"></div>
|
||||
<div class="gallery-item gi-big featured">
|
||||
<a class="fresco" href="img/gallery/1.jpg" data-fresco-group="projects">
|
||||
<img src="img/gallery/1.jpg" alt="">
|
||||
</a>
|
||||
<div class="gi-hover">
|
||||
<img src="img/gallery/author.jpg" alt="">
|
||||
<h6>Arthur Rose</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery-item people">
|
||||
<a class="fresco" href="img/gallery/2.jpg" data-fresco-group="projects">
|
||||
<img src="img/gallery/2.jpg" alt="">
|
||||
</a>
|
||||
<div class="gi-hover">
|
||||
<img src="img/gallery/author.jpg" alt="">
|
||||
<h6>Arthur Rose</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery-item nature">
|
||||
<a class="fresco" href="img/gallery/3.jpg" data-fresco-group="projects">
|
||||
<img src="img/gallery/3.jpg" alt="">
|
||||
</a>
|
||||
<div class="gi-hover">
|
||||
<img src="img/gallery/author.jpg" alt="">
|
||||
<h6>Arthur Rose</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery-item gi-long travel">
|
||||
<a class="fresco" href="img/gallery/4.jpg" data-fresco-group="projects">
|
||||
<img src="img/gallery/4.jpg" alt="">
|
||||
</a>
|
||||
<div class="gi-hover">
|
||||
<img src="img/gallery/author.jpg" alt="">
|
||||
<h6>Arthur Rose</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery-item gi-big animal">
|
||||
<a class="fresco" href="img/gallery/6.jpg" data-fresco-group="projects">
|
||||
<img src="img/gallery/6.jpg" alt="">
|
||||
</a>
|
||||
<div class="gi-hover">
|
||||
<img src="img/gallery/author.jpg" alt="">
|
||||
<h6>Arthur Rose</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery-item gi-big featured">
|
||||
<a class="fresco" href="img/gallery/5.jpg" data-fresco-group="projects">
|
||||
<img src="img/gallery/5.jpg" alt="">
|
||||
</a>
|
||||
<div class="gi-hover">
|
||||
<img src="img/gallery/author.jpg" alt="">
|
||||
<h6>Arthur Rose</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery-item travel">
|
||||
<a class="fresco" href="img/gallery/7.jpg" data-fresco-group="projects">
|
||||
<img src="img/gallery/7.jpg" alt="">
|
||||
</a>
|
||||
<div class="gi-hover">
|
||||
<img src="img/gallery/author.jpg" alt="">
|
||||
<h6>Arthur Rose</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery-item people">
|
||||
<a class="fresco" href="img/gallery/8.jpg" data-fresco-group="projects">
|
||||
<img src="img/gallery/8.jpg" alt="">
|
||||
</a>
|
||||
<div class="gi-hover">
|
||||
<img src="img/gallery/author.jpg" alt="">
|
||||
<h6>Arthur Rose</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery-item animal">
|
||||
<a class="fresco" href="img/gallery/9.jpg" data-fresco-group="projects">
|
||||
<img src="img/gallery/9.jpg" alt="">
|
||||
</a>
|
||||
<div class="gi-hover">
|
||||
<img src="img/gallery/author.jpg" alt="">
|
||||
<h6>Arthur Rose</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery-item gi-big travel">
|
||||
<a class="fresco" href="img/gallery/10.jpg" data-fresco-group="projects">
|
||||
<img src="img/gallery/10.jpg" alt="">
|
||||
</a>
|
||||
<div class="gi-hover">
|
||||
<img src="img/gallery/author.jpg" alt="">
|
||||
<h6>Arthur Rose</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery-item featured">
|
||||
<a class="fresco" href="img/gallery/11.jpg" data-fresco-group="projects">
|
||||
<img src="img/gallery/11.jpg" alt="">
|
||||
</a>
|
||||
<div class="gi-hover">
|
||||
<img src="img/gallery/author.jpg" alt="">
|
||||
<h6>Arthur Rose</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Gallery Section end -->
|
||||
|
||||
<!--====== Javascripts & Jquery ======-->
|
||||
<script src="js/vendor/jquery-3.2.1.min.js"></script>
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<script src="js/owl.carousel.min.js"></script>
|
||||
<script src="js/imagesloaded.pkgd.min.js"></script>
|
||||
<script src="js/isotope.pkgd.min.js"></script>
|
||||
<script src="js/jquery.nicescroll.min.js"></script>
|
||||
<script src="js/circle-progress.min.js"></script>
|
||||
<script src="js/pana-accordion.js"></script>
|
||||
<script src="js/fresco.min.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
17
branches/zaap-sufokien/v3/divers/licence.html
Normal file
17
branches/zaap-sufokien/v3/divers/licence.html
Normal file
@ -0,0 +1,17 @@
|
||||
<a href="https://colorlib.com/wp/templates/"><img src="https://colorlib.com/wp/wp-content/uploads/sites/2/colorlib-push-logo.png" alt="Colorlib logo"></a>
|
||||
<h1 style="text-align:center;">Thank you for using our template!</h1>
|
||||
<p style="text-align:center;">For more awesome templates please visit <strong><a href="https://colorlib.com/wp/templates/">Colorlib</a></strong>.</p>
|
||||
<br>
|
||||
<p style="text-align:center; color:red;"><strong>Copyright information for the template can't be altered/removed unless you purchase a license.</strong>
|
||||
|
||||
<p style="text-align:center;"><strong>Removing copyright information without the license will result in suspension of your hosting and/or domain name(s).</strong>
|
||||
|
||||
<p style="text-align:center;"><strong>More information about the license is available <a href="https://colorlib.com/wp/licence/">here</a></strong>.</p>
|
||||
|
||||
<style>
|
||||
img {
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
margin-top: 20%;
|
||||
}
|
||||
</style>
|
||||
BIN
branches/zaap-sufokien/v3/favicon.ico
Normal file
BIN
branches/zaap-sufokien/v3/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
BIN
branches/zaap-sufokien/v3/fonts/FontAwesome.otf
Normal file
BIN
branches/zaap-sufokien/v3/fonts/FontAwesome.otf
Normal file
Binary file not shown.
BIN
branches/zaap-sufokien/v3/fonts/fontawesome-webfont.eot
Normal file
BIN
branches/zaap-sufokien/v3/fonts/fontawesome-webfont.eot
Normal file
Binary file not shown.
2671
branches/zaap-sufokien/v3/fonts/fontawesome-webfont.svg
Normal file
2671
branches/zaap-sufokien/v3/fonts/fontawesome-webfont.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 434 KiB |
BIN
branches/zaap-sufokien/v3/fonts/fontawesome-webfont.ttf
Normal file
BIN
branches/zaap-sufokien/v3/fonts/fontawesome-webfont.ttf
Normal file
Binary file not shown.
BIN
branches/zaap-sufokien/v3/fonts/fontawesome-webfont.woff
Normal file
BIN
branches/zaap-sufokien/v3/fonts/fontawesome-webfont.woff
Normal file
Binary file not shown.
BIN
branches/zaap-sufokien/v3/fonts/fontawesome-webfont.woff2
Normal file
BIN
branches/zaap-sufokien/v3/fonts/fontawesome-webfont.woff2
Normal file
Binary file not shown.
BIN
branches/zaap-sufokien/v3/fonts/themify.eot
Normal file
BIN
branches/zaap-sufokien/v3/fonts/themify.eot
Normal file
Binary file not shown.
362
branches/zaap-sufokien/v3/fonts/themify.svg
Normal file
362
branches/zaap-sufokien/v3/fonts/themify.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 229 KiB |
BIN
branches/zaap-sufokien/v3/fonts/themify.ttf
Normal file
BIN
branches/zaap-sufokien/v3/fonts/themify.ttf
Normal file
Binary file not shown.
BIN
branches/zaap-sufokien/v3/fonts/themify.woff
Normal file
BIN
branches/zaap-sufokien/v3/fonts/themify.woff
Normal file
Binary file not shown.
BIN
branches/zaap-sufokien/v3/img/about+.gif
Normal file
BIN
branches/zaap-sufokien/v3/img/about+.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
BIN
branches/zaap-sufokien/v3/img/about-bg.png
Normal file
BIN
branches/zaap-sufokien/v3/img/about-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
branches/zaap-sufokien/v3/img/about.jpg
Normal file
BIN
branches/zaap-sufokien/v3/img/about.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
branches/zaap-sufokien/v3/img/author/aika-akasha.jpg
Normal file
BIN
branches/zaap-sufokien/v3/img/author/aika-akasha.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
branches/zaap-sufokien/v3/img/author/asakha.jpg
Normal file
BIN
branches/zaap-sufokien/v3/img/author/asakha.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
branches/zaap-sufokien/v3/img/author/elaina.jpg
Normal file
BIN
branches/zaap-sufokien/v3/img/author/elaina.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
BIN
branches/zaap-sufokien/v3/img/author/idiotka.jpg
Normal file
BIN
branches/zaap-sufokien/v3/img/author/idiotka.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
branches/zaap-sufokien/v3/img/author/ひたぎ.jpg
Normal file
BIN
branches/zaap-sufokien/v3/img/author/ひたぎ.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
branches/zaap-sufokien/v3/img/hero/dofus.jpg
Normal file
BIN
branches/zaap-sufokien/v3/img/hero/dofus.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 226 KiB |
BIN
branches/zaap-sufokien/v3/img/hero/e7.jpg
Normal file
BIN
branches/zaap-sufokien/v3/img/hero/e7.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 868 KiB |
BIN
branches/zaap-sufokien/v3/img/hero/gi.jpg
Normal file
BIN
branches/zaap-sufokien/v3/img/hero/gi.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
BIN
branches/zaap-sufokien/v3/img/hero/gt.jpg
Normal file
BIN
branches/zaap-sufokien/v3/img/hero/gt.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 316 KiB |
BIN
branches/zaap-sufokien/v3/img/hero/hi3.jpg
Normal file
BIN
branches/zaap-sufokien/v3/img/hero/hi3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
BIN
branches/zaap-sufokien/v3/img/logo.jpg
Normal file
BIN
branches/zaap-sufokien/v3/img/logo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
148
branches/zaap-sufokien/v3/index.html
Normal file
148
branches/zaap-sufokien/v3/index.html
Normal file
@ -0,0 +1,148 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<title>Le Zaap Sufokien</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="description" content="Zaap Sufokien, communauté multi-jeux de l'association Camélia Studio.">
|
||||
<meta name="keywords" content="zaap sufokien, association, camélia studio, jeu vidéo, dofus, honkai impact 3rd, genshin impact, gardian tales, epic seven">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
<!-- Stylesheets -->
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css"/>
|
||||
<link rel="stylesheet" href="css/font-awesome.min.css"/>
|
||||
<link rel="stylesheet" href="css/themify-icons.css"/>
|
||||
<link rel="stylesheet" href="css/accordion.css"/>
|
||||
<link rel="stylesheet" href="css/owl.carousel.min.css"/>
|
||||
|
||||
<!-- Main Stylesheets -->
|
||||
<link rel="stylesheet" href="css/style.css"/>
|
||||
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
||||
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!-- Page Preloder -->
|
||||
<div id="preloder">
|
||||
<div class="loader"></div>
|
||||
</div>
|
||||
|
||||
<!-- Offcanvas Menu Section -->
|
||||
<div class="menu-wrapper">
|
||||
<div class="menu-switch">
|
||||
<i class="ti-menu"></i>
|
||||
</div>
|
||||
<div class="menu-social-warp">
|
||||
<div class="menu-social">
|
||||
<a href="https://www.facebook.com/lezaapsufokien/?ref=bookmarks" target="_blank"><i class="ti-facebook"></i></a>
|
||||
<a href="https://twitter.com/Zaap_Sufokien" target="_blank"><i class="ti-twitter-alt"></i></a>
|
||||
<a href="https://www.twitch.tv/zaap_sufokien" target="_blank"><i class="ti-tumblr-alt"></i></a>
|
||||
<a href="https://www.youtube.com/channel/UCkhY6tQxoLPKEQ4xAoWlclA" target="_blank"><i class="ti-youtube"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="side-menu-wrapper">
|
||||
<div class="sm-header">
|
||||
<div class="menu-close">
|
||||
<i class="ti-arrow-left"></i>
|
||||
</div>
|
||||
<a href="index.html" class="site-logo">
|
||||
<img src="img/logo.jpg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<nav class="main-menu">
|
||||
<ul>
|
||||
<li><a href="index.html" class="active">Accueil</a></li>
|
||||
<li><a href="about.html">Qui sommes nous ?</a></li>
|
||||
<li><a href="https://ico.camelia-studio.org" target="_blank">Galerie ↗</a></li>
|
||||
<li><a href="https://dicord.gg/nBuZ9vJ" target="_blank">Discord ↗</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="sm-footer">
|
||||
<div class="sm-socail">
|
||||
<a href="https://www.facebook.com/lezaapsufokien/?ref=bookmarks" target="_blank"><i class="ti-facebook"></i></a>
|
||||
<a href="https://twitter.com/Zaap_Sufokien" target="_blank"><i class="ti-twitter-alt"></i></a>
|
||||
<a href="https://www.youtube.com/channel/UCkhY6tQxoLPKEQ4xAoWlclA" target="_blank"><i class="ti-youtube"></i></a>
|
||||
</div>
|
||||
<div class="copyright-text"><p><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
|
||||
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made by <a href="https://colorlib.com" target="_blank">Colorlib</a>
|
||||
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Offcanvas Menu Section end -->
|
||||
|
||||
<!-- Hero Section end -->
|
||||
<section class="hero-section">
|
||||
<div class="pana-accordion" id="accordion">
|
||||
<div class="pana-accordion-wrap">
|
||||
<div class="pana-accordion-item set-bg" data-setbg="img/hero/dofus.jpg">
|
||||
<div class="pa-text">
|
||||
<div class="pa-tag">Dofus</div>
|
||||
<h2><i>La Compagnie de Sufokia</i></h2>
|
||||
<div class="pa-author">
|
||||
<img src="img/author/aika-akasha.jpg" alt="">
|
||||
<h4>Aika-Akasha</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pana-accordion-item set-bg" data-setbg="img/hero/hi3.jpg">
|
||||
<div class="pa-text">
|
||||
<div class="pa-tag">Honkai Impact 3rd</div>
|
||||
<h2><i>Amour&Waifus</i></h2>
|
||||
<div class="pa-author">
|
||||
<img src="img/author/idiotka.jpg" alt="">
|
||||
<h4>Idiotka</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pana-accordion-item set-bg" data-setbg="img/hero/e7.jpg">
|
||||
<div class="pa-text">
|
||||
<div class="pa-tag">Epic 7</div>
|
||||
<h2><i>ToolToulTo</i></h2>
|
||||
<div class="pa-author">
|
||||
<img src="img/author/ひたぎ.jpg" alt="">
|
||||
<h4>ひたぎ</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pana-accordion-item set-bg" data-setbg="img/hero/gi.jpg">
|
||||
<div class="pa-text">
|
||||
<div class="pa-tag">Genshin Impact</div>
|
||||
<h2><i>Larmes salées</i></h2>
|
||||
<div class="pa-author">
|
||||
<img src="img/author/asakha.jpg" alt="">
|
||||
<h4>Asakha</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pana-accordion-item set-bg" data-setbg="img/hero/gt.jpg">
|
||||
<div class="pa-text">
|
||||
<div class="pa-tag">Guardian Tales</div>
|
||||
<h2><i>Cercle_des_Cendres</i></h2>
|
||||
<div class="pa-author">
|
||||
<img src="img/author/elaina.jpg" alt="">
|
||||
<h4>Elaina</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Hero Section end -->
|
||||
|
||||
<!--====== Javascripts & Jquery ======-->
|
||||
<script src="js/vendor/jquery-3.2.1.min.js"></script>
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<script src="js/owl.carousel.min.js"></script>
|
||||
<script src="js/imagesloaded.pkgd.min.js"></script>
|
||||
<script src="js/isotope.pkgd.min.js"></script>
|
||||
<script src="js/jquery.nicescroll.min.js"></script>
|
||||
<script src="js/circle-progress.min.js"></script>
|
||||
<script src="js/pana-accordion.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
7
branches/zaap-sufokien/v3/js/bootstrap.min.js
vendored
Normal file
7
branches/zaap-sufokien/v3/js/bootstrap.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
10
branches/zaap-sufokien/v3/js/circle-progress.min.js
vendored
Normal file
10
branches/zaap-sufokien/v3/js/circle-progress.min.js
vendored
Normal file
@ -0,0 +1,10 @@
|
||||
/**
|
||||
* jquery-circle-progress - jQuery Plugin to draw animated circular progress bars:
|
||||
* {@link http://kottenator.github.io/jquery-circle-progress/}
|
||||
*
|
||||
* @author Rostyslav Bryzgunov <kottenator@gmail.com>
|
||||
* @version 1.2.2
|
||||
* @licence MIT
|
||||
* @preserve
|
||||
*/
|
||||
!function(i){if("function"==typeof define&&define.amd)define(["jquery"],i);else if("object"==typeof module&&module.exports){var t=require("jquery");i(t),module.exports=t}else i(jQuery)}(function(i){function t(i){this.init(i)}t.prototype={value:0,size:100,startAngle:-Math.PI,thickness:"auto",fill:{gradient:["#3aeabb","#fdd250"]},emptyFill:"rgba(0, 0, 0, .1)",animation:{duration:1200,easing:"circleProgressEasing"},animationStartValue:0,reverse:!1,lineCap:"butt",insertMode:"prepend",constructor:t,el:null,canvas:null,ctx:null,radius:0,arcFill:null,lastFrameValue:0,init:function(t){i.extend(this,t),this.radius=this.size/2,this.initWidget(),this.initFill(),this.draw(),this.el.trigger("circle-inited")},initWidget:function(){this.canvas||(this.canvas=i("<canvas>")["prepend"==this.insertMode?"prependTo":"appendTo"](this.el)[0]);var t=this.canvas;if(t.width=this.size,t.height=this.size,this.ctx=t.getContext("2d"),window.devicePixelRatio>1){var e=window.devicePixelRatio;t.style.width=t.style.height=this.size+"px",t.width=t.height=this.size*e,this.ctx.scale(e,e)}},initFill:function(){function t(){var t=i("<canvas>")[0];t.width=e.size,t.height=e.size,t.getContext("2d").drawImage(g,0,0,r,r),e.arcFill=e.ctx.createPattern(t,"no-repeat"),e.drawFrame(e.lastFrameValue)}var e=this,a=this.fill,n=this.ctx,r=this.size;if(!a)throw Error("The fill is not specified!");if("string"==typeof a&&(a={color:a}),a.color&&(this.arcFill=a.color),a.gradient){var s=a.gradient;if(1==s.length)this.arcFill=s[0];else if(s.length>1){for(var l=a.gradientAngle||0,o=a.gradientDirection||[r/2*(1-Math.cos(l)),r/2*(1+Math.sin(l)),r/2*(1+Math.cos(l)),r/2*(1-Math.sin(l))],h=n.createLinearGradient.apply(n,o),c=0;c<s.length;c++){var d=s[c],u=c/(s.length-1);i.isArray(d)&&(u=d[1],d=d[0]),h.addColorStop(u,d)}this.arcFill=h}}if(a.image){var g;a.image instanceof Image?g=a.image:(g=new Image,g.src=a.image),g.complete?t():g.onload=t}},draw:function(){this.animation?this.drawAnimated(this.value):this.drawFrame(this.value)},drawFrame:function(i){this.lastFrameValue=i,this.ctx.clearRect(0,0,this.size,this.size),this.drawEmptyArc(i),this.drawArc(i)},drawArc:function(i){if(0!==i){var t=this.ctx,e=this.radius,a=this.getThickness(),n=this.startAngle;t.save(),t.beginPath(),this.reverse?t.arc(e,e,e-a/2,n-2*Math.PI*i,n):t.arc(e,e,e-a/2,n,n+2*Math.PI*i),t.lineWidth=a,t.lineCap=this.lineCap,t.strokeStyle=this.arcFill,t.stroke(),t.restore()}},drawEmptyArc:function(i){var t=this.ctx,e=this.radius,a=this.getThickness(),n=this.startAngle;i<1&&(t.save(),t.beginPath(),i<=0?t.arc(e,e,e-a/2,0,2*Math.PI):this.reverse?t.arc(e,e,e-a/2,n,n-2*Math.PI*i):t.arc(e,e,e-a/2,n+2*Math.PI*i,n),t.lineWidth=a,t.strokeStyle=this.emptyFill,t.stroke(),t.restore())},drawAnimated:function(t){var e=this,a=this.el,n=i(this.canvas);n.stop(!0,!1),a.trigger("circle-animation-start"),n.css({animationProgress:0}).animate({animationProgress:1},i.extend({},this.animation,{step:function(i){var n=e.animationStartValue*(1-i)+t*i;e.drawFrame(n),a.trigger("circle-animation-progress",[i,n])}})).promise().always(function(){a.trigger("circle-animation-end")})},getThickness:function(){return i.isNumeric(this.thickness)?this.thickness:this.size/14},getValue:function(){return this.value},setValue:function(i){this.animation&&(this.animationStartValue=this.lastFrameValue),this.value=i,this.draw()}},i.circleProgress={defaults:t.prototype},i.easing.circleProgressEasing=function(i){return i<.5?(i=2*i,.5*i*i*i):(i=2-2*i,1-.5*i*i*i)},i.fn.circleProgress=function(e,a){var n="circle-progress",r=this.data(n);if("widget"==e){if(!r)throw Error('Calling "widget" method on not initialized instance is forbidden');return r.canvas}if("value"==e){if(!r)throw Error('Calling "value" method on not initialized instance is forbidden');if("undefined"==typeof a)return r.getValue();var s=arguments[1];return this.each(function(){i(this).data(n).setValue(s)})}return this.each(function(){var a=i(this),r=a.data(n),s=i.isPlainObject(e)?e:{};if(r)r.init(s);else{var l=i.extend({},a.data());"string"==typeof l.fill&&(l.fill=JSON.parse(l.fill)),"string"==typeof l.animation&&(l.animation=JSON.parse(l.animation)),s=i.extend(l,s),s.el=a,r=new t(s),a.data(n,r)}})}});
|
||||
9
branches/zaap-sufokien/v3/js/fresco.min.js
vendored
Normal file
9
branches/zaap-sufokien/v3/js/fresco.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
7
branches/zaap-sufokien/v3/js/imagesloaded.pkgd.min.js
vendored
Normal file
7
branches/zaap-sufokien/v3/js/imagesloaded.pkgd.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
12
branches/zaap-sufokien/v3/js/isotope.pkgd.min.js
vendored
Normal file
12
branches/zaap-sufokien/v3/js/isotope.pkgd.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2
branches/zaap-sufokien/v3/js/jquery.nicescroll.min.js
vendored
Normal file
2
branches/zaap-sufokien/v3/js/jquery.nicescroll.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
193
branches/zaap-sufokien/v3/js/main.js
Normal file
193
branches/zaap-sufokien/v3/js/main.js
Normal file
@ -0,0 +1,193 @@
|
||||
/* ===================================
|
||||
--------------------------------------
|
||||
Tulen | Photography HTML Template
|
||||
Version: 1.0
|
||||
--------------------------------------
|
||||
======================================*/
|
||||
|
||||
|
||||
'use strict';
|
||||
|
||||
$(window).on('load', function() {
|
||||
/*------------------
|
||||
Preloder
|
||||
--------------------*/
|
||||
$(".loader").fadeOut();
|
||||
$("#preloder").delay(400).fadeOut("slow");
|
||||
|
||||
/*------------------
|
||||
Masonry
|
||||
--------------------*/
|
||||
var $container = $('.gallery-warp');
|
||||
$container.imagesLoaded().progress( function() {
|
||||
$container.isotope({
|
||||
masonry: {
|
||||
columnWidth: '.grid-sizer',
|
||||
itemSelector: '.gallery-item'
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('.gallery-filter li').on("click", function(){
|
||||
$(".gallery-filter li").removeClass("active");
|
||||
$(this).addClass("active");
|
||||
var selector = $(this).attr('data-filter');
|
||||
$container.imagesLoaded().progress( function() {
|
||||
$container.isotope({
|
||||
filter: selector,
|
||||
});
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
var $blog_grid = $('.blog-grid-warp');
|
||||
|
||||
$blog_grid.imagesLoaded().progress( function() {
|
||||
$blog_grid.isotope({
|
||||
masonry: {
|
||||
columnWidth: '.blog-grid-sizer',
|
||||
itemSelector: '.blog-grid'
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
(function($) {
|
||||
/*------------------
|
||||
Navigation
|
||||
--------------------*/
|
||||
$(".menu-switch").on('click', function () {
|
||||
$('.side-menu-wrapper').addClass('active');
|
||||
$('.menu-wrapper').addClass('hide-left');
|
||||
});
|
||||
|
||||
$(".menu-close").on('click', function () {
|
||||
$('.side-menu-wrapper').removeClass('active');
|
||||
$('.menu-wrapper').removeClass('hide-left');
|
||||
});
|
||||
|
||||
|
||||
|
||||
function hero() {
|
||||
|
||||
var window_w = $(window).innerWidth();
|
||||
|
||||
if(window_w > 1300) {
|
||||
var pana_w = 180;
|
||||
} else if( window_w > 1200 ) {
|
||||
var pana_w = 100;
|
||||
} else {
|
||||
var pana_w = 60;
|
||||
}
|
||||
|
||||
var hero_w = $('.hero-section').innerWidth();
|
||||
var pa_length = (($('.pana-accordion-item').length - 1) * pana_w);
|
||||
var hero_iw = hero_w - pa_length;
|
||||
|
||||
var window_h = $(window).innerHeight();
|
||||
$('.pana-accordion-item').each(function() {
|
||||
$(this).height(window_h);
|
||||
});
|
||||
accordion.init({
|
||||
id: 'accordion',
|
||||
expandWidth: hero_iw,
|
||||
itemWidth: pana_w,
|
||||
autoPlay: false,
|
||||
borderWidth: 0
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
hero();
|
||||
|
||||
$(window).resize(function(){
|
||||
if($('.hero-section').length > 0) {
|
||||
if($(window).innerWidth() > 767) {
|
||||
location.reload();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if($(window).innerWidth() > 768) {
|
||||
|
||||
$(".nice-scroll").niceScroll({
|
||||
cursorborder:"",
|
||||
cursorcolor:"#ffffff",
|
||||
boxzoom:false,
|
||||
cursorwidth: 13,
|
||||
autohidemode:false,
|
||||
background: 'rgba(0, 0, 0, 0.3)',
|
||||
cursorborderradius:50,
|
||||
horizrailenabled: false
|
||||
});
|
||||
|
||||
$(".about-section, .blog-details").niceScroll({
|
||||
cursorborder:"1px solid rgba(120, 120, 120, 0.9)",
|
||||
cursorcolor:"rgba(120, 120, 120, 0.9)",
|
||||
boxzoom:false,
|
||||
cursorwidth: 13,
|
||||
autohidemode:false,
|
||||
background: 'rgba(0, 0, 0, 0.1)',
|
||||
cursorborderradius:50,
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*------------------
|
||||
Background Set
|
||||
--------------------*/
|
||||
$('.set-bg').each(function() {
|
||||
var bg = $(this).data('setbg');
|
||||
$(this).css('background-image', 'url(' + bg + ')');
|
||||
});
|
||||
|
||||
|
||||
/*------------------
|
||||
Hero Slider
|
||||
--------------------*/
|
||||
$('.hero-slider').owlCarousel({
|
||||
loop: true,
|
||||
nav: false,
|
||||
dots: false,
|
||||
animateOut: 'fadeOut',
|
||||
animateIn: 'fadeIn',
|
||||
items: 1,
|
||||
autoplay: true,
|
||||
smartSpeed: 1000,
|
||||
});
|
||||
|
||||
/*------------------
|
||||
Circle progress
|
||||
--------------------*/
|
||||
$('.circle-progress').each(function() {
|
||||
var cpvalue = $(this).data("cpvalue");
|
||||
var cpcolor = $(this).data("cpcolor");
|
||||
var cpid = $(this).data("cpid");
|
||||
|
||||
$(this).append('<div class="'+ cpid +'"></div><div class="progress-info"><h2>'+ cpvalue +'%</h2></div>');
|
||||
|
||||
if (cpvalue < 100) {
|
||||
|
||||
$('.' + cpid).circleProgress({
|
||||
value: '0.' + cpvalue,
|
||||
size: 100,
|
||||
thickness: 5,
|
||||
fill: cpcolor,
|
||||
emptyFill: "#ebebeb"
|
||||
});
|
||||
} else {
|
||||
$('.' + cpid).circleProgress({
|
||||
value: 1,
|
||||
size: 100,
|
||||
thickness: 5,
|
||||
fill: cpcolor,
|
||||
emptyFill: "#ebebeb"
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
|
||||
7
branches/zaap-sufokien/v3/js/owl.carousel.min.js
vendored
Normal file
7
branches/zaap-sufokien/v3/js/owl.carousel.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
127
branches/zaap-sufokien/v3/js/pana-accordion.js
Normal file
127
branches/zaap-sufokien/v3/js/pana-accordion.js
Normal file
@ -0,0 +1,127 @@
|
||||
/*
|
||||
* author: pace zhong
|
||||
* date: 2015-06-15
|
||||
* desc: accordion componet
|
||||
* dependencies: jQuery 1.6+
|
||||
*/
|
||||
var accordion= {
|
||||
init: function(options){
|
||||
var that=this;
|
||||
options = $.extend(true,{
|
||||
expandWidth: 500,
|
||||
itemWidth: 100,
|
||||
extpand: 0,
|
||||
autoPlay: true,
|
||||
delay: 3000,
|
||||
animateTime: 400,
|
||||
borderWidth: 1,
|
||||
autoPlay: true,
|
||||
deviator: 30,
|
||||
bounce:"-50px"
|
||||
},options);
|
||||
that.initDom(options);
|
||||
if(options.autoPlay){
|
||||
that.autoPlay(options);
|
||||
}
|
||||
that.event(options);
|
||||
},
|
||||
event: function(options){
|
||||
var that=this,
|
||||
$items=$("#"+options.id).find(".pana-accordion-item");
|
||||
$items.on("mouseover",function(){
|
||||
if(options.autoPlay){
|
||||
that.clearAnimate();
|
||||
}
|
||||
that.active(options,$(this));
|
||||
});
|
||||
$items.on("mouseout",function(){
|
||||
if(options.autoPlay){
|
||||
that.autoPlay(options);
|
||||
}
|
||||
});
|
||||
},
|
||||
clearAnimate: function(){
|
||||
if(this.delay){
|
||||
clearTimeout(this.delay);
|
||||
}
|
||||
},
|
||||
autoPlay: function(options){
|
||||
var that=this;
|
||||
that.clearAnimate();
|
||||
that.delay=setTimeout(function(){
|
||||
$next=$("#"+options.id).find(".active").next();
|
||||
if($next.length==0) {
|
||||
$next=$("#"+options.id).find(".pana-accordion-item:eq(0)");
|
||||
}
|
||||
that.active(options,$next);
|
||||
that.autoPlay(options);
|
||||
},options.delay);
|
||||
},
|
||||
active: function(options,$current){
|
||||
if($current && $current.hasClass('active')) return;
|
||||
|
||||
var $items=$("#"+options.id).find(".pana-accordion-item"),
|
||||
beforeIndex=$items.filter(".active").index(),
|
||||
currentIndex=$current.index(),
|
||||
itemWidth=options.itemWidth,
|
||||
expandWidth=options.expandWidth;
|
||||
|
||||
$items.removeClass("active").removeClass("hide-mask");
|
||||
$items.each(function(i,elem){
|
||||
var $item=$(elem),
|
||||
$next=$current.next().length==0 ? $($items[1]) : $current.next(),
|
||||
pos_left=(i==0 ? 0 : i*itemWidth );
|
||||
|
||||
if(i>currentIndex){
|
||||
pos_left+=expandWidth-itemWidth+options.borderWidth;
|
||||
}
|
||||
|
||||
if(i==currentIndex+1){
|
||||
var deviator=options.deviator;
|
||||
}else {
|
||||
var deviator=0;
|
||||
}
|
||||
if(i==currentIndex){
|
||||
$item.addClass('active').stop(true).animate({
|
||||
"left": pos_left
|
||||
},options.animateTime,function(){
|
||||
$item.addClass("hide-mask")
|
||||
});
|
||||
}else{
|
||||
if(deviator==0){
|
||||
$item.stop(true).animate({
|
||||
"left": pos_left
|
||||
},options.animateTime);
|
||||
}else{
|
||||
if(beforeIndex>currentIndex){
|
||||
$item.stop(true).animate({
|
||||
"left": pos_left
|
||||
},options.animateTime);
|
||||
}else {
|
||||
$item.stop(true).animate({
|
||||
"left": parseInt($item.css("left"),10)-deviator
|
||||
},250,function(){
|
||||
$item.stop(true).animate({
|
||||
"left": pos_left
|
||||
},options.animateTime);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
isRestart:function($current,$active,$items){
|
||||
return $active.index()===$items.length-1 && $current.index()===0
|
||||
},
|
||||
initDom: function(options){
|
||||
var that=this,
|
||||
$items=$("#"+options.id).find(".pana-accordion-item");
|
||||
|
||||
$items.each(function(i,elem){
|
||||
$item=$(elem);
|
||||
$item.css({"z-index":i+1,"width": options.expandWidth+"px"});
|
||||
$item.append('<div class="pana-accordion-mask"></div>');
|
||||
})
|
||||
that.active(options,$items.eq(options.extpand));
|
||||
}
|
||||
}
|
||||
4
branches/zaap-sufokien/v3/js/vendor/jquery-3.2.1.min.js
vendored
Normal file
4
branches/zaap-sufokien/v3/js/vendor/jquery-3.2.1.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
146
branches/zaap-sufokien/v3/sass/_about-page.scss
Normal file
146
branches/zaap-sufokien/v3/sass/_about-page.scss
Normal file
@ -0,0 +1,146 @@
|
||||
/*------------------
|
||||
About page
|
||||
------------------*/
|
||||
.about-section {
|
||||
height: 100%;
|
||||
.about-warp {
|
||||
height: 100%;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
@media #{$medium_device, $tab_device, $large_mobile, $small_mobile} {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.about-left {
|
||||
background: $primary_color;
|
||||
-ms-flex: 0 0 47%;
|
||||
flex: 0 0 47%;
|
||||
max-width: 47%;
|
||||
padding: 0 15px;
|
||||
@media #{$medium_device, $tab_device, $large_mobile, $small_mobile} {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
.about-right {
|
||||
-ms-flex: 0 0 53%;
|
||||
flex: 0 0 53%;
|
||||
max-width: 53%;
|
||||
padding: 0 15px;
|
||||
@media #{$medium_device, $tab_device, $large_mobile, $small_mobile} {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.about-img {
|
||||
text-align: center;
|
||||
background-image: url("../img/about-bg.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: inherit;
|
||||
background-position: center center;
|
||||
@media #{$large_mobile} {
|
||||
background-size: 300px;
|
||||
}
|
||||
@media #{ $small_mobile} {
|
||||
background-size: 250px;
|
||||
}
|
||||
img {
|
||||
width: 515px;
|
||||
height: 515px;
|
||||
border-radius: 50%;
|
||||
margin: 82px auto 50px;
|
||||
@media #{ $large_mobile} {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
}
|
||||
@media #{ $small_mobile} {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.profile-text {
|
||||
max-width: 550px;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 40px;
|
||||
h2 {
|
||||
font-weight: 500;
|
||||
}
|
||||
p {
|
||||
padding-top: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.profile-btn {
|
||||
display: inline-block;
|
||||
min-width: 160px;
|
||||
padding: 9px 10px;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 28px;
|
||||
color: $white_color;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
border-radius: 50px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
.profile-email {
|
||||
display: inline-block;
|
||||
font-style: italic;
|
||||
font-size: 16px;
|
||||
color: $white_color;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.about-text {
|
||||
max-width: 810px;
|
||||
margin: 0 auto;
|
||||
padding: 75px 0 50px;
|
||||
h2 {
|
||||
display: inline-block;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 3px solid $primary_color;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
p {
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
.skill-warp {
|
||||
max-width: 930px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.circle-progress {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
canvas {
|
||||
-webkit-transform: rotate(90deg);
|
||||
-ms-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.progress-info {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 50%;
|
||||
margin-top: -10px;
|
||||
h2 {
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.circle-item {
|
||||
margin-bottom: 30px;
|
||||
h4 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
94
branches/zaap-sufokien/v3/sass/_blog-page.scss
Normal file
94
branches/zaap-sufokien/v3/sass/_blog-page.scss
Normal file
@ -0,0 +1,94 @@
|
||||
/*----------------
|
||||
Blog Page
|
||||
----------------*/
|
||||
.blog-section {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
.blog-grid-warp {
|
||||
margin-left: -5px;
|
||||
margin-right: -5px;
|
||||
}
|
||||
|
||||
.blog-grid-sizer,
|
||||
.blog-grid{
|
||||
width: 20%;
|
||||
@media #{$big_screen} {
|
||||
width: 25%;
|
||||
}
|
||||
@media #{$medium_device} {
|
||||
width: 33.333333%;
|
||||
}
|
||||
@media #{$tab_device, $large_mobile} {
|
||||
width: 50%;
|
||||
}
|
||||
@media #{$small_mobile} {
|
||||
width: 100%;
|
||||
img {
|
||||
min-height: 250px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.blog-grid{
|
||||
padding: 0 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.blog-item {
|
||||
position: relative;
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: rgb(0,0,0);
|
||||
background: -moz-linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 94%);
|
||||
background: -webkit-linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 94%);
|
||||
background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 94%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
|
||||
}
|
||||
img {
|
||||
min-width: 100%;
|
||||
}
|
||||
.bi-tag {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 30px;
|
||||
display: inline-block;
|
||||
padding: 4px 20px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 12px;
|
||||
letter-spacing: 2px;
|
||||
color: $primary_color;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
border-radius: 2px;
|
||||
background: $white_color;
|
||||
}
|
||||
.bi-text {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
padding-left: 30px;
|
||||
padding-right: 20px;
|
||||
z-index: 99;
|
||||
.bi-date {
|
||||
font-size: 13px;
|
||||
color: $white_color;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
padding-bottom: 25px;
|
||||
color: $white_color;
|
||||
line-height: 1.6;
|
||||
a {
|
||||
color: $white_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
373
branches/zaap-sufokien/v3/sass/_blog-single.scss
Normal file
373
branches/zaap-sufokien/v3/sass/_blog-single.scss
Normal file
@ -0,0 +1,373 @@
|
||||
/*-------------------
|
||||
Blog Single Page
|
||||
--------------------*/
|
||||
.blog-details{
|
||||
height: 100%;
|
||||
}
|
||||
.single-blog-page {
|
||||
padding: 45px 38px 50px;
|
||||
@media #{$small_mobile} {
|
||||
padding: 45px 0 50px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 36px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-metas {
|
||||
margin-bottom: 10px;
|
||||
.blog-meta {
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
color: $heading_color;
|
||||
padding-right: 14px;
|
||||
margin-right: 12px;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: "|";
|
||||
right: 0;
|
||||
top: 0;
|
||||
font-size: 12px;
|
||||
color: $heading_color;;
|
||||
}
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
margin-right: 0;
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blog-thumb {
|
||||
position: relative;
|
||||
margin-bottom: 45px;
|
||||
.thumb-cata {
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
left: 55px;
|
||||
display: inline-block;
|
||||
padding: 4px 20px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 12px;
|
||||
letter-spacing: 2px;
|
||||
color: $primary_color;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
border-radius: 2px;
|
||||
background: $white_color;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-gallery {
|
||||
padding-top: 40px;
|
||||
margin: 0 -5px;
|
||||
.bg-item {
|
||||
padding: 0 5px;
|
||||
margin-bottom: 10px;
|
||||
img {
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-cata {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: 4px 13px;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 6px;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
letter-spacing: 2px;
|
||||
border-radius: 2px;
|
||||
color: $primary_color;
|
||||
background: #ebebeb;
|
||||
transition: 0.3s;
|
||||
&:hover {
|
||||
color: $white_color;
|
||||
background: $primary_color;
|
||||
}
|
||||
}
|
||||
|
||||
.post-share {
|
||||
span {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
margin-right: 20px;
|
||||
color: $heading_color;
|
||||
}
|
||||
a {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
text-align: center;
|
||||
padding-top: 8px;
|
||||
color: $primary_color;
|
||||
border-radius: 52px;
|
||||
margin-left: 4px;
|
||||
background: #ebebeb;
|
||||
&:hover {
|
||||
background: $primary_color;
|
||||
color: $white_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.blog-navigation {
|
||||
margin-bottom: 50px;
|
||||
.bn-item {
|
||||
height: 236px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
h4 {
|
||||
color: $white_color;
|
||||
max-width: 350px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
i {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: calc(50% - 12px);
|
||||
opacity: 0;
|
||||
transition: .3s;
|
||||
@media #{$small_mobile} {
|
||||
left: calc(50% - 0px);
|
||||
top: 100%;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
i {
|
||||
opacity: 1;
|
||||
left: -50px;
|
||||
@media #{$small_mobile} {
|
||||
left: calc(50% - 12px);
|
||||
top: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.bn-next {
|
||||
i {
|
||||
left: auto;
|
||||
right: 0;
|
||||
@media #{$small_mobile} {
|
||||
right: calc(50% - 0px);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
i {
|
||||
opacity: 1;
|
||||
right: -50px;
|
||||
@media #{$small_mobile} {
|
||||
right: calc(50% - 12px);
|
||||
top: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.recent-blog {
|
||||
margin-bottom: 40px;
|
||||
.row {
|
||||
margin: 0 -6px;
|
||||
}
|
||||
.col-lg-4{
|
||||
padding: 0 6px;
|
||||
}
|
||||
.rp-item {
|
||||
height: 250px;
|
||||
margin-bottom: 20px;
|
||||
&:after {
|
||||
content: "";
|
||||
height: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.comment-option {
|
||||
h3 {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.single-comment-item {
|
||||
margin-bottom: 30px;
|
||||
&.reply-comment {
|
||||
padding-left: 131px;
|
||||
@media #{$small_mobile} {
|
||||
padding-left: 5%;
|
||||
}
|
||||
.sc-text {
|
||||
padding-left: 5px;
|
||||
}
|
||||
.sc-author {
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
&.first-comment {
|
||||
.sc-text {
|
||||
position: relative;
|
||||
&:before {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 8px;
|
||||
height: 260px;
|
||||
width: 1px;
|
||||
background: #e9e9e9;
|
||||
content: "";
|
||||
@media #{$small_mobile} {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.second-comment {
|
||||
.sc-text {
|
||||
position: relative;
|
||||
&:before {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 8px;
|
||||
height: 100px;
|
||||
width: 1px;
|
||||
background: #e9e9e9;
|
||||
content: "";
|
||||
@media #{$small_mobile} {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.sc-author {
|
||||
float: left;
|
||||
margin-right: 30px;
|
||||
@media #{$small_mobile} {
|
||||
float: none;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
img {
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.sc-text {
|
||||
display: table;
|
||||
padding-left: 30px;
|
||||
@media #{$small_mobile} {
|
||||
padding-left: 0;
|
||||
}
|
||||
span {
|
||||
font-size: 12px;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: #b2b2b2;
|
||||
}
|
||||
h5 {
|
||||
color: $heading-color;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.comment-btn {
|
||||
display: inline-block;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
color: #242d2e;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 2px;
|
||||
padding: 5px 22px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
border-radius: 40px;
|
||||
transition: all .3s;
|
||||
&.like-btn {
|
||||
margin-right: 10px;
|
||||
}
|
||||
&:hover {
|
||||
background: $primary-color;
|
||||
border-color: $primary-color;
|
||||
color: $white-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comment-form {
|
||||
.row {
|
||||
margin: 0 -6px;
|
||||
}
|
||||
.col-md-4,
|
||||
.col-md-12{
|
||||
padding: 0 6px;
|
||||
}
|
||||
h3 {
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
form {
|
||||
input,
|
||||
textarea {
|
||||
height: 50px;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
padding: 0 20px;
|
||||
font-size: 16px;
|
||||
margin-bottom: 20px;
|
||||
padding-right: 5px;
|
||||
&:focus {
|
||||
border: 1px solid $primary_color;
|
||||
}
|
||||
&::-webkit-input-placeholder {
|
||||
color: #636363;
|
||||
}
|
||||
&::-moz-placeholder {
|
||||
color: #636363;
|
||||
}
|
||||
&:-ms-input-placeholder {
|
||||
color: #636363;
|
||||
}
|
||||
&::-ms-input-placeholder {
|
||||
color: #636363;
|
||||
}
|
||||
&::placeholder {
|
||||
color: #636363;
|
||||
}
|
||||
}
|
||||
textarea {
|
||||
height: 116px;
|
||||
width: 100%;
|
||||
padding-top: 18px;
|
||||
margin-bottom: 30px;
|
||||
resize: none;
|
||||
}
|
||||
button {
|
||||
font-size: 14px;
|
||||
color: $white-color;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
background: $primary-color;
|
||||
border: none;
|
||||
padding: 13px 37px 12px;
|
||||
border-radius: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
59
branches/zaap-sufokien/v3/sass/_contact-page.scss
Normal file
59
branches/zaap-sufokien/v3/sass/_contact-page.scss
Normal file
@ -0,0 +1,59 @@
|
||||
/*----------------
|
||||
Contact Page
|
||||
----------------*/
|
||||
.contact-section {
|
||||
height: 100%;
|
||||
min-height: 700px;
|
||||
position: relative;
|
||||
.map-warp {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
iframe {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-box {
|
||||
padding-top: 40px;
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
max-width: 1120px;
|
||||
width: 100%;
|
||||
left: calc(50% - 560px);
|
||||
bottom: 87px;
|
||||
text-align: center;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 103px rgba(0, 0, 0, 0.08);
|
||||
@media #{ $big_screen, $medium_device, $tab} {
|
||||
width: calc(100% - 30px);
|
||||
left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
margin-bottom: 35px;
|
||||
i {
|
||||
display: block;
|
||||
font-size: 48px;
|
||||
color: $primary_color;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
font-size: 18px;
|
||||
color: $heading_color;
|
||||
font-weight: 500;
|
||||
span {
|
||||
color: #b2b2b2;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
92
branches/zaap-sufokien/v3/sass/_default.scss
Normal file
92
branches/zaap-sufokien/v3/sass/_default.scss
Normal file
@ -0,0 +1,92 @@
|
||||
/*----------------------------------------*/
|
||||
/* Template default CSS
|
||||
/*----------------------------------------*/
|
||||
|
||||
// Google Font load
|
||||
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,400i,500,500i,600,600i,700,700i&display=swap');
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
font-family: $font_1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
body {
|
||||
padding-left: 90px;
|
||||
@media #{ $xs_mobile} {
|
||||
padding-left: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
color: $heading_color;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 70px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 15px;
|
||||
color: $p_color;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
button,
|
||||
textarea {
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
}
|
||||
}
|
||||
183
branches/zaap-sufokien/v3/sass/_gallery-page.scss
Normal file
183
branches/zaap-sufokien/v3/sass/_gallery-page.scss
Normal file
@ -0,0 +1,183 @@
|
||||
/*------------------
|
||||
Gallery page
|
||||
------------------*/
|
||||
|
||||
.gallery-section {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding-top: 90px;
|
||||
.gallery-warp {
|
||||
margin-left: -5px;
|
||||
margin-right: -5px;
|
||||
}
|
||||
@media #{$large_mobile,$small_mobile} {
|
||||
padding-top: 0;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.nice-scroll {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
@media #{$large_mobile,$small_mobile} {
|
||||
overflow: inherit;
|
||||
}
|
||||
}
|
||||
.gallery-header {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
padding-top: 30px;
|
||||
padding-right: 74px;
|
||||
padding-left: 210px;
|
||||
z-index: 99;
|
||||
@media #{$medium_device,$tab_device,$large_mobile,$small_mobile} {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
@media #{$large_mobile,$small_mobile} {
|
||||
position: relative;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
h4 {
|
||||
float: left;
|
||||
margin-bottom: 30px;
|
||||
@media #{$large_mobile,$small_mobile} {
|
||||
margin-bottom: 20px;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.gallery-filter{
|
||||
list-style: none;
|
||||
float: right;
|
||||
@media #{$large_mobile,$small_mobile} {
|
||||
float: none;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #252525;
|
||||
margin-left: 35px;
|
||||
cursor: pointer;
|
||||
@media #{$tab_device} {
|
||||
margin-left: 20px;
|
||||
}
|
||||
@media #{$large_mobile,$small_mobile} {
|
||||
margin-left: 0;
|
||||
margin-right: 15px;
|
||||
font-size: 16px;
|
||||
}
|
||||
&.active {
|
||||
color: $primary_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.grid-sizer,
|
||||
.gallery-item {
|
||||
width: 20%;
|
||||
@media #{$medium_device} {
|
||||
width: 25%;
|
||||
}
|
||||
@media #{$tab_device,$large_mobile} {
|
||||
width: 50%;
|
||||
}
|
||||
@media #{$small_mobile} {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
.gallery-item {
|
||||
padding: 0 5px;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
.gi-hover {
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
bottom: 30px;
|
||||
@include opacity(0);
|
||||
@include transition(all 0.4s ease 0s);
|
||||
img {
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
h6 {
|
||||
padding-top: 5px;
|
||||
display: inline-block;
|
||||
color: $white_color;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
position: relative;
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: rgb(0,0,0);
|
||||
background: -moz-linear-gradient(0deg, rgba(0,0,0,0.8211659663865546) 0%, rgba(0,0,0,0) 94%);
|
||||
background: -webkit-linear-gradient(0deg, rgba(0,0,0,0.8211659663865546) 0%, rgba(0,0,0,0) 94%);
|
||||
background: linear-gradient(0deg, rgba(0,0,0,0.8211659663865546) 0%, rgba(0,0,0,0) 94%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
|
||||
@include opacity(0);
|
||||
@include transition(all 0.4s ease 0s);
|
||||
}
|
||||
img {
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.gi-hover {
|
||||
@include opacity(1);
|
||||
}
|
||||
a:after {
|
||||
@include opacity(0.8);
|
||||
}
|
||||
}
|
||||
&.gi-big {
|
||||
width: 40%;
|
||||
@media #{$medium_device,$tab_device,$large_mobile} {
|
||||
width: 50%;
|
||||
}
|
||||
@media #{$small_mobile} {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&.gi-long {
|
||||
@media #{$medium_device,$tab_device,$large_mobile} {
|
||||
width: 50%;
|
||||
}
|
||||
@media #{$small_mobile} {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fr-position-outside {
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
}
|
||||
.fr-position-text {
|
||||
color: $white_color;
|
||||
}
|
||||
.fr-window-skin-fresco.fr-window-ui-outside .fr-close-background,
|
||||
.fr-window-skin-fresco.fr-window-ui-outside .fr-close:hover .fr-close-background {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.fr-thumbnail-active {
|
||||
border: 2px solid $primary_color;
|
||||
}
|
||||
74
branches/zaap-sufokien/v3/sass/_helper.scss
Normal file
74
branches/zaap-sufokien/v3/sass/_helper.scss
Normal file
@ -0,0 +1,74 @@
|
||||
/*---------------------
|
||||
Helper CSS
|
||||
-----------------------*/
|
||||
.section-title {
|
||||
text-align: center;
|
||||
margin-bottom: 55px;
|
||||
img {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
h2 {
|
||||
font-weight: 400;
|
||||
font-size: 38px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
p{
|
||||
padding-top: 15px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.set-bg {
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: top center;
|
||||
}
|
||||
|
||||
.spad {
|
||||
padding-top: 110px;
|
||||
padding-bottom: 105px;
|
||||
}
|
||||
|
||||
.text-white {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
span,
|
||||
li,
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*---------------------
|
||||
Commom elements
|
||||
-----------------------*/
|
||||
.site-btn {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
padding: 17px 25px;
|
||||
min-width: 170px;
|
||||
color: $white-color;
|
||||
background: $primary-color;
|
||||
line-height: 1;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
i {
|
||||
font-size: 24px;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
&:hover {
|
||||
color: $white_color;
|
||||
}
|
||||
}
|
||||
150
branches/zaap-sufokien/v3/sass/_hero.scss
Normal file
150
branches/zaap-sufokien/v3/sass/_hero.scss
Normal file
@ -0,0 +1,150 @@
|
||||
/*---------------------
|
||||
Hero section
|
||||
-----------------------*/
|
||||
.hero-section {
|
||||
height: 100%;
|
||||
// @media #{$tab_device} {
|
||||
// padding: 0 40px;
|
||||
// }
|
||||
}
|
||||
.pana-accordion {
|
||||
@media #{$large_mobile, $small_mobile} {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.pana-accordion-item,
|
||||
.hero-item {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
position: relative;
|
||||
.pa-text {
|
||||
padding-left: 40px;
|
||||
padding-bottom: 50px;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
opacity: 0;
|
||||
top: -50px;
|
||||
.pa-tag{
|
||||
display: inline-block;
|
||||
padding: 4px 20px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 12px;
|
||||
color: $primary_color;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
border-radius: 2px;
|
||||
background: $white_color;
|
||||
}
|
||||
h2 {
|
||||
font-size: 60px;
|
||||
font-weight: 700;
|
||||
color: $white_color;
|
||||
margin-bottom: 20px;
|
||||
@media #{$large_mobile, $tab_device} {
|
||||
font-size: 48px;
|
||||
}
|
||||
@media #{$small_mobile} {
|
||||
font-size: 36px;
|
||||
}
|
||||
@media #{ $xs_mobile} {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
font-weight: 600;
|
||||
color: $white_color;
|
||||
padding-top: 15px;
|
||||
@media #{ $xs_mobile} {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.pa-author {
|
||||
overflow: hidden;
|
||||
img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
float: left;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.pa-text {
|
||||
opacity: 1;
|
||||
top: 0;
|
||||
@include transition(all 0.4s ease 0.4s);
|
||||
}
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: rgb(0,0,0);
|
||||
background: -moz-linear-gradient(0deg, rgba(0,0,0,0.8211659663865546) 0%, rgba(0,0,0,0) 94%);
|
||||
background: -webkit-linear-gradient(0deg, rgba(0,0,0,0.8211659663865546) 0%, rgba(0,0,0,0) 94%);
|
||||
background: linear-gradient(0deg, rgba(0,0,0,0.8211659663865546) 0%, rgba(0,0,0,0) 94%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.hero-slider-warp {
|
||||
height: 100%;
|
||||
display: none;
|
||||
@media #{$large_mobile, $small_mobile} {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.hero-slider {
|
||||
height: 100%;
|
||||
.owl-stage-outer,
|
||||
.owl-stage,
|
||||
.owl-item,
|
||||
.pana-accordion-item,
|
||||
.hero-item {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.hero-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 0 15px;
|
||||
.pa-text {
|
||||
padding-left: 0;
|
||||
padding-bottom: 0;
|
||||
h4 {
|
||||
display: inline-block;
|
||||
}
|
||||
.pa-author {
|
||||
img {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.owl-item.active .hero-item {
|
||||
.pa-text {
|
||||
opacity: 1;
|
||||
top: 0;
|
||||
@include transition(all 0.4s ease 0.4s);
|
||||
}
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: #000000;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
63
branches/zaap-sufokien/v3/sass/_loader.scss
Normal file
63
branches/zaap-sufokien/v3/sass/_loader.scss
Normal file
@ -0,0 +1,63 @@
|
||||
|
||||
/* Preloder */
|
||||
#preloder {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999999;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.loader {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -13px;
|
||||
margin-left: -13px;
|
||||
border-radius: 60px;
|
||||
animation: loader 0.8s linear infinite;
|
||||
-webkit-animation: loader 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes loader {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
border: 4px solid #f44336;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
border: 4px solid #673ab7;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
border: 4px solid #f44336;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes loader {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
border: 4px solid #f44336;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: rotate(180deg);
|
||||
border: 4px solid #673ab7;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
border: 4px solid #f44336;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
}
|
||||
164
branches/zaap-sufokien/v3/sass/_menu.scss
Normal file
164
branches/zaap-sufokien/v3/sass/_menu.scss
Normal file
@ -0,0 +1,164 @@
|
||||
.menu-wrapper {
|
||||
position: fixed;
|
||||
width: 90px;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
box-shadow: 14px 0px 103px rgba(0, 0, 0, 0.08);
|
||||
z-index: 999;
|
||||
@media #{ $xs_mobile} {
|
||||
width: 60px;
|
||||
}
|
||||
@include transition(0.4s);
|
||||
&.hide-left {
|
||||
opacity: 0;
|
||||
left: -90px;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-switch {
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
padding-top: 23px;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
color: $white_color;
|
||||
background: $sub_color;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu-social-warp {
|
||||
height: calc(100% - 90px);
|
||||
@include flexbox-center();
|
||||
}
|
||||
|
||||
.menu-social {
|
||||
a {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
color: $heading_color;
|
||||
margin-bottom: 50px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@media #{$small_mobile} {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.side-menu-wrapper {
|
||||
position: fixed;
|
||||
width: 270px;
|
||||
height: 100%;
|
||||
left: -280px;
|
||||
top: 0;
|
||||
overflow-y: auto;
|
||||
box-shadow: 14px 0px 103px rgba(0, 0, 0, 0.08);
|
||||
background-color: $white_color;
|
||||
z-index: 9999;
|
||||
@include opacity(0);
|
||||
@include transition(0.3s);
|
||||
@media #{$xs_mobile} {
|
||||
width: 100%;
|
||||
left: -100%;
|
||||
}
|
||||
&.active {
|
||||
left: 0;
|
||||
@include opacity(1);
|
||||
}
|
||||
.sm-header {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.menu-close {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
padding-top: 23px;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
color: $white_color;
|
||||
background: $sub_color;
|
||||
cursor: pointer;
|
||||
}
|
||||
.site-logo {
|
||||
background: $primary_color;
|
||||
width: calc(100% - 90px);
|
||||
@include flexbox-center();
|
||||
}
|
||||
|
||||
|
||||
.main-menu {
|
||||
height: calc(100% - 160px);
|
||||
@include flexbox-center();
|
||||
ul {
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
li {
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
@media #{$sm_mobile_h, $small_mobile} {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
color: #b2b2b2;
|
||||
@include transition(0.3s);
|
||||
@media #{$sm_mobile_h, $small_mobile} {
|
||||
font-size: 20px;
|
||||
}
|
||||
&:hover,
|
||||
&.active {
|
||||
color: $primary_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sm-footer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 0 15px;
|
||||
@media #{$sm_mobile_h} {
|
||||
position: relative;
|
||||
padding-top: 30px;
|
||||
}
|
||||
.sm-socail {
|
||||
a {
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
color: #b2b2b2;
|
||||
margin-right: 30px;
|
||||
margin-bottom: 10px;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.copyright-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #b2b2b2;
|
||||
padding-bottom: 40px;
|
||||
@media #{$xs_mobile} {
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
i {
|
||||
color: #e21010;
|
||||
}
|
||||
a {
|
||||
color: #b2b2b2;
|
||||
&:hover {
|
||||
color: $primary_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
141
branches/zaap-sufokien/v3/sass/_mixins.scss
Normal file
141
branches/zaap-sufokien/v3/sass/_mixins.scss
Normal file
@ -0,0 +1,141 @@
|
||||
// opacity
|
||||
@mixin opacity($opacity) {
|
||||
opacity: $opacity;
|
||||
$opacity-ie: $opacity * 100;
|
||||
filter: alpha(opacity=$opacity-ie); //IE8
|
||||
}
|
||||
// transition
|
||||
@mixin transition($args...) {
|
||||
-webkit-transition: $args;
|
||||
-moz-transition: $args;
|
||||
-ms-transition: $args;
|
||||
-o-transition: $args;
|
||||
transition: $args;
|
||||
}// transition
|
||||
@mixin border-radius($man) {
|
||||
-webkit-border-radius: $man;
|
||||
-moz-border-radius: $man;
|
||||
border-radius: $man;
|
||||
}
|
||||
|
||||
|
||||
// Flexbox display
|
||||
@mixin flexbox() {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
// justify-content
|
||||
@mixin justify-content($justify) {
|
||||
-webkit-justify-content: $justify;
|
||||
-moz-justify-content: $justify;
|
||||
-ms-justify-content: $justify;
|
||||
justify-content: $justify;
|
||||
-ms-flex-pack: $justify;
|
||||
}
|
||||
|
||||
// align-content
|
||||
@mixin align-content($align) {
|
||||
-webkit-align-content: $align;
|
||||
-moz-align-content: $align;
|
||||
-ms-align-content: $align;
|
||||
align-content: $align;
|
||||
}
|
||||
|
||||
// Cross-axis Alignment
|
||||
@mixin align-items($align) {
|
||||
-webkit-align-items: $align;
|
||||
-moz-align-items: $align;
|
||||
-ms-align-items: $align;
|
||||
align-items: $align;
|
||||
}
|
||||
|
||||
// Flexbox center
|
||||
@mixin flexbox-center() {
|
||||
@include flexbox();
|
||||
@include justify-content(center);
|
||||
@include align-items(center);
|
||||
}
|
||||
|
||||
|
||||
// transform
|
||||
// Browser Prefixes
|
||||
@mixin transform($transforms) {
|
||||
-webkit-transform: $transforms;
|
||||
-moz-transform: $transforms;
|
||||
-ms-transform: $transforms;
|
||||
transform: $transforms;
|
||||
}
|
||||
// Translate
|
||||
@mixin translate ($x, $y) {
|
||||
@include transform(translate($x, $y));
|
||||
}
|
||||
// TranslateY
|
||||
@mixin translateY ($y) {
|
||||
@include transform(translateY($y));
|
||||
}
|
||||
// TranslateY
|
||||
@mixin translateX ($x) {
|
||||
@include transform(translateX($x));
|
||||
}
|
||||
|
||||
|
||||
// Box shadows
|
||||
@mixin box-shadow($shadow...) {
|
||||
-webkit-box-shadow: $shadow;
|
||||
-moz-box-shadow: $shadow;
|
||||
box-shadow: $shadow;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@mixin background($imgpath,$position: center,$size: cover,$repeat: no-repeat) {
|
||||
background: {
|
||||
image: url($imgpath);
|
||||
position: $position;
|
||||
repeat: $repeat;
|
||||
size: $size;
|
||||
}
|
||||
}
|
||||
@mixin transform_time($total_time) {
|
||||
-webkit-transition: $total_time;
|
||||
transition: $total_time;
|
||||
}
|
||||
@mixin placeholder {
|
||||
&.placeholder {
|
||||
@content;
|
||||
}
|
||||
&:-moz-placeholder {
|
||||
@content;
|
||||
}
|
||||
&::-moz-placeholder {
|
||||
@content;
|
||||
}
|
||||
&::-webkit-input-placeholder {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin transition($args: all 0.6s ease 0s) {
|
||||
-webkit-transition: $args;
|
||||
-moz-transition: $args;
|
||||
-o-transition: $args;
|
||||
transition: $args;
|
||||
}
|
||||
|
||||
@mixin keyframes ($animation-name) {
|
||||
@-webkit-keyframes #{$animation-name} {
|
||||
@content;
|
||||
}
|
||||
@-moz-keyframes #{$animation-name} {
|
||||
@content;
|
||||
}
|
||||
@-o-keyframes #{$animation-name} {
|
||||
@content;
|
||||
}
|
||||
@keyframes #{$animation-name} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
26
branches/zaap-sufokien/v3/sass/_varriable.scss
Normal file
26
branches/zaap-sufokien/v3/sass/_varriable.scss
Normal file
@ -0,0 +1,26 @@
|
||||
|
||||
// Color
|
||||
$primary_color: #2916e0;
|
||||
$sub_color: #0f0f0f;
|
||||
$p_color: #636363;
|
||||
$heading_color: #252525;
|
||||
$white_color:#fff;
|
||||
|
||||
$bg_1 : #151515;
|
||||
|
||||
//Fonts
|
||||
$font_1: 'Montserrat', sans-serif;
|
||||
$font_2: 'Roboto', sans-serif;;
|
||||
|
||||
|
||||
$medium_device : 'only screen and (min-width: 992px) and (max-width: 1200px)';
|
||||
$tab_device:'only screen and (min-width: 768px) and (max-width: 991px)';
|
||||
$large_mobile: 'only screen and (min-width: 576px) and (max-width: 767px)';
|
||||
$tab:'(max-width: 991px)';
|
||||
$small_mobile:'(max-width: 576px)';
|
||||
$xs_mobile:'(max-width: 420px)';
|
||||
$sm_mobile:'only screen and (min-width: 421px) and (max-width: 575px)';
|
||||
$big_screen:'only screen and (min-width: 1200px) and (max-width: 1440px)';
|
||||
$extra_big_screen: 'only screen and (min-width: 1200px) and (max-width: 3640px)';
|
||||
|
||||
$sm_mobile_h:'(max-height: 500px)';
|
||||
40
branches/zaap-sufokien/v3/sass/style.scss
Normal file
40
branches/zaap-sufokien/v3/sass/style.scss
Normal file
@ -0,0 +1,40 @@
|
||||
/* =================================
|
||||
------------------------------------
|
||||
Tulen | Photography HTML Template
|
||||
Version: 1.0
|
||||
------------------------------------
|
||||
====================================*/
|
||||
@import 'varriable';
|
||||
@import '_mixins';
|
||||
|
||||
|
||||
// default
|
||||
@import 'default';
|
||||
|
||||
// helper
|
||||
@import 'helper';
|
||||
|
||||
//loader
|
||||
@import 'loader';
|
||||
|
||||
// Menu
|
||||
@import 'menu';
|
||||
|
||||
//hero
|
||||
@import 'hero';
|
||||
|
||||
//About Page
|
||||
@import 'about-page';
|
||||
|
||||
//Gallery Page
|
||||
@import 'gallery-page';
|
||||
|
||||
//Blog Page
|
||||
@import 'blog-page';
|
||||
|
||||
//Blog single Page
|
||||
@import 'blog-single';
|
||||
|
||||
//Contact Page
|
||||
@import 'contact-page';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user