Welcome to Grayson ! Get familiar with the STriipe products and explore their features:
Well organized and easy to understand. You can any work by following our docs easily
Code is clean if it can be understood.Our code is more formatting for your website
Our Template is full Perfect for all device. You can visit our template all device easily.
The template has Sass available for css. You can Change and customize css by sass.
Grayson is faster loading speed. Grayson create your template so much faster and easier
We are provide 24 hours support for all clients.You can purchase without hesitation.
Welcome to Grayson
Grayson is a sleek and modern digital portfolio designed to showcase expertise in web development, design, and creative projects. It offers an interactive and visually appealing platform to present work samples, skills, and achievements. With a focus on simplicity and functionality, Grayson features responsive design, project galleries, and seamless navigation. The portfolio is equipped with a downloadable resume and an easy-to-use contact form, making it a professional yet personalized showcase for potential clients and collaborators. Perfect for creative professionals looking to make a lasting impression.
Grayson - is highly customizable - looks awesome on tablets and mobile devices. We have included best web development practices - you can create a great website layout based on Bootstrap or Grid 1320px.
After purchasing Grayson template on themeforest.net with your Envato account, go to your Download page. You can choose to download Grayson template only or the entire Grayson template package which contains the following files:
Installing a Grayson template is not like WordPress or CMS theme installation, actually, installation keyword does not go with Grayson template. Why? because you don’t install anything, yes Grayson or HTML templates are automatically rendered by the browser.
Before all that you have to edit your template and place your own contents by replacing old demo contents, in this case, you will need a code editor such as - VScode, Sublime Text, etc. When template editing is done using editor, save the files and folder and go ahead to upload template files on live server.
First of all, If you don’t have your template on your computer, download Grayson template to get started, when download/purchase complete you will get a package like this screenshot (after unzip).
This template is a fixed layout with four columns. The main contents are inside the 'body' tag divided into different section (i.e. header, banner, services,... footer etc.). The general template structure is the same throughout the template. Here is the general structure.
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="Grayson - Personal Portfolio HTML5 Template">
<title>Grayson - Personal Portfolio HTML5 Template</title>
<!-- Place favicon.ico in the root directory -->
<link rel="shortcut icon" href="assets/imgs/favicon.svg">
<!-- CSS here -->
<link rel="stylesheet" href="assets/css/plugins/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/plugins/animate.min.css">
<link rel="stylesheet" href="assets/css/plugins/swiper.min.css">
<link rel="stylesheet" href="assets/css/plugins/nice-select.css">
<link rel="stylesheet" href="assets/css/plugins/fontawesome-pro.css">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<!-- JS here -->
<script src="assets/js/jquery-3.7.1.min.js"></script>
<script src="assets/js/waypoints.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/swiper.min.js"></script>
<script src="assets/js/counterup.js"></script>
<script src="assets/js/jquery.nice-select.min.js"></script>
<script src="assets/js/type.js"></script>
<script src="assets/js/wow.js"></script>
<script src="assets/js/jquery.appear.js"></script>
<script src="assets/js/onepage-nave.js"></script>
<script src="assets/js/meanmenu.min.js"></script>
<script src="assets/js/gsap.js"></script>
<script src="assets/js/scroll-smoother.js"></script>
<script src="assets/js/ScrollToPlugin.min.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
We are using one customed CSS files (style.css) and several vendor css files. CSS file structure is as follows:
/************ TABLE OF CONTENTS ***************
-----------------
01. THEME CSS
-----------------
1.1 Commmon
1.2 Theme
1.3 Typography
1.4 Section-title
1.5 animation
-----------------
02. utils CSS
-----------------
2.1 Breakpoint
2.2 Extends
2.3 Colors
2.4 Mixins
2.5 Root
-----------------
03. COMPONENTS CSS
-----------------
3.2 Back to top
3.3 Breadcrumb
3.4 Button
3.5 Offcanvas
3.6 Prealoder
-----------------
04. HEADER CSS
-----------------
4.1 Header 1
---------------------------------
05. MENU CSS
---------------------------------
5.1 Meanmenu
5.2 Menu
---------------------------------
06. FOOTER CSS
---------------------------------
6.1 Footer 1
---------------------------------
07. BANNER CSS
---------------------------------
7.1 Banner Style 01
---------------------------------
08. PAGES CSS
---------------------------------
8.1 About css
8.2 Blog css
8.3 Contact css
8.4 Portfolio css
8.5 Service css
There is a custom .js file named main.js and are several vendor js files as plugins. We are using jQuery(a javascript library) instead of vanilla javascript. Our file structure is a follows:
To change any images of the website
Example: Suppose you want to change the following image file:
<div class="logo">
<a href="index.html">
<img src="assets/imgs/logo/logo.svg" alt="logo">
</a>
</div>
To change any images of the website
Example: Suppose you want to change the following image file:
<div class="logo">
<a href="index.html">
<img src="assets/imgs/logo/logo.svg" alt="logo">
</a>
</div>
We have used scss for this project to write css. If you are familiar with scss you should customize only the .scss files. Please make sure you compile the style.scss file after you have made changes in any of the .scss files.
Have a look at the following image for a visual description:
Welcome to Grayson Header Elements! You can choose 3 Types of header package for creating you website.
<!-- Header area start -->
<header class="header-area">
<div class="header-sticky">
<div class="container">
<div class="main-header">
<div class="logo">
<a href="index.html">
<img src="assets/imgs/logo/logo.svg" alt="logo">
</a>
</div>
<div class="main-menu">
<nav id="mobile-menu">
<ul>
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#about"> About</a>
</li>
<li>
<a href="#portfolio">Portfolio</a>
</li>
<li>
<a href="#services">Services</a>
</li>
<li class="has_dropdown">
<a href="#blog"> Blog</a>
<ul class="sub-menu">
<li>
<a href="#blog">Blog</a>
</li>
<li>
<a href="blog-details.html">Blog Details</a>
</li>
</ul>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</nav>
</div>
<div class="header-right">
<div class="header-social d-none d-xl-block">
<ul>
<li><a href="#"><i class="fa-brands fa-twitter"></i></a></li>
<li><a href="#"><i class="fa-light fa-globe"></i></a></li>
<li><a href="#"><i class="fa-brands fa-github"></i></a></li>
</ul>
</div>
<button class="theme_btn d-none d-sm-block" type="button">Resume <span><i class="fa-light fa-arrow-down-to-line"></i></span></button>
<div class="bars_icon d-lg-none">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Header area end -->
Welcome to Grayson Footer You can select any footer & customize easily and build your website.
Awesome Footer styles. See below image and code for more information.
<!-- Footer area start -->
<footer>
<div class="footer-area">
<div class="container wow fadeInUp" data-wow-delay=".4s">
<div class="footer-logo">
<a href="index.html">
<img src="assets/imgs/logo/logo.svg" alt="logo">
</a>
</div>
<div class="footer-menu">
<nav>
<ul>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#"> Blog</a>
</li>
<li>
<a href="#"> Services</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</nav>
</div>
<div class="footer-social">
<ul>
<li><a href="#"><i class="fa-brands fa-twitter"></i></a></li>
<li><a href="#"><i class="fa-light fa-globe"></i></a></li>
<li><a href="#"><i class="fa-brands fa-github"></i></a></li>
</ul>
</div>
<div class="copyright-text">
<p>@2025 <a href="index.html">Grayson</a></p>
</div>
</div>
</div>
</footer>
<!-- Footer area end -->
We've used the following fonts, free icons and plugins as listed:
Thank you for purchasing my template.
If you have any questions that are
beyond the scope of this help file, please feel free to open a new ticket at our
Support
forum
-----------------------------------------------------
Version 1.0 -
-----------------------------------------------------
- Initial Release Grayson-Portfolio Resume
- Upadate all plugins / Library
- Improve site speed and image optimization
- Improve Responsive issues
- Product design quality enhanced
If you need to theme customization or make custom theme or template. Please, you can contact us for this.
Contact Us
If you need to theme customization or make custom theme or template. Please, you can contact us for this.
Contact