MAAC-6

MAAC-6

by pj_js15

HTML

<div class="main-container">
  
  <div class="header">
    <div class="logo">
      &nbsp;
    </div>
    <div class="app-name">
      calculator app
    </div>
  </div>
  
  <div class="container">
    <div class="content-bg"></div>
    <div class="content">
      This is a dummy content
    </div>
  </div>
  
  <div class="footer">
    <div class="accordion">
      <div class="accordion-item">
        <span>Important information</span>
        <div class="accordion-item-content">
          This is some content
        </div>
      </div>
      <div class="accordion-item">
        <span>How this calculator works</span>      
      </div>
    </div>
    
    <div class="other-info">
      <div class="footer-logo"></div>
      <div class="copyright">Copyright 2016 All rights reserved.</div>
    </div>
    
  </div>
  
</div>

CSS

*{
  margin: 0;
  padding: 0;
  font-family: Arial;
}
.main-container{
  background-color: #F0F0F0;
  max-width: 1000px;
  width: 80%;
  margin: 0 auto;
}

.header{
  border: 1px solid red;
  height: 50px;
}
.header .logo{
  border: 1px solid #000;
  float: left;
  margin-top: 15px;
  margin-left: 10px;
  width: 50px;
}
.header .app-name{
  float: left;
  margin-top: 15px;
  margin-left: 10px;
}

.container{
  position: relative;
  border: 1px solid blue;
  min-height: 600px;
}
.container .content-bg{
  background-color:  #103A5F;
  height: 300px;
}
.container .content{
  position: absolute;
  border: 1px solid #FFF;
  min-height: 500px;
  max-width: 900px;
  width: 90%;
  background-color: #F0F0F0;
  border: 1px solid gray;
  top: 10%;
  left: 5%;
  margin: 0 auto;
}

.footer{
  background-color: #142B4E;
  color: #FFF;
  padding: 10px;
}
.footer .accordion-item {
  border-bottom: 1px solid #263956;
  padding: 12px 0;
}
.footer .accordion-item-content {
  background-color: gray;
  margin: 5px 0 0 5px;
  padding: 10px 0 10px 10px;
}
.footer .other-info .footer-logo{
  background-color: red;
  width: 130px;
  height: 35px;
}
.footer .other-info .copyright{
  float: right;
  top: -100px
}