Membuat Logo SekolahKoding dengan CSS

Di Perpustakaan SekolahKoding ada tutorial bagaimana membuat Logo SekolahKoding dengan CorelDraw yang ditulis oleh @Saputroandhi, disana sudah diterangkan dengan baik dan jelas. Sudah pernah dibaca? klo belum silahkan mampir ke <a href='https://sekolahkoding.com/perpustakaan/Membuat-Logo-SEKOLAH-KODING-dengan-Corel-Draw'>https://sekolahkoding.com/perpustakaan/Membuat-Logo-SEKOLAH-KODING-dengan-Corel-Draw</a>

Nah.... kali ini kita akan membuat Logo SekolahKoding dengan hanya CSS. Ane anggap agan-agan sudah memahami dasar-dasar CSS, klo belum silahkan meluncur ke <a href='https://sekolahkoding.com/kelas/video/CSS3-untuk-pemula'>https://sekolahkoding.com/kelas/video/CSS3-untuk-pemula</a>

OK...kita mulai saja. Pertama kita buat html terlebih dahulu

<div class="bg">
  <div class="brackets">
    <div class="mug"></div>
    <div class="handle"></div>
  </div>
</div>

<h1><a href="sekolahkoding.com">sekolahkoding.com</a></h1>

Selanjutnya kita bikin CSSnya

body {
  background-color: #5E9BCC;
}

.bg {
  width: 160px;
  height: 160px;
  background-color: #307CC4;
  padding: 20px 10px;
  box-sizing: border-box;
  border-radius: 5px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 6px 1px rgba(0, 0, 0, .5);
}

.brackets {
  width: 130px;
  height: 110px;
  background-color: white;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.brackets::before {
  content: "";
  width: 100px;
  height: 80px;
  position: absolute;
  background-color: #307CC4;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.brackets::after {
  content: "";
  width: 60px;
  height: 110px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #307CC4;
}

.mug {
  width: 45px;
  height: 60px;
  background-color: white;
  position: absolute;
  left: 40%;
  top: 50%;
  transform: translate(-40%, -50%);
  z-index: 5;
}

.handle {
  width: 30px;
  height: 40px;
  position: absolute;
  background-color: white;
  left: 65%;
  top: 55%;
  transform: translate(-65%, -55%);
  z-index: 4;
}

.handle::before {
  content: "";
  width: 20px;
  height: 30px;
  position: absolute;
  background-color: #307CC4;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

h1 {
  font-family: sans-serif;
  font-size: 2em;
  position: fixed;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -70%);
  transition: top .5s , translate .5s;
}

h1 a {
  color: white;
  text-decoration: none;
}

h1:hover {
  top: 71%;
  transform: translate(-50%, -71%);
}

Selamat..... agan-agan sudah berhasil membuat Logo SekolahKoding hanya dengan CSS jika ada yg tidak dimengerti atau ada pertanyaan, silahkan komen dibawah akhir kata, klik gambar bintang (Like/Suka) and keep sharing :)