iarua layout

In this example below you will see how to do a iarua layout with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by mpbrainwave, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mpbrainwave ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>iarua layout</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="wrapper">
  <div class="header">
    <div class="logo">
      <a href="home"><img src="http://www.iconsdb.com/icons/download/white/dropbox-256.png"></a>
    </div><!--logo end-->
    <div class="menu">
      <ul>
        <li><a href="home">HOME</a></li>
        <li><a href="upload">UPLOAD</a></li>
        <li><a href="newfolder">NEW FOLDER</a></li>
        <li><a href="archive">ARCHIVE</a></li>
        <li><a href="trash">TRASH</a></li>
        <ul><!--menu ul end-->
      </div><!--menu end-->
        <div class="enter">
          <div class="enter-wrapper">
            <div class="field">
              <div class="searchglass"><img src="http://www.clipartbest.com/cliparts/dir/aXn/diraXnR6T.png"></div>
              <input type="text" class="search">
            </div><!--enter field end-->
            <div class="button"></div>
            </div><!--enter wrapper ends-->
          </div><!--enter field ends-->
        <div class="member">
          </div><!--member area end-->
    </div> <!--header end-->
  <div class="left-bar">
    <div class="left-menu">
      <p>MAIN</p>
      <ul>
        <li><a href="files"><div class="icon"></div>FILES</a></li>
        <li><a href="photos">PHOTOS</a></li>
        <li><a href="sharing">SHARING</a></li>
        <li><a href="links">LINKS</a></li>
        <li><a href="events">EVENTS</a></li>
        </ul>
      <p>LABELS</p>
      <ul>
        <li><a href="designs">DESIGNS</a></li>
        <li><a href="nature">NATURE</a></li>
        <li><a href="lettering">LETTERING</a></li>
        <li><a href="iconsets">ICON SETS</a></li>
        </ul><!--SECOND LIST END-->
      
      </div><!--end left menu-->
    </div><!--left-bar end-->
  <div class="content">
    <div class="box"><img src="http://i2.kym-cdn.com/entries/icons/original/000/005/498/1300044776986.jpg"></div>
    <div class="box"><img src="http://img3.wikia.nocookie.net/__cb20110406222711/seinfeld/images/7/76/George-costanza.jpg"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    </div><!--content end-->
</div><!--wrapper end-->
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/mpbrainwave/iarua-layout-raVdNo */
html,body{
  width:100%;
  background:#6C7574;
  height:100%;
  font-family:helvetica;


}
.wrapper{
  width:90%;
  margin:50px auto;
  height:90%;
}
.header{
  width:100%;
  height:10%;
  background:#363847;
    border-radius:4px 4px 0 0;

  
}
.left-bar{
  float:left;
  width:15%;
  background:white;
  height:90%;
  border-radius:0 0 0 4px;
}
.content{
  float:right;
  width:85%;
  height:90%;
  background:white;
  display:flex;
  flex-flow:row wrap;
  overflow:auto;
  border-radius:0 0 4px 0;
  align-content:flex-start;
}
/*header stuff*/
.logo{
  width:10%;
  height:100%;
  background:#037EDC;
  border-radius:4px 0 0 0;
  float:left;
  position:relative;
}
.logo img{
  width:30%;
  position:absolute;
  top:25%;
  left:35%;
}
/*menu*/
.menu{
  float:left;
  height:100%;
  width:50%;
}
.menu ul, .left-menu ul{
  padding:0;
  margin:0;
  height:100%;
}
.menu li{
  float:left;
  list-style:none;
  height:100%;

}
.left-menu ul{
  list-style:none;
  margin:0;
  padding:0;
}
a{
  display:block;
  text-decoration:none;
  width:70px;
  font-size:9px;
  text-align:center;
  height:100%;
  color:#ADBCBF;
  font-weight:bold;
}
.menu a{
    padding-top:20px;

}
/*LEFT MENU*/
.left-menu a{
  text-align:left;
  padding:5px;
}
.left-menu{
  margin-left:30px;
}
p{
  font-size:10px;
  color:#ADBCBF;
  line-height:40px;
  margin:0;
  pading:0;
  margin-left:5px;
 
}
p:first-child{
  margin-top:10px;
}
/*RED ICON*/
.icon{
  border-radius:10px;
  width:7px;
  height:7px;
  background:red;
  display:inline-block;
  margin-right:10px;
}
/*MEMBER AREA HEADER RIGHT*/
.member{
  float:right;
  width:20%;
  background:#B7C1CB;
  height:100%;
  border-radius:0 4px 0 0;
}
/*ENTER FIELD*/
.enter{
  float:left;
  height:100%;
  width:20%;
 }
.enter-wrapper{
  width:100%;
  height:100%;
}
.field{
  width:65%;
  height:45%;
  background:white;
  float:left;
  border-radius:15px;
  margin-top:14px;
}
.button{
  width:26px;
  background:#FA5F5B;
  height:26px;
  float:right;
  border-radius:40px;
  margin:14px 20px 0 0;
}
/*MAIN CONTENT*/
.box{
  width:125px;
  height:125px;
  background:#E7E1EB;
  margin-left:20px;
  margin-top:20px;
}
img{
  width:125px;
}
/*FIELD SEARCH*/
.search{
  width:75%;
  border:0px;
  margin-top:4px;
  margin-right:4px;
  float:right;
}
.search:focus{
    outline: 0;
}
.field img{
  width:15px;
  float:left;
  margin-top:5px;
  margin-left:5px;
}

Comments