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">
  <title>JS Bin</title>
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:800,400' rel='stylesheet' type='text/css'>
</head>
<body>
  <div class="page-banner">
    <h1>Judo Rangliste</h1>
    <p class="subtitle">Eine simple Rangliste</p>
  </div>
  
  <div class="article">
    <h2>Haupt-Section</h2>
    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
    
    <div class="bilder-sammlung">
      Drei bilder
    </div>
    
    <h3>Rangliste</h3>
    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
    
    <div class="ranking-table">
      Ranglistentabelle
    </div>
    
    <div class="article-footer">
      geschrieben von dir
    </div>
  </div>
  
  <div class="page-footer">
    
  </div>
</body>
</html>
 
html {
  font-family: 'Open Sans', sans-serif;
  box-sizing: border-box;
}
​
* {
  box-sizing: inherit;
}
​
h1, h2, h3 {
  text-transform: uppercase;
  letter-spacing: -0.05em;
}
​
h1 {
  font-size: 50px;
  line-height: 1;
}
​
.page-banner {
  height: 300px;
  padding: 20px;
  background-image: url("http://upload.wikimedia.org/wikipedia/commons/1/12/Flickr_-_Government_Press_Office_(GPO)_-_A_JUDO_COMPETITION.jpg");
  background-position: center;
  background-size: cover;
  color: white;
}
​
.page-banner .subtitle {
  text-transform: uppercase;
  font-size: 20px;
}
Output 300px

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

Dismiss x
public
Bin info
gionkunzpro
0viewers