Halaman Utama/style.css

/* Halaman Utama/TesSeluler */ /* #region header */ .mp-header {

 border-radius: 10px;
 border: 1px solid #a7d7f9;

 background: url('//upload.wikimedia.org/wikipedia/commons/1/10/Wikipedia-logo-v2-200px-transparent.png');
 background-repeat: no-repeat;
 background-position: -40px -15px;
 vertical-align: top;

} .mp-header__main {

 display: flex;
 font-size: 95%;
 margin-top: 2px;
 margin-bottom: 2px;

} .mp-header__welcome {

 margin-left: 155px;
 flex: 1;
 margin-top: 2px;
 margin-bottom: 2px;

} .mp-header__statistics {

 flex: 0 1 auto;
 padding: 1em;
 text-align: right;
 line-height: 1.3;

} .mp-header__welcome-hero {

 font-size: 185%;

} .mp-header__welcome-subtitle {

 padding-left: 8px;

} .mp-header__portal {

 text-align: center;
 margin-top: 2px;
 margin-bottom: 2px;

}

.mp-main-content, .mp-main-content__focus, .mp-main-content__other { display: block; width: 100%; padding: 0; }

/* #endregion */ /* #region main-content */ @media all and ( min-width: 800px ) { body:not(.skin-minerva) .mp-main-content { margin-top: 10px; display: flex; } body:not(.skin-minerva) .mp-main-content__focus { flex: 1 1 55%; border: 1px solid #a7d7f9; vertical-align: top; color: #000; padding: 0 10px 10px 0; border-radius: 10px; } body:not(.skin-minerva) .mp-main-content__other { flex: 1 1 45%; border: 1px solid #a7d7f9; vertical-align: top; padding: 0 10px 10px 0; background: #f5faff; border-radius: 10px; margin-left: 10px; } } body.skin-minerva .mp-main-content__focus, body.skin-minerva .mp-main-content__other {

 border: none;

} /* #endregion */

/* #region footer */ .mp-footer {

 margin: 12px 0 0 0;
 color: #000;
 padding: 5px;

} .mp-footer__main {

 border: 1px solid #a7d7f9;
 border-radius: 10px;

} .mp-footer__title {

 text-align: center;
 margin-bottom: 5px;

} .mp-footer__subtitle {

 font-size: 85%;
 text-align: center;

} .mp-footer__contact-us {

 margin-top: 10px;
 text-align: center;

}

/* #endregion */

/* #region Templat:Halaman Utama/Box3 */

.mp-content-box {

 margin-top: 10px;

} .mp-content-box__header {

 position: relative;
 background-image: url('//upload.wikimedia.org/wikipedia/commons/4/46/Bluebg_rounded.png');
 left: 4px;
 top: 2px;
 margin: 0;
 height: 25px;
 background-repeat: no-repeat;
 overflow: visible;
 border: none;

} .mp-content-box .mp-content-box__header::after {

 border: none;

} .mp-content-box__header-icon {

 position: absolute;
 left: 5px;
 top: -6px;

} .mp-content-box__header-text {

 position: absolute;
 left: 40px;
 top: 2px;

 margin-top: 0;
 color: black;
 font-weight: bold;
 font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
 border-bottom: none;
 padding: 0.15em 0.4em;

} .mp-content-box__header .mp-content-box__header-text {

 font-size: 1rem;

} .mp-content-box__content {

 padding-left: 10px;
 padding-bottom: 5px;
 padding-top: 12px;

} .mp-content-box__footer {

 text-align: right;

} /* #endregion */

/* #region Templat:Halaman Utama/Box4 */ .mp-content-box-other {

 margin-top: 10px;

} .mp-content-box-other__header {

 position: relative;
 left: 8px;
 top: 2px;
 background: #c6defe;
 height: 25px;
 margin: 0 10px 0 0;
 border-radius: 8px;
 overflow: visible;
 border: none;

} .mp-content-box-other .mp-content-box-other__header::after {

 border: none;

} .mp-content-box-other__header-icon {

 position: absolute;
 left: 1px;
 top: -7px;

} .mp-content-box-other__header-text {

 position: absolute;
 left: 40px;
 top: 2px;

 margin: 0;
 border-bottom: 0;
 font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
 font-weight: bold;
 text-align: left;
 color: #000;
 padding: 0.15em 0.4em;

} .mp-content-box-other__header .mp-content-box-other__header-text {

 font-size: 1rem;

} .mp-content-box-other__content {

 margin: 0 1em 1em 1em;
 padding-right: 0;
 padding-top: 12px;

} /* #endregion */

/* Agar gambar pilihan mengecil di layar kecil */ .mp-gambar-pilihan { width: 100%; height: auto; }

/* Confetti Ultah WBI */ @keyframes cauconfeti {

   from {opacity: 0;}
   50% {opacity: 1;}
   to {transform: translateY(100vh);}

}

@keyframes amaguemcontainer {

   from {visibility: visible;}
   to {visibility: hidden;}

}

.container-confeti {

   display: flex;
   max-width: 100%;
   width: 90%;
   height: 100vh;
   z-index: 1000;
   margin:0 auto;

position: absolute; visibility:hidden;

   animation: amaguemcontainer;
   animation-duration: 4s;

} .confeti {

   position: absolute;
   width: 10px;
   height: 30px;
   top: 0;
   opacity: 0;

}

.confeti:nth-child(odd) {

   background: #E63946;

} .confeti:nth-child(2n) {

   background: #84C318;

}

.confeti:nth-child(4n-7) {

 background: #73EEDC;

} .confeti:nth-child(1) {

   left: 5%;
   transform: rotate(-23deg);
   animation: cauconfeti 5 ease-in-out;
   animation-delay: 152ms;
   animation-duration: 1000ms;

}

.confeti:nth-child(2) {

   left: 12%;
   transform: rotate(35deg);
   animation: cauconfeti 5 ease-in-out;
   animation-delay: 200ms;
   animation-duration: 1100ms;

}

.confeti:nth-child(3) {

   left: 25%;
   transform: rotate(-23deg);
   animation: cauconfeti 5 ease-in-out;
   animation-delay: 146ms;
   animation-duration: 1300ms;

}

.confeti:nth-child(4) {

   left: 32%;
   transform: rotate(35deg);
   animation: cauconfeti 5 ease-in-out;
   animation-delay: 182ms;
   animation-duration: 1500ms;

}

.confeti:nth-child(5) {

   left: 45%;
   transform: rotate(-23deg);
   animation: cauconfeti 5 ease-in-out;
   animation-delay: 232ms;
   animation-duration: 900ms;

}

.confeti:nth-child(6) {

   left: 52%;
   transform: rotate(35deg);
   animation: cauconfeti 5 ease-in-out;
   animation-delay: 222ms;
   animation-duration: 1300ms;

}

.confeti:nth-child(7) {

   left: 65%;
   transform: rotate(-23deg);
   animation: cauconfeti 5 ease-in-out;
   animation-delay: 382ms;
   animation-duration: 1200ms;

}

.confeti:nth-child(8) {

   left: 73%;
   transform: rotate(35deg);
   animation: cauconfeti 5 ease-in-out;
   animation-delay: 122ms;
   animation-duration: 1600ms;

}

.confeti:nth-child(9) {

   left: 77%;
   transform: rotate(-23deg);
   animation: cauconfeti 5 ease-in-out;
   animation-delay: 152ms;
   animation-duration: 1200ms;

}

.confeti:nth-child(10) {

   left: 82%;
   transform: rotate(35deg);
   animation: cauconfeti 5 ease-in-out;
   animation-delay: 282ms;
   animation-duration: 700ms;

}

.confeti:nth-child(3n) {

   width: 5px;
   height: 60px;
   border-radius: 15px;
   animation-duration: 1200ms;
   animation-delay: 1000ms;

}

.confeti:nth-child(4n) {

   width: 5px;
   height: 12px;
   animation-duration: 2000ms;

} .confeti:nth-child(4n) {

 position: relative;
 width: 50px;
 height: 5px;
 margin: 20px 0;
 background: #457B9D;
 border-radius: 60% / 10%;
 color: white;
 text-align: center;
 text-indent: .1em;

} .confeti:nth-child(4n):before {

 content: ;
 position: absolute;
 top: 10%;
 bottom: 10%;
 right: -5%;
 left: -5%;
 background: inherit;
 border-radius: 5% / 50%;

} .confeti:nth-child(4n):after {

 content: ;
 position: absolute;
 bottom: 0;
 right: -11px;
   width: 50px;
   height: 5px;
 background: #457B9D;
 border-radius: 80% / 150%;
   

}