Eduspace - Online Course, Education & University HTML Template
Updated: 10 Jan, 2025
Created: 20 June, 2024
Thank you for purchasing our template. If you have any questions that are beyond the scope of this help file, please feel free to modinatheme@gmail.com email us
Template Installation
-
FTP Upload:
- Open up your FTP manager and connect to your hosting
- Browse to required directory (Normally public_html)
- Upload the files inside eduspace-html folder.
Pages
- index.html 1st Home Page
- index-rtl.html 1st Home - RTL Page
- index-2.html 2nd Home Page
- index-2-rtl.html 2nd Home RTL Page
- index-3.html 3rd Home Page
- index-3-rtl.html 3rd Home RTL Page
- index-4.html 4th Home Page
- index-5.html 5th Home Page
- about.html About Page
- courses.html Courses Page
- courses-grid.html Courses grid Page
- courses-list.html Courses list Page
- courses-details.html Courses Details Page
- courses-details-2.html Courses Details 2 Page
- programs.html Programs Page
- program-details.html Programs Details Page
- events.html Events Page
- events-details.html Events Details Page
- pricing.html Pricing Page
- team.html Team Page
- team-details.htmlTeam Details
- contact.htmlContact Us Page
- gallery.htmlgallery Page
- shop.htmlShop Page
- shop-rtl.htmlShop Page - RTL
- shop-details.htmlShop Details Page
- faq.htmlFAQ Page
- 404.html404 Page
- news.htmlNews - Blog Page
- news-grid.htmlNews Grid - Blog Page
- news-details.htmlSingle News / Blog Details Page
- login.htmlLogin Page
- register.htmlRegister Page
- contact.phpcontact.php file
Fonts
<!-- Google Fonts
============================================ -->
Sora - <link href='https://fonts.googleapis.com/css2?family=Sora' rel='stylesheet' type='text/css'>
Source File (CSS)
<!-- =========== All Stylesheet ================= -->
<!-- font-awesome css plugins
============================================ -->
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<!-- meanmenu CSS
============================================ -->
<link rel="stylesheet" href="assets/css/meanmenu.css">
<
!-- animate CSS
============================================ -->
<link rel="stylesheet" href="assets/css/animate.css">
<!-- magnific-popup CSS
============================================ -->
<link rel="stylesheet" href="assets/css/magnific-p19opup.css">
<!-- swipper JS CSS
============================================ -->
<link rel="stylesheet" href="assets/css/slick.main.css">
<!-- helper CSS
============================================ -->
<link href="assets/css/helper.css" rel="stylesheet">
<!-- Bootstrap CSS
============================================ -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Template Style CSS
============================================ -->
<link rel="stylesheet" href="assets/css/main.css">
<!-- Style CSS
============================================ -->
<link rel="stylesheet" href="style.css">
Source File (JS)
<!-- All JS Plugins -->
<!-- jQuery
============================================ -->
<script src="assets/js/jquery.min.js"></script>
<!-- Bootstrap
============================================ -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Others jQuery Plugins
============================================ -->
<script src="assets/js/jquery.easing.1.3.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/scrollUp.min.js"></script>
<script src="assets/js/swpier.min.js"></script>
<script src="assets/js/magnific-popup.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/meanmenu.js"></script>
<!-- Main JS
============================================ -->
<script src="assets/js/main.js"></script>
Customization
How to Change Logo
How to Change Title
How to Change Favicon
How to Change Preloader
How to Change Hero Sliders Section Homepage
How to Change Section Titile
How to Change Page Banner
How to Change Services
How to Change Single Team Member
How to Change Single Review
How to Change Single Fun fact
How to Change Single Price Item
How to Change Single-skill Item
How to Change Sponsor Carousel Item
How to Change Mail Address with Your's - Open mail.php file and edit.
How to Change Social Links
How to Change Copyright
SCSS Structure
CSS Structure
I'm using One SCSS files in this template. You change the SCSS Code of style.scss file
================================= |*** Table of contents: ***| ================================= 1. General styles 2. Typography 3. Helpers 4. Preloader 5. Go up button 6. Header and navigation 7. Hero Section 8. About us 9. Causes 10. Fun facts 11. Events 12. Blog *Note: Responsive css in style.css file bottom.
If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.
Home Page Hero Sliders section CSS - find and change it on _hero.scss from "assets/scss" folder
/* ----------------------------------
Hero Section - Styles
------------------------------------ */
.hero-1 {
position: relative;
&:hover {
.array-button {
opacity: 1;
visibility: visible;
}
}
.array-button {
position: initial;
opacity: 0;
visibility: hidden;
@include transition;
.array-prev,.array-next {
width: 60px;
height: 60px;
line-height: 60px;
border: 1.5px solid $border-color;
background-color: transparent;
color: $white;
&:hover {
background-color: $theme-color-2;
color: $white;
border: 1px solid transparent;
}
}
.array-prev {
position: absolute;
top: 50%;
left: 30px;
transform: translateY(-50%);
z-index: 9;
}
.array-next {
position: absolute;
top: 50%;
right: 30px;
transform: translateY(-50%);
z-index: 9;
}
}
.swiper-slide-active .hero-image {
-webkit-transform: scale(1.12);
-moz-transform: scale(1.12);
transform: scale(1.12);
}
.hero-image {
overflow: hidden;
position: absolute !important;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 1;
z-index: -2;
background-size: cover;
transform: scale(1);
-webkit-transition: all 8s ease-out 0s;
-moz-transition: all 8s ease-out 0s;
-ms-transition: all 8s ease-out 0s;
-o-transition: all 8s ease-out 0s;
transition: all 8s ease-out 0s;
&::before {
@include before;
background: #121516;
opacity: 0.5;
}
}
.hero-content {
position: relative;
padding: 150px 0 350px;
@include breakpoint (max-md){
text-align: center;
}
h5 {
font-family: $body-font;
color: $white;
position: relative;
z-index: 1;
font-size: 18px;
margin-bottom: 20px;
padding-right: 70px;
line-height: 1;
@include breakpoint (max-md){
text-align: center;
margin: 0 auto;
padding-right: 0;
}
i {
margin-right: 8px;
}
}
h1 {
color: $white;
@include breakpoint (max-xl){
font-size: 60px;
}
@include breakpoint (max-lg){
font-size: 52px;
}
@include breakpoint (max-md){
font-size: 42px;
}
@include breakpoint (max-sm){
font-size: 34px;
}
}
.hero-button {
margin-top: 40px;
@include flex;
gap: 20px;
@include breakpoint (max-md){
flex-wrap: wrap;
justify-content: center;
}
@include breakpoint (max-sm){
margin-top: 20px;
}
}
}
&.style-hero-2 {
position: relative;
.hero-content {
padding: 320px 0 320px;
@include breakpoint (max-lg){
padding: 280px 0 280px;
}
@include breakpoint (max-md){
padding: 250px 0 250px;
}
@include breakpoint (max-sm){
padding: 220px 0 220px;
}
h5 {
padding-right: 0;
&::before {
display: none;
}
}
h1 {
color: $white;
@include breakpoint (max-xl){
font-size: 60px;
}
@include breakpoint (max-lg){
font-size: 52px;
}
@include breakpoint (max-md){
font-size: 42px;
}
@include breakpoint (max-sm){
font-size: 34px;
}
}
.hero-button {
@include flex;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
a:first-child {
background-color: $theme-color-3;
}
}
}
}
&.style-hero-3 {
padding: 150px 0 245px;
.hero-content {
padding: 0;
h5 {
&::before {
display: none;
}
}
}
.hero-form {
background-color: $theme-color-2;
padding: 70px 50px;
@include breakpoint (max-xxxl){
padding: 40px;
}
.hero-title {
margin-bottom: 30px;
h6 {
color: $white;
}
h2 {
color: $white;
}
p {
color: $white;
font-size: 18px;
margin-top: 15px;
}
}
.progress {
background: #f2f7f7;
justify-content: flex-start;
border-radius: 100px;
align-items: center;
position: relative;
display: flex;
height: 10px;
width: 100%;
border-radius: 0;
}
.progress-value {
animation: load 3s normal forwards;
border-radius: 0;
background: $theme-color;
height: 10px;
width: 0;
border-radius: 0;
}
@keyframes load {
0% { width: 0; }
100% { width: 70%; }
}
.progress-items {
margin-bottom: 50px;
.progress-goals {
@include flex;
justify-content: space-between;
color: $white;
margin-bottom: 15px;
}
}
.donate-amount {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 15px;
.amount-btn {
color: $text-color;
padding: 14px 30px;
background-color: $white;
@include transition;
width: 130px;
@include breakpoint (max-xxl){
max-width: 130px;
width: initial;
}
&.active {
background-color: $theme-color;
color: $white;
}
}
.theme-btn {
padding: 14px 30px;
}
}
.donate-now {
display: flex;
gap: 20px;
flex-wrap: wrap;
input {
width: 100%;
padding: 15px 20px;
background-color: $white;
color: $header-color;
max-width: 200px;
border: none;
outline: none;
}
.theme-btn {
border-radius: 0;
background-color: $theme-color-3;
text-transform: capitalize;
color: $white;
&::before {
background-color: $theme-color;
}
}
}
}
}
}
Change section padding CSS - find and change it on style.css or _variable.scss file from scss folder
.section-padding {
padding: 120px 0px;
}
JavaScript Customization
Change The Carousel & Others with your's choice
function loader() {
$(window).on('load', function() {
// Animate loader off screen
$(".preloader").addClass('loaded');
$(".preloader").delay(600).fadeOut();
});
}
loader();
// Hero Slider Start <