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>
</head>
<body>
  <p>body content</p>
  <div class="floated">image thingy</div>
  <div class="quotewrapper">
<blockquote class="templatequote pullquote boxquote"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim iaculis felis at varius. Duis eleifend imperdiet ultrices. Integer efficitur lectus at maximus ornare. Sed pharetra enim id ex scelerisque, imperdiet feugiat sapien ornare. Fusce eleifend diam neque, quis eleifend velit elementum non. Curabitur placerat, nunc sit amet bibendum sodales, lorem sapien ultricies ante, eget sollicitudin enim diam ut elit. Sed posuere eget lectus vitae fringilla. Integer quis pretium urna, in scelerisque tortor. Nulla lacinia ullamcorper tellus ac tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sollicitudin felis vitae erat faucibus dapibus. Maecenas.</p>
  <footer>— the author, <cite>the work</cite>, the publication</footer>  
</blockquote>
  </div>
  <p>more body content</p>
</body>
</html>
 
div.floated {
  float:left;
  height:100px;
  background-color:grey;
}
​
div.quotewrapper {
  display:inline-block;
  max-width:80%;
  width:700px;
}
​
.templatequote footer {
  padding-left:30px;
}
​
blockquote.boxquote {
  background-color:#F9F9F9;
  border:solid 1px #AAA;
}
​
​
blockquote.templatequote {
  position:relative;
  padding:10px 30px;
  text-align:justify;
}
​
blockquote.pullquote::before{
  content:"“";
  font-size:40px;
  position:absolute;
  left:5px;
  color:#B2B7F2
}
​
blockquote.pullquote::after{
  content:"„";
  font-size:40px;
  position:absolute;
  right:15px;
  bottom:10px;
  color:#B2B7F2
}
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers