Prista

Prista – App Landing Page HTML Template


Made with ♥ by GFXPARTNER

Image

Prista is a premium multipurpose HTML landing page template suitable for any kind of mobile apps, startup apps, one pager websites for varied kind of businesses.

Thank you for purchasing our template. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form here. Thanks so much!

Markup Markup customization and highlights

General Markup

The general template structure is the same throughout the template. Here is the general structure.

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- meta tags -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- title tag -->
    <title>Prista - App landing page</title>

    <!-- favicon -->
    <link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon/favicon-16x16.png">
    <link rel="manifest" href="assets/images/favicon/site.webmanifest">

    <!-- stylesheets -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Spartan:wght@500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/glightbox.min.css">
    <link rel="stylesheet" href="assets/css/all.min.css">
    <link rel="stylesheet" href="assets/css/overlay-scrollbars.min.css">
    <link rel="stylesheet" href="assets/css/swiper-bundle.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>

Edit loading and page transition

Here is the css style for preloader found in the _preloader.scss file.

.preloader {
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100vw; 
  height: 100vh; 
  z-index: 999; 
  @include animateIt; 
  transition-delay: 1s;
  background-color: var(--color-dark);
  display: flex;
  justify-content: center;
  align-items: center;

  $spinkit-size: 8rem !default;

  .sk-folding-cube {
      $cubeCount: 4;
      $animationDuration: 2.4s;
      $delayRange: ($animationDuration / 2);
    
      width: $spinkit-size;
      height: $spinkit-size;
      position: relative;
      margin: auto;
      transform: rotateZ(45deg);
    
      .sk-cube {
        float: left;
        width: 50%;
        height: 50%;
        position: relative;
        transform: scale(1.1);
      }
    
      .sk-cube:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        animation: sk-folding-cube-angle $animationDuration infinite linear both;
        transform-origin: 100% 100%;
      }
    
      // Rotation / angle
      @for $i from 2 through $cubeCount {
        .sk-cube-#{$i} {
          transform: scale(1.1) rotateZ((90deg * ($i - 1)));
        }
      }
    
      @for $i from 2 through $cubeCount {
        .sk-cube-#{$i}:before {
          animation-delay: ($delayRange / $cubeCount * ($i - 1));
        }
      }
  }
    
  @keyframes sk-folding-cube-angle {
  0%, 10% {
      transform: perspective(140px) rotateX(-180deg);
      opacity: 0;
  }
  25%, 75% {
      transform: perspective(140px) rotateX(0deg);
      opacity: 1;
  }
  90%, 100% {
      transform: perspective(140px) rotateY(180deg);
      opacity: 0;
  }
  }
}
body.loaded .preloader{ transform: translateY(-100%);  }

Styles Styles customization and highlights

Stylesheets

Here's a list of the stylesheet files I'm using with this template, you can find more information opening each file:

File Name Description
bootstrap.min.css Detault bootstrap css file
font-awesome.min.css Font Awesome font icons
glightbox.min.css GLight Box css file
overlay-scrollbars.min.css Overlay Scrollbars css file
swiper-bundle.min.css Swiper Slider css file
style.css Template main css

JavaScript JavaScript customization and highlights

JavaScript Files

This is the list of all the javascript files are we used for our theme.

Tag Description
bootstrap.bundle.min.js Bootstrap Javascript file
glightbox.min.js GLight Box Javascript file
overlay-scrollbars.min.js Overlay Scrollbars Javascript file
swiper-bundle.min.js Swiper Slider Javascript file
main.js All the plug-ins initializing

Photoshop Files Photoshop customization and highlights

There is no included psd file with this item but you can purchase it separately by clicking here.

Credits Files Some of your credits and sources

I've used the following images, icons or other files as listed.

JavaScript

  1. Bootstrap
  2. Overlay Scrollbars
  3. Swiper Slider
  4. GLight Box

Images

  1. http://www.istockphoto.com/ — Some of images we used from here
  2. http://www.shutterstock.com/ — Some of images we used from here
  3. https://www.pexels.com/ — Some of images we used from here

Once again, thanks for purchasing this template and if you have any questions relating to this theme. No guarantees, but we'll do our best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.