Skip to content

W
Website
Commit d2b1c1bd authored by I.K Seneviratne's avatar I.K Seneviratne
Browse files
Options

Committing the changes in the timeline and presentation sections in the Home page section

parent 2a6218b8
Hide whitespace changes
Inline Side-by-side
Showing with 1072 additions and 740 deletions
assets/css/timeline.css 0 → 100644
View file @ d2b1c1bd
.timeline {
list-style: none;
padding: 20px 0 20px;
position: relative;
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: " ";
width: 3px;
background-color: #eeeeee;
left: 50%;
margin-left: -1.5px;
}
.timeline > li {
margin-bottom: 20px;
position: relative;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li > .timeline-panel {
width: 46%;
float: left;
border: 1px solid #d4d4d4;
border-radius: 2px;
padding: 20px;
position: relative;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
.timeline > li > .timeline-panel:before {
position: absolute;
top: 26px;
right: -15px;
display: inline-block;
border-top: 15px solid transparent;
border-left: 15px solid #ccc;
border-right: 0 solid #ccc;
border-bottom: 15px solid transparent;
content: " ";
}
.timeline > li > .timeline-panel:after {
position: absolute;
top: 27px;
right: -14px;
display: inline-block;
border-top: 14px solid transparent;
border-left: 14px solid #fff;
border-right: 0 solid #fff;
border-bottom: 14px solid transparent;
content: " ";
}
.timeline > li > .timeline-badge {
color: #fff;
width: 50px;
height: 50px;
line-height: 50px;
font-size: 1.4em;
text-align: center;
position: absolute;
top: 16px;
left: 50%;
margin-left: -25px;
background-color: #999999;
z-index: 100;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.timeline > li.timeline-inverted > .timeline-panel {
float: right;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
.timeline-badge.primary {
background-color: #2e6da4 !important;
}
.timeline-badge.success {
background-color: #3f903f !important;
}
.timeline-badge.warning {
background-color: #f0ad4e !important;
}
.timeline-badge.danger {
background-color: #d9534f !important;
}
.timeline-badge.info {
background-color: #5bc0de !important;
}
.timeline-title {
margin-top: 0;
color: inherit;
}
.timeline-body > p,
.timeline-body > ul {
margin-bottom: 0;
}
.timeline-body > p + p {
margin-top: 5px;
}
@media (max-width: 767px) {
ul.timeline:before {
left: 40px;
}
ul.timeline > li > .timeline-panel {
width: calc(100% - 90px);
width: -moz-calc(100% - 90px);
width: -webkit-calc(100% - 90px);
}
ul.timeline > li > .timeline-badge {
left: 15px;
margin-left: 0;
top: 16px;
}
ul.timeline > li > .timeline-panel {
float: right;
}
ul.timeline > li > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
ul.timeline > li > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
}
\ No newline at end of file
index.html
View file @ d2b1c1bd
......@@ -2,865 +2,1014 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Bocor Bootstrap Template - Index</title>
<meta content="" name="descriptison">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/icofont/icofont.min.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="assets/vendor/venobox/venobox.css" rel="stylesheet">
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet">
<!-- =======================================================
* Template Name: Bocor - v2.1.0
* Template URL: https://bootstrapmade.com/bocor-bootstrap-template-nice-animation/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
======================================================== -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Bocor Bootstrap Template - Index</title>
<meta content="" name="descriptison">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/icofont/icofont.min.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="assets/vendor/venobox/venobox.css" rel="stylesheet">
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet">
<!-- links for the timeine-->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"
id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="assets/css/timeline.css">
<!-- =======================================================
* Template Name: Bocor - v2.1.0
* Template URL: https://bootstrapmade.com/bocor-bootstrap-template-nice-animation/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
======================================================== -->
</head>
<body>
<!-- ======= Header ======= -->
<header id="header">
<!-- ======= Header ======= -->
<header id="header">
<div class="container d-flex align-items-center">
<div class="logo mr-auto">
<h1 class="text-light"><a href="index.html">SLPES<span>.</span></a></h1>
<!-- Uncomment below if you prefer to use an image logo -->
<!-- <a href="index.html"><img src="assets/img/logo.png" alt="" class="img-fluid"></a>-->
</div>
<nav class="nav-menu d-none d-lg-block">
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#researchScope">Research Project Scope</a></li>
<li><a href="#researchMilestone">Research Project Milestones</a></li>
<li><a href="#documents">Documents</a></li>
<li><a href="#presentation">Presentation</a></li>
<li><a href="#aboutUs">About Us</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</nav><!-- .nav-menu -->
<div class="logo mr-auto">
<h1 class="text-light"><a href="index.html">SLPES<span>.</span></a></h1>
<!-- Uncomment below if you prefer to use an image logo -->
<!-- <a href="index.html"><img src="assets/img/logo.png" alt="" class="img-fluid"></a>-->
</div>
<nav class="nav-menu d-none d-lg-block">
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#researchScope">Research Project Scope</a></li>
<li><a href="#researchMilestone">Research Project Milestones</a></li>
<li><a href="#documents">Documents</a></li>
<li><a href="#presentation">Presentation</a></li>
<li><a href="#aboutUs">About Us</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</nav><!-- .nav-menu -->
</div>
</header><!-- End Header -->
</header><!-- End Header -->
<!-- ======= Hero Section ======= -->
<section id="hero">
<!-- ======= Hero Section ======= -->
<section id="hero">
<div class="container">
<div class="row d-flex align-items-center"">
<div class=" col-lg-6 py-5 py-lg-0 order-2 order-lg-1" data-aos="fade-right">
<h1>Taking the classroom monitoring to the next level with SLPES</h1>
<h2>We are team of talanted designers making websites with Bootstrap</h2>
<a href="#about" class="btn-get-started scrollto">Get Started</a>
</div>
<div class="col-lg-6 order-1 order-lg-2 hero-img" data-aos="fade-left">
<!-- <img src="assets/img/application.jpg" class="img-fluid" alt="">-->
<img src="assets/img/hero-img.png" class="img-fluid" alt="">
<!-- <img src="assets/img/application_1.jpg" class="img-fluid" alt="">-->
</div>
<div class="row d-flex align-items-center"
">
<div class=" col-lg-6 py-5 py-lg-0 order-2 order-lg-1" data-aos="fade-right">
<h1>Taking the classroom monitoring to the next level with SLPES</h1>
<h2>We are team of talanted designers making websites with Bootstrap</h2>
<a href="#about" class="btn-get-started scrollto">Get Started</a>
</div>
<div class="col-lg-6 order-1 order-lg-2 hero-img" data-aos="fade-left">
<!-- <img src="assets/img/application.jpg" class="img-fluid" alt="">-->
<img src="assets/img/hero-img.png" class="img-fluid" alt="">
<!-- <img src="assets/img/application_1.jpg" class="img-fluid" alt="">-->
</div>
</div>
</div>
</section><!-- End Hero -->
</section><!-- End Hero -->
<main id="main">
<main id="main">
<!-- ======= Clients Section ======= -->
<section id="researchScope" class="researchScope section-bg">
<div class="container">
<div class="container">
<div class="row no-gutters clients-wrap clearfix wow fadeInUp">
<div class="row no-gutters clients-wrap clearfix wow fadeInUp">
<div class="col-lg-2 col-md-4 col-6">
<div class="researchScope-logo">
<img src="assets/img/clients/client-1.png" class="img-fluid" alt="" data-aos="flip-right">
</div>
</div>
<div class="col-lg-2 col-md-4 col-6">
<div class="researchScope-logo">
<img src="assets/img/clients/client-1.png" class="img-fluid" alt="" data-aos="flip-right">
</div>
</div>
<div class="col-lg-2 col-md-4 col-6">
<div class="researchScope-logo">
<img src="assets/img/clients/client-2.png" class="img-fluid" alt="" data-aos="flip-right" data-aos-delay="100">
</div>
</div>
<div class="col-lg-2 col-md-4 col-6">
<div class="researchScope-logo">
<img src="assets/img/clients/client-2.png" class="img-fluid" alt="" data-aos="flip-right"
data-aos-delay="100">
</div>
</div>
<div class="col-lg-2 col-md-4 col-6">
<div class="client-logo">
<img src="assets/img/clients/client-3.png" class="img-fluid" alt="" data-aos="flip-right" data-aos-delay="200">
</div>
</div>
<div class="col-lg-2 col-md-4 col-6">
<div class="client-logo">
<img src="assets/img/clients/client-3.png" class="img-fluid" alt="" data-aos="flip-right"
data-aos-delay="200">
</div>
</div>
<div class="col-lg-2 col-md-4 col-6">
<div class="client-logo">
<img src="assets/img/clients/client-4.png" class="img-fluid" alt="" data-aos="flip-right" data-aos-delay="300">
</div>
</div>
<div class="col-lg-2 col-md-4 col-6">
<div class="client-logo">
<img src="assets/img/clients/client-4.png" class="img-fluid" alt="" data-aos="flip-right"
data-aos-delay="300">
</div>
</div>
<div class="col-lg-2 col-md-4 col-6">
<div class="client-logo">
<img src="assets/img/clients/client-5.png" class="img-fluid" alt="" data-aos="flip-right" data-aos-delay="400">
</div>
</div>
<div class="col-lg-2 col-md-4 col-6">
<div class="client-logo">
<img src="assets/img/clients/client-5.png" class="img-fluid" alt="" data-aos="flip-right"
data-aos-delay="400">
</div>
</div>
<div class="col-lg-2 col-md-4 col-6">
<div class="client-logo">
<img src="assets/img/clients/client-6.png" class="img-fluid" alt="" data-aos="flip-right"
data-aos-delay="500">
</div>
</div>
<div class="col-lg-2 col-md-4 col-6">
<div class="client-logo">
<img src="assets/img/clients/client-6.png" class="img-fluid" alt="" data-aos="flip-right" data-aos-delay="500">
</div>
</div>
</div>
</div>
</section><!-- End Clients Section -->
<!-- ======= Research Milestones Section ======= -->
<section id="researchMilestone" class="researchMilestone section-bg">
<div class="container">
<div class="row">
<div class="image col-xl-5 d-flex align-items-stretch justify-content-center justify-content-lg-start"></div>
<div class="col-xl-7 pl-0 pl-lg-5 pr-lg-1 d-flex align-items-stretch">
<div class="content d-flex flex-column justify-content-center">
<h3 data-aos="fade-in" data-aos-delay="100">Research Project Milestones</h3>
<p data-aos="fade-in">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit
</p>
<div class="row">
<div class="col-md-6 icon-box" data-aos="fade-up">
<i class="bx bx-receipt"></i>
<h4><a href="#">Corporis voluptates sit</a></h4>
<p>Consequuntur sunt aut quasi enim aliquam quae harum pariatur laboris nisi ut aliquip</p>
</div>
<div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="100">
<i class="bx bx-cube-alt"></i>
<h4><a href="#">Ullamco laboris nisi</a></h4>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt</p>
</div>
<div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="200">
<i class="bx bx-images"></i>
<h4><a href="#">Labore consequatur</a></h4>
<p>Aut suscipit aut cum nemo deleniti aut omnis. Doloribus ut maiores omnis facere</p>
</div>
<div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="300">
<i class="bx bx-shield"></i>
<h4><a href="#">Beatae veritatis</a></h4>
<p>Expedita veritatis consequuntur nihil tempore laudantium vitae denat pacta</p>
</div>
</div>
</div><!-- End .content-->
</div>
</div>
<div class="container">
</div>
</section><!-- End About Section -->
<div class="row">
<div class="col-xl-7 pl-0 pl-lg-5 pr-lg-1 d-flex align-items-stretch">
<div class="content d-flex flex-column justify-content-center">
<h2 data-aos="fade-in" data-aos-delay="100" class="font-weight-bold">Research Project
Milestones</h2>
</div>
</div>
</div>
<!-- ======= Services Section ======= -->
<section id="documents" class="documents section-bg">
<div class="container">
<!-- <div class="page-header">-->
<!-- </div>-->
<ul class="timeline">
<!--timeline - 1-->
<li>
<div class="timeline-badge"><i class="glyphicon glyphicon-check"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Project Proposal</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via
Twitter</small></p>
</div>
<div class="timeline-body">
<p>Some text</p>
</div>
</div>
</li>
<!--end of timeline - 1-->
<!--timeline - 2-->
<li class="timeline-inverted">
<div class="timeline-badge warning"><i class="glyphicon glyphicon-credit-card"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Progress Presentation - I</h4>
</div>
<div class="timeline-body">
<p>Some text...</p>
</div>
</div>
</li>
<!--end of timeline - 2-->
<!--timeline - 3-->
<li>
<div class="timeline-badge danger"><i class="glyphicon glyphicon-credit-card"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Progress Presentation - II</h4>
</div>
<div class="timeline-body">
<p>Some text...</p>
</div>
</div>
</li>
<!--end of timeline - 3-->
<!--timeline - 4-->
<li class="timeline-inverted">
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Demo (Camera-ready Poster)</h4>
</div>
<div class="timeline-body">
<p>Some text...</p>
</div>
</div>
</li>
<!--end of timeline - 4-->
<!--timeline - 5-->
<li>
<div class="timeline-badge info"><i class="glyphicon glyphicon-floppy-disk"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Final Assessment</h4>
</div>
<div class="timeline-body">
<p>Some text...</p>
<hr>
<div class="btn-group">
<button type="button" class="btn btn-primary btn-sm dropdown-toggle"
data-toggle="dropdown">
<i class="glyphicon glyphicon-cog"></i> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
</li>
<!--end of timeline - 5-->
<!--timeline - 6-->
<li>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Viva</h4>
</div>
<div class="timeline-body">
<p>Some text...</p>
</div>
</div>
</li>
<!--end of timeline - 6-->
</ul>
<!-- <div class="row">-->
<!-- <div class="image col-xl-5 d-flex align-items-stretch justify-content-center justify-content-lg-start"></div>-->
<!-- <div class="col-xl-7 pl-0 pl-lg-5 pr-lg-1 d-flex align-items-stretch">-->
<!-- <div class="content d-flex flex-column justify-content-center">-->
<!-- <h3 data-aos="fade-in" data-aos-delay="100">Research Project Milestones</h3>-->
<!-- <p data-aos="fade-in">-->
<!-- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut-->
<!-- labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit-->
<!-- </p>-->
<!-- <div class="row">-->
<!-- <div class="col-md-6 icon-box" data-aos="fade-up">-->
<!-- <i class="bx bx-receipt"></i>-->
<!-- <h4><a href="#">Corporis voluptates sit</a></h4>-->
<!-- <p>Consequuntur sunt aut quasi enim aliquam quae harum pariatur laboris nisi ut-->
<!-- aliquip</p>-->
<!-- </div>-->
<!-- <div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="100">-->
<!-- <i class="bx bx-cube-alt"></i>-->
<!-- <h4><a href="#">Ullamco laboris nisi</a></h4>-->
<!-- <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia-->
<!-- deserunt</p>-->
<!-- </div>-->
<!-- <div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="200">-->
<!-- <i class="bx bx-images"></i>-->
<!-- <h4><a href="#">Labore consequatur</a></h4>-->
<!-- <p>Aut suscipit aut cum nemo deleniti aut omnis. Doloribus ut maiores omnis facere</p>-->
<!-- </div>-->
<!-- <div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="300">-->
<!-- <i class="bx bx-shield"></i>-->
<!-- <h4><a href="#">Beatae veritatis</a></h4>-->
<!-- <p>Expedita veritatis consequuntur nihil tempore laudantium vitae denat pacta</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>&lt;!&ndash; End .content&ndash;&gt;-->
<!-- </div>-->
<!-- </div>-->
<div class="section-title">
<h2 data-aos="fade-in">Documents</h2>
<p data-aos="fade-in">Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
</div>
</section>
<!-- End About Section -->
<div class="row">
<div class="col-md-6 d-flex align-items-stretch" data-aos="fade-right">
<div class="card">
<div class="card-img">
<img src="assets/img/services-1.jpg" alt="...">
</div>
<div class="card-body">
<h5 class="card-title"><a href="">Temporibus laudantium</a></h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
<div class="read-more"><a href="#"><i class="icofont-arrow-right"></i> Read More</a></div>
</div>
</div>
</div>
<div class="col-md-6 d-flex align-items-stretch" data-aos="fade-left">
<div class="card">
<div class="card-img">
<img src="assets/img/services-2.jpg" alt="...">
</div>
<div class="card-body">
<h5 class="card-title"><a href="">Aperiores voluptates</a></h5>
<p class="card-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo</p>
<div class="read-more"><a href="#"><i class="icofont-arrow-right"></i> Read More</a></div>
</div>
</div>
<!-- ======= Services Section ======= -->
<section id="documents" class="documents section-bg">
<div class="container">
</div>
<div class="col-md-6 d-flex align-items-stretch" data-aos="fade-right">
<div class="card">
<div class="card-img">
<img src="assets/img/services-3.jpg" alt="...">
</div>
<div class="card-body">
<h5 class="card-title"><a href="">Veritatis natus nisi</a></h5>
<p class="card-text">Nemo enim ipsam voluptatem quia voluptas sit aut odit aut fugit, sed quia magni dolores eos qui ratione voluptatem sequi nesciunt Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet</p>
<div class="read-more"><a href="#"><i class="icofont-arrow-right"></i> Read More</a></div>
</div>
<div class="section-title">
<h2 data-aos="fade-in">Documents</h2>
<!-- <p data-aos="fade-in">Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>-->
</div>
</div>
<div class="col-md-6 d-flex align-items-stretch" data-aos="fade-left">
<div class="card">
<div class="card-img">
<img src="assets/img/services-4.jpg" alt="...">
</div>
<div class="card-body">
<h5 class="card-title"><a href="">Aliquam veritatis</a></h5>
<p class="card-text">Nostrum eum sed et autem dolorum perspiciatis. Magni porro quisquam laudantium voluptatem. In molestiae earum ab sit esse voluptatem. Eos ipsam cumque ipsum officiis qui nihil aut incidunt aut</p>
<div class="read-more"><a href="#"><i class="icofont-arrow-right"></i> Read More</a></div>
</div>
<!-- documents row-->
<div class="row">
<!--topic registration document-->
<div class="col-md-3 d-flex align-items-stretch" data-aos="fade-right">
<div class="card">
<div class="card-img">
<img src="assets/img/documents/pdf_image.jpg" alt="...">
</div>
<div class="card-body">
<h5 class="card-title"><a href="">Topic Registration</a></h5>
<!-- <p class="card-text">Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor ut-->
<!-- labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation-->
<!-- ullamco laboris nisi ut aliquip ex ea commodo consequat</p>-->
<!-- <div class="read-more"><a href="#"><i class="icofont-arrow-right"></i> Read More</a></div>-->
</div>
</div>
</div>
<!-- end of topic registration document-->
<!-- proposal documents-->
<div class="col-md-3 d-flex align-items-stretch" data-aos="fade-left">
<div class="card">
<div class="card-img">
<img src="assets/img/documents/pdf_image.jpg" alt="...">
</div>
<div class="card-body">
<h5 class="card-title"><a href="">Project Proposal</a></h5>
<div class="read-more"><a href="#"><i class="icofont-arrow-right"></i> View More</a></div>
</div>
</div>
</div>
<!-- end of proposal documents-->
<!-- research paper -->
<div class="col-md-3 d-flex align-items-stretch" data-aos="fade-right">
<div class="card">
<div class="card-img">
<img src="assets/img/documents/pdf_image.jpg" alt="...">
</div>
<div class="card-body">
<h5 class="card-title"><a href="">Research Paper</a></h5>
</div>
</div>
</div>
<!-- end of research paper -->
<!-- final thesis-->
<div class="col-md-3 d-flex align-items-stretch" data-aos="fade-left">
<div class="card">
<div class="card-img">
<img src="assets/img/documents/pdf_image.jpg" alt="...">
</div>
<div class="card-body">
<h5 class="card-title"><a href="">Final Thesis</a></h5>
<div class="read-more"><a href="#"><i class="icofont-arrow-right"></i> View More</a></div>
</div>
</div>
</div>
<!-- end of final thesis-->
</div>
</div>
</div>
<!-- end of documents row-->
</div>
</div>
</section><!-- End Services Section -->
<!-- ======= Documents Section ======= -->
<section id="presentation" class="presentation section-bg">
<div class="container">
<div class="container">
<div class="section-title">
<h2 data-aos="fade-in">Presentation</h2>
<p data-aos="fade-in">Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
</div>
<div class="section-title">
<h2 data-aos="fade-in">Presentation</h2>
</div>
<div class="row content">
<div class="col-md-5" data-aos="fade-right">
<img src="assets/img/features-1.svg" class="img-fluid" alt="">
</div>
<div class="col-md-7 pt-4" data-aos="fade-left">
<h3>Voluptatem dignissimos provident quasi corporis voluptates sit assumenda.</h3>
<p class="font-italic">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
<ul>
<li><i class="icofont-check"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
<li><i class="icofont-check"></i> Duis aute irure dolor in reprehenderit in voluptate velit.</li>
</ul>
</div>
</div>
<div class="row content">
<div class="col-md-5" data-aos="fade-right">
<img src="assets/img/presentations/proposal.PNG" class="img-fluid" alt="">
</div>
<div class="col-md-7 pt-4" data-aos="fade-left">
<h3>Proposal Presentation</h3>
<ul>
<li><i class="icofont-check"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
<li><i class="icofont-check"></i> Duis aute irure dolor in reprehenderit in voluptate velit.
</li>
</ul>
</div>
</div>
<div class="row content">
<div class="col-md-5 order-1 order-md-2" data-aos="fade-left">
<img src="assets/img/features-2.svg" class="img-fluid" alt="">
</div>
<div class="col-md-7 pt-5 order-2 order-md-1" data-aos="fade-right">
<h3>Corporis temporibus maiores provident</h3>
<p class="font-italic">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
<p>
Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum
</p>
</div>
</div>
<div class="row content">
<div class="col-md-5 order-1 order-md-2" data-aos="fade-left">
<img src="assets/img/presentations/pp1.PNG" class="img-fluid" alt="">
</div>
<div class="col-md-7 pt-5 order-2 order-md-1" data-aos="fade-right">
<h3>Progress Presentation - I</h3>
</div>
</div>
<div class="row content">
<div class="col-md-5" data-aos="fade-right">
<img src="assets/img/features-3.svg" class="img-fluid" alt="">
</div>
<div class="col-md-7 pt-5" data-aos="fade-left">
<h3>Sunt consequatur ad ut est nulla consectetur reiciendis animi voluptas</h3>
<p>Cupiditate placeat cupiditate placeat est ipsam culpa. Delectus quia minima quod. Sunt saepe odit aut quia voluptatem hic voluptas dolor doloremque.</p>
<ul>
<li><i class="icofont-check"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
<li><i class="icofont-check"></i> Duis aute irure dolor in reprehenderit in voluptate velit.</li>
<li><i class="icofont-check"></i> Facilis ut et voluptatem aperiam. Autem soluta ad fugiat.</li>
</ul>
</div>
</div>
<div class="row content">
<div class="col-md-5" data-aos="fade-right">
<img src="assets/img/presentations/pp2.PNG" class="img-fluid" alt="">
</div>
<div class="col-md-7 pt-5" data-aos="fade-left">
<h3>Progress Presentation - II</h3>
<ul>
<li><i class="icofont-check"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
<li><i class="icofont-check"></i> Duis aute irure dolor in reprehenderit in voluptate velit.
</li>
<li><i class="icofont-check"></i> Facilis ut et voluptatem aperiam. Autem soluta ad fugiat.</li>
</ul>
</div>
</div>
<div class="row content">
<div class="col-md-5 order-1 order-md-2" data-aos="fade-left">
<img src="assets/img/features-4.svg" class="img-fluid" alt="">
</div>
<div class="col-md-7 pt-5 order-2 order-md-1" data-aos="fade-right">
<h3>Quas et necessitatibus eaque impedit ipsum animi consequatur incidunt in</h3>
<p class="font-italic">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
<p>
Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum
</p>
</div>
</div>
<div class="row content">
<div class="col-md-5 order-1 order-md-2" data-aos="fade-left">
<img src="assets/img/presentations/final_presentation.png" class="img-fluid" alt="">
</div>
<div class="col-md-7 pt-5 order-2 order-md-1" data-aos="fade-right">
<h3>Final Presentation</h3>
</div>
</div>
</div>
</div>
</section><!-- End Features Section -->
<!-- ======= Presentation Section ======= -->
<!-- <section id="aboutUs" class="aboutUs section-bg">-->
<!-- <div class="container">-->
<!-- <div class="section-title">-->
<!-- <h2 data-aos="fade-in">Presentation</h2>-->
<!-- <p data-aos="fade-in">Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>-->
<!-- </div>-->
<!-- <div class="row">-->
<!-- <div class="col-lg-12">-->
<!-- <ul id="portfolio-flters">-->
<!-- <li data-filter="*" class="filter-active">All</li>-->
<!-- <li data-filter=".filter-app">App</li>-->
<!-- <li data-filter=".filter-card">Card</li>-->
<!-- <li data-filter=".filter-web">Web</li>-->
<!-- </ul>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="row portfolio-container" data-aos="fade-up">-->
<!-- <div class="col-lg-4 col-md-6 portfolio-item filter-app">-->
<!-- <div class="portfolio-wrap">-->
<!-- <img src="assets/img/portfolio/portfolio-1.jpg" class="img-fluid" alt="">-->
<!-- <div class="portfolio-links">-->
<!-- <a href="assets/img/portfolio/portfolio-1.jpg" data-gall="portfolioGallery" class="venobox" title="App 1"><i class="icofont-plus-circle"></i></a>-->
<!-- <a href="portfolio-details.html" title="More Details"><i class="icofont-link"></i></a>-->
<!-- </div>-->
<!-- <div class="portfolio-info">-->
<!-- <h4>App 1</h4>-->
<!-- <p>App</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="col-lg-4 col-md-6 portfolio-item filter-web">-->
<!-- <div class="portfolio-wrap">-->
<!-- <img src="assets/img/portfolio/portfolio-2.jpg" class="img-fluid" alt="">-->
<!-- <div class="portfolio-links">-->
<!-- <a href="assets/img/portfolio/portfolio-2.jpg" data-gall="portfolioGallery" class="venobox" title="Web 3"><i class="icofont-plus-circle"></i></a>-->
<!-- <a href="portfolio-details.html" title="More Details"><i class="icofont-link"></i></a>-->
<!-- </div>-->
<!-- <div class="portfolio-info">-->
<!-- <h4>Web 3</h4>-->
<!-- <p>Web</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="col-lg-4 col-md-6 portfolio-item filter-app">-->
<!-- <div class="portfolio-wrap">-->
<!-- <img src="assets/img/portfolio/portfolio-3.jpg" class="img-fluid" alt="">-->
<!-- <div class="portfolio-links">-->
<!-- <a href="assets/img/portfolio/portfolio-3.jpg" data-gall="portfolioGallery" class="venobox" title="App 2"><i class="icofont-plus-circle"></i></a>-->
<!-- <a href="portfolio-details.html" title="More Details"><i class="icofont-link"></i></a>-->
<!-- </div>-->
<!-- <div class="portfolio-info">-->
<!-- <h4>App 2</h4>-->
<!-- <p>App</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="col-lg-4 col-md-6 portfolio-item filter-card">-->
<!-- <div class="portfolio-wrap">-->
<!-- <img src="assets/img/portfolio/portfolio-4.jpg" class="img-fluid" alt="">-->
<!-- <div class="portfolio-links">-->
<!-- <a href="assets/img/portfolio/portfolio-4.jpg" data-gall="portfolioGallery" class="venobox" title="Card 2"><i class="icofont-plus-circle"></i></a>-->
<!-- <a href="portfolio-details.html" title="More Details"><i class="icofont-link"></i></a>-->
<!-- </div>-->
<!-- <div class="portfolio-info">-->
<!-- <h4>Card 2</h4>-->
<!-- <p>Card</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="col-lg-4 col-md-6 portfolio-item filter-web">-->
<!-- <div class="portfolio-wrap">-->
<!-- <img src="assets/img/portfolio/portfolio-5.jpg" class="img-fluid" alt="">-->
<!-- <div class="portfolio-links">-->
<!-- <a href="assets/img/portfolio/portfolio-5.jpg" data-gall="portfolioGallery" class="venobox" title="Web 2"><i class="icofont-plus-circle"></i></a>-->
<!-- <a href="portfolio-details.html" title="More Details"><i class="icofont-link"></i></a>-->
<!-- </div>-->
<!-- <div class="portfolio-info">-->
<!-- <h4>Web 2</h4>-->
<!-- <p>Web</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="col-lg-4 col-md-6 portfolio-item filter-app">-->
<!-- <div class="portfolio-wrap">-->
<!-- <img src="assets/img/portfolio/portfolio-6.jpg" class="img-fluid" alt="">-->
<!-- <div class="portfolio-links">-->
<!-- <a href="assets/img/portfolio/portfolio-6.jpg" data-gall="portfolioGallery" class="venobox" title="App 3"><i class="icofont-plus-circle"></i></a>-->
<!-- <a href="portfolio-details.html" title="More Details"><i class="icofont-link"></i></a>-->
<!-- </div>-->
<!-- <div class="portfolio-info">-->
<!-- <h4>App 3</h4>-->
<!-- <p>App</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="col-lg-4 col-md-6 portfolio-item filter-card">-->
<!-- <div class="portfolio-wrap">-->
<!-- <img src="assets/img/portfolio/portfolio-7.jpg" class="img-fluid" alt="">-->
<!-- <div class="portfolio-links">-->
<!-- <a href="assets/img/portfolio/portfolio-7.jpg" data-gall="portfolioGallery" class="venobox" title="Card 1"><i class="icofont-plus-circle"></i></a>-->
<!-- <a href="portfolio-details.html" title="More Details"><i class="icofont-link"></i></a>-->
<!-- </div>-->
<!-- <div class="portfolio-info">-->
<!-- <h4>Card 1</h4>-->
<!-- <p>Card</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="col-lg-4 col-md-6 portfolio-item filter-card">-->
<!-- <div class="portfolio-wrap">-->
<!-- <img src="assets/img/portfolio/portfolio-8.jpg" class="img-fluid" alt="">-->
<!-- <div class="portfolio-links">-->
<!-- <a href="assets/img/portfolio/portfolio-8.jpg" data-gall="portfolioGallery" class="venobox" title="Card 3"><i class="icofont-plus-circle"></i></a>-->
<!-- <a href="portfolio-details.html" title="More Details"><i class="icofont-link"></i></a>-->
<!-- </div>-->
<!-- <div class="portfolio-info">-->
<!-- <h4>Card 3</h4>-->
<!-- <p>Card</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="col-lg-4 col-md-6 portfolio-item filter-web">-->
<!-- <div class="portfolio-wrap">-->
<!-- <img src="assets/img/portfolio/portfolio-9.jpg" class="img-fluid" alt="">-->
<!-- <div class="portfolio-links">-->
<!-- <a href="assets/img/portfolio/portfolio-9.jpg" data-gall="portfolioGallery" class="venobox" title="Web 3"><i class="icofont-plus-circle"></i></a>-->
<!-- <a href="portfolio-details.html" title="More Details"><i class="icofont-link"></i></a>-->
<!-- </div>-->
<!-- <div class="portfolio-info">-->
<!-- <h4>Web 3</h4>-->
<!-- <p>Web</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </section>-->
<!-- <section id="aboutUs" class="aboutUs section-bg">-->
<!-- <div class="container">-->
<!-- <div class="section-title">-->
<!-- <h2 data-aos="fade-in">Presentation</h2>-->
<!-- <p data-aos="fade-in">Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>-->
<!-- </div>-->
<!-- <div class="row">-->
<!-- <div class="col-lg-12">-->
<!-- <ul id="portfolio-flters">-->
<!-- <li data-filter="*" class="filter-active">All</li>-->
<!-- <li data-filter=".filter-app">App</li>-->
<!-- <li data-filter=".filter-card">Card</li>-->
<!-- <li data-filter=".filter-web">Web</li>-->
<!-- </ul>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="row portfolio-container" data-aos="fade-up">-->
<!-- <div class="col-lg-4 col-md-6 portfolio-item filter-app">-->
<!-- <div class="portfolio-wrap">-->
<!-- <img src="assets/img/portfolio/portfolio-1.jpg" class="img-fluid" alt="">-->
<!-- <div class="portfolio-links">-->
<!-- <a href="assets/img/portfolio/portfolio-1.jpg" data-gall="portfolioGallery" class="venobox" title="App 1"><i class="icofont-plus-circle"></i></a>-->
<!-- <a href="portfolio-details.html" title="More Details"><i class="icofont-link"></i></a>-->
<!-- </div>-->
<!-- <div class="portfolio-info">-->
<!-- <h4>App 1</h4>-->
<!-- <p>App</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="col-lg-4 col-md-6 portfolio-item filter-web">-->
<!-- <div class="portfolio-wrap">-->
<!-- <img src="assets/img/portfolio/portfolio-2.jpg" class="img-fluid" alt="">-->
<!-- <div class="portfolio-links">-->
<!-- <a href="assets/img/portfolio/portfolio-2.jpg" data-gall="portfolioGallery" class="venobox" title="Web 3"><i class="icofont-plus-circle"></i></a>-->
<!-- <a href="portfolio-details.html" title="More Details"><i class="icofont-link"></i></a>-->
<!-- </div>-->
<!-- <div class="portfolio-info">-->
<!-- <h4>Web 3</h4>-->
<!-- <p>Web</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="col-lg-4 col-md-6 portfolio-item filter-app">-->
<!-- <div class="portfolio-wrap">-->
<!-- <img src="assets/img/portfolio/portfolio-3.jpg" class="img-fluid" alt="">-->
<!-- <div class="portfolio-links">-->
<!-- <a href="assets/img/portfolio/portfolio-3.jpg" data-gall="portfolioGallery" class="venobox" title="App 2"><i class="icofont-plus-circle"></i></a>-->
<!-- <a href="portfolio-details.html" title="More Details"><i class="icofont-link"></i></a>-->
<!-- </div>-->
<!-- <div class="portfolio-info">-->
<!-- <h4>App 2</h4>-->
<!-- <p>App</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="col-lg-4 col-md-6 portfolio-item filter-card">-->
<!-- <div class="portfolio-wrap">-->
<!-- <img src="assets/img/portfolio/portfolio-4.jpg" class="img-fluid" alt="">-->
<!-- <div class="portfolio-links">-->
<!-- <a href="assets/img/portfolio/portfolio-4.jpg" data-gall="portfolioGallery" class="venobox" title="Card 2"><i class="icofont-plus-circle"></i></a>-->
<!-- <a href="portfolio-details.html" title="More Details"><i class="icofont-link"></i></a>-->
<!-- </div>-->
<!-- <div class="portfolio-info">-->
<!-- <h4>Card 2</h4>-->
<!-- <p>Card</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="col-lg-4 col-md-6 portfolio-item filter-web">-->
<!-- <div class="portfolio-wrap">-->
<!-- <img src="assets/img/portfolio/portfolio-5.jpg" class="img-fluid" alt="">-->
<!-- <div class="portfolio-links">-->
<!-- <a href="assets/img/portfolio/portfolio-5.jpg" data-gall="portfolioGallery" class="venobox" title="Web 2"><i class="icofont-plus-circle"></i></a>-->
<!-- <a href="portfolio-details.html" title="More Details"><i class="icofont-link"></i></a>-->
<!-- </div>-->
<!-- <div class="portfolio-info">-->
<!-- <h4>Web 2</h4>-->
<!-- <p>Web</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="col-lg-4 col-md-6 portfolio-item filter-app">-->
<!-- <div class="portfolio-wrap">-->
<!-- <img src="assets/img/portfolio/portfolio-6.jpg" class="img-fluid" alt="">-->
<!-- <div class="portfolio-links">-->
<!-- <a href="assets/img/portfolio/portfolio-6.jpg" data-gall="portfolioGallery" class="venobox" title="App 3"><i class="icofont-plus-circle"></i></a>-->
<!-- <a href="portfolio-details.html" title="More Details"><i class="icofont-link"></i></a>-->
<!-- </div>-->
<!-- <div class="portfolio-info">-->
<!-- <h4>App 3</h4>-->
<!-- <p>App</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="col-lg-4 col-md-6 portfolio-item filter-card">-->
<!-- <div class="portfolio-wrap">-->
<!-- <img src="assets/img/portfolio/portfolio-7.jpg" class="img-fluid" alt="">-->
<!-- <div class="portfolio-links">-->
<!-- <a href="assets/img/portfolio/portfolio-7.jpg" data-gall="portfolioGallery" class="venobox" title="Card 1"><i class="icofont-plus-circle"></i></a>-->
<!-- <a href="portfolio-details.html" title="More Details"><i class="icofont-link"></i></a>-->
<!-- </div>-->
<!-- <div class="portfolio-info">-->
<!-- <h4>Card 1</h4>-->
<!-- <p>Card</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="col-lg-4 col-md-6 portfolio-item filter-card">-->
<!-- <div class="portfolio-wrap">-->
<!-- <img src="assets/img/portfolio/portfolio-8.jpg" class="img-fluid" alt="">-->
<!-- <div class="portfolio-links">-->
<!-- <a href="assets/img/portfolio/portfolio-8.jpg" data-gall="portfolioGallery" class="venobox" title="Card 3"><i class="icofont-plus-circle"></i></a>-->
<!-- <a href="portfolio-details.html" title="More Details"><i class="icofont-link"></i></a>-->
<!-- </div>-->
<!-- <div class="portfolio-info">-->
<!-- <h4>Card 3</h4>-->
<!-- <p>Card</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="col-lg-4 col-md-6 portfolio-item filter-web">-->
<!-- <div class="portfolio-wrap">-->
<!-- <img src="assets/img/portfolio/portfolio-9.jpg" class="img-fluid" alt="">-->
<!-- <div class="portfolio-links">-->
<!-- <a href="assets/img/portfolio/portfolio-9.jpg" data-gall="portfolioGallery" class="venobox" title="Web 3"><i class="icofont-plus-circle"></i></a>-->
<!-- <a href="portfolio-details.html" title="More Details"><i class="icofont-link"></i></a>-->
<!-- </div>-->
<!-- <div class="portfolio-info">-->
<!-- <h4>Web 3</h4>-->
<!-- <p>Web</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </section>-->
<!-- End Portfolio Section -->
<!-- ======= About Us Section ======= -->
<section id="team" class="team section-bg">
<div class="container">
<div class="container">
<div class="section-title">
<h2 data-aos="fade-in">About Us</h2>
</div>
<div class="section-title">
<h2 data-aos="fade-in">About Us</h2>
</div>
<div class="section-title">
<h4 data-aos="fade-in">Supervisors</h4>
<!-- <p data-aos="fade-in">Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>-->
</div>
<div class="section-title">
<h4 data-aos="fade-in">Supervisors</h4>
<!-- <p data-aos="fade-in">Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>-->
</div>
<!-- About Us - Supervisors-->
<div class="row">
<div class="col-xl-3 col-lg-4 col-md-6">
</div>
<!-- About Us - Supervisors-->
<div class="row">
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="member" data-aos="fade-up">
<div class="pic"><img src="assets/img/about_us/Samantha_sir.jpg" alt=""></div>
<h4>Samantha Rajapaksha</h4>
<span>Senior Lecturer</span>
<div class="social">
<a href=""><i class="icofont-twitter"></i></a>
<a href=""><i class="icofont-facebook"></i></a>
<a href=""><i class="icofont-instagram"></i></a>
<a href=""><i class="icofont-linkedin"></i></a>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6">
</div>
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="member" data-aos="fade-up">
<div class="pic"><img src="assets/img/about_us/Dinuka_miss.jpg" alt=""></div>
<h4>Ms. Dinuka Wijendra</h4>
<span>Lecturer</span>
<div class="social">
<a href=""><i class="icofont-twitter"></i></a>
<a href=""><i class="icofont-facebook"></i></a>
<a href=""><i class="icofont-instagram"></i></a>
<a href=""><i class="icofont-linkedin"></i></a>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6">
</div>
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="member" data-aos="fade-up">
<div class="pic"><img src="assets/img/about_us/Samantha_sir.jpg" alt=""></div>
<h4>Samantha Rajapaksha</h4>
<span>Senior Lecturer</span>
<div class="social">
<a href=""><i class="icofont-twitter"></i></a>
<a href=""><i class="icofont-facebook"></i></a>
<a href=""><i class="icofont-instagram"></i></a>
<a href=""><i class="icofont-linkedin"></i></a>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="member" data-aos="fade-up">
<div class="pic"><img src="assets/img/about_us/Dinuka_miss.jpg" alt=""></div>
<h4>Ms. Dinuka Wijendra</h4>
<span>Lecturer</span>
<div class="social">
<a href=""><i class="icofont-twitter"></i></a>
<a href=""><i class="icofont-facebook"></i></a>
<a href=""><i class="icofont-instagram"></i></a>
<a href=""><i class="icofont-linkedin"></i></a>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6">
</div>
<!-- End of About Us - Supervisors-->
</div>
<!-- End of About Us - Supervisors-->
<!--About Us - Group Members-->
<div class="section-title mt-4">
<h4 data-aos="fade-in">Group Members</h4>
</div>
<!--About Us - Group Members-->
<div class="section-title mt-4">
<h4 data-aos="fade-in">Group Members</h4>
</div>
<div class="row">
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="member" data-aos="fade-up">
<div class="pic"><img src="assets/img/about_us/Ishan.jpg" alt=""></div>
<h4>Ishan Seneviratne</h4>
<span>Group Leader</span>
<div class="social">
<a href=""><i class="icofont-twitter"></i></a>
<a href=""><i class="icofont-facebook"></i></a>
<a href=""><i class="icofont-instagram"></i></a>
<a href=""><i class="icofont-linkedin"></i></a>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="member" data-aos="fade-up" data-aos-delay="100">
<div class="pic"><img src="assets/img/about_us/sohan.PNG" alt=""></div>
<h4>Sohan Perera</h4>
<span>Member</span>
<div class="social">
<a href=""><i class="icofont-twitter"></i></a>
<a href=""><i class="icofont-facebook"></i></a>
<a href=""><i class="icofont-instagram"></i></a>
<a href=""><i class="icofont-linkedin"></i></a>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="member" data-aos="fade-up">
<div class="pic"><img src="assets/img/about_us/Ishan.jpg" alt=""></div>
<h4>Ishan Seneviratne</h4>
<span>Group Leader</span>
<div class="social">
<a href=""><i class="icofont-twitter"></i></a>
<a href=""><i class="icofont-facebook"></i></a>
<a href=""><i class="icofont-instagram"></i></a>
<a href=""><i class="icofont-linkedin"></i></a>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="member" data-aos="fade-up" data-aos-delay="100">
<div class="pic"><img src="assets/img/about_us/sohan.PNG" alt=""></div>
<h4>Sohan Perera</h4>
<span>Member</span>
<div class="social">
<a href=""><i class="icofont-twitter"></i></a>
<a href=""><i class="icofont-facebook"></i></a>
<a href=""><i class="icofont-instagram"></i></a>
<a href=""><i class="icofont-linkedin"></i></a>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="member" data-aos="fade-up" data-aos-delay="200">
<div class="pic"><img src="assets/img/about_us/sachith.jpg" alt=""></div>
<h4>Sachith Fernando</h4>
<span>Member</span>
<div class="social">
<a href=""><i class="icofont-twitter"></i></a>
<a href=""><i class="icofont-facebook"></i></a>
<a href=""><i class="icofont-instagram"></i></a>
<a href=""><i class="icofont-linkedin"></i></a>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="member" data-aos="fade-up" data-aos-delay="300">
<div class="pic"><img src="assets/img/about_us/linisha.jpg" alt=""></div>
<h4>Linisha Siriwardana</h4>
<span>Member</span>
<div class="social">
<a href=""><i class="icofont-twitter"></i></a>
<a href=""><i class="icofont-facebook"></i></a>
<a href=""><i class="icofont-instagram"></i></a>
<a href=""><i class="icofont-linkedin"></i></a>
</div>
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="member" data-aos="fade-up" data-aos-delay="200">
<div class="pic"><img src="assets/img/about_us/sachith.jpg" alt=""></div>
<h4>Sachith Fernando</h4>
<span>Member</span>
<div class="social">
<a href=""><i class="icofont-twitter"></i></a>
<a href=""><i class="icofont-facebook"></i></a>
<a href=""><i class="icofont-instagram"></i></a>
<a href=""><i class="icofont-linkedin"></i></a>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="member" data-aos="fade-up" data-aos-delay="300">
<div class="pic"><img src="assets/img/about_us/linisha.jpg" alt=""></div>
<h4>Linisha Siriwardana</h4>
<span>Member</span>
<div class="social">
<a href=""><i class="icofont-twitter"></i></a>
<a href=""><i class="icofont-facebook"></i></a>
<a href=""><i class="icofont-instagram"></i></a>
<a href=""><i class="icofont-linkedin"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--End of About Us - Group members-->
<!--End of About Us - Group members-->
</div>
</div>
</section><!-- End Team Section -->
<!-- ======= Pricing Section ======= -->
<section id="pricing" class="pricing section-bg">
<div class="container">
<div class="container">
<div class="section-title">
<h2 data-aos="fade-in">Pricing</h2>
<p data-aos="fade-in">Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
</div>
<div class="section-title">
<h2 data-aos="fade-in">Pricing</h2>
<p data-aos="fade-in">Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga
eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit
suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
</div>
<div class="row no-gutters">
<div class="row no-gutters">
<div class="col-lg-4 box" data-aos="zoom-in">
<h3>Free</h3>
<h4>$0<span>per month</span></h4>
<ul>
<li><i class="bx bx-check"></i> Quam adipiscing vitae proin</li>
<li><i class="bx bx-check"></i> Nec feugiat nisl pretium</li>
<li><i class="bx bx-check"></i> Nulla at volutpat diam uteera</li>
<li class="na"><i class="bx bx-x"></i> <span>Pharetra massa massa ultricies</span></li>
<li class="na"><i class="bx bx-x"></i> <span>Massa ultricies mi quis hendrerit</span></li>
</ul>
<a href="#" class="get-started-btn">Get Started</a>
</div>
<div class="col-lg-4 box" data-aos="zoom-in">
<h3>Free</h3>
<h4>$0<span>per month</span></h4>
<ul>
<li><i class="bx bx-check"></i> Quam adipiscing vitae proin</li>
<li><i class="bx bx-check"></i> Nec feugiat nisl pretium</li>
<li><i class="bx bx-check"></i> Nulla at volutpat diam uteera</li>
<li class="na"><i class="bx bx-x"></i> <span>Pharetra massa massa ultricies</span></li>
<li class="na"><i class="bx bx-x"></i> <span>Massa ultricies mi quis hendrerit</span></li>
</ul>
<a href="#" class="get-started-btn">Get Started</a>
</div>
<div class="col-lg-4 box featured" data-aos="zoom-in">
<span class="featured-badge">Featured</span>
<h3>Business</h3>
<h4>$29<span>per month</span></h4>
<ul>
<li><i class="bx bx-check"></i> Quam adipiscing vitae proin</li>
<li><i class="bx bx-check"></i> Nec feugiat nisl pretium</li>
<li><i class="bx bx-check"></i> Nulla at volutpat diam uteera</li>
<li><i class="bx bx-check"></i> Pharetra massa massa ultricies</li>
<li><i class="bx bx-check"></i> Massa ultricies mi quis hendrerit</li>
</ul>
<a href="#" class="get-started-btn">Get Started</a>
</div>
<div class="col-lg-4 box featured" data-aos="zoom-in">
<span class="featured-badge">Featured</span>
<h3>Business</h3>
<h4>$29<span>per month</span></h4>
<ul>
<li><i class="bx bx-check"></i> Quam adipiscing vitae proin</li>
<li><i class="bx bx-check"></i> Nec feugiat nisl pretium</li>
<li><i class="bx bx-check"></i> Nulla at volutpat diam uteera</li>
<li><i class="bx bx-check"></i> Pharetra massa massa ultricies</li>
<li><i class="bx bx-check"></i> Massa ultricies mi quis hendrerit</li>
</ul>
<a href="#" class="get-started-btn">Get Started</a>
</div>
<div class="col-lg-4 box" data-aos="zoom-in">
<h3>Developer</h3>
<h4>$49<span>per month</span></h4>
<ul>
<li><i class="bx bx-check"></i> Quam adipiscing vitae proin</li>
<li><i class="bx bx-check"></i> Nec feugiat nisl pretium</li>
<li><i class="bx bx-check"></i> Nulla at volutpat diam uteera</li>
<li><i class="bx bx-check"></i> Pharetra massa massa ultricies</li>
<li><i class="bx bx-check"></i> Massa ultricies mi quis hendrerit</li>
</ul>
<a href="#" class="get-started-btn">Get Started</a>
</div>
<div class="col-lg-4 box" data-aos="zoom-in">
<h3>Developer</h3>
<h4>$49<span>per month</span></h4>
<ul>
<li><i class="bx bx-check"></i> Quam adipiscing vitae proin</li>
<li><i class="bx bx-check"></i> Nec feugiat nisl pretium</li>
<li><i class="bx bx-check"></i> Nulla at volutpat diam uteera</li>
<li><i class="bx bx-check"></i> Pharetra massa massa ultricies</li>
<li><i class="bx bx-check"></i> Massa ultricies mi quis hendrerit</li>
</ul>
<a href="#" class="get-started-btn">Get Started</a>
</div>
</div>
</div>
</div>
</section><!-- End Pricing Section -->
<!-- ======= Frequently Asked Questions Section ======= -->
<section id="faq" class="faq section-bg">
<div class="container">
<div class="container">
<div class="section-title">
<h2 data-aos="fade-in">Frequently Asked Questions</h2>
<p data-aos="fade-in">Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
</div>
<div class="section-title">
<h2 data-aos="fade-in">Frequently Asked Questions</h2>
<p data-aos="fade-in">Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga
eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit
suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
</div>
<div class="row faq-item d-flex align-items-stretch" data-aos="fade-up">
<div class="col-lg-5">
<i class="bx bx-help-circle"></i>
<h4>Non consectetur a erat nam at lectus urna duis?</h4>
</div>
<div class="col-lg-7">
<p>
Feugiat pretium nibh ipsum consequat. Tempus iaculis urna id volutpat lacus laoreet non curabitur gravida. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus non.
</p>
</div>
</div><!-- End F.A.Q Item-->
<div class="row faq-item d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="100">
<div class="col-lg-5">
<i class="bx bx-help-circle"></i>
<h4>Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque?</h4>
</div>
<div class="col-lg-7">
<p>
Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Id interdum velit laoreet id donec ultrices. Fringilla phasellus faucibus scelerisque eleifend donec pretium. Est pellentesque elit ullamcorper dignissim.
</p>
</div>
</div><!-- End F.A.Q Item-->
<div class="row faq-item d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="200">
<div class="col-lg-5">
<i class="bx bx-help-circle"></i>
<h4>Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi?</h4>
</div>
<div class="col-lg-7">
<p>
Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci. Faucibus pulvinar elementum integer enim. Sem nulla pharetra diam sit amet nisl suscipit. Rutrum tellus pellentesque eu tincidunt. Lectus urna duis convallis convallis tellus.
</p>
</div>
</div><!-- End F.A.Q Item-->
<div class="row faq-item d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="300">
<div class="col-lg-5">
<i class="bx bx-help-circle"></i>
<h4>Ac odio tempor orci dapibus. Aliquam eleifend mi in nulla?</h4>
</div>
<div class="col-lg-7">
<p>
Aperiam itaque sit optio et deleniti eos nihil quidem cumque. Voluptas dolorum accusantium sunt sit enim. Provident consequuntur quam aut reiciendis qui rerum dolorem sit odio. Repellat assumenda soluta sunt pariatur error doloribus fuga.
</p>
</div>
</div><!-- End F.A.Q Item-->
<div class="row faq-item d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="400">
<div class="col-lg-5">
<i class="bx bx-help-circle"></i>
<h4>Tempus quam pellentesque nec nam aliquam sem et tortor consequat?</h4>
</div>
<div class="col-lg-7">
<p>
Molestie a iaculis at erat pellentesque adipiscing commodo. Dignissim suspendisse in est ante in. Nunc vel risus commodo viverra maecenas accumsan. Sit amet nisl suscipit adipiscing bibendum est. Purus gravida quis blandit turpis cursus in
</p>
</div>
</div><!-- End F.A.Q Item-->
</div>
<div class="row faq-item d-flex align-items-stretch" data-aos="fade-up">
<div class="col-lg-5">
<i class="bx bx-help-circle"></i>
<h4>Non consectetur a erat nam at lectus urna duis?</h4>
</div>
<div class="col-lg-7">
<p>
Feugiat pretium nibh ipsum consequat. Tempus iaculis urna id volutpat lacus laoreet non
curabitur gravida. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus non.
</p>
</div>
</div><!-- End F.A.Q Item-->
<div class="row faq-item d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="100">
<div class="col-lg-5">
<i class="bx bx-help-circle"></i>
<h4>Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque?</h4>
</div>
<div class="col-lg-7">
<p>
Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Id interdum velit
laoreet id donec ultrices. Fringilla phasellus faucibus scelerisque eleifend donec pretium. Est
pellentesque elit ullamcorper dignissim.
</p>
</div>
</div><!-- End F.A.Q Item-->
<div class="row faq-item d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="200">
<div class="col-lg-5">
<i class="bx bx-help-circle"></i>
<h4>Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi?</h4>
</div>
<div class="col-lg-7">
<p>
Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci. Faucibus pulvinar
elementum integer enim. Sem nulla pharetra diam sit amet nisl suscipit. Rutrum tellus
pellentesque eu tincidunt. Lectus urna duis convallis convallis tellus.
</p>
</div>
</div><!-- End F.A.Q Item-->
<div class="row faq-item d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="300">
<div class="col-lg-5">
<i class="bx bx-help-circle"></i>
<h4>Ac odio tempor orci dapibus. Aliquam eleifend mi in nulla?</h4>
</div>
<div class="col-lg-7">
<p>
Aperiam itaque sit optio et deleniti eos nihil quidem cumque. Voluptas dolorum accusantium sunt
sit enim. Provident consequuntur quam aut reiciendis qui rerum dolorem sit odio. Repellat
assumenda soluta sunt pariatur error doloribus fuga.
</p>
</div>
</div><!-- End F.A.Q Item-->
<div class="row faq-item d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="400">
<div class="col-lg-5">
<i class="bx bx-help-circle"></i>
<h4>Tempus quam pellentesque nec nam aliquam sem et tortor consequat?</h4>
</div>
<div class="col-lg-7">
<p>
Molestie a iaculis at erat pellentesque adipiscing commodo. Dignissim suspendisse in est ante
in. Nunc vel risus commodo viverra maecenas accumsan. Sit amet nisl suscipit adipiscing bibendum
est. Purus gravida quis blandit turpis cursus in
</p>
</div>
</div><!-- End F.A.Q Item-->
</div>
</section><!-- End Frequently Asked Questions Section -->
<!-- ======= Contact Section ======= -->
<section id="contact" class="contact section-bg">
<div class="container">
<div class="container">
<div class="section-title">
<h2 data-aos="fade-in">Contact</h2>
<p data-aos="fade-in">Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
</div>
<div class="section-title">
<h2 data-aos="fade-in">Contact</h2>
<p data-aos="fade-in">Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga
eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit
suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
</div>
<div class="row">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-12">
<div class="info-box" data-aos="fade-up">
<i class="bx bx-map"></i>
<h3>Our Address</h3>
<p>A108 Adam Street, New York, NY 535022</p>
</div>
</div>
<div class="col-md-6">
<div class="info-box mt-4" data-aos="fade-up" data-aos-delay="100">
<i class="bx bx-envelope"></i>
<h3>Email Us</h3>
<p>info@example.com<br>contact@example.com</p>
</div>
</div>
<div class="col-md-6">
<div class="info-box mt-4" data-aos="fade-up" data-aos-delay="100">
<i class="bx bx-phone-call"></i>
<h3>Call Us</h3>
<p>+1 5589 55488 55<br>+1 6678 254445 41</p>
</div>
</div>
</div>
<div class="col-lg-6">
</div>
<div class="row">
<div class="col-md-12">
<div class="info-box" data-aos="fade-up">
<i class="bx bx-map"></i>
<h3>Our Address</h3>
<p>A108 Adam Street, New York, NY 535022</p>
</div>
</div>
<div class="col-md-6">
<div class="info-box mt-4" data-aos="fade-up" data-aos-delay="100">
<i class="bx bx-envelope"></i>
<h3>Email Us</h3>
<p>info@example.com<br>contact@example.com</p>
</div>
</div>
<div class="col-md-6">
<div class="info-box mt-4" data-aos="fade-up" data-aos-delay="100">
<i class="bx bx-phone-call"></i>
<h3>Call Us</h3>
<p>+1 5589 55488 55<br>+1 6678 254445 41</p>
</div>
</div>
</div>
<div class="col-lg-6">
<form action="forms/contact.php" method="post" role="form" class="php-email-form"
data-aos="fade-up">
<div class="form-row">
<div class="col-md-6 form-group">
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name"
data-rule="minlen:4" data-msg="Please enter at least 4 chars"/>
<div class="validate"></div>
</div>
<div class="col-md-6 form-group">
<input type="email" class="form-control" name="email" id="email"
placeholder="Your Email" data-rule="email"
data-msg="Please enter a valid email"/>
<div class="validate"></div>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject"
data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject"/>
<div class="validate"></div>
</div>
<div class="form-group">
<textarea class="form-control" name="message" rows="5" data-rule="required"
data-msg="Please write something for us" placeholder="Message"></textarea>
<div class="validate"></div>
</div>
<div class="mb-3">
<div class="loading">Loading</div>
<div class="error-message"></div>
<div class="sent-message">Your message has been sent. Thank you!</div>
</div>
<div class="text-center">
<button type="submit">Send Message</button>
</div>
</form>
</div>
</div>
<div class="col-lg-6">
<form action="forms/contact.php" method="post" role="form" class="php-email-form" data-aos="fade-up">
<div class="form-row">
<div class="col-md-6 form-group">
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<div class="validate"></div>
</div>
<div class="col-md-6 form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
<div class="validate"></div>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validate"></div>
</div>
<div class="form-group">
<textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
<div class="validate"></div>
</div>
<div class="mb-3">
<div class="loading">Loading</div>
<div class="error-message"></div>
<div class="sent-message">Your message has been sent. Thank you!</div>
</div>
<div class="text-center"><button type="submit">Send Message</button></div>
</form>
</div>
</div>
</div>
</div>
</section><!-- End Contact Section -->
</main><!-- End #main -->
</main><!-- End #main -->
<!-- ======= Footer ======= -->
<footer id="footer">
<!-- ======= Footer ======= -->
<footer id="footer">
<div class="footer-top">
<div class="container" data-aos="fade-up">
<div class="container" data-aos="fade-up">
<div class="row justify-content-center">
<div class="col-lg-6">
<h3>Bocor</h3>
<p>Et aut eum quis fuga eos sunt ipsa nihil. Labore corporis magni eligendi fuga maxime saepe commodi placeat.</p>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-6">
<h3>Bocor</h3>
<p>Et aut eum quis fuga eos sunt ipsa nihil. Labore corporis magni eligendi fuga maxime saepe
commodi placeat.</p>
</div>
</div>
<div class="row footer-newsletter justify-content-center">
<div class="col-lg-6">
<form action="" method="post">
<input type="email" name="email" placeholder="Enter your Email"><input type="submit" value="Subscribe">
</form>
</div>
</div>
<div class="row footer-newsletter justify-content-center">
<div class="col-lg-6">
<form action="" method="post">
<input type="email" name="email" placeholder="Enter your Email"><input type="submit"
value="Subscribe">
</form>
</div>
</div>
<div class="social-links">
<a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
<a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>
<a href="#" class="instagram"><i class="bx bxl-instagram"></i></a>
<a href="#" class="google-plus"><i class="bx bxl-skype"></i></a>
<a href="#" class="linkedin"><i class="bx bxl-linkedin"></i></a>
</div>
<div class="social-links">
<a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
<a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>
<a href="#" class="instagram"><i class="bx bxl-instagram"></i></a>
<a href="#" class="google-plus"><i class="bx bxl-skype"></i></a>
<a href="#" class="linkedin"><i class="bx bxl-linkedin"></i></a>
</div>
</div>
</div>
</div>
<div class="container footer-bottom clearfix">
<div class="copyright">
&copy; Copyright <strong><span>Bocor</span></strong>. All Rights Reserved
</div>
<div class="credits">
<!-- All the links in the footer should remain intact. -->
<!-- You can delete the links only if you purchased the pro version. -->
<!-- Licensing information: https://bootstrapmade.com/license/ -->
<!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/bocor-bootstrap-template-nice-animation/ -->
Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
</div>
<div class="copyright">
&copy; Copyright <strong><span>Bocor</span></strong>. All Rights Reserved
</div>
<div class="credits">
<!-- All the links in the footer should remain intact. -->
<!-- You can delete the links only if you purchased the pro version. -->
<!-- Licensing information: https://bootstrapmade.com/license/ -->
<!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/bocor-bootstrap-template-nice-animation/ -->
Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
</div>
</div>
</footer><!-- End Footer -->
<a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>
<!-- Vendor JS Files -->
<script src="assets/vendor/jquery/jquery.min.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/jquery.easing/jquery.easing.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/owl.carousel/owl.carousel.min.js"></script>
<script src="assets/vendor/venobox/venobox.min.js"></script>
<script src="assets/vendor/aos/aos.js"></script>
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
</footer><!-- End Footer -->
<a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>
<!-- Vendor JS Files -->
<script src="assets/vendor/jquery/jquery.min.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/jquery.easing/jquery.easing.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/owl.carousel/owl.carousel.min.js"></script>
<script src="assets/vendor/venobox/venobox.min.js"></script>
<script src="assets/vendor/aos/aos.js"></script>
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
</body>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment