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>
<div id="collage-container">
  <div id="collagecont1" class="large">
​
        This is a DIV sample.
​
​
  </div>
​
  <div id="collagecont2" class="large">
​
    
        This is a DIV sample.
​
  </div>
​
  <div id="collagecont3" class="large">
​
        This is a DIV sample.
​
  </div>
​
  <div id="collagecont4" class="large">
​
​
        This is a DIV sample.
​
  </div>
​
  <div id="collagecont5" class="large">
​
​
        This is a DIV sample.
​
  </div>
​
  <div id="collagecont6" class="large">
​
​
        This is a DIV sample.
​
  </div>
</div>
​
</body>
</html>
 
​
#collage-container{
max-width:97%;
padding-right:1%;
padding-left:5%;
position:relative;
​
padding-bottom:15%;
height:0;
​
​
}
#collagecont1.large, #collagecont2.large, #collagecont2.large, #collagecont4, #collagecont5.large, #collagecont6.large{display:inline-block;}
​
#collagecont2{
​
position: relative;
max-width:47%;
min-height:70em;
background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/PHALANTAFRONTPAGEAD.jpg?10407604049650997072');
background-size: 100% 100%;
background-repeat: no-repeat;
​
​
}
​
#collagecont3{
position:relative;
max-width:45%;
min-height:20em;
background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/SANTACLAUSEFRONTPAGEAD.jpg?10527560584571387867');
background-size: 100% 100%;
background-repeat: no-repeat;
​
}
​
#collagecont4{
position:relative;
max-width:45%;
min-height:20em;
background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/EXORBUTTERFRONTPAGEAD.jpg?10527560584571387867');
background-size: 100% 100%;
background-repeat: no-repeat;
​
}
​
#collagecont5{
  position:relative;
  max-width:45%;
  min-height:20em;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/935COLPAGECOV.jpg?10407604049650997072');
  background-size: 100% 100%;
  background-repeat: no-repeat;
​
}
​
#collagecont6{
 position:relative;
 max-width:45%;
 min-height:20em;
 background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/935COLPAGECOV.jpg?10407604049650997072');
 background-size: 100% 100%;
 background-repeat: no-repeat;
​
}
​
#collagecont1{
position:relative;
max-width:45%;
min-height:20em;
background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/935COLPAGECOV.jpg?10407604049650997072');
background-size: 100% 100%;
background-repeat: no-repeat;
​
}
​
​
​
​
.large:hover{
color:#FF0000;
 } 
​
​
  .large {
 position:absolute;
 color: #00FF00;
 font-family:arial;
 font-size: 20pt;
 bottom:1%;
​
 }
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers