Build Joomla Website Apple.com

In this detailed tutorial, we'll show you how to build a modern Joomla website, completely similar to Apple.com, using...

Tools

Gridbox

Estimated time

83 min.

Advanced CSS Styles

Copy CSS code below, go to Tools ➝ Code Editor ➝ CSS and paste it.

 

/* Font Smoothing */
body {
    -webkit-font-smoothing: antialiased;
}
/* Hide Navigation Dropdown Icon */
li.megamenu-item i.ba-icons.ba-icon-caret-right {
    display: none !important;
}
/* Mega Menu Blur Backdrop */
.page .main-body::before { 
    background: rgb(0 0 0 / 40%);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    pointer-events: none;
    visibility: hidden;
    position: fixed;
    opacity: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    transition: .4s cubic-bezier(.4,0,.6,1);
}
body:has(.megamenu-item.parent:hover) .main-body::before {
    opacity: 1;
    visibility: visible;
    transition: .4s cubic-bezier(.4,0,.6,1);
}
/* Plugin Carousel */
@media (min-width: 1281px) {
  .custom-carousel ul li {
      width: calc((100% - 12px) / 3) !important;
  }
  .custom-carousel .ba-slideshow-caption {
      flex-direction: row;
      justify-content: flex-start;
      padding: 55px 70px;
      align-items: flex-end;
      transition: background-color 1s linear;
  }
  li.item.active[data-position="1"] .ba-slideshow-caption {
      background: transparent !important;
  }
  .ba-slideshow-caption > * {
      opacity: 0;
      transition: 1s linear;
  }
  li.item.active[data-position="1"] .ba-slideshow-caption > * {
      opacity: 1;
  }
  .custom-carousel .ba-slideshow-caption > * {
      padding: 0;
  }
  .custom-carousel .slideshow-title-wrapper {
      order: 2;
      margin-left: 20px;
  }
  .custom-carousel .slideshow-description-wrapper {
      order: 3;
  }
  .custom-carousel .ba-slideshow-description:before {
      content: '•';
      color: #fff;
      margin: 0 5px;
  }
}
/* Footer links */
.footer a:hover {
    text-decoration: underline;
}

Something is not clear? Ask a question on community forums.

Related tutorials