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>
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body>
    <div class="container-fluid" id="firstSection">
      <div class="row firstSection" >
        <div class="titre1 text-uppercase">Qui somme-nous ?</div>
​
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 v-align">
          <p class="sousTitre quisommesnous">Nous nous présentons en quelques mots ...</p>
          <p class="quisommesnous">Vivamus tristique ligula ut commodo finibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin sit amet tellus blandit, tincidunt enim eu, consectetur leo. Pellentesque tincidunt sit amet risus quis placerat. Donec hendrerit arcu at magna sodales posuere.</p>
          <p class="quisommesnous">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi imperdiet accumsan lacus, sed efficitur justo rhoncus at. Duis eu velit accumsan, eleifend dui vitae, iaculis justo.</p>
          <button class="text-uppercase btn btn-default" id="bouton">En savoir plus</button>
        </div>
​
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 v-align">
          <img src="http://technologie-f-mauriac.jimdo.com/app/download/8664189394/bmp_oiseau004.bmp?t=1395577376" class="img-responsive" id="imageMeeting">
        </div>
      </div>
​
    </div>
  </body>
</html>
 
.navbar {
  margin-top : auto;
  margin-bottom : auto;
  background-color : white;
  border-color : #eee;
  height : 100px;
  text-color : #eee;
}
​
​
body {
  font-family : Roboto;
}
​
#firstSection {
  background-color: #F6F6F6;
  margin-bottom : 40px;
}
.firstSection {
​
}
​
#secondSection {
  background-color : white;
}
​
.titre1 {
  font-weight: bold;
  text-align : center;
  background-color : #30b1db;
  margin-left : auto;
  margin-right : auto;
  width : 230px;
  color : white;
  font-size: 20px;
  margin-top : 100px;
  padding : 5px;
  margin-bottom : 50px;
}
​
.quisommesnous {
  text-align : justify;
}
​
.sousTitre {
  font-weight: bold;
  color : #30b1db;
}
​
#imageMeeting {
​
}
​
    .v-align {
      vertical-align: middle;
      display: inline-block;
      float: none;
      max-width: 45%;
    }
​
​
#bouton {
  border-color : #30b1db;
  color : #30b1db;
  background-color: #F6F6F6;
  padding : 4px;
  width : 180px;
  font-weight: bold;
}
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers