Site Logo

The template supports dual versions of the logotype to maintain a good contrast ratio depending on the conditions where it appears:

• The Primary logo version is used for places with light backgrounds.
• The Secondary logo version is used for places with dark backgrounds.

Markup

Graphic Version

For the best appearance, it's recommended to use the .svg format for the logo. Feel free to use any other image format appropriate for the web, e.g., .jpg, .png, .gif.

<!-- Site logo -->
<a class="header__col header__col_center header__col_logo logo" href="index.html">
  <div class="logo__wrapper-img">
    <!-- primary logo version (for use with light backgrounds) -->
    <img class="logo__img-primary" src="img/logo/logo-dark.svg" width="39" height="20" loading="eager" alt="Asli HTML5 Template"/>
    <!-- secondary logo version (for use with dark backgrounds) -->
    <img class="logo__img-secondary" src="img/logo/logo-light.svg" width="39" height="20" loading="eager" alt="Asli HTML5 Template"/>
  </div>
</a>
<!-- - Site logo -->

Text Version

Don't have your own brand logo yet? No worries – just use the text logo version. It supports a title and tagline which you can use to briefly describe yourself or your company.

<a class="header__col header__col_center header__col_logo logo" href="index.html">
  <div class="logo__text">
    <span class="logo__text-title">Asli</span>
    <span class="logo__text-tagline">Filmmaker & Photographer</span>
  </div>
</a>