Membuat Jendela Ubuntu dengan HTML dan CSS

Hallo teman-teman, pada kesempatan kali ini saya akan memberikan tutorial bagaimana cara Membuat Jendela Ubuntu dengan HTML dan CSS. Dalam Membuat Jendela Ubuntu ini hal pertama yang harus teman-teman ketahui adalah sudah lebih dahulu mengenal HTML dan CSS agar lebih mudah dalam memahaminya.

Oke disini saya anggap teman-teman sudah mengenal dengan HTML dan CSS, jadi langsung saja kita mulai dalam Membuat Jendela Ubuntu dengan HTML dan CSS.

Pertama-tama buka text-editor yang teman-teman gunakan, kemudian ketik script html dibawah ini kedalam text-editor :

<div class="window">
  <div class="topbar">
    <div class="icons">
      <div class="close"></div>
      <div class="hide"></div>
      <div class="maximize"></div>
    </div>
    <p>Home</p>
  </div>
  <div class="tools">
    <p>   File   Edit   Go   Bookmarks   View   Tools   Help</p>
  </div>
  <div class="folder-info">
    <p class="left">35 files are listed.</p>
    <p class="right">Free space: 2.5 GB (Total: 5.0 GB)</p>
  </div>
</div>

Jika sudah simpan file HTML nya, lalu kemudian ketik script CSS kedalam text-editornya seperti dibawah ini :

body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 800px;
  width: 100vw;
  background-color: #9c00ff;
}
.window {
  height: 700px;
  width: 900px;
  box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.43);
  border-top-right-radius: 12px;
  border-top-left-radius: 12px;
  border: 1px solid #3c3b37;
  background-color: #f2f1f0;
  -webkit-transition: 1s;
  transition: 1s;
}
.window .topbar {
  height: 40px;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background-image: -webkit-linear-gradient(#65645e, #3c3b37);
  background-image: linear-gradient(#65645e, #3c3b37);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  border-bottom: 1px solid #302f2c;
}
.window .topbar p {
  color: #dfdbd0;
  margin-left: 20px;
}
.window .topbar .icons {
  background-image: -webkit-linear-gradient(#363632, #4e4d48);
  background-image: linear-gradient(#363632, #4e4d48);
  margin-left: 15px;
  border-radius: 500px;
  padding-top: 2px;
  padding-bottom: 1px;
  padding-left: 3px;
  padding-right: 3px;
}
.window .topbar .icons .close {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-image: -webkit-linear-gradient(#f79674, #df5106);
  background-image: linear-gradient(#f79674, #df5106);
  display: inline-block;
}
.window .topbar .icons .close:hover {
  background-image: -webkit-linear-gradient(#f8a082, #f85c09);
  background-image: linear-gradient(#f8a082, #f85c09);
}
.window .topbar .icons .hide,
.window .topbar .icons .maximize {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-left: 5px;
  background-image: -webkit-linear-gradient(#989792, #5a5a55);
  background-image: linear-gradient(#989792, #5a5a55);
  display: inline-block;
}
.window .topbar .icons .hide:hover,
.window .topbar .icons .maximize:hover {
  background-image: -webkit-linear-gradient(#a2a19d, #6b6b65);
  background-image: linear-gradient(#a2a19d, #6b6b65);
}
.window .tools {
  height: 30px;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #3c3b37;
  color: #dfdbd0;
}
.window .folder-info {
  height: 30px;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #f2f1f0;
  border-top: 1px solid #c5c1bc;
  position: relative;
  bottom: -598px;
}
.window .folder-info p.right {
  position: relative;
  right: -500px;
}
.window .folder-info p.left {
  margin-left: 15px;
}
.window .folder-info p {
  color: #5f4c53;
}

Jika sudah simpan file CSS nya, kemudian langkah selanjutnya koneksikan antara file HTML dan File CSS nya contoh nya bisa teman-teman lihat seperti dibawah ini :

<link rel="stylesheet" type="text/css" href="style.css">

Jika sudah silahkan coba teman-teman jalankan/run dibrowser yang teman-teman gunakan. Maka hasilnya akan terlihat seperti pada gambar dibawah ini :

Jika sudah seperti pada gambar diatas maka teman-teman telah berhasil dalam Membuat Jendela Ubuntu dengan HTML dan CSS.

Oke cukup sampai disini dulu pembahasan tentang cara Membuat Jendela Ubuntu dengan HTML dan CSS, kurang lebihnya dari materi pembahasan kali ini harap dimaklumi dan semoga bermanfaat.

Terimakasih