Membuat Jendela Ubuntu dengan HTML dan CSS

Hallo teman-teman, di kesempatan kali ini saya akan memberikan panduan bagaimana cara Merancang Jendela Ubuntu dengan HTML dan CSS. Pada Merancang Jendela Ubuntu ini hal pertama-tama yang mesti teman-teman ketahui yakni telah lebih dahulu mengenal HTML dan CSS agar lebih gampang pada memahaminya.

Oke disini saya anggap teman-teman telah mengenal dengan HTML dan CSS, jadi seketika saja kita mulai pada Merancang Jendela Ubuntu dengan HTML dan CSS.

Pertama-tama-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   Menej   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>

Seandainya telah 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;
}

Seandainya telah simpan file CSS nya, kemudian langkah berikutnya koneksikan antara file HTML dan File CSS nya contoh nya dapat teman-teman lihat seperti dibawah ini :

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

Seandainya telah silahkan coba teman-teman jalankan/run dibrowser yang teman-teman gunakan. Karenanya hasilnya akan terlihat seperti di gambar dibawah ini :

Seandainya telah seperti di gambar diatas karenanya teman-teman telah berhasil pada Merancang Jendela Ubuntu dengan HTML dan CSS.

Oke lumayan hingga disini dulu pembahasan mengenai cara Merancang Jendela Ubuntu dengan HTML dan CSS, kurang lebihnya dari bahan pembahasan kali ini harap dimaklumi dan semoga bermanfaat.

Terimakasih

Sumber https://kursuswebsite.org