Skip to content

Instantly share code, notes, and snippets.

@Jblew

Jblew/wise-temp-landing-page-better.html

Created September 18, 2018 18:37
Show Gist options
  • Save Jblew/68a627b9669c5dc49bc0b76d632cbb4f to your computer and use it in GitHub Desktop.
Save Jblew/68a627b9669c5dc49bc0b76d632cbb4f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Jblew created this gist Sep 18, 2018.
    313 changes: 313 additions & 0 deletions wise-temp-landing-page-better.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,313 @@


    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../../favicon.ico">

    <title>Carousel Template for Bootstrap</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <style type="text/css">
    /* GLOBAL STYLES
    -------------------------------------------------- */
    /* Padding below the footer and lighter body text */

    body {
    padding-top: 3rem;
    padding-bottom: 3rem;
    color: #5a5a5a;
    }


    /* CUSTOMIZE THE CAROUSEL
    -------------------------------------------------- */

    /* Carousel base class */
    .carousel {
    margin-bottom: 4rem;
    }
    /* Since positioning the image, we need to help out the caption */
    .carousel-caption {
    bottom: 3rem;
    z-index: 10;
    max-width: 50%;
    }

    /* Declare heights because of positioning of img element */
    .carousel-item {
    height: 32rem;
    background-color: #777;
    }
    .carousel-item > img {
    position: absolute;
    left: 50%;
    top: 50%;
    min-height: 32rem;
    min-width: 100%;
    max-width: 140%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    }

    @media (max-width: 66em) {
    .carousel-item > img {
    height: 100%;
    min-width: 100%;
    max-width: initial;
    }
    }

    .carousel-item > .overlay {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    background: linear-gradient(5deg, rgba(0,0,0,0.7) 30%, rgba(0, 0, 0, 0.3) 70%);
    }


    /* MARKETING CONTENT
    -------------------------------------------------- */

    /* Center align the text within the three columns below the carousel */
    .marketing .col-lg-4 {
    margin-bottom: 1.5rem;
    text-align: center;
    }
    .marketing h2 {
    font-weight: 400;
    }
    .marketing .col-lg-4 p {
    margin-right: .75rem;
    margin-left: .75rem;
    }


    /* Featurettes
    ------------------------- */

    .featurette-divider {
    margin: 5rem 0; /* Space out the Bootstrap <hr> more */
    }

    /* Thin out the marketing headings */
    .featurette-heading {
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.05rem;
    }


    /* RESPONSIVE CSS
    -------------------------------------------------- */

    @media (min-width: 40em) {
    /* Bump up size of carousel content */
    .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
    }

    .featurette-heading {
    font-size: 50px;
    }
    }

    @media (min-width: 62em) {
    .featurette-heading {
    margin-top: 7rem;
    }
    }
    </style>
    </head>
    <body>

    <header>
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <a class="navbar-brand" href="#"><img class="wise-logo" style="height: 1.25rem;" alt="Wise" src="http://0.0.0.0:4000/steem-wise-manual/assets/images/wise-white-color.svg" /></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
    <a class="nav-link" href="#">Manual</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Voting page</a>
    </li>
    <li class="nav-item">
    <a class="nav-link disabled" href="#" title="Coming soom">Platform</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Witness</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Team</a>
    </li>
    </ul>
    </div>
    </nav>
    </header>

    <main role="main">

    <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
    <div class="carousel-item active">
    <img class="second-slide" src="http://0.0.0.0:4000/steem-wise-manual/assets/images/splashes/La_scuola_di_Atene-crop.jpg" alt="Second slide">
    <div class="overlay"></div>
    <div class="container">
    <div class="carousel-caption text-left">
    <h1>
    <img class="wise-logo" style="height: 4rem;" alt="Wise" src="http://0.0.0.0:4000/steem-wise-manual/assets/images/wise-white-color.svg" />
    </h1>
    <h3>A vote delegation system for Steem blockchain</h3>
    <p>Let others vote on your behalf.</p>
    <p><a class="btn btn-lg btn-outline-light" href="#" role="button">Read about wise</a></p>
    </div>
    </div>
    </div>
    <div class="carousel-item">
    <img class="first-slide" src="http://0.0.0.0:4000/steem-wise-manual/assets/images/splash-d2.jpg" alt="First slide">
    <div class="overlay"></div>
    <div class="container">
    <div class="carousel-caption text-left">
    <h1>
    <img class="wise-logo" style="height: 4rem;" alt="Wise" src="http://0.0.0.0:4000/steem-wise-manual/assets/images/wise-white-color.svg" />
    </h1>
    <h3>Expert system for steem</h3>
    <p>Delegating your vote to experts leads to better curation on steem.</p>
    <p><a class="btn btn-lg btn-outline-light" href="#" role="button">See how to delegate</a></p>
    </div>
    </div>
    </div>

    <div class="carousel-item">
    <img class="third-slide" src="http://0.0.0.0:4000/steem-wise-manual/assets/images/splashes/michelangelo-moses-crop.jpg" alt="Third slide">
    <div class="overlay"></div>
    <div class="container">
    <div class="carousel-caption text-left">
    <h1>
    <img class="wise-logo" style="height: 4rem;" alt="Wise" src="http://0.0.0.0:4000/steem-wise-manual/assets/images/wise-white-color.svg" />
    </h1>
    <h3>Become an expert</h3>
    <p>Ask others to delegate you their vote.</p>
    <p><a class="btn btn-lg btn-outline-light" href="#" role="button">Register as an expert</a></p>
    </div>
    </div>
    </div>
    </div>
    <a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
    </a>
    </div>


    <!-- Marketing messaging and featurettes
    ================================================== -->
    <!-- Wrap the rest of the page in another container to center all the content. -->

    <div class="container marketing">

    <!-- Three columns of text below the carousel -->
    <div class="row">
    <div class="col-lg-4">

    <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
    <h2>Heading</h2>
    <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
    <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
    </div><!-- /.col-lg-4 -->
    <div class="col-lg-4">
    <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
    <h2>Heading</h2>
    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
    <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
    </div><!-- /.col-lg-4 -->
    <div class="col-lg-4">
    <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
    <h2>Heading</h2>
    <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
    <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
    </div><!-- /.col-lg-4 -->
    </div><!-- /.row -->


    <!-- START THE FEATURETTES -->

    <hr class="featurette-divider">

    <div class="row featurette">
    <div class="col-md-7">
    <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>
    <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
    </div>
    <div class="col-md-5">
    <img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
    </div>
    </div>

    <hr class="featurette-divider">

    <div class="row featurette">
    <div class="col-md-7 order-md-2">
    <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
    <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
    </div>
    <div class="col-md-5 order-md-1">
    <img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
    </div>
    </div>

    <hr class="featurette-divider">

    <div class="row featurette">
    <div class="col-md-7">
    <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
    <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
    </div>
    <div class="col-md-5">
    <img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
    </div>
    </div>

    <hr class="featurette-divider">

    <!-- /END THE FEATURETTES -->

    </div><!-- /.container -->


    <!-- FOOTER -->
    <footer class="container">
    <p class="float-right"><a href="#">Back to top</a></p>
    <p>&copy; 2017-2018 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
    </footer>
    </main>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    </body>
    </html>