Framework tema-desain web responsive 2 kolom, navbar 3 kolom, footer 1

Ini adalah desain awal untuk tema blogger yang akan di gunakan untuk desain lanjut di editor tema blogger.

Saat membuat template/tema blog ini, kerangka awalnya juga ini saja.

Didalam nya masih dasaran css dan html, belum ada campuran wordpress atau bloggernya.

Jadi baik untuk halaman statis, untuk dilanjutkan ke blogger dan wordpress self hosting bisa.


 <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML lang=""id">
  <head>
    <link rel="stylesheet" href="style.css"/>
    <meta charset='utf-8'/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
<body>
<div id="outer">
  <nav class="navbar">
    <div class="wrapper">
    <div class="navleft">

    </div> 
    <div class="navmid">

    </div>
  <div class="navright"> 
        
    </div>
    </div>
   
</nav>
<div id="main">
  <div class="post-outer">

  </div>
  <div class="post-outer">
    
  </div>
  <div class="post-outer">
    
  </div>
  <div class="post-outer">
    
  </div>
  <div class="post-outer">
    
  </div>
  <div class="post-outer">
    
  </div>
  <div class="post-outer">
    
  </div>
  <div class="post-outer">
    
  </div>
  
</div>
<div class="sidebar">

</div>
<div class="clearboth"></div>
<footer class="footer">

</footer>
<div class="clearboth"></div>
</div>
</body>
    </HTML>

Dan dibawah adalah cssnya;


 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: "Roboto", sans-serif;
}
body {
    background: #444;
}
#outer {
    width: 70%;
    margin: 0 auto;
}
.navbar {
    width: 100%;
    padding: 5px 0;
    margin: 0 auto;
    background: lightblue;
}
.wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 2px 0;
    background: red;
}
.navbar .wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.navleft{
    width: 30%;
    height: 30px;
    background: orange;
}
.navmid{
    width: 30%;
    height: 30px;
    background: orange;
}
.navright{
    width: 30%;
    height: 30px;
    background: orange;
}
#main {
    width: 77%;
    float: left;
    height: 1300px;
    background: orange;
}
.post-outer {
    width: 32%;
    float: left;
    height: 250px;
    margin: 0 10px 10px 0;
    background: lightblue;
}
.sidebar {
    float: left;
    width: 23%;
    height: 800px;
    background: yellow;
}
.footer {
    height: 50px;
    float: left;
    padding: 10px 0;
    background: #fff;
    width: 100%;
}
.clearboth {
    clear: both;
    margin: 10px 0;
}
@media screen and (max-width: 1390px) {
    .post-outer {
        width: 48%;
    }
}
@media screen and (max-width: 1024px) {
    #outer {
        width: 100%;
    }
}
@media screen and (max-width: 650px) {
    #main, .sidebar {
        width: 100%;
    }
    .post-outer {
        width: 48%;
    }
}
@media screen and (max-width: 500px) {
    .post-outer{
        width: 100%;
    }

Untuk demo nya bisa lihat pada video dibawah

Tentang Author

Dikirim pada -24 Sep 2023
" Selamat datang, selamat membaca dan selamat berseluncur "

San Tuy

Framework tema-desain web responsive 2 kolom, navbar 3 kolom, footer 1

Share ke

Komentari

Posting Komentar

Framework tema-desain web responsive 2 kolom, navbar 3 kolom, footer 1

Share ke

Lainnya oleh Santuy :

Komentari

Posting Komentar