Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <title>Green Marker</title>
  <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <meta charset="UTF-8">
    <meta name="description" content="Best Web Design">
    <meta name="keywords" content="website builders small business web design, cheap small business website design, cheap website design, web page design, cheap website design, cheap website, buy a website, website service, seo, search engine optimization, cheap visual designs, website marketing, designer quote, quote for website, website quote, buy website, custom website, designer quote for website, buy, website, bootstrap website, buy bootstrap website, purchase website, make website, find a website vendor, website vendor">
    <meta name="author" content="Clemente Garcia-Huerta">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <!-- Normalize-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
​
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <!-- MY JS -->
    <script src="js/script.js"></script>
    <!-- My CSS -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <meta property="og:url"                content="http://www.greenmarker.co" />
    <meta property="og:type"               content="company" />
    <meta property="og:title"              content="Great Websites For A Great Deal" />
    <meta property="og:description"        content="Get A Deal On Your Website With Green Marker" />
    <meta property="og:image"              content="images/whiteboard.jpg" />
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-83806690-4"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
​
    gtag('config', 'UA-83806690-4');
    </script>
    </head>
<body>
<header>
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="index.html"><img class="home" src="images/logo-01.svg"></a>
 <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav bg-light mr-auto mt-2 mt-lg-0">
      <li class="nav-item ">      
        <a class="nav-link" href="#01">Better Rank</a>
      </li>
      <li class="nav-item ">
        <a class="nav-link" href="#02">Marketing</a>        
      </li>   
      <li class="nav-item ">
        <a class="nav-link" href="#03">Visual Design</a>
      </li>     
      <li class="nav-item">
        <a class="nav-link" href="#04">Track Traffic</a>                
      </li>
      <li class="nav-item">
        <a class="nav-link" href="pages/samples.html">Website Samples</a>        
      </li>
      <li class="nav-item">
        <a class="nav-link" href="pages/prices.html">Prices</a>        
      </li>
      <li class="nav-item">
        <a class="nav-link" href="form/contact-form.html">Contact</a>        
      </li>
    </ul>
  </div>
</nav>
​
</header>
<section class="container-fluid pad-50 padding-off">
  <section class="row">
    <div class="col-12 col-sm-12 col-md-12 col-lg-5 bg-dark pad-50">
      <h1 class="col-12 lg-top-text pad-50">Websites starting<br>
      as low as<span class="green"> 5k.</span></h1>
      <h1 class="col-12 lg-top-text"><span class="green">Great look on all devices.</span><br>
      Quick loading<span class="green"> speed.</span><br>
      User tracking.<br>
      Great branding.</h1>
      <h1 class="col-12 sm-top-text col-12 col-md-12 col-lg-12">We work with the best designers, developers and marketing team to meet your business needs.</h1>
      <div class="col-12">
        <a href="pages/samples.html"><div class="btn btn-secondary ">Website Samples</div></a>
        <a href="pages/prices.html"><div class="btn btn-secondary ">Prices</div></a>
      </div>  
    </div>
<div class="col-12 col-sm-12 col-md-12 col-lg-7 padding-off">    
  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img class="d-block img-fluid padding-off" src="http://trinityplaceshelter.org/wp-content/uploads/2015/12/Rectangle-1920x1080-Placeholder.png" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid padding-off" src="http://trinityplaceshelter.org/wp-content/uploads/2015/12/Rectangle-1920x1080-Placeholder.png" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid padding-off" src="http://www.triplethreatracing.org/wp-content/uploads/2016/05/placeholder-3.pnghttp://trinityplaceshelter.org/wp-content/uploads/2015/12/Rectangle-1920x1080-Placeholder.png" alt="Second slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>  
</div>
  </section>
  </body>
  </html>
 
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
}
h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    color: #333;
    padding: 24px;
    margin: 15px;
}
h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    color: #333;    
    padding: 18px;
}
p {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 2em;
    padding: 0 15px;
}
.home {
    position: relative;
    top: 0px;
    float: left;
    width: 150px;
    z-index: 9;
}
.nav-link {
    font-size: 12px;
    padding: 10px;
}
.navbar-toggler {
    margin-right: 15px;
}
.img-block {
    display: block;
    width: 100%;
}
.lg-top-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 800;
    padding: 15px 0; 
    color: #fff;
}
.lg-top-text-b {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 800;
    padding: 15px 0; 
    color: #333;
}
.sm-top-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400; 
    padding: 15px 0;  
    color: #fff;
}
.push-down {
    position: relative;
    top: 2px;
}
.green {
    color: #7ED321;
}
.pad-50 {
    padding-top: 50px;
}
.left {
    text-align: left;
}
.float-right {
    float: right;
}
.pad-50b {
    padding: 50px 30px 50px 30px;
}
.pad-200 {
    padding-top: 150px;
}
.carousel-item {
    overflow: hidden;
}
.pad-45 {
    padding-top: 42px;
}
.pad-b {
    padding: 15px 0;
}
.pad-left-15 {
    padding-left: 0px;
}
.margin-off {
    margin: 0px !important;
}
.padding-15 {
    padding: 15px;
}
.padding-30 {
    padding: 30px;
}
.marg-15 {
    margin: 0 15px;
}
.marg-15b {
    margin: 15px 0;
}
.marg-50 {
    margin-top: 50px 0 50px 50px;
​
}
.padding-50-bt {
    padding: 50px 0;
}
.pad-13 {
    padding-bottom: 13px !important;
}
.padding-15b {
    padding: 0 15px;
}
.padding-15c {
    padding: 15px 0;
}
.padding-15d {
    padding: 50px 15px;
}
.text-sm {
    font-size: 12px;
}
hr {
    color: #fff;
    background-color: #fff;
    margin: 15px;
}
.bg-dark {
    background-color: #333333 !important;
    color: #fff;
}
.bg-grey {
    background-color: #292b2c;
    color: #fff;
}
.lg {
    color: #91dc40;
}
.center-block {
    margin: 0 auto;
    float: none !important;
    text-align: center;
}
.center {
    margin: 0 auto;  
    float: none !important;      
}
.bl {
    color: #333;
}
.wt {
    color: #fff;
}
.blk {
    color: #333;
}
.bg-wt {
    background-color: #fff; 
}
.banner {
    position: relative;
    left: -15px;
    font-size: 9px;
}
.banner-2 {
    position: relative;
    left: -15px;
    font-size: 9px;    
}
.weight {
    font-family: 'Montserrat', sans-serif;    
    font-weight: 900;
}
.btn-2 {
    width: 150px;
}
.btn {
    border-radius: 0;
}
.btn-secondary {
    margin-bottom: 50px;
    border-color: #333;
}
.btn-secondary:active, .btn-secondary:link, .btn-secondary:hover  {
    margin-bottom: 50px;
    border-color: #333;
    color: #333;
    background-color: #fff;
}
.btn-primary {
    background-color: #333;
    color: #fff;
}
.arrow {
    width: 20px;
}
.bg-green {
    background-color: #84C441;
}
.bg-drk-green {
    background-color: #5B882C;
    height: 65px;
}
.move-up {
    position: relative;
    top: -15px;
}
.padding-off {
    padding: 0px;
    margin: 0px;
}
.take-15 {
    height: 211px;
}
.position-move-115 {
    position: relative;
    top: 80px;
}
.number, .number-4  {
    max-width: 180px;
    width: 100%;
}
.number-4 {
    position: relative;
    top: -15px;
}
.btn-secondary {
    background-color: #fff;
    color: #333;
}
.width-245 {
    width: 245px;
}
.underline {
    border-bottom: 1px solid #333;
}
.underline-2 {
    border-bottom: 1px solid #fff;
}
.navbar-nav {
    background-color: #fff;
}
a.nav-item {
    margin: 0 15px;
}
/* Small devices (tablets, 768px and up) */
@media screen and (min-width: 768px){ 
nav {
    height: 60px;
}    
h1 {
    font-size: 36px;
    padding: 24px;
    margin: 15px;
}
h2 {
    font-size: 24px;
    padding: 15px;
}
p {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 2em;
    padding: 0 15px;
}
.lg-top-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 36px;
}
.sm-top-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
}
.text {
    line-height: 1.0em;
}
​
.hover-1:hover {
    background-color: #6da534;
    transition-duration: .5s;
}
}
@media screen and (min-width: 1000px){ 
.col-lg-4 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 32.333333%;
    -ms-flex: 0 0 32.333333%;
    flex: 0 0 32.333333%;
    max-width: 32.333333%;
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { 
.col-lg-3b {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    flex: 0 0 20%; 
    max-width: 25%;
    margin: 15px;
}
​
}
@media (min-width: 1200px) {
.marg-lg-left-5 {
    margin-left: 5%;
}
​
}
/*Large devices (large desktops, 1200px and up) */
@media (min-width: 1400px) {
​
}
​
 
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers