CodePen Embed - Monopoly Board




<div id="board">
 
 <div class="goSquare">
  <div class="goSquare2">
  COLLECT<br>
  $200 SALARY<br>
  AS YOU PASS<br>
   <div class="g1"></div>
   <div class="g2"></div>
   <div class="g3"></div>
   <div class="g4"></div>
   <div class="g5"></div>
   <div class="o1"></div>
   <div class="o2"></div>
   <div class="o3"></div>
   <div class="o4"></div>
   
   </div><!-- goSquare2 -->
 </div><!-- goSquare -->
 
 
  <div class="normalSquare boardBottom" style="right:70px;">
   <div class="brown"></div>
   <div class="prop">MEDITER-<br>
   RANEAN<br>
   AVENUE </div>
   <div class="price">$60</div>
  </div>
 <div class="normalSquare boardBottom" style="right:110px;">
  <div class="prop">COMMUNITY<br>CHEST</div>
  <img class="cchest" src="https://i.ya-webdesign.com/images/banker-clipart-monopoly-20.gif"
       width="18"
       >
 </div>
 <div class="normalSquare boardBottom" style="right:150px;">
  <div class="brown"></div>
  <div class="prop">BALTIC<br>
   AVENUE </div>
  <div class="price">$60</div>
 </div>
 <div class="normalSquare boardBottom" style="right:190px;">
  <div class="prop">INCOME<br><br>TAX</div>
  <div class="price">PAY $200</div>
 </div>
 <div class="normalSquare boardBottom" style="right:230px;">
  <div class="rrProp">READING<br>RAILROAD</div>
  <div class="rr">🚂</div>
  <div class="price">$200</div>
 </div>
 <div class="normalSquare boardBottom" style="right:270px;">
  <div class="lightblue"></div>
  <div class="prop">ORIENTAL<br>
   AVENUE </div>
  <div class="price">$100</div>
 </div>
 <div class="normalSquare boardBottom" style="right:310px;width:42px;">
  <div class="rrProp">CHANCE</div>
 <div class="chanceQ1">?</div>
 </div>
 <div class="normalSquare boardBottom" style="right:352px;">
  <div class="lightblue"></div>
  <div class="prop">VERMONT<br>
   AVENUE </div>
  <div class="price">$100</div>
 </div>
 <div class="normalSquare boardBottom" style="right:392px;">
  <div class="lightblue"></div>
  <div class="prop">CONNECTICUT<br>
   AVENUE </div>
  <div class="price">$120</div>
 </div>
 
 <div class="jailSquare">
  <div class="just">JUST</div>
  <div class="visiting">VISITING</div>
  
  <div class="inJail">
   <div class="inJail2">
    <div class="in">IN</div>
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
    <div class="bar4"></div>
    
    <div class="jail">JAIL</div>
  
    </div>
  </div>
  
 </div><!-- jailSquare -->
 
 <div class="leftSide">
  
   <div class="normalSquare boardBottom" style="right:0px;">
   <div class="violet"></div>
   <div class="prop">ST. CHARLES<br>
   PLACE</div>
   <div class="price">$140</div>
  </div>
  
  <div class="normalSquare boardBottom" style="right:40px;">
   
   <div class="utilProp">ELECTRIC<br>COMPANY</div>
   <div class="utilIcon">💡</div>
   <div class="price">$150</div>
  </div>
  
  <div class="normalSquare boardBottom" style="right:80px;">
   <div class="violet"></div>
   <div class="prop">STATES<br>
   AVENUE</div>
   <div class="price">$140</div>
  </div>
  
  <div class="normalSquare boardBottom" style="right:120px;">
   <div class="violet"></div>
   <div class="prop">VIRGINIA<br>
   AVENUE</div>
   <div class="price">$160</div>
  </div>
  
  <div class="normalSquare boardBottom" style="right:160px;">
   <div class="rrProp"><span style="font-size:3.36pt;">PENNSYLVANIA</span><br>RAILROAD</div>
   <div class="rr">🚂</div>
   <div class="price">$200</div>
 </div>
  
 <div class="normalSquare boardBottom" style="right:200px;">
   <div class="orange"></div>
   <div class="prop">ST. JAMES<br>
   PLACE</div>
   <div class="price">$180</div>
  </div>  
  
   <div class="normalSquare boardBottom" style="right:240px;">
  <div class="prop">COMMUNITY<br>CHEST</div>
    <img class="cchest" src="https://i.ya-webdesign.com/images/banker-clipart-monopoly-20.gif"
       width="18"
       >
    
 </div>
  
  <div class="normalSquare boardBottom" style="right:280px;width:42px;">
   <div class="orange" style="width:41px;"></div>
   <div class="prop">TENNESSEE<br>
   AVENUE</div>
   <div class="price">$180</div>
  </div> 
  
  <div class="normalSquare boardBottom" style="right:322px;">
   <div class="orange"></div>
   <div class="prop">NEW YORK<br>
   AVENUE</div>
   <div class="price">$180</div>
  </div> 
  
  
 </div><!-- leftSide -->

 
 
 <div class="freeParking">
  <div class="freeParking2">
   <div class="free">FREE</div>
   <div class="car">🚘</div><br><br><br>
   <div class="parking">PARKING</div>
  
  </div><!-- freeParking2 -->
 </div><!-- freeParking -->
 
 
 <div class="topSide">
  <div class="normalSquare boardBottom" style="right:0px;">
   <div class="red"></div>
   <div class="prop">KENTUCKY<br>
   AVENUE</div>
   <div class="price">$220</div>
  </div>
  
  <div class="normalSquare boardBottom" style="right:40px;">
  <div class="rrProp">CHANCE</div>
 <div class="chanceQ2">?</div>
 </div>
  
  <div class="normalSquare boardBottom" style="right:80px;">
   <div class="red"></div>
   <div class="prop">INDIANA<br>
   AVENUE</div>
   <div class="price">$220</div>
  </div>
  
  <div class="normalSquare boardBottom" style="right:120px;">
   <div class="red"></div>
   <div class="prop">ILLINOIS<br>
   AVENUE</div>
   <div class="price">$240</div>
  </div>
  
  <div class="normalSquare boardBottom" style="right:160px;">
  <div class="rrProp">B. &amp; O.<br>RAILROAD</div>
   <div class="rr">🚂</div>
  <div class="price">$200</div>
 </div>
  
 <div class="normalSquare boardBottom" style="right:200px;">
   <div class="yellow"></div>
   <div class="prop">ATLANTIC<br>
   AVENUE</div>
   <div class="price">$260</div>
  </div>  
  
  <div class="normalSquare boardBottom" style="right:240px;">
   <div class="yellow"></div>
   <div class="prop">VENTNOR<br>
   AVENUE</div>
   <div class="price">$260</div>
  </div>  
  
  <div class="normalSquare boardBottom" style="right:280px;width:42px;">
   
   <div class="utilProp">WATER<br>WORKS</div>
   <div class="utilIcon">🚰</div>
   <div class="price">$150</div>
  </div>
  
  <div class="normalSquare boardBottom" style="right:322px;">
   <div class="yellow"></div>
   <div class="prop">MARVIN<br>
   GARDENS</div>
   <div class="price">$280</div>
  </div>
  
  
 </div><!-- topSide -->
 
 
 <div class="gotoJail">
  <div class="gotoJail2">
   <div class="goto">GOTO</div>
   <div class="jail2">JAIL</div>
  
   </div>
 </div><!-- gotoJail -->
 
 
 
 <div class="rightSide">
  
  <div class="normalSquare boardBottom" style="right:0px;">
   <div class="green"></div>
   <div class="prop">PACIFIC<br>
   AVENUE</div>
   <div class="price">$300</div>
  </div>  
  
   <div class="normalSquare boardBottom" style="right:40px;">
   <div class="green"></div>
   <div class="prop">NORTH<br>CAROLINA<br>
   AVENUE</div>
   <div class="price">$300</div>
  </div>  
  
  <div class="normalSquare boardBottom" style="right:80px;">
  <div class="prop">COMMUNITY<br>CHEST</div>
   <img class="cchest" src="https://i.ya-webdesign.com/images/banker-clipart-monopoly-20.gif"
       width="18"
       >
 </div>
  
  <div class="normalSquare boardBottom" style="right:120px;">
   <div class="green"></div>
   <div class="prop">PENNSYLVANIA<br>
   AVENUE</div>
   <div class="price">$320</div>
  </div> 
  
  <div class="normalSquare boardBottom" style="right:160px;">
  <div class="rrProp">SHORT<br>LINE</div>
   <div class="rr">🚂</div>
  <div class="price">$200</div>
 </div>
  
  <div class="normalSquare boardBottom" style="right:200px;">
  <div class="rrProp">CHANCE</div>
 <div class="chanceQ3">?</div>
 </div>
  
   <div class="normalSquare boardBottom" style="right:240px;">
   <div class="blue"></div>
   <div class="prop">PARK<br>
   PLACE</div>
   <div class="price">$350</div>
  </div> 
  
  <div class="normalSquare boardBottom" style="right:280px;width:42px;">
  <div class="rrProp">LUXURY<br>TAX</div>
   <div class="lux">💍</div>
  <div class="price">PAY $100</div>
 </div>
  
    <div class="normalSquare boardBottom" style="right:322px;">
   <div class="blue"></div>
   <div class="prop">BOARDWALK</div>
   <div class="price">$400</div>
  </div>  
  
 </div><!-- rightSide -->
 
 <div class="title">MONOPOLY</div>
 
 <div class="communityChestDeck" title="Community Chest Cards go Here">
  
  <img class="cchest2" src="https://i.ya-webdesign.com/images/banker-clipart-monopoly-20.gif"
       width="40"
       >
 </div>
 
 <div class="chanceDeck" title="Chance Cards go Here">?</div>
 
</div><!-- board -->

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');

#board {
 background:#CDE6D1;
 width:500px;
 height:500px;
 box-sizing: border-box;
 position:absolute;
 top:0px;
 left:0px;
 padding:0px;
 overflow:hidden;
 box-sizing: border-box;
}

/* 500 - 140 
   = 360 / 9
   = 40
*/

.cchest {
 position:absolute;
 box-sizing: border-box;
 left:10px;
 top:38px;
}

.cchest2 {
 position:absolute;
 box-sizing: border-box;
 left:20px;
 top:7px;
}


.goSquare {
 position:absolute;
 box-sizing: border-box;
 width:70px;
 height:70px;
 border-left:solid black 2px;
 border-top:solid black 2px;
 bottom:0px;
 right:0px;
 margin:0px;
 overflow:hidden;
}

.g1 {
 position:absolute;
 width:4px;
 height:18px;
 left:18px;
 top:24px;
 background:black;
}

.g2 {
 position:absolute;
 width:10px;
 height:4px;
 left:22px;
 top:24px;
 background:black;
}

.g3 {
 position:absolute;
 width:10px;
 height:4px;
 left:22px;
 top:38px;
 background:black;
}

.g4 {
 position:absolute;
 width:4px;
 height:9px;
 left:28px;
 top:31px;
 background:black;
}

.g5 {
 position:absolute;
 width:4px;
 height:4px;
 left:25px;
 top:31px;
 background:black;
}

.o1 {
 position:absolute;
 width:4px;
 height:18px;
 left:35px;
 top:24px;
 background:black;
}

.o2 {
 position:absolute;
 width:10px;
 height:4px;
 left:38px;
 top:24px;
 background:black;
}

.o3 {
 position:absolute;
 width:10px;
 height:4px;
 left:38px;
 top:38px;
 background:black;
}

.o4 {
 position:absolute;
 width:4px;
 height:18px;
 left:45px;
 top:24px;
 background:black;
}




.goSquare2 {
 position:absolute;
 box-sizing: border-box;
 width:70px;
 height:70px; 
 top:5px;
 left:5px;
 margin:0px;
 padding:0px;
 transform:rotate(-45deg);
 text-align:center;
 overflow:hidden;
 font-family: 'Josefin Sans', sans-serif;
 font-size:6pt;
}


.jailSquare {
 position:absolute;
 box-sizing: border-box;
 width:70px;
 height:70px;
 border-right:solid black 2px;
 border-top:solid black 2px;
 bottom:0px;
 left:0px;
 margin:0px;
}




.freeParking {
 position:absolute;
 box-sizing: border-box;
 width:70px;
 height:70px;
 border-right:solid black 2px;
 border-bottom:solid black 2px;
 top:0px;
 left:0px;
 margin:0px;
}


.freeParking2 {
 position:absolute;
 box-sizing: border-box;
 width:70px;
 height:70px; 
 top:-5px;
 left:-4px;
 margin:0px;
 padding:0px;
 transform:rotate(135deg);
 text-align:center;
 overflow:hidden;
 font-size:6.5pt;
 font-family: 'Josefin Sans', sans-serif;
}

.free {

}

.car {
 font-size:20pt;
}

.parking {
 position:absolute;
 box-sizing: border-box;
 left:15px;
 top:45px;
}

.gotoJail {
 position:absolute;
 box-sizing: border-box;
 width:70px;
 height:70px;
 border-left:solid black 2px;
 border-bottom:solid black 2px;
 top:0px;
 right:0px;
 margin:0px;
 box-sizing: border-box;
}

.gotoJail2 {
 position:absolute;
 box-sizing: border-box;
 width:70px;
 height:70px;
 top:-10px;
 left:8px;
 margin:0px;
 box-sizing: border-box;
 transform:rotate(-135deg);
}

.goto {
 position:absolute;
 box-sizing: border-box;
 font-family: 'Josefin Sans', sans-serif;
 font-size:6.5pt;
 width:70px;
 text-align:center;
}

.jail2 {
 position:absolute;
 box-sizing: border-box;
 font-family: 'Josefin Sans', sans-serif;
 font-size:6.5pt;
 top:38px;
 width:70px;
 text-align:center;
}


.normalSquare {
 border-left:solid black 2px;
 border-top:solid black 2px;
 height:70px;
 width:40px;
 position:absolute;
 margin:0px;
 box-sizing: border-box;
 overflow:hidden;
 
}

.boardBottom {
 bottom:0px;
}

.prop {
 font-size:4pt;
 font-family: 'Josefin Sans', sans-serif;
 width:38px;
 text-align:center;
 position:absolute;
 top:26px;
}

.rrProp {
 font-size:5pt;
 font-family: 'Josefin Sans', sans-serif;
 width:38px;
 text-align:center;
 position:absolute;
 top:10px;
}

.utilProp {
 font-size:4.5pt;
 font-family: 'Josefin Sans', sans-serif;
 width:38px;
 text-align:center;
 position:absolute;
 top:5px;
}

.brown {
 position:absolute;
 overflow:hidden;
 background:#915438;
 width:38px;
 height:16px;
 border-bottom:solid black 2px;
}

.lightblue {
 position:absolute;
 overflow:hidden;
 background:lightblue;
 width:38px;
 height:16px;
 border-bottom:solid black 2px;
}


.violet {
 position:absolute;
 overflow:hidden;
 background:#D54195;
 width:38px;
 height:16px;
 border-bottom:solid black 2px;
}

.orange {
 position:absolute;
 overflow:hidden;
 background:orange;
 width:38px;
 height:16px;
 border-bottom:solid black 2px;
}

.red {
 position:absolute;
 overflow:hidden;
 background:red;
 width:38px;
 height:16px;
 border-bottom:solid black 2px;
}

.yellow {
 position:absolute;
 overflow:hidden;
 background:yellow;
 width:38px;
 height:16px;
 border-bottom:solid black 2px;
}

.green {
 position:absolute;
 overflow:hidden;
 background:#34B05C;
 width:38px;
 height:16px;
 border-bottom:solid black 2px;
}


.blue {
 position:absolute;
 overflow:hidden;
 background:#1073B6;
 width:38px;
 height:16px;
 border-bottom:solid black 2px;
}



.price {
 font-size:4.5pt;
 font-family: 'Josefin Sans', sans-serif;

 width:43px;
 text-align:center;
 position:absolute;
 top:60px;
}

.inJail {
 position:absolute;
 right:0px;
 top:0px;
 background:orange;
 width:45px;
 height:45px;
 box-sizing: border-box;
 border-bottom:solid black 2px;
 border-left:solid black 2px;
 overflow:hidden;
}


.inJail2 {
 position:absolute;
 transform:rotate(45deg); 
 width:45px;
 height:45px;
 /* border:solid red .5px; */
}

.in {
 position:absolute;
 font-family: 'Josefin Sans', sans-serif;
 font-size:7pt;
 text-align:center;
 top:0px;
 width:45px;
}

.bar1 {
 position:absolute;
 left:8px;
 top:9px;
 width:7px;
 height:24px;
 background:white;
 box-sizing: border-box;
 border:solid black 1px;
}

.bar2 {
 position:absolute;
 left:14px;
 top:9px;
 width:7px;
 height:24px;
 background:white;
 box-sizing: border-box;
 border:solid black 1px;
}

.bar3 {
 position:absolute;
 left:20px;
 top:9px;
 width:7px;
 height:24px;
 background:white;
 box-sizing: border-box;
 border:solid black 1px;
}

.bar4 {
 position:absolute;
 left:26px;
 top:9px;
 width:7px;
 height:24px;
 background:white;
 box-sizing: border-box;
 border:solid black 1px;
}

.jail {
 position:absolute;
 font-family: 'Josefin Sans', sans-serif;
 font-size:7pt;
 text-align:center;
 top:35px;
 width:45px;
}

.just {
 position:absolute;
 transform:rotate(90deg);
 top:20px;
 left:0px;
 font-size:7pt;
 font-family: 'Josefin Sans', sans-serif;
}

.visiting {
 position:absolute;
 bottom:6px;
 left:26px;
 font-size:6pt;
 font-family: 'Josefin Sans', sans-serif;
}

.chanceQ1 {
 color:#D54195;
 font-size:36pt;
 position:absolute;
 width:40px;
 text-align:center;
 top:15px;
 text-shadow: 1px 1px black;
 box-sizing: border-box;
}

.chanceQ2 {
 color:#23ABE5;
 font-size:36pt;
 position:absolute;
 width:40px;
 text-align:center;
 top:15px;
 text-shadow: 1px 1px black;
 box-sizing: border-box;
}

.chanceQ3 {
 color:orange;
 font-size:36pt;
 position:absolute;
 width:40px;
 text-align:center;
 top:15px;
 text-shadow: 1px 1px black;
 box-sizing: border-box;
 padding:0px;
 margin:0px;
}

.leftSide {
 position:absolute;
 width:360px;
 height:70px;
 left:70px;
 top:70px;
 transform-origin: top left;
 transform:rotate(90deg);
}

.topSide {
 position:absolute;
 width:360px;
 height:70px;
 right:70px;
 top:0px;

 transform-origin: middle right;
 transform:rotate(180deg); */
}

.rightSide {
 position:absolute;
 width:360px;
 height:70px;
 left:500px;
 bottom:70px;
 transform-origin: bottom left;
 transform:rotate(-90deg); */
}


.title {
 position:absolute;
 left:110px;
 top:230px;
 transform:rotate(-45deg);
 border:solid black 2px;
 font-size:20pt;
 font-family: 'Josefin Sans', sans-serif;
 width:300px;
 height:40px;
 line-height:40px;
 text-align:center;
 background:#E2242C;
 color:white;
 padding:0px;
 text-shadow: 1px 1px black;
 overflow:hidden;
 box-sizing: border-box;
 border-radius:3px;
}


.communityChestDeck {
 position:absolute;
 left:90px;
 top:100px;
 transform:rotate(135deg);
 border:solid #5EC1E0 2px;
 font-size:26pt;
 font-family: 'Josefin Sans', sans-serif;
 width:80px;
 height:60px;
 line-height:60px;
 text-align:center;
 background:#A7DDF7;
 color:white;
 padding:0px;
 text-shadow: 1px 1px black;
 overflow:hidden;
 box-sizing: border-box;
 border-radius:3px;
 cursor:pointer;
}

.chanceDeck {
 position:absolute;
 left:328px;
 top:340px;
 transform:rotate(-45deg);
 border:solid #ED7930 2px;
 font-size:26pt;
 font-family: 'Josefin Sans', sans-serif;
 width:80px;
 height:60px;
 line-height:60px;
 text-align:center;
 background:#F38F32;
 color:white;
 padding:0px;
 text-shadow: 1px 1px black;
 overflow:hidden;
 box-sizing: border-box;
 border-radius:3px;
 cursor:pointer;
}



.lux {
 width:40px;
 text-align:center;
 position:absolute;
 top:25px;
}

.rr {
 width:40px;
 text-align:center;
 position:absolute;
 top:25px;
}

.utilIcon {
 width:40px;
 text-align:center;
 position:absolute;
 top:25px;
}

This Pen is owned by Orville Chomer on CodePen.

See more by @orvilleChomer on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.