Membuat Fullscreen Layout with Column

~Selamat Malam

Kali ini berbagi dengan teman - teman cara membuat Fullscreen layout yang nanti akan di bagi menjadi beberapa kolom

Contoh :

DEMO | DOWNLOAD

pertama - tama mari kita buat stuktur HTML nya terlebih dahulu

HTML

<div class="container">
   
        <div class="main">
            <div class="section">
                 
                       <div class="box">
                            <h2>Judul Disini</h2>
                       </div>
             
                         <div class="konten">
                                <h2>Sub judul</h2>
                                <p>Sebuah keterangan</p>
                 
                          </div> <!-- close tag div konten -->
                    </div><!-- close tag div section -->

               </div><!-- close tag div section -->

                

            </div><!-- close tag div main -->

  </div><!-- close tag div container -->

 lalu tambahkan CSS

/* reset semua margin dan padding element */
*{
padding:0;
margin:0;
}

/* reset semua box-sizing ,sesudah ,dan sebelum element tersebut */
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:90%;
color:#FFF;
}

.container{
width:100%;
height:100%;
}

.main{
position:absolute;
width:100%;
height:100%;

}

.main > .section{
position:absolute;
width:20%;
height:100%;
cursor:pointer;
}

.main > .section:first-child{
top:0;
left:0;
background:url('images/ariana.jpg');
background-repeat:no-repeat;
background-position:center;
transform:rotateY(0deg);
background-size:cover;
transition:all 0.30s ease 0.30s;

}

.main > .section:first-child:hover{
transition:all 0.30s ease 0.30s;
transform:rotateY(-180deg);
}


.main > .section:first-child:hover > .konten{
top:0;
width:100%;
height:100%;
z-index:900;
opacity:1;
transform:rotateY(180deg);
background:rgba(246,36,89,1);
transition:all 0.20s ease 0.20s;
position:absolute;
}

.box{

position:relative;

width:100%;

height:100%;

cursor:pointer;

background:rgba(246,36,89,.80);

/* membuat text menjadi ketengah kolom dengan flex refrensi w3school*/

display:-webkit-box;

display:flex;

display:-webkit-flex;

flex-direction:row;

-webkit-flex-direction:row;

flex-wrap:wrap;

-webkit-flex-wrap:wrap;

-webkit-box-pack:center;

justify-content:center;

-webkit-justify-content:center;

-webkit-box-align:center;

-webkit-align-items:center;

}

.box h2{

width:100%;

color:#fff;

font-size:1.8em;

text-align:center;

letter-spacing:2px;

}

.konten{

top:0;

opacity:0;

width:100%;

height:100%;

position:absolute;

transform:rotateY(0);

background:rgba(246,36,89,.80);

transition:all 0.20s ease 0.20s;

overflow:auto;

}

.konten p,h2{ padding:10px; }

Tada, Bagaimana??Mudah bukan??

Selamat Mencoba!