Skip to content

Instantly share code, notes, and snippets.

@ahmedch1

ahmedch1/model4_css_style.css

Created June 20, 2020 12:41
Show Gist options
  • Save ahmedch1/280dd3b5b12951d1c2df5859488a2f21 to your computer and use it in GitHub Desktop.
Save ahmedch1/280dd3b5b12951d1c2df5859488a2f21 to your computer and use it in GitHub Desktop.
Download ZIP
Build ecommerce design
Raw
model4_css_style.css
body, h1, h2, h3, h4, h5, h6, p, ul, li, ol {
padding: 0;
margin: 0;
}
.header-1 {
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 99999;
background: transparent;
padding: 21px 40px 0 24px;
border-bottom: 2px solid rgba(255, 255, 255, 0.5);
transition: all ease 1s;
}
body {
font-family: 'Oswald', 'sans-serif';
font-weight: 400;
color: white;
line-height: 1.5;
height: 2000px;
}
#header {
position: absolute;
width: 100%;
}
.header-1.fixedbar {
position: fixed !important;
background: deepskyblue;
padding: 10px 40px 0 24px;
}
.logo {
float: left;
width: 100%;
margin-top: 6px;
text-align: left;
padding: 0 0 25px;
}
.logo img {
max-width: 100%;
height: auto;
}
.mainmenu {
position: relative;
}
.mainmenu ul {
margin: 0;
padding: 0;
}
.mainmenu ul li {
list-style: none;
display: inline-block;
line-height: 0.8;
padding: 25px 20px 18px;
position: relative;
}
.mainmenu ul li a {
display: block;
color: white;
font-size: 16px;
line-height: 0.8;
text-transform: uppercase;
position: relative;
text-decoration: none;
padding: 0px;
letter-spacing: 1px;
}
.mainmenu ul li a:after {
position: absolute;
width: 0;
height: 1px;
content: '';
background: white;
left: 0;
right: 0;
bottom: -5px;
transition: all 0.4s ease-out;
}
.mainmenu ul li a:hover {
color: white;
}
.mainmenu ul li a:hover:after {
width: 100%;
}
.navigator {
position: relative;
padding: 21px 0 12px;
}
.navigator a {
display: inline-block;
color: white;
line-height: 0.8;
font-size: 25px;
margin: 0;
}
.navigator a.search {
margin-top: 16px;
}
html {
box-sizing: border-box;
font-size: 16px;
}
*, *:before, *:after {
box-sizing: inherit;
}
ol, ul {
list-style: none;
}
img {
max-width: 100%;
height: auto;
}
a {
text-decoration: none;
}
.slideshow-container {
max-width: 100%;
position: relative;
margin: auto;
background: url("../image/bg-main.jpg") 0 0 no-repeat;
background-size: cover;
height: 105vh;
overflow: hidden;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0, 0, 0, 0.9);
}
.myslides h2 {
font-size: 165px;
text-transform: uppercase;
letter-spacing: 33px;
font-weight: 800;
line-height: 1;
position: absolute;
top: 185px;
left: 100px;
z-index: 10;
animation-duration: 1.2s;
animation-fill-mode: both;
animation-name: fadeInLeft;
}
.myslides h2 span {
display: block;
text-align: right;
font-size: 22px;
letter-spacing: 20px;
text-transform: capitalize;
padding-right: 20px;
}
.myslides .p_img {
display: block;
width: auto;
height: 500px;
position: relative;
z-index: 20;
animation-duration: 1.2s;
animation-fill-mode: both;
animation-name: slideInRight;
}
.myslides {
padding-top: 150px;
}
.myslides .p_detail {
width: 350px;
position: absolute;
top: 180px;
right: 100px;
z-index: 30;
}
.myslides .p_detail h3 {
font-size: 40px;
font-weight: 600;
font-style: italic;
margin-top: 175px;
animation-duration: 1.2s;
animation-fill-mode: both;
animation-name: fadeInLeft;
}
.myslides .p_detail h3 i {
font-size: 18px;
color: white;
}
.myslides .p_detail h3 i.rate {
color: #ffcb00;
}
.myslides .p_detail h4 {
font-size: 14px;
font-weight: 300;
margin-bottom: 15px;
animation-duration: 1.2s;
animation-fill-mode: both;
animation-name: slideInRight;
}
.myslides .p_detail p {
font-size: 14px;
font-weight: 300;
margin-bottom: 15px;
animation-duration: 1.2s;
animation-fill-mode: both;
animation-name: slideInRight;
}
.myslides .p_detail ul {
font-size: 14px;
font-weight: 300;
margin-bottom: 15px;
letter-spacing: 1px;
animation-duration: 1.2s;
animation-fill-mode: both;
animation-name: slideInRight;
}
.myslides .p_detail ul i {
color: #ffcb00;
}
.myslides .p_detail select {
display: inline-block;
border: 1px solid #ffcb00;
background: #ffcb00;
font-size: 14px;
font-weight: bold;
margin-right: 5px;
animation-duration: 1.2s;
animation-fill-mode: both;
animation-name: fadeInLeft;
}
.myslides .p_detail a {
font-size: 14px;
color: white;
padding: 6px 20px;
display: inline-block;
border: 2px solid white;
margin-right: 15px;
transition: 0.5s background-color;
animation-duration: 1.2s;
animation-fill-mode: both;
animation-name: fadeInUp;
}
.myslides .p_detail a:hover {
background-color: #a10a05;
}
.myslides .p_detail span {
display: inline-block;
font-size: 20px;
font-weight: 700;
animation-duration: 1.2s;
animation-fill-mode: both;
animation-name: slideInRight;
}
.fadeInLeft {
animation-name: fadeInLeft;
}
.fadeInUp {
animation-name: fadeInUp;
}
.slideInRight {
animation-name: slideInRight;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInRight {
from {
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.service_section {
color: #333333;
padding: 150px;
}
.dark {
color: #00bcd4;
}
.sec_title {
font-size: 50px;
line-height: 60px;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
margin: 0 025px;
padding: 14px 0;
color: #333333;
}
.color_aaa {
color: darkgray;
}
.row.custom_column .col-lg-3.col-sm-4.col-md-3 {
width: 20% !important;
flex: 0 0 20%;
}
.box {
display: inline-block;
position: relative;
width: 100%;
background: transparent;
perspective: 1000;
transform-style: preserve-3d;
transition: all ease 400ms;
}
.box .flipper {
transform-origin: 100% 213.5px;
margin-top: 60px;
}
.box .front i,
.box .back i {
font-size: 64px;
line-height: 1;
color: #aaa;
display: block;
margin-bottom: 17px;
transition: all ease 400ms;
}
.box .front h3,
.box .back h3 {
font-size: 16px;
line-height: 20px;
font-weight: 400;
text-transform: uppercase;
color: #aaa;
margin: 0;
transition: all ease 400ms;
}
.flipper {
transform: perspective(1000px);
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
backface-visibility: hidden;
transition: 0.6s;
transform-style: preserve-3d;
transform: rotate(0deg);
position: absolute;
top: 0;
left: 0;
}
.front {
background: transparent;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
z-index: 2;
border: 2px solid rgba(27, 27, 27, 1);
padding: 48px 45px 45px;
width: 100%;
}
.back {
background: #00bcd4;
transform: rotateY(-180deg);
position: relative;
padding: 48px 45px 45px;
border: 2px solid #00bcd4;
width: 100%;
}
.box:hover .front {
transform: rotateY(180deg);
}
.box:hover .back {
transform: rotateY(0deg);
}
.box .back h3, .box .back i {
color: white;
}
a.box.text-center {
text-decoration: none;
}
.p-large {
color: #fff;
font-weight: 400 1rem/1.5rem;
font-family: 'Oswald', sans-serif;
}
.p-heading {
margin-bottom: 3.75rem;
text-align: center;
}
.tabs {
padding-top: 6.5rem;
padding-bottom: 4.25rem;
background-color: #046672;
}
.tabs .nav-tabs {
margin-right: auto;
margin-bottom: 2.5rem;
margin-left: auto;
justify-content: center;
border-bottom: none;
}
.tabs .nav-link {
margin-bottom: 1rem;
padding: 0.5rem 1.375rem 0.25rem 1.375rem;
border: none;
border-bottom: 0.1875rem solid #f1f1f8;
border-radius: 0;
color: #f1f1f8;
font: 700 1rem/1.75rem;
font-family: 'Oswald', sans-serif;
text-decoration: none;
transition: all 0.2s ease;
}
.tabs .nav-link.active,
.tabs.nav-link:hover {
border-bottom: 0.1875rem solid #00c9db;
background-color: transparent;
color: #00c9db;
}
.tabs .nav-link .fa {
margin-right: 0.375rem;
font-size: 1rem;
}
.tabs .card {
border: none;
background: transparent;
}
.tabs .card-body {
margin-bottom: 0.5rem;
}
.tabs .card-body p {
font-family: 'Roboto Condensed', sans-serif;
}
.tabs .card .card-icon {
display: inline-block;
width: 4.5rem;
height: 4.5rem;
border-radius: 50%;
background-color: #00c9db;
text-align: center;
vertical-align: top;
}
.tabs .card .card-icon .fa {
color: white;
font-size: 2rem;
line-height: 4.5rem;
}
.tabs .card-left-pane .text-wrapper {
display: inline-block;
width: 75%;
text-align: right;
}
.tabs .card-left-pane .card-icon {
float: none;
margin-right:0 ;
margin-left: 1rem;
}
.tabs img{
display: block;
margin:0.3rem auto 3rem auto;
}
.tabs .card-right-pane .text-wrapper{
display: inline-block;
width: 75%;
margin-left:1rem ;
}
.tabs .card .card-icon{
width: 4.5rem;
height: 4.5rem;
}
.tabs .icon-cards-area .card{
display: inline-block;
width: 44%;
margin-right: 2.5rem;
vertical-align: top;
}
.tabs .card.left-pane .text-wrapper,
.tabs .card.right-pane .text-wrapper{
width: 68%;
}
.basic-2,.basic-3{
color: #333333;
}
Raw
model4_index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>E-commerce Design</title>
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap" rel="stylesheet">
lock
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header-1" id="header">
<div class="container-fluid">
<div class="row">
<div class="col-lg-2 col-sm-3 col-md-3">
<div class="logo">
<a href=""><img src="image/logo.png" alt=""></a>
</div>
</div>
<div class="col-lg-8 col-sm-7 col-md-7 top">
<nav class="navbar navbar-expand-lg mainmenu text-center">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#cool">
<span class="navbar-toggler-icon">
<i class="fa fa-bars"></i>
</span>
</button>
<div class="collapse navbar-collapse" id="cool">
<ul class="navbar-nav">
<li class="nav-item">
<a href="" class="nav-link">HOME</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">ABOUT</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">SERVICES</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">PORTFOLIO</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">BLOG</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">CONTACT</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">LOCATIONS</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">FAQ</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="col-lg-2 col-sm-2 col-md-2">
<div class="navigator text-right">
<a href="" class="search">
<i class="fa fa-search"></i>
</a>
</div>
</div>
</div>
</div>
</header>
<div class="slideshow-container">
<br><br><br><br><br>
<div class="myslides">
<h2>
Air<br>Jordon<br>
<span>5 Retro</span>
</h2>
<img src="image/slider-1.png" class="p_img" alt="">
<div class="p_detail">
<h3>
Nike
<i class="fa fa-star rate"></i>
<i class="fa fa-star rate"></i>
<i class="fa fa-star rate"></i>
<i class="fa fa-star rate"></i>
<i class="fa fa-star"></i>
</h3>
<h4>Air Jordon 5 Retro</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, maxime!
</p>
<ul>
<li>
<i class="fa fa-angle-right"></i>
Lorem ipsum dolor sit amet
</li>
<li>
<i class="fa fa-angle-right"></i>
Lorem ipsum dolor sit amet
</li>
</ul>
<select name="" id="">
<option value="volvo">Size</option>
<option value="saab">M</option>
<option value="opel">L</option>
<option value="audi">XL</option>
<option value="audi">XXL</option>
</select>
<a href="">Add to Cart</a>
<span>$190</span>
</div>
</div>
<div class="myslides">
<h2>
Air<br>Jordon<br>
<span>5 Retro</span></h2>
<img src="image/slider-2.png" class="p_img" alt="">
<div class="p_detail">
<h3>
Nike
<i class="fa fa-star rate"></i>
<i class="fa fa-star rate"></i>
<i class="fa fa-star rate"></i>
<i class="fa fa-star rate"></i>
<i class="fa fa-star"></i>
</h3>
<h4>Air Jordon 5 Retro</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, maxime!
</p>
<ul>
<li>
<i class="fa fa-angle-right"></i>
Lorem ipsum dolor sit amet
</li>
<li>
<i class="fa fa-angle-right"></i>
Lorem ipsum dolor sit amet
</li>
</ul>
<select name="" id="">
<option value="volvo">Size</option>
<option value="saab">M</option>
<option value="opel">L</option>
<option value="audi">XL</option>
<option value="audi">XXL</option>
</select>
<a href="">Add to Cart</a>
<span>$190</span>
</div>
</div>
<div class="myslides">
<h2>
Air<br>Jordon<br>
<span>5 Retro</span></h2>
<img src="image/slider-3.png" class="p_img" alt="">
<div class="p_detail">
<h3>
Nike
<i class="fa fa-star rate"></i>
<i class="fa fa-star rate"></i>
<i class="fa fa-star rate"></i>
<i class="fa fa-star rate"></i>
<i class="fa fa-star"></i>
</h3>
<h4>Air Jordon 5 Retro</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, maxime!
</p>
<ul>
<li>
<i class="fa fa-angle-right"></i>
Lorem ipsum dolor sit amet
</li>
<li>
<i class="fa fa-angle-right"></i>
Lorem ipsum dolor sit amet
</li>
</ul>
<select name="" id="">
<option value="volvo">Size</option>
<option value="saab">M</option>
<option value="opel">L</option>
<option value="audi">XL</option>
<option value="audi">XXL</option>
</select>
<a href="">Add to Cart</a>
<span>$190</span>
</div>
</div>
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<section class="service_section">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h4 class="dark">SERVICE</h4>
<h2 class="sec_title">
WE DESIGN DIGITAL PRODUCTS THAT<br>
HELP GROW BUSINESSES
</h2>
<p class="color_aaa">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Adipisci eligendi fuga in officia quam
quibusdam quos, sed suscipit vero vitae!
</p>
</div>
</div>
<div class="row custom_column">
<div class="col-lg-3 col-sm-4 col-md-3">
<a href="#" class="box text-center">
<div class="flipper">
<div class="front">
<i class="fa fa-check-square-o"></i>
<h3>Website Development</h3>
</div>
<div class="back">
<i class="fa fa-check-square-o"></i>
<h3>Website Development</h3>
</div>
</div>
</a>
</div>
<div class="col-lg-3 col-sm-4 col-md-3">
<a href="#" class="box text-center">
<div class="flipper">
<div class="front">
<i class="fa fa-diamond"></i>
<h3>Graphic Designing</h3>
</div>
<div class="back">
<i class="fa fa-diamond"></i>
<h3>Graphic Designing</h3>
</div>
</div>
</a>
</div>
<div class="col-lg-3 col-sm-4 col-md-3">
<a href="#" class="box text-center">
<div class="flipper">
<div class="front">
<i class="fa fa-clock-o"></i>
<h3>Digital Marketing</h3>
</div>
<div class="back">
<i class="fa fa-clock-o"></i>
<h3>Digital Marketing</h3>
</div>
</div>
</a>
</div>
<div class="col-lg-3 col-sm-4 col-md-3">
<a href="#" class="box text-center">
<div class="flipper">
<div class="front">
<i class="fa fa-paper-plane"></i>
<h3>Seo &amp; Content Writing</h3>
</div>
<div class="back">
<i class="fa fa-paper-plane"></i>
<h3>Seo &amp; Content Writing</h3>
</div>
</div>
</a>
</div>
<div class="col-lg-3 col-sm-4 col-md-3">
<a href="#" class="box text-center">
<div class="flipper">
<div class="front">
<i class="fa fa-podcast"></i>
<h3>App Development</h3>
</div>
<div class="back">
<i class="fa fa-podcast"></i>
<h3>App Development</h3>w
</div>
</div>
</a>
</div>
</div>
</div>
</section>
<br><br>
<div class="tabs">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="text-center">FEATURES</h2>
<div class="p-heading p-large">
Theme was designed based on input from personal development coaches<br>
and popular trainers so it offers all
</div>
</div>
</div>
<div class="row">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" id="nav-tab-1" data-toggle="tab" href="#tab-1">
<i class="fa fa-cog">
CONFIGURING
</i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-tab-2" data-toggle="tab" href="#tab-2">
<i class="fa fa-binoculars">
TRACKING
</i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-tab-3" data-toggle="tab" href="#tab-3">
<i class="fa fa-search">
MONITORING
</i>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab-1">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="card left-pane first">
<div class="card-body">
<div class="text-wrapper">
<h4 class="card-title">Goal Setting</h4>
<p>
Like any self improving process,
everything starts with setting your goals
and committing to them.
</p>
</div>
<div class="card-icon">
<i class="fa fa-diamond">
</i>
</div>
</div>
</div>
<div class="card left-pane">
<div class="card-body">
<div class="text-wrapper">
<h4 class="card-title">Visual Editor</h4>
<p>
Like any self improving process,
everything starts with setting your goals
and committing to them.
</p>
</div>
<div class="card-icon">
<i class="fa fa-check-square-o">
</i>
</div>
</div>
</div>
<div class="card left-pane">
<div class="card-body">
<div class="text-wrapper">
<h4 class="card-title">Refined Options</h4>
<p>
Like any self improving process,
everything starts with setting your goals
and committing to them.
</p>
</div>
<div class="card-icon">
<i class="fa fa-clock-o">
</i>
</div>
</div>
</div>
<div class="card left-pane">
<div class="card-body">
<div class="text-wrapper">
<h4 class="card-title">Retina Ready</h4>
<p>
Like any self improving process,
everything starts with setting your goals
and committing to them.
</p>
</div>
<div class="card-icon">
<i class="fa fa-podcast">
</i>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<img src="image/product-600x1200-2.png" class="img-fluid" alt="">
</div>
<div class="col-lg-4">
<div class="card right-pane first">
<div class="card-body">
<div class="card-icon">
<i class="fa fa-calendar">
</i>
</div>
<div class="text-wrapper">
<h4 class="card-title">Calendar Input</h4>
<p>
Schedule your appointments, meetings and
periodical evaluations using the provided
in-app calendar
</p>
</div>
</div>
</div>
<div class="card right-pane">
<div class="card-body">
<div class="card-icon">
<i class="fa fa-bookmark">
</i>
</div>
<div class="text-wrapper">
<h4 class="card-title">Easy Reading</h4>
<p>
Schedule your appointments, meetings and
periodical evaluations using the provided
in-app calendar
</p>
</div>
</div>
</div>
<div class="card right-pane">
<div class="card-body">
<div class="card-icon">
<i class="fa fa-podcast">
</i>
</div>
<div class="text-wrapper">
<h4 class="card-title">Good Foundation</h4>
<p>
Schedule your appointments, meetings and
periodical evaluations using the provided
in-app calendar
</p>
</div>
</div>
</div>
<div class="card right-pane">
<div class="card-body">
<div class="card-icon">
<i class="fa fa-heart">
</i>
</div>
<div class="text-wrapper">
<h4 class="card-title">Responsive</h4>
<p>
Schedule your appointments, meetings and
periodical evaluations using the provided
in-app calendar
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab-2">
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="image/product-600x1200-3.png" clas="img-fluid" alt="">
</div>
<div class="col-md-8">
<div class="text-area">
<h3>Track Result Based on your</h3>
<br><br>
<p>
After you have configured the app and settled on the data gathering
techniques you can not start the information trackers and start collecting
those interesting details.You can always change them.
</p>
</div>
<br><br>
<div class="icon-cards-area">
<div class="card">
<div class="card-icon">
<i class="fa fa-cube">
</i>
</div>
<div class="card-body">
<h4 class="card-title">Good Foundation</h4>
<p>
Get a solid foundation for your self development efforts.
Try Theme mobile app for any mobile platform
</p>
</div>
</div>
<div class="card">
<div class="card-icon">
<i class="fa fa-bookmark">
</i>
</div>
<div class="card-body">
<h4 class="card-title">Easy Reading</h4>
<p>
Get a solid foundation for your self development efforts.
Try Theme mobile app for any mobile platform
</p>
</div>
</div>
<div class="card">
<div class="card-icon">
<i class="fa fa-calendar">
</i>
</div>
<div class="card-body">
<h4 class="card-title">Calendar Input</h4>
<p>
Get a solid foundation for your self development efforts.
Try Theme mobile app for any mobile platform
</p>
</div>
</div>
<div class="card">
<div class="card-icon">
<i class="fa fa-heart">
</i>
</div>
<div class="card-body">
<h4 class="card-title">Responsive</h4>
<p>
Get a solid foundation for your self development efforts.
Try Theme mobile app for any mobile platform
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab-3">
<div class="container">
<div class="row">
<div class="col-md-8">
<br><br>
<div class="icon-cards-area">
<div class="card">
<div class="card-icon">
<i class="fa fa-calendar">
</i>
</div>
<div class="card-body">
<h4 class="card-title">Calendar Input</h4>
<p>
Schedule your appointments,meetings and
periodical evaluations using the provided in-app calendar option
</p>
</div>
</div>
<div class="card">
<div class="card-icon">
<i class="fa fa-file">
</i>
</div>
<div class="card-body">
<h4 class="card-title">Visual Editor</h4>
<p>
Schedule your appointments,meetings and
periodical evaluations using the provided in-app calendar option
</p>
</div>
</div>
<div class="card">
<div class="card-icon">
<i class="fa fa-cube">
</i>
</div>
<div class="card-body">
<h4 class="card-title">Good Foundation</h4>
<p>
Schedule your appointments,meetings and
periodical evaluations using the provided in-app calendar option
</p>
</div>
</div>
<div class="card">
<div class="card-icon">
<i class="fa fa-bookmark">
</i>
</div>
<div class="card-body">
<h4 class="card-title">Easy Reading</h4>
<p>
Schedule your appointments,meetings and
periodical evaluations using the provided in-app calendar option
</p>
</div>
</div>
</div>
<div class="text-area">
<h3>Monitoring Tool Evaluation</h3>
<p>
Monitor the evolution of your finances and health
state using tools integrated in Theme.
The generated time reports can be filtered based on any desired criteria.
</p>
</div>
</div>
<div class="col-md-4">
<img src="image/product-600x1200-4.png" class="img-fluid" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br><br><br><br><br><br><br>
<div id="details" class="basic-2">
<br>
<div class="container">
<div class="row">
<div class="col-lg-6">
<img src="image/details-1-iphone.png" class="img-fluid" alt="">
</div>
<div class="col-lg-6">
<div class="text-contain">
<h3>RETINA DISPLAY</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam amet aperiam,
architecto beatae commodi consequuntur delectus dicta ducimus ex expedita explicabo harum hic,
ipsa laboriosam magni molestiae nobis, nostrum provident quaerat qui ratione sint soluta
voluptatum? Accusantium aperiam architecto blanditiis consequatur corporis dolor dolores eveniet
ipsa labore maxime minus modi molestiae nam natus nesciunt nostrum odit perspiciatis provident
quod reiciendis reprehenderit, sit vero vitae, voluptatem voluptatum! Aspernatur consectetur cum
dolor doloremque error, ex fugit iure magni maiores molestiae repellendus sapiente temporibus
velit, voluptas voluptatem? Ad at dignissimos, eius enim eum explicabo impedit odio. Aspernatur
dolores fugiat illum officia?
</p>
<br><br>
<a href="#details-lightbox-1" class="btn-solid-reg anim">Read more</a>
</div>
</div>
</div>
</div>
</div>
<br><br><br><br>
<div class="basic-3">
<div class="second">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="text-container">
<h3>RESPONSIVE MATTERS</h3>
<br>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid corporis eaque eius ipsam
ipsum magnam natus, similique vel velit. Accusamus aliquid architecto assumenda beatae
consequatur eius eligendi error, natus neque nihil officiis saepe sunt tempora. Aliquam amet
delectus deserunt, dolor earum esse ipsa quasi! Accusantium aliquam amet blanditiis cumque
cupiditate dignissimos dolores ducimus enim eum eveniet excepturi exercitationem expedita
facere hic impedit iusto laudantium libero magnam mollitia necessitatibus neque nobis nulla
numquam officia, omnis porro provident quasi quisquam quod rem sequi soluta tempora ut vel
vitae voluptas voluptatibus. A corporis dolor facere iure magnam odio quo soluta unde ut
voluptatem?
</p>
<br><br>
<a href="#details-lightbox-2" class="btn-solid-reg anim">Read more</a>
</div>
</div>
<div class="col-lg-6">
<img src="image/details-1-iphone.png" class="img-fluid" alt="">
</div>
</div>
</div>
</div>
</div>
<div id="details-lightbox-1" class="lightbox-basic zoom mfp-hide">
<div class="row">
<button title="Close (Esc)" type="button" class="mfp-close x-button">X</button>
<div class="col-lg-6">
<img src="image/details-lightbox-1.png" class="img-fluid" alt="">
</div>
<div class="col-lg-6">
<h3>Goals Setting</h3>
<hr>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium autem beatae culpa ex ipsa
itaque molestias quaerat quam sed.
</p>
<h4>user Feedcback</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, suscipit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cupiditate, dignissimos earum eligendi in
molestiae mollitia nihil numquam possimus quidem.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A expedita nihil quas?
</p>
<table>
<tr>
<td class="icon-cell">
<i class="fa fa-desktop"></i>
</td>
<td>Responsive Layout</td>
</tr>
<tr>
<td class="icon-cell">
<i class="fa fa-image"></i>
</td>
<td>Distinctive Cts</td>
</tr>
<tr>
<td class="icon-cell">
<i class="fa fa-bullhorn"></i>
</td>
<td>Distinctive Cts</td>
</tr>
</table>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Raw
model4_js_main.js
$(window).scroll(function () {
var scrl = $(window).scrollTop();
if (scrl < 60) {
$('.header-1').removeClass('fixedbar');
} else {
$('.header-1').addClass('fixedbar');
}
});
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("myslides");
if (n > slides.length) {
slideIndex=1
}
if (n < 1) {slideIndex=slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment