responsive.css

/* Untuk Tablet */
@media all and (max-width: 1000px) {
  .top-wrapper {
    width: 100%;
    background-image: url(media/backgroundtablet.png);
    background-size: cover;
  }

  .top-wrapper h1:hover {
    transform: rotate(0.5deg);
  }

    .top-wrapper h1 {
      font-size: 40px;
    }

    .top-wrapper p {
      font-size: 18px;
    }
  .lesson {
    width: 50%;
  }

  .lesson2 {
    width:50%;
  }

  .lesson3 {
    width: 100%;
  }
  }
  
  /* Untuk Smartphone */
  @media all and (max-width: 670px) {

    .header-right {
      display: none;
    }

    .menu-icon {
      display:block;
    }

    .lesson {
      width: 100%;
    }

    .lesson2 {
      width:100%;
    }

    .lesson3 {
      width:100%;
    }

    h2 {
      font-size: 15px;
    }
    .top-wrapper {
      width: 100%;
      background-image: url(media/backgroundsmartp.png);
      background-size: cover;
    }
    .top-wrapper h1 {
      font-size: 35px;
    }
    .top-wrapper p {
      font-size: 15px;

    }

    .top-wrapper p:hover {
      color: maroon;
    }

    
  }