Sandbox

In this example below you will see how to do a Sandbox with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by rjhartl, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright rjhartl ©

Technologies

  • HTML
  • CSS
  • JavaScript
    <html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">
      <div class="jumbotron">
        <header>
          <h1 class="text-center">Artisan 3 wolf moon schlitz health<small class="text-muted"></br>Gastropub swag copper mug etsy</small></h1> 
        </header><!-- End header -->
        <main>
          <div class="row">
            <div id="main-img" class="col-12">
              <figure class="figure figure-img img-thumbnail">
                <img class="img-fluid" src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg" alt="Lorem Ipsum">
                <figcaption class="figure-caption text-center">Squid cloud bread street art flannel keffiyeh readymade cold-pressed seitan.</figcaption>
              </figure>
            </div><!-- End main-img grid -->
            <div class="col-2">
            </div><!-- End spacer -->
            <div class="main-content col-9">
              <h2>Af tote bag bespoke photo booth</h2>
              <ul>
                 <li>Meditation next level bitters art party</li>
                 <li>Meditation next level bitters art party</li>
                 <li>Meditation next level bitters art party</li>
                 <li>Meditation next level bitters art party</li>
                 <li>Meditation next level bitters art party</li>
                 <li>Meditation next level bitters art party</li>
                 <li>Meditation next level bitters art party</li>
                 <li>Meditation next level bitters art party</li>   
              </ul>
              <blockquote>Fixie direct trade forage, organic la croix distillery stumptown PBR&B lomo cliche neutra VHS gochujang. Vegan williamsburg mumblecore chillwave gastropub migas flannel beard celiac.<cite> - Kurt Vonnegut, 1965</cite></blockquote>
              <p>Godard celiac sartorial crucifix, tumeric raw denim chicharrones echo park chia. Lyft twee meh, 8-bit four dollar toast activated charcoal pork belly gastropub. You can find more of his work <a href="#">on his website.</a></p>
             </div><!-- End main-content -->
          </div><!-- End main row -->
        </main><!-- End main -->
      </div><!-- End Jumbotron -->
      <footer>
        <p class="text-center">Written & Coded By: <a href="#">Roby Hartland</a></p>
      </footer><!-- End footer --> 
    </div><!-- End container>
    
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
  </body>
</html>

/*Downloaded from https://www.codeseek.co/rjhartl/sandbox-aLRzjo */
    


/*Downloaded from https://www.codeseek.co/rjhartl/sandbox-aLRzjo */
    

Comments