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>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <meta name="viewport" content="width=device-width">
  <title>Bootstrap webpage English</title>
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12 header"></div>
    </div>
    <div class="container-fluid">
      <div class="jumbotron">
        <h1>Dórika,</h1>
        <h2>the most effective antidepressant</h2>
        <div class="alert alert-success gomb">
        <a class="btn btn-success btn-lg" href="http://output.jsbin.com/cexital" target="_blank">Magyarul</a></div>
      </div>
    </div>
    <div class="container-fluid main">
    <div class="container-fluid">
      <p class="well">I do not need any 'British scientists' to prove as I have experienced it myself that Dórika represents a really effective class of antidepressants.</p>
    <ul>
      <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span>She is able to make me smile any time, no matter how early or late it is, or whatever happened to me during the day.</li>
      <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span>She is also able to make other people smile. Of course, with a few exceptions, but their condition might as well be regarded as therapy resistant.</li>
      </ul>
    </div>
    <div class="container-fluid">
      <div class="panel panel-success">
        <div class="panel-heading">
          <h3 class="panel-title">Let's have a look at some everyday pictures:</h3></div></div>
      <div class="row pictures">
        <div class="col-xs-12 col-sm-4"><img class="img-responsive img-rounded"  src="https://i.imgur.com/Uez3bwb.jpg/" title="Dórika wants to play" alt="Dórika wants to play"></div>
        <div class="col-xs-12 col-sm-4"><img class="img-responsive img-rounded" src="https://i.imgur.com/0bLm2QS.jpg/" title="Dórika is hiding something" alt="Dórika is hiding something"></div>
        <div class="col-xs-12 col-sm-4"><img class="img-responsive img-rounded" src="https://i.imgur.com/fDFsIaU.jpg/" title="Dórika with a Frisbee" alt="Dórika with a Frisbee"></div>
      </div>
      <div class="panel panel-success panel-short">
        <div class="panel-heading">
          <h3 class="panel-title">This is how she walks:</h3></div></div>
      <div class="embed-responsive embed-responsive-16by9 video"><iframe width="560" height="315" src="https://www.youtube.com/embed/00fnNBQoRPk" frameborder="0"></iframe></div>
    </div>
    <div class="container-fluid">
    <div class="panel panel-success panel-short">
      <div class="panel-heading">
          <h3 class="panel-title">And now, let's have a look at what she likes and what she loves:</h3></div></div>
    <div class="table-responsive">
    <table class="table table-bordered">
      <tr>
        <th><strong>What she likes</strong></th>
        <th><strong>What she loves</strong></th>
      </tr>
      <tr>
        <td>Playing with her Frisbee</td>
        <td>Eating an apple</td>
      </tr>
      <tr>
        <td>Playing with her rope toys</td>
        <td>Eating a carrot</td>
      </tr>
      <tr>
        <td>Playing with anything else</td>
        <td>Eating anything else</td>
      </tr>
    </table>
    </div>
    <div class="panel panel-success panel-short"><div class="panel-heading">
      <h3 class="panel-title">On second thought:</h3></div></div>
    <div class="table-responsive">
    <table class="table table-bordered">
      <tr>
        <th><strong>What she likes</strong></th>
        <th><strong>What she loves</strong></th>
      </tr>
      <tr>
        <td>Playing with her rope toys</td>
        <td>Eating a carrot</td>
      </tr>
      <tr>
        <td>Playing with her Frisbee</td>
        <td>Eating an apple</td>
      </tr>
      <tr>
        <td>Playing with anything else</td>
        <td>Eating anything else</td>
      </tr>
    </table>
    </div>
      <div class="panel panel-success panel-short"><div class="panel-heading">
      <h3 class="panel-title">Now you know Dórika. That's all for today; we are going for a walk now.</h3></div></div>
    </div>
    </div>
    <div class="container-fluid">
    <footer class="footer">
     <p> The background is from<a class="btn btn-link" href="http://backgroundlabs.com/item/seamless-paw-print-pattern/" target="_blank">here,</a> thanks.</p>
    </footer>
    </div>
  </div>
</body>
</html>
 
* {
  box-sizing: border-box;
}
body {
  background: url('https://i.imgur.com/zF28bGQ.png') repeat center;
  }
.container-fluid {
  padding-right: 1vw;
  padding-left: 1vw;
  margin-right: auto;
  margin-left: auto;
 }
.header {
  background: url('https://i.imgur.com/eGeq46l.jpg') no-repeat 30% center;
  width: 100vw;
  height: 100vh;
}
h1, h2 {
  text-align: center;
}
.glyphicon {
  padding: 1rem;
}
.pictures {
  margin-top: 2vh;
  margin-bottom: 2vh;
}
.video {
  margin-top: 2vh;
  margin-bottom: 2vh;
  width: 480px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.table {
  text-align: center;
  background-color: beige;
} 
th {
  text-align: center;
}
.btn-link {
  color: #5cb85c;
}
.gomb {
  display: block;
  margin-right: 0.5rem;
  text-align: right;
}
.footer {
  background-color: #eee;
  text-align: center;
}
.footer p {
  padding: 1.5rem;
}
​
@media (min-width: 2560px) {
  .header {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    background: url('https://i.imgur.com/eGeq46l.jpg') repeat center;
  width: 100vw;
  height: 100vh;
  }
  .panel-short {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}
}
@media (min-width: 768px) {
  .main {
    width: 80vw;
    margin-left: auto;
    margin-right: auto;
  }
  .footer {
    margin-left: auto;
    margin-right: auto;
  }
   .table {
    width: 600px;
    margin-left: auto;
    margin-right: auto;
      }
}
  @media (min-width: 1440px) {
  .panel-short {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
  }
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Timi36pro
0viewers