A Pen by MOHIM

Developer
MOHIM
Size
14,664 Kb
Views
12,144
  1. A Pen by MOHIM Previews
  2. A Pen by MOHIM HTML Codes
  3. A Pen by MOHIM CSS Codes
  4. A Pen by MOHIM JS Codes

How do I make an a pen by mohim?

What is a a pen by mohim? How do you make a a pen by mohim? This script and codes were developed by MOHIM on 22 November 2022, Tuesday.

A Pen by MOHIM Previews
IQ Test

A Pen by MOHIM - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by MOHIM</title> <link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/animatecss/3.5.2/animate.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="https://fonts.googleapis.com/css?family=Montserrat:600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300i" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<!-- start header section -->
<div class="hader"> <nav class="navbar navbar-default navbar-fixed-top style_nav" data-spy="affix" data-offset-top="10" data-offset-bottom="200"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand style_brand" href="#"><img class="img-responsive" src="http://commonpixel.com/themes/edgar/images/logo.png"></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav pull-right"> <li class="dropdown"><a href="#contact_us">HOME<i class="fa fa-angle-down" aria-hidden="true"></i></a> <div class="dropdown-content wow fadeInUp" data-wow-duration="0.8s"> <a href="#">HOME ONE</a> <a href="#">HOME TWO</a> </div> </li> <li><a href="#">PAGES</a></li> <li class="dropdown"><a href="#">ELEMENTS<i class="fa fa-angle-down" aria-hidden="true"></i></a> <div class="dropdown-content wow fadeInUp" data-wow-duration="0.8s"> <a href="#">SERVICE</a> <a href="#">SINGLE SERVICE</a> <a href="#">SERVICE</a> <a href="#">SINGLE SERVICE</a> <a href="#">SERVICE</a> <a href="#">SINGLE SERVICE</a> </div> </li> <li><a href="#">PORTFOLIO</a></li> <li class="dropdown"><a href="#">CONTACT US<i class="fa fa-angle-down" aria-hidden="true"></i></a> <div class="dropdown-content wow fadeInUp" data-wow-duration="0.8s"> <a href="#">SERVICE</a> <a href="#">SINGLE SERVICE</a> <a href="#">SERVICE</a> <a href="#">SINGLE SERVICE</a> <a href="#">SERVICE</a> <a href="#">SINGLE SERVICE</a> </div> </li> <li><a href="#">BLOG</a></li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav>
</div>
<!-- end header section -->
<!--======================================================================================================= -->
<!-- ==================================START SLIDER SECTION================================================-->
<section id="slider"> <div class="overlay_background"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <div class="slider_item1 slider_bg_1"> <div class="overlay_background"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="description wow fadeInUp" data-slide="2" style="top: 206.389px;"> <div class="title"> <p>Introducing our brand</p> <h1>We develop professional projects <span class="break">for all our customers</span></h1> </div> <div> <a class="button primary large" href="#">Read more</a> <a class="button transparent large" href="#">Order now</a> </div> </div> </div> </div> </div> </div> </div> </div> <div class="item"> <div class="slider_item1 slider_bg_2"> <div class="overlay_background"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="description wow fadeInUp" data-slide="2" style="top: 206.389px;"> <div class="title"> <p>Introducing our brand</p> <h1>We create<span class="break">engaging experiences</span></h1> </div> <div> <a class="button primary large" href="#">Read more</a> <a class="button transparent large" href="#">Order now</a> </div> </div> </div> </div> </div> </div> </div> </div> <div class="item"> <div class="slider_item1 slider_bg_3"> <div class="overlay_background"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="description wow fadeInUp" data-slide="2" style="top: 206.389px;"> <div class="title"> <p>Introducing our brand</p> <h1>We develop professional projects <span class="break">for all our customers</span></h1> </div> <div> <a class="button primary large" href="#">Read more</a> <a class="button transparent large" href="#">Order now</a> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!-- Controls --> </div> </div>
</section>
<!--======================================================================================================= -->
<!-- =================================END SLIDER SECTION================================================-->
<!--======================================================================================================= -->
<!-- ==================================START SOLUTION SECTION================================================-->
<section id="solution"> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-12"> <div class="sectionTitle"> <p>welcome</p> <h2 class="title">Explore our best solutions</h2> </div> </div> <div class="col-md-8 col-sm-12"> <div class="row"> <div class="col-sm-6"> <div class="iconBox3"> <div class="icon"><i class="fa fa-check-square-o"></i></div> <h5>Stunning design</h5> <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus</p> </div> </div> <div class="col-sm-6"> <div class="iconBox3"> <div class="icon"><i class="fa fa-check-square-o"></i></div> <h5>PROFESSIONAL SOLUTIONS</h5> <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus</p> </div> </div> <div class="col-sm-6"> <div class="iconBox3"> <div class="icon"><i class="fa fa-check-square-o"></i></div> <h5>RESPONSIVE APPS</h5> <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus</p> </div> </div> <div class="col-sm-6"> <div class="iconBox3"> <div class="icon"><i class="fa fa-check-square-o"></i></div> <h5>CREATIVE IDEAS</h5> <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus</p> </div> </div> </div> </div> </div> </div>
</section>
<!--======================================================================================================= -->
<!-- =================================END SOLUTION SECTION================================================-->
<!--======================================================================================================= -->
<!-- ==================================START TABBED SLIDER SECTION================================================-->
<section id="tabbed_slider"> <div class="container"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <ul class=" iconTabs nav row aos-init aos-animate"> <li data-target="#myCarousel" data-slide-to="0" class="col-md-3 active nav1"> <a href="#skills" class="active"> <i class="fa fa-tasks icon"></i> <h6>Our top skills</h6> <p>What we're good at</p> </a> </li> <li data-target="#myCarousel" data-slide-to="1" class="col-md-3 nav1"> <a href="#mission" class=""> <i class="fa fa-lightbulb-o icon"></i> <h6>Our mission</h6> <p>Professional team</p> </a> </li> <li data-target="#myCarousel" data-slide-to="2" class="col-md-3 nav1"> <a href="#values" class=""> <i class="fa fa-sliders icon"></i> <h6>Core values</h6> <p>Working for you</p> </a> </li> <li data-target="#myCarousel" data-slide-to="3" class="col-md-3 nav1"> <a href="#about" class=""> <i class="fa fa-trophy icon"></i> <h6>About us</h6> <p>Who we are</p> </a> </li> </ul> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active set_slider_padding"> <div id="skills" class="row"> <div class="col-sm-6 mBase25 aos-init aos-animate" data-aos="fade-in"> <img src="http://commonpixel.com/themes/edgar/images/examples/photo_01.jpg" class="responsive" alt="Image title"> </div> <div class="col-sm-6 aos-init aos-animate" data-aos="fade-in"> <div class="sectionTitle"> <p>PROGRESS</p> <h2 class="title">Professional expertise</h2> </div> <div class="progressBarWrap"> <div class="progressBar"> <div class="wrap animated" data-width="75" style="width: 75%;"> <div class="inner"></div> <div class="no">75%</div> </div> <h5 class="info">	Project evaluation	</h5> </div> <div class="progressBar"> <div class="wrap animated" data-width="82" style="width: 82%;"> <div class="inner"></div> <div class="no">82%</div> </div> <h5 class="info">	Data analysis	</h5> </div> <div class="progressBar"> <div class="wrap animated" data-width="90" style="width: 90%;"> <div class="inner"></div> <div class="no">90%</div> </div> <h5 class="info">	Finance support	</h5> </div> <div class="progressBar"> <div class="wrap animated" data-width="95" style="width: 95%;"> <div class="inner"></div> <div class="no">95%</div> </div> <h5 class="info">	Custom development	</h5> </div> </div> </div> </div> </div> <!-- End Item --> <div class="item set_slider_padding"> <div id="mission" class="row jshide" style="display: block;"> <div class="col-sm-6 mBase25"> <img src="http://commonpixel.com/themes/edgar/images/examples/photo_04.jpg" class="responsive" alt="Image title"> </div> <div class="col-sm-6"> <div class="sectionTitle"> <p>looking ahead</p> <h2 class="title">Our mission</h2> </div> <p class="check_desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p> <ul class="itemList mBase40"> <li><i class="fa fa-check-square-o"></i><span class="check_desc">Enthusiastic &amp; talented team</span></li> <li><i class="fa fa-check-square-o"></i><span class="check_desc">Delivering professional results</span></li> <li><i class="fa fa-check-square-o"></i><span class="check_desc">Special customer service</span></li> <li><i class="fa fa-check-square-o"></i><span class="check_desc">Durable solutions</span></li> </ul> </div> </div> </div> <!-- End Item --> <div class="item set_slider_padding"> <div id="values" class="row jshide" style="display: block;"> <div class="col-sm-6 mBase25"> <img src="http://commonpixel.com/themes/edgar/images/examples/photo_02.jpg" class="responsive" alt="Image title"> </div> <div class="col-sm-6"> <h3 class="core_values">Core values</h3> <p class="core_para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p> <p class="core_para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p> <a href="#" class="button primary">View more</a> </div> </div> </div> <!-- End Item --> <div class="item set_slider_padding"> <div id="mission" class="row jshide" style="display: block;"> <div class="col-sm-6 mBase25"> <img src="http://commonpixel.com/themes/edgar/images/examples/photo_04.jpg" class="responsive" alt="Image title"> </div> <div class="col-sm-6"> <div class="sectionTitle"> <p>looking ahead</p> <h2 class="title">Our mission</h2> </div> <p class="check_desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p> <ul class="itemList mBase40"> <li><i class="fa fa-check-square-o"></i><span class="check_desc">Enthusiastic &amp; talented team</span></li> <li><i class="fa fa-check-square-o"></i><span class="check_desc">Delivering professional results</span></li> <li><i class="fa fa-check-square-o"></i><span class="check_desc">Special customer service</span></li> <li><i class="fa fa-check-square-o"></i><span class="check_desc">Durable solutions</span></li> </ul> </div> </div> </div> <!-- End Item --> </div> <!-- End Carousel Inner --> </div> </div>
</section>
<!--======================================================================================================= -->
<!-- =================================END TABED SLIDER SECTION================================================-->
<!--======================================================================================================= -->
<!-- =================================START SERVICES SECTION================================================-->
<section id="services" class="parallax"> <div class="inner"> <div class="container"> <div class="row"> <div class="col-sm-8 sectionTitle white"> <p>what we do</p> <h2 class="title">Professional services</h2> </div> <div class="col-sm-4 rightAlign xsAlignReset"> <a href="#" class="button primary mTop15 mBase25">Order now</a> </div> </div> <div class="row"> <div class="col-md-4 col-sm-6 elem aos-init aos-animate wow fadeInLeft" data-aos="zoom-in"> <div class="service_item"> <i class="fa fa-umbrella"></i> <h4>Conferences</h4> <p>Sed ut perspiciatis unde omnis iste error sit voluptatem accusantium.</p> </div> </div> <!-- end item 1 --> <div class="col-md-4 col-sm-6 elem aos-init aos-animate wow fadeInUp" data-aos="zoom-in"> <div class="service_item"> <i class="fa fa-magic"></i> <h4>Financial Plans</h4> <p>Sed ut perspiciatis unde omnis iste error sit voluptatem accusantium.</p> </div> </div> <!-- end item 2 --> <div class="col-md-4 col-sm-6 elem aos-init aos-animate wow fadeInRight" data-aos="zoom-in"> <div class="service_item"> <i class="fa fa-crosshairs"></i> <h4>Marketing tools</h4> <p>Sed ut perspiciatis unde omnis iste error sit voluptatem accusantium.</p> </div> </div> <!-- end item 3 --> <div class="col-md-4 col-sm-6 elem aos-init aos-animate wow fadeInDown" data-aos="fade-up"> <div class="service_item"> <i class="fa fa-globe"></i> <h4>Development</h4> <p>Sed ut perspiciatis unde omnis iste error sit voluptatem accusantium.</p> </div> </div> <!-- end item 4 --> <div class="col-md-4 col-sm-6 elem aos-init aos-animate wow fadeInRight" data-aos="fade-up"> <div class="service_item"> <i class="fa fa-paperclip"></i> <h4>Strategy Analysis</h4> <p>Sed ut perspiciatis unde omnis iste error sit voluptatem accusantium.</p> </div> </div> <!-- end item 5 --> <div class="col-md-4 col-sm-6 elem aos-init aos-animate wow fadeInLeft" data-aos="fade-up"> <div class="service_item"> <i class="fa fa-umbrella"></i> <h4>Management</h4> <p>Sed ut perspiciatis unde omnis iste error sit voluptatem accusantium.</p> </div> </div> <!-- end item 6 --> </div> </div> </div>
</section>
<!--======================================================================================================= -->
<!-- =================================END SERVICES SECTION================================================-->
<!--======================================================================================================= -->
<div id="tf-portfolio" class="content-area layout-two"> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="sectionTitle center"> <p>our projects</p> <h2 class="title">Featured works</h2> </div> </div> </div> <div class="row nomargin"> <div class="col-md-3 col-sm-6 col-xs-12 nopadding"> <a href="#inline-1" data-gal="prettyPhoto[pp_gal]"> <div class="portfolio-item"> <div class="hover-bg"> <div class="border"> <div class="hover-txt"> <i class="ion-ios-plus-empty"></i> <h4>Luka Mockup Design</h4> <span>Photoshop</span> </div> </div> </div> <img src="http://commonpixel.com/themes/edgar/images/examples/work_tall_01.jpg" class="img-responsive" alt="..."> </div> </a> </div> <div class="col-md-3 col-sm-6 col-xs-12 nopadding"> <a href="#inline-11" data-gal="prettyPhoto[pp_gal]"> <div class="portfolio-item"> <div class="hover-bg"> <div class="border"> <div class="hover-txt"> <i class="ion-ios-plus-empty"></i> <h4>Photography</h4> <span>Photos</span> / <span>Digital</span> </div> </div> </div> <img src="http://commonpixel.com/themes/edgar/images/examples/work_tall_02.jpg" class="img-responsive" alt="..."> </div> </a> </div> <div class="col-md-3 col-sm-6 col-xs-12 nopadding"> <a href="#inline-3" data-gal="prettyPhoto[pp_gal]"> <div class="portfolio-item"> <div class="hover-bg"> <div class="border"> <div class="hover-txt"> <i class="ion-ios-plus-empty"></i> <h4>WordPress Themes</h4> <span>Web Design</span> </div> </div> </div> <img src="http://commonpixel.com/themes/edgar/images/examples/work_01.jpg" class="img-responsive" alt="..."> </div> </a> <a href="#inline-6" data-gal="prettyPhoto[pp_gal]"> <div class="portfolio-item"> <div class="hover-bg"> <div class="border"> <div class="hover-txt"> <i class="ion-ios-plus-empty"></i> <h4>Photography</h4> <span>Photos</span> / <span>Digital</span> </div> </div> </div> <img src="http://commonpixel.com/themes/edgar/images/examples/work_03.jpg" class="img-responsive" alt="..."> </div> </a> </div> <div class="col-md-3 col-sm-6 col-xs-12 nopadding"> <a href="#inline-3" data-gal="prettyPhoto[pp_gal]"> <div class="portfolio-item"> <div class="hover-bg"> <div class="border"> <div class="hover-txt"> <i class="ion-ios-plus-empty"></i> <h4>WordPress Themes</h4> <span>Web Design</span> </div> </div> </div> <img src="http://commonpixel.com/themes/edgar/images/examples/work_02.jpg" class="img-responsive" alt="..."> </div> </a> <a href="#inline-6" data-gal="prettyPhoto[pp_gal]"> <div class="portfolio-item set"> <div class="hover-bg"> <div class="border"> <div class="hover-txt"> <i class="ion-ios-plus-empty"></i> <h4>Photography</h4> <span>Photos</span> / <span>Digital</span> </div> </div> </div> <img src="http://commonpixel.com/themes/edgar/images/examples/work_04.jpg" class="img-responsive" alt="..."> </div> </a> </div> </div> </div>
</div>
<!-- ================================= START GALLERY SECTION SECTION================================================-->
<!--======================================================================================================= -->
<!-- ================================= END GALLERY SECTION================================================-->
<!-- ================================= START COUNTER SECTION================================================-->
<!-- Here is the section -->
<section id="counter" class="counter"> <div class="main_counter_area"> <div class="overlay p-y-3"> <div class="container"> <div class="row"> <div class="main_counter_content text-center white-text"> <div class="col-md-3"> <div class="single_counter p-y-2 m-t-1"> <div class="counter_overlay"> <i class="fa fa-pencil-square-o" aria-hidden="true"></i> <h2 class="statistic-counter">2300</h2> <p class="counter_text">CLIENTS</p> </div> </div> </div> <div class="col-md-3"> <div class="single_counter p-y-2 m-t-1"> <div class="counter_overlay"> <i class="fa fa-bug" aria-hidden="true"></i> <h2 class="statistic-counter">3889</h2> <p class="counter_text">PROJECTS</p> </div> </div> </div> <div class="col-md-3"> <div class="commom_background_img"> <div class="single_counter p-y-2 m-t-1"> <div class="counter_overlay"> <i class="fa fa-coffee" aria-hidden="true"></i> <h2 class="statistic-counter">4635</h2> <p class="counter_text">COFFEE CUPS</p> </div> </div> </div> </div> <div class="col-md-3"> <div class="single_counter p-y-2 m-t-1"> <div class="counter_overlay"> <i class="fa fa-bicycle" aria-hidden="true"></i> <h2 class="statistic-counter">4810</h2> <p class="counter_text">IDEAS</p> </div> </div> </div> </div> </div> </div> </div> </div>
</section>
<!-- End of counter Section -->
<!-- START TESTIMONIAL SECTION -->
<section id="carousel"> <div class="testimonial_overlay"> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="quote"><i class="fa fa-quote-left fa-4x"></i></div> <div class="carousel slide" id="fade-quote-carousel" data-ride="carousel" data-interval="3000"> <!-- Carousel indicators --> <ol class="carousel-indicators"> <li data-target="#fade-quote-carousel" data-slide-to="0"></li> <li data-target="#fade-quote-carousel" data-slide-to="1"></li> <li data-target="#fade-quote-carousel" data-slide-to="2" class="active"></li> <li data-target="#fade-quote-carousel" data-slide-to="3"></li> <li data-target="#fade-quote-carousel" data-slide-to="4"></li> <li data-target="#fade-quote-carousel" data-slide-to="5"></li> </ol> <!-- Carousel items --> <div class="carousel-inner"> <div class="item"> <div class="profile-circle"><img class="img-circle" src="http://commonpixel.com/themes/edgar/images/examples/user_02.jpg" alt="" /></div> <blockquote> <div class="author"> <h5>Elaine MaryAnne</h5> <p>The WayWire Corp</p> </div> <p class="test_para">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p> </blockquote> </div> <div class="item"> <div class="profile-circle"><img class="img-circle" src="http://commonpixel.com/themes/edgar/images/examples/user_01.jpg" alt="" /></div> <blockquote> <div class="author"> <h5>Roger Smith</h5> <p>Acme Corporation</p> </div> <p class="test_para">We've hired the Nook team for our last project and we've been extremely satisfied with the services they provided! We'll definitely be going to use their awesome services in the near future and will recommended them to our partners and colleagues for sure!</p> </blockquote> </div> <div class="active item"> <div class="profile-circle"><img class="img-circle" src="http://commonpixel.com/themes/edgar/images/examples/user_03.jpg" alt="" /></div> <blockquote> <div class="author"> <h5>Edgar Monk</h5> <p>Weiland Corp</p> </div> <p class="test_para">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p> </blockquote> </div> <div class="item"> <div class="profile-circle"><img class="img-circle" src="http://commonpixel.com/themes/edgar/images/examples/user_02.jpg" alt="" /></div> <blockquote> <div class="author"> <h5>Elaine MaryAnne</h5> <p>The WayWire Corp</p> </div> <p class="test_para">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p> </blockquote> </div> <div class="item"> <div class="profile-circle"><img class="img-circle" src="http://commonpixel.com/themes/edgar/images/examples/user_01.jpg" alt="" /></div> <blockquote> <div class="author"> <h5>Roger Smith</h5> <p>Acme Corporation</p> </div> <p class="test_para">We've hired the Nook team for our last project and we've been extremely satisfied with the services they provided! We'll definitely be going to use their awesome services in the near future and will recommended them to our partners and colleagues for sure!</p> </blockquote> </div> </div> </div> </div> </div> </div> </div>
</section>
<!-- END TESTIMONILA SECTION -->
<!-- -->
<section class="sectionBase container"> <div class="sectionTitle center"> <p>from the blog</p> <h2 class="title">Recent news</h2> </div> <div class="row"> <div class="col-md-4 col-sm-6 wow fadeInUp"> <div class="article"> <div class="photo"><img src="http://commonpixel.com/themes/edgar/images/examples/work_04.jpg" alt="Article image title"></div> <div class="info"> <p class="cat">Dec 23, 2016 | Business</p> <a href="#"> <h5>Great results for our customers</h5> </a> <p class="author">By Jane Smith</p> </div> </div> <!-- end item 1 --> </div> <div class="col-md-4 col-sm-6 wow fadeInUp"> <div class="article"> <div class="info"> <p class="cat">Dec 23, 2016 | Business</p> <a href="#"> <h5>Why these ideas never fail</h5> </a> <p class="author">By Jane Smith</p> </div> </div> <!-- end item 2 --> <div class="article quote"> <a href="#"> <div class="info"> <h5>Classical design is a mirror of the human mind. It's how we see the world.</h5> <i class="fa fa-quote-right icon"></i> <p class="author">By Robert McKee</p> </div> </a> </div> <!-- end item 3 --> </div> <div class="col-md-4 col-sm-12 wow fadeInUp"> <div class="article"> <div class="photo"><img src="http://commonpixel.com/themes/edgar/images/examples/work_02.jpg" alt="Article image title"></div> <div class="info"> <p class="cat">Dec 23, 2016 | Business</p> <a href="#"> <h5>Hello, world!</h5> </a> <p class="author">By William Styron</p> </div> </div> <!-- end item 4 --> </div> </div>
</section>
<!-- -->
<!-- -->
<section class="parallax pricingTitle" style="background-image: url(http://commonpixel.com/themes/edgar/images/examples/bg_parallax_06.jpg)"> <div class="inner"> <div class="sectionTitle center white"> <p>pricing</p> <h2 class="title">Choose a plan</h2> </div> </div>
</section>
<section class="container sectionBase pricingTop"> <div class="row pricing"> <div class="col-sm-4 aos-init aos-animate" data-aos="fade-up"> <div class="item"> <h3 class="title">Basic</h3> <h4 class="price"><span class="currency">$</span>9.90</h4> <p class="info">Perfect for single freelancers who work by themselves</p> <ul class="features"> <li>Support at $25/hour</li> <li>Free hosting</li> <li>40MB of storage space</li> </ul> <button class="button dark">Choose plan</button> </div> </div> <!-- end item 1 --> <div class="col-sm-4 aos-init aos-animate" data-aos="fade-up"> <div class="item"> <span class="best">Best deal</span> <h3 class="title">Standard</h3> <h4 class="price"><span class="currency">$</span>19.90</h4> <p class="info">Perfect for a small team or company with regular offices</p> <ul class="features"> <li>Support forum</li> <li>Free hosting</li> <li>50MB of storage space</li> </ul> <button class="button primary">Choose plan</button> </div> </div> <!-- end item 2 --> <div class="col-sm-4 aos-init aos-animate" data-aos="fade-up"> <div class="item"> <h3 class="title">Enterprise</h3> <h4 class="price"><span class="currency">$</span>29.90</h4> <p class="info">Perfect for large scale enterprises with thousands of employees</p> <ul class="features"> <li>Support forum</li> <li>Full package hosting</li> <li>Unlimited space</li> </ul> <button class="button dark">Choose plan</button> </div> </div> <!-- end item 3 --> </div>
</section>
<!-- -->
<section id="company"> <div class="container"> <div class="row"> </div> <div class='row'> <div class='col-md-12'> <div class="carousel slide media-carousel" id="media"> <div class="carousel-inner"> <div class="item active"> <div class="row"> <div class="col-md-3"> <a class="img-responsive" href="#"><img alt="" class="company_image" src="http://commonpixel.com/themes/edgar/images/examples/client_05.png"></a> </div> <div class="col-md-3"> <a class="img-responsive" href="#"><img alt="" class="company_image" src="http://commonpixel.com/themes/edgar/images/examples/client_01.png"></a> </div> <div class="col-md-3"> <a class="img-responsive" href="#"><img alt="" class="company_image" src="http://commonpixel.com/themes/edgar/images/examples/client_02.png"></a> </div> <div class="col-md-3"> <a class="img-responsive" href="#"><img alt="" class="company_image" src="http://commonpixel.com/themes/edgar/images/examples/client_03.png"></a> </div> </div> </div> <div class="item "> <div class="row"> <div class="col-md-3"> <a class="img-responsive" href="#"><img alt="" class="company_image" src="http://commonpixel.com/themes/edgar/images/examples/client_04.png"></a> </div> <div class="col-md-3"> <a class="img-responsive" href="#"><img alt="" class="company_image" src="http://commonpixel.com/themes/edgar/images/examples/client_05.png"></a> </div> <div class="col-md-3"> <a class="img-responsive" href="#"><img alt="" class="company_image" src="http://commonpixel.com/themes/edgar/images/examples/client_03.png"></a> </div> <div class="col-md-3"> <a class="img-responsive" href="#"><img alt="" class="company_image" src="http://commonpixel.com/themes/edgar/images/examples/client_03.png"></a> </div> </div> </div> <div class="item "> <div class="row"> <div class="col-md-3"> <a class="img-responsive" href="#"><img alt="" class="company_image" src="http://commonpixel.com/themes/edgar/images/examples/client_04.png"></a> </div> <div class="col-md-3"> <a class="img-responsive" href="#"><img alt="" class="company_image" src="http://commonpixel.com/themes/edgar/images/examples/client_05.png"></a> </div> <div class="col-md-3"> <a class="img-responsive" href="#"><img alt="" class="company_image" src="http://commonpixel.com/themes/edgar/images/examples/client_03.png"></a> </div> <div class="col-md-3"> <a class="img-responsive" href="#"><img alt="" class="company_image" src="http://commonpixel.com/themes/edgar/images/examples/client_03.png"></a> </div> </div> </div> </div> </div> </div> </div> </div>
</section>
<!-- -->
<!-- -->
<footer class="mastFooter"> <div class="inner"> <!-- START banner --> <div class="banner"> <div class="container"> <div class="row"> <div class="col-sm-8"> <h3>Take control of your ideas</h3> <p>Drop us a line today and we’ll get back to you with a custom business proposition</p> </div> <div class="col-sm-4 rightAlign xsAlignReset"> <a href="#" class="button primary large">Order now</a> </div> </div> </div> </div> <!-- END banner --> <div class="container"> <div class="row"> <div class="col-sm-3"> <div class="logo"> <a href="index.html"><img src="http://commonpixel.com/themes/edgar/images/logo.png" data-rjs="2" alt="My Company name"></a> </div> <p class="copyright">© Edgar 2016. All rights reserved.</p> </div> <div class="col-sm-3"> <h6>Links</h6> <ul class="links"> <li><a href="about.html">About us</a></li> <li><a href="blog.html">Latest news</a></li> <li><a href="projects.html">Our projects</a></li> <li><a href="services.html">Services</a></li> <li><a href="contact.html">Contact us</a></li> </ul> </div> <div class="col-sm-3"> <h6>Find us here</h6> <ul class="contact"> <li> <i class="fa fa-envelope"></i> [email protected] </li> <li> <i class="fa fa-phone"></i> +5 6800 377 887 </li> <li> <i class="fa fa-map-marker"></i> 23 Park Lane Terrace, SW03N, London, UK </li> </ul> </div> <div class="col-sm-3"> <h6>Social</h6> <ul class="social"> <li> <a href="#"><i class="fa fa-facebook"></i></a> </li> <li> <a href="#"><i class="fa fa-twitter"></i></a> </li> <li> <a href="#"><i class="fa fa-pinterest"></i></a> </li> <li> <a href="#"><i class="fa fa-linkedin"></i></a> </li> <li> <a href="#"><i class="fa fa-google-plus"></i></a> </li> </ul> </div> </div> </div> </div>
</footer>
<!-- -->
<!-- -->
<!-- Add this script before </body> -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js"></script>
<!-- ================================= END COUNTER SECTION================================================--> <script src="js/index.js"></script>
</body>
</html>

A Pen by MOHIM - Script Codes CSS Codes

* { margin: 0; padding: 0;
}
.hader { position: relative; width: 100%;
}
.hader .style_nav { background-color: transparent; border-bottom: 1px solid white;
}
.hader .style_nav .style_brand { padding-top: 23px;
}
/* Shutter Out Horizontal */
.navbar-default .navbar-nav > li > a { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; background-color: transparent; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; border-bottom: 1px solid transparent; color: white!important; font-family: 'Montserrat', sans-serif; font-size: 0.8em; letter-spacing: 2px;
}
.navbar-default .navbar-nav > li > a:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; r-bottom: 2px solid #000; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; color: #000; transition: ease 0.5s;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:active { color: #000; transition: ease 0.5s;
}
.navbar-default .navbar-nav > li > a:hover:before,
.navbar-default .navbar-nav > li > a:focus:before,
.navbar-default .navbar-nav > li > a:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); transition: ease 0.5s;
}
.hader .nav.navbar-nav.pull-right { margin-top: 2%;
}
.video-part-content .carousel-caption h1 { font-size: 50px;
}
.video-part-content .carousel-caption p { font-size: 20px;
}
.affix { width: 100%; transition: ease 0.5s; background: rgba(11, 25, 45, 0.93)!important; opacity: 0.8; border-bottom: 2px solid #5775bd !important;
}
.navbar-default.affix .navbar-nav > li > a { color: #333;
}
.btn-info { background: #5674bc; border: 1px solid #5674bc; border-radius: 0px; transition: ease 0.5s;
}
.btn-info { color: #5674bc; transition: ease 0.5s;
}
.full-width { width: 100%; float: left;
}
.video-part-content .btn-info:hover { color: #fff; border: 1px solid #fff; transition: ease 0.5s; background: transparent;
}
.navbar-default { background-color: transparent; border: none;
}
.navbar-default .navbar-nav > li > a { color: #fff;
}
.navbar-nav > li > a { padding-bottom: 6px; padding-top: 15px;
}
.btn-info { background: #5674bc none repeat scroll 0 0; border: 1px solid #5674bc; border-radius: 0; color: #fff; transition: all 0.5s ease 0s;
}
@-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; }
}
@keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; }
}
.fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown;
}
@-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; }
}
@keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; }
}
.fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; animation-delay: 1s; animation-duration: 2s;
}
.dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none;
}
li.dropdown { display: inline-block;
}
.dropdown-content { display: none; position: absolute; background-color: #132134; min-width: 200px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1;
}
.dropdown-content a { color: white; padding: 12px 16px; text-decoration: none; display: block; text-align: right; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 300;
}
.dropdown-content a:hover { color: #FFA726; text-decoration: none; padding: 12px 16px; text-decoration: none; display: block; text-align: right; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 300; background-color: #132134!important;
}
.dropdown-content a:hover { background-color: #f1f1f1
}
.dropdown:hover .dropdown-content { display: block;
}
/*START SLIDER CSS */
/* */
/* */
.slider_item1 { min-height: 700px;
}
.slider_bg_1 { background-image: url("http://commonpixel.com/themes/edgar/images/examples/photo_02.jpg"); background-size: cover; background-attachment: fixed;
}
.slider_bg_2 { background-image: url("http://commonpixel.com/themes/edgar/images/examples/slideshow_01.jpg"); background-size: cover; background-attachment: fixed;
}
.slider_bg_3 { background-image: url("http://commonpixel.com/themes/edgar/images/examples/slideshow_03.jpg"); background-size: cover; background-attachment: fixed;
}
.overlay_background { height: 700px; width: 100%; background: rgba(11, 25, 45, 0.4);
}
.description { margin-top: 250px;
}
.title { color: #fff;
}
.title p { margin: 0 0 5px 0; font-family: "Montserrat", sans-serif; font-weight: 300; font-size: 0.9em; text-transform: uppercase;
}
.title h1 { font-weight: 600; margin-bottom: 80px; font-size: 50px; color: #fff;
}
.button { position: relative; display: inline-block; padding: 8px 28px; background: none; font-weight: normal; text-transform: uppercase; font-size: .9em;
}
.button.primary { background: #ffa726; color: #fff;
}
.button.primary:hover { background: #0b192d; color: #fff; text-decoration: none;
}
.button.large { padding: 10px 35px;
}
.button.transparent { background: rgba(255, 255, 255, 0.2); outline: 1px solid rgba(255, 255, 255, 0.4); color: #fff; margin-left: 20px;
}
.button.transparent:hover { background: #0b192d; outline: 1px solid #0b192d; color: #fff; text-decoration: none;
}
.button.large { padding: 10px 35px;
}
.title .break { display: block;
}
element.style {}
.carousel-indicators li { display: inline-block; width: 10px; height: 30px!important; margin: 1px; text-indent: -999px; cursor: pointer; background-color: #FFA726!important; background-color: rgba(0, 0, 0, 0); border: 1px solid #0B192D!important; border-radius: 0px!important;
}
.carousel-indicators .active { width: 12px; height: 15px!important; margin: 0; background-color: #0B192D!important;
}
/* */
/* */
/*END SLIDER CSS */
/* */
/* */
/* START SOLUTION SECTION */
.sectionTitle p { text-transform: uppercase; color: #ffa726; font-weight: 300; font-size: 12px; font-family: "Montserrat", sans-serif; margin-bottom: 25px; line-height: 1; position: relative;
}
.sectionTitle .title { color: #23344b; font-size: 2.2em; line-height: normal; margin-bottom: 50px; font-family: 'Montserrat', sans-serif; font-weight: 600;
}
.iconBox3 { padding-left: 40px; margin: 20px 0; position: relative;
}
.iconBox3 .icon { position: absolute; left: 0; top: 2px; font-size: 1.4em; color: #ffa726;
}
.iconBox3 h5 { text-transform: uppercase; font-size: 1em; margin-bottom: 20px; font-family: 'Montserrat', sans-serif; font-weight: 600; color: #23344b; line-height: 1.4;
}
.iconBox3 p { margin-bottom: 0;
}
#solution { background-color: #F3F8FA; padding-top: 70px; padding-bottom: 70px;
}
/* */
/* */
/* END SOLUTION SECTION */
/* */
/* */
/* MEDIA QUERY */
@media only screen and (max-width:767px) and (min-width:103px) { .title h1 { font-weight: 600; margin-bottom: 80px; font-size: 30px; color: #fff; } .button.transparent { background: rgba(255, 255, 255, 0.2); outline: 1px solid rgba(255, 255, 255, 0.4); color: #fff; margin-left: 0px; margin-top: 20px; }
}
/* */
/* */
/* TABBED SLIDER */
.iconTabs .nav1 a { position: relative; padding: 15px 20px 20px 60px; color: #51556a; background: #f3f8fa; display: block; margin-bottom: 10px; -moz-transition: all linear 0.3s; -webkit-transition: all linear 0.3s; transition: all linear 0.3s;
}
.iconTabs .nav1 a .icon { position: absolute; left: 20px; top: 25px; font-size: 1.5em; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.iconTabs .nav1 a h6 { margin-bottom: 0; text-transform: uppercase; font-size: .85em; -moz-transition: all linear 0.3s; -webkit-transition: all linear 0.3s; transition: all linear 0.3s; font-family: 'Montserrat', sans-serif; font-weight: 600; color: #23344b; line-height: 1.4;
}
.iconTabs .nav1 a p { margin-bottom: 0; font-size: .85em;
}
.iconTabs .nav1 a.active,
.iconTabs .nav1 a:hover { background: #ffa726; color: #fff;
}
.iconTabs .nav1 a.active,
.iconTabs .nav1 a:hover { background: #ffa726; color: #fff;
}
.mBase25 { margin-bottom: 25px;
}
.mBase25 img { width: 100%;
}
.sectionTitle p { text-transform: uppercase; color: #ffa726; font-weight: 300; font-size: 12px; font-family: "Montserrat", sans-serif; margin-bottom: 25px; line-height: 1; position: relative;
}
.sectionTitle .title { color: #23344b; font-size: 2.2em; line-height: normal; margin-bottom: 50px; margin-bottom: 20px; font-family: 'Montserrat', sans-serif; font-weight: 600; color: #23344b; line-height: 1.4;
}
.progressBarWrap { margin-top: 80px;
}
.progressBar { margin-bottom: 60px; margin-top: 30px; background: #f3f8fa; width: 100%; border-radius: 4px; position: relative;
}
.progressBar .wrap { width: 0; position: relative;
}
.progressBar .inner { height: 8px; width: 100%; border-radius: 4px; overflow: hidden; background: #ffa726;
}
.progressBar .wrap .no { position: absolute; bottom: 15px; right: 0; font-weight: bold;
}
.progressBar .info { position: absolute; bottom: 15px; text-transform: uppercase; font-weight: 300; margin: 0; font-size: .9em; left: 0; font-family: 'Montserrat', sans-serif; color: #23344b;
}
.itemList li { margin-bottom: 8px; font-size: 0.9em; text-transform: uppercase; list-style-type: none;
}
.itemList i { color: #ffa726; font-size: 1em; margin-right: 10px; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
ul,
menu,
dir { display: block; list-style-type: disc; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; -webkit-padding-start: 0px!important;
}
.check_desc { color: #23344b; font-size: .98em; line-height: normal; margin-bottom: 50px; margin-bottom: 20px; font-family: 'Open Sans', sans-serif; color: #23344b; line-height: 1.4;
}
.core_values { margin-bottom: 20px; font-family: 'Montserrat', sans-serif; font-weight: 600; color: #23344b; line-height: 1.4;
}
.core_para { font-size: 13px; letter-spacing: 1px; margin-bottom: 1.6em; display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; color: #23344b;
}
.button { position: relative; display: inline-block; padding: 8px 28px; background: none; font-weight: normal; text-transform: uppercase; font-size: .9em;
}
.button { position: relative; display: inline-block; padding: 8px 28px; background: none; font-weight: normal; text-transform: uppercase; font-size: .9em;
}
.button.primary { background: #ffa726; color: #fff;
}
.button.primary:hover { background: #0b192d; color: #fff; text-decoration: none;
}
.set_slider_padding { padding-top: 70px;
}
#tabbed_slider { padding-top: 70px; padding-bottom: 70px;
}
/* */
/* TABBED SLIDER */
/* */
/* */
/* */
/* start servicees section */
.sectionTitle p { text-transform: uppercase; color: #ffa726; font-weight: 300; font-size: 12px; font-family: "Montserrat", sans-serif; margin-bottom: 25px; line-height: 1; position: relative;
}
.sectionTitle.white .title { color: #fff;
}
.sectionTitle.white p::after { background: #ccc;
}
.sectionTitle p::after { content: ""; position: absolute; top: 100%; left: 0; margin-top: 15px; height: 1px; width: 20px; background: #a1a8b4;
}
.service_item { background: rgba(11, 25, 45, 0.5); color: #fff; padding: 30px 30px 30px 80px; position: relative; -moz-transition: all linear 0.3s; -webkit-transition: all linear 0.3s; transition: all linear 0.3s;
}
.service_item i { color: #ffa726; font-size: 30px; position: absolute; top: 30px; left: 30px;
}
.elem:nth-child(-n+3) { margin-bottom: 20px;
}
.service_item h4 { text-transform: uppercase; font-size: 1em; color: #fff; margin-bottom: 20px; font-family: 'Montserrat', sans-serif; font-weight: 600; line-height: 1.4;
}
.service_item p { margin-bottom: 0; font-family: 'Open Sans', sans-serif; font-size: 13px;
}
.service_item:hover i { color: white;
}
.service_item:hover { background: rgba(255, 167, 38, .8); color: white;
}
.parallax { background-image: url("http://commonpixel.com/themes/edgar/images/examples/bg_parallax_03.jpg"); background-size: cover; background-attachment: fixed;
}
.parallax .inner { padding-top: 60px; padding-bottom: 60px; background: rgba(11, 25, 45, 0.8);
}
/* */
/* */
/* END SERVICES SECTION */
/* */
/* */
/* START GALLERY SECTION */
/*===========================================*/
/* This is the Main Stylesheet for LUKA - Creative Multi-Purpose HTML Template
/* Theme Author: ilmosys
/* Theme URL: http://ilmosys.com/html/luka/
/* Version: 1.0
==============================================
CSS Style Structure
- Imports
- General
- Menu/Navigation
- Hero / Slider
- Buttons
- Page Body/Content
- Sidebar
- Footer Section
- Single Page
/*===========================================*/
/* =======================================
Imports
========================================*/
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Inconsolata:400,700);
@import url(https://fonts.googleapis.com/css?family=Montserrat+Alternates:400,700);
@font-face { font-family: 'Montserrat Black'; src: url('../fonts/montserrat-black-webfont.eot'); src: url('../fonts/montserrat-black-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/montserrat-black-webfont.woff') format('woff'), url('../fonts/montserrat-black-webfont.svg') format('svg');
}
@font-face { font-family: 'Montserrat Light'; src: url('../fonts/montserrat-light-webfont.eot'); src: url('../fonts/montserrat-light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/montserrat-light-webfont.woff') format('woff'), url('../fonts/montserrat-light-webfont.svg') format('svg');
}
@font-face { font-family: 'Montserrat Bold'; src: url('../fonts/montserrat-bold-webfont.eot'); src: url('../fonts/montserrat-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/montserrat-bold-webfont.woff') format('woff'), url('../fonts/montserrat-bold-webfont.svg') format('svg');
}
@font-face { font-family: 'Inconsolata'; src: url('../fonts/inconsolata-webfont.eot'); src: url('../fonts/inconsolata-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/inconsolata-webfont.woff') format('woff'), url('../fonts/inconsolata-webfont.svg') format('svg');
}
/* =======================================
General
========================================*/
@media (min-width: 1200px) { .container { width: 1200px; }
}
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;
}
.clearfix { display: inline-block
}
* html .clearfix { height: 1%
}
.nopadding { padding: 0
}
.nopaddingleft { padding-left: 0; margin-left: -20px;
}
.nomargin { margin: 0
}
.highlight { color: #A4A4A4
}
.spacer { padding-top: 100px
}
.midspacer { padding-top: 50px
}
span.lighter { font-family: 'Montserrat Light'; font-weight: 100;
}
/* Portfolio
===========================================*/
.content-area { padding: 6% 0;
}
.portfolio-item { position: relative; width: 100%; height: 100%; overflow: hidden; display: block; margin-bottom: 30px; margin-bottom: 13px!important;
}
.portfolio-item h4 { font-weight: 900; text-transform: uppercase; font-size: 18px; letter-spacing: 1px; color: #ffffff;
}
.portfolio-item span { text-transform: uppercase; letter-spacing: 2px; font-weight: 100;
}
.hover-bg { position: absolute; background: rgba(11, 25, 45, 0.8); width: 100%; height: 100%; opacity: 0; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;
}
.hover-txt { padding: 30px 30px 40px 30px; position: absolute; bottom: 0; color: #ffffff; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; -webkit-transform: translateY(-100px); -moz-transform: translateY(-100px); -ms-transform: translateY(-100px); -o-transform: translateY(-100px); transform: translateY(-100px);
}
.portfolio-item:hover .hover-bg { opacity: 1;
}
.portfolio-item:hover .hover-bg .hover-txt { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0);
}
/* Layout Two
====================*/
/* Index Style Two - Box Portfolio */
.layout-two .portfolio-item { margin: 0;
}
.layout-two .portfolio-item i { font-size: 60px;
}
.layout-two .hover-txt { text-align: center; padding: 25% 0; position: inherit;
}
.layout-two .hover-bg { padding: 20px;
}
.border { border: 4px solid #F0EBEB; display: block; height: 100%; width: 100%;
}
.layout-two .hover-txt,
.layout-two .hover-txt h4,
.layout-two .hover-txt span { -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; -webkit-transform: translateY(-100px); -moz-transform: translateY(-100px); -ms-transform: translateY(-100px); -o-transform: translateY(-100px); transform: translateY(-100px);
}
.layout-two .hover-txt:hover,
.layout-two .hover-txt:hover h4,
.layout-two .hover-txt:hover span { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0);
}
.center { text-align: center;
}
/* */
/* */
/* END GALLERY SECTION */
/* */
/* */
/* START COUNTER SECTION */
.p-y-2 {}
.p-y-3 {}
.m-b-1 {}
.m-t-1 {}
/*========================================================== counter section style ============================================================*/
#counter { padding-bottom: 70px;
}
.main_counter_area { overflow: hidden;
}
.main_counter_area .main_counter_content .single_counter { background-image: url("http://commonpixel.com/themes/edgar/images/examples/bg_parallax_01.jpg"); background-size: cover; background-attachment: fixed; color: #fff;
}
.counter_overlay { background: rgba(11, 25, 45, 0.8); height: 100%; width: 100%; padding-top: 10px;
}
.main_counter_area .main_counter_content .single_counter i { font-size: 36px;
}
.counter_text { font-family: 'Open Sans', sans-serif; text-transform: uppercase; font-sizE: 13px;
}
.statistic-counter { font-size: 2.3em; margin-bottom: 5px; color: #ffa726;
}
/* */
/* */
/* END COUNTER SECTION */
/* */
/* */
/* */
#carousel { background-color: #F3F8FA; padding-top: 70px; padding-bottom: 70px;
}
.quote { color: #FFA726; text-align: center; margin-bottom: 30px;
}
/*-------------------------------*/
/* Carousel Fade Transition */
/*-------------------------------*/
#fade-quote-carousel.carousel { padding-bottom: 60px;
}
#fade-quote-carousel.carousel .carousel-inner .item { opacity: 0; -webkit-transition-property: opacity; -ms-transition-property: opacity; transition-property: opacity;
}
#fade-quote-carousel.carousel .carousel-inner .active { opacity: 1; -webkit-transition-property: opacity; -ms-transition-property: opacity; transition-property: opacity;
}
#fade-quote-carousel.carousel .carousel-indicators { bottom: 10px;
}
#fade-quote-carousel.carousel .carousel-indicators > li { background-color: #e84a64; border: none;
}
#fade-quote-carousel blockquote { text-align: center; border: none;
}
#fade-quote-carousel .profile-circle { width: 100px; height: 100px; margin: 0 auto; border-radius: 100px;
}
#fade-quote-carousel.carousel .carousel-indicators > li { background-color: #FFA726!important; border: none!important;
}
#fade-quote-carousel.carousel .carousel-indicators li { display: inline-block; width: 10px!important; height: 10px!important; margin: 1px; text-indent: -999px; cursor: pointer; background-color: #000 \9; background-color: rgba(0, 0, 0, 0); border: 1px solid #fff; border-radius: 10px;
}
.author h5 { margin-bottom: 20px; font-family: 'Montserrat', sans-serif; font-weight: 600; color: #23344b; line-height: 1.4;
}
.author p { color: #FFA726; font-size: 14px; font-family: 'Montserrat', sans-serif;
}
.test_para { font-family: 'Montserrat', sans-serif!important; color: #0B192D;
}
.testimonial_overlay {}
/* */
/* */
/* */
.sectionTitle.center { text-align: center;
}
.article { margin-bottom: 30px; border-bottom: 3px solid transparent; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;
}
.article .photo { overflow: hidden; position: relative; z-index: 10;
}
.article img { display: block; max-width: 100%; width: 100%; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden;
}
.article .info { background: #f3f8fa; padding: 25px;
}
.article p.cat { text-transform: uppercase; margin-bottom: 15px; font-size: .8em;
}
.article .info p { color: #9ca0b1; font-size: 0.9em;
}
.article .info h5 { margin-bottom: 15px; font-size: 1.2em; color: inherit; margin-bottom: 20px; font-family: 'Montserrat', sans-serif; font-weight: 600; color: #23344b; line-height: 1.4;
}
.article a { color: #23344b; display: block;
}
.article p.author { margin-bottom: 0;
}
.article.quote { text-align: center; position: relative; padding: 30px; background: #ffa726;
}
.article:hover { border-bottom: 3px solid #ffa726;
}
.article.quote:hover { border-bottom: 3px solid #23344b; text-decoration: none;
}
.article.quote:hover a { text-decoration: none;
}
.article.quote .info { padding: 0; background: none;
}
.photo { position: relative; overflow: hidden;
}
.photo img { max-width: 100%; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s;
}
.article:hover img { -moz-transform: scale(1.7); -webkit-transform: scale(1.7); transform: scale(1.7);
}
.sectionBase { padding-top: 70px; padding-bottom: 70px;
}
.parallax { color: #fff; background-position: 50% 50%; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; position: relative;
}
.parallax .inner { padding-top: 60px; padding-bottom: 60px; background: rgba(11, 25, 45, 0.8);
}
.pricingTop { position: relative; margin-top: -210px;
}
.pricing .item { padding: 2em 2.5em; text-align: left; background: #f3f8fa; border-top: 3px solid #ffa726; margin-bottom: 30px;
}
.pricing .title { font-size: 1em; margin: 10px 0 20px 0; margin-bottom: 20px; font-family: 'Montserrat', sans-serif; font-weight: 600; color: #23344b; line-height: 1.4;
}
.pricing .price { font-size: 2em; font-weight: bold; padding: 0.5em 0 0.75em; border-top: 1px solid #dae4e8; margin: 0;
}
.pricing .info { padding: 0 0 1em 0; color: #9CA0A9; border-bottom: 1px solid #dae4e8;
}
.pricing .features { margin: 0; padding: 0.25em 0 2.5em; list-style: none; text-align: right;
}
.pricing .button { display: block; width: 100%; transition: 2s;
}
.pricing .button:hover { display: block; width: 100%; background-color: #ffa726; ;
}
.button.dark { background: #0b192d; color: #fff;
}
.pricing .best { background: #ffa726; color: #fff; padding: 3px 10px; font-weight: 300; display: inline-block; text-transform: uppercase; font-size: .75em; border-radius: 2px; position: absolute; left: 47px; top: 2px;
}
button { cursor: pointer; overflow: visible; border: none; font-size: 1em;
}
.pricingTitle .sectionTitle { padding-bottom: 170px; padding-top: 30px;
}
/* carousel */
.media-carousel { margin-bottom: 0; padding: 0 40px 30px 40px; margin-top: 30px;
}
/* Previous button */
.media-carousel .carousel-control.left { left: -12px; background-image: none; background: none repeat scroll 0 0 #222222; border: 4px solid #FFFFFF; border-radius: 23px 23px 23px 23px; height: 40px; width: 40px; margin-top: 30px
}
/* Next button */
.media-carousel .carousel-control.right { right: -12px !important; background-image: none; background: none repeat scroll 0 0 #222222; border: 4px solid #FFFFFF; border-radius: 23px 23px 23px 23px; height: 40px; width: 40px; margin-top: 30px
}
/* Changes the position of the indicators */
.media-carousel .carousel-indicators { right: 50%; top: auto; bottom: 0px; margin-right: -19px;
}
/* Changes the colour of the indicators */
.media-carousel .carousel-indicators li { background: #c0c0c0;
}
.media-carousel .carousel-indicators .active { background: #333333;
}
.media-carousel img { width: 40%;
}
/* End carousel */
#company { padding-top: 0px; padding-bottom: 70px;
}
.company_image { margin-top: 20px;
}
.mastFooter { position: relative; text-align: left; color: #abacb1; overflow: hidden; background: url(http://commonpixel.com/themes/edgar/images/examples/bg_parallax_05.jpg) no-repeat 50% 50% / cover fixed;
}
.mastFooter .inner { padding: 60px 0; background: rgba(11, 25, 45, 0.85);
}
.mastFooter .banner { border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-bottom: 45px; margin-bottom: 50px; color: #fff;
}
.banner h3 { margin-bottom: 5px; font-size: 2em; font-family: 'Montserrat', sans-serif; font-weight: 600; line-height: 1.4;
}
.rightAlign { text-align: right;
}
.banner .button { margin-top: 15px;
}
.mastFooter .logo { margin-bottom: 30px;
}
.mastFooter .copyright { font-size: 12px; margin-bottom: 0;
}
.mastFooter h6 { color: #fff; margin: 0 0 40px 0; font-weight: 300; font-family: 'Montserrat', sans-serif; line-height: 1.4
}
.mastFooter .links,
.mastFooter .contact { margin: 0;
}
.mastFooter a { color: #abacb1;
}
.links,
.contact { list-style-type: none;
}
.links li,
.contact li { margin-top: 10px;
}
.links li a:hover { text-decoration: none; color: #ffa726; text-decoration: none; -o-transition: color 0.2s ease-in; -webkit-transition: color 0.2s ease-in; -moz-transition: color 0.2s ease-in; transition: color 0.2s ease-in;
}
.mastFooter .social li { display: inline-block; margin-right: 10px;
}
.mastFooter .social a { color: #ffa726;
}
.mastFooter .social a:hover { color: white;
}

A Pen by MOHIM - Script Codes JS Codes

/* */
/* */
/* START SLIDER SCRIPY */
(function() { var Util, __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }; Util = (function() { function Util() {} Util.prototype.extend = function(custom, defaults) { var key, value; for (key in custom) { value = custom[key]; if (value != null) { defaults[key] = value; } } return defaults; }; Util.prototype.isMobile = function(agent) { return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(agent); }; return Util; })(); this.WOW = (function() { WOW.prototype.defaults = { boxClass: 'wow', animateClass: 'animated', offset: 0, mobile: true }; function WOW(options) { if (options == null) { options = {}; } this.scrollCallback = __bind(this.scrollCallback, this); this.scrollHandler = __bind(this.scrollHandler, this); this.start = __bind(this.start, this); this.scrolled = true; this.config = this.util().extend(options, this.defaults); } WOW.prototype.init = function() { var _ref; this.element = window.document.documentElement; if ((_ref = document.readyState) === "interactive" || _ref === "complete") { return this.start(); } else { return document.addEventListener('DOMContentLoaded', this.start); } }; WOW.prototype.start = function() { var box, _i, _len, _ref; this.boxes = this.element.getElementsByClassName(this.config.boxClass); if (this.boxes.length) { if (this.disabled()) { return this.resetStyle(); } else { _ref = this.boxes; for (_i = 0, _len = _ref.length; _i < _len; _i++) { box = _ref[_i]; this.applyStyle(box, true); } window.addEventListener('scroll', this.scrollHandler, false); window.addEventListener('resize', this.scrollHandler, false); return this.interval = setInterval(this.scrollCallback, 50); } } }; WOW.prototype.stop = function() { window.removeEventListener('scroll', this.scrollHandler, false); window.removeEventListener('resize', this.scrollHandler, false); if (this.interval != null) { return clearInterval(this.interval); } }; WOW.prototype.show = function(box) { this.applyStyle(box); return box.className = "" + box.className + " " + this.config.animateClass; }; WOW.prototype.applyStyle = function(box, hidden) { var delay, duration, iteration; duration = box.getAttribute('data-wow-duration'); delay = box.getAttribute('data-wow-delay'); iteration = box.getAttribute('data-wow-iteration'); return box.setAttribute('style', this.customStyle(hidden, duration, delay, iteration)); }; WOW.prototype.resetStyle = function() { var box, _i, _len, _ref, _results; _ref = this.boxes; _results = []; for (_i = 0, _len = _ref.length; _i < _len; _i++) { box = _ref[_i]; _results.push(box.setAttribute('style', 'visibility: visible;')); } return _results; }; WOW.prototype.customStyle = function(hidden, duration, delay, iteration) { var style; style = hidden ? "visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;" : "visibility: visible;"; if (duration) { style += "-webkit-animation-duration: " + duration + "; -moz-animation-duration: " + duration + "; animation-duration: " + duration + ";"; } if (delay) { style += "-webkit-animation-delay: " + delay + "; -moz-animation-delay: " + delay + "; animation-delay: " + delay + ";"; } if (iteration) { style += "-webkit-animation-iteration-count: " + iteration + "; -moz-animation-iteration-count: " + iteration + "; animation-iteration-count: " + iteration + ";"; } return style; }; WOW.prototype.scrollHandler = function() { return this.scrolled = true; }; WOW.prototype.scrollCallback = function() { var box; if (this.scrolled) { this.scrolled = false; this.boxes = (function() { var _i, _len, _ref, _results; _ref = this.boxes; _results = []; for (_i = 0, _len = _ref.length; _i < _len; _i++) { box = _ref[_i]; if (!(box)) { continue; } if (this.isVisible(box)) { this.show(box); continue; } _results.push(box); } return _results; }).call(this); if (!this.boxes.length) { return this.stop(); } } }; WOW.prototype.offsetTop = function(element) { var top; top = element.offsetTop; while (element = element.offsetParent) { top += element.offsetTop; } return top; }; WOW.prototype.isVisible = function(box) { var bottom, offset, top, viewBottom, viewTop; offset = box.getAttribute('data-wow-offset') || this.config.offset; viewTop = window.pageYOffset; viewBottom = viewTop + this.element.clientHeight - offset; top = this.offsetTop(box); bottom = top + box.clientHeight; return top <= viewBottom && bottom >= viewTop; }; WOW.prototype.util = function() { return this._util || (this._util = new Util()); }; WOW.prototype.disabled = function() { return !this.config.mobile && this.util().isMobile(navigator.userAgent); }; return WOW; })();
}).call(this);
wow = new WOW( { animateClass: 'animated', offset: 100 }
);
wow.init();
/* */
/* */
/*END SLIDER SCRIPT */
/* COUNTER */ // Counter jQuery('.statistic-counter').counterUp({ delay: 10, time: 2000 });
/* COUNTER */
A Pen by MOHIM - Script Codes
A Pen by MOHIM - Script Codes
Home Page Home
Developer MOHIM
Username MOHIM
Uploaded November 22, 2022
Rating 3
Size 14,664 Kb
Views 12,144
Do you need developer help for A Pen by MOHIM?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

MOHIM (MOHIM) Script Codes
Name
Navigation var
Portfolio
Faq
New
Mop-2
EConnect
Big-1
Jq_xam
Footer item for projects
Bulsy
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!