initial commit
This commit is contained in:
Kwesi Banson Jnr
559
assets/css/responsive.css
Executable file
559
assets/css/responsive.css
Executable file
@@ -0,0 +1,559 @@
|
||||
|
||||
@media only screen and (min-width:0px) and (max-width:767px) {
|
||||
/* global start */
|
||||
section {
|
||||
padding: 50px 10px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
}
|
||||
.btn {
|
||||
font-size: 14px;
|
||||
padding: 8px 27px 7px;
|
||||
}
|
||||
.d2c_title::after {
|
||||
top: 68px;
|
||||
}
|
||||
/* global end */
|
||||
|
||||
/* header */
|
||||
.d2c_navbar {
|
||||
padding: 12px 10px;
|
||||
}
|
||||
.d2c_navbar .navbar-nav .nav-link {
|
||||
font-size: 16px;
|
||||
}
|
||||
/* hero */
|
||||
.d2c_hero_wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
.d2c_shade_bg img {
|
||||
object-fit: cover;
|
||||
}
|
||||
.d2c_hero_wrapper h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
/* about */
|
||||
.d2c_about_wrapper {
|
||||
padding: 70px 10px 50px;
|
||||
}
|
||||
.d2c_img_container .d2c_img_wrapper:first-child {
|
||||
width: 240px;
|
||||
top: -38px;
|
||||
left: 26px;
|
||||
}
|
||||
.d2c_img_container .d2c_img_wrapper:nth-child(2) {
|
||||
width: 242px;
|
||||
bottom: 36px;
|
||||
right: 24px;
|
||||
}
|
||||
/* partner */
|
||||
.d2c_partner_wrapper {
|
||||
padding: 0px 0px 50px;
|
||||
}
|
||||
/* service */
|
||||
.d2c_service_wrapper .d2c_card_wrapper {
|
||||
height: 100%;
|
||||
padding: 30px;
|
||||
}
|
||||
.d2c_service_wrapper li {
|
||||
font-size: 16px;
|
||||
}
|
||||
.d2c_service_wrapper ul {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.d2c_service_wrapper .btn {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.d2c_service_card:after {
|
||||
display: none;
|
||||
}
|
||||
/* feature */
|
||||
.d2c_feature_wrapper {
|
||||
padding: 90px 10px 50px;
|
||||
}
|
||||
.d2c_feature_wrapper .d2c_img_container .d2c_img_wrapper:first-child {
|
||||
width: 217px !important;
|
||||
}
|
||||
.d2c_feature_wrapper .d2c_img_container .d2c_img_wrapper:nth-child(2) {
|
||||
width: 210px;
|
||||
}
|
||||
/* team */
|
||||
.d2c_team_wrapper .d2c_sub_title::after {
|
||||
left: 0%;
|
||||
transform: translateX(-7px);
|
||||
}
|
||||
.d2c_team_wrapper .d2c_title::after {
|
||||
top: 40px;
|
||||
left: 0%;
|
||||
transform: translateX(-18px);
|
||||
}
|
||||
.d2c_team_card .d2c_img_wrapper {
|
||||
width: 100%;
|
||||
height: 330px;
|
||||
}
|
||||
.d2c_team_card .d2c_img_wrapper::before {
|
||||
width: 100%;
|
||||
height: 330px;
|
||||
}
|
||||
/* portfolio */
|
||||
.d2c_portfolio_wrapper .d2c_sub_title::after {
|
||||
left: -4px;
|
||||
}
|
||||
.d2c_portfolio_wrapper h2 {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
.d2c_portfolio_wrapper .d2c_title::after {
|
||||
left: 0%;
|
||||
transform: translateX(-4%);
|
||||
}
|
||||
.d2c_grid {
|
||||
column-count: 1;
|
||||
}
|
||||
.fancybox {
|
||||
height: 350px;
|
||||
}
|
||||
/* blog */
|
||||
.d2c_blog_wrapper {
|
||||
padding: 50px 10px;
|
||||
}
|
||||
.d2c_blog_wrapper p {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.d2c_blog_wrapper .d2c_sub_title::after {
|
||||
left: 0%;
|
||||
transform: translateX(-5px);
|
||||
}
|
||||
.d2c_blog_wrapper .d2c_title::after {
|
||||
top: 40px;
|
||||
left: 0%;
|
||||
transform: translateX(-16px);
|
||||
}
|
||||
.d2c_blog_wrapper .d2c_card_body {
|
||||
margin: 0px 20px;
|
||||
padding: 20px;
|
||||
margin-top: -33px;
|
||||
}
|
||||
/* testimonial */
|
||||
.d2c_testimonial_wrapper .d2c_card_wrapper {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.d2c_testimonial_wrapper .d2c_card_wrapper h5 {
|
||||
font-size: 22px;
|
||||
padding: 20px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.d2c_testimonial_wrapper .d2c_sub_title::after {
|
||||
left: 0%;
|
||||
transform: translateX(-5px);
|
||||
}
|
||||
.d2c_testimonial_wrapper .d2c_title::after {
|
||||
top: 60px;
|
||||
left: 0%;
|
||||
transform: translateX(-17px);
|
||||
}
|
||||
/* newsletter */
|
||||
.d2c_newsletter_wrapper .d2c_card_wrapper {
|
||||
padding: 40px 30px;
|
||||
}
|
||||
.d2c_newsletter_wrapper .d2c_sub_title::after {
|
||||
left: -9px;
|
||||
}
|
||||
/* footer */
|
||||
.d2c_footer_wrapper {
|
||||
padding: 50px 10px 30px;
|
||||
}
|
||||
.d2c_footer_logo {
|
||||
max-width: 100%;
|
||||
}
|
||||
.d2c_footer_wrapper h3 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
/* copy */
|
||||
.d2c_copy_wrapper h4 {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:768px) and (max-width:991px) {
|
||||
/* global start */
|
||||
section {
|
||||
padding: 50px 0px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
p {
|
||||
font-size: 15px;
|
||||
}
|
||||
.btn {
|
||||
font-size: 15px;
|
||||
padding: 9px 24px 8px;
|
||||
}
|
||||
.d2c_title::after {
|
||||
top: 40px;
|
||||
}
|
||||
/* global end */
|
||||
|
||||
/* header */
|
||||
.d2c_navbar {
|
||||
padding: 12px 0px;
|
||||
}
|
||||
.d2c_navbar .navbar-nav .nav-link {
|
||||
font-size: 16px;
|
||||
}
|
||||
/* hero */
|
||||
.d2c_hero_wrapper h1 {
|
||||
font-size: 42px;
|
||||
}
|
||||
/* about */
|
||||
.d2c_about_wrapper {
|
||||
padding: 120px 0px 50px;
|
||||
}
|
||||
.d2c_img_container .d2c_img_wrapper:first-child {
|
||||
top: -63px;
|
||||
left: 43px;
|
||||
}
|
||||
.d2c_img_container .d2c_img_wrapper:nth-child(2) {
|
||||
bottom: 55px;
|
||||
right: 48px;
|
||||
}
|
||||
/* partner */
|
||||
.d2c_partner_wrapper {
|
||||
padding: 20px 0px 70px;
|
||||
}
|
||||
/* service */
|
||||
.d2c_service_wrapper .d2c_card_wrapper {
|
||||
height: 100%;
|
||||
padding: 30px;
|
||||
}
|
||||
.d2c_service_card:after {
|
||||
top: 105px;
|
||||
left: -45px;
|
||||
}
|
||||
/* feature */
|
||||
.d2c_feature_wrapper {
|
||||
padding: 150px 0px 100px;
|
||||
}
|
||||
/* team */
|
||||
.d2c_team_card .d2c_img_wrapper {
|
||||
width: 100%;
|
||||
height: 320px;
|
||||
}
|
||||
.d2c_team_card .d2c_img_wrapper::before {
|
||||
width: 100%;
|
||||
height: 320px;
|
||||
}
|
||||
/* portfolio */
|
||||
.d2c_portfolio_wrapper .d2c_sub_title::after {
|
||||
left: 240px;
|
||||
}
|
||||
.d2c_portfolio_wrapper h2 {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
.d2c_portfolio_wrapper .d2c_title::after {
|
||||
top: 45px;
|
||||
transform: translateX(-12%);
|
||||
}
|
||||
.d2c_grid {
|
||||
column-count: 2;
|
||||
}
|
||||
.fancybox {
|
||||
height: 350px;
|
||||
}
|
||||
/* blog */
|
||||
.d2c_blog_wrapper {
|
||||
padding: 60px 0px;
|
||||
}
|
||||
.d2c_blog_wrapper .d2c_card_body {
|
||||
margin-top: -60px;
|
||||
}
|
||||
/* testimonial */
|
||||
.d2c_testimonial_wrapper .d2c_card_wrapper {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.d2c_testimonial_wrapper .d2c_card_wrapper h5 {
|
||||
font-size: 27px;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
.d2c_testimonial_wrapper .d2c_sub_title::after {
|
||||
transform: translateX(-80px);
|
||||
}
|
||||
/* newsletter */
|
||||
.d2c_newsletter_wrapper .d2c_card_wrapper {
|
||||
padding: 70px 30px;
|
||||
}
|
||||
.d2c_newsletter_wrapper .d2c_sub_title::after {
|
||||
left: -7px;
|
||||
}
|
||||
.form-control {
|
||||
padding: 9px 10px;
|
||||
}
|
||||
/* footer */
|
||||
.d2c_footer_wrapper {
|
||||
padding: 60px 0px 30px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (min-width:992px) and (max-width:1199px) {
|
||||
/* global start */
|
||||
section {
|
||||
padding: 50px 0px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
margin-bottom: 34px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
}
|
||||
.btn {
|
||||
font-size: 15px;
|
||||
padding: 8px 26px 7px;
|
||||
}
|
||||
.d2c_title::after {
|
||||
top: 68px;
|
||||
}
|
||||
/* global end */
|
||||
|
||||
/* header */
|
||||
.d2c_navbar {
|
||||
padding: 16px 0px;
|
||||
}
|
||||
.d2c_navbar .navbar-nav .nav-link {
|
||||
font-size: 15px;
|
||||
}
|
||||
.d2c_navbar .navbar-nav .nav-item {
|
||||
margin: 3px 10px;
|
||||
}
|
||||
/* hero */
|
||||
.d2c_hero_wrapper h1 {
|
||||
font-size: 42px;
|
||||
}
|
||||
.d2c_shade_bg img {
|
||||
object-fit: cover;
|
||||
}
|
||||
/* about */
|
||||
.d2c_about_wrapper {
|
||||
padding: 70px 0px 50px;
|
||||
}
|
||||
.d2c_img_container .d2c_img_wrapper:first-child {
|
||||
width: 265px;
|
||||
top: -64px;
|
||||
}
|
||||
.d2c_about_wrapper .d2c_img_container .d2c_img_wrapper:nth-child(2) {
|
||||
width: 244px;
|
||||
bottom: 41px;
|
||||
}
|
||||
/* partner */
|
||||
.d2c_partner_wrapper {
|
||||
padding: 50px 0px;
|
||||
}
|
||||
/* service */
|
||||
.d2c_service_wrapper .d2c_card_wrapper p {
|
||||
font-size: 14px;
|
||||
}
|
||||
.d2c_service_wrapper .d2c_title::after {
|
||||
top: 30px;
|
||||
}
|
||||
.d2c_service_card:after {
|
||||
top: 69px;
|
||||
left: -39px;
|
||||
}
|
||||
/* feature */
|
||||
.d2c_feature_wrapper {
|
||||
padding: 110px 0px 70px;
|
||||
}
|
||||
.d2c_feature_wrapper .d2c_img_container .d2c_img_wrapper:first-child {
|
||||
width: 245px;
|
||||
}
|
||||
.d2c_img_container .d2c_img_wrapper:nth-child(2) {
|
||||
width: 245px;
|
||||
}
|
||||
/* team */
|
||||
.d2c_team_card .d2c_img_wrapper {
|
||||
width: 100%;
|
||||
height: 390px;
|
||||
}
|
||||
.d2c_team_card .d2c_img_wrapper::before {
|
||||
width: 100%;
|
||||
height: 390px;
|
||||
}
|
||||
/* portfolio */
|
||||
.d2c_portfolio_wrapper h2 {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
.d2c_portfolio_wrapper .d2c_sub_title::after {
|
||||
left: 126px;
|
||||
}
|
||||
.d2c_portfolio_wrapper .d2c_title::after {
|
||||
transform: translateX(-19%);
|
||||
}
|
||||
.fancybox {
|
||||
height: 340px;
|
||||
}
|
||||
/* blog */
|
||||
.d2c_blog_wrapper {
|
||||
padding: 60px 0px;
|
||||
}
|
||||
.d2c_blog_wrapper p {
|
||||
font-size: 14px;
|
||||
}
|
||||
.d2c_blog_wrapper h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
/* testimonial */
|
||||
.d2c_testimonial_wrapper h2 {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.d2c_testimonial_wrapper .d2c_card_wrapper h5 {
|
||||
margin-bottom: 50px;
|
||||
font-size: 32px;
|
||||
}
|
||||
.d2c_blog_wrapper .d2c_card_body {
|
||||
margin-top: -38px;
|
||||
}
|
||||
/* newsletter */
|
||||
.d2c_newsletter_wrapper .form-control {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
.d2c_newsletter_wrapper .d2c_sub_title::after {
|
||||
left: 143px;
|
||||
}
|
||||
/* footer */
|
||||
.d2c_footer_logo {
|
||||
max-width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:1200px) and (max-width:1400px) {
|
||||
/* global start */
|
||||
section {
|
||||
padding: 70px 0px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 36px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
.btn {
|
||||
font-size: 15px;
|
||||
padding: 9px 28px 8px;
|
||||
}
|
||||
.d2c_title::after {
|
||||
top: 90px;
|
||||
}
|
||||
/* global end */
|
||||
|
||||
/* header */
|
||||
.d2c_navbar {
|
||||
padding: 16px 0px;
|
||||
}
|
||||
.d2c_navbar .navbar-nav .nav-link {
|
||||
font-size: 16px;
|
||||
}
|
||||
/* hero */
|
||||
.d2c_hero_wrapper h1 {
|
||||
font-size: 48px;
|
||||
}
|
||||
/* about */
|
||||
.d2c_about_wrapper {
|
||||
padding: 110px 0px 70px;
|
||||
}
|
||||
.d2c_img_container .d2c_img_wrapper:first-child {
|
||||
width: 337px;
|
||||
}
|
||||
.d2c_img_container .d2c_img_wrapper:nth-child(2) {
|
||||
width: 310px;
|
||||
}
|
||||
/* partner */
|
||||
.d2c_partner_wrapper {
|
||||
padding: 70px 0px;
|
||||
}
|
||||
/* service */
|
||||
.d2c_service_wrapper .d2c_card_wrapper {
|
||||
height: 100%;
|
||||
padding: 30px;
|
||||
}
|
||||
.d2c_service_wrapper .d2c_card_wrapper p {
|
||||
font-size: 14px;
|
||||
}
|
||||
/* feature */
|
||||
.d2c_feature_wrapper {
|
||||
padding: 130px 0px 70px;
|
||||
}
|
||||
.d2c_feature_wrapper .d2c_img_container .d2c_img_wrapper:first-child {
|
||||
width: 287px;
|
||||
}
|
||||
.d2c_img_container .d2c_img_wrapper:nth-child(2) {
|
||||
width: 312px;
|
||||
}
|
||||
/* team */
|
||||
.d2c_team_card .d2c_img_wrapper {
|
||||
width: 100%;
|
||||
height: 340px;
|
||||
}
|
||||
.d2c_team_card .d2c_img_wrapper::before {
|
||||
width: 100%;
|
||||
height: 340px;
|
||||
}
|
||||
/* portfolio */
|
||||
.d2c_portfolio_wrapper .d2c_sub_title::after {
|
||||
left: 167px;
|
||||
}
|
||||
.d2c_portfolio_wrapper h2 {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
.fancybox {
|
||||
height: 400px;
|
||||
}
|
||||
/* blog */
|
||||
.d2c_blog_wrapper {
|
||||
padding: 70px 0px;
|
||||
}
|
||||
.d2c_blog_wrapper p {
|
||||
font-size: 14px;
|
||||
}
|
||||
.d2c_blog_wrapper h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
/* testimonial */
|
||||
.d2c_testimonial_wrapper .d2c_card_wrapper h5 {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
/* newsletter */
|
||||
.d2c_newsletter_wrapper .d2c_sub_title::after {
|
||||
left: 196px;
|
||||
}
|
||||
.d2c_newsletter_wrapper .form-control {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
/* footer */
|
||||
.d2c_footer_wrapper {
|
||||
padding: 70px 0px 30px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Template Name: {{Tech Start Pro}}
|
||||
Template URL: {{https://www.designtocodes.com/product/techstart-pro-responsive-bootstrap-landing-page/}}
|
||||
Description: {{TechStart Pro landing page is the definitive solution for businesses and individuals seeking a top-tier online presence. This responsive Bootstrap landing page is not just good-looking, it's also simple.}}
|
||||
Author: DesignToCodes
|
||||
Author URL: https://www.designtocodes.com
|
||||
Text Domain: {{ Tech Start Pro }}
|
||||
*/
|
||||
953
assets/css/style.css
Executable file
953
assets/css/style.css
Executable file
@@ -0,0 +1,953 @@
|
||||
|
||||
/* global style start */
|
||||
:root {
|
||||
/* font */
|
||||
--primary_font: 'Syne', sans-serif;
|
||||
--secondary_font: 'Sora', sans-serif;
|
||||
/* color */
|
||||
--primary_color: #FF6DBA;
|
||||
--secondary_color: #121820;
|
||||
--default_color: #FFFFFF;
|
||||
--primary_text_color: #F0F0F0;
|
||||
--secondary_text_color: rgba(18, 24, 32, 0.40);
|
||||
/* text shade */
|
||||
--primary_text_shade: #999999;
|
||||
--secondary_text_shade: rgba(240, 240, 240, 0.40);
|
||||
/* shade bg */
|
||||
--primary_bg: rgba(255, 109, 186, 0.04);
|
||||
/* border */
|
||||
--primary_radius: 8px;
|
||||
--secondary_radius: 4px;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
section {
|
||||
padding: 100px 0px;
|
||||
}
|
||||
/* selection */
|
||||
::selection {
|
||||
color: var(--default_color);
|
||||
background: var(--primary_color);
|
||||
}
|
||||
/* selection */
|
||||
/* typography */
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
color: var(--primary_text_color);
|
||||
font-family: var(--primary_font);
|
||||
font-weight: 600;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
h2 {
|
||||
font-size: 42px;
|
||||
margin-bottom: 54px;
|
||||
}
|
||||
h2 span {
|
||||
color: var(--primary_color);
|
||||
}
|
||||
.d2c_title::after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
background: url(../images/about_line.png);
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: -21px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 22px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
h3 span {
|
||||
color: var(--primary_color);
|
||||
}
|
||||
.d2c_sub_title::after {
|
||||
content: '';
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 3px solid var(--primary_color);
|
||||
background: transparent;
|
||||
border-radius: 50px;
|
||||
position: absolute;
|
||||
top: -14px;
|
||||
left: -6px;
|
||||
}
|
||||
h4 {
|
||||
color: var(--primary_color);
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
p {
|
||||
color: var(--primary_text_color);
|
||||
font-family: var(--secondary_font);
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
img {
|
||||
object-fit: cover;
|
||||
}
|
||||
/* button */
|
||||
.btn {
|
||||
color: var(--secondary_color);
|
||||
font-family: var(--secondary_font);
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
text-transform: capitalize;
|
||||
background: var(--primary_color);
|
||||
border-radius: var(--primary_radius);
|
||||
border: 1px solid var(--primary_color);
|
||||
padding: 11px 35px 10px;
|
||||
transition: 0.4s all;
|
||||
}
|
||||
.btn:hover {
|
||||
color: var(--primary_color);
|
||||
background: var(--secondary_color);
|
||||
border: 1px solid var(--primary_color);
|
||||
transition: 0.4s all;
|
||||
}
|
||||
.btn.active {
|
||||
color: var(--primary_color);
|
||||
background: var(--secondary_color);
|
||||
border: 1px solid var(--primary_color);
|
||||
transition: 0.4s all;
|
||||
}
|
||||
/* about and feature section img style start */
|
||||
.d2c_img_container .d2c_img_wrapper:first-child {
|
||||
width: 390px;
|
||||
position: absolute;
|
||||
top: -92px;
|
||||
left: 30px;
|
||||
z-index: 1;
|
||||
}
|
||||
.d2c_img_container .d2c_img_wrapper:first-child img {
|
||||
border: 2px solid var(--primary_color);
|
||||
}
|
||||
.d2c_img_container .d2c_img_wrapper::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
.d2c_img_container .d2c_img_wrapper:first-child::after {
|
||||
background: linear-gradient(0deg, rgba(18, 24, 32, 0.25) 0%, rgba(18, 24, 32, 0.25) 100%);
|
||||
border-radius: 8px;
|
||||
}
|
||||
.d2c_img_container .d2c_img_wrapper:nth-child(2) {
|
||||
width: 370px;
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
right: 28px;
|
||||
z-index: 0;
|
||||
}
|
||||
.d2c_img_container .d2c_img_wrapper:nth-child(2)::after {
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(0deg, rgba(18, 24, 32, 0.60) 0%, rgba(18, 24, 32, 0.60) 100%);
|
||||
}
|
||||
.d2c_img_container img:last-child {
|
||||
width: 100%;
|
||||
}
|
||||
/* about and feature section img style end */
|
||||
|
||||
/* global style end */
|
||||
|
||||
/* preloader start */
|
||||
.preloader {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--secondary_color);
|
||||
z-index: 9999;
|
||||
transition: opacity 2.5s ease;
|
||||
opacity: 1;
|
||||
}
|
||||
.preloader.hide {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.preloader img {
|
||||
max-width: 120px;
|
||||
max-height: 50px;
|
||||
}
|
||||
/* preloader end */
|
||||
|
||||
/* Navbar Start */
|
||||
.navbar-brand {
|
||||
max-width: 180px;
|
||||
}
|
||||
.d2c_navbar {
|
||||
padding: 22px 0px;
|
||||
background: var(--secondary_color);
|
||||
}
|
||||
.d2c_navbar .navbar-nav .nav-item {
|
||||
margin: 5px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.d2c_navbar .navbar-nav .nav-item:last-child {
|
||||
margin-right: 45px;
|
||||
}
|
||||
.d2c_navbar .navbar-nav .nav-link {
|
||||
color: var(--primary_text_color);
|
||||
font-family: var(--secondary_font);
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
text-transform: capitalize;
|
||||
padding: 0;
|
||||
transition: .4s all ease;
|
||||
}
|
||||
.d2c_navbar .navbar-nav .nav-link:hover {
|
||||
color: var(--primary_color);
|
||||
transition: .4s all ease;
|
||||
}
|
||||
.navbar-nav .nav-link.active, .navbar-nav .show>.nav-link {
|
||||
color: var(--primary_color) !important;
|
||||
}
|
||||
.d2c_navbar .d2c_nav_btn.active{
|
||||
background: var(--secondary_color);
|
||||
color: var(--primary_color);
|
||||
border: 1px solid var(--primary_color);
|
||||
transition: 0.4s all;
|
||||
}
|
||||
/* Nav Item Show from Side */
|
||||
body .d2c_mobile_view {
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
inset: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
.navbar.d2c_mobile_view_body .navbar-nav {
|
||||
width: 100%;
|
||||
}
|
||||
.navbar.d2c_mobile_view_body .nav-item {
|
||||
margin-right: 0;
|
||||
}
|
||||
.d2c_mobile_view .show_width {
|
||||
max-width: 14.625rem;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
right: -380px;
|
||||
top: 0;
|
||||
transition: 0.5s;
|
||||
padding: 20px 15px;
|
||||
background-color: var(--secondary_color);
|
||||
overflow: scroll;
|
||||
z-index: 9999;
|
||||
box-shadow: 0px 0px 10px rgb(0 0 0 / 15%);
|
||||
}
|
||||
|
||||
.d2c_mobile_view.show .show_width {
|
||||
right: 0;
|
||||
transition: 0.5s;
|
||||
}
|
||||
.hide_width {
|
||||
max-width: 15.625rem;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
right: -380px !important;
|
||||
top: 0;
|
||||
transition: 0.5s !important;
|
||||
padding: 20px 15px;
|
||||
background-color: var(--primary_bg);
|
||||
overflow: scroll;
|
||||
z-index: 9999;
|
||||
}
|
||||
.navbar-toggler:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
.navbar-toggler {
|
||||
border: 1px solid var(--primary_shade);
|
||||
color: var(--primary_text_color);
|
||||
padding: 5px 10px;
|
||||
width: 44px;
|
||||
margin-left: 10px;
|
||||
transition: .4s all ease;
|
||||
}
|
||||
.navbar-toggler:hover {
|
||||
background: transparent;
|
||||
transition: .4s all ease;
|
||||
}
|
||||
.d2c_cross_btn {
|
||||
width: auto;
|
||||
border: none;
|
||||
}
|
||||
@media only screen and (min-width:991px) {
|
||||
body .d2c_mobile_view {
|
||||
opacity: 0;
|
||||
transition: .5s;
|
||||
}
|
||||
}
|
||||
/* Navbar End */
|
||||
|
||||
/* hero start */
|
||||
.d2c_hero_bg {
|
||||
background: linear-gradient(180deg, rgba(18, 24, 32, 0.40) 0%, rgba(18, 24, 32, 0.79) 80.96%, #121820 100%), url(../images/hero_bg.png);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.d2c_hero_wrapper {
|
||||
height: 92vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.d2c_vector_img_wrapper {
|
||||
background: url(../images/hero_vector_bg.png);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.d2c_shade_bg {
|
||||
background: url(../images/hero_vector_bg_shade.png);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.d2c_shade_bg img {
|
||||
width: 552px;
|
||||
object-fit: none;
|
||||
}
|
||||
.d2c_hero_wrapper h1 {
|
||||
font-size: 60px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.d2c_hero_wrapper h1 span {
|
||||
font-weight: 700;
|
||||
color: var(--primary_color);
|
||||
}
|
||||
.d2c_hero_wrapper p {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
/* hero end */
|
||||
|
||||
/* about section start */
|
||||
.d2c_about_wrapper {
|
||||
padding: 190px 0px 100px;
|
||||
background: var(--secondary_color);
|
||||
}
|
||||
.d2c_last_paragraph {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
/* about section end */
|
||||
|
||||
/* partner section start */
|
||||
.d2c_partner_wrapper {
|
||||
background: var(--secondary_color);
|
||||
padding: 100px 0px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.d2c_partner_wrapper .slick-slide {
|
||||
padding: 0px 12px !important;
|
||||
}
|
||||
.d2c_partner_wrapper .d2c_img_wrapper {
|
||||
width: 100%;
|
||||
height: 96px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(255, 109, 186, 0.10);
|
||||
background: rgba(255, 109, 186, 0.02);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: 0.4s all;
|
||||
}
|
||||
.d2c_partner_wrapper .d2c_img_wrapper:hover {
|
||||
border: 1px solid var(--primary_color);
|
||||
background: rgba(245, 124, 0, 0.02);
|
||||
transition: 0.4s all;
|
||||
}
|
||||
.d2c_partner_wrapper .d2c_img_wrapper img {
|
||||
max-width: 134px;
|
||||
max-height: 96px;
|
||||
opacity: 0.3;
|
||||
transition: 0.4s all;
|
||||
}
|
||||
.d2c_partner_wrapper .d2c_img_wrapper:hover img {
|
||||
opacity: 1;
|
||||
transition: 0.4s all;
|
||||
}
|
||||
/* partner section end */
|
||||
|
||||
.d2c_shade_bg_wrapper {
|
||||
background: var(--primary_bg);
|
||||
background-image: url(../images/shade_bg.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: top center;
|
||||
}
|
||||
|
||||
/* service section start */
|
||||
.d2c_service_wrapper h3 {
|
||||
color: var(--secondary_color);
|
||||
}
|
||||
.d2c_service_wrapper h2 {
|
||||
color: var(--secondary_color);
|
||||
}
|
||||
.d2c_service_wrapper p {
|
||||
color: var(--secondary_text_color);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.d2c_service_wrapper li {
|
||||
color: var(--secondary_color);
|
||||
font-family: var(--primary_font);
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.d2c_service_wrapper ul {
|
||||
list-style-type: square;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.d2c_service_wrapper li::marker {
|
||||
color: var(--primary_color) !important;
|
||||
font-size: 18px;
|
||||
}
|
||||
.d2c_service_wrapper .d2c_card_wrapper {
|
||||
background: #FFFFFF;
|
||||
padding: 40px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 0px 45px 0px rgba(0, 0, 0, 0.10);
|
||||
transition: 0.4s all;
|
||||
}
|
||||
.d2c_icon_wrapper {
|
||||
background: var(--primary_color);
|
||||
box-shadow: -7px 20px 16px 0px rgba(103, 76, 174, 0.20);
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
transition: 0.4s all;
|
||||
}
|
||||
.d2c_icon_wrapper i {
|
||||
font-size: 32px;
|
||||
color: var(--default_color);
|
||||
transition: 0.4s all;
|
||||
}
|
||||
.d2c_service_wrapper .d2c_card_wrapper h3 {
|
||||
color: var(--primary_color);
|
||||
transition: 0.4s all;
|
||||
}
|
||||
.d2c_service_wrapper .d2c_card_wrapper p {
|
||||
color: var(--primary_text_shade);
|
||||
transition: 0.4s all;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.d2c_service_wrapper .d2c_card_wrapper:hover {
|
||||
background: var(--primary_color);
|
||||
transition: 0.4s all;
|
||||
}
|
||||
.d2c_service_wrapper .d2c_card_wrapper:hover .d2c_icon_wrapper {
|
||||
background: var(--primary_text_color);
|
||||
transition: 0.4s all;
|
||||
}
|
||||
.d2c_service_wrapper .d2c_card_wrapper:hover .d2c_icon_wrapper i {
|
||||
color: var(--primary_color);
|
||||
transition: 0.4s all;
|
||||
}
|
||||
.d2c_service_wrapper .d2c_card_wrapper:hover h3 {
|
||||
color: var(--secondary_color);
|
||||
transition: 0.4s all;
|
||||
}
|
||||
.d2c_service_wrapper .d2c_card_wrapper:hover p {
|
||||
color: var(--primary_text_color);
|
||||
transition: 0.4s all;
|
||||
}
|
||||
.d2c_service_card:after {
|
||||
content: url(../images/service_circle.jpg);
|
||||
position: absolute;
|
||||
top: 173px;
|
||||
left: -80px;
|
||||
z-index: -1;
|
||||
}
|
||||
/* service section end */
|
||||
|
||||
/* features section start */
|
||||
.d2c_feature_wrapper {
|
||||
padding: 190px 0px 100px;
|
||||
}
|
||||
.d2c_feature_wrapper .d2c_img_container .d2c_img_wrapper:first-child {
|
||||
width: 330px;
|
||||
top: -73px;
|
||||
}
|
||||
.d2c_feature_wrapper h3 {
|
||||
color: var(--secondary_color);
|
||||
}
|
||||
.d2c_feature_wrapper h2 {
|
||||
color: var(--secondary_color);
|
||||
}
|
||||
.d2c_feature_wrapper p {
|
||||
color: var(--secondary_text_color);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
/* features section end */
|
||||
|
||||
.d2c_team_bg_wrapper {
|
||||
background: var(--secondary_color);
|
||||
background-image: url(../images/shade_bg.png);
|
||||
background-position: top center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
/* team section start */
|
||||
.d2c_team_wrapper {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.d2c_team_wrapper h2 {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
.d2c_team_wrapper .d2c_title::after {
|
||||
top: 50px;
|
||||
left: 50%;
|
||||
transform: translateX(-75px);
|
||||
}
|
||||
.d2c_team_wrapper .d2c_sub_title::after {
|
||||
left: 50%;
|
||||
transform: translateX(-62px);
|
||||
}
|
||||
.d2c_team_card .d2c_img_wrapper {
|
||||
width: 390px;
|
||||
height: 390px;
|
||||
z-index: 1;
|
||||
}
|
||||
.d2c_team_card .d2c_img_wrapper::before {
|
||||
content: '';
|
||||
width: 390px;
|
||||
height: 390px;
|
||||
border: 1px solid rgba(255, 109, 186, 0.30);
|
||||
border-radius: 8px;
|
||||
position: absolute;
|
||||
top: 27px;
|
||||
left: -27px;
|
||||
z-index: -1;
|
||||
transition: 0.4s all;
|
||||
}
|
||||
.d2c_team_card .d2c_card_body {
|
||||
padding: 50px 0px 20px;
|
||||
}
|
||||
.d2c_team_wrapper .slick-slide {
|
||||
margin: 0px 37px;
|
||||
}
|
||||
.slick-dots li button:before {
|
||||
font-size: 10px;
|
||||
color: var(--primary_color);
|
||||
transition: 0.4s all;
|
||||
}
|
||||
.slick-dots li.slick-active button:before {
|
||||
color: var(--primary_color);
|
||||
transition: 0.4s all;
|
||||
}
|
||||
/* team section end */
|
||||
|
||||
/* portfolio section start */
|
||||
.d2c_portfolio_wrapper {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.d2c_portfolio_wrapper .d2c_sub_title::after {
|
||||
left: 203px;
|
||||
}
|
||||
.d2c_portfolio_wrapper h2 {
|
||||
margin-bottom: 150px;
|
||||
}
|
||||
.d2c_portfolio_wrapper .d2c_title::after {
|
||||
left: 50%;
|
||||
transform: translateX(-15%);
|
||||
}
|
||||
.d2c_grid {
|
||||
column-count: 3;
|
||||
column-gap: 0px;
|
||||
row-gap: 0px;
|
||||
}
|
||||
.d2c_grid_item {
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
transform: scale(1.0);
|
||||
filter: grayscale(100%);
|
||||
transition: 0.4s all;
|
||||
}
|
||||
.d2c_grid_item:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.23);
|
||||
filter: grayscale(0%);
|
||||
transition: 0.4s all;
|
||||
z-index: 999;
|
||||
}
|
||||
.d2c_grid_item.is-visible {
|
||||
animation: Items .6s ease-in forwards;
|
||||
}
|
||||
.fancybox {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
transition: 0.4s all;
|
||||
height: 460px;
|
||||
}
|
||||
.d2c_grid_item:nth-child(1) .fancybox {
|
||||
background-image: url(../images/portfolio_one.jpg);
|
||||
}
|
||||
.d2c_grid_item:nth-child(2) .fancybox {
|
||||
background-image: url(../images/portfolio_two.jpg);
|
||||
}
|
||||
.d2c_grid_item:nth-child(3) .fancybox {
|
||||
background-image: url(../images/portfolio_three.jpg);
|
||||
}
|
||||
.d2c_grid_item:nth-child(4) .fancybox {
|
||||
background-image: url(../images/portfolio_four.jpg);
|
||||
}
|
||||
.d2c_grid_item:nth-child(5) .fancybox {
|
||||
background-image: url(../images/portfolio_five.jpg);
|
||||
}
|
||||
.d2c_grid_item:nth-child(6) .fancybox {
|
||||
background-image: url(../images/portfolio_six.jpg);
|
||||
}
|
||||
/* Portfolio Section End */
|
||||
|
||||
.d2c_blog_bg_wrapper {
|
||||
background: rgba(255, 109, 186, 0.04);
|
||||
}
|
||||
|
||||
/* blog section start */
|
||||
.d2c_blog_wrapper {
|
||||
padding: 100px 0px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.d2c_blog_wrapper h3 {
|
||||
color: var(--secondary_color);
|
||||
}
|
||||
.d2c_blog_wrapper .d2c_sub_title::after {
|
||||
left: 50%;
|
||||
transform: translateX(-56px);
|
||||
}
|
||||
.d2c_blog_wrapper .d2c_title::after {
|
||||
top: 40px;
|
||||
left: 50%;
|
||||
transform: translateX(-72px);
|
||||
}
|
||||
.d2c_blog_wrapper h2 {
|
||||
color: var(--secondary_color);
|
||||
}
|
||||
.d2c_blog_wrapper p {
|
||||
color: var(--secondary_text_color);
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
.d2c_blog_wrapper .d2c_card_body {
|
||||
background: var(--secondary_color);
|
||||
box-shadow: 0px 0px 45px 0px rgba(0, 0, 0, 0.20);
|
||||
border-radius: 5px;
|
||||
margin: 0px 30px;
|
||||
padding: 30px;
|
||||
position: relative;
|
||||
margin-top: -50px;
|
||||
|
||||
}
|
||||
.d2c_blog_wrapper .d2c_card_body p {
|
||||
color: var(--secondary_text_shade);
|
||||
}
|
||||
.d2c_blog_wrapper .d2c_card_body a {
|
||||
color: var(--primary_text_color);
|
||||
transition: 0.4s all;
|
||||
}
|
||||
.d2c_blog_wrapper .d2c_card_body a:hover {
|
||||
color: var(--primary_color);
|
||||
transition: 0.4s all;
|
||||
}
|
||||
.d2c_blog_wrapper .d2c_card_body a i {
|
||||
padding-left: 20px;
|
||||
transition: 0.4s all;
|
||||
}
|
||||
.d2c_blog_wrapper .d2c_card_body a:hover i {
|
||||
padding-left: 5px;
|
||||
transition: 0.4s all;
|
||||
}
|
||||
.d2c_date {
|
||||
color: var(--primary_text_color);
|
||||
font-family: var(--secondary_font);
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.d2c_date a {
|
||||
color: var(--primary_text_color) !important;
|
||||
float: right;
|
||||
font-size: 16px;
|
||||
transition: 0.4s all;
|
||||
}
|
||||
.d2c_date a:hover {
|
||||
color: var(--primary_color) !important;
|
||||
transition: 0.4s all;
|
||||
}
|
||||
/* blog section end */
|
||||
|
||||
/* testimonial section start */
|
||||
.d2c_testimonial_wrapper {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.d2c_testimonial_wrapper h2 {
|
||||
color: var(--secondary_color);
|
||||
}
|
||||
.d2c_testimonial_wrapper h3 {
|
||||
color: var(--secondary_color);
|
||||
}
|
||||
.d2c_testimonial_wrapper .d2c_sub_title::after {
|
||||
left: 50%;
|
||||
transform: translateX(-92px);
|
||||
}
|
||||
.d2c_testimonial_wrapper .d2c_title::after {
|
||||
top: 40px;
|
||||
left: 50%;
|
||||
transform: translateX(-72px);
|
||||
}
|
||||
.d2c_testimonial_wrapper .d2c_card_wrapper h5 {
|
||||
color: var(--secondary_color);
|
||||
font-family: var(--primary_font);
|
||||
font-size: 38px;
|
||||
font-weight: 600;
|
||||
text-transform: capitalize;
|
||||
margin-bottom: 90px;
|
||||
position: relative;
|
||||
padding: 0px 120px;
|
||||
}
|
||||
.d2c_testimonial_wrapper .d2c_card_wrapper h5::before {
|
||||
content: url(../images/quotation_left.png);
|
||||
position: absolute;
|
||||
top: -60px;
|
||||
left: 0;
|
||||
}
|
||||
.d2c_testimonial_wrapper .d2c_card_wrapper h5::after {
|
||||
content: url(../images/quotation_right.png);
|
||||
position: absolute;
|
||||
bottom: -80px;
|
||||
right: 0;
|
||||
}
|
||||
.d2c_testimonial_wrapper .d2c_card_wrapper img {
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
border-radius: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.d2c_testimonial_wrapper .d2c_card_wrapper p {
|
||||
color: var(--secondary_color);
|
||||
}
|
||||
.d2c_testimonial_wrapper .slick-slide {
|
||||
padding-top: 70px;
|
||||
}
|
||||
/* testimonial section end */
|
||||
|
||||
/* newsletter section start */
|
||||
.d2c_newsletter_wrapper .d2c_sub_title::after {
|
||||
left: 223px;
|
||||
}
|
||||
.d2c_newsletter_wrapper {
|
||||
background: linear-gradient(0deg, rgba(18, 24, 32, 0.90) 0%, rgba(18, 24, 32, 0.90) 100%), url(../images/newsletter_bg.png);
|
||||
}
|
||||
.d2c_newsletter_wrapper .d2c_card_wrapper {
|
||||
padding: 100px 0px;
|
||||
background: var(--secondary_color);
|
||||
}
|
||||
.d2c_newsletter_wrapper h2 {
|
||||
color: var(--primary_text_color);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
/* newsletter section end */
|
||||
|
||||
/* contact section start */
|
||||
.d2c_contact_wrapper {
|
||||
background: var(--secondary_color);
|
||||
}
|
||||
.form-label {
|
||||
color: var(--primary_text_color);
|
||||
font-family: var(--primary_font);
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.form-label span {
|
||||
color: var(--primary_color);
|
||||
}
|
||||
.form-control {
|
||||
background: rgba(255, 109, 186, 0.02);
|
||||
color: var(--primary_text_color) !important;
|
||||
font-family: var(--secondary_font);
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(255, 109, 186, 0.40);
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.form-control:focus {
|
||||
background: rgba(255, 109, 186, 0.02);
|
||||
box-shadow: none;
|
||||
border: 1px solid rgba(255, 109, 186, 0.40);
|
||||
color: var(--primary_text_color);
|
||||
}
|
||||
textarea {
|
||||
margin-bottom: 25px !important;
|
||||
}
|
||||
/* contact section end */
|
||||
|
||||
/* footer section start */
|
||||
.d2c_footer_wrapper {
|
||||
padding: 100px 0px 30px;
|
||||
background: linear-gradient(0deg, rgba(18, 24, 32, 0.80) 0%, rgba(18, 24, 32, 0.80) 100%), url(../images/footer_bg.png);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.d2c_footer_logo {
|
||||
max-width: 300px;
|
||||
}
|
||||
.d2c_footer_wrapper p {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.d2c_footer_wrapper ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
.d2c_footer_wrapper ul li {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.d2c_footer_wrapper .d2c_social_link li a {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
font-size: 16px;
|
||||
border-radius: 4px;
|
||||
color: rgba(255, 109, 186, 0.40);
|
||||
border: 1px solid rgba(255, 109, 186, 0.40);
|
||||
background: rgba(255, 109, 186, 0.02);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.d2c_footer_wrapper .d2c_social_link li a:hover {
|
||||
color: var(--primary_color);
|
||||
border: 1px solid var(--primary_color);
|
||||
transition: 0.4s all;
|
||||
}
|
||||
.d2c_footer_wrapper li a {
|
||||
color: var(--primary_text_color);
|
||||
font-family: var(--secondary_color);
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
transition: 0.4s all;
|
||||
}
|
||||
.d2c_footer_wrapper li a:hover {
|
||||
color: var(--primary_color);
|
||||
transition: 0.4s all;
|
||||
}
|
||||
.d2c_company_info a i {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 4px;
|
||||
color: rgba(255, 109, 186, 0.40);
|
||||
border: 1px solid rgba(255, 109, 186, 0.40);
|
||||
background: rgba(255, 109, 186, 0.02);
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
transition: 0.4s all;
|
||||
}
|
||||
.d2c_company_info li a:hover i {
|
||||
color: var(--primary_color);
|
||||
border: 1px solid var(--primary_color);
|
||||
transition: 0.4s all;
|
||||
}
|
||||
.d2c_footer_wrapper h3 {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
/* copy */
|
||||
.d2c_copy_wrapper {
|
||||
padding: 60px 0px 0px;
|
||||
position: relative;
|
||||
}
|
||||
.d2c_copy_wrapper h4 {
|
||||
color: var(--primary_text_color);
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.d2c_copy_wrapper h4 a {
|
||||
font-weight: 700;
|
||||
color: var(--primary_text_color);
|
||||
transition: 0.4s all;
|
||||
}
|
||||
.d2c_copy_wrapper h4 a:hover {
|
||||
color: var(--primary_color);
|
||||
transition: 0.4s all;
|
||||
}
|
||||
.d2c_copy_wrapper::before {
|
||||
content: '';
|
||||
width: 100%;
|
||||
border-top: 1px solid rgba(240, 240, 240, 0.10);
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 0;
|
||||
}
|
||||
/* footer section end */
|
||||
|
||||
/* Scroll Button Start */
|
||||
#scrollBtn {
|
||||
display: none;
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
z-index: 9999;
|
||||
}
|
||||
#scrollBtn.show {
|
||||
display: block;
|
||||
}
|
||||
#scrollBtn a i {
|
||||
background: var(--primary_color);
|
||||
font-size: 20px;
|
||||
color: var(--secondary_color);
|
||||
border-radius: 4px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
bottom: 3%;
|
||||
right: 5%;
|
||||
transition: all ease 0.4s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2px solid var(--primary_color);
|
||||
}
|
||||
#scrollBtn a i:hover {
|
||||
color: var(--primary_color);
|
||||
background: var(--secondary_color);
|
||||
border: 2px solid var(--primary_color);
|
||||
transition: all ease 0.4s;
|
||||
}
|
||||
/* Scroll Button End */
|
||||
|
||||
|
||||
/*
|
||||
Template Name: {{Tech Start Pro}}
|
||||
Template URL: {{https://www.designtocodes.com/product/techstart-pro-responsive-bootstrap-landing-page/}}
|
||||
Description: {{TechStart Pro landing page is the definitive solution for businesses and individuals seeking a top-tier online presence. This responsive Bootstrap landing page is not just good-looking, it's also simple.}}
|
||||
Author: DesignToCodes
|
||||
Author URL: https://www.designtocodes.com
|
||||
Text Domain: {{ Tech Start Pro }}
|
||||
*/
|
||||
BIN
assets/images/about_line.png
Executable file
BIN
assets/images/about_line.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
assets/images/about_one.jpg
Executable file
BIN
assets/images/about_one.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 193 KiB |
BIN
assets/images/about_shade.png
Executable file
BIN
assets/images/about_shade.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
assets/images/about_two.jpg
Executable file
BIN
assets/images/about_two.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 169 KiB |
BIN
assets/images/blog_one.jpg
Executable file
BIN
assets/images/blog_one.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
BIN
assets/images/blog_two.jpg
Executable file
BIN
assets/images/blog_two.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 129 KiB |
BIN
assets/images/favicon.png
Executable file
BIN
assets/images/favicon.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
assets/images/feature_bg_img.png
Executable file
BIN
assets/images/feature_bg_img.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
assets/images/feature_down_img.jpg
Executable file
BIN
assets/images/feature_down_img.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
BIN
assets/images/feature_uppper_img.jpg
Executable file
BIN
assets/images/feature_uppper_img.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
BIN
assets/images/footer_bg.png
Executable file
BIN
assets/images/footer_bg.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 734 KiB |
BIN
assets/images/footer_logo.png
Executable file
BIN
assets/images/footer_logo.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
assets/images/hero_bg.png
Executable file
BIN
assets/images/hero_bg.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
BIN
assets/images/hero_vector_bg.png
Executable file
BIN
assets/images/hero_vector_bg.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
BIN
assets/images/hero_vector_bg_shade.png
Executable file
BIN
assets/images/hero_vector_bg_shade.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
BIN
assets/images/hero_vector_img.png
Executable file
BIN
assets/images/hero_vector_img.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 139 KiB |
BIN
assets/images/logo.png
Executable file
BIN
assets/images/logo.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
assets/images/newsletter_bg.png
Executable file
BIN
assets/images/newsletter_bg.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
BIN
assets/images/partner_five.png
Executable file
BIN
assets/images/partner_five.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
assets/images/partner_four.png
Executable file
BIN
assets/images/partner_four.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
assets/images/partner_one.png
Executable file
BIN
assets/images/partner_one.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
assets/images/partner_six.png
Executable file
BIN
assets/images/partner_six.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
assets/images/partner_three.png
Executable file
BIN
assets/images/partner_three.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
assets/images/partner_two.png
Executable file
BIN
assets/images/partner_two.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
assets/images/portfolio_five.jpg
Executable file
BIN
assets/images/portfolio_five.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 193 KiB |
BIN
assets/images/portfolio_four.jpg
Executable file
BIN
assets/images/portfolio_four.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 195 KiB |
BIN
assets/images/portfolio_one.jpg
Executable file
BIN
assets/images/portfolio_one.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
BIN
assets/images/portfolio_six.jpg
Executable file
BIN
assets/images/portfolio_six.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
BIN
assets/images/portfolio_three.jpg
Executable file
BIN
assets/images/portfolio_three.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 242 KiB |
BIN
assets/images/portfolio_two.jpg
Executable file
BIN
assets/images/portfolio_two.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 185 KiB |
BIN
assets/images/quotation_left.png
Executable file
BIN
assets/images/quotation_left.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
assets/images/quotation_right.png
Executable file
BIN
assets/images/quotation_right.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
assets/images/service_circle.jpg
Executable file
BIN
assets/images/service_circle.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
assets/images/shade_bg.png
Executable file
BIN
assets/images/shade_bg.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 375 KiB |
BIN
assets/images/team_bg.png
Executable file
BIN
assets/images/team_bg.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
assets/images/team_one.jpg
Executable file
BIN
assets/images/team_one.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
BIN
assets/images/team_three.jpg
Executable file
BIN
assets/images/team_three.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
BIN
assets/images/team_two.jpg
Executable file
BIN
assets/images/team_two.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
BIN
assets/images/testimonial_one.jpg
Executable file
BIN
assets/images/testimonial_one.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
214
assets/js/main.js
Executable file
214
assets/js/main.js
Executable file
@@ -0,0 +1,214 @@
|
||||
|
||||
//navbar toggle icon
|
||||
function navbar_toggler() {
|
||||
$('.navbar-toggler[data-toggle=collapse]').click(function () {
|
||||
if ($(".navbar-toggler[data-bs-toggle=collapse] i").hasClass('fa-bars')) {
|
||||
} else {
|
||||
$(".navbar-toggler[data-bs-toggle=collapse] i").removeClass("fa-times");
|
||||
}
|
||||
});
|
||||
}
|
||||
navbar_toggler();
|
||||
|
||||
// navbar clone in mobile device
|
||||
function navClone() {
|
||||
$('.js-clone-nav').each(function () {
|
||||
var $this = $(this);
|
||||
$this.clone().attr('class', 'navbar-nav ml-auto').appendTo('.d2c_mobile_view_body');
|
||||
});
|
||||
|
||||
$('.d2c_mobile_view .nav-link').click(function () {
|
||||
$(".nav-link").removeClass("active");
|
||||
$('.d2c_mobile_view').removeClass('show');
|
||||
$(this).toggleClass('active');
|
||||
});
|
||||
}
|
||||
navClone();
|
||||
|
||||
// partner silder js
|
||||
$('.d2c_partner_slider').slick({
|
||||
dots: false,
|
||||
arrows: false,
|
||||
infinite: true,
|
||||
autoplay:true,
|
||||
speed: 2000,
|
||||
slidesToShow: 6,
|
||||
slidesToScroll: 1,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1400,
|
||||
settings: {
|
||||
slidesToShow: 4,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1200,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 992,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 480,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// team silder js
|
||||
$('.d2c_team_slider').slick({
|
||||
centerMode: true,
|
||||
centerPadding: '0px',
|
||||
dots: true,
|
||||
arrows: false,
|
||||
infinite: true,
|
||||
autoplay:true,
|
||||
speed: 2000,
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 1,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1400,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
centerPadding: '24px',
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1200,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 992,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 667,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 480,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
centerPadding: '0px',
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// js for fancybox slide & button
|
||||
|
||||
function fancybox() {
|
||||
$('[data-fancybox]').fancybox({
|
||||
protect: true,
|
||||
buttons: [
|
||||
"fullScreen",
|
||||
"thumbs",
|
||||
"share",
|
||||
"slideShow",
|
||||
"close"
|
||||
],
|
||||
image: {
|
||||
preload: false
|
||||
},
|
||||
});
|
||||
}
|
||||
fancybox();
|
||||
|
||||
// form validation js
|
||||
(function () {
|
||||
'use strict'
|
||||
|
||||
var forms = document.querySelectorAll('.needs-validation')
|
||||
|
||||
Array.prototype.slice.call(forms)
|
||||
.forEach(function (form) {
|
||||
form.addEventListener('submit', function (event) {
|
||||
if (!form.checkValidity()) {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
}
|
||||
|
||||
form.classList.add('was-validated')
|
||||
}, false)
|
||||
})
|
||||
})();
|
||||
|
||||
// testimonial silder js
|
||||
$('.testimonial_slider').slick({
|
||||
centerMode: true,
|
||||
centerPadding: '0px',
|
||||
dots: true,
|
||||
arrows: false,
|
||||
infinite: true,
|
||||
autoplay:true,
|
||||
speed: 2000,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1400,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1200,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 992,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 480,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// Preloader JS
|
||||
window.addEventListener('load', function() {
|
||||
var preloader = document.querySelector('.preloader');
|
||||
preloader.classList.add('hide');
|
||||
});
|
||||
|
||||
// ScrollBtn JS
|
||||
window.onscroll = function() { scrollFunction() };
|
||||
|
||||
function scrollFunction() {
|
||||
var scrollBtn = document.getElementById("scrollBtn");
|
||||
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
|
||||
scrollBtn.classList.add("show");
|
||||
} else {
|
||||
scrollBtn.classList.remove("show");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Template Name: {{Tech Start Pro}}
|
||||
// Template URL: {{https://www.designtocodes.com/product/techstart-pro-responsive-bootstrap-landing-page/}}
|
||||
// Description: {{TechStart Pro landing page is the definitive solution for businesses and individuals seeking a top-tier online presence. This responsive Bootstrap landing page is not just good-looking, it's also simple.}}
|
||||
// Author: DesignToCodes
|
||||
// Author URL: https://www.designtocodes.com
|
||||
// Text Domain: {{ Tech Start Pro }}
|
||||
646
index copy.html
Executable file
646
index copy.html
Executable file
@@ -0,0 +1,646 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- default meta title -->
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- OG Meta Tag -->
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
<meta property="og:title" content="TechStart Pro - Responsive Bootstrap Landing Page">
|
||||
<meta property="og:description " content="TechStart Pro landing page is the definitive solution for businesses and individuals seeking a top-tier online presence. This responsive Bootstrap landing page is not just good-looking, it's also simple.">
|
||||
<meta property="og:image" content="https://www.designtocodes.com/wp-content/uploads/2023/08/TechStart-Pro-Responsive-Bootstrap-Landing-Page.jpg/">
|
||||
<!-- title -->
|
||||
<title>Tech Start Pro</title>
|
||||
<!-- favicon -->
|
||||
<link rel="icon" id="favicon" href="./assets/images/favicon.png" type="image/gif" sizes="16x16">
|
||||
<!-- font -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Syne:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<!-- font awesome 5 cdn/ icon link -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
|
||||
<!-- Slider CSS Link -->
|
||||
<link rel="stylesheet" href="./lib/slick-1.8.1/slick/slick.css">
|
||||
<link rel="stylesheet" href="./lib/slick-1.8.1/slick/slick-theme.css">
|
||||
<!-- fancybox image gallery -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
|
||||
<!-- bootstrap css -->
|
||||
<link rel="stylesheet" href="./lib/bootstrap-5/css/bootstrap.min.css">
|
||||
<!-- main css -->
|
||||
<link rel="stylesheet" href="./assets/css/style.css">
|
||||
<!-- responsive css -->
|
||||
<link rel="stylesheet" href="./assets/css/responsive.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- preloader start -->
|
||||
<div class="preloader">
|
||||
<img src="./assets/images/logo.png" alt="Preloader Logo">
|
||||
</div>
|
||||
<!-- preloader end -->
|
||||
|
||||
<!-- header start -->
|
||||
<header class="d2c_navbar sticky-top">
|
||||
<div class="container">
|
||||
<!-- navbar -->
|
||||
<nav class="navbar navbar-expand-lg px-0 py-0" id="d2c_main_nav">
|
||||
<!-- logo -->
|
||||
<a class="navbar-brand" href="./index.html"><img src="./assets/images/logo.png" class="w-100" alt="Logo"></a>
|
||||
<!-- logo -->
|
||||
<!-- hamburger -->
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span><i class="fas fa-bars"></i></span>
|
||||
</button>
|
||||
<!-- hamburger -->
|
||||
<!-- nav item -->
|
||||
<div class="collapse navbar-collapse js-clone-nav justify-content-end">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#home">home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#about">about</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#service">service</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#team">team</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#portfolio">portfolio</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#blog">blog</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#testimonial">testimonial</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#contact" class="btn d-block d-lg-none">Get In touch</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- <a href="#contact" class="btn d-none d-lg-block">Get In touch</a> -->
|
||||
<a href="#contact" class="btn d-none d-lg-block">Get In touch</a>
|
||||
<!-- nav item -->
|
||||
</nav>
|
||||
<!-- navbar -->
|
||||
<!-- tab and mobile view -->
|
||||
<div class="collapse navbar-collapse d2c_mobile_view" id="navbarSupportedContent">
|
||||
<div class="show_width container">
|
||||
<div class="text-right">
|
||||
<button class="navbar-toggler d2c_cross_btn p-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span><i class="fa fa-times"></i></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="navbar px-0 d2c_mobile_view_body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- tab and mobile view -->
|
||||
</div>
|
||||
</header>
|
||||
<!-- header end -->
|
||||
|
||||
<main data-bs-spy="scroll" data-bs-target="#d2c_main_nav" class="position-relative">
|
||||
<div class="d2c_hero_bg">
|
||||
|
||||
<!-- hero start -->
|
||||
<section class="d2c_hero_wrapper" id="home">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6 pe-5 order-last order-lg-first">
|
||||
<h1>Embark on a Tech Odyssey with <span>TechStart Pro</span></h1>
|
||||
<p>Explore the latest advancements in technology with TechStart Pro. Our responsive Bootstrap landing page is designed to keep you updated.</p>
|
||||
<a href="#about" class="btn">Get Started</a>
|
||||
</div>
|
||||
<div class="col-lg-6 order-first order-lg-first mb-4 mb-lg-0">
|
||||
<div class="d2c_vector_img_wrapper">
|
||||
<div class="d2c_shade_bg">
|
||||
<img src="./assets/images/hero_vector_img.png" class="img-fluid" alt="Hero Image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- hero end -->
|
||||
</div>
|
||||
|
||||
<!-- about section start -->
|
||||
<section class="d2c_about_wrapper" id="about">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6 mb-4 mb-lg-0">
|
||||
<div class="d2c_img_container position-relative me-0 me-lg-5">
|
||||
<div class="d2c_img_wrapper">
|
||||
<img src="./assets/images/about_one.jpg" class="img-fluid w-100 rounded-3" alt="About Upper Image">
|
||||
</div>
|
||||
<div class="d2c_img_wrapper">
|
||||
<img src="./assets/images/about_two.jpg" class="img-fluid w-100 rounded-3" alt="About Down Image">
|
||||
</div>
|
||||
<img src="./assets/images/about_shade.png" alt="About Background Image">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<h3 class="d2c_sub_title position-relative">About <span>TechStart Pro</span></h3>
|
||||
<h2 class="d2c_title position-relative">Empowering YourTech <span>Exploration</span></h2>
|
||||
<p class="mb-3">At TechStart Pro, we're passionate about all things tech. Our platform is designed to provide you with insightful articles, expert opinions, and resources to fuel your curiosity and drive your tech ambitions forward. Explore the latest advancements in technology with TechStart Pro. Our responsive Bootstrap landing page is designed to keep you updated on cutting-edge trends and solutions that empower your tech journey from the TechStart Pro.</p>
|
||||
<p class="d2c_last_paragraph">Learn more about TechStart Pro and our mission. Get to know our passionate team of tech enthusiasts and innovators who are dedicated to bringing you the best insights and information from the tech industry.</p>
|
||||
<a href="#contact" class="btn">Stay Connect</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- about section end -->
|
||||
|
||||
<!-- partner section start -->
|
||||
<div class="d2c_partner_wrapper">
|
||||
<div class="container">
|
||||
<div class="row d2c_partner_slider">
|
||||
<div class="col">
|
||||
<div class="d2c_img_wrapper">
|
||||
<img src="./assets/images/partner_one.png" alt="Partner Image One">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="d2c_img_wrapper">
|
||||
<img src="./assets/images/partner_two.png" alt="Partner Image Two">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="d2c_img_wrapper">
|
||||
<img src="./assets/images/partner_three.png" alt="Partner Image Three">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="d2c_img_wrapper">
|
||||
<img src="./assets/images/partner_four.png" alt="Partner Image Four">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="d2c_img_wrapper">
|
||||
<img src="./assets/images/partner_five.png" alt="Partner Image Five">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="d2c_img_wrapper">
|
||||
<img src="./assets/images/partner_six.png" alt="Partner Image Six">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="d2c_img_wrapper">
|
||||
<img src="./assets/images/partner_three.png" alt="Partner Image Seven">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- partner section end -->
|
||||
|
||||
<div class="d2c_shade_bg_wrapper">
|
||||
<!-- service section start -->
|
||||
<section class="d2c_service_wrapper" id="service">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-xl-6 mb-4 mb-xl-0">
|
||||
<h3 class="d2c_sub_title position-relative">Our <span>Services</span></h3>
|
||||
<h2 class="d2c_title position-relative">We have <span>Everything</span> What you Need...</h2>
|
||||
<p>Discover the range of services we offer at TechStart Pro. From tech consulting to software development, we're here to provide you with expert solutions that cater to your tech-related needs.</p>
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<ul>
|
||||
<li>Tech Consulting</li>
|
||||
<li>Product Reviews</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-7">
|
||||
<ul>
|
||||
<li>Tech Trend</li>
|
||||
<li>Coding Workshops</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#contact" class="btn">get in touch</a>
|
||||
</div>
|
||||
<div class="col-xl-6">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="d2c_card_wrapper">
|
||||
<div class="d2c_icon_wrapper">
|
||||
<i class="fas fa-object-ungroup"></i>
|
||||
</div>
|
||||
<h3>Web Design</h3>
|
||||
<p>I can create minimal & modern web design with lasted web technologies. I can covert any UI.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mt-xl-4 mb-4 mb-lg-0">
|
||||
<div class="d2c_card_wrapper">
|
||||
<div class="d2c_icon_wrapper">
|
||||
<i class="fas fa-laptop-code"></i>
|
||||
</div>
|
||||
<h3>Web Development</h3>
|
||||
<p>I worked with React, Node.js AngularJS, and to create as dynamic & interactive web an applications.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-4 mb-md-0">
|
||||
<div class="d2c_card_wrapper d2c_service_card position-relative">
|
||||
<div class="d2c_icon_wrapper">
|
||||
<i class="fas fa-chart-bar"></i>
|
||||
</div>
|
||||
<h3>SEO specialist </h3>
|
||||
<p>I can research key-word on your website that can create healthy traffic to your website.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mt-xl-4">
|
||||
<div class="d2c_card_wrapper">
|
||||
<div class="d2c_icon_wrapper">
|
||||
<i class="fas fa-calendar-check"></i>
|
||||
</div>
|
||||
<h3>Security Expert</h3>
|
||||
<p>Monitor your website, prevent any unusual activities happing on website & create a system your website.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- service section end -->
|
||||
|
||||
<!-- features section start -->
|
||||
<section class="d2c_feature_wrapper">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 mb-4 mb-lg-0">
|
||||
<div class="d2c_img_container position-relative me-0 me-lg-5">
|
||||
<div class="d2c_img_wrapper">
|
||||
<img src="./assets/images/feature_uppper_img.jpg" class="img-fluid w-100 rounded-3" alt="Features Upper Image">
|
||||
</div>
|
||||
<div class="d2c_img_wrapper">
|
||||
<img src="./assets/images/feature_down_img.jpg" class="img-fluid w-100 rounded-3" alt="Features Down Image">
|
||||
</div>
|
||||
<img src="./assets/images/feature_bg_img.png" alt="Features Background Image">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<h3 class="d2c_sub_title position-relative">Our <span>Features</span></h3>
|
||||
<h2 class="d2c_title position-relative">Check More About Our <span>Service & Progress</span></h2>
|
||||
<p class="mb-3">Actual teachings of the great explorer of the truth because it is pleasure, but because those who do not know how to you pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain.</p>
|
||||
<p>Bring your ideas to life and share your vision with concrete elements. will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth because it is pleasure, but because those who do not know how to you pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- features section end -->
|
||||
</div>
|
||||
|
||||
<div class="d2c_team_bg_wrapper">
|
||||
<!-- team section start -->
|
||||
<section class="d2c_team_wrapper" id="team">
|
||||
<div class="container">
|
||||
<h3 class="d2c_sub_title text-start text-md-center position-relative">our <span>Team</span></h3>
|
||||
<h2 class="d2c_title text-start text-md-center position-relative">Meet Our <span>Experts</span></h2>
|
||||
<div class="row d2c_team_slider">
|
||||
<div class="col">
|
||||
<div class="d2c_team_card">
|
||||
<div class="d2c_img_wrapper position-relative">
|
||||
<img src="./assets/images/team_one.jpg" class="rounded-3 w-100 h-100" alt="Team Image One">
|
||||
</div>
|
||||
<div class="d2c_card_body text-center">
|
||||
<h4>Petrick Suiman</h4>
|
||||
<p class="mb-0">IT Officer</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="d2c_team_card">
|
||||
<div class="d2c_img_wrapper position-relative">
|
||||
<img src="./assets/images/team_two.jpg" class="rounded-3 w-100 h-100" alt="Team Image One">
|
||||
</div>
|
||||
<div class="d2c_card_body text-center">
|
||||
<h4>William Stephen</h4>
|
||||
<p class="mb-0">Graphic Designer</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="d2c_team_card">
|
||||
<div class="d2c_img_wrapper position-relative">
|
||||
<img src="./assets/images/team_three.jpg" class="rounded-3 w-100 h-100" alt="Team Image One">
|
||||
</div>
|
||||
<div class="d2c_card_body text-center">
|
||||
<h4>Luisting Morgan</h4>
|
||||
<p class="mb-0">Web Developer</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="d2c_team_card">
|
||||
<div class="d2c_img_wrapper position-relative">
|
||||
<img src="./assets/images/team_two.jpg" class="rounded-3 w-100 h-100" alt="Team Image One">
|
||||
</div>
|
||||
<div class="d2c_card_body text-center">
|
||||
<h4>William Stephen</h4>
|
||||
<p class="mb-0">Graphic Designer</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- team section end -->
|
||||
|
||||
<!-- portfolio section start -->
|
||||
<section class="d2c_portfolio_wrapper" id="portfolio">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 offset-0 offset-lg-3 px-2 px-md-5">
|
||||
<h3 class="d2c_sub_title text-start text-md-center position-relative">Our <span>Portfolio</span></h3>
|
||||
<h2 class="d2c_title text-start text-md-center position-relative">Here is some of Our <span>Design</span> & <span>Project</span></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d2c_grid">
|
||||
<div class="d2c_grid_item" data-wow-duration="2s">
|
||||
<a data-fancybox="gallery" class="fancybox" href="./assets/images/portfolio_one.jpg"></a>
|
||||
</div>
|
||||
<div class="d2c_grid_item" data-wow-duration="2s">
|
||||
<a data-fancybox="gallery" class="fancybox" href="./assets/images/portfolio_two.jpg"></a>
|
||||
</div>
|
||||
<div class="d2c_grid_item" data-wow-duration="2s">
|
||||
<a data-fancybox="gallery" class="fancybox" href="./assets/images/portfolio_three.jpg"></a>
|
||||
</div>
|
||||
<div class="d2c_grid_item" data-wow-duration="2s">
|
||||
<a data-fancybox="gallery" class="fancybox" href="./assets/images/portfolio_four.jpg"></a>
|
||||
</div>
|
||||
<div class="d2c_grid_item" data-wow-duration="2s">
|
||||
<a data-fancybox="gallery" class="fancybox" href="./assets/images/portfolio_five.jpg"></a>
|
||||
</div>
|
||||
<div class="d2c_grid_item" data-wow-duration="2s">
|
||||
<a data-fancybox="gallery" class="fancybox" href="./assets/images/portfolio_six.jpg"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- portfolio section end -->
|
||||
</div>
|
||||
|
||||
<div class="d2c_blog_bg_wrapper">
|
||||
<!-- blog section start -->
|
||||
<section class="d2c_blog_wrapper" id="blog">
|
||||
<div class="container">
|
||||
<h3 class="d2c_sub_title text_start text-md-center position-relative">Our <span>Blog</span></h3>
|
||||
<h2 class="d2c_title text_start text-md-center position-relative">Latest news & <span>articles</span></h2>
|
||||
<p class="text_start text-md-center">Dive into our comprehensive tech blog, where we share in-depth articles, how-to guides, and analysis on the latest tech trends. Stay informed and broaden your tech knowledge with our insightful content.</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 mb-4 mb-lg-0">
|
||||
<div class="d2c_card_wrapper d2c_blog_card">
|
||||
<img src="./assets/images/blog_one.jpg" class="img-fluid w-100" alt="Blog Image One">
|
||||
<div class="d2c_card_body">
|
||||
<p class="mb-2">Design, Illustrations, UI/UX</p>
|
||||
<h4 class="mb-2"><a href="#">How to make a website look more attractive with an NFTs Pictures for the design.</a></h4>
|
||||
<p class="mb-1">Dive into our comprehensive tech blog, where we share in-depth articles, how-to guides, and analysis on the latest tech trends.</p>
|
||||
<div class="d2c_date">
|
||||
<span>2, Sept 2023</span>
|
||||
<a href="#"><i class="fas fa-share-alt"></i></a>
|
||||
</div>
|
||||
<a href="#">Learn More <i class="fas fa-arrow-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="d2c_card_wrapper">
|
||||
<img src="./assets/images/blog_two.jpg" class="img-fluid w-100" alt="Blog Image Two">
|
||||
<div class="d2c_card_body">
|
||||
<p class="mb-2">Design, Illustrations, UI/UX</p>
|
||||
<h4 class="mb-2"><a href="#">How to make a website secure more then another with advance security threat.</a></h4>
|
||||
<p class="mb-1">Explore a curated selection of cutting-edge tech products is one of handpicked by our experts. From gadgets to software.</p>
|
||||
<div class="d2c_date">
|
||||
<span>9, Aug 2023</span>
|
||||
<a href="#"><i class="fas fa-share-alt"></i></a>
|
||||
</div>
|
||||
<a href="#">Learn More <i class="fas fa-arrow-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- blog section end -->
|
||||
|
||||
<!-- testimonial section start -->
|
||||
<section class="d2c_testimonial_wrapper" id="testimonial">
|
||||
<div class="container">
|
||||
<h3 class="d2c_sub_title text_start text-md-center position-relative">Our <span>Testimonial</span></h3>
|
||||
<h2 class="d2c_title text_start text-md-center position-relative">here are some client feedback<span></span></h2>
|
||||
<div class="row testimonial_slider">
|
||||
<div class="col">
|
||||
<div class="d2c_card_wrapper text-center">
|
||||
<h5>Tanahair is the friendliest and most efficient service I have ever used. The whole thing takes time to introduce the product and, as a result, put forward only the best opportunities that really suit you.</h5>
|
||||
<img src="./assets/images/testimonial_one.jpg" class="img-fluid mb-2" alt="Testimonial One">
|
||||
<h3 class="mb-2"><span>Darren Dunlap</span></h3>
|
||||
<p class="mb-0">CEO & Founder at Flex.co</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="d2c_card_wrapper text-center">
|
||||
<h5>Tanahair is the friendliest and most efficient service I have ever used. The whole thing takes time to introduce the product and, as a result, put forward only the best opportunities that really suit you.</h5>
|
||||
<img src="./assets/images/testimonial_one.jpg" class="img-fluid mb-2" alt="Testimonial One">
|
||||
<h3 class="mb-2"><span>Darren Dunlap</span></h3>
|
||||
<p class="mb-0">CEO & Founder at Flex.co</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="d2c_card_wrapper text-center">
|
||||
<h5>Tanahair is the friendliest and most efficient service I have ever used. The whole thing takes time to introduce the product and, as a result, put forward only the best opportunities that really suit you.</h5>
|
||||
<img src="./assets/images/testimonial_one.jpg" class="img-fluid mb-2" alt="Testimonial One">
|
||||
<h3 class="mb-2"><span>Darren Dunlap</span></h3>
|
||||
<p class="mb-0">CEO & Founder at Flex.co</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- testimonial section end -->
|
||||
</div>
|
||||
|
||||
<!-- newsletter section start -->
|
||||
<section class="d2c_newsletter_wrapper">
|
||||
<div class="container">
|
||||
<div class="d2c_card_wrapper">
|
||||
<h2 class="d2c_sub_title text_start text-md-center position-relative">Be the first to know when <span>we launch</span></h2>
|
||||
<p class="text_start text-md-center">Stay in the loop with everything you need to know.</p>
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-8 col-xl-6 offset-0 offset-lg-2 offset-xl-3">
|
||||
<form class="row needs-validation" novalidate>
|
||||
<div class="col-md-8">
|
||||
<div class="input-group">
|
||||
<input type="email" class="form-control" placeholder="Enter your email address" aria-describedby="newsletter_btn" autocomplete="on" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<button class="btn" type="submit" id="newsletter_btn">get in touch</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- newsletter section end -->
|
||||
|
||||
<!-- contact section start -->
|
||||
<section class="d2c_contact_wrapper" id="contact">
|
||||
<div class="container">
|
||||
<h3 class="d2c_sub_title position-relative">Contact <span>us</span></h3>
|
||||
<h2>Have any <span>questions or inquiries?</span></h2>
|
||||
<form class="row needs-validation" novalidate>
|
||||
<div class="col-md-6">
|
||||
<label for="validationCustomFirstName" class="form-label">First <span>Name</span></label>
|
||||
<input type="text" class="form-control" id="validationCustomFirstName" autocomplete="off" required>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="validationCustomLastName" class="form-label">Last <span>Name</span></label>
|
||||
<input type="text" class="form-control" id="validationCustomLastName" autocomplete="off" required>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="validationCustomEmail" class="form-label">Email <span>Address</span></label>
|
||||
<div class="input-group has-validation">
|
||||
<input type="email" class="form-control" id="validationCustomEmail" autocomplete="on" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="validationCustomPhone" class="form-label">Phone <span>Number</span></label>
|
||||
<div class="input-group has-validation">
|
||||
<input type="tel" class="form-control" id="validationCustomPhone" autocomplete="off" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<label for="validationCustomMessage" class="form-label">Messages</label>
|
||||
<textarea class="form-control" rows="5" id="validationCustomMessage" required></textarea>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<button class="btn" type="submit">Send Message</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
<!-- contact section end -->
|
||||
|
||||
<!-- footer section start -->
|
||||
<footer class="d2c_footer_wrapper">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-lg-4 mb-5 mb-lg-0">
|
||||
<img src="./assets/images/footer_logo.png" class="d2c_footer_logo img-fluid w-100 mb-4" alt="Footer Logo">
|
||||
<p>Professionally scale cross functional human capital and extensive technology.</p>
|
||||
<ul class="d2c_social_link list-group list-group-horizontal">
|
||||
<li>
|
||||
<a href="https://www.facebook.com/Designtocodes" target="_blank"><i class="fab fa-facebook-f"></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.linkedin.com/company/designtocodes/" target="_blank"><i class="fab fa-linkedin-in"></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://twitter.com/DesignToCodes" target="_blank"><i class="fab fa-twitter"></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.instagram.com/designtocodes/" target="_blank"><i class="fab fa-instagram"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg mb-5 mb-lg-0">
|
||||
<h3><span>Quick Link</span></h3>
|
||||
<ul class="list-group">
|
||||
<li class="py-1 py-md-2">
|
||||
<a href="#service">Service</a>
|
||||
</li>
|
||||
<li class="py-1 py-md-2">
|
||||
<a href="#team">Team</a>
|
||||
</li>
|
||||
<li class="py-1 py-md-2">
|
||||
<a href="#portfolio">Portfolio</a>
|
||||
</li>
|
||||
<li class="py-1 py-md-2">
|
||||
<a href="#blog">Our Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg mb-5 mb-md-0">
|
||||
<h3><span>Company</span></h3>
|
||||
<ul class="list-group">
|
||||
<li class="py-1 py-md-2">
|
||||
<a href="#about">About us</a>
|
||||
</li>
|
||||
<li class="py-1 py-md-2">
|
||||
<a href="https://www.designtocodes.com/terms/" target="_blank">Terms</a>
|
||||
</li>
|
||||
<li class="py-1 py-md-2">
|
||||
<a href="https://www.designtocodes.com/terms/" target="_blank">Privacy Policy</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<h3><span>Company</span></h3>
|
||||
<ul class="d2c_company_info list-group">
|
||||
<li class="py-1 py-md-2">
|
||||
<a href="tel:+971 5546 963">
|
||||
<i class="fas fa-phone-alt"></i>
|
||||
971 5546 963
|
||||
</a>
|
||||
</li>
|
||||
<li class="py-1 py-md-2">
|
||||
<a href="mailto:example@gmail.com">
|
||||
<i class="fas fa-envelope"></i>
|
||||
example@gmail.com
|
||||
</a>
|
||||
</li>
|
||||
<li class="py-1 py-md-2">
|
||||
<a href="https://www.google.com/maps/@40.0677545,-76.0434136,8z?entry=ttu" target="_blank">
|
||||
<i class="fas fa-map-marker-alt"></i>
|
||||
Royal 2464 Mesa, New Jersey
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d2c_copy_wrapper">
|
||||
<h4 class="text-center">© 2023 <a href="https://www.designtocodes.com/" target="_blank">DesignToCodes</a>. All Right Reserved</h4>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- footer section end -->
|
||||
|
||||
<!-- Scroll Button Start -->
|
||||
<div id="scrollBtn">
|
||||
<a href="#">
|
||||
<i class="fas fa-chevron-up"></i>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Scroll Button End -->
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
<!-- js cdn -->
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<!-- bootstrap js -->
|
||||
<script src="./lib/bootstrap-5/js/bootstrap.bundle.min.js"></script>
|
||||
<!-- fancybox Image -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
|
||||
<!-- Slider JS Link -->
|
||||
<script src="./lib/slick-1.8.1/slick/slick.min.js"></script>
|
||||
<!-- main js -->
|
||||
<script src="./assets/js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
<!--
|
||||
Template Name: {{Tech Start Pro}}
|
||||
Template URL: {{https://www.designtocodes.com/product/techstart-pro-responsive-bootstrap-landing-page/}}
|
||||
Description: {{TechStart Pro landing page is the definitive solution for businesses and individuals seeking a top-tier online presence. This responsive Bootstrap landing page is not just good-looking, it's also simple.}}
|
||||
Author: DesignToCodes
|
||||
Author URL: https://www.designtocodes.com
|
||||
Text Domain: {{ Tech Start Pro }}
|
||||
-->
|
||||
635
index.html
Executable file
635
index.html
Executable file
@@ -0,0 +1,635 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- default meta title -->
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- OG Meta Tag -->
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
<meta property="og:title" content="Bisa Wofa - Landing Page">
|
||||
<meta property="og:description " content="Bisa Wofa landing page is the definitive solution for businesses and individuals seeking a top-tier online presence. This responsive Bootstrap landing page is not just good-looking, it's also simple.">
|
||||
<!-- title -->
|
||||
<title>Bisa Wofa</title>
|
||||
<!-- favicon -->
|
||||
<link rel="icon" id="favicon" href="./assets/images/favicon.png" type="image/gif" sizes="16x16">
|
||||
<!-- font -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Syne:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<!-- font awesome 5 cdn/ icon link -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
|
||||
<!-- Slider CSS Link -->
|
||||
<link rel="stylesheet" href="./lib/slick-1.8.1/slick/slick.css">
|
||||
<link rel="stylesheet" href="./lib/slick-1.8.1/slick/slick-theme.css">
|
||||
<!-- fancybox image gallery -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
|
||||
<!-- bootstrap css -->
|
||||
<link rel="stylesheet" href="./lib/bootstrap-5/css/bootstrap.min.css">
|
||||
<!-- main css -->
|
||||
<link rel="stylesheet" href="./assets/css/style.css">
|
||||
<!-- responsive css -->
|
||||
<link rel="stylesheet" href="./assets/css/responsive.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- preloader start -->
|
||||
<div class="preloader">
|
||||
<img src="./assets/images/logo.png" alt="Preloader Logo">
|
||||
</div>
|
||||
<!-- preloader end -->
|
||||
|
||||
<!-- header start -->
|
||||
<header class="d2c_navbar sticky-top">
|
||||
<div class="container">
|
||||
<!-- navbar -->
|
||||
<nav class="navbar navbar-expand-lg px-0 py-0" id="d2c_main_nav">
|
||||
<!-- logo -->
|
||||
<a class="navbar-brand" href="./index.html"><img src="./assets/images/logo.png" class="w-100" alt="Logo"></a>
|
||||
<!-- logo -->
|
||||
<!-- hamburger -->
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span><i class="fas fa-bars"></i></span>
|
||||
</button>
|
||||
<!-- hamburger -->
|
||||
<!-- nav item -->
|
||||
<div class="collapse navbar-collapse js-clone-nav justify-content-end">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#home">home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#about">about</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#service">service</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#team">team</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#portfolio">portfolio</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#blog">blog</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#testimonial">testimonial</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#contact" class="btn d-block d-lg-none">Get In touch</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- <a href="#contact" class="btn d-none d-lg-block">Get In touch</a> -->
|
||||
<a href="#contact" class="btn d-none d-lg-block">Get In touch</a>
|
||||
<!-- nav item -->
|
||||
</nav>
|
||||
<!-- navbar -->
|
||||
<!-- tab and mobile view -->
|
||||
<div class="collapse navbar-collapse d2c_mobile_view" id="navbarSupportedContent">
|
||||
<div class="show_width container">
|
||||
<div class="text-right">
|
||||
<button class="navbar-toggler d2c_cross_btn p-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span><i class="fa fa-times"></i></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="navbar px-0 d2c_mobile_view_body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- tab and mobile view -->
|
||||
</div>
|
||||
</header>
|
||||
<!-- header end -->
|
||||
|
||||
<main data-bs-spy="scroll" data-bs-target="#d2c_main_nav" class="position-relative">
|
||||
<div class="d2c_hero_bg">
|
||||
|
||||
<!-- hero start -->
|
||||
<section class="d2c_hero_wrapper" id="home">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6 pe-5 order-last order-lg-first">
|
||||
<h1>Embark on a Tech Odyssey with <span>Bisa Wofa</span></h1>
|
||||
<p>Explore the latest advancements in technology with Bisa Wofa.</p>
|
||||
<a href="#about" class="btn">Get Started</a>
|
||||
</div>
|
||||
<div class="col-lg-6 order-first order-lg-first mb-4 mb-lg-0">
|
||||
<div class="d2c_vector_img_wrapper">
|
||||
<div class="d2c_shade_bg">
|
||||
<img src="./assets/images/hero_vector_img.png" class="img-fluid" alt="Hero Image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- hero end -->
|
||||
</div>
|
||||
|
||||
<!-- about section start -->
|
||||
<section class="d2c_about_wrapper" id="about">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6 mb-4 mb-lg-0">
|
||||
<div class="d2c_img_container position-relative me-0 me-lg-5">
|
||||
<div class="d2c_img_wrapper">
|
||||
<img src="./assets/images/about_one.jpg" class="img-fluid w-100 rounded-3" alt="About Upper Image">
|
||||
</div>
|
||||
<div class="d2c_img_wrapper">
|
||||
<img src="./assets/images/about_two.jpg" class="img-fluid w-100 rounded-3" alt="About Down Image">
|
||||
</div>
|
||||
<img src="./assets/images/about_shade.png" alt="About Background Image">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<h3 class="d2c_sub_title position-relative">About <span>Bisa Wofa</span></h3>
|
||||
<h2 class="d2c_title position-relative">Empowering YourTech <span>Exploration</span></h2>
|
||||
<p class="mb-3">At Bisa Wofa, we're passionate about all things tech. Our platform is designed to provide you with insightful articles, expert opinions, and resources to fuel your curiosity and drive your tech ambitions forward. Explore the latest advancements in technology with TechStart Pro. Our responsive Bootstrap landing page is designed to keep you updated on cutting-edge trends and solutions that empower your tech journey from the TechStart Pro.</p>
|
||||
<p class="d2c_last_paragraph">Learn more about TechStart Pro and our mission. Get to know our passionate team of tech enthusiasts and innovators who are dedicated to bringing you the best insights and information from the tech industry.</p>
|
||||
<a href="#contact" class="btn">Stay Connect</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- about section end -->
|
||||
|
||||
<!-- partner section start -->
|
||||
<div class="d2c_partner_wrapper">
|
||||
<div class="container">
|
||||
<div class="row d2c_partner_slider">
|
||||
<div class="col">
|
||||
<div class="d2c_img_wrapper">
|
||||
<img src="./assets/images/partner_one.png" alt="Partner Image One">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="d2c_img_wrapper">
|
||||
<img src="./assets/images/partner_two.png" alt="Partner Image Two">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="d2c_img_wrapper">
|
||||
<img src="./assets/images/partner_three.png" alt="Partner Image Three">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="d2c_img_wrapper">
|
||||
<img src="./assets/images/partner_four.png" alt="Partner Image Four">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="d2c_img_wrapper">
|
||||
<img src="./assets/images/partner_five.png" alt="Partner Image Five">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="d2c_img_wrapper">
|
||||
<img src="./assets/images/partner_six.png" alt="Partner Image Six">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="d2c_img_wrapper">
|
||||
<img src="./assets/images/partner_three.png" alt="Partner Image Seven">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- partner section end -->
|
||||
|
||||
<div class="d2c_shade_bg_wrapper">
|
||||
<!-- service section start -->
|
||||
<section class="d2c_service_wrapper" id="service">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-xl-6 mb-4 mb-xl-0">
|
||||
<h3 class="d2c_sub_title position-relative">Our <span>Services</span></h3>
|
||||
<h2 class="d2c_title position-relative">We have <span>Everything</span> What you Need...</h2>
|
||||
<p>Discover the range of services we offer at TechStart Pro. From tech consulting to software development, we're here to provide you with expert solutions that cater to your tech-related needs.</p>
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<ul>
|
||||
<li>Tech Consulting</li>
|
||||
<li>Product Reviews</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-7">
|
||||
<ul>
|
||||
<li>Tech Trend</li>
|
||||
<li>Coding Workshops</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#contact" class="btn">get in touch</a>
|
||||
</div>
|
||||
<div class="col-xl-6">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="d2c_card_wrapper">
|
||||
<div class="d2c_icon_wrapper">
|
||||
<i class="fas fa-object-ungroup"></i>
|
||||
</div>
|
||||
<h3>Web Design</h3>
|
||||
<p>I can create minimal & modern web design with lasted web technologies. I can covert any UI.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mt-xl-4 mb-4 mb-lg-0">
|
||||
<div class="d2c_card_wrapper">
|
||||
<div class="d2c_icon_wrapper">
|
||||
<i class="fas fa-laptop-code"></i>
|
||||
</div>
|
||||
<h3>Web Development</h3>
|
||||
<p>I worked with React, Node.js AngularJS, and to create as dynamic & interactive web an applications.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-4 mb-md-0">
|
||||
<div class="d2c_card_wrapper d2c_service_card position-relative">
|
||||
<div class="d2c_icon_wrapper">
|
||||
<i class="fas fa-chart-bar"></i>
|
||||
</div>
|
||||
<h3>SEO specialist </h3>
|
||||
<p>I can research key-word on your website that can create healthy traffic to your website.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mt-xl-4">
|
||||
<div class="d2c_card_wrapper">
|
||||
<div class="d2c_icon_wrapper">
|
||||
<i class="fas fa-calendar-check"></i>
|
||||
</div>
|
||||
<h3>Security Expert</h3>
|
||||
<p>Monitor your website, prevent any unusual activities happing on website & create a system your website.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- service section end -->
|
||||
|
||||
<!-- features section start -->
|
||||
<section class="d2c_feature_wrapper">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 mb-4 mb-lg-0">
|
||||
<div class="d2c_img_container position-relative me-0 me-lg-5">
|
||||
<div class="d2c_img_wrapper">
|
||||
<img src="./assets/images/feature_uppper_img.jpg" class="img-fluid w-100 rounded-3" alt="Features Upper Image">
|
||||
</div>
|
||||
<div class="d2c_img_wrapper">
|
||||
<img src="./assets/images/feature_down_img.jpg" class="img-fluid w-100 rounded-3" alt="Features Down Image">
|
||||
</div>
|
||||
<img src="./assets/images/feature_bg_img.png" alt="Features Background Image">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<h3 class="d2c_sub_title position-relative">Our <span>Features</span></h3>
|
||||
<h2 class="d2c_title position-relative">Check More About Our <span>Service & Progress</span></h2>
|
||||
<p class="mb-3">Actual teachings of the great explorer of the truth because it is pleasure, but because those who do not know how to you pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain.</p>
|
||||
<p>Bring your ideas to life and share your vision with concrete elements. will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth because it is pleasure, but because those who do not know how to you pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- features section end -->
|
||||
</div>
|
||||
|
||||
<div class="d2c_team_bg_wrapper">
|
||||
<!-- team section start -->
|
||||
<section class="d2c_team_wrapper" id="team">
|
||||
<div class="container">
|
||||
<h3 class="d2c_sub_title text-start text-md-center position-relative">our <span>Team</span></h3>
|
||||
<h2 class="d2c_title text-start text-md-center position-relative">Meet Our <span>Experts</span></h2>
|
||||
<div class="row d2c_team_slider">
|
||||
<div class="col">
|
||||
<div class="d2c_team_card">
|
||||
<div class="d2c_img_wrapper position-relative">
|
||||
<img src="./assets/images/team_one.jpg" class="rounded-3 w-100 h-100" alt="Team Image One">
|
||||
</div>
|
||||
<div class="d2c_card_body text-center">
|
||||
<h4>Petrick Suiman</h4>
|
||||
<p class="mb-0">IT Officer</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="d2c_team_card">
|
||||
<div class="d2c_img_wrapper position-relative">
|
||||
<img src="./assets/images/team_two.jpg" class="rounded-3 w-100 h-100" alt="Team Image One">
|
||||
</div>
|
||||
<div class="d2c_card_body text-center">
|
||||
<h4>William Stephen</h4>
|
||||
<p class="mb-0">Graphic Designer</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="d2c_team_card">
|
||||
<div class="d2c_img_wrapper position-relative">
|
||||
<img src="./assets/images/team_three.jpg" class="rounded-3 w-100 h-100" alt="Team Image One">
|
||||
</div>
|
||||
<div class="d2c_card_body text-center">
|
||||
<h4>Luisting Morgan</h4>
|
||||
<p class="mb-0">Web Developer</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="d2c_team_card">
|
||||
<div class="d2c_img_wrapper position-relative">
|
||||
<img src="./assets/images/team_two.jpg" class="rounded-3 w-100 h-100" alt="Team Image One">
|
||||
</div>
|
||||
<div class="d2c_card_body text-center">
|
||||
<h4>William Stephen</h4>
|
||||
<p class="mb-0">Graphic Designer</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- team section end -->
|
||||
|
||||
<!-- portfolio section start -->
|
||||
<section class="d2c_portfolio_wrapper" id="portfolio">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 offset-0 offset-lg-3 px-2 px-md-5">
|
||||
<h3 class="d2c_sub_title text-start text-md-center position-relative">Our <span>Portfolio</span></h3>
|
||||
<h2 class="d2c_title text-start text-md-center position-relative">Here is some of Our <span>Design</span> & <span>Project</span></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d2c_grid">
|
||||
<div class="d2c_grid_item" data-wow-duration="2s">
|
||||
<a data-fancybox="gallery" class="fancybox" href="./assets/images/portfolio_one.jpg"></a>
|
||||
</div>
|
||||
<div class="d2c_grid_item" data-wow-duration="2s">
|
||||
<a data-fancybox="gallery" class="fancybox" href="./assets/images/portfolio_two.jpg"></a>
|
||||
</div>
|
||||
<div class="d2c_grid_item" data-wow-duration="2s">
|
||||
<a data-fancybox="gallery" class="fancybox" href="./assets/images/portfolio_three.jpg"></a>
|
||||
</div>
|
||||
<div class="d2c_grid_item" data-wow-duration="2s">
|
||||
<a data-fancybox="gallery" class="fancybox" href="./assets/images/portfolio_four.jpg"></a>
|
||||
</div>
|
||||
<div class="d2c_grid_item" data-wow-duration="2s">
|
||||
<a data-fancybox="gallery" class="fancybox" href="./assets/images/portfolio_five.jpg"></a>
|
||||
</div>
|
||||
<div class="d2c_grid_item" data-wow-duration="2s">
|
||||
<a data-fancybox="gallery" class="fancybox" href="./assets/images/portfolio_six.jpg"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- portfolio section end -->
|
||||
</div>
|
||||
|
||||
<div class="d2c_blog_bg_wrapper">
|
||||
<!-- blog section start -->
|
||||
<section class="d2c_blog_wrapper" id="blog">
|
||||
<div class="container">
|
||||
<h3 class="d2c_sub_title text_start text-md-center position-relative">Our <span>Blog</span></h3>
|
||||
<h2 class="d2c_title text_start text-md-center position-relative">Latest news & <span>articles</span></h2>
|
||||
<p class="text_start text-md-center">Dive into our comprehensive tech blog, where we share in-depth articles, how-to guides, and analysis on the latest tech trends. Stay informed and broaden your tech knowledge with our insightful content.</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 mb-4 mb-lg-0">
|
||||
<div class="d2c_card_wrapper d2c_blog_card">
|
||||
<img src="./assets/images/blog_one.jpg" class="img-fluid w-100" alt="Blog Image One">
|
||||
<div class="d2c_card_body">
|
||||
<p class="mb-2">Design, Illustrations, UI/UX</p>
|
||||
<h4 class="mb-2"><a href="#">How to make a website look more attractive with an NFTs Pictures for the design.</a></h4>
|
||||
<p class="mb-1">Dive into our comprehensive tech blog, where we share in-depth articles, how-to guides, and analysis on the latest tech trends.</p>
|
||||
<div class="d2c_date">
|
||||
<span>2, Sept 2023</span>
|
||||
<a href="#"><i class="fas fa-share-alt"></i></a>
|
||||
</div>
|
||||
<a href="#">Learn More <i class="fas fa-arrow-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="d2c_card_wrapper">
|
||||
<img src="./assets/images/blog_two.jpg" class="img-fluid w-100" alt="Blog Image Two">
|
||||
<div class="d2c_card_body">
|
||||
<p class="mb-2">Design, Illustrations, UI/UX</p>
|
||||
<h4 class="mb-2"><a href="#">How to make a website secure more then another with advance security threat.</a></h4>
|
||||
<p class="mb-1">Explore a curated selection of cutting-edge tech products is one of handpicked by our experts. From gadgets to software.</p>
|
||||
<div class="d2c_date">
|
||||
<span>9, Aug 2023</span>
|
||||
<a href="#"><i class="fas fa-share-alt"></i></a>
|
||||
</div>
|
||||
<a href="#">Learn More <i class="fas fa-arrow-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- blog section end -->
|
||||
|
||||
<!-- testimonial section start -->
|
||||
<section class="d2c_testimonial_wrapper" id="testimonial">
|
||||
<div class="container">
|
||||
<h3 class="d2c_sub_title text_start text-md-center position-relative">Our <span>Testimonial</span></h3>
|
||||
<h2 class="d2c_title text_start text-md-center position-relative">here are some client feedback<span></span></h2>
|
||||
<div class="row testimonial_slider">
|
||||
<div class="col">
|
||||
<div class="d2c_card_wrapper text-center">
|
||||
<h5>Tanahair is the friendliest and most efficient service I have ever used. The whole thing takes time to introduce the product and, as a result, put forward only the best opportunities that really suit you.</h5>
|
||||
<img src="./assets/images/testimonial_one.jpg" class="img-fluid mb-2" alt="Testimonial One">
|
||||
<h3 class="mb-2"><span>Darren Dunlap</span></h3>
|
||||
<p class="mb-0">CEO & Founder at Flex.co</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="d2c_card_wrapper text-center">
|
||||
<h5>Tanahair is the friendliest and most efficient service I have ever used. The whole thing takes time to introduce the product and, as a result, put forward only the best opportunities that really suit you.</h5>
|
||||
<img src="./assets/images/testimonial_one.jpg" class="img-fluid mb-2" alt="Testimonial One">
|
||||
<h3 class="mb-2"><span>Darren Dunlap</span></h3>
|
||||
<p class="mb-0">CEO & Founder at Flex.co</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="d2c_card_wrapper text-center">
|
||||
<h5>Tanahair is the friendliest and most efficient service I have ever used. The whole thing takes time to introduce the product and, as a result, put forward only the best opportunities that really suit you.</h5>
|
||||
<img src="./assets/images/testimonial_one.jpg" class="img-fluid mb-2" alt="Testimonial One">
|
||||
<h3 class="mb-2"><span>Darren Dunlap</span></h3>
|
||||
<p class="mb-0">CEO & Founder at Flex.co</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- testimonial section end -->
|
||||
</div>
|
||||
|
||||
<!-- newsletter section start -->
|
||||
<section class="d2c_newsletter_wrapper">
|
||||
<div class="container">
|
||||
<div class="d2c_card_wrapper">
|
||||
<h2 class="d2c_sub_title text_start text-md-center position-relative">Be the first to know when <span>we launch</span></h2>
|
||||
<p class="text_start text-md-center">Stay in the loop with everything you need to know.</p>
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-8 col-xl-6 offset-0 offset-lg-2 offset-xl-3">
|
||||
<form class="row needs-validation" novalidate>
|
||||
<div class="col-md-8">
|
||||
<div class="input-group">
|
||||
<input type="email" class="form-control" placeholder="Enter your email address" aria-describedby="newsletter_btn" autocomplete="on" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<button class="btn" type="submit" id="newsletter_btn">get in touch</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- newsletter section end -->
|
||||
|
||||
<!-- contact section start -->
|
||||
<section class="d2c_contact_wrapper" id="contact">
|
||||
<div class="container">
|
||||
<h3 class="d2c_sub_title position-relative">Contact <span>us</span></h3>
|
||||
<h2>Have any <span>questions or inquiries?</span></h2>
|
||||
<form class="row needs-validation" novalidate>
|
||||
<div class="col-md-6">
|
||||
<label for="validationCustomFirstName" class="form-label">First <span>Name</span></label>
|
||||
<input type="text" class="form-control" id="validationCustomFirstName" autocomplete="off" required>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="validationCustomLastName" class="form-label">Last <span>Name</span></label>
|
||||
<input type="text" class="form-control" id="validationCustomLastName" autocomplete="off" required>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="validationCustomEmail" class="form-label">Email <span>Address</span></label>
|
||||
<div class="input-group has-validation">
|
||||
<input type="email" class="form-control" id="validationCustomEmail" autocomplete="on" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="validationCustomPhone" class="form-label">Phone <span>Number</span></label>
|
||||
<div class="input-group has-validation">
|
||||
<input type="tel" class="form-control" id="validationCustomPhone" autocomplete="off" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<label for="validationCustomMessage" class="form-label">Messages</label>
|
||||
<textarea class="form-control" rows="5" id="validationCustomMessage" required></textarea>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<button class="btn" type="submit">Send Message</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
<!-- contact section end -->
|
||||
|
||||
<!-- footer section start -->
|
||||
<footer class="d2c_footer_wrapper">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-lg-4 mb-5 mb-lg-0">
|
||||
<img src="./assets/images/footer_logo.png" class="d2c_footer_logo img-fluid w-100 mb-4" alt="Footer Logo">
|
||||
<p>Professionally scale cross functional human capital and extensive technology.</p>
|
||||
<ul class="d2c_social_link list-group list-group-horizontal">
|
||||
<li>
|
||||
<a href="https://www.facebook.com/Designtocodes" target="_blank"><i class="fab fa-facebook-f"></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.linkedin.com/company/designtocodes/" target="_blank"><i class="fab fa-linkedin-in"></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://twitter.com/DesignToCodes" target="_blank"><i class="fab fa-twitter"></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.instagram.com/designtocodes/" target="_blank"><i class="fab fa-instagram"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg mb-5 mb-lg-0">
|
||||
<h3><span>Quick Link</span></h3>
|
||||
<ul class="list-group">
|
||||
<li class="py-1 py-md-2">
|
||||
<a href="#service">Service</a>
|
||||
</li>
|
||||
<li class="py-1 py-md-2">
|
||||
<a href="#team">Team</a>
|
||||
</li>
|
||||
<li class="py-1 py-md-2">
|
||||
<a href="#portfolio">Portfolio</a>
|
||||
</li>
|
||||
<li class="py-1 py-md-2">
|
||||
<a href="#blog">Our Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg mb-5 mb-md-0">
|
||||
<h3><span>Company</span></h3>
|
||||
<ul class="list-group">
|
||||
<li class="py-1 py-md-2">
|
||||
<a href="#about">About us</a>
|
||||
</li>
|
||||
<li class="py-1 py-md-2">
|
||||
<a href="https://www.designtocodes.com/terms/" target="_blank">Terms</a>
|
||||
</li>
|
||||
<li class="py-1 py-md-2">
|
||||
<a href="https://www.designtocodes.com/terms/" target="_blank">Privacy Policy</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<h3><span>Company</span></h3>
|
||||
<ul class="d2c_company_info list-group">
|
||||
<li class="py-1 py-md-2">
|
||||
<a href="tel:+971 5546 963">
|
||||
<i class="fas fa-phone-alt"></i>
|
||||
971 5546 963
|
||||
</a>
|
||||
</li>
|
||||
<li class="py-1 py-md-2">
|
||||
<a href="mailto:example@gmail.com">
|
||||
<i class="fas fa-envelope"></i>
|
||||
example@gmail.com
|
||||
</a>
|
||||
</li>
|
||||
<li class="py-1 py-md-2">
|
||||
<a href="https://www.google.com/maps/@40.0677545,-76.0434136,8z?entry=ttu" target="_blank">
|
||||
<i class="fas fa-map-marker-alt"></i>
|
||||
Royal 2464 Mesa, New Jersey
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d2c_copy_wrapper">
|
||||
<h4 class="text-center">© 2023 <a href="https://www.designtocodes.com/" target="_blank">DesignToCodes</a>. All Right Reserved</h4>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- footer section end -->
|
||||
|
||||
<!-- Scroll Button Start -->
|
||||
<div id="scrollBtn">
|
||||
<a href="#">
|
||||
<i class="fas fa-chevron-up"></i>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Scroll Button End -->
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
<!-- js cdn -->
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<!-- bootstrap js -->
|
||||
<script src="./lib/bootstrap-5/js/bootstrap.bundle.min.js"></script>
|
||||
<!-- fancybox Image -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
|
||||
<!-- Slider JS Link -->
|
||||
<script src="./lib/slick-1.8.1/slick/slick.min.js"></script>
|
||||
<!-- main js -->
|
||||
<script src="./assets/js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
7
lib/bootstrap-5/css/bootstrap.min.css
vendored
Executable file
7
lib/bootstrap-5/css/bootstrap.min.css
vendored
Executable file
File diff suppressed because one or more lines are too long
7
lib/bootstrap-5/js/bootstrap.bundle.min.js
vendored
Executable file
7
lib/bootstrap-5/js/bootstrap.bundle.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
2
lib/slick-1.8.1/.gitignore
vendored
Executable file
2
lib/slick-1.8.1/.gitignore
vendored
Executable file
@@ -0,0 +1,2 @@
|
||||
.sass-cache
|
||||
node_modules
|
||||
35
lib/slick-1.8.1/CONTRIBUTING.markdown
Executable file
35
lib/slick-1.8.1/CONTRIBUTING.markdown
Executable file
@@ -0,0 +1,35 @@
|
||||
## Submitting issues
|
||||
|
||||
### Test case required
|
||||
|
||||
**All bug reports and problem issues require a jsFiddle**.
|
||||
[Please fork this JSFiddle as a baseline](http://jsfiddle.net/simeydotme/fmo50w7n/).
|
||||
|
||||
+ A test case clearly demonstrates the bug or issue.
|
||||
+ It contains the bare minimum HTML, CSS, and JavaScript required to demonstrate the bug.
|
||||
+ Assets are not minified (we cannot debug .min.js files).
|
||||
+ A link to your production site is **not** a reduced test case.
|
||||
|
||||
Providing a test case is the best way to get your issue addressed. Without a test case; your issue may be closed.
|
||||
You must provide a clear and simple way to reproduce the issue with the provided fiddle.
|
||||
|
||||
## Support
|
||||
|
||||
Although Slick is designed to be super easy to use, there's always things that can go wrong, especially when interacting with other plugins and complicated websites. If you are **having problems getting Slick to work**, or can't figure something out, **this repository**'s issues section **is not the place to ask about it**.
|
||||
|
||||
I have set up a subreddit for Slick discussion at [reddit.com/r/slickcarousel](http://www.reddit.com/r/slickcarousel/).
|
||||
And a gitter chatroom here: [gitter.im/kenwheeler/slick](https://gitter.im/kenwheeler/slick).
|
||||
And finally you can ask the world for help, and find out if anyone else has your problem at [stackoverflow](http://stackoverflow.com/search?q=slick+carousel).
|
||||
|
||||
Please use these forums as an area to discuss Slick and any issues you may have.
|
||||
|
||||
## Feature Requests
|
||||
|
||||
If you would like to request or propose a feature, please do so in the the Slick subreddit or gitter chat:
|
||||
[reddit.com/r/slickcarousel](http://www.reddit.com/r/slickcarousel/) / [gitter.im/kenwheeler/slick](https://gitter.im/kenwheeler/slick).
|
||||
|
||||
## Pull requests
|
||||
|
||||
**Contributions are welcome**! That said, please *be prepared to edit* your pull request at request, and provide a jsFiddle of your fork working interoperably with every "mode" that Slick supports, and with varying numbers of slides, slidesToShow & slidesToScroll. Failure to do so will result in your pull request being closed.
|
||||
|
||||
*Please note that while Slick is open source, this is still my baby, and by submitting a pull request you are authorizing me to edit or modify it in any way shape or form. You will be listed in Github as a contributor, but I have and will continue to steer the direction of this project.*
|
||||
50
lib/slick-1.8.1/ISSUE_TEMPLATE.md
Executable file
50
lib/slick-1.8.1/ISSUE_TEMPLATE.md
Executable file
@@ -0,0 +1,50 @@
|
||||
|
||||
> short description of the bug / issue, provide more detail below.
|
||||
|
||||
====================================================================
|
||||
|
||||
|
||||
###### `[ paste your jsfiddle link here ]`
|
||||
|
||||
use this jsfiddle to reproduce your bug:
|
||||
http://jsfiddle.net/simeydotme/fmo50w7n/
|
||||
we will likely close your issue without it.
|
||||
|
||||
|
||||
====================================================================
|
||||
|
||||
|
||||
#### Steps to reproduce the problem
|
||||
|
||||
1. ...
|
||||
2. ...
|
||||
|
||||
|
||||
====================================================================
|
||||
|
||||
|
||||
#### What is the expected behaviour?
|
||||
|
||||
...
|
||||
|
||||
|
||||
====================================================================
|
||||
|
||||
|
||||
#### What is observed behaviour?
|
||||
|
||||
...
|
||||
|
||||
|
||||
====================================================================
|
||||
|
||||
|
||||
#### More Details
|
||||
|
||||
- Which browsers/versions does it happen on?
|
||||
- Which jQuery/Slick version are you using?
|
||||
- Did this work before?
|
||||
|
||||
|
||||
|
||||
|
||||
20
lib/slick-1.8.1/LICENSE
Executable file
20
lib/slick-1.8.1/LICENSE
Executable file
@@ -0,0 +1,20 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2013-2016
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
this software and associated documentation files (the "Software"), to deal in
|
||||
the Software without restriction, including without limitation the rights to
|
||||
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
||||
the Software, and to permit persons to whom the Software is furnished to do so,
|
||||
subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
||||
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
8
lib/slick-1.8.1/Makefile
Executable file
8
lib/slick-1.8.1/Makefile
Executable file
@@ -0,0 +1,8 @@
|
||||
|
||||
build: components slick.js slick.css
|
||||
@component build --dev
|
||||
|
||||
components: component.json
|
||||
@component install --dev
|
||||
|
||||
.PHONY: clean
|
||||
292
lib/slick-1.8.1/README.markdown
Executable file
292
lib/slick-1.8.1/README.markdown
Executable file
@@ -0,0 +1,292 @@
|
||||
slick
|
||||
-------
|
||||
|
||||
[1]: <https://github.com/kenwheeler/slick>
|
||||
|
||||
_the last carousel you'll ever need_
|
||||
|
||||
#### Demo
|
||||
|
||||
[http://kenwheeler.github.io/slick](http://kenwheeler.github.io/slick/)
|
||||
|
||||
#### CDN
|
||||
|
||||
To start working with Slick right away, there's a couple of CDN choices availabile
|
||||
to serve the files as close, and fast as possible to your users:
|
||||
|
||||
- https://cdnjs.com/libraries/slick-carousel
|
||||
- https://www.jsdelivr.com/projects/jquery.slick
|
||||
|
||||
##### Example using jsDelivr
|
||||
|
||||
Just add a link to the css file in your `<head>`:
|
||||
|
||||
```html
|
||||
<!-- Add the slick-theme.css if you want default styling -->
|
||||
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick.css"/>
|
||||
<!-- Add the slick-theme.css if you want default styling -->
|
||||
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick-theme.css"/>
|
||||
```
|
||||
|
||||
Then, before your closing ```<body>``` tag add:
|
||||
|
||||
```html
|
||||
<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick.min.js"></script>
|
||||
```
|
||||
|
||||
#### Package Managers
|
||||
|
||||
```sh
|
||||
# Bower
|
||||
bower install --save slick-carousel
|
||||
|
||||
# NPM
|
||||
npm install slick-carousel
|
||||
```
|
||||
|
||||
#### Contributing
|
||||
|
||||
PLEASE review CONTRIBUTING.markdown prior to requesting a feature, filing a pull request or filing an issue.
|
||||
|
||||
### Data Attribute Settings
|
||||
|
||||
In slick 1.5 you can now add settings using the data-slick attribute. You still need to call $(element).slick() to initialize slick on the element.
|
||||
|
||||
Example:
|
||||
|
||||
```html
|
||||
<div data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>
|
||||
<div><h3>1</h3></div>
|
||||
<div><h3>2</h3></div>
|
||||
<div><h3>3</h3></div>
|
||||
<div><h3>4</h3></div>
|
||||
<div><h3>5</h3></div>
|
||||
<div><h3>6</h3></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Settings
|
||||
|
||||
Option | Type | Default | Description
|
||||
------ | ---- | ------- | -----------
|
||||
accessibility | boolean | true | Enables tabbing and arrow key navigation. Unless `autoplay: true`, sets browser focus to current slide (or first of current slide set, if multiple `slidesToShow`) after slide change. For full a11y compliance enable focusOnChange in addition to this.
|
||||
adaptiveHeight | boolean | false | Adapts slider height to the current slide
|
||||
appendArrows | string | $(element) | Change where the navigation arrows are attached (Selector, htmlString, Array, Element, jQuery object)
|
||||
appendDots | string | $(element) | Change where the navigation dots are attached (Selector, htmlString, Array, Element, jQuery object)
|
||||
arrows | boolean | true | Enable Next/Prev arrows
|
||||
asNavFor | string | $(element) | Enables syncing of multiple sliders
|
||||
autoplay | boolean | false | Enables auto play of slides
|
||||
autoplaySpeed | int | 3000 | Auto play change interval
|
||||
centerMode | boolean | false | Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts.
|
||||
centerPadding | string | '50px' | Side padding when in center mode. (px or %)
|
||||
cssEase | string | 'ease' | CSS3 easing
|
||||
customPaging | function | n/a | Custom paging templates. See source for use example.
|
||||
dots | boolean | false | Current slide indicator dots
|
||||
dotsClass | string | 'slick-dots' | Class for slide indicator dots container
|
||||
draggable | boolean | true | Enables desktop dragging
|
||||
easing | string | 'linear' | animate() fallback easing
|
||||
edgeFriction | integer | 0.15 | Resistance when swiping edges of non-infinite carousels
|
||||
fade | boolean | false | Enables fade
|
||||
focusOnSelect | boolean | false | Enable focus on selected element (click)
|
||||
focusOnChange | boolean | false | Puts focus on slide after change
|
||||
infinite | boolean | true | Infinite looping
|
||||
initialSlide | integer | 0 | Slide to start on
|
||||
lazyLoad | string | 'ondemand' | Accepts 'ondemand' or 'progressive' for lazy load technique. 'ondemand' will load the image as soon as you slide to it, 'progressive' loads one image after the other when the page loads.
|
||||
mobileFirst | boolean | false | Responsive settings use mobile first calculation
|
||||
nextArrow | string (html \| jQuery selector) \| object (DOM node \| jQuery object) | `<button type="button" class="slick-next">Next</button>` | Allows you to select a node or customize the HTML for the "Next" arrow.
|
||||
pauseOnDotsHover | boolean | false | Pauses autoplay when a dot is hovered
|
||||
pauseOnFocus | boolean | true | Pauses autoplay when slider is focussed
|
||||
pauseOnHover | boolean | true | Pauses autoplay on hover
|
||||
prevArrow | string (html \| jQuery selector) \| object (DOM node \| jQuery object) | `<button type="button" class="slick-prev">Previous</button>` | Allows you to select a node or customize the HTML for the "Previous" arrow.
|
||||
respondTo | string | 'window' | Width that responsive object responds to. Can be 'window', 'slider' or 'min' (the smaller of the two).
|
||||
responsive | array | null | Array of objects [containing breakpoints and settings objects (see example)](#responsive-option-example). Enables settings at given `breakpoint`. Set `settings` to "unslick" instead of an object to disable slick at a given breakpoint.
|
||||
rows | int | 1 | Setting this to more than 1 initializes grid mode. Use slidesPerRow to set how many slides should be in each row.
|
||||
rtl | boolean | false | Change the slider's direction to become right-to-left
|
||||
slide | string | '' | Slide element query
|
||||
slidesPerRow | int | 1 | With grid mode initialized via the rows option, this sets how many slides are in each grid row.
|
||||
slidesToScroll | int | 1 | # of slides to scroll at a time
|
||||
slidesToShow | int | 1 | # of slides to show at a time
|
||||
speed | int | 300 | Transition speed
|
||||
swipe | boolean | true | Enables touch swipe
|
||||
swipeToSlide | boolean | false | Swipe to slide irrespective of slidesToScroll
|
||||
touchMove | boolean | true | Enables slide moving with touch
|
||||
touchThreshold | int | 5 | To advance slides, the user must swipe a length of (1/touchThreshold) * the width of the slider.
|
||||
useCSS | boolean | true | Enable/Disable CSS Transitions
|
||||
useTransform | boolean | true | Enable/Disable CSS Transforms
|
||||
variableWidth | boolean | false | Disables automatic slide width calculation
|
||||
vertical | boolean | false | Vertical slide direction
|
||||
verticalSwiping | boolean | false | Changes swipe direction to vertical
|
||||
waitForAnimate | boolean | true | Ignores requests to advance the slide while animating
|
||||
zIndex | number | 1000 | Set the zIndex values for slides, useful for IE9 and lower
|
||||
|
||||
##### Responsive Option Example
|
||||
The responsive option, and value, is quite unique and powerful.
|
||||
You can use it like so:
|
||||
|
||||
```javascript
|
||||
$(".slider").slick({
|
||||
|
||||
// normal options...
|
||||
infinite: false,
|
||||
|
||||
// the magic
|
||||
responsive: [{
|
||||
|
||||
breakpoint: 1024,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
infinite: true
|
||||
}
|
||||
|
||||
}, {
|
||||
|
||||
breakpoint: 600,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
dots: true
|
||||
}
|
||||
|
||||
}, {
|
||||
|
||||
breakpoint: 300,
|
||||
settings: "unslick" // destroys slick
|
||||
|
||||
}]
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
### Events
|
||||
|
||||
In slick 1.4, callback methods were deprecated and replaced with events. Use them before the initialization of slick as shown below:
|
||||
|
||||
```javascript
|
||||
// On swipe event
|
||||
$('.your-element').on('swipe', function(event, slick, direction){
|
||||
console.log(direction);
|
||||
// left
|
||||
});
|
||||
|
||||
// On edge hit
|
||||
$('.your-element').on('edge', function(event, slick, direction){
|
||||
console.log('edge was hit')
|
||||
});
|
||||
|
||||
// On before slide change
|
||||
$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){
|
||||
console.log(nextSlide);
|
||||
});
|
||||
```
|
||||
|
||||
Event | Params | Description
|
||||
------ | -------- | -----------
|
||||
afterChange | event, slick, currentSlide | After slide change callback
|
||||
beforeChange | event, slick, currentSlide, nextSlide | Before slide change callback
|
||||
breakpoint | event, slick, breakpoint | Fires after a breakpoint is hit
|
||||
destroy | event, slick | When slider is destroyed, or unslicked.
|
||||
edge | event, slick, direction | Fires when an edge is overscrolled in non-infinite mode.
|
||||
init | event, slick | When Slick initializes for the first time callback. Note that this event should be defined before initializing the slider.
|
||||
reInit | event, slick | Every time Slick (re-)initializes callback
|
||||
setPosition | event, slick | Every time Slick recalculates position
|
||||
swipe | event, slick, direction | Fires after swipe/drag
|
||||
lazyLoaded | event, slick, image, imageSource | Fires after image loads lazily
|
||||
lazyLoadError | event, slick, image, imageSource | Fires after image fails to load
|
||||
|
||||
|
||||
#### Methods
|
||||
|
||||
Methods are called on slick instances through the slick method itself in version 1.4, see below:
|
||||
|
||||
```javascript
|
||||
// Add a slide
|
||||
$('.your-element').slick('slickAdd',"<div></div>");
|
||||
|
||||
// Get the current slide
|
||||
var currentSlide = $('.your-element').slick('slickCurrentSlide');
|
||||
```
|
||||
|
||||
This new syntax allows you to call any internal slick method as well:
|
||||
|
||||
```javascript
|
||||
// Manually refresh positioning of slick
|
||||
$('.your-element').slick('setPosition');
|
||||
```
|
||||
|
||||
|
||||
Method | Argument | Description
|
||||
------ | -------- | -----------
|
||||
`slick` | options : object | Initializes Slick
|
||||
`unslick` | | Destroys Slick
|
||||
`slickNext` | | Triggers next slide
|
||||
`slickPrev` | | Triggers previous slide
|
||||
`slickPause` | | Pause Autoplay
|
||||
`slickPlay` | | Start Autoplay (_will also set `autoplay` option to `true`_)
|
||||
`slickGoTo` | index : int, dontAnimate : bool | Goes to slide by index, skipping animation if second parameter is set to true
|
||||
`slickCurrentSlide` | | Returns the current slide index
|
||||
`slickAdd` | element : html or DOM object, index: int, addBefore: bool | Add a slide. If an index is provided, will add at that index, or before if addBefore is set. If no index is provided, add to the end or to the beginning if addBefore is set. Accepts HTML String || Object
|
||||
`slickRemove` | index: int, removeBefore: bool | Remove slide by index. If removeBefore is set true, remove slide preceding index, or the first slide if no index is specified. If removeBefore is set to false, remove the slide following index, or the last slide if no index is set.
|
||||
`slickFilter` | filter : selector or function | Filters slides using jQuery .filter syntax
|
||||
`slickUnfilter` | | Removes applied filter
|
||||
`slickGetOption` | option : string(option name) | Gets an option value.
|
||||
`slickSetOption` | change an option, `refresh` is always `boolean` and will update UI changes...
|
||||
| `option, value, refresh` | change a [single `option`](https://github.com/kenwheeler/slick#settings) to given `value`; `refresh` is optional.
|
||||
| `"responsive", [{ breakpoint: n, settings: {} }, ... ], refresh` | change or add [whole sets of responsive options](#responsive-option-example)
|
||||
| `{ option: value, option: value, ... }, refresh` | change [multiple `option`s](https://github.com/kenwheeler/slick#settings) to corresponding `value`s.
|
||||
|
||||
|
||||
#### Example
|
||||
|
||||
Initialize with:
|
||||
|
||||
```javascript
|
||||
$(element).slick({
|
||||
dots: true,
|
||||
speed: 500
|
||||
});
|
||||
```
|
||||
|
||||
Change the speed with:
|
||||
|
||||
```javascript
|
||||
$(element).slick('slickSetOption', 'speed', 5000, true);
|
||||
```
|
||||
|
||||
Destroy with:
|
||||
|
||||
```javascript
|
||||
$(element).slick('unslick');
|
||||
```
|
||||
|
||||
|
||||
#### Sass Variables
|
||||
|
||||
Variable | Type | Default | Description
|
||||
------ | ---- | ------- | -----------
|
||||
$slick-font-path | string | "./fonts/" | Directory path for the slick icon font
|
||||
$slick-font-family | string | "slick" | Font-family for slick icon font
|
||||
$slick-loader-path | string | "./" | Directory path for the loader image
|
||||
$slick-arrow-color | color | white | Color of the left/right arrow icons
|
||||
$slick-dot-color | color | black | Color of the navigation dots
|
||||
$slick-dot-color-active | color | $slick-dot-color | Color of the active navigation dot
|
||||
$slick-prev-character | string | '\2190' | Unicode character code for the previous arrow icon
|
||||
$slick-next-character | string | '\2192' | Unicode character code for the next arrow icon
|
||||
$slick-dot-character | string | '\2022' | Unicode character code for the navigation dot icon
|
||||
$slick-dot-size | pixels | 6px | Size of the navigation dots
|
||||
|
||||
#### Browser support
|
||||
|
||||
Slick works on IE8+ in addition to other modern browsers such as Chrome, Firefox, and Safari.
|
||||
|
||||
#### Dependencies
|
||||
|
||||
jQuery 1.7
|
||||
|
||||
#### License
|
||||
|
||||
Copyright (c) 2017 Ken Wheeler
|
||||
|
||||
Licensed under the MIT license.
|
||||
|
||||
Free as in Bacon.
|
||||
32
lib/slick-1.8.1/bower.json
Executable file
32
lib/slick-1.8.1/bower.json
Executable file
@@ -0,0 +1,32 @@
|
||||
{
|
||||
"name": "slick-carousel",
|
||||
"main": [
|
||||
"slick/slick.js",
|
||||
"slick/slick.css",
|
||||
"slick/slick.less",
|
||||
"slick/slick.scss"
|
||||
],
|
||||
"homepage": "https://github.com/kenwheeler/slick",
|
||||
"authors": [
|
||||
"Ken Wheeler <ken_wheeler@me.com>"
|
||||
],
|
||||
"description": "the last carousel you'll ever need",
|
||||
"keywords": [
|
||||
"responsive",
|
||||
"carousel",
|
||||
"jquery"
|
||||
],
|
||||
"license": "MIT",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"tests",
|
||||
"package.json",
|
||||
"index.html"
|
||||
],
|
||||
"dependencies": {
|
||||
"jquery": ">=1.7"
|
||||
}
|
||||
}
|
||||
18
lib/slick-1.8.1/component.json
Executable file
18
lib/slick-1.8.1/component.json
Executable file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "slick",
|
||||
"repo": "kenwheeler/slick",
|
||||
"description": "the last carousel you'll ever need",
|
||||
"version": "1.8.0",
|
||||
"keywords": ["ui", "jquery", "carousel", "responsive", "slider"],
|
||||
"dependencies": {
|
||||
"component/jquery": "*"
|
||||
},
|
||||
"development": {},
|
||||
"scripts": {
|
||||
"slick/slick.js": "slick.js"
|
||||
},
|
||||
"styles": {
|
||||
"slick/slick.css": "slick.css",
|
||||
"slick/slick-theme.css": "slick-theme.css"
|
||||
}
|
||||
}
|
||||
373
lib/slick-1.8.1/index.html
Executable file
373
lib/slick-1.8.1/index.html
Executable file
@@ -0,0 +1,373 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Slick Playground</title>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" type="text/css" href="./slick/slick.css">
|
||||
<link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
|
||||
<style type="text/css">
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.slider {
|
||||
width: 50%;
|
||||
margin: 100px auto;
|
||||
}
|
||||
|
||||
.slick-slide {
|
||||
margin: 0px 20px;
|
||||
}
|
||||
|
||||
.slick-slide img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.slick-prev:before,
|
||||
.slick-next:before {
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
||||
.slick-slide {
|
||||
transition: all ease-in-out .3s;
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
.slick-active {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.slick-current {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section class="vertical-center-4 slider">
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=1">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=2">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=3">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=4">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=5">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=6">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=7">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=8">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=9">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=10">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="vertical-center-3 slider">
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=1">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=2">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=3">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=4">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=5">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=6">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=7">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=8">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=9">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=10">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="vertical-center-2 slider">
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=1">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=2">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=3">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=4">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=5">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=6">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=7">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=8">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=9">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=10">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="vertical-center slider">
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=1">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=2">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=3">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=4">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=5">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=6">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=7">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=8">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=9">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=10">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="vertical slider">
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=1">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=2">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=3">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=4">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=5">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=6">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=7">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=8">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=9">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=10">
|
||||
</div>
|
||||
</section>
|
||||
<section class="regular slider">
|
||||
<div>
|
||||
<img src="http://placehold.it/350x300?text=1">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x300?text=2">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x300?text=3">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x300?text=4">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x300?text=5">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x300?text=6">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="center slider">
|
||||
<div>
|
||||
<img src="http://placehold.it/350x300?text=1">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x300?text=2">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x300?text=3">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x300?text=4">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x300?text=5">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x300?text=6">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x300?text=7">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x300?text=8">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x300?text=9">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="variable slider">
|
||||
<div>
|
||||
<img src="http://placehold.it/350x300?text=1">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/200x300?text=2">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/100x300?text=3">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/200x300?text=4">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x300?text=5">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/300x300?text=6">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="lazy slider" data-sizes="50vw">
|
||||
<div>
|
||||
<img data-lazy="http://placehold.it/350x300?text=1-350w" data-srcset="http://placehold.it/650x300?text=1-650w 650w, http://placehold.it/960x300?text=1-960w 960w" data-sizes="100vw">
|
||||
</div>
|
||||
<div>
|
||||
<img data-lazy="http://placehold.it/350x300?text=2-350w" data-srcset="http://placehold.it/650x300?text=2-650w 650w, http://placehold.it/960x300?text=2-960w 960w" data-sizes="100vw">
|
||||
</div>
|
||||
<div>
|
||||
<img data-lazy="http://placehold.it/350x300?text=3-350w" data-srcset="http://placehold.it/650x300?text=3-650w 650w, http://placehold.it/960x300?text=3-960w 960w" data-sizes="100vw">
|
||||
</div>
|
||||
<div>
|
||||
<img data-lazy="http://placehold.it/350x300?text=4-350w" data-srcset="http://placehold.it/650x300?text=4-650w 650w, http://placehold.it/960x300?text=4-960w 960w" data-sizes="100vw">
|
||||
</div>
|
||||
<div>
|
||||
<img data-lazy="http://placehold.it/350x300?text=5-350w" data-srcset="http://placehold.it/650x300?text=5-650w 650w, http://placehold.it/960x300?text=5-960w 960w" data-sizes="100vw">
|
||||
</div>
|
||||
<div>
|
||||
<!-- this slide should inherit the sizes attr from the parent slider -->
|
||||
<img data-lazy="http://placehold.it/350x300?text=6-350w" data-srcset="http://placehold.it/650x300?text=6-650w 650w, http://placehold.it/960x300?text=6-960w 960w">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
|
||||
<script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).on('ready', function() {
|
||||
$(".vertical-center-4").slick({
|
||||
dots: true,
|
||||
vertical: true,
|
||||
centerMode: true,
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 2
|
||||
});
|
||||
$(".vertical-center-3").slick({
|
||||
dots: true,
|
||||
vertical: true,
|
||||
centerMode: true,
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 3
|
||||
});
|
||||
$(".vertical-center-2").slick({
|
||||
dots: true,
|
||||
vertical: true,
|
||||
centerMode: true,
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 2
|
||||
});
|
||||
$(".vertical-center").slick({
|
||||
dots: true,
|
||||
vertical: true,
|
||||
centerMode: true,
|
||||
});
|
||||
$(".vertical").slick({
|
||||
dots: true,
|
||||
vertical: true,
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 3
|
||||
});
|
||||
$(".regular").slick({
|
||||
dots: true,
|
||||
infinite: true,
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 3
|
||||
});
|
||||
$(".center").slick({
|
||||
dots: true,
|
||||
infinite: true,
|
||||
centerMode: true,
|
||||
slidesToShow: 5,
|
||||
slidesToScroll: 3
|
||||
});
|
||||
$(".variable").slick({
|
||||
dots: true,
|
||||
infinite: true,
|
||||
variableWidth: true
|
||||
});
|
||||
$(".lazy").slick({
|
||||
lazyLoad: 'ondemand', // ondemand progressive anticipated
|
||||
infinite: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
50
lib/slick-1.8.1/package.json
Executable file
50
lib/slick-1.8.1/package.json
Executable file
@@ -0,0 +1,50 @@
|
||||
{
|
||||
"name": "slick-carousel",
|
||||
"version": "1.8.1",
|
||||
"description": "the last carousel you'll ever need",
|
||||
"main": "slick/slick.js",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/kenwheeler/slick.git"
|
||||
},
|
||||
"keywords": [
|
||||
"carousel",
|
||||
"slick",
|
||||
"responsive",
|
||||
"js",
|
||||
"slider"
|
||||
],
|
||||
"author": "Ken Wheeler <ken_wheeler@me.com>",
|
||||
"contributors": [
|
||||
{
|
||||
"name": "ken wheeler",
|
||||
"email": "ken_wheeler@me.com",
|
||||
"url": "http://kenwheeler.github.io/"
|
||||
},
|
||||
{
|
||||
"name": "simon goellner",
|
||||
"email": "simey.me@gmail.com",
|
||||
"url": "http://simey.me"
|
||||
},
|
||||
{
|
||||
"name": "ahmad el-alfy",
|
||||
"email": "ahmadalfy@gmail.com",
|
||||
"url": "http://www.alfy.me"
|
||||
},
|
||||
{
|
||||
"name": "leggomuhgreggo",
|
||||
"email": "gwestneat@gmail.com"
|
||||
},
|
||||
{
|
||||
"name": "ashley mcknight",
|
||||
"email": "ash@sharpteef.net"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/kenwheeler/slick/issues"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"jquery": ">=1.8.0"
|
||||
}
|
||||
}
|
||||
2
lib/slick-1.8.1/slick-1.8.1/.gitignore
vendored
Executable file
2
lib/slick-1.8.1/slick-1.8.1/.gitignore
vendored
Executable file
@@ -0,0 +1,2 @@
|
||||
.sass-cache
|
||||
node_modules
|
||||
35
lib/slick-1.8.1/slick-1.8.1/CONTRIBUTING.markdown
Executable file
35
lib/slick-1.8.1/slick-1.8.1/CONTRIBUTING.markdown
Executable file
@@ -0,0 +1,35 @@
|
||||
## Submitting issues
|
||||
|
||||
### Test case required
|
||||
|
||||
**All bug reports and problem issues require a jsFiddle**.
|
||||
[Please fork this JSFiddle as a baseline](http://jsfiddle.net/simeydotme/fmo50w7n/).
|
||||
|
||||
+ A test case clearly demonstrates the bug or issue.
|
||||
+ It contains the bare minimum HTML, CSS, and JavaScript required to demonstrate the bug.
|
||||
+ Assets are not minified (we cannot debug .min.js files).
|
||||
+ A link to your production site is **not** a reduced test case.
|
||||
|
||||
Providing a test case is the best way to get your issue addressed. Without a test case; your issue may be closed.
|
||||
You must provide a clear and simple way to reproduce the issue with the provided fiddle.
|
||||
|
||||
## Support
|
||||
|
||||
Although Slick is designed to be super easy to use, there's always things that can go wrong, especially when interacting with other plugins and complicated websites. If you are **having problems getting Slick to work**, or can't figure something out, **this repository**'s issues section **is not the place to ask about it**.
|
||||
|
||||
I have set up a subreddit for Slick discussion at [reddit.com/r/slickcarousel](http://www.reddit.com/r/slickcarousel/).
|
||||
And a gitter chatroom here: [gitter.im/kenwheeler/slick](https://gitter.im/kenwheeler/slick).
|
||||
And finally you can ask the world for help, and find out if anyone else has your problem at [stackoverflow](http://stackoverflow.com/search?q=slick+carousel).
|
||||
|
||||
Please use these forums as an area to discuss Slick and any issues you may have.
|
||||
|
||||
## Feature Requests
|
||||
|
||||
If you would like to request or propose a feature, please do so in the the Slick subreddit or gitter chat:
|
||||
[reddit.com/r/slickcarousel](http://www.reddit.com/r/slickcarousel/) / [gitter.im/kenwheeler/slick](https://gitter.im/kenwheeler/slick).
|
||||
|
||||
## Pull requests
|
||||
|
||||
**Contributions are welcome**! That said, please *be prepared to edit* your pull request at request, and provide a jsFiddle of your fork working interoperably with every "mode" that Slick supports, and with varying numbers of slides, slidesToShow & slidesToScroll. Failure to do so will result in your pull request being closed.
|
||||
|
||||
*Please note that while Slick is open source, this is still my baby, and by submitting a pull request you are authorizing me to edit or modify it in any way shape or form. You will be listed in Github as a contributor, but I have and will continue to steer the direction of this project.*
|
||||
50
lib/slick-1.8.1/slick-1.8.1/ISSUE_TEMPLATE.md
Executable file
50
lib/slick-1.8.1/slick-1.8.1/ISSUE_TEMPLATE.md
Executable file
@@ -0,0 +1,50 @@
|
||||
|
||||
> short description of the bug / issue, provide more detail below.
|
||||
|
||||
====================================================================
|
||||
|
||||
|
||||
###### `[ paste your jsfiddle link here ]`
|
||||
|
||||
use this jsfiddle to reproduce your bug:
|
||||
http://jsfiddle.net/simeydotme/fmo50w7n/
|
||||
we will likely close your issue without it.
|
||||
|
||||
|
||||
====================================================================
|
||||
|
||||
|
||||
#### Steps to reproduce the problem
|
||||
|
||||
1. ...
|
||||
2. ...
|
||||
|
||||
|
||||
====================================================================
|
||||
|
||||
|
||||
#### What is the expected behaviour?
|
||||
|
||||
...
|
||||
|
||||
|
||||
====================================================================
|
||||
|
||||
|
||||
#### What is observed behaviour?
|
||||
|
||||
...
|
||||
|
||||
|
||||
====================================================================
|
||||
|
||||
|
||||
#### More Details
|
||||
|
||||
- Which browsers/versions does it happen on?
|
||||
- Which jQuery/Slick version are you using?
|
||||
- Did this work before?
|
||||
|
||||
|
||||
|
||||
|
||||
20
lib/slick-1.8.1/slick-1.8.1/LICENSE
Executable file
20
lib/slick-1.8.1/slick-1.8.1/LICENSE
Executable file
@@ -0,0 +1,20 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2013-2016
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
this software and associated documentation files (the "Software"), to deal in
|
||||
the Software without restriction, including without limitation the rights to
|
||||
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
||||
the Software, and to permit persons to whom the Software is furnished to do so,
|
||||
subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
||||
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
8
lib/slick-1.8.1/slick-1.8.1/Makefile
Executable file
8
lib/slick-1.8.1/slick-1.8.1/Makefile
Executable file
@@ -0,0 +1,8 @@
|
||||
|
||||
build: components slick.js slick.css
|
||||
@component build --dev
|
||||
|
||||
components: component.json
|
||||
@component install --dev
|
||||
|
||||
.PHONY: clean
|
||||
292
lib/slick-1.8.1/slick-1.8.1/README.markdown
Executable file
292
lib/slick-1.8.1/slick-1.8.1/README.markdown
Executable file
@@ -0,0 +1,292 @@
|
||||
slick
|
||||
-------
|
||||
|
||||
[1]: <https://github.com/kenwheeler/slick>
|
||||
|
||||
_the last carousel you'll ever need_
|
||||
|
||||
#### Demo
|
||||
|
||||
[http://kenwheeler.github.io/slick](http://kenwheeler.github.io/slick/)
|
||||
|
||||
#### CDN
|
||||
|
||||
To start working with Slick right away, there's a couple of CDN choices availabile
|
||||
to serve the files as close, and fast as possible to your users:
|
||||
|
||||
- https://cdnjs.com/libraries/slick-carousel
|
||||
- https://www.jsdelivr.com/projects/jquery.slick
|
||||
|
||||
##### Example using jsDelivr
|
||||
|
||||
Just add a link to the css file in your `<head>`:
|
||||
|
||||
```html
|
||||
<!-- Add the slick-theme.css if you want default styling -->
|
||||
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick.css"/>
|
||||
<!-- Add the slick-theme.css if you want default styling -->
|
||||
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick-theme.css"/>
|
||||
```
|
||||
|
||||
Then, before your closing ```<body>``` tag add:
|
||||
|
||||
```html
|
||||
<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick.min.js"></script>
|
||||
```
|
||||
|
||||
#### Package Managers
|
||||
|
||||
```sh
|
||||
# Bower
|
||||
bower install --save slick-carousel
|
||||
|
||||
# NPM
|
||||
npm install slick-carousel
|
||||
```
|
||||
|
||||
#### Contributing
|
||||
|
||||
PLEASE review CONTRIBUTING.markdown prior to requesting a feature, filing a pull request or filing an issue.
|
||||
|
||||
### Data Attribute Settings
|
||||
|
||||
In slick 1.5 you can now add settings using the data-slick attribute. You still need to call $(element).slick() to initialize slick on the element.
|
||||
|
||||
Example:
|
||||
|
||||
```html
|
||||
<div data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>
|
||||
<div><h3>1</h3></div>
|
||||
<div><h3>2</h3></div>
|
||||
<div><h3>3</h3></div>
|
||||
<div><h3>4</h3></div>
|
||||
<div><h3>5</h3></div>
|
||||
<div><h3>6</h3></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Settings
|
||||
|
||||
Option | Type | Default | Description
|
||||
------ | ---- | ------- | -----------
|
||||
accessibility | boolean | true | Enables tabbing and arrow key navigation. Unless `autoplay: true`, sets browser focus to current slide (or first of current slide set, if multiple `slidesToShow`) after slide change. For full a11y compliance enable focusOnChange in addition to this.
|
||||
adaptiveHeight | boolean | false | Adapts slider height to the current slide
|
||||
appendArrows | string | $(element) | Change where the navigation arrows are attached (Selector, htmlString, Array, Element, jQuery object)
|
||||
appendDots | string | $(element) | Change where the navigation dots are attached (Selector, htmlString, Array, Element, jQuery object)
|
||||
arrows | boolean | true | Enable Next/Prev arrows
|
||||
asNavFor | string | $(element) | Enables syncing of multiple sliders
|
||||
autoplay | boolean | false | Enables auto play of slides
|
||||
autoplaySpeed | int | 3000 | Auto play change interval
|
||||
centerMode | boolean | false | Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts.
|
||||
centerPadding | string | '50px' | Side padding when in center mode. (px or %)
|
||||
cssEase | string | 'ease' | CSS3 easing
|
||||
customPaging | function | n/a | Custom paging templates. See source for use example.
|
||||
dots | boolean | false | Current slide indicator dots
|
||||
dotsClass | string | 'slick-dots' | Class for slide indicator dots container
|
||||
draggable | boolean | true | Enables desktop dragging
|
||||
easing | string | 'linear' | animate() fallback easing
|
||||
edgeFriction | integer | 0.15 | Resistance when swiping edges of non-infinite carousels
|
||||
fade | boolean | false | Enables fade
|
||||
focusOnSelect | boolean | false | Enable focus on selected element (click)
|
||||
focusOnChange | boolean | false | Puts focus on slide after change
|
||||
infinite | boolean | true | Infinite looping
|
||||
initialSlide | integer | 0 | Slide to start on
|
||||
lazyLoad | string | 'ondemand' | Accepts 'ondemand' or 'progressive' for lazy load technique. 'ondemand' will load the image as soon as you slide to it, 'progressive' loads one image after the other when the page loads.
|
||||
mobileFirst | boolean | false | Responsive settings use mobile first calculation
|
||||
nextArrow | string (html \| jQuery selector) \| object (DOM node \| jQuery object) | `<button type="button" class="slick-next">Next</button>` | Allows you to select a node or customize the HTML for the "Next" arrow.
|
||||
pauseOnDotsHover | boolean | false | Pauses autoplay when a dot is hovered
|
||||
pauseOnFocus | boolean | true | Pauses autoplay when slider is focussed
|
||||
pauseOnHover | boolean | true | Pauses autoplay on hover
|
||||
prevArrow | string (html \| jQuery selector) \| object (DOM node \| jQuery object) | `<button type="button" class="slick-prev">Previous</button>` | Allows you to select a node or customize the HTML for the "Previous" arrow.
|
||||
respondTo | string | 'window' | Width that responsive object responds to. Can be 'window', 'slider' or 'min' (the smaller of the two).
|
||||
responsive | array | null | Array of objects [containing breakpoints and settings objects (see example)](#responsive-option-example). Enables settings at given `breakpoint`. Set `settings` to "unslick" instead of an object to disable slick at a given breakpoint.
|
||||
rows | int | 1 | Setting this to more than 1 initializes grid mode. Use slidesPerRow to set how many slides should be in each row.
|
||||
rtl | boolean | false | Change the slider's direction to become right-to-left
|
||||
slide | string | '' | Slide element query
|
||||
slidesPerRow | int | 1 | With grid mode initialized via the rows option, this sets how many slides are in each grid row.
|
||||
slidesToScroll | int | 1 | # of slides to scroll at a time
|
||||
slidesToShow | int | 1 | # of slides to show at a time
|
||||
speed | int | 300 | Transition speed
|
||||
swipe | boolean | true | Enables touch swipe
|
||||
swipeToSlide | boolean | false | Swipe to slide irrespective of slidesToScroll
|
||||
touchMove | boolean | true | Enables slide moving with touch
|
||||
touchThreshold | int | 5 | To advance slides, the user must swipe a length of (1/touchThreshold) * the width of the slider.
|
||||
useCSS | boolean | true | Enable/Disable CSS Transitions
|
||||
useTransform | boolean | true | Enable/Disable CSS Transforms
|
||||
variableWidth | boolean | false | Disables automatic slide width calculation
|
||||
vertical | boolean | false | Vertical slide direction
|
||||
verticalSwiping | boolean | false | Changes swipe direction to vertical
|
||||
waitForAnimate | boolean | true | Ignores requests to advance the slide while animating
|
||||
zIndex | number | 1000 | Set the zIndex values for slides, useful for IE9 and lower
|
||||
|
||||
##### Responsive Option Example
|
||||
The responsive option, and value, is quite unique and powerful.
|
||||
You can use it like so:
|
||||
|
||||
```javascript
|
||||
$(".slider").slick({
|
||||
|
||||
// normal options...
|
||||
infinite: false,
|
||||
|
||||
// the magic
|
||||
responsive: [{
|
||||
|
||||
breakpoint: 1024,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
infinite: true
|
||||
}
|
||||
|
||||
}, {
|
||||
|
||||
breakpoint: 600,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
dots: true
|
||||
}
|
||||
|
||||
}, {
|
||||
|
||||
breakpoint: 300,
|
||||
settings: "unslick" // destroys slick
|
||||
|
||||
}]
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
### Events
|
||||
|
||||
In slick 1.4, callback methods were deprecated and replaced with events. Use them before the initialization of slick as shown below:
|
||||
|
||||
```javascript
|
||||
// On swipe event
|
||||
$('.your-element').on('swipe', function(event, slick, direction){
|
||||
console.log(direction);
|
||||
// left
|
||||
});
|
||||
|
||||
// On edge hit
|
||||
$('.your-element').on('edge', function(event, slick, direction){
|
||||
console.log('edge was hit')
|
||||
});
|
||||
|
||||
// On before slide change
|
||||
$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){
|
||||
console.log(nextSlide);
|
||||
});
|
||||
```
|
||||
|
||||
Event | Params | Description
|
||||
------ | -------- | -----------
|
||||
afterChange | event, slick, currentSlide | After slide change callback
|
||||
beforeChange | event, slick, currentSlide, nextSlide | Before slide change callback
|
||||
breakpoint | event, slick, breakpoint | Fires after a breakpoint is hit
|
||||
destroy | event, slick | When slider is destroyed, or unslicked.
|
||||
edge | event, slick, direction | Fires when an edge is overscrolled in non-infinite mode.
|
||||
init | event, slick | When Slick initializes for the first time callback. Note that this event should be defined before initializing the slider.
|
||||
reInit | event, slick | Every time Slick (re-)initializes callback
|
||||
setPosition | event, slick | Every time Slick recalculates position
|
||||
swipe | event, slick, direction | Fires after swipe/drag
|
||||
lazyLoaded | event, slick, image, imageSource | Fires after image loads lazily
|
||||
lazyLoadError | event, slick, image, imageSource | Fires after image fails to load
|
||||
|
||||
|
||||
#### Methods
|
||||
|
||||
Methods are called on slick instances through the slick method itself in version 1.4, see below:
|
||||
|
||||
```javascript
|
||||
// Add a slide
|
||||
$('.your-element').slick('slickAdd',"<div></div>");
|
||||
|
||||
// Get the current slide
|
||||
var currentSlide = $('.your-element').slick('slickCurrentSlide');
|
||||
```
|
||||
|
||||
This new syntax allows you to call any internal slick method as well:
|
||||
|
||||
```javascript
|
||||
// Manually refresh positioning of slick
|
||||
$('.your-element').slick('setPosition');
|
||||
```
|
||||
|
||||
|
||||
Method | Argument | Description
|
||||
------ | -------- | -----------
|
||||
`slick` | options : object | Initializes Slick
|
||||
`unslick` | | Destroys Slick
|
||||
`slickNext` | | Triggers next slide
|
||||
`slickPrev` | | Triggers previous slide
|
||||
`slickPause` | | Pause Autoplay
|
||||
`slickPlay` | | Start Autoplay (_will also set `autoplay` option to `true`_)
|
||||
`slickGoTo` | index : int, dontAnimate : bool | Goes to slide by index, skipping animation if second parameter is set to true
|
||||
`slickCurrentSlide` | | Returns the current slide index
|
||||
`slickAdd` | element : html or DOM object, index: int, addBefore: bool | Add a slide. If an index is provided, will add at that index, or before if addBefore is set. If no index is provided, add to the end or to the beginning if addBefore is set. Accepts HTML String || Object
|
||||
`slickRemove` | index: int, removeBefore: bool | Remove slide by index. If removeBefore is set true, remove slide preceding index, or the first slide if no index is specified. If removeBefore is set to false, remove the slide following index, or the last slide if no index is set.
|
||||
`slickFilter` | filter : selector or function | Filters slides using jQuery .filter syntax
|
||||
`slickUnfilter` | | Removes applied filter
|
||||
`slickGetOption` | option : string(option name) | Gets an option value.
|
||||
`slickSetOption` | change an option, `refresh` is always `boolean` and will update UI changes...
|
||||
| `option, value, refresh` | change a [single `option`](https://github.com/kenwheeler/slick#settings) to given `value`; `refresh` is optional.
|
||||
| `"responsive", [{ breakpoint: n, settings: {} }, ... ], refresh` | change or add [whole sets of responsive options](#responsive-option-example)
|
||||
| `{ option: value, option: value, ... }, refresh` | change [multiple `option`s](https://github.com/kenwheeler/slick#settings) to corresponding `value`s.
|
||||
|
||||
|
||||
#### Example
|
||||
|
||||
Initialize with:
|
||||
|
||||
```javascript
|
||||
$(element).slick({
|
||||
dots: true,
|
||||
speed: 500
|
||||
});
|
||||
```
|
||||
|
||||
Change the speed with:
|
||||
|
||||
```javascript
|
||||
$(element).slick('slickSetOption', 'speed', 5000, true);
|
||||
```
|
||||
|
||||
Destroy with:
|
||||
|
||||
```javascript
|
||||
$(element).slick('unslick');
|
||||
```
|
||||
|
||||
|
||||
#### Sass Variables
|
||||
|
||||
Variable | Type | Default | Description
|
||||
------ | ---- | ------- | -----------
|
||||
$slick-font-path | string | "./fonts/" | Directory path for the slick icon font
|
||||
$slick-font-family | string | "slick" | Font-family for slick icon font
|
||||
$slick-loader-path | string | "./" | Directory path for the loader image
|
||||
$slick-arrow-color | color | white | Color of the left/right arrow icons
|
||||
$slick-dot-color | color | black | Color of the navigation dots
|
||||
$slick-dot-color-active | color | $slick-dot-color | Color of the active navigation dot
|
||||
$slick-prev-character | string | '\2190' | Unicode character code for the previous arrow icon
|
||||
$slick-next-character | string | '\2192' | Unicode character code for the next arrow icon
|
||||
$slick-dot-character | string | '\2022' | Unicode character code for the navigation dot icon
|
||||
$slick-dot-size | pixels | 6px | Size of the navigation dots
|
||||
|
||||
#### Browser support
|
||||
|
||||
Slick works on IE8+ in addition to other modern browsers such as Chrome, Firefox, and Safari.
|
||||
|
||||
#### Dependencies
|
||||
|
||||
jQuery 1.7
|
||||
|
||||
#### License
|
||||
|
||||
Copyright (c) 2017 Ken Wheeler
|
||||
|
||||
Licensed under the MIT license.
|
||||
|
||||
Free as in Bacon.
|
||||
32
lib/slick-1.8.1/slick-1.8.1/bower.json
Executable file
32
lib/slick-1.8.1/slick-1.8.1/bower.json
Executable file
@@ -0,0 +1,32 @@
|
||||
{
|
||||
"name": "slick-carousel",
|
||||
"main": [
|
||||
"slick/slick.js",
|
||||
"slick/slick.css",
|
||||
"slick/slick.less",
|
||||
"slick/slick.scss"
|
||||
],
|
||||
"homepage": "https://github.com/kenwheeler/slick",
|
||||
"authors": [
|
||||
"Ken Wheeler <ken_wheeler@me.com>"
|
||||
],
|
||||
"description": "the last carousel you'll ever need",
|
||||
"keywords": [
|
||||
"responsive",
|
||||
"carousel",
|
||||
"jquery"
|
||||
],
|
||||
"license": "MIT",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"tests",
|
||||
"package.json",
|
||||
"index.html"
|
||||
],
|
||||
"dependencies": {
|
||||
"jquery": ">=1.7"
|
||||
}
|
||||
}
|
||||
18
lib/slick-1.8.1/slick-1.8.1/component.json
Executable file
18
lib/slick-1.8.1/slick-1.8.1/component.json
Executable file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "slick",
|
||||
"repo": "kenwheeler/slick",
|
||||
"description": "the last carousel you'll ever need",
|
||||
"version": "1.8.0",
|
||||
"keywords": ["ui", "jquery", "carousel", "responsive", "slider"],
|
||||
"dependencies": {
|
||||
"component/jquery": "*"
|
||||
},
|
||||
"development": {},
|
||||
"scripts": {
|
||||
"slick/slick.js": "slick.js"
|
||||
},
|
||||
"styles": {
|
||||
"slick/slick.css": "slick.css",
|
||||
"slick/slick-theme.css": "slick-theme.css"
|
||||
}
|
||||
}
|
||||
373
lib/slick-1.8.1/slick-1.8.1/index.html
Executable file
373
lib/slick-1.8.1/slick-1.8.1/index.html
Executable file
@@ -0,0 +1,373 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Slick Playground</title>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" type="text/css" href="./slick/slick.css">
|
||||
<link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
|
||||
<style type="text/css">
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.slider {
|
||||
width: 50%;
|
||||
margin: 100px auto;
|
||||
}
|
||||
|
||||
.slick-slide {
|
||||
margin: 0px 20px;
|
||||
}
|
||||
|
||||
.slick-slide img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.slick-prev:before,
|
||||
.slick-next:before {
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
||||
.slick-slide {
|
||||
transition: all ease-in-out .3s;
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
.slick-active {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.slick-current {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section class="vertical-center-4 slider">
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=1">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=2">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=3">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=4">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=5">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=6">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=7">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=8">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=9">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=10">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="vertical-center-3 slider">
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=1">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=2">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=3">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=4">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=5">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=6">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=7">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=8">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=9">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=10">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="vertical-center-2 slider">
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=1">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=2">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=3">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=4">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=5">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=6">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=7">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=8">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=9">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=10">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="vertical-center slider">
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=1">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=2">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=3">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=4">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=5">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=6">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=7">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=8">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=9">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=10">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="vertical slider">
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=1">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=2">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=3">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=4">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=5">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=6">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=7">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=8">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=9">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x100?text=10">
|
||||
</div>
|
||||
</section>
|
||||
<section class="regular slider">
|
||||
<div>
|
||||
<img src="http://placehold.it/350x300?text=1">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x300?text=2">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x300?text=3">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x300?text=4">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x300?text=5">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x300?text=6">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="center slider">
|
||||
<div>
|
||||
<img src="http://placehold.it/350x300?text=1">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x300?text=2">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x300?text=3">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x300?text=4">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x300?text=5">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x300?text=6">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x300?text=7">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x300?text=8">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x300?text=9">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="variable slider">
|
||||
<div>
|
||||
<img src="http://placehold.it/350x300?text=1">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/200x300?text=2">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/100x300?text=3">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/200x300?text=4">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/350x300?text=5">
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://placehold.it/300x300?text=6">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="lazy slider" data-sizes="50vw">
|
||||
<div>
|
||||
<img data-lazy="http://placehold.it/350x300?text=1-350w" data-srcset="http://placehold.it/650x300?text=1-650w 650w, http://placehold.it/960x300?text=1-960w 960w" data-sizes="100vw">
|
||||
</div>
|
||||
<div>
|
||||
<img data-lazy="http://placehold.it/350x300?text=2-350w" data-srcset="http://placehold.it/650x300?text=2-650w 650w, http://placehold.it/960x300?text=2-960w 960w" data-sizes="100vw">
|
||||
</div>
|
||||
<div>
|
||||
<img data-lazy="http://placehold.it/350x300?text=3-350w" data-srcset="http://placehold.it/650x300?text=3-650w 650w, http://placehold.it/960x300?text=3-960w 960w" data-sizes="100vw">
|
||||
</div>
|
||||
<div>
|
||||
<img data-lazy="http://placehold.it/350x300?text=4-350w" data-srcset="http://placehold.it/650x300?text=4-650w 650w, http://placehold.it/960x300?text=4-960w 960w" data-sizes="100vw">
|
||||
</div>
|
||||
<div>
|
||||
<img data-lazy="http://placehold.it/350x300?text=5-350w" data-srcset="http://placehold.it/650x300?text=5-650w 650w, http://placehold.it/960x300?text=5-960w 960w" data-sizes="100vw">
|
||||
</div>
|
||||
<div>
|
||||
<!-- this slide should inherit the sizes attr from the parent slider -->
|
||||
<img data-lazy="http://placehold.it/350x300?text=6-350w" data-srcset="http://placehold.it/650x300?text=6-650w 650w, http://placehold.it/960x300?text=6-960w 960w">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
|
||||
<script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).on('ready', function() {
|
||||
$(".vertical-center-4").slick({
|
||||
dots: true,
|
||||
vertical: true,
|
||||
centerMode: true,
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 2
|
||||
});
|
||||
$(".vertical-center-3").slick({
|
||||
dots: true,
|
||||
vertical: true,
|
||||
centerMode: true,
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 3
|
||||
});
|
||||
$(".vertical-center-2").slick({
|
||||
dots: true,
|
||||
vertical: true,
|
||||
centerMode: true,
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 2
|
||||
});
|
||||
$(".vertical-center").slick({
|
||||
dots: true,
|
||||
vertical: true,
|
||||
centerMode: true,
|
||||
});
|
||||
$(".vertical").slick({
|
||||
dots: true,
|
||||
vertical: true,
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 3
|
||||
});
|
||||
$(".regular").slick({
|
||||
dots: true,
|
||||
infinite: true,
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 3
|
||||
});
|
||||
$(".center").slick({
|
||||
dots: true,
|
||||
infinite: true,
|
||||
centerMode: true,
|
||||
slidesToShow: 5,
|
||||
slidesToScroll: 3
|
||||
});
|
||||
$(".variable").slick({
|
||||
dots: true,
|
||||
infinite: true,
|
||||
variableWidth: true
|
||||
});
|
||||
$(".lazy").slick({
|
||||
lazyLoad: 'ondemand', // ondemand progressive anticipated
|
||||
infinite: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
50
lib/slick-1.8.1/slick-1.8.1/package.json
Executable file
50
lib/slick-1.8.1/slick-1.8.1/package.json
Executable file
@@ -0,0 +1,50 @@
|
||||
{
|
||||
"name": "slick-carousel",
|
||||
"version": "1.8.1",
|
||||
"description": "the last carousel you'll ever need",
|
||||
"main": "slick/slick.js",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/kenwheeler/slick.git"
|
||||
},
|
||||
"keywords": [
|
||||
"carousel",
|
||||
"slick",
|
||||
"responsive",
|
||||
"js",
|
||||
"slider"
|
||||
],
|
||||
"author": "Ken Wheeler <ken_wheeler@me.com>",
|
||||
"contributors": [
|
||||
{
|
||||
"name": "ken wheeler",
|
||||
"email": "ken_wheeler@me.com",
|
||||
"url": "http://kenwheeler.github.io/"
|
||||
},
|
||||
{
|
||||
"name": "simon goellner",
|
||||
"email": "simey.me@gmail.com",
|
||||
"url": "http://simey.me"
|
||||
},
|
||||
{
|
||||
"name": "ahmad el-alfy",
|
||||
"email": "ahmadalfy@gmail.com",
|
||||
"url": "http://www.alfy.me"
|
||||
},
|
||||
{
|
||||
"name": "leggomuhgreggo",
|
||||
"email": "gwestneat@gmail.com"
|
||||
},
|
||||
{
|
||||
"name": "ashley mcknight",
|
||||
"email": "ash@sharpteef.net"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/kenwheeler/slick/issues"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"jquery": ">=1.8.0"
|
||||
}
|
||||
}
|
||||
34
lib/slick-1.8.1/slick-1.8.1/slick.jquery.json
Executable file
34
lib/slick-1.8.1/slick-1.8.1/slick.jquery.json
Executable file
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"name": "slick",
|
||||
"title": "slick",
|
||||
"description": "A jQuery responsive touch carousel",
|
||||
"keywords": [
|
||||
"responsive",
|
||||
"slider",
|
||||
"carousel",
|
||||
"touch",
|
||||
"mobile"
|
||||
],
|
||||
"version": "1.8.0",
|
||||
"author": {
|
||||
"name": "Ken Wheeler",
|
||||
"url": "http://kenwheeler.github.io"
|
||||
},
|
||||
"maintainers": [{
|
||||
"name": "Ken Wheeler",
|
||||
"email": "dubmediagroup@gmail.com",
|
||||
"url": "http://www.dubmediagroup.com"
|
||||
}],
|
||||
"licenses": [{
|
||||
"type": "MIT",
|
||||
"url": "https://github.com/kenwheeler/slick/blob/master/LICENSE"
|
||||
}],
|
||||
"demo": "http://kenwheeler.github.io/slick/",
|
||||
"bugs": "https://github.com/kenwheeler/slick/issues",
|
||||
"homepage": "https://github.com/kenwheeler/slick/",
|
||||
"docs": "https://github.com/kenwheeler/slick/",
|
||||
"download": "https://github.com/kenwheeler/slick/archive/master.zip",
|
||||
"dependencies": {
|
||||
"jquery": ">=1.7"
|
||||
}
|
||||
}
|
||||
BIN
lib/slick-1.8.1/slick-1.8.1/slick/ajax-loader.gif
Executable file
BIN
lib/slick-1.8.1/slick-1.8.1/slick/ajax-loader.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
10
lib/slick-1.8.1/slick-1.8.1/slick/config.rb
Executable file
10
lib/slick-1.8.1/slick-1.8.1/slick/config.rb
Executable file
@@ -0,0 +1,10 @@
|
||||
css_dir = "."
|
||||
sass_dir = "."
|
||||
images_dir = "."
|
||||
fonts_dir = "fonts"
|
||||
relative_assets = true
|
||||
|
||||
output_style = :compact
|
||||
line_comments = false
|
||||
|
||||
preferred_syntax = :scss
|
||||
BIN
lib/slick-1.8.1/slick-1.8.1/slick/fonts/slick.eot
Executable file
BIN
lib/slick-1.8.1/slick-1.8.1/slick/fonts/slick.eot
Executable file
Binary file not shown.
14
lib/slick-1.8.1/slick-1.8.1/slick/fonts/slick.svg
Executable file
14
lib/slick-1.8.1/slick-1.8.1/slick/fonts/slick.svg
Executable file
@@ -0,0 +1,14 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>Generated by Fontastic.me</metadata>
|
||||
<defs>
|
||||
<font id="slick" horiz-adv-x="512">
|
||||
<font-face font-family="slick" units-per-em="512" ascent="480" descent="-32"/>
|
||||
<missing-glyph horiz-adv-x="512" />
|
||||
|
||||
<glyph unicode="→" d="M241 113l130 130c4 4 6 8 6 13 0 5-2 9-6 13l-130 130c-3 3-7 5-12 5-5 0-10-2-13-5l-29-30c-4-3-6-7-6-12 0-5 2-10 6-13l87-88-87-88c-4-3-6-8-6-13 0-5 2-9 6-12l29-30c3-3 8-5 13-5 5 0 9 2 12 5z m234 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
|
||||
<glyph unicode="←" d="M296 113l29 30c4 3 6 7 6 12 0 5-2 10-6 13l-87 88 87 88c4 3 6 8 6 13 0 5-2 9-6 12l-29 30c-3 3-8 5-13 5-5 0-9-2-12-5l-130-130c-4-4-6-8-6-13 0-5 2-9 6-13l130-130c3-3 7-5 12-5 5 0 10 2 13 5z m179 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
|
||||
<glyph unicode="•" d="M475 256c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
|
||||
<glyph unicode="a" d="M475 439l0-128c0-5-1-9-5-13-4-4-8-5-13-5l-128 0c-8 0-13 3-17 11-3 7-2 14 4 20l40 39c-28 26-62 39-100 39-20 0-39-4-57-11-18-8-33-18-46-32-14-13-24-28-32-46-7-18-11-37-11-57 0-20 4-39 11-57 8-18 18-33 32-46 13-14 28-24 46-32 18-7 37-11 57-11 23 0 44 5 64 15 20 9 38 23 51 42 2 1 4 3 7 3 3 0 5-1 7-3l39-39c2-2 3-3 3-6 0-2-1-4-2-6-21-25-46-45-76-59-29-14-60-20-93-20-30 0-58 5-85 17-27 12-51 27-70 47-20 19-35 43-47 70-12 27-17 55-17 85 0 30 5 58 17 85 12 27 27 51 47 70 19 20 43 35 70 47 27 12 55 17 85 17 28 0 55-5 81-15 26-11 50-26 70-45l37 37c6 6 12 7 20 4 8-4 11-9 11-17z"/>
|
||||
</font></defs></svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
BIN
lib/slick-1.8.1/slick-1.8.1/slick/fonts/slick.ttf
Executable file
BIN
lib/slick-1.8.1/slick-1.8.1/slick/fonts/slick.ttf
Executable file
Binary file not shown.
BIN
lib/slick-1.8.1/slick-1.8.1/slick/fonts/slick.woff
Executable file
BIN
lib/slick-1.8.1/slick-1.8.1/slick/fonts/slick.woff
Executable file
Binary file not shown.
204
lib/slick-1.8.1/slick-1.8.1/slick/slick-theme.css
Executable file
204
lib/slick-1.8.1/slick-1.8.1/slick/slick-theme.css
Executable file
@@ -0,0 +1,204 @@
|
||||
@charset 'UTF-8';
|
||||
/* Slider */
|
||||
.slick-loading .slick-list
|
||||
{
|
||||
background: #fff url('./ajax-loader.gif') center center no-repeat;
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
@font-face
|
||||
{
|
||||
font-family: 'slick';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
src: url('./fonts/slick.eot');
|
||||
src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
|
||||
}
|
||||
/* Arrows */
|
||||
.slick-prev,
|
||||
.slick-next
|
||||
{
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
||||
display: block;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 0;
|
||||
-webkit-transform: translate(0, -50%);
|
||||
-ms-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%);
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
color: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
.slick-prev:hover,
|
||||
.slick-prev:focus,
|
||||
.slick-next:hover,
|
||||
.slick-next:focus
|
||||
{
|
||||
color: transparent;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
.slick-prev:hover:before,
|
||||
.slick-prev:focus:before,
|
||||
.slick-next:hover:before,
|
||||
.slick-next:focus:before
|
||||
{
|
||||
opacity: 1;
|
||||
}
|
||||
.slick-prev.slick-disabled:before,
|
||||
.slick-next.slick-disabled:before
|
||||
{
|
||||
opacity: .25;
|
||||
}
|
||||
|
||||
.slick-prev:before,
|
||||
.slick-next:before
|
||||
{
|
||||
font-family: 'slick';
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
|
||||
opacity: .75;
|
||||
color: white;
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.slick-prev
|
||||
{
|
||||
left: -25px;
|
||||
}
|
||||
[dir='rtl'] .slick-prev
|
||||
{
|
||||
right: -25px;
|
||||
left: auto;
|
||||
}
|
||||
.slick-prev:before
|
||||
{
|
||||
content: '←';
|
||||
}
|
||||
[dir='rtl'] .slick-prev:before
|
||||
{
|
||||
content: '→';
|
||||
}
|
||||
|
||||
.slick-next
|
||||
{
|
||||
right: -25px;
|
||||
}
|
||||
[dir='rtl'] .slick-next
|
||||
{
|
||||
right: auto;
|
||||
left: -25px;
|
||||
}
|
||||
.slick-next:before
|
||||
{
|
||||
content: '→';
|
||||
}
|
||||
[dir='rtl'] .slick-next:before
|
||||
{
|
||||
content: '←';
|
||||
}
|
||||
|
||||
/* Dots */
|
||||
.slick-dotted.slick-slider
|
||||
{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.slick-dots
|
||||
{
|
||||
position: absolute;
|
||||
bottom: -25px;
|
||||
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
list-style: none;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
.slick-dots li
|
||||
{
|
||||
position: relative;
|
||||
|
||||
display: inline-block;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 0 5px;
|
||||
padding: 0;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
.slick-dots li button
|
||||
{
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
|
||||
display: block;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 5px;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
color: transparent;
|
||||
border: 0;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
.slick-dots li button:hover,
|
||||
.slick-dots li button:focus
|
||||
{
|
||||
outline: none;
|
||||
}
|
||||
.slick-dots li button:hover:before,
|
||||
.slick-dots li button:focus:before
|
||||
{
|
||||
opacity: 1;
|
||||
}
|
||||
.slick-dots li button:before
|
||||
{
|
||||
font-family: 'slick';
|
||||
font-size: 6px;
|
||||
line-height: 20px;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
content: '•';
|
||||
text-align: center;
|
||||
|
||||
opacity: .25;
|
||||
color: black;
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
.slick-dots li.slick-active button:before
|
||||
{
|
||||
opacity: .75;
|
||||
color: black;
|
||||
}
|
||||
168
lib/slick-1.8.1/slick-1.8.1/slick/slick-theme.less
Executable file
168
lib/slick-1.8.1/slick-1.8.1/slick/slick-theme.less
Executable file
@@ -0,0 +1,168 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
// Default Variables
|
||||
|
||||
@slick-font-path: "./fonts/";
|
||||
@slick-font-family: "slick";
|
||||
@slick-loader-path: "./";
|
||||
@slick-arrow-color: white;
|
||||
@slick-dot-color: black;
|
||||
@slick-dot-color-active: @slick-dot-color;
|
||||
@slick-prev-character: "←";
|
||||
@slick-next-character: "→";
|
||||
@slick-dot-character: "•";
|
||||
@slick-dot-size: 6px;
|
||||
@slick-opacity-default: 0.75;
|
||||
@slick-opacity-on-hover: 1;
|
||||
@slick-opacity-not-active: 0.25;
|
||||
|
||||
/* Slider */
|
||||
.slick-loading .slick-list{
|
||||
background: #fff url('@{slick-loader-path}ajax-loader.gif') center center no-repeat;
|
||||
}
|
||||
|
||||
/* Arrows */
|
||||
.slick-prev,
|
||||
.slick-next {
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
line-height: 0px;
|
||||
font-size: 0px;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
color: transparent;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(0, -50%);
|
||||
-ms-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%);
|
||||
padding: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
&:hover, &:focus {
|
||||
outline: none;
|
||||
background: transparent;
|
||||
color: transparent;
|
||||
&:before {
|
||||
opacity: @slick-opacity-on-hover;
|
||||
}
|
||||
}
|
||||
&.slick-disabled:before {
|
||||
opacity: @slick-opacity-not-active;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-prev:before, .slick-next:before {
|
||||
font-family: @slick-font-family;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
color: @slick-arrow-color;
|
||||
opacity: @slick-opacity-default;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
& when ( @slick-font-family = 'slick' ) {
|
||||
/* Icons */
|
||||
@font-face {
|
||||
font-family: 'slick';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
src: url('@{slick-font-path}slick.eot');
|
||||
src: url('@{slick-font-path}slick.eot?#iefix') format('embedded-opentype'), url('@{slick-font-path}slick.woff') format('woff'), url('@{slick-font-path}slick.ttf') format('truetype'), url('@{slick-font-path}slick.svg#slick') format('svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slick-prev {
|
||||
left: -25px;
|
||||
[dir="rtl"] & {
|
||||
left: auto;
|
||||
right: -25px;
|
||||
}
|
||||
&:before {
|
||||
content: @slick-prev-character;
|
||||
[dir="rtl"] & {
|
||||
content: @slick-next-character;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
right: -25px;
|
||||
[dir="rtl"] & {
|
||||
left: -25px;
|
||||
right: auto;
|
||||
}
|
||||
&:before {
|
||||
content: @slick-next-character;
|
||||
[dir="rtl"] & {
|
||||
content: @slick-prev-character;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Dots */
|
||||
|
||||
.slick-dotted .slick-slider {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.slick-dots {
|
||||
position: absolute;
|
||||
bottom: -25px;
|
||||
list-style: none;
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin: 0 5px;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
display: block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
outline: none;
|
||||
line-height: 0px;
|
||||
font-size: 0px;
|
||||
color: transparent;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
&:hover, &:focus {
|
||||
outline: none;
|
||||
&:before {
|
||||
opacity: @slick-opacity-on-hover;
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: @slick-dot-character;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-family: @slick-font-family;
|
||||
font-size: @slick-dot-size;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
color: @slick-dot-color;
|
||||
opacity: @slick-opacity-not-active;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
&.slick-active button:before {
|
||||
color: @slick-dot-color-active;
|
||||
opacity: @slick-opacity-default;
|
||||
}
|
||||
}
|
||||
}
|
||||
194
lib/slick-1.8.1/slick-1.8.1/slick/slick-theme.scss
Executable file
194
lib/slick-1.8.1/slick-1.8.1/slick/slick-theme.scss
Executable file
@@ -0,0 +1,194 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
// Default Variables
|
||||
|
||||
// Slick icon entity codes outputs the following
|
||||
// "\2190" outputs ascii character "←"
|
||||
// "\2192" outputs ascii character "→"
|
||||
// "\2022" outputs ascii character "•"
|
||||
|
||||
$slick-font-path: "./fonts/" !default;
|
||||
$slick-font-family: "slick" !default;
|
||||
$slick-loader-path: "./" !default;
|
||||
$slick-arrow-color: white !default;
|
||||
$slick-dot-color: black !default;
|
||||
$slick-dot-color-active: $slick-dot-color !default;
|
||||
$slick-prev-character: "\2190" !default;
|
||||
$slick-next-character: "\2192" !default;
|
||||
$slick-dot-character: "\2022" !default;
|
||||
$slick-dot-size: 6px !default;
|
||||
$slick-opacity-default: 0.75 !default;
|
||||
$slick-opacity-on-hover: 1 !default;
|
||||
$slick-opacity-not-active: 0.25 !default;
|
||||
|
||||
@function slick-image-url($url) {
|
||||
@if function-exists(image-url) {
|
||||
@return image-url($url);
|
||||
}
|
||||
@else {
|
||||
@return url($slick-loader-path + $url);
|
||||
}
|
||||
}
|
||||
|
||||
@function slick-font-url($url) {
|
||||
@if function-exists(font-url) {
|
||||
@return font-url($url);
|
||||
}
|
||||
@else {
|
||||
@return url($slick-font-path + $url);
|
||||
}
|
||||
}
|
||||
|
||||
/* Slider */
|
||||
|
||||
.slick-list {
|
||||
.slick-loading & {
|
||||
background: #fff slick-image-url("ajax-loader.gif") center center no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
@if $slick-font-family == "slick" {
|
||||
@font-face {
|
||||
font-family: "slick";
|
||||
src: slick-font-url("slick.eot");
|
||||
src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
/* Arrows */
|
||||
|
||||
.slick-prev,
|
||||
.slick-next {
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
line-height: 0px;
|
||||
font-size: 0px;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
color: transparent;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(0, -50%);
|
||||
-ms-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%);
|
||||
padding: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
&:hover, &:focus {
|
||||
outline: none;
|
||||
background: transparent;
|
||||
color: transparent;
|
||||
&:before {
|
||||
opacity: $slick-opacity-on-hover;
|
||||
}
|
||||
}
|
||||
&.slick-disabled:before {
|
||||
opacity: $slick-opacity-not-active;
|
||||
}
|
||||
&:before {
|
||||
font-family: $slick-font-family;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
color: $slick-arrow-color;
|
||||
opacity: $slick-opacity-default;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-prev {
|
||||
left: -25px;
|
||||
[dir="rtl"] & {
|
||||
left: auto;
|
||||
right: -25px;
|
||||
}
|
||||
&:before {
|
||||
content: $slick-prev-character;
|
||||
[dir="rtl"] & {
|
||||
content: $slick-next-character;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
right: -25px;
|
||||
[dir="rtl"] & {
|
||||
left: -25px;
|
||||
right: auto;
|
||||
}
|
||||
&:before {
|
||||
content: $slick-next-character;
|
||||
[dir="rtl"] & {
|
||||
content: $slick-prev-character;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Dots */
|
||||
|
||||
.slick-dotted.slick-slider {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.slick-dots {
|
||||
position: absolute;
|
||||
bottom: -25px;
|
||||
list-style: none;
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin: 0 5px;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
display: block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
outline: none;
|
||||
line-height: 0px;
|
||||
font-size: 0px;
|
||||
color: transparent;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
&:hover, &:focus {
|
||||
outline: none;
|
||||
&:before {
|
||||
opacity: $slick-opacity-on-hover;
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: $slick-dot-character;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-family: $slick-font-family;
|
||||
font-size: $slick-dot-size;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
color: $slick-dot-color;
|
||||
opacity: $slick-opacity-not-active;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
&.slick-active button:before {
|
||||
color: $slick-dot-color-active;
|
||||
opacity: $slick-opacity-default;
|
||||
}
|
||||
}
|
||||
}
|
||||
119
lib/slick-1.8.1/slick-1.8.1/slick/slick.css
Executable file
119
lib/slick-1.8.1/slick-1.8.1/slick/slick.css
Executable file
@@ -0,0 +1,119 @@
|
||||
/* Slider */
|
||||
.slick-slider
|
||||
{
|
||||
position: relative;
|
||||
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
-webkit-touch-callout: none;
|
||||
-khtml-user-select: none;
|
||||
-ms-touch-action: pan-y;
|
||||
touch-action: pan-y;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.slick-list
|
||||
{
|
||||
position: relative;
|
||||
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.slick-list:focus
|
||||
{
|
||||
outline: none;
|
||||
}
|
||||
.slick-list.dragging
|
||||
{
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
}
|
||||
|
||||
.slick-slider .slick-track,
|
||||
.slick-slider .slick-list
|
||||
{
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
-o-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.slick-track
|
||||
{
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.slick-track:before,
|
||||
.slick-track:after
|
||||
{
|
||||
display: table;
|
||||
|
||||
content: '';
|
||||
}
|
||||
.slick-track:after
|
||||
{
|
||||
clear: both;
|
||||
}
|
||||
.slick-loading .slick-track
|
||||
{
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.slick-slide
|
||||
{
|
||||
display: none;
|
||||
float: left;
|
||||
|
||||
height: 100%;
|
||||
min-height: 1px;
|
||||
}
|
||||
[dir='rtl'] .slick-slide
|
||||
{
|
||||
float: right;
|
||||
}
|
||||
.slick-slide img
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
.slick-slide.slick-loading img
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
.slick-slide.dragging img
|
||||
{
|
||||
pointer-events: none;
|
||||
}
|
||||
.slick-initialized .slick-slide
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
.slick-loading .slick-slide
|
||||
{
|
||||
visibility: hidden;
|
||||
}
|
||||
.slick-vertical .slick-slide
|
||||
{
|
||||
display: block;
|
||||
|
||||
height: auto;
|
||||
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.slick-arrow.slick-hidden {
|
||||
display: none;
|
||||
}
|
||||
3011
lib/slick-1.8.1/slick-1.8.1/slick/slick.js
Executable file
3011
lib/slick-1.8.1/slick-1.8.1/slick/slick.js
Executable file
File diff suppressed because it is too large
Load Diff
100
lib/slick-1.8.1/slick-1.8.1/slick/slick.less
Executable file
100
lib/slick-1.8.1/slick-1.8.1/slick/slick.less
Executable file
@@ -0,0 +1,100 @@
|
||||
/* Slider */
|
||||
|
||||
.slick-slider {
|
||||
position: relative;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-ms-touch-action: pan-y;
|
||||
touch-action: pan-y;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.slick-list {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&.dragging {
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
}
|
||||
}
|
||||
.slick-slider .slick-track,
|
||||
.slick-slider .slick-list {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
-o-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.slick-track {
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.slick-loading & {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
.slick-slide {
|
||||
float: left;
|
||||
height: 100%;
|
||||
min-height: 1px;
|
||||
[dir="rtl"] & {
|
||||
float: right;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
&.slick-loading img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
display: none;
|
||||
|
||||
&.dragging img {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.slick-initialized & {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.slick-loading & {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.slick-vertical & {
|
||||
display: block;
|
||||
height: auto;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
.slick-arrow.slick-hidden {
|
||||
display: none;
|
||||
}
|
||||
1
lib/slick-1.8.1/slick-1.8.1/slick/slick.min.js
vendored
Executable file
1
lib/slick-1.8.1/slick-1.8.1/slick/slick.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
100
lib/slick-1.8.1/slick-1.8.1/slick/slick.scss
Executable file
100
lib/slick-1.8.1/slick-1.8.1/slick/slick.scss
Executable file
@@ -0,0 +1,100 @@
|
||||
/* Slider */
|
||||
|
||||
.slick-slider {
|
||||
position: relative;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-ms-touch-action: pan-y;
|
||||
touch-action: pan-y;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.slick-list {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&.dragging {
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
}
|
||||
}
|
||||
.slick-slider .slick-track,
|
||||
.slick-slider .slick-list {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
-o-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.slick-track {
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.slick-loading & {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
.slick-slide {
|
||||
float: left;
|
||||
height: 100%;
|
||||
min-height: 1px;
|
||||
[dir="rtl"] & {
|
||||
float: right;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
&.slick-loading img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
display: none;
|
||||
|
||||
&.dragging img {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.slick-initialized & {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.slick-loading & {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.slick-vertical & {
|
||||
display: block;
|
||||
height: auto;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
.slick-arrow.slick-hidden {
|
||||
display: none;
|
||||
}
|
||||
34
lib/slick-1.8.1/slick.jquery.json
Executable file
34
lib/slick-1.8.1/slick.jquery.json
Executable file
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"name": "slick",
|
||||
"title": "slick",
|
||||
"description": "A jQuery responsive touch carousel",
|
||||
"keywords": [
|
||||
"responsive",
|
||||
"slider",
|
||||
"carousel",
|
||||
"touch",
|
||||
"mobile"
|
||||
],
|
||||
"version": "1.8.0",
|
||||
"author": {
|
||||
"name": "Ken Wheeler",
|
||||
"url": "http://kenwheeler.github.io"
|
||||
},
|
||||
"maintainers": [{
|
||||
"name": "Ken Wheeler",
|
||||
"email": "dubmediagroup@gmail.com",
|
||||
"url": "http://www.dubmediagroup.com"
|
||||
}],
|
||||
"licenses": [{
|
||||
"type": "MIT",
|
||||
"url": "https://github.com/kenwheeler/slick/blob/master/LICENSE"
|
||||
}],
|
||||
"demo": "http://kenwheeler.github.io/slick/",
|
||||
"bugs": "https://github.com/kenwheeler/slick/issues",
|
||||
"homepage": "https://github.com/kenwheeler/slick/",
|
||||
"docs": "https://github.com/kenwheeler/slick/",
|
||||
"download": "https://github.com/kenwheeler/slick/archive/master.zip",
|
||||
"dependencies": {
|
||||
"jquery": ">=1.7"
|
||||
}
|
||||
}
|
||||
BIN
lib/slick-1.8.1/slick/ajax-loader.gif
Executable file
BIN
lib/slick-1.8.1/slick/ajax-loader.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
10
lib/slick-1.8.1/slick/config.rb
Executable file
10
lib/slick-1.8.1/slick/config.rb
Executable file
@@ -0,0 +1,10 @@
|
||||
css_dir = "."
|
||||
sass_dir = "."
|
||||
images_dir = "."
|
||||
fonts_dir = "fonts"
|
||||
relative_assets = true
|
||||
|
||||
output_style = :compact
|
||||
line_comments = false
|
||||
|
||||
preferred_syntax = :scss
|
||||
BIN
lib/slick-1.8.1/slick/fonts/slick.eot
Executable file
BIN
lib/slick-1.8.1/slick/fonts/slick.eot
Executable file
Binary file not shown.
14
lib/slick-1.8.1/slick/fonts/slick.svg
Executable file
14
lib/slick-1.8.1/slick/fonts/slick.svg
Executable file
@@ -0,0 +1,14 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>Generated by Fontastic.me</metadata>
|
||||
<defs>
|
||||
<font id="slick" horiz-adv-x="512">
|
||||
<font-face font-family="slick" units-per-em="512" ascent="480" descent="-32"/>
|
||||
<missing-glyph horiz-adv-x="512" />
|
||||
|
||||
<glyph unicode="→" d="M241 113l130 130c4 4 6 8 6 13 0 5-2 9-6 13l-130 130c-3 3-7 5-12 5-5 0-10-2-13-5l-29-30c-4-3-6-7-6-12 0-5 2-10 6-13l87-88-87-88c-4-3-6-8-6-13 0-5 2-9 6-12l29-30c3-3 8-5 13-5 5 0 9 2 12 5z m234 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
|
||||
<glyph unicode="←" d="M296 113l29 30c4 3 6 7 6 12 0 5-2 10-6 13l-87 88 87 88c4 3 6 8 6 13 0 5-2 9-6 12l-29 30c-3 3-8 5-13 5-5 0-9-2-12-5l-130-130c-4-4-6-8-6-13 0-5 2-9 6-13l130-130c3-3 7-5 12-5 5 0 10 2 13 5z m179 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
|
||||
<glyph unicode="•" d="M475 256c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
|
||||
<glyph unicode="a" d="M475 439l0-128c0-5-1-9-5-13-4-4-8-5-13-5l-128 0c-8 0-13 3-17 11-3 7-2 14 4 20l40 39c-28 26-62 39-100 39-20 0-39-4-57-11-18-8-33-18-46-32-14-13-24-28-32-46-7-18-11-37-11-57 0-20 4-39 11-57 8-18 18-33 32-46 13-14 28-24 46-32 18-7 37-11 57-11 23 0 44 5 64 15 20 9 38 23 51 42 2 1 4 3 7 3 3 0 5-1 7-3l39-39c2-2 3-3 3-6 0-2-1-4-2-6-21-25-46-45-76-59-29-14-60-20-93-20-30 0-58 5-85 17-27 12-51 27-70 47-20 19-35 43-47 70-12 27-17 55-17 85 0 30 5 58 17 85 12 27 27 51 47 70 19 20 43 35 70 47 27 12 55 17 85 17 28 0 55-5 81-15 26-11 50-26 70-45l37 37c6 6 12 7 20 4 8-4 11-9 11-17z"/>
|
||||
</font></defs></svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
BIN
lib/slick-1.8.1/slick/fonts/slick.ttf
Executable file
BIN
lib/slick-1.8.1/slick/fonts/slick.ttf
Executable file
Binary file not shown.
BIN
lib/slick-1.8.1/slick/fonts/slick.woff
Executable file
BIN
lib/slick-1.8.1/slick/fonts/slick.woff
Executable file
Binary file not shown.
204
lib/slick-1.8.1/slick/slick-theme.css
Executable file
204
lib/slick-1.8.1/slick/slick-theme.css
Executable file
@@ -0,0 +1,204 @@
|
||||
@charset 'UTF-8';
|
||||
/* Slider */
|
||||
.slick-loading .slick-list
|
||||
{
|
||||
background: #fff url('./ajax-loader.gif') center center no-repeat;
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
@font-face
|
||||
{
|
||||
font-family: 'slick';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
src: url('./fonts/slick.eot');
|
||||
src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
|
||||
}
|
||||
/* Arrows */
|
||||
.slick-prev,
|
||||
.slick-next
|
||||
{
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
||||
display: block;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 0;
|
||||
-webkit-transform: translate(0, -50%);
|
||||
-ms-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%);
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
color: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
.slick-prev:hover,
|
||||
.slick-prev:focus,
|
||||
.slick-next:hover,
|
||||
.slick-next:focus
|
||||
{
|
||||
color: transparent;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
.slick-prev:hover:before,
|
||||
.slick-prev:focus:before,
|
||||
.slick-next:hover:before,
|
||||
.slick-next:focus:before
|
||||
{
|
||||
opacity: 1;
|
||||
}
|
||||
.slick-prev.slick-disabled:before,
|
||||
.slick-next.slick-disabled:before
|
||||
{
|
||||
opacity: .25;
|
||||
}
|
||||
|
||||
.slick-prev:before,
|
||||
.slick-next:before
|
||||
{
|
||||
font-family: 'slick';
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
|
||||
opacity: .75;
|
||||
color: white;
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.slick-prev
|
||||
{
|
||||
left: -25px;
|
||||
}
|
||||
[dir='rtl'] .slick-prev
|
||||
{
|
||||
right: -25px;
|
||||
left: auto;
|
||||
}
|
||||
.slick-prev:before
|
||||
{
|
||||
content: '←';
|
||||
}
|
||||
[dir='rtl'] .slick-prev:before
|
||||
{
|
||||
content: '→';
|
||||
}
|
||||
|
||||
.slick-next
|
||||
{
|
||||
right: -25px;
|
||||
}
|
||||
[dir='rtl'] .slick-next
|
||||
{
|
||||
right: auto;
|
||||
left: -25px;
|
||||
}
|
||||
.slick-next:before
|
||||
{
|
||||
content: '→';
|
||||
}
|
||||
[dir='rtl'] .slick-next:before
|
||||
{
|
||||
content: '←';
|
||||
}
|
||||
|
||||
/* Dots */
|
||||
.slick-dotted.slick-slider
|
||||
{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.slick-dots
|
||||
{
|
||||
position: absolute;
|
||||
bottom: -25px;
|
||||
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
list-style: none;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
.slick-dots li
|
||||
{
|
||||
position: relative;
|
||||
|
||||
display: inline-block;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 0 5px;
|
||||
padding: 0;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
.slick-dots li button
|
||||
{
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
|
||||
display: block;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 5px;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
color: transparent;
|
||||
border: 0;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
.slick-dots li button:hover,
|
||||
.slick-dots li button:focus
|
||||
{
|
||||
outline: none;
|
||||
}
|
||||
.slick-dots li button:hover:before,
|
||||
.slick-dots li button:focus:before
|
||||
{
|
||||
opacity: 1;
|
||||
}
|
||||
.slick-dots li button:before
|
||||
{
|
||||
font-family: 'slick';
|
||||
font-size: 6px;
|
||||
line-height: 20px;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
content: '•';
|
||||
text-align: center;
|
||||
|
||||
opacity: .25;
|
||||
color: black;
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
.slick-dots li.slick-active button:before
|
||||
{
|
||||
opacity: .75;
|
||||
color: black;
|
||||
}
|
||||
168
lib/slick-1.8.1/slick/slick-theme.less
Executable file
168
lib/slick-1.8.1/slick/slick-theme.less
Executable file
@@ -0,0 +1,168 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
// Default Variables
|
||||
|
||||
@slick-font-path: "./fonts/";
|
||||
@slick-font-family: "slick";
|
||||
@slick-loader-path: "./";
|
||||
@slick-arrow-color: white;
|
||||
@slick-dot-color: black;
|
||||
@slick-dot-color-active: @slick-dot-color;
|
||||
@slick-prev-character: "←";
|
||||
@slick-next-character: "→";
|
||||
@slick-dot-character: "•";
|
||||
@slick-dot-size: 6px;
|
||||
@slick-opacity-default: 0.75;
|
||||
@slick-opacity-on-hover: 1;
|
||||
@slick-opacity-not-active: 0.25;
|
||||
|
||||
/* Slider */
|
||||
.slick-loading .slick-list{
|
||||
background: #fff url('@{slick-loader-path}ajax-loader.gif') center center no-repeat;
|
||||
}
|
||||
|
||||
/* Arrows */
|
||||
.slick-prev,
|
||||
.slick-next {
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
line-height: 0px;
|
||||
font-size: 0px;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
color: transparent;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(0, -50%);
|
||||
-ms-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%);
|
||||
padding: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
&:hover, &:focus {
|
||||
outline: none;
|
||||
background: transparent;
|
||||
color: transparent;
|
||||
&:before {
|
||||
opacity: @slick-opacity-on-hover;
|
||||
}
|
||||
}
|
||||
&.slick-disabled:before {
|
||||
opacity: @slick-opacity-not-active;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-prev:before, .slick-next:before {
|
||||
font-family: @slick-font-family;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
color: @slick-arrow-color;
|
||||
opacity: @slick-opacity-default;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
& when ( @slick-font-family = 'slick' ) {
|
||||
/* Icons */
|
||||
@font-face {
|
||||
font-family: 'slick';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
src: url('@{slick-font-path}slick.eot');
|
||||
src: url('@{slick-font-path}slick.eot?#iefix') format('embedded-opentype'), url('@{slick-font-path}slick.woff') format('woff'), url('@{slick-font-path}slick.ttf') format('truetype'), url('@{slick-font-path}slick.svg#slick') format('svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slick-prev {
|
||||
left: -25px;
|
||||
[dir="rtl"] & {
|
||||
left: auto;
|
||||
right: -25px;
|
||||
}
|
||||
&:before {
|
||||
content: @slick-prev-character;
|
||||
[dir="rtl"] & {
|
||||
content: @slick-next-character;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
right: -25px;
|
||||
[dir="rtl"] & {
|
||||
left: -25px;
|
||||
right: auto;
|
||||
}
|
||||
&:before {
|
||||
content: @slick-next-character;
|
||||
[dir="rtl"] & {
|
||||
content: @slick-prev-character;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Dots */
|
||||
|
||||
.slick-dotted .slick-slider {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.slick-dots {
|
||||
position: absolute;
|
||||
bottom: -25px;
|
||||
list-style: none;
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin: 0 5px;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
display: block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
outline: none;
|
||||
line-height: 0px;
|
||||
font-size: 0px;
|
||||
color: transparent;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
&:hover, &:focus {
|
||||
outline: none;
|
||||
&:before {
|
||||
opacity: @slick-opacity-on-hover;
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: @slick-dot-character;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-family: @slick-font-family;
|
||||
font-size: @slick-dot-size;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
color: @slick-dot-color;
|
||||
opacity: @slick-opacity-not-active;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
&.slick-active button:before {
|
||||
color: @slick-dot-color-active;
|
||||
opacity: @slick-opacity-default;
|
||||
}
|
||||
}
|
||||
}
|
||||
194
lib/slick-1.8.1/slick/slick-theme.scss
Executable file
194
lib/slick-1.8.1/slick/slick-theme.scss
Executable file
@@ -0,0 +1,194 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
// Default Variables
|
||||
|
||||
// Slick icon entity codes outputs the following
|
||||
// "\2190" outputs ascii character "←"
|
||||
// "\2192" outputs ascii character "→"
|
||||
// "\2022" outputs ascii character "•"
|
||||
|
||||
$slick-font-path: "./fonts/" !default;
|
||||
$slick-font-family: "slick" !default;
|
||||
$slick-loader-path: "./" !default;
|
||||
$slick-arrow-color: white !default;
|
||||
$slick-dot-color: black !default;
|
||||
$slick-dot-color-active: $slick-dot-color !default;
|
||||
$slick-prev-character: "\2190" !default;
|
||||
$slick-next-character: "\2192" !default;
|
||||
$slick-dot-character: "\2022" !default;
|
||||
$slick-dot-size: 6px !default;
|
||||
$slick-opacity-default: 0.75 !default;
|
||||
$slick-opacity-on-hover: 1 !default;
|
||||
$slick-opacity-not-active: 0.25 !default;
|
||||
|
||||
@function slick-image-url($url) {
|
||||
@if function-exists(image-url) {
|
||||
@return image-url($url);
|
||||
}
|
||||
@else {
|
||||
@return url($slick-loader-path + $url);
|
||||
}
|
||||
}
|
||||
|
||||
@function slick-font-url($url) {
|
||||
@if function-exists(font-url) {
|
||||
@return font-url($url);
|
||||
}
|
||||
@else {
|
||||
@return url($slick-font-path + $url);
|
||||
}
|
||||
}
|
||||
|
||||
/* Slider */
|
||||
|
||||
.slick-list {
|
||||
.slick-loading & {
|
||||
background: #fff slick-image-url("ajax-loader.gif") center center no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
@if $slick-font-family == "slick" {
|
||||
@font-face {
|
||||
font-family: "slick";
|
||||
src: slick-font-url("slick.eot");
|
||||
src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
/* Arrows */
|
||||
|
||||
.slick-prev,
|
||||
.slick-next {
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
line-height: 0px;
|
||||
font-size: 0px;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
color: transparent;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(0, -50%);
|
||||
-ms-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%);
|
||||
padding: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
&:hover, &:focus {
|
||||
outline: none;
|
||||
background: transparent;
|
||||
color: transparent;
|
||||
&:before {
|
||||
opacity: $slick-opacity-on-hover;
|
||||
}
|
||||
}
|
||||
&.slick-disabled:before {
|
||||
opacity: $slick-opacity-not-active;
|
||||
}
|
||||
&:before {
|
||||
font-family: $slick-font-family;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
color: $slick-arrow-color;
|
||||
opacity: $slick-opacity-default;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-prev {
|
||||
left: -25px;
|
||||
[dir="rtl"] & {
|
||||
left: auto;
|
||||
right: -25px;
|
||||
}
|
||||
&:before {
|
||||
content: $slick-prev-character;
|
||||
[dir="rtl"] & {
|
||||
content: $slick-next-character;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
right: -25px;
|
||||
[dir="rtl"] & {
|
||||
left: -25px;
|
||||
right: auto;
|
||||
}
|
||||
&:before {
|
||||
content: $slick-next-character;
|
||||
[dir="rtl"] & {
|
||||
content: $slick-prev-character;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Dots */
|
||||
|
||||
.slick-dotted.slick-slider {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.slick-dots {
|
||||
position: absolute;
|
||||
bottom: -25px;
|
||||
list-style: none;
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin: 0 5px;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
display: block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
outline: none;
|
||||
line-height: 0px;
|
||||
font-size: 0px;
|
||||
color: transparent;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
&:hover, &:focus {
|
||||
outline: none;
|
||||
&:before {
|
||||
opacity: $slick-opacity-on-hover;
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: $slick-dot-character;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-family: $slick-font-family;
|
||||
font-size: $slick-dot-size;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
color: $slick-dot-color;
|
||||
opacity: $slick-opacity-not-active;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
&.slick-active button:before {
|
||||
color: $slick-dot-color-active;
|
||||
opacity: $slick-opacity-default;
|
||||
}
|
||||
}
|
||||
}
|
||||
119
lib/slick-1.8.1/slick/slick.css
Executable file
119
lib/slick-1.8.1/slick/slick.css
Executable file
@@ -0,0 +1,119 @@
|
||||
/* Slider */
|
||||
.slick-slider
|
||||
{
|
||||
position: relative;
|
||||
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
-webkit-touch-callout: none;
|
||||
-khtml-user-select: none;
|
||||
-ms-touch-action: pan-y;
|
||||
touch-action: pan-y;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.slick-list
|
||||
{
|
||||
position: relative;
|
||||
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.slick-list:focus
|
||||
{
|
||||
outline: none;
|
||||
}
|
||||
.slick-list.dragging
|
||||
{
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
}
|
||||
|
||||
.slick-slider .slick-track,
|
||||
.slick-slider .slick-list
|
||||
{
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
-o-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.slick-track
|
||||
{
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.slick-track:before,
|
||||
.slick-track:after
|
||||
{
|
||||
display: table;
|
||||
|
||||
content: '';
|
||||
}
|
||||
.slick-track:after
|
||||
{
|
||||
clear: both;
|
||||
}
|
||||
.slick-loading .slick-track
|
||||
{
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.slick-slide
|
||||
{
|
||||
display: none;
|
||||
float: left;
|
||||
|
||||
height: 100%;
|
||||
min-height: 1px;
|
||||
}
|
||||
[dir='rtl'] .slick-slide
|
||||
{
|
||||
float: right;
|
||||
}
|
||||
.slick-slide img
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
.slick-slide.slick-loading img
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
.slick-slide.dragging img
|
||||
{
|
||||
pointer-events: none;
|
||||
}
|
||||
.slick-initialized .slick-slide
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
.slick-loading .slick-slide
|
||||
{
|
||||
visibility: hidden;
|
||||
}
|
||||
.slick-vertical .slick-slide
|
||||
{
|
||||
display: block;
|
||||
|
||||
height: auto;
|
||||
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.slick-arrow.slick-hidden {
|
||||
display: none;
|
||||
}
|
||||
3011
lib/slick-1.8.1/slick/slick.js
Executable file
3011
lib/slick-1.8.1/slick/slick.js
Executable file
File diff suppressed because it is too large
Load Diff
100
lib/slick-1.8.1/slick/slick.less
Executable file
100
lib/slick-1.8.1/slick/slick.less
Executable file
@@ -0,0 +1,100 @@
|
||||
/* Slider */
|
||||
|
||||
.slick-slider {
|
||||
position: relative;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-ms-touch-action: pan-y;
|
||||
touch-action: pan-y;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.slick-list {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&.dragging {
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
}
|
||||
}
|
||||
.slick-slider .slick-track,
|
||||
.slick-slider .slick-list {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
-o-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.slick-track {
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.slick-loading & {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
.slick-slide {
|
||||
float: left;
|
||||
height: 100%;
|
||||
min-height: 1px;
|
||||
[dir="rtl"] & {
|
||||
float: right;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
&.slick-loading img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
display: none;
|
||||
|
||||
&.dragging img {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.slick-initialized & {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.slick-loading & {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.slick-vertical & {
|
||||
display: block;
|
||||
height: auto;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
.slick-arrow.slick-hidden {
|
||||
display: none;
|
||||
}
|
||||
1
lib/slick-1.8.1/slick/slick.min.js
vendored
Executable file
1
lib/slick-1.8.1/slick/slick.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
100
lib/slick-1.8.1/slick/slick.scss
Executable file
100
lib/slick-1.8.1/slick/slick.scss
Executable file
@@ -0,0 +1,100 @@
|
||||
/* Slider */
|
||||
|
||||
.slick-slider {
|
||||
position: relative;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-ms-touch-action: pan-y;
|
||||
touch-action: pan-y;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.slick-list {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&.dragging {
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
}
|
||||
}
|
||||
.slick-slider .slick-track,
|
||||
.slick-slider .slick-list {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
-o-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.slick-track {
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.slick-loading & {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
.slick-slide {
|
||||
float: left;
|
||||
height: 100%;
|
||||
min-height: 1px;
|
||||
[dir="rtl"] & {
|
||||
float: right;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
&.slick-loading img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
display: none;
|
||||
|
||||
&.dragging img {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.slick-initialized & {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.slick-loading & {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.slick-vertical & {
|
||||
display: block;
|
||||
height: auto;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
.slick-arrow.slick-hidden {
|
||||
display: none;
|
||||
}
|
||||
Reference in New Issue
Block a user