<p>It's the first day of Eid ul Fitr 1442/2021 and this page will be a special one that I will be designing with HTML and CSS only and also will not be writing anything related to programming and coding during these three days of EID.</p>
</br>
</br>
<style>
      .eid-mubarak {
        width: 70vw;
        height: 70vw;
        margin-top: 5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #071a38;
        font-family: "Righteous";
        animation: wiggle 0.5s linear;
      }

      .eid {
        font-size: 40vw;
      }
      .ulfitr {
        font-size: 15vw;
      }
      .mubarak {
        font-size: 11vw;
      }

      .eid,
      .ulfitr,
      .mubarak {
        margin: 0;
        line-height: 0.8;
        color: #ffcb05;
      }

      .eid:hover,
      .ulfitr:hover,
      .mubarak:hover {
        animation: wiggle 0.5s linear;
      }
      @keyframes wiggle {
        0% {
          transform: rotate(0turn);
        }
        25% {
          transform: rotate(0.02turn) scale(1.1);
        }
        50% {
          transform: rotate(-0.02turn) scale(1.1);
        }
        75% {
          transform: rotate(0.02turn) scale(1.1);
        }
        100% {
          transform: rotate(0turn) scale(1);
        }
      }
</style>
<div class="eid-mubarak">
    <div class="eid">EID</div>
    <div class="ulfitr">UL FITR</div>
    <div class="mubarak">MUBARAK</div>
</div>
</br>
</br>
<p><img src="/assets/images/day-133/eid-mubarak.png" alt="Eid Mubarak 2021"></p>


zainsci-blog

Day 133 - Eid ul Fitr Day 01