Cara Membuat Design Team Bola Yang Akan Bertanding

Hallo semua ,bagaimana kabarnya teman-teman? semoga baik-baik saja. Sepak bola bukan olahraga yang awam lagi bagi masyarakat Indonesia maupun dunia, Pada artikel kali ini saya akan membahas tentang cara membuat design team bola yang akan bertanding . Selain belajar membuat tampilan kita akan memberikan efek animasinya agar menarik dan sedap dipandang.

Baiklahlah kita mulai saja buat struktur html yang akan digunakan dalam membuat design kali ini, yuk ikuti setiap langkah-langkahnya.

Pertama kita buat struktur html ketikan seperti dibawah ini,

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Pembukaan Pertandingan Sepak Bola</title>
  <link rel="stylesheet" href="ui-card.css">
</head>
<body>

    <div class="doom">
      <h2>Champions League Final Match</h2>
      <div class="detail">
        <div class="juve">
          <img src="juve.png" alt="">
          <h3 class="team">Juventus</h3>
        </div>
        <div class="details">
          <h3 class="date">June 2, 01:30 </h3>
          <h1 class="vs">VS</h1>
          <h4 class="vn">Estadio Metropolitano, Madrid</h4>
        </div>
        <div class="mu">
          <img src="mu.png" alt="">
          <h3 class="team">Manchester United</h3>
        </div>
      </div>
    </div>

</body>
</html>

Apakah hasil kalian sudah seperti ini. Selanjutnya kita membutuhkan file cssnya seperti berikut ini

@import url('https://fonts.googleapis.com/css?family=Chivo');

body{
  margin:0;
  padding:0;
  font-family: 'Chivo', sans-serif;
  background: url(allianz.jpg);
  background-size: cover;
}

.doom{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  width: 600px;
  background: rgba(255,255,255,0.5);
  border-radius: 10px;
  overflow: hidden;
  transition: 0.5s;
  box-shadow: 0 0 0 10px rgba(255,255,255,0.2)
}

.doom:hover{
  background: #fff;
  box-shadow: 0 0 0 10px rgba(255,255,255,0.2)
}

.doom:before{
  content: '';
  position: absolute;
  bottom: -74%;
  left: -120%;
  width: 100%;
  height: 100%;
  background: #c62bff;
  transition: 0.5s;
  z-index: -1;
  box-sizing: border-box;
  border-top: 5px solid #f2473e;
  transform: skewX(-5deg);
}

.doom:hover:before{
  left: -50%;
}

.doom:after{
  content: '';
  position: absolute;
  bottom: -74%;
  right: -120%;
  width: 100%;
  height: 100%;
  background: #ff0000;
  transition: 0.5s;
  z-index: -1;
  box-sizing: border-box;
  border-top: 5px solid #c62bff;
  transform: skewX(-5deg);
}

.doom:hover:after{
  right:-50%;
}

.doom h2{
  width: 100%;
  margin: 0;
  padding: 20px;
  text-align: center;
  box-sizing: border-box;
  transition: 0.5s;
}

.doom:hover h2{
  background: #42b6ff;
}

.detail{
  position: relative;
}

.vs{
  width: 50px;
  height: 50px;
  font-size: 24px;
  border-radius: 50%;
  background: #000;
  color: #fff;
  text-align: center;
  line-height: 50px;
  margin:20px auto;
}

.date{
  margin:20px 0 0;
}

.juve{
  width: 200px;
  float: left;
  padding: 10px 20px 20px;
  box-sizing: border-box;
  text-align: center;
}

.mu{
  width: 200px;
  float: left;
  padding: 10px 20px 20px;
  box-sizing: border-box;
  text-align: center;
}

.juve img, .mu img{
  width: 100%;
}

h3.team{
  padding: 15px 0 0;
  margin-bottom: 15px;
  text-align: right;
}

.juve h3.team{
  text-align: left;
  transform: 0.5s;
}

.doom:hover .juve h3.team{
  color:#fff7f7;
}

.details{
  width: 200px;
  min-height: 200px;
  float: left;
  text-align: center;
}

Nah jika kalian sudah ketikan html dan css dengan benar,  langsung saja dijalankan pada browser masing-masing dan jangan lupa lihat efek hover saat kursor didekatkan apakah hasilnya seperti dibawah ini

Baiklah teman-teman demikian artikel kali ini yang membahas cara membuat design team bola yang akan bertanding menggunakan html dan css, sampai berjumpa lagi pada artikel selanjutnya. Semoga bermanfaat dan terima kasih.