Update Information
Version 1.2
- 2 new contact pages added
- Portfolio and portfolio detail pages added
- 3 new pricing sections added
- New service detail page added.
- Backend codes for contact pages updated.
Introduction
Mysia – A modern HTML5 Template equipped with stunning homepages and numerous built-in inner pages. This template is specifically designed for creative agencies, designers, digital agencies, freelancers, developers, marketing teams, startups, blogs, and portfolios. It is the perfect choice to give your project an excellent start.
Template Features:
- Easy to Customize
- HTML5 & CSS3
- Clean & Simple Design
- Fully Responsive Layout
- Crossbrowser Compatible with Edge, IE11+, Firefox, Opera, Chrome
- W3 Valid
- Retina Ready
- Fontawesome Free Icon
- Powered with Bootstrap (v5.x)
- Powered with jQuery (v3.7.1)
- Build with Sass
- Smooth Animation
- Well Documented
Getting Started
The template folder mysia is available inside the downloaded zip file. You need to unzip the zip file to find the template as well as the documentation folder.
The files and folders structure is similar to the following:
- /css/ — folder with CSS files.
- /sass/ — folder with SCSS files.
- /images/ — folder with image files.
- /js/ — folder with Javascript files.
- /vendor/ — folder with Bootstrap, jQuery, FontAwesome, and other JavaScript files
Upload the template files to the server with the help of one of the FTP-clients like FileZilla.
Files Edit & Upload:
Individual pages can be customized by opening in a code editor such as VS Code. Once all the customization completed then to make the website live you need to upload the updated project files to the hosting server for your own domain. The files can be uploaded using FTP client such as FileZilla.
HEAD CSS Structure
Followings are the css files which loaded inside the Head Section:
<!-- CSS -->
<link rel="stylesheet" href="vendor/bootstrap-5.3.3/css/bootstrap.min.css">
<link rel="stylesheet" href="vendor/fontawesome-6.6.0/css/all.min.css">
<link rel="stylesheet" href="vendor/aos/dist/aos.css">
<link rel="stylesheet" href="vendor/slick/slick.css">
<link rel="stylesheet" href="vendor/lightbox/css/lightbox.min.css">
<link rel="stylesheet" href="css/style.min.css">
<link rel="stylesheet" href="css/custom.css">
In the theme, you can use 11 additional colors besides the default ones. You can include the CSS file of the color you want to use.
<!-- THEME BLUE -->
<link rel="stylesheet" href="css/theme-blue.min.css">
<!-- THEME PURPLE -->
<link rel="stylesheet" href="css/theme-purple.min.css">
<!-- THEME PINK -->
<link rel="stylesheet" href="css/theme-pink.min.css">
<!-- THEME GREEN -->
<link rel="stylesheet" href="css/theme-green.min.css">
<!-- THEME RED [NEW]-->
<link rel="stylesheet" href="css/theme-red.min.css">
<!-- THEME TEAL [NEW]-->
<link rel="stylesheet" href="css/theme-teal.min.css">
<!-- THEME CHARCOAL [NEW]-->
<link rel="stylesheet" href="css/theme-charcoal.min.css">
<!-- THEME NAVY [NEW]-->
<link rel="stylesheet" href="css/theme-navy.min.css">
<!-- THEME FOREST [NEW]-->
<link rel="stylesheet" href="css/theme-forest.min.css">
<!-- THEME INDIGO [NEW]-->
<link rel="stylesheet" href="css/theme-indigo.min.css">
<!-- THEME ROSEGOLD [NEW]-->
<link rel="stylesheet" href="css/theme-rosegold.min.css">
Javascript Structure
Followings are the JS files which loaded before the end of HEAD or BODY Section:.
<!-- JavaScript Files -->
<script src="vendor/jquery/jquery-3.7.1.min.js" ></script>
<script src="vendor/bootstrap-5.3.3/js/bootstrap.bundle.js" ></script>
<script src="vendor/aos/dist/aos.js" ></script>
<script src="vendor/slick/slick.min.js" ></script>
<script src="vendor/counter-up/jquery.counterup.js" ></script>
<script src="vendor/particles/particles.min.js" ></script>
<script src="vendor/simpleParallax/dist/simpleParallax.min.js" ></script>
<script src="vendor/isotope/isotope.pkgd.min.js"></script>
<script src="vendor/isotope/imagesloaded.pkgd.min.js"></script>
<script src="vendor/lightbox/js/lightbox.min.js"></script>
<script src="js/base.js" ></script>
Do You Want Real Demo Images?
We are unable to include demo images in the download bundle. To obtain the images, please request assistance through TemplateMonster.
HTML Structure
TMysia is an HTML5 & CSS3 theme developed with the Bootstrap framework. For more information, you can refer to the Bootstrap CSS documentation.
The general template structure remains consistent throughout the theme, with each section located under its own distinct class.
Example General Structure:
<div class="global about">
<div class="container">
<div class="row">
<div class="col-12 col-md-6 align-items-center">
<div class="title fw-bold mb-4 aos-init aos-animate" data-aos="fade-up" data-aos-delay="100">
<span class="color-theme-1">About</span> Us
</div>
<div class="text-justify aos-init aos-animate" data-aos="fade-up" data-aos-delay="250">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet libero id nisi euismod, sed porta est consectetur. Vestibulum auctor felis eget orci semper vestibulum. Pellentesque ultricies nibh gravida, accumsan libero luctus, molestie nunc. In nibh ipsum, blandit id faucibus ac, finibus vitae dui. Orci sempre vestibulimun.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet libero id nisi euismod, sed porta est consectetur. Vestibulum auctor felis eget orci semper vestibulum. Pellentesque ultricies nibh gravida, accumsan libero luctus, molestie nunc. In nibh ipsum, blandit id faucibus ac, finibus vitae dui. Orci sempre vestibulimun.</p>
</div>
<a href="#" class="theme-btn type-3 aos-init aos-animate" data-aos="fade-up" data-aos-delay="500">READ MORE</a>
</div>
<div class="col-12 col-md-6 d-flex justify-content-center align-items-center">
<div class="shape overflow-hidden dots-black shape-top-right shape-opacity-8 mar-t-md-40 aos-init aos-animate" data-aos="fade-left" data-aos-delay="750">
<div class="mask-image mask-animation-zoom mask-animation-hover-pause">
<img class="main-img" src="images/about-us/about-us.webp" alt="about-us">
</div>
</div>
</div>
</div>
</div>
</div>
Responsive Breakpoints
Mysia is a responsive template and is based on the Bootstrap Framework. For more details about breakpoints, you can check out the Bootstrap Breakpoints documentation.
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }
// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// `md` applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }
// `lg` applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }
// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }
// `xxl` applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }
Change Theme Color
You can use 5 different theme colors in Mysia, excluding the default theme color. You can include the theme color you want to use within the Head Section [HEAD CSS STRUCTURE]
File path: sass/base/root.scss
Themes Colors path:
sass/themes/*
:root {
--theme-color-1: #e77e23;
--theme-color-2: #080602;
--theme-color-3: #666;
--theme-form-border: #dfdfdf;
--theme-color-white: #fff;
--theme-color-black: #000;
--theme-color-gray: #f7f8f9;
--theme-color-dark: #080602;
--theme-footer-color: #999;
--theme-footer-background: #080602;
--theme-global-gradient-background-1: #fff;
--theme-global-gradient-background-2: #f7f8f9;
}
Note: After SCSS file run then it will be work
Fonts Used
In the Mysia theme, the default font used is Poppins from Google Web Font Services. The font can be changed based on the website needs Google Fonts
Font erişimi için Head Section arasına google font dahil edilmelidir.
<!-- FONTS-->
<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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
Varsayılanfont kodu style dosyasında bulunmakdadır.
File path: sass/base/root.scss
:root {
--theme-font-1: Poppins, sans-serif;
}
Note: After SCSS file run then it will be work
How to Run SCSS File
To use SCSS, you can use the Live Sass Compiler extension in Visual Studio Code Editor.
For a quick video guide, visit https://www.youtube.com/watch?v=9J__JAgQbS0&ab_channel=TopMarksDevelopment
Change Logo
To update the logo, please update the section below in the theme.
<div class="logo">
<a class="navbar-brand" href="index.html">
<img src="images/logo.png" alt="Mysia Logo">
</a>
</div>
If you want the logo to be different when scrolling down and the header becomes fixed, you can update and use the following code snippet.
<div class="logo">
<a class="navbar-brand brand-multiple" href="index.html">
<img src="images/logo.png" alt="Mysia Logo">
<img src="images/logo2.png" alt="Mysia Logo">
</a>
</div>
Main Slider Edit
In the Main Slider, you can use both videos and images. You can add icons for sound control in videos. You can update the following code section in the theme.
Information:
- To add a sound toggle icon to the video slider, add the class item-video-sound to the item.
- For images, the default transition time to the next slider is 5 seconds. For videos, the transition to the next slide will occur only after the video has ended.
To set a specific duration for the slider to move to the next one, use data-duration="5000".
<div class="main-slide">
<div class="item item-video item-overlay item-video-sound">
<video class="slide-video slide-media" loop muted preload="metadata">
<source src="images/main-slide/slider-video.mp4" type="video/mp4">
</video>
<div class="container">
<div class="content">
<div class="title" data-aos="fade-up-right" data-aos-delay="0" data-aos-duration="500">BRAND</div>
<div class="subtitle" data-aos="fade-up-left" data-aos-delay="500" data-aos-duration="500">BEYOND LIMITS</div>
<a href="contact.html" class="theme-btn theme-btn-rounded type-1" data-aos="fade-up" data-aos-delay="1000">CONTACT</a>
</div>
</div>
</div>
<div class="item item-video item-overlay" data-duration="5000">
<video class="slide-video slide-media" loop muted preload="metadata">
<source src="images/main-slide/slider-video-2.mp4" type="video/mp4">
</video>
<div class="container">
<div class="content">
<div class="title" data-aos="fade-up-right" data-aos-delay="0" data-aos-duration="500">BRAND</div>
<div class="subtitle" data-aos="fade-up-left" data-aos-delay="500" data-aos-duration="500">TO THE TOP</div>
<a href="about.html" class="theme-btn theme-btn-rounded type-3" data-aos="fade-up" data-aos-delay="1000">ABOUT US</a>
</div>
</div>
</div>
<div class="item item-image item-overlay">
<img src="images/main-slide/bg-img-1.webp" alt="Slide Image">
<div class="container">
<div class="content">
<div class="title" data-aos="fade-up-right" data-aos-delay="0" data-aos-duration="500">EMPOWER</div>
<div class="subtitle" data-aos="fade-up-left" data-aos-delay="500" data-aos-duration="500">YOUR BRAND</div>
<a href="contact.html" class="theme-btn theme-btn-rounded type-2" data-aos="fade-up" data-aos-delay="1000">CONTACT</a>
</div>
</div>
</div>
</div>
Services Edit
You can list services on your page in 2 different ways. You can review the Services and Services-2 pages.
Services.html Features:
You can add the listed services in the Services section either as flat or rounded. To add them as rounded, simply add the .services-rounded class next to the services class.
You can add the listed services in the Services section with 3 different animation types. You can use them by adding .animation-1, .animation-2, or .animation-3 to the class. If you do not want an animation, there is no need to add any of these classes.
<div class="global services services-rounded services-home animation-particles" id="particles">
<div class="container">
<div class="title text-center mb-5">
<span class="fw-bold color-theme-1 aos-init aos-animate" data-aos="fade-up" data-aos-delay="100">Services</span>
<div class="mini-desc color-theme-white opacity-75 aos-init aos-animate" data-aos="fade-up" data-aos-delay="200">Cras a elit sit amet leo accumsan volutsudisse.</div>
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg-3">
<div class="item animation-1 aos-init aos-animate" data-aos="fade-up" data-aos-delay="300">
<div class="service-card">
<div class="icon">
<a href="service-detail.html" aria-label="Service Title"><i class="fa-solid fa-code"></i></a>
</div>
<div class="title">
<h3><a href="service-detail.html">Software Development</a></h3>
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia.
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="item animation-2 aos-init aos-animate" data-aos="fade-up" data-aos-delay="400">
<div class="service-card">
<div class="icon">
<a href="service-detail.html" aria-label="Service Title"><i class="fa-solid fa-mobile-screen"></i></a>
</div>
<div class="title">
<h3><a href="service-detail.html">Responsive Web Design</a></h3>
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia.
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="item animation-3 aos-init aos-animate" data-aos="fade-up" data-aos-delay="500">
<div class="service-card">
<div class="image-wrapper">
<img src="images/service-image.webp" alt="Mobile App Development">
</div>
<div class="icon">
<a href="service-detail.html" aria-label="Service Title"><i class="fa-brands fa-google-play"></i></a>
</div>
<div class="title">
<h3><a href="service-detail.html">Mobile App Development</a></h3>
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia.
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="item aos-init aos-animate" data-aos="fade-up" data-aos-delay="600">
<div class="service-card">
<div class="icon">
<a href="service-detail.html" aria-label="Service Title"><i class="fa-solid fa-photo-film"></i></a>
</div>
<div class="title">
<h3><a href="service-detail.html">Graphic Design Services</a></h3>
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Projects Edit
You can display the projects listed in the projects section either on a different page or within a modal on the same page. To display them in a modal, you need to add 'data-bs-toggle="modal" data-bs-target="#project-modal"' to the project links. You can update the content using AJAX.
<div class="global global-gradient project" data-gradient-background-1="#fff" data-gradient-background-2="#f7f8f9" data-gradient-deg="180deg">
<div class="container">
<div class="title text-center mb-5" data-aos="fade-up" data-aos-delay="100">
<span class="fw-bold color-theme-1">Projects</span>
<div class="mini-desc color-theme-2 opacity-75">Cras a elit sit amet leo accumsan volutsudisse.</div>
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<div class="item" data-aos="fade-up" data-aos-delay="200">
<div class="image">
<img src="images/project/project-1.webp" alt="Project 1">
</div>
<div class="content">
<div class="title">
<a href="#" data-bs-toggle="modal" data-bs-target="#project-modal">Project Name 1</a>
</div>
<div class="tags">
<span>#Branding </span>
</div>
<a href="#" data-bs-toggle="modal" data-bs-target="#project-modal" class="theme-btn type-1 view-detail"><span><i class="fa-solid fa-eye"></i> View Project Modal</span></a>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="item" data-aos="fade-up" data-aos-delay="300">
<div class="image">
<img src="images/project/project-2.webp" alt="Project 2">
</div>
<div class="content">
<div class="title">
<a href="project-detail.html" target="_blank" data-proje-modal>Project Name 2</a>
</div>
<div class="tags">
<span>#Web Application</span>
</div>
<a href="project-detail.html" class="theme-btn type-1 view-detail"><span><i class="fa-solid fa-eye"></i> View Project</span></a>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="item" data-aos="fade-up" data-aos-delay="400">
<div class="image">
<img src="images/project/project-3.webp" alt="Project 3">
</div>
<div class="content">
<div class="title">
<a href="project-detail.html" target="_blank" data-proje-modal>Project Name 3</a>
</div>
<div class="tags">
<span>#Design </span>
</div>
<a href="project-detail.html" class="theme-btn type-1 view-detail"><span><i class="fa-solid fa-eye"></i> View Project</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- If a modal will be used -->
<div class="modal modal-flat project-modal fade" id="project-modal" tabindex="-1" aria-labelledby="project-modal" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header border border-0">
<span class="modal-title fs-5" id="project-name">Proje Name 1</span>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="project-detail">
<div class="row">
<div class="col-12 col-md-12 col-lg-5 col-xl-4">
<div class="default-slider">
<div class="item">
<img src="images/project/project-1.webp" alt="Proje Image">
</div>
<div class="item">
<img src="images/project/project-1_1.webp" alt="Proje Image">
</div>
<div class="item">
<img src="images/project/project-1_2.webp" alt="Proje Image">
</div>
<div class="item">
<img src="images/project/project-1_3.webp" alt="Proje Image">
</div>
<div class="item">
<img src="images/project/project-1_4.webp" alt="Proje Image">
</div>
</div>
</div>
<div class="col-12 col-md-12 col-lg-7 col-xl-8">
<div class="content-group">
<div class="subtitle">
<span class="color-theme-1">Project</span> Description
</div>
<div class="detail text-justify">
Dunc et quam sodales, fermentum leo ut, aliquam mauris. Phasellus vehicula sem
non nisl cursus semper. Quisque tincidunt ullamcorper justo, ut commodo mauris
molestie in. Proin efficitur mauris purus, eu convallis velit convallis et. Sed
in sem tincidunt nunc dictum rutrum lobortis varius nisi. Aliquam sodales nulla
a faucibus porta. Suspendisse potenti. Nullam at mi eros. Vestibulum in iaculis
mauris, vitae molestie nisi. Nullam pellentesque est sed felis pharetra viverra.
Nulla vitae neque non leo condimentum rutrum eu malesuada quam.
</div>
</div>
<div class="content-group">
<div class="subtitle">
<span class="color-theme-1">Project</span> Info
</div>
<div class="detail detail-list">
<ul>
<li><span>Client</span> ECK THEMES</li>
<li><span>Date</span> AUGUST 2024</li>
<li><span>Skill</span>
<div class="tags">
<a href="#" class="badge color-theme-hover-1 badge-dark badge-sm rounded-pill">DESIGN</a>
<a href="#" class="badge color-theme-hover-1 badge-dark badge-sm rounded-pill">WEB</a>
</div>
</li>
<li><span>Project Url</span> <a href="#" class="color-theme-1 color-theme-hover-2">#</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer border border-0">
<div class="row gx-0">
<div class="col-12 col-md-6">
<div class="social-media share type-1">
<a href="#" target="_blank" aria-label="Facebook Share"><i class="fa-brands fa-facebook-f"></i></a>
<a href="#" target="_blank" aria-label="Twitter Share"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#" target="_blank" aria-label="Linkedin Share"><i class="fa-brands fa-linkedin-in"></i></a>
</div>
</div>
<div class="col-12 col-md-6">
<div class="theme-btn-group group-right mar-t-md-30">
<a href="#" class="theme-btn type-3">Previous Project</a>
<a href="#" class="theme-btn type-3">Next Project</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>`;
Portfolio Edit
Portfolio List
You can add portfolio items in the portfolio section. You can review "portfolio.html" and make adjustments as needed.
<div class="global portfolio global-gradient" data-gradient-background-1="#f4f5fa" data-gradient-background-2="#fefefe">
<div class="container">
<div class="d-flex align-items-center justify-content-center">
<ul class="nav nav-pills justify-content-center d-inline-flex rounded-pill" data-sort-id="works-area" data-option-key="filter" data-plugin-options="{'layoutMode': 'fitRows', 'filter': '*'}">
<li class="nav-item active" data-option-value="*"><a class="nav-link rounded-pill" href="#">Show All</a></li>
<li class="nav-item" data-option-value=".websites"><a class="nav-link rounded-pill" href="#">WEBSITES</a></li>
<li class="nav-item" data-option-value=".logos"><a class="nav-link rounded-pill" href="#">LOGOS</a></li>
<li class="nav-item" data-option-value=".brands"><a class="nav-link rounded-pill" href="#">BRANDS</a></li>
<li class="nav-item" data-option-value=".medias"><a class="nav-link rounded-pill" href="#">MEDIAS</a></li>
</ul>
</div>
<div class="row portfolio-list">
<div class="col-12 col-lg-6 col-xl-6 isotope-item websites">
<div class="portfolio-item">
<div class="portfolio-image">
<a href="portfolio-detail.html"><img src="images/portfolio/portfoli-image-1.webp" alt="portfolio image" /></a>
</div>
<div class="portfolio-detail">
<div class="portfolio-title">
<a href="portfolio-detail.html">Seaside Resort Website</a>
<span class="portfolio-tags">Corporate, Tourism</span>
</div>
<div class="portfolio-year">2025</div>
</div>
</div>
</div>
<div class="col-12 col-lg-6 col-xl-6 isotope-item websites">
<div class="portfolio-item">
<div class="portfolio-image">
<a href="portfolio-detail.html"><img src="images/portfolio/portfoli-image-2.webp" alt="portfolio image" /></a>
</div>
<div class="portfolio-detail">
<div class="portfolio-title">
<a href="portfolio-detail.html">Tech Innovation Hub</a>
<span class="portfolio-tags">Technology, Corporate</span>
</div>
<div class="portfolio-year">2024</div>
</div>
</div>
</div>
<div class="col-12 col-lg-6 col-xl-6 isotope-item logos">
<div class="portfolio-item">
<div class="portfolio-image">
<a href="portfolio-detail.html"><img src="images/portfolio/portfoli-image-3.webp" alt="portfolio image" /></a>
</div>
<div class="portfolio-detail">
<div class="portfolio-title">
<a href="portfolio-detail.html">Mountain View Resort</a>
<span class="portfolio-tags">Hospitality, Tourism</span>
</div>
<div class="portfolio-year">2025</div>
</div>
</div>
</div>
<div class="col-12 col-lg-6 col-xl-6 isotope-item brands">
<div class="portfolio-item">
<div class="portfolio-image">
<a href="portfolio-detail.html"><img src="images/portfolio/portfoli-image-4.webp" alt="portfolio image" /></a>
</div>
<div class="portfolio-detail">
<div class="portfolio-title">
<a href="portfolio-detail.html">Organic Market</a>
<span class="portfolio-tags">Retail, Food</span>
</div>
<div class="portfolio-year">2025</div>
</div>
</div>
</div>
<div class="col-12 col-lg-6 col-xl-6 isotope-item medias">
<div class="portfolio-item">
<div class="portfolio-image">
<a href="portfolio-detail.html"><img src="images/portfolio/portfoli-image-5.webp" alt="portfolio image" /></a>
</div>
<div class="portfolio-detail">
<div class="portfolio-title">
<a href="portfolio-detail.html">Fashion Week Coverage</a>
<span class="portfolio-tags">Media, Fashion</span>
</div>
<div class="portfolio-year">2024</div>
</div>
</div>
</div>
<div class="col-12 col-lg-6 col-xl-6 isotope-item websites">
<div class="portfolio-item">
<div class="portfolio-image">
<a href="portfolio-detail.html"><img src="images/portfolio/portfoli-image-6.webp" alt="portfolio image" /></a>
</div>
<div class="portfolio-detail">
<div class="portfolio-title">
<a href="portfolio-detail.html">Smart Home Solutions</a>
<span class="portfolio-tags">Technology, IoT</span>
</div>
<div class="portfolio-year">2025</div>
</div>
</div>
</div>
<div class="col-12 col-lg-6 col-xl-6 isotope-item logos">
<div class="portfolio-item">
<div class="portfolio-image">
<a href="portfolio-detail.html"><img src="images/portfolio/portfoli-image-7.webp" alt="portfolio image" /></a>
</div>
<div class="portfolio-detail">
<div class="portfolio-title">
<a href="portfolio-detail.html">Fitness First Gym</a>
<span class="portfolio-tags">Health, Sports</span>
</div>
<div class="portfolio-year">2024</div>
</div>
</div>
</div>
<div class="col-12 col-lg-6 col-xl-6 isotope-item medias">
<div class="portfolio-item">
<div class="portfolio-image">
<a href="portfolio-detail.html"><img src="images/portfolio/portfoli-image-8.webp" alt="portfolio image" /></a>
</div>
<div class="portfolio-detail">
<div class="portfolio-title">
<a href="portfolio-detail.html">Music Festival Promo</a>
<span class="portfolio-tags">Entertainment, Events</span>
</div>
<div class="portfolio-year">2025</div>
</div>
</div>
</div>
</div>
</div>
</div>
Portfolio Detail
Portfolio detail page provides a detailed view of the selected portfolio item. This page includes comprehensive information about the project, gallery images, and project details. You can review "portfolio-detail.html" and make adjustments as needed.
<!-- Portfolio detail start -->
<div class="global portfolio-detail-content">
<div class="container">
<!-- Portfolio Header -->
<div class="row">
<div class="col-12">
<div class="portfolio-header" data-aos="fade-up" data-aos-delay="100">
<h2 class="portfolio-title">Digital Innovation Platform</h2>
<div class="portfolio-meta">
<div class="row">
<div class="col-6 col-md-3">
<div class="meta-item">
<h6>Client</h6>
<p>Mysia Creative</p>
</div>
</div>
<div class="col-6 col-md-3">
<div class="meta-item">
<h6>Industry</h6>
<p>Technology</p>
</div>
</div>
<div class="col-6 col-md-3">
<div class="meta-item">
<h6>Portfolio Scope</h6>
<p>Web Development</p>
</div>
</div>
<div class="col-6 col-md-3">
<div class="meta-item">
<h6>Year / Duration</h6>
<p>2024 / 4 months</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Image -->
<div class="row">
<div class="col-12">
<div class="portfolio-image" data-aos="fade-up" data-aos-delay="200">
<img src="https://placehold.co/1200x600.webp" alt="Digital Innovation Platform"
class="img-fluid">
</div>
</div>
</div>
<!-- Portfolio Content -->
<div class="row">
<div class="col-12 col-lg-8">
<div class="portfolio-content">
<!-- Overview -->
<div class="content-section" data-aos="fade-up" data-aos-delay="300">
<h3>Overview</h3>
<p>Mysia Creative, a leading technology company, approached us to develop a comprehensive
digital innovation platform that would streamline their internal processes and enhance
customer engagement. The existing system was outdated and couldn't meet the growing
demands of their expanding business.</p>
<p>Our team was tasked with creating a modern, scalable solution that would integrate
seamlessly with their existing infrastructure while providing room for future growth and
innovation.</p>
</div>
<!-- Our Approach -->
<div class="content-section" data-aos="fade-up" data-aos-delay="400">
<h3>Our Approach</h3>
<p>We began with a comprehensive analysis of Mysia's current systems and workflows. Our team
conducted extensive user research and stakeholder interviews to understand the pain
points and requirements.</p>
<div class="approach-list">
<ul>
<li>Conducted thorough system audit and user experience analysis</li>
<li>Designed intuitive user interfaces focusing on usability and accessibility</li>
<li>Implemented modern development frameworks for optimal performance</li>
<li>Integrated advanced security measures and data protection protocols</li>
<li>Provided comprehensive training and ongoing support</li>
</ul>
</div>
</div>
<!-- Results -->
<div class="content-section" data-aos="fade-up" data-aos-delay="500">
<h3>Results</h3>
<div class="results-grid">
<div class="row">
<div class="col-12 col-md-6">
<div class="result-item">
<i class="fas fa-chart-line"></i>
<h4>45%</h4>
<p>Increase in operational efficiency</p>
</div>
</div>
<div class="col-12 col-md-6">
<div class="result-item">
<i class="fas fa-users"></i>
<h4>85%</h4>
<p>User satisfaction improvement</p>
</div>
</div>
</div>
</div>
<ul class="achievement-list">
<li>Reduced system response time by 60%</li>
<li>Improved user interface accessibility compliance</li>
<li>Enhanced security with zero data breaches</li>
<li>Streamlined workflow processes saving 20+ hours weekly</li>
</ul>
</div>
</div>
</div>
<!-- Portfolio Sidebar -->
<div class="col-12 col-lg-4">
<div class="portfolio-sidebar">
<!-- Success Metric -->
<div class="success-metric" data-aos="fade-up" data-aos-delay="600">
<div class="metric-circle">
<span class="percentage">92%</span>
</div>
<h4>Portfolio Success Rate</h4>
<p>Through strategic planning and innovative solutions</p>
</div>
<!-- Portfolio Gallery -->
<div class="portfolio-gallery" data-aos="fade-up" data-aos-delay="700">
<h4>Portfolio Gallery</h4>
<div class="gallery-grid">
<div class="gallery-item">
<a href="https://placehold.co/800x600.webp" data-lightbox="portfolio-gallery"
data-title="Business Meeting - Strategic planning and team coordination">
<img src="https://placehold.co/350x250.webp" alt="Business Meeting"
class="img-fluid">
</a>
</div>
<div class="gallery-item">
<a href="https://placehold.co/800x600.webp" data-lightbox="portfolio-gallery"
data-title="Team Collaboration - Working together towards common goals">
<img src="https://placehold.co/350x250.webp" alt="Team Collaboration"
class="img-fluid">
</a>
</div>
<div class="gallery-item">
<a href="https://placehold.co/800x600.webp" data-lightbox="portfolio-gallery"
data-title="Data Analysis - In-depth analysis and insights">
<img src="https://placehold.co/350x250.webp" alt="Data Analysis"
class="img-fluid">
</a>
</div>
<div class="gallery-item">
<a href="https://placehold.co/800x600.webp" data-lightbox="portfolio-gallery"
data-title="Strategic Planning - Long-term vision and planning">
<img src="https://placehold.co/350x250.webp" alt="Strategic Planning"
class="img-fluid">
</a>
</div>
<div class="gallery-item">
<a href="https://placehold.co/800x600.webp" data-lightbox="portfolio-gallery"
data-title="Financial Review - Comprehensive financial assessment">
<img src="https://placehold.co/350x250.webp" alt="Financial Review"
class="img-fluid">
</a>
</div>
<div class="gallery-item">
<a href="https://placehold.co/800x600.webp" data-lightbox="portfolio-gallery"
data-title="Results Presentation - Showcasing project outcomes">
<img src="https://placehold.co/350x250.webp" alt="Results Presentation"
class="img-fluid">
</a>
</div>
</div>
</div>
<!-- Technologies Used -->
<div class="technologies" data-aos="fade-up" data-aos-delay="800">
<h4>Technologies Used</h4>
<div class="tech-tags">
<span class="tech-tag">React.js</span>
<span class="tech-tag">Node.js</span>
<span class="tech-tag">MongoDB</span>
<span class="tech-tag">AWS</span>
<span class="tech-tag">TypeScript</span>
<span class="tech-tag">Docker</span>
</div>
</div>
</div>
</div>
</div>
<!-- Client Feedback -->
<div class="row">
<div class="col-12">
<div class="client-feedback" data-aos="fade-up" data-aos-delay="900">
<div class="feedback-content">
<div class="quote-icon">
<i class="fas fa-quote-left"></i>
</div>
<blockquote>
"The team at Mysia has been exceptional in delivering our digital innovation platform.
Their attention to detail, technical expertise, and commitment to our success has been
outstanding. The platform has transformed how we operate and engage with our customers."
</blockquote>
<div class="client-info">
<div class="client-avatar">
<img src="https://placehold.co/80x80.webp" alt="Mehmet Kaya">
</div>
<div class="client-details">
<h5>Mehmet Kaya</h5>
<p>CEO & Founder - Mysia Creative</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Navigation -->
<div class="row">
<div class="col-12">
<div class="portfolio-navigation" data-aos="fade-up" data-aos-delay="1000">
<div class="nav-links">
<a href="#" class="nav-prev">
<i class="fas fa-arrow-left"></i>
<span>Previous Portfolio</span>
</a>
<a href="portfolio.html" class="nav-all">
<i class="fas fa-th"></i>
<span>All Portfolios</span>
</a>
<a href="#" class="nav-next">
<span>Next Portfolio</span>
<i class="fas fa-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio detail end -->
Contact Form Edit
All contact form edits can be made using the following codes.
You can send the information filled in the contact form to your email address using AJAX.
To edit the AJAX part: js/base.js
var contact_form = function() {
// General contact form handler for contact.html and contact-2.html
var forms = $('#contactForm');
if (forms.length) {
console.log('Contact forms found:', forms.length);
forms.each(function() {
var form = $(this);
var formResponseArea = form.find('#formResponse');
// If no response area found, create one
if (formResponseArea.length === 0) {
formResponseArea = $('');
form.prepend(formResponseArea);
}
form.on('submit', function(e) {
e.preventDefault();
console.log('Form submitted:', form.attr('class'));
formResponseArea.html("");
// Show loading state
var submitBtn = form.find('button[type="submit"]');
var originalBtnText = submitBtn.html();
submitBtn.prop('disabled', true).html(' Sending...');
$.ajax({
type: 'POST',
url: 'php/contact-form.php',
data: $(this).serialize(),
dataType: 'json',
success: function(response) {
console.log('Form response:', response);
if (response.response == "success") {
// Check which form is being submitted
if (form.hasClass('contact-2-form')) {
// Contact-2 specific success message
formResponseArea.html(' ' + (response.message || 'Thank you for your message. We will get back to you shortly.') + '');
} else {
// Default success message
formResponseArea.html('' + (response.message || 'Thank you for your message. We will get back to you shortly.') + '');
}
form[0].reset();
// Scroll to response
$('html, body').animate({
scrollTop: formResponseArea.offset().top - 100
}, 500);
} else {
var errorMessage = response.errorMessage || 'There was an error sending your message. Please try again later.';
if (form.hasClass('contact-2-form')) {
formResponseArea.html(' ' + errorMessage + '');
} else {
formResponseArea.html('' + errorMessage + '');
}
}
},
error: function(xhr, status, error) {
console.log('Form submission error:', error);
var errorMessage = 'There was an error sending your message. Please try again later.';
if (form.hasClass('contact-2-form')) {
formResponseArea.html(' ' + errorMessage + '');
} else {
formResponseArea.html('' + errorMessage + '');
}
},
complete: function() {
// Restore button state
submitBtn.prop('disabled', false).html(originalBtnText);
}
});
});
});
} else {
console.log('No contact forms found');
}
}
To edit the PHP part: php/contact-form.php
<?php
namespace MysiaContactForm;
session_cache_limiter('nocache');
header('Expires: ' . gmdate('r', 0));
header('Content-type: application/json');
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;
require 'php-mailer/src/PHPMailer.php';
require 'php-mailer/src/SMTP.php';
require 'php-mailer/src/Exception.php';
// ⚙️ CONFIG - Email address where form messages will be sent
$email = 'emrecan.kara@grafil.com.tr';
// ⚙️ CONFIG - Debug mode (0: off, 1: basic, 2: detailed)
$debug = 0;
$subject = 'Contact Form Submission';
if (isset($_POST['service']) && !empty($_POST['service'])) {
$subject = 'Project Inquiry - ' . ucwords(str_replace('-', ' ', $_POST['service']));
} elseif (isset($_POST['subject']) && !empty($_POST['subject'])) {
$subject = 'Contact - ' . ucwords(str_replace('-', ' ', $_POST['subject']));
}
$fieldLabels = [
'name' => 'Name',
'email' => 'Email Address',
'phone' => 'Phone Number',
'company' => 'Company',
'subject' => 'Subject',
'service' => 'Project Type',
'budget' => 'Budget Range',
'timeline' => 'Timeline',
'message' => 'Message',
'newsletter' => 'Newsletter Subscription',
'consultation' => 'Free Consultation'
];
$message = '<div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">';
$message .= '<h2 style="color: #e77e23; border-bottom: 2px solid #e77e23; padding-bottom: 10px;">New Contact Form Submission</h2>';
$personalInfo = '';
foreach (['name', 'email', 'phone', 'company'] as $field) {
if (isset($_POST[$field]) && !empty($_POST[$field])) {
$label = $fieldLabels[$field] ?? ucwords($field);
$value = htmlspecialchars($_POST[$field], ENT_QUOTES);
$personalInfo .= "<p><strong>{$label}:</strong> {$value}</p>";
}
}
if (!empty($personalInfo)) {
$message .= '<h3 style="color: #333; margin-top: 25px;">Personal Information</h3>';
$message .= $personalInfo;
}
$projectInfo = '';
foreach (['subject', 'service', 'budget', 'timeline'] as $field) {
if (isset($_POST[$field]) && !empty($_POST[$field])) {
$label = $fieldLabels[$field] ?? ucwords($field);
$value = htmlspecialchars($_POST[$field], ENT_QUOTES);
$value = ucwords(str_replace('-', ' ', $value));
$projectInfo .= "<p><strong>{$label}:</strong> {$value}</p>";
}
}
if (!empty($projectInfo)) {
$message .= '<h3 style="color: #333; margin-top: 25px;">Project Details</h3>';
$message .= $projectInfo;
}
if (isset($_POST['message']) && !empty($_POST['message'])) {
$message .= '<h3 style="color: #333; margin-top: 25px;">Message</h3>';
$message .= '<div style="background: #f5f5f5; padding: 15px; border-left: 4px solid #e77e23; margin: 10px 0;">';
$message .= nl2br(htmlspecialchars($_POST['message'], ENT_QUOTES));
$message .= '</div>';
}
$additionalInfo = '';
foreach (['newsletter', 'consultation'] as $field) {
if (isset($_POST[$field]) && $_POST[$field] == '1') {
$label = $fieldLabels[$field] ?? ucwords($field);
$additionalInfo .= "<p><span style='color: #e77e23;'>✓</span> {$label} requested</p>";
}
}
if (!empty($additionalInfo)) {
$message .= '<h3 style="color: #333; margin-top: 25px;">Additional Requests</h3>';
$message .= $additionalInfo;
}
$otherFields = '';
foreach ($_POST as $label => $value) {
if (!in_array($label, ['name', 'email', 'phone', 'company', 'subject', 'service', 'budget', 'timeline', 'message', 'newsletter', 'consultation'])) {
if (!empty($value)) {
$label = ucwords(str_replace(['_', '-'], ' ', $label));
if (is_array($value)) {
$value = implode(', ', $value);
}
$value = htmlspecialchars($value, ENT_QUOTES);
$otherFields .= "<p><strong>{$label}:</strong> {$value}</p>";
}
}
}
if (!empty($otherFields)) {
$message .= '<h3 style="color: #333; margin-top: 25px;">Other Information</h3>';
$message .= $otherFields;
}
$message .= '<hr style="margin: 25px 0; border: none; border-top: 1px solid #ddd;">';
$message .= '<p style="color: #666; font-size: 12px;">This message was sent from the Mysia Creative Agency contact form on ' . date('Y-m-d H:i:s') . '</p>';
$message .= '</div>';
$mail = new PHPMailer(true);
try {
$mail->SMTPDebug = $debug;
/* ⚙️ CONFIG - Email server settings (remove comment marks if needed)
$mail->IsSMTP();
$mail->Host = 'mail.yourserver.com'; // SMTP server address
$mail->SMTPAuth = true; // SMTP authentication
$mail->Username = 'user@example.com'; // SMTP username
$mail->Password = 'secret'; // SMTP password
$mail->SMTPSecure = 'tls'; // Encryption (tls or ssl)
$mail->Port = 587; // SMTP port (587 or 465)
$mail->SMTPOptions = array(
'ssl' => array(
'verify_peer' => false,
'verify_peer_name' => false,
'allow_self_signed' => true
)
);
*/
$mail->addAddress($email);
$fromName = (isset($_POST['name'])) ? $_POST['name'] : 'Website User';
$mail->setFrom($email, $fromName);
if (isset($_POST['email']) && !empty($_POST['email'])) {
$mail->addReplyTo($_POST['email'], $fromName);
}
$mail->isHTML(true);
$mail->CharSet = 'UTF-8';
$mail->Subject = $subject;
$mail->Body = $message;
if (isset($_FILES['attachment']) && $_FILES['attachment']['error'] == UPLOAD_ERR_OK) {
$mail->addAttachment($_FILES['attachment']['tmp_name'], $_FILES['attachment']['name']);
}
$mail->send();
$arrResult = array('response' => 'success', 'message' => 'Your message has been sent successfully!');
} catch (Exception $e) {
$arrResult = array('response' => 'error', 'errorMessage' => $e->errorMessage());
} catch (\Exception $e) {
$arrResult = array('response' => 'error', 'errorMessage' => $e->getMessage());
}
if ($debug == 0) {
echo json_encode($arrResult);
}
?>
Teams Edit
You can add team members in three different types in the Teams section. You can review "teams.html" and make adjustments as needed.
Type 1
<div class="global teams teams-1">
<div class="container">
<div class="title text-center mb-5" data-aos="fade-up" data-aos-delay="100">
<span class="fw-bold color-theme-1">Teams</span>
<div class="mini-desc color-theme-2 opacity-75">Cras a elit sit amet leo accumsan volutsudisse.</div>
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg-3">
<div class="item" data-aos="fade-up" data-aos-delay="200">
<div class="image">
<a href="team-single.html"><img src="images/team/team-1.webp" alt="Alex Smith"></a>
<div class="social-media type-1">
<a href="#" target="_blank"><i class="fa-brands fa-facebook-f"></i></a>
<a href="#" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#" target="_blank"><i class="fa-brands fa-instagram"></i></a>
</div>
</div>
<div class="info">
<div class="name">
<a href="team-single.html">Alex Smith</a>
</div>
<div class="title">
<a href="team-single.html">Art Director</a>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="item" data-aos="fade-up" data-aos-delay="300">
<div class="image">
<a href="team-single.html"><img src="images/team/team-2.webp" alt="Sophia Bennett"></a>
<div class="social-media type-1">
<a href="#" target="_blank"><i class="fa-brands fa-facebook-f"></i></a>
<a href="#" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#" target="_blank"><i class="fa-brands fa-instagram"></i></a>
</div>
</div>
<div class="info">
<div class="name">
<a href="team-single.html">Sophia Bennett</a>
</div>
<div class="title">
<a href="team-single.html">Blog Writer</a>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="item" data-aos="fade-up" data-aos-delay="400">
<div class="image">
<a href="team-single.html"><img src="images/team/team-3.webp" alt="Alexander Grey"></a>
<div class="social-media type-1">
<a href="#" target="_blank"><i class="fa-brands fa-facebook-f"></i></a>
<a href="#" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#" target="_blank"><i class="fa-brands fa-instagram"></i></a>
</div>
</div>
<div class="info">
<div class="name">
<a href="team-single.html">Alexander Grey</a>
</div>
<div class="title">
<a href="team-single.html">Creative Director</a>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="item" data-aos="fade-up" data-aos-delay="500">
<div class="image">
<a href="team-single.html"><img src="images/team/team-4.webp" alt="Isabella Reed"></a>
<div class="social-media type-1">
<a href="#" target="_blank"><i class="fa-brands fa-facebook-f"></i></a>
<a href="#" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#" target="_blank"><i class="fa-brands fa-instagram"></i></a>
</div>
</div>
<div class="info">
<div class="name">
<a href="team-single.html">Isabella Reed</a>
</div>
<div class="title">
<a href="team-single.html">Marketing Specialist</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Type 2
<div class="global teams teams-2">
<div class="container">
<div class="title text-center mb-5" data-aos="fade-up" data-aos-delay="100">
<span class="fw-bold color-theme-1">Teams</span>
<div class="mini-desc color-theme-2 opacity-75">Cras a elit sit amet leo accumsan volutsudisse.</div>
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg-3">
<div class="item" data-aos="fade-up" data-aos-delay="200">
<div class="image">
<a href="team-single.html"><img src="images/team/team-1.webp" alt="Alex Smith"></a>
<div class="social-media type-1">
<a href="#" target="_blank"><i class="fa-brands fa-facebook-f"></i></a>
<a href="#" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#" target="_blank"><i class="fa-brands fa-instagram"></i></a>
</div>
</div>
<div class="info">
<div class="name">
<a href="team-single.html">Alex Smith</a>
</div>
<div class="title">
<a href="team-single.html">Art Director</a>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="item" data-aos="fade-up" data-aos-delay="300">
<div class="image">
<a href="team-single.html"><img src="images/team/team-2.webp" alt="Sophia Bennett"></a>
<div class="social-media type-1">
<a href="#" target="_blank"><i class="fa-brands fa-facebook-f"></i></a>
<a href="#" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#" target="_blank"><i class="fa-brands fa-instagram"></i></a>
</div>
</div>
<div class="info">
<div class="name">
<a href="team-single.html">Sophia Bennett</a>
</div>
<div class="title">
<a href="team-single.html">Blog Writer</a>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="item" data-aos="fade-up" data-aos-delay="400">
<div class="image">
<a href="team-single.html"><img src="images/team/team-3.webp" alt="Alexander Grey"></a>
<div class="social-media type-1">
<a href="#" target="_blank"><i class="fa-brands fa-facebook-f"></i></a>
<a href="#" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#" target="_blank"><i class="fa-brands fa-instagram"></i></a>
</div>
</div>
<div class="info">
<div class="name">
<a href="team-single.html">Alexander Grey</a>
</div>
<div class="title">
<a href="team-single.html">Creative Director</a>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="item" data-aos="fade-up" data-aos-delay="500">
<div class="image">
<a href="team-single.html"><img src="images/team/team-4.webp" alt="Isabella Reed"></a>
<div class="social-media type-1">
<a href="#" target="_blank"><i class="fa-brands fa-facebook-f"></i></a>
<a href="#" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#" target="_blank"><i class="fa-brands fa-instagram"></i></a>
</div>
</div>
<div class="info">
<div class="name">
<a href="team-single.html">Isabella Reed</a>
</div>
<div class="title">
<a href="team-single.html">Marketing Specialist</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Type 3
<div class="global teams teams-3">
<div class="container">
<div class="title text-center mb-5 aos-init aos-animate" data-aos="fade-up" data-aos-delay="100">
<span class="fw-bold color-theme-1">Teams</span>
<div class="mini-desc color-theme-2 opacity-75">Cras a elit sit amet leo accumsan volutsudisse.</div>
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg-3">
<div class="item aos-init aos-animate" data-aos="fade-up" data-aos-delay="200">
<div class="image">
<a href="team-single.html"><img src="images/team/team-1.webp" alt="Alex Smith"></a>
</div>
<div class="info">
<div class="name">
<a href="team-single.html">Alex Smith</a>
</div>
<div class="title">
<a href="team-single.html">Art Director</a>
</div>
<div class="social">
<a href="#" target="_blank"><i class="fa-brands fa-facebook-f"></i></a>
<a href="#" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#" target="_blank"><i class="fa-brands fa-instagram"></i></a>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="item aos-init aos-animate" data-aos="fade-up" data-aos-delay="300">
<div class="image">
<a href="team-single.html"><img src="images/team/team-2.webp" alt="Sophia Bennett"></a>
</div>
<div class="info">
<div class="name">
<a href="team-single.html">Sophia Bennett</a>
</div>
<div class="title">
<a href="team-single.html">Blog Writer</a>
</div>
<div class="social">
<a href="#" target="_blank"><i class="fa-brands fa-facebook-f"></i></a>
<a href="#" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#" target="_blank"><i class="fa-brands fa-instagram"></i></a>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="item aos-init aos-animate" data-aos="fade-up" data-aos-delay="400">
<div class="image">
<a href="team-single.html"><img src="images/team/team-3.webp" alt="Alexander Grey"></a>
</div>
<div class="info">
<div class="name">
<a href="team-single.html">Alexander Grey</a>
</div>
<div class="title">
<a href="team-single.html">Creative Director</a>
</div>
<div class="social">
<a href="#" target="_blank"><i class="fa-brands fa-facebook-f"></i></a>
<a href="#" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#" target="_blank"><i class="fa-brands fa-instagram"></i></a>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="item aos-init aos-animate" data-aos="fade-up" data-aos-delay="500">
<div class="image">
<a href="team-single.html"><img src="images/team/team-4.webp" alt="Isabella Reed"></a>
</div>
<div class="info">
<div class="name">
<a href="team-single.html">Isabella Reed</a>
</div>
<div class="title">
<a href="team-single.html">Marketing Specialist</a>
</div>
<div class="social">
<a href="#" target="_blank"><i class="fa-brands fa-facebook-f"></i></a>
<a href="#" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#" target="_blank"><i class="fa-brands fa-instagram"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Testimonials Edit
You can use testimonials in two different ways. Review "testimonials.html" and make adjustments as needed.
Type 1
<div class="global testimonials testimonials-1">
<div class="container">
<div class="title text-center mb-5" data-aos="fade-up" data-aos-delay="300">
<span class="fw-bold color-theme-1">Our</span> Testimonials
<div class="mini-desc color-theme-2 opacity-75">What People Say</div>
</div>
<div class="default-slider" data-aos="flip-up" data-aos-delay="100">
<div class="item">
<div class="row">
<div class="col-12 col-md-7">
<div class="content">
"Cras et dui non lorem accumsan facilisis. Donec enim quam, viverra sit amet tudin enim ac justo commodo dapibus."
<cite>James Anderson <span>CEO, Tech Innovations</span></cite>
</div>
</div>
<div class="col-12 col-md-5">
<div class="image">
<img src="images/testimonials/testimonials-5.webp" alt="James Anderson">
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-12 col-md-7">
<div class="content">
"Cras et dui non lorem accumsan facilisis. Donec enim quam, viverra sit amet tudin enim ac justo commodo dapibus."
<cite>Michael Thompson <span>Marketing Director, Creative Solutions</span></cite>
</div>
</div>
<div class="col-12 col-md-5">
<div class="image">
<img src="images/testimonials/testimonials-6.webp" alt="Michael Thompson">
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-12 col-md-7">
<div class="content">
"Cras et dui non lorem accumsan facilisis. Donec enim quam, viverra sit amet tudin enim ac justo commodo dapibus."
<cite>Emma Roberts <span>Founder, Creative Ventures</span></cite>
</div>
</div>
<div class="col-12 col-md-5">
<div class="image">
<img src="images/testimonials/testimonials-7.webp" alt="Emma Roberts">
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-12 col-md-7">
<div class="content">
"Cras et dui non lorem accumsan facilisis. Donec enim quam, viverra sit amet tudin enim ac justo commodo dapibus."
<cite>Olivia Martinez <span>CEO, Design Studio</span></cite>
</div>
</div>
<div class="col-12 col-md-5">
<div class="image">
<img src="images/testimonials/testimonials-8.webp" alt="Olivia Martinez">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Type 2
<div class="global global-light testimonials testimonials-2">
<div class="container">
<div class="title text-center mb-5" data-aos="fade-up" data-aos-delay="100">
<span class="fw-bold color-theme-1">Our</span> Testimonials
<div class="mini-desc color-theme-2 opacity-75">What People Say</div>
</div>
<div class="testimonials-slider">
<div class="item" data-aos="fade-up" data-aos-delay="200">
<div class="content">
<div class="info">
<div class="image">
<img src="images/testimonials/testimonials-1.webp" alt="">
</div>
<cite class="detail">
<span class="name">Sophia Johnson</span>
<span class="title">Marketing Strategist</span>
</cite>
</div>
<div class="text">
Great experience working with the team. Their dedication and expertise truly set them apart.
</div>
<div class="bottom">
<span class="average">Average 5.00 rating</span>
<div class="star">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
</div>
</div>
</div>
<div class="item" data-aos="fade-up" data-aos-delay="300">
<div class="content">
<div class="info">
<div class="image">
<img src="images/testimonials/testimonials-2.webp" alt="">
</div>
<cite class="detail">
<span class="name">Liam Carter</span>
<span class="title">Product Designer</span>
</cite>
</div>
<div class="text">
The team's creativity and commitment to excellence made a huge difference in our project.
</div>
<div class="bottom">
<span class="average">Average 5.00 rating</span>
<div class="star">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
</div>
</div>
</div>
<div class="item" data-aos="fade-up" data-aos-delay="400">
<div class="content">
<div class="info">
<div class="image">
<img src="images/testimonials/testimonials-3.webp" alt="">
</div>
<cite class="detail">
<span class="name">Emma Wilson</span>
<span class="title">Web Developer</span>
</cite>
</div>
<div class="text">
The level of professionalism and attention to detail was impressive. Highly recommend their services!
</div>
<div class="bottom">
<span class="average">Average 5.00 rating</span>
<div class="star">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
</div>
</div>
</div>
<div class="item" data-aos="fade-up" data-aos-delay="500">
<div class="content">
<div class="info">
<div class="image">
<img src="images/testimonials/testimonials-4.webp" alt="">
</div>
<cite class="detail">
<span class="name">Olivia Martinez</span>
<span class="title">Content Creator</span>
</cite>
</div>
<div class="text">
The project was completed on time and exceeded all our expectations. Excellent work from the team!
</div>
<div class="bottom">
<span class="average">Average 5.00 rating</span>
<div class="star">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
How to Hide Scroll Animation
Please remove or comment the below code file path: js/base.js
// AOS JS
AOS.init({
// Global settings:
disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
initClassName: 'aos-init', // class applied after initialization
animatedClassName: 'aos-animate', // class applied on animation
useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
disableMutationObserver: false, // disables automatic mutations' detections (advanced)
debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
// Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
offset: 120, // offset (in px) from the original trigger point
delay: 100, // values from 0 to 3000, with step 50ms
duration: 600, // values from 0 to 3000, with step 50ms
easing: 'ease', // default easing for AOS animations
once: true, // whether animation should happen only once - while scrolling down
mirror: false, // whether elements should animate out while scrolling past them
anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation
});
More Info please browser the link: AOS Docs
Speed Optimization
Please optimize all images KB, MB also, use the image size following by placeholder file path: /images/..
- Tinypng
Please minify all CSS file path: /css/..
Please minify all JS file path: /js/..
How to Add a Google Maps to The Website?
1. Please go to maps.google.com. Type the location in the search box and click on Share.
2. In the new window, click on Embed a map and copy the HTML code of the map. Then, replace the URL in the `src` attribute of the iframe you copied with the URL of the iframe in the contact page.
Theme Switcher
TThe theme switcher has been added for you to quickly preview the available theme colors. After including the CSS file of the theme color you like in the head section, remove the theme switcher.
To remove the theme switcher, either remove or hide the theme_switcher() function;
File path: js/base.js
...
simple_parallax();
footer_fixed();
theme_switcher(); // remove or hide
...
Credits
Note: All images are used for preview purpose only and not included in the final purchase files.
Images from:
https://www.pexels.com
https://unsplash.com/
Google Fonts:
Poppins
Fontawesome Icons
https://fontawesome.com/
HTML BASE
https://getbootstrap.com/
Javascript Librarys
https://kenwheeler.github.io/slick/
[Slider]
https://michalsnik.github.io/aos/ [Page
Animation]
https://simpleparallax.com/ [Parallax
Image]
https://github.com/VincentGarreau/particles.js [Particles]
http://www.tinywall.net/ [Counter Up]
https://isotope.metafizzy.co/ [Filter & sort magical layouts]
https://imagesloaded.desandro.com/ [Images Loaded]
https://lokeshdhakar.com/projects/lightbox2/ [Lightbox]
Support
For all support requests, please contact us through TemplateMonster.
For any pre-purchase query, please use live chat on the item demo site also, email, and the item's comment section on Template Monster. Thanks!