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 @@ ...@@ -2,865 +2,1014 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport"> <meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Bocor Bootstrap Template - Index</title> <title>Bocor Bootstrap Template - Index</title>
<meta content="" name="descriptison"> <meta content="" name="descriptison">
<meta content="" name="keywords"> <meta content="" name="keywords">
<!-- Favicons --> <!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon"> <link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon"> <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts --> <!-- 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"> <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"> <!-- Vendor CSS Files -->
<link href="assets/vendor/icofont/icofont.min.css" rel="stylesheet"> <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet"> <link href="assets/vendor/icofont/icofont.min.css" rel="stylesheet">
<link href="assets/vendor/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet"> <link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/venobox/venobox.css" rel="stylesheet"> <link href="assets/vendor/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="assets/vendor/aos/aos.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 Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet">
<!-- =======================================================
* Template Name: Bocor - v2.1.0 <!-- links for the timeine-->
* Template URL: https://bootstrapmade.com/bocor-bootstrap-template-nice-animation/ <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"
* Author: BootstrapMade.com id="bootstrap-css">
* License: https://bootstrapmade.com/license/ <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> </head>
<body> <body>
<!-- ======= Header ======= --> <!-- ======= Header ======= -->
<header id="header"> <header id="header">
<div class="container d-flex align-items-center"> <div class="container d-flex align-items-center">
<div class="logo mr-auto"> <div class="logo mr-auto">
<h1 class="text-light"><a href="index.html">SLPES<span>.</span></a></h1> <h1 class="text-light"><a href="index.html">SLPES<span>.</span></a></h1>
<!-- Uncomment below if you prefer to use an image logo --> <!-- 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>--> <!-- <a href="index.html"><img src="assets/img/logo.png" alt="" class="img-fluid"></a>-->
</div> </div>
<nav class="nav-menu d-none d-lg-block"> <nav class="nav-menu d-none d-lg-block">
<ul> <ul>
<li class="active"><a href="index.html">Home</a></li> <li class="active"><a href="index.html">Home</a></li>
<li><a href="#researchScope">Research Project Scope</a></li> <li><a href="#researchScope">Research Project Scope</a></li>
<li><a href="#researchMilestone">Research Project Milestones</a></li> <li><a href="#researchMilestone">Research Project Milestones</a></li>
<li><a href="#documents">Documents</a></li> <li><a href="#documents">Documents</a></li>
<li><a href="#presentation">Presentation</a></li> <li><a href="#presentation">Presentation</a></li>
<li><a href="#aboutUs">About Us</a></li> <li><a href="#aboutUs">About Us</a></li>
<li><a href="#contact">Contact Us</a></li> <li><a href="#contact">Contact Us</a></li>
</ul> </ul>
</nav><!-- .nav-menu --> </nav><!-- .nav-menu -->
</div> </div>
</header><!-- End Header --> </header><!-- End Header -->
<!-- ======= Hero Section ======= --> <!-- ======= Hero Section ======= -->
<section id="hero"> <section id="hero">
<div class="container"> <div class="container">
<div class="row d-flex align-items-center""> <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> <div class=" col-lg-6 py-5 py-lg-0 order-2 order-lg-1" data-aos="fade-right">
<h2>We are team of talanted designers making websites with Bootstrap</h2> <h1>Taking the classroom monitoring to the next level with SLPES</h1>
<a href="#about" class="btn-get-started scrollto">Get Started</a> <h2>We are team of talanted designers making websites with Bootstrap</h2>
</div> <a href="#about" class="btn-get-started scrollto">Get Started</a>
<div class="col-lg-6 order-1 order-lg-2 hero-img" data-aos="fade-left"> </div>
<!-- <img src="assets/img/application.jpg" class="img-fluid" alt="">--> <div class="col-lg-6 order-1 order-lg-2 hero-img" data-aos="fade-left">
<img src="assets/img/hero-img.png" class="img-fluid" alt=""> <!-- <img src="assets/img/application.jpg" class="img-fluid" alt="">-->
<!-- <img src="assets/img/application_1.jpg" class="img-fluid" alt="">--> <img src="assets/img/hero-img.png" class="img-fluid" alt="">
</div> <!-- <img src="assets/img/application_1.jpg" class="img-fluid" alt="">-->
</div>
</div> </div>
</div> </div>
</section><!-- End Hero --> </section><!-- End Hero -->
<main id="main"> <main id="main">
<!-- ======= Clients Section ======= --> <!-- ======= Clients Section ======= -->
<section id="researchScope" class="researchScope section-bg"> <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="col-lg-2 col-md-4 col-6">
<div class="researchScope-logo"> <div class="researchScope-logo">
<img src="assets/img/clients/client-1.png" class="img-fluid" alt="" data-aos="flip-right"> <img src="assets/img/clients/client-1.png" class="img-fluid" alt="" data-aos="flip-right">
</div> </div>
</div> </div>
<div class="col-lg-2 col-md-4 col-6"> <div class="col-lg-2 col-md-4 col-6">
<div class="researchScope-logo"> <div class="researchScope-logo">
<img src="assets/img/clients/client-2.png" class="img-fluid" alt="" data-aos="flip-right" data-aos-delay="100"> <img src="assets/img/clients/client-2.png" class="img-fluid" alt="" data-aos="flip-right"
</div> data-aos-delay="100">
</div> </div>
</div>
<div class="col-lg-2 col-md-4 col-6"> <div class="col-lg-2 col-md-4 col-6">
<div class="client-logo"> <div class="client-logo">
<img src="assets/img/clients/client-3.png" class="img-fluid" alt="" data-aos="flip-right" data-aos-delay="200"> <img src="assets/img/clients/client-3.png" class="img-fluid" alt="" data-aos="flip-right"
</div> data-aos-delay="200">
</div> </div>
</div>
<div class="col-lg-2 col-md-4 col-6"> <div class="col-lg-2 col-md-4 col-6">
<div class="client-logo"> <div class="client-logo">
<img src="assets/img/clients/client-4.png" class="img-fluid" alt="" data-aos="flip-right" data-aos-delay="300"> <img src="assets/img/clients/client-4.png" class="img-fluid" alt="" data-aos="flip-right"
</div> data-aos-delay="300">
</div> </div>
</div>
<div class="col-lg-2 col-md-4 col-6"> <div class="col-lg-2 col-md-4 col-6">
<div class="client-logo"> <div class="client-logo">
<img src="assets/img/clients/client-5.png" class="img-fluid" alt="" data-aos="flip-right" data-aos-delay="400"> <img src="assets/img/clients/client-5.png" class="img-fluid" alt="" data-aos="flip-right"
</div> data-aos-delay="400">
</div> </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> </div>
</div>
</section><!-- End Clients Section --> </section><!-- End Clients Section -->
<!-- ======= Research Milestones Section ======= --> <!-- ======= Research Milestones Section ======= -->
<section id="researchMilestone" class="researchMilestone section-bg"> <section id="researchMilestone" class="researchMilestone section-bg">
<div class="container"> <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> <div class="row">
</section><!-- End About Section --> <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 ======= --> <!-- <div class="page-header">-->
<section id="documents" class="documents section-bg">
<div class="container"> <!-- </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> </div>
</section>
<!-- End About Section -->
<div class="row"> <!-- ======= Services Section ======= -->
<div class="col-md-6 d-flex align-items-stretch" data-aos="fade-right"> <section id="documents" class="documents section-bg">
<div class="card"> <div class="container">
<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>
</div> <div class="section-title">
<div class="col-md-6 d-flex align-items-stretch" data-aos="fade-right"> <h2 data-aos="fade-in">Documents</h2>
<div class="card"> <!-- <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 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> </div>
</div>
<div class="col-md-6 d-flex align-items-stretch" data-aos="fade-left">
<div class="card"> <!-- documents row-->
<div class="card-img"> <div class="row">
<img src="assets/img/services-4.jpg" alt="..."> <!--topic registration document-->
</div> <div class="col-md-3 d-flex align-items-stretch" data-aos="fade-right">
<div class="card-body"> <div class="card">
<h5 class="card-title"><a href="">Aliquam veritatis</a></h5> <div class="card-img">
<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> <img src="assets/img/documents/pdf_image.jpg" alt="...">
<div class="read-more"><a href="#"><i class="icofont-arrow-right"></i> Read More</a></div> </div>
</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> </div>
</section><!-- End Services Section --> </section><!-- End Services Section -->
<!-- ======= Documents Section ======= --> <!-- ======= Documents Section ======= -->
<section id="presentation" class="presentation section-bg"> <section id="presentation" class="presentation section-bg">
<div class="container"> <div class="container">
<div class="section-title"> <div class="section-title">
<h2 data-aos="fade-in">Presentation</h2> <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>
<div class="row content"> <div class="row content">
<div class="col-md-5" data-aos="fade-right"> <div class="col-md-5" data-aos="fade-right">
<img src="assets/img/features-1.svg" class="img-fluid" alt=""> <img src="assets/img/presentations/proposal.PNG" class="img-fluid" alt="">
</div> </div>
<div class="col-md-7 pt-4" data-aos="fade-left"> <div class="col-md-7 pt-4" data-aos="fade-left">
<h3>Voluptatem dignissimos provident quasi corporis voluptates sit assumenda.</h3> <h3>Proposal Presentation</h3>
<p class="font-italic"> <ul>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore <li><i class="icofont-check"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
magna aliqua. <li><i class="icofont-check"></i> Duis aute irure dolor in reprehenderit in voluptate velit.
</p> </li>
<ul> </ul>
<li><i class="icofont-check"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat.</li> </div>
<li><i class="icofont-check"></i> Duis aute irure dolor in reprehenderit in voluptate velit.</li> </div>
</ul>
</div>
</div>
<div class="row content"> <div class="row content">
<div class="col-md-5 order-1 order-md-2" data-aos="fade-left"> <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=""> <img src="assets/img/presentations/pp1.PNG" class="img-fluid" alt="">
</div> </div>
<div class="col-md-7 pt-5 order-2 order-md-1" data-aos="fade-right"> <div class="col-md-7 pt-5 order-2 order-md-1" data-aos="fade-right">
<h3>Corporis temporibus maiores provident</h3> <h3>Progress Presentation - I</h3>
<p class="font-italic"> </div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore </div>
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="row content">
<div class="col-md-5" data-aos="fade-right"> <div class="col-md-5" data-aos="fade-right">
<img src="assets/img/features-3.svg" class="img-fluid" alt=""> <img src="assets/img/presentations/pp2.PNG" class="img-fluid" alt="">
</div> </div>
<div class="col-md-7 pt-5" data-aos="fade-left"> <div class="col-md-7 pt-5" data-aos="fade-left">
<h3>Sunt consequatur ad ut est nulla consectetur reiciendis animi voluptas</h3> <h3>Progress Presentation - II</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>
<ul> <li><i class="icofont-check"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
<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><i class="icofont-check"></i> Duis aute irure dolor in reprehenderit in voluptate velit.</li> </li>
<li><i class="icofont-check"></i> Facilis ut et voluptatem aperiam. Autem soluta ad fugiat.</li> <li><i class="icofont-check"></i> Facilis ut et voluptatem aperiam. Autem soluta ad fugiat.</li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="row content"> <div class="row content">
<div class="col-md-5 order-1 order-md-2" data-aos="fade-left"> <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=""> <img src="assets/img/presentations/final_presentation.png" class="img-fluid" alt="">
</div> </div>
<div class="col-md-7 pt-5 order-2 order-md-1" data-aos="fade-right"> <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> <h3>Final Presentation</h3>
<p class="font-italic"> </div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore </div>
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> </div>
</section><!-- End Features Section --> </section><!-- End Features Section -->
<!-- ======= Presentation Section ======= --> <!-- ======= Presentation Section ======= -->
<!-- <section id="aboutUs" class="aboutUs section-bg">--> <!-- <section id="aboutUs" class="aboutUs section-bg">-->
<!-- <div class="container">--> <!-- <div class="container">-->
<!-- <div class="section-title">--> <!-- <div class="section-title">-->
<!-- <h2 data-aos="fade-in">Presentation</h2>--> <!-- <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>--> <!-- <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="row">--> <!-- <div class="row">-->
<!-- <div class="col-lg-12">--> <!-- <div class="col-lg-12">-->
<!-- <ul id="portfolio-flters">--> <!-- <ul id="portfolio-flters">-->
<!-- <li data-filter="*" class="filter-active">All</li>--> <!-- <li data-filter="*" class="filter-active">All</li>-->
<!-- <li data-filter=".filter-app">App</li>--> <!-- <li data-filter=".filter-app">App</li>-->
<!-- <li data-filter=".filter-card">Card</li>--> <!-- <li data-filter=".filter-card">Card</li>-->
<!-- <li data-filter=".filter-web">Web</li>--> <!-- <li data-filter=".filter-web">Web</li>-->
<!-- </ul>--> <!-- </ul>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="row portfolio-container" data-aos="fade-up">--> <!-- <div class="row portfolio-container" data-aos="fade-up">-->
<!-- <div class="col-lg-4 col-md-6 portfolio-item filter-app">--> <!-- <div class="col-lg-4 col-md-6 portfolio-item filter-app">-->
<!-- <div class="portfolio-wrap">--> <!-- <div class="portfolio-wrap">-->
<!-- <img src="assets/img/portfolio/portfolio-1.jpg" class="img-fluid" alt="">--> <!-- <img src="assets/img/portfolio/portfolio-1.jpg" class="img-fluid" alt="">-->
<!-- <div class="portfolio-links">--> <!-- <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="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>--> <!-- <a href="portfolio-details.html" title="More Details"><i class="icofont-link"></i></a>-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="portfolio-info">--> <!-- <div class="portfolio-info">-->
<!-- <h4>App 1</h4>--> <!-- <h4>App 1</h4>-->
<!-- <p>App</p>--> <!-- <p>App</p>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="col-lg-4 col-md-6 portfolio-item filter-web">--> <!-- <div class="col-lg-4 col-md-6 portfolio-item filter-web">-->
<!-- <div class="portfolio-wrap">--> <!-- <div class="portfolio-wrap">-->
<!-- <img src="assets/img/portfolio/portfolio-2.jpg" class="img-fluid" alt="">--> <!-- <img src="assets/img/portfolio/portfolio-2.jpg" class="img-fluid" alt="">-->
<!-- <div class="portfolio-links">--> <!-- <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="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>--> <!-- <a href="portfolio-details.html" title="More Details"><i class="icofont-link"></i></a>-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="portfolio-info">--> <!-- <div class="portfolio-info">-->
<!-- <h4>Web 3</h4>--> <!-- <h4>Web 3</h4>-->
<!-- <p>Web</p>--> <!-- <p>Web</p>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="col-lg-4 col-md-6 portfolio-item filter-app">--> <!-- <div class="col-lg-4 col-md-6 portfolio-item filter-app">-->
<!-- <div class="portfolio-wrap">--> <!-- <div class="portfolio-wrap">-->
<!-- <img src="assets/img/portfolio/portfolio-3.jpg" class="img-fluid" alt="">--> <!-- <img src="assets/img/portfolio/portfolio-3.jpg" class="img-fluid" alt="">-->
<!-- <div class="portfolio-links">--> <!-- <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="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>--> <!-- <a href="portfolio-details.html" title="More Details"><i class="icofont-link"></i></a>-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="portfolio-info">--> <!-- <div class="portfolio-info">-->
<!-- <h4>App 2</h4>--> <!-- <h4>App 2</h4>-->
<!-- <p>App</p>--> <!-- <p>App</p>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="col-lg-4 col-md-6 portfolio-item filter-card">--> <!-- <div class="col-lg-4 col-md-6 portfolio-item filter-card">-->
<!-- <div class="portfolio-wrap">--> <!-- <div class="portfolio-wrap">-->
<!-- <img src="assets/img/portfolio/portfolio-4.jpg" class="img-fluid" alt="">--> <!-- <img src="assets/img/portfolio/portfolio-4.jpg" class="img-fluid" alt="">-->
<!-- <div class="portfolio-links">--> <!-- <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="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>--> <!-- <a href="portfolio-details.html" title="More Details"><i class="icofont-link"></i></a>-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="portfolio-info">--> <!-- <div class="portfolio-info">-->
<!-- <h4>Card 2</h4>--> <!-- <h4>Card 2</h4>-->
<!-- <p>Card</p>--> <!-- <p>Card</p>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="col-lg-4 col-md-6 portfolio-item filter-web">--> <!-- <div class="col-lg-4 col-md-6 portfolio-item filter-web">-->
<!-- <div class="portfolio-wrap">--> <!-- <div class="portfolio-wrap">-->
<!-- <img src="assets/img/portfolio/portfolio-5.jpg" class="img-fluid" alt="">--> <!-- <img src="assets/img/portfolio/portfolio-5.jpg" class="img-fluid" alt="">-->
<!-- <div class="portfolio-links">--> <!-- <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="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>--> <!-- <a href="portfolio-details.html" title="More Details"><i class="icofont-link"></i></a>-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="portfolio-info">--> <!-- <div class="portfolio-info">-->
<!-- <h4>Web 2</h4>--> <!-- <h4>Web 2</h4>-->
<!-- <p>Web</p>--> <!-- <p>Web</p>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="col-lg-4 col-md-6 portfolio-item filter-app">--> <!-- <div class="col-lg-4 col-md-6 portfolio-item filter-app">-->
<!-- <div class="portfolio-wrap">--> <!-- <div class="portfolio-wrap">-->
<!-- <img src="assets/img/portfolio/portfolio-6.jpg" class="img-fluid" alt="">--> <!-- <img src="assets/img/portfolio/portfolio-6.jpg" class="img-fluid" alt="">-->
<!-- <div class="portfolio-links">--> <!-- <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="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>--> <!-- <a href="portfolio-details.html" title="More Details"><i class="icofont-link"></i></a>-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="portfolio-info">--> <!-- <div class="portfolio-info">-->
<!-- <h4>App 3</h4>--> <!-- <h4>App 3</h4>-->
<!-- <p>App</p>--> <!-- <p>App</p>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="col-lg-4 col-md-6 portfolio-item filter-card">--> <!-- <div class="col-lg-4 col-md-6 portfolio-item filter-card">-->
<!-- <div class="portfolio-wrap">--> <!-- <div class="portfolio-wrap">-->
<!-- <img src="assets/img/portfolio/portfolio-7.jpg" class="img-fluid" alt="">--> <!-- <img src="assets/img/portfolio/portfolio-7.jpg" class="img-fluid" alt="">-->
<!-- <div class="portfolio-links">--> <!-- <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="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>--> <!-- <a href="portfolio-details.html" title="More Details"><i class="icofont-link"></i></a>-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="portfolio-info">--> <!-- <div class="portfolio-info">-->
<!-- <h4>Card 1</h4>--> <!-- <h4>Card 1</h4>-->
<!-- <p>Card</p>--> <!-- <p>Card</p>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="col-lg-4 col-md-6 portfolio-item filter-card">--> <!-- <div class="col-lg-4 col-md-6 portfolio-item filter-card">-->
<!-- <div class="portfolio-wrap">--> <!-- <div class="portfolio-wrap">-->
<!-- <img src="assets/img/portfolio/portfolio-8.jpg" class="img-fluid" alt="">--> <!-- <img src="assets/img/portfolio/portfolio-8.jpg" class="img-fluid" alt="">-->
<!-- <div class="portfolio-links">--> <!-- <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="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>--> <!-- <a href="portfolio-details.html" title="More Details"><i class="icofont-link"></i></a>-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="portfolio-info">--> <!-- <div class="portfolio-info">-->
<!-- <h4>Card 3</h4>--> <!-- <h4>Card 3</h4>-->
<!-- <p>Card</p>--> <!-- <p>Card</p>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="col-lg-4 col-md-6 portfolio-item filter-web">--> <!-- <div class="col-lg-4 col-md-6 portfolio-item filter-web">-->
<!-- <div class="portfolio-wrap">--> <!-- <div class="portfolio-wrap">-->
<!-- <img src="assets/img/portfolio/portfolio-9.jpg" class="img-fluid" alt="">--> <!-- <img src="assets/img/portfolio/portfolio-9.jpg" class="img-fluid" alt="">-->
<!-- <div class="portfolio-links">--> <!-- <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="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>--> <!-- <a href="portfolio-details.html" title="More Details"><i class="icofont-link"></i></a>-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="portfolio-info">--> <!-- <div class="portfolio-info">-->
<!-- <h4>Web 3</h4>--> <!-- <h4>Web 3</h4>-->
<!-- <p>Web</p>--> <!-- <p>Web</p>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- </section>--> <!-- </section>-->
<!-- End Portfolio Section --> <!-- End Portfolio Section -->
<!-- ======= About Us Section ======= --> <!-- ======= About Us Section ======= -->
<section id="team" class="team section-bg"> <section id="team" class="team section-bg">
<div class="container"> <div class="container">
<div class="section-title"> <div class="section-title">
<h2 data-aos="fade-in">About Us</h2> <h2 data-aos="fade-in">About Us</h2>
</div> </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="col-xl-3 col-lg-4 col-md-6">
<div class="row"> <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="col-xl-3 col-lg-4 col-md-6">
</div> <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>
<div class="col-xl-3 col-lg-4 col-md-6"> <!-- End of About Us - Supervisors-->
</div>
</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"> <div class="row">
<h4 data-aos="fade-in">Group Members</h4> <div class="col-xl-3 col-lg-4 col-md-6">
</div> <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="col-xl-3 col-lg-4 col-md-6"> <div class="member" data-aos="fade-up" data-aos-delay="200">
<div class="member" data-aos="fade-up"> <div class="pic"><img src="assets/img/about_us/sachith.jpg" alt=""></div>
<div class="pic"><img src="assets/img/about_us/Ishan.jpg" alt=""></div> <h4>Sachith Fernando</h4>
<h4>Ishan Seneviratne</h4> <span>Member</span>
<span>Group Leader</span> <div class="social">
<div class="social"> <a href=""><i class="icofont-twitter"></i></a>
<a href=""><i class="icofont-twitter"></i></a> <a href=""><i class="icofont-facebook"></i></a>
<a href=""><i class="icofont-facebook"></i></a> <a href=""><i class="icofont-instagram"></i></a>
<a href=""><i class="icofont-instagram"></i></a> <a href=""><i class="icofont-linkedin"></i></a>
<a href=""><i class="icofont-linkedin"></i></a> </div>
</div> </div>
</div> </div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="col-xl-3 col-lg-4 col-md-6"> <div class="member" data-aos="fade-up" data-aos-delay="300">
<div class="member" data-aos="fade-up" data-aos-delay="100"> <div class="pic"><img src="assets/img/about_us/linisha.jpg" alt=""></div>
<div class="pic"><img src="assets/img/about_us/sohan.PNG" alt=""></div> <h4>Linisha Siriwardana</h4>
<h4>Sohan Perera</h4> <span>Member</span>
<span>Member</span> <div class="social">
<div class="social"> <a href=""><i class="icofont-twitter"></i></a>
<a href=""><i class="icofont-twitter"></i></a> <a href=""><i class="icofont-facebook"></i></a>
<a href=""><i class="icofont-facebook"></i></a> <a href=""><i class="icofont-instagram"></i></a>
<a href=""><i class="icofont-instagram"></i></a> <a href=""><i class="icofont-linkedin"></i></a>
<a href=""><i class="icofont-linkedin"></i></a> </div>
</div> </div>
</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> </div>
</div> <!--End of About Us - Group members-->
</div>
<!--End of About Us - Group members-->
</div> </div>
</section><!-- End Team Section --> </section><!-- End Team Section -->
<!-- ======= Pricing Section ======= --> <!-- ======= Pricing Section ======= -->
<section id="pricing" class="pricing section-bg"> <section id="pricing" class="pricing section-bg">
<div class="container"> <div class="container">
<div class="section-title"> <div class="section-title">
<h2 data-aos="fade-in">Pricing</h2> <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> <p data-aos="fade-in">Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga
</div> 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"> <div class="col-lg-4 box featured" data-aos="zoom-in">
<h3>Free</h3> <span class="featured-badge">Featured</span>
<h4>$0<span>per month</span></h4> <h3>Business</h3>
<ul> <h4>$29<span>per month</span></h4>
<li><i class="bx bx-check"></i> Quam adipiscing vitae proin</li> <ul>
<li><i class="bx bx-check"></i> Nec feugiat nisl pretium</li> <li><i class="bx bx-check"></i> Quam adipiscing vitae proin</li>
<li><i class="bx bx-check"></i> Nulla at volutpat diam uteera</li> <li><i class="bx bx-check"></i> Nec feugiat nisl pretium</li>
<li class="na"><i class="bx bx-x"></i> <span>Pharetra massa massa ultricies</span></li> <li><i class="bx bx-check"></i> Nulla at volutpat diam uteera</li>
<li class="na"><i class="bx bx-x"></i> <span>Massa ultricies mi quis hendrerit</span></li> <li><i class="bx bx-check"></i> Pharetra massa massa ultricies</li>
</ul> <li><i class="bx bx-check"></i> Massa ultricies mi quis hendrerit</li>
<a href="#" class="get-started-btn">Get Started</a> </ul>
</div> <a href="#" class="get-started-btn">Get Started</a>
</div>
<div class="col-lg-4 box featured" data-aos="zoom-in"> <div class="col-lg-4 box" data-aos="zoom-in">
<span class="featured-badge">Featured</span> <h3>Developer</h3>
<h3>Business</h3> <h4>$49<span>per month</span></h4>
<h4>$29<span>per month</span></h4> <ul>
<ul> <li><i class="bx bx-check"></i> Quam adipiscing vitae proin</li>
<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> 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> 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> Pharetra massa massa ultricies</li> <li><i class="bx bx-check"></i> Massa ultricies mi quis hendrerit</li>
<li><i class="bx bx-check"></i> Massa ultricies mi quis hendrerit</li> </ul>
</ul> <a href="#" class="get-started-btn">Get Started</a>
<a href="#" class="get-started-btn">Get Started</a> </div>
</div>
<div class="col-lg-4 box" data-aos="zoom-in"> </div>
<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 --> </section><!-- End Pricing Section -->
<!-- ======= Frequently Asked Questions Section ======= --> <!-- ======= Frequently Asked Questions Section ======= -->
<section id="faq" class="faq section-bg"> <section id="faq" class="faq section-bg">
<div class="container"> <div class="container">
<div class="section-title"> <div class="section-title">
<h2 data-aos="fade-in">Frequently Asked Questions</h2> <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> <p data-aos="fade-in">Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga
</div> 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="row faq-item d-flex align-items-stretch" data-aos="fade-up">
<div class="col-lg-5"> <div class="col-lg-5">
<i class="bx bx-help-circle"></i> <i class="bx bx-help-circle"></i>
<h4>Non consectetur a erat nam at lectus urna duis?</h4> <h4>Non consectetur a erat nam at lectus urna duis?</h4>
</div> </div>
<div class="col-lg-7"> <div class="col-lg-7">
<p> <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. Feugiat pretium nibh ipsum consequat. Tempus iaculis urna id volutpat lacus laoreet non
</p> curabitur gravida. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus non.
</div> </p>
</div><!-- End F.A.Q Item--> </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"> <div class="row faq-item d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="100">
<i class="bx bx-help-circle"></i> <div class="col-lg-5">
<h4>Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque?</h4> <i class="bx bx-help-circle"></i>
</div> <h4>Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque?</h4>
<div class="col-lg-7"> </div>
<p> <div class="col-lg-7">
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>
</p> Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Id interdum velit
</div> laoreet id donec ultrices. Fringilla phasellus faucibus scelerisque eleifend donec pretium. Est
</div><!-- End F.A.Q Item--> pellentesque elit ullamcorper dignissim.
</p>
<div class="row faq-item d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="200"> </div>
<div class="col-lg-5"> </div><!-- End F.A.Q Item-->
<i class="bx bx-help-circle"></i>
<h4>Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi?</h4> <div class="row faq-item d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="200">
</div> <div class="col-lg-5">
<div class="col-lg-7"> <i class="bx bx-help-circle"></i>
<p> <h4>Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi?</h4>
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. </div>
</p> <div class="col-lg-7">
</div> <p>
</div><!-- End F.A.Q Item--> 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
<div class="row faq-item d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="300"> pellentesque eu tincidunt. Lectus urna duis convallis convallis tellus.
<div class="col-lg-5"> </p>
<i class="bx bx-help-circle"></i> </div>
<h4>Ac odio tempor orci dapibus. Aliquam eleifend mi in nulla?</h4> </div><!-- End F.A.Q Item-->
</div>
<div class="col-lg-7"> <div class="row faq-item d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="300">
<p> <div class="col-lg-5">
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. <i class="bx bx-help-circle"></i>
</p> <h4>Ac odio tempor orci dapibus. Aliquam eleifend mi in nulla?</h4>
</div> </div>
</div><!-- End F.A.Q Item--> <div class="col-lg-7">
<p>
<div class="row faq-item d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="400"> Aperiam itaque sit optio et deleniti eos nihil quidem cumque. Voluptas dolorum accusantium sunt
<div class="col-lg-5"> sit enim. Provident consequuntur quam aut reiciendis qui rerum dolorem sit odio. Repellat
<i class="bx bx-help-circle"></i> assumenda soluta sunt pariatur error doloribus fuga.
<h4>Tempus quam pellentesque nec nam aliquam sem et tortor consequat?</h4> </p>
</div> </div>
<div class="col-lg-7"> </div><!-- End F.A.Q Item-->
<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 <div class="row faq-item d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="400">
</p> <div class="col-lg-5">
</div> <i class="bx bx-help-circle"></i>
</div><!-- End F.A.Q Item--> <h4>Tempus quam pellentesque nec nam aliquam sem et tortor consequat?</h4>
</div>
</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 --> </section><!-- End Frequently Asked Questions Section -->
<!-- ======= Contact Section ======= --> <!-- ======= Contact Section ======= -->
<section id="contact" class="contact section-bg"> <section id="contact" class="contact section-bg">
<div class="container"> <div class="container">
<div class="section-title"> <div class="section-title">
<h2 data-aos="fade-in">Contact</h2> <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> <p data-aos="fade-in">Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga
</div> 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-lg-6">
<div class="col-md-12"> <form action="forms/contact.php" method="post" role="form" class="php-email-form"
<div class="info-box" data-aos="fade-up"> data-aos="fade-up">
<i class="bx bx-map"></i> <div class="form-row">
<h3>Our Address</h3> <div class="col-md-6 form-group">
<p>A108 Adam Street, New York, NY 535022</p> <input type="text" name="name" class="form-control" id="name" placeholder="Your Name"
</div> data-rule="minlen:4" data-msg="Please enter at least 4 chars"/>
</div> <div class="validate"></div>
<div class="col-md-6"> </div>
<div class="info-box mt-4" data-aos="fade-up" data-aos-delay="100"> <div class="col-md-6 form-group">
<i class="bx bx-envelope"></i> <input type="email" class="form-control" name="email" id="email"
<h3>Email Us</h3> placeholder="Your Email" data-rule="email"
<p>info@example.com<br>contact@example.com</p> data-msg="Please enter a valid email"/>
</div> <div class="validate"></div>
</div> </div>
<div class="col-md-6"> </div>
<div class="info-box mt-4" data-aos="fade-up" data-aos-delay="100"> <div class="form-group">
<i class="bx bx-phone-call"></i> <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject"
<h3>Call Us</h3> data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject"/>
<p>+1 5589 55488 55<br>+1 6678 254445 41</p> <div class="validate"></div>
</div> </div>
</div> <div class="form-group">
</div> <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 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 --> </section><!-- End Contact Section -->
</main><!-- End #main --> </main><!-- End #main -->
<!-- ======= Footer ======= --> <!-- ======= Footer ======= -->
<footer id="footer"> <footer id="footer">
<div class="footer-top"> <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="row justify-content-center">
<div class="col-lg-6"> <div class="col-lg-6">
<h3>Bocor</h3> <h3>Bocor</h3>
<p>Et aut eum quis fuga eos sunt ipsa nihil. Labore corporis magni eligendi fuga maxime saepe commodi placeat.</p> <p>Et aut eum quis fuga eos sunt ipsa nihil. Labore corporis magni eligendi fuga maxime saepe
</div> commodi placeat.</p>
</div> </div>
</div>
<div class="row footer-newsletter justify-content-center"> <div class="row footer-newsletter justify-content-center">
<div class="col-lg-6"> <div class="col-lg-6">
<form action="" method="post"> <form action="" method="post">
<input type="email" name="email" placeholder="Enter your Email"><input type="submit" value="Subscribe"> <input type="email" name="email" placeholder="Enter your Email"><input type="submit"
</form> value="Subscribe">
</div> </form>
</div> </div>
</div>
<div class="social-links"> <div class="social-links">
<a href="#" class="twitter"><i class="bx bxl-twitter"></i></a> <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="facebook"><i class="bx bxl-facebook"></i></a>
<a href="#" class="instagram"><i class="bx bxl-instagram"></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="google-plus"><i class="bx bxl-skype"></i></a>
<a href="#" class="linkedin"><i class="bx bxl-linkedin"></i></a> <a href="#" class="linkedin"><i class="bx bxl-linkedin"></i></a>
</div> </div>
</div> </div>
</div> </div>
<div class="container footer-bottom clearfix"> <div class="container footer-bottom clearfix">
<div class="copyright"> <div class="copyright">
&copy; Copyright <strong><span>Bocor</span></strong>. All Rights Reserved &copy; Copyright <strong><span>Bocor</span></strong>. All Rights Reserved
</div> </div>
<div class="credits"> <div class="credits">
<!-- All the links in the footer should remain intact. --> <!-- All the links in the footer should remain intact. -->
<!-- You can delete the links only if you purchased the pro version. --> <!-- You can delete the links only if you purchased the pro version. -->
<!-- Licensing information: https://bootstrapmade.com/license/ --> <!-- Licensing information: https://bootstrapmade.com/license/ -->
<!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/bocor-bootstrap-template-nice-animation/ --> <!-- 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> Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
</div> </div>
</div> </div>
</footer><!-- End Footer --> </footer><!-- End Footer -->
<a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a> <a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>
<!-- Vendor JS Files --> <!-- Vendor JS Files -->
<script src="assets/vendor/jquery/jquery.min.js"></script> <script src="assets/vendor/jquery/jquery.min.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.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/jquery.easing/jquery.easing.min.js"></script>
<script src="assets/vendor/php-email-form/validate.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/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/owl.carousel/owl.carousel.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/venobox/venobox.min.js"></script>
<script src="assets/vendor/aos/aos.js"></script> <script src="assets/vendor/aos/aos.js"></script>
<!-- Template Main JS File --> <!-- Template Main JS File -->
<script src="assets/js/main.js"></script> <script src="assets/js/main.js"></script>
</body> </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