index.html

<div id="fullwindow">
  <div class="circle"> <div class="smallcircle"></div> </div>
  <div class="frame"></div>
  <div class="line"></div>
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
    <div class="window window-1"></div>
    <div class="window window-2"></div>
    <div class="window window-3"></div>
    <div class="window window-4"></div>
    <div class="window window-5"></div>
    <div class="window window-6"></div>
</div>

Practise-CSS:-Colonial-Window.markdown

Practise CSS: Colonial Window

Chinatown Singapore Colonial Window

A Pen by Ang Yi Xin on CodePen.

License.

style.css

body {
  position: relative;
  background: #9ad0d5;
  text-align: center;
  padding: 40px 0;
}

#fullwindow {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 200px;
  height: 450px;
 }

.circle{
  position: absolute;
  width: 200px;
  height: 100px;
  background: #222222;
  border-radius: 100px 100px 0 0;
  -moz-border-radius: 100px 100px 0 0;
  -webkit-border-radius: 100px 100px 0 0;
  top: 0px;
  left: 0px;
  
 }

.smallcircle{
  position: absolute;
  width: 170px;
  height: 85px;
  background: #555555;
  border-radius: 100px 100px 0 0;
  -moz-border-radius: 100px 100px 0 0;
  -webkit-border-radius: 100px 100px 0 0;
  top: 15px;
  left: 15px;
  
 }

.frame {
  position: absolute;
  width: 200px;
  height: 275px;
  background: #222222; 
  top: 100px;
  left: 0px;  
}

.window {
    position: absolute;
    background-colour: #7b7b7b;
    width: 40px;
    height: 40px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
  
    border-style: solid;
    border-color: #555555 #7b7b7b #7b7b7b #555555;
    border-width: 40px 40px 40px 40px;
  }


    
.window-1 { top: 100px; left: 15px; }
.window-2 { top: 100px; left: 105px; }
.window-3 { top: 190px; left: 15px; }
.window-4 { top: 190px; left: 105px; }
.window-5 { top: 280px; left: 15px; }
.window-6 { top: 280px; left: 105px; }


.line {
  position: absolute;
  width: 190px;
  height: 15px;
  background: #222222; 
  top: 90px;
  left: 5px;
  z-index:2;
}

.line1 {
  position: absolute;
  width: 10px;
  height: 80px;
  background: #222222; 
  top: 10px;
  left: 95px;
  z-index:2;
}
  
.line2 {
  position: absolute;
  width: 10px;
  height: 90px;
  background: #222222; 
  top: 15px;
  left: 60px;
  z-index:2;
  transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -webkit-transform: rotate(-45deg);
}

.line3 {
  position: absolute;
  width: 10px;
  height: 90px;
  background: #222222; 
  top: 15px;
  left: 130px;
  z-index:2;
  transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
}