Membuat Jendela browser dipostingan.

Browser Window HTML - CSS

Tampilan jendela browser murni HTML & CSS

Ini Adalah Demo Browser Window

Cara membuat tampilan jendela browser dengan HTML & CSS.

Kode HTML tampilan browser window

<div class="browser-container">
  <div class="row">
    <div class="browser-column left">
      <span class="dot" style="background:#ED594A;"></span>
      <span class="dot" style="background:#FDD800;"></span>
      <span class="dot" style="background:#5AC05A;"></span>
    </div>
    <div class="browser-column middle">
      <input type="text" value="https://bloggerotodidak.my.id">
    </div>
    <div class="browser-column right">
      <div style="float:right">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </div>
    </div>
  </div>

  <div class="browser-content">
    <h3>Ini Adalah Demo Browser Window</h3>
    <p>Cara membuat tampilan jendela browser dengan HTML & CSS.</p>
  </div>
</div>

Berikut ini kode CSS-nya :

<style>

*{box-sizing:border-box}
.browser-container{
border:3px solid #f1f1f1;
border-top-left-radius:4px;
border-top-right-radius:4px
}
.row{
padding:10px;
background:#f1f1f1;
border-top-left-radius:4px;
border-top-right-radius:4px
}
.browser-column{float:left}
.browser-container .left{width:15%}
.browser-container .right{width:10%}
.browser-container .middle{width:75%}
.browser-container .row:after{
content:"";
display:table;clear:both
}
.dot{
margin-top:4px;
height:12px;
width:12px;
background-color:#bbb;
border-radius:50%;
display:inline-block
}
input[type=text]{
width:100%;
border-radius:3px;
border:none;
background-color:#fff;
margin-top:-8px;
height:25px;
color:#666;
padding:5px}
.bar{
width:17px;
height:3px;
background-color:#aaa;
margin:3px 0;
display:block
}
.browser-content{padding:10px}

</style>