<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Responsive Style -->
<link rel="stylesheet" type="text/css" href="assets/css/responsive.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
.carousel-inner img {
width: 100%;
height: 100%;
}
a { text-decoration: none; color: #62686c; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }
a:focus, a:hover { text-decoration: none; color: #f67800; }
.content{padding-top:80px; padding-bottom:80px;}
.mb40{margin-bottom:40px;}
.team-block { margin-bottom: 20px; }
.team-content { position: absolute; background-color: rgba(17, 24, 31, 0.8); bottom: 0px; display: inline-block; width: 100%; color: #fff; padding: 5px; }
.team-img { position: relative; }
.team-img img { width: 100%; }
.team-title { }
.team-meta { color: #9da4aa; font-weight: 400; font-size: 16px; }
.overlay { border-radius: 0px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: 1s ease; background-color: #11181f; }
.team-img:hover .overlay { opacity: .8; }
.team-img:hover .team-content { opacity: 0; }
.text { color: #fff; position: absolute; top: 30%; left: 30%; transform: translate(-26%, -26%); -ms-transform: translate(-26%, -26%); right: 0; font-weight: 400; font-size: 16px; }
</style>
</head>
<body>
<!-- Header Area wrapper End -->
<div class="container-fluid">
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.w3schools.com/bootstrap4/la.jpg" alt="Los Angeles" width="1100" height="500">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap4/chicago.jpg" alt="Chicago" width="1100" height="500">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="New York" width="1100" height="500">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<div id='trainings'>
<h3 class="mt-3 pb-3 mb-4 font-italic border-bottom">
Workshops
</h3>
<div class="row">
<div class="col-md-6">
<div class="card border-primary flex-md-row mb-4 shadow-sm h-md-250">
<div class="card-body d-flex flex-column align-items-start">
<strong class="d-inline-block mb-2 text-primary">Mean Stack</strong>
<h6 class="mb-0">
<a class="text-dark" href="#">Conducted By T-HUB</a>
</h6>
<div class="mb-1 text-muted small"> Published on Nov 12</div>
<li class='text-muted small'>Date : 25-Nov-2018</li>
<li class='text-muted small' >Price : 1000/-</li>
<li class='text-muted small'>Instructor : Mr.Sandeep</li>
<li class='text-muted small'>What You Get : T-Shirt, Certificate</li>
<br>
<button type="button" class="btn btn btn-primary btn-sm " data-toggle="modal" data-target="#myModal">
Continue reading
</button>
</div>
<img class="card-img-right flex-auto d-none d-lg-block" alt="Thumbnail [200x250]" src="https://placeimg.com/250/250/arch" style="width: 200px; height: 250px;">
</div>
</div>
<div class="col-md-6">
<div class="card border-primary flex-md-row mb-4 shadow-sm h-md-250">
<div class="card-body d-flex flex-column align-items-start">
<strong class="d-inline-block mb-2 text-primary">Mean Stack</strong>
<h6 class="mb-0">
<a class="text-dark" href="#">Conducted By T-HUB</a>
</h6>
<div class="mb-1 text-muted small"> Published on Nov 12</div>
<li class='text-muted small'>Date : 25-Nov-2018</li>
<li class='text-muted small' >Price : 1000/-</li>
<li class='text-muted small'>Instructor : Mr.Sandeep</li>
<li class='text-muted small'>What You Get : T-Shirt, Certificate</li>
<br>
<button type="button" class="btn btn-outline-primary btn-sm " data-toggle="modal" data-target="#myModal">
Continue reading
</button>
</div>
<img class="card-img-right flex-auto d-none d-lg-block" alt="Thumbnail [200x250]" src="https://placeimg.com/250/250/arch" style="width: 200px; height: 250px;">
</div>
</div>
<div class="col-md-6">
<div class="card border-primary flex-md-row mb-4 shadow-sm h-md-250">
<div class="card-body d-flex flex-column align-items-start">
<strong class="d-inline-block mb-2 text-primary">Mean Stack</strong>
<h6 class="mb-0">
<a class="text-dark" href="#">Conducted By T-HUB</a>
</h6>
<div class="mb-1 text-muted small"> Published on Nov 12</div>
<li class='text-muted small'>Date : 25-Nov-2018</li>
<li class='text-muted small' >Price : 1000/-</li>
<li class='text-muted small'>Instructor : Mr.Sandeep</li>
<li class='text-muted small'>What You Get : T-Shirt, Certificate</li>
<br>
<button type="button" class="btn btn-outline-primary btn-sm " data-toggle="modal" data-target="#myModal">
Continue reading
</button>
</div>
<img class="card-img-right flex-auto d-none d-lg-block" alt="Thumbnail [200x250]" src="https://placeimg.com/250/250/arch" style="width: 200px; height: 250px;">
</div>
</div>
<div class="col-md-6">
<div class="card border-primary flex-md-row mb-4 shadow-sm h-md-250">
<div class="card-body d-flex flex-column align-items-start">
<strong class="d-inline-block mb-2 text-primary">Mean Stack</strong>
<h6 class="mb-0">
<a class="text-dark" href="#">Conducted By T-HUB</a>
</h6>
<div class="mb-1 text-muted small"> Published on Nov 12</div>
<li class='text-muted small'>Date : 25-Nov-2018</li>
<li class='text-muted small' >Price : 1000/-</li>
<li class='text-muted small'>Instructor : Mr.Sandeep</li>
<li class='text-muted small'>What You Get : T-Shirt, Certificate</li>
<br>
<button type="button" class="btn btn-outline-primary btn-sm " data-toggle="modal" data-target="#myModal">
Continue reading
</button>
</div>
<img class="card-img-right flex-auto d-none d-lg-block" alt="Thumbnail [200x250]" src="https://placeimg.com/250/250/arch" style="width: 200px; height: 250px;">
</div>
</div>
<div class="col-md-6">
<div class="card border-primary flex-md-row mb-4 shadow-sm h-md-250">
<div class="card-body d-flex flex-column align-items-start">
<strong class="d-inline-block mb-2 text-primary">Mean Stack</strong>
<h6 class="mb-0">
<a class="text-dark" href="#">Conducted By T-HUB</a>
</h6>
<div class="mb-1 text-muted small"> Published on Nov 12</div>
<li class='text-muted small'>Date : 25-Nov-2018</li>
<li class='text-muted small' >Price : 1000/-</li>
<li class='text-muted small'>Instructor : Mr.Sandeep</li>
<li class='text-muted small'>What You Get : T-Shirt, Certificate</li>
<br>
<button type="button" class="btn btn-outline-primary btn-sm " data-toggle="modal" data-target="#myModal">
Continue reading
</button>
</div>
<img class="card-img-right flex-auto d-none d-lg-block" alt="Thumbnail [200x250]" src="https://placeimg.com/250/250/arch" style="width: 200px; height: 250px;">
</div>
</div>
</div>
<h3 class="mt-3 pb-3 mb-4 font-italic border-bottom">
Trainings
</h3>
<div class="row">
<div class="col-md-4">
<div class="card mb-4">
<img class="card-img-top" src="https://placeimg.com/290/180/any" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Mean Stack</h5>
<div class="mb-1 text-muted small"> Published on Nov 12</div>
<li class='text-muted small'>Date : 25-Nov-2018</li>
<li class='text-muted small' >Price : 1000/-</li>
<li class='text-muted small'>Instructor : Mr.Sandeep</li>
<li class='text-muted small'>What You Get : T-Shirt, Certificate</li>
<br>
<button type="button" class="btn btn-outline-primary btn-sm " data-toggle="modal" data-target="#myModal">
Continue reading
</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4">
<img class="card-img-top" src="https://placeimg.com/290/180/any" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Mean Stack</h5>
<div class="mb-1 text-muted small"> Published on Nov 12</div>
<li class='text-muted small'>Date : 25-Nov-2018</li>
<li class='text-muted small' >Price : 1000/-</li>
<li class='text-muted small'>Instructor : Mr.Sandeep</li>
<li class='text-muted small'>What You Get : T-Shirt, Certificate</li>
<br>
<button type="button" class="btn btn-outline-primary btn-sm " data-toggle="modal" data-target="#myModal">
Continue reading
</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4">
<img class="card-img-top" src="https://placeimg.com/290/180/any" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Mean Stack</h5>
<div class="mb-1 text-muted small"> Published on Nov 12</div>
<li class='text-muted small'>Date : 25-Nov-2018</li>
<li class='text-muted small' >Price : 1000/-</li>
<li class='text-muted small'>Instructor : Mr.Sandeep</li>
<li class='text-muted small'>What You Get : T-Shirt, Certificate</li>
<br>
<button type="button" class="btn btn-outline-primary btn-sm " data-toggle="modal" data-target="#myModal">
Continue reading
</button>
</div>
</div>
</div>
</div>
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 mb40 text-center">
<h1>Placed Candidates Of Last Month</h1>
</div>
</div>
<div class="row">
<div class="col-xl-2 col-lg-2 col-md-3 col-sm-12 col-12">
<!-- team-img -->
<div class="team-block">
<div class="team-img">
<img src="https://easetemplate.com/free-website-templates/motion/images/team_member_1.jpg" alt="">
<div class="team-content">
<h4 class="text-white mb0">Eliza Simon</h4>
<p class="team-meta">- Roll Number</p>
</div>
<div class="overlay">
<div class="text">
<h4 class="mb0 text-white">Eliza Simon</h4>
<p class="mb30 team-meta">- Roll Number</p>
<p>I am Very Happy To par In Aditya Family</p>
</div>
</div>
</div>
</div>
</div>
<!-- /.team-img -->
<div class="col-xl-2 col-lg-2 col-md-3 col-sm-12 col-12">
<!-- team-img -->
<div class="team-block">
<div class="team-img">
<img src="https://easetemplate.com/free-website-templates/motion/images/team_member_2.jpg" alt="">
<div class="team-content">
<h4 class="text-white mb0">Eliza Simon</h4>
<p class="team-meta">- Roll Number</p>
</div>
<div class="overlay">
<div class="text">
<h4 class="mb0 text-white">Eliza Simon</h4>
<p class="mb30 team-meta">- Roll Number</p>
<p>I am Very Happy To par In Aditya Family</p>
</div>
</div>
</div>
</div>
</div>
<!-- /.team-img -->
<div class="col-xl-2 col-lg-2 col-md-3 col-sm-12 col-12">
<!-- team-img -->
<div class="team-block">
<div class="team-img">
<img src="https://easetemplate.com/free-website-templates/motion/images/team_member_3.jpg" alt="" class="img-fluid">
<div class="team-content">
<h4 class="text-white mb0">Eliza Simon</h4>
<p class="team-meta">- Roll Number</p>
</div>
<div class="overlay">
<div class="text">
<h4 class="mb0 text-white">Eliza Simon</h4>
<p class="mb30 team-meta">- Roll Number</p>
<p>I am Very Happy To par In Aditya Family</p>
</div>
</div>
</div>
</div>
</div>
<!-- /.team-img -->
<div class="col-xl-2 col-lg-2 col-md-3 col-sm-12 col-12">
<!-- team-img -->
<div class="team-block">
<div class="team-img">
<img src="https://easetemplate.com/free-website-templates/motion/images/team_member_4.jpg" alt="" class="img-fluid">
<div class="team-content">
<h4 class="text-white mb0">Eliza Simon</h4>
<p class="team-meta">- Roll Number</p>
</div>
<div class="overlay">
<div class="text">
<h4 class="mb0 text-white">Eliza Simon</h4>
<p class="mb30 team-meta">- Roll Number</p>
<p>I am Very Happy To par In Aditya Family</p>
</div>
</div>
</div>
</div>
</div>
<!-- /.team-img -->
<div class="col-xl-2 col-lg-2 col-md-3 col-sm-12 col-12">
<!-- team-img -->
<div class="team-block">
<div class="team-img">
<img src="https://easetemplate.com/free-website-templates/motion/images/team_member_5.jpg" alt="" class="img-fluid">
<div class="team-content">
<h4 class="text-white mb0">Eliza Simon</h4>
<p class="team-meta">- Roll Number</p>
</div>
<div class="overlay">
<div class="text">
<h4 class="mb0 text-white">Eliza Simon</h4>
<p class="mb30 team-meta">- Roll Number</p>
<p>I am Very Happy To par In Aditya Family</p>
</div>
</div>
</div>
</div>
</div>
<!-- /.team-img -->
<div class="col-xl-2 col-lg-2 col-md-3 col-sm-12 col-12">
<!-- team-img -->
<div class="team-block">
<div class="team-img">
<img src="https://easetemplate.com/free-website-templates/motion/images/team_member_6.jpg" alt="" class="img-fluid">
<div class="team-content">
<h4 class="text-white mb0">Eliza Simon</h4>
<p class="team-meta">- Roll Number</p>
</div>
<div class="overlay">
<div class="text">
<h4 class="mb0 text-white">Eliza Simon</h4>
<p class="mb30 team-meta">- Roll Number</p>
<p>I am Very Happy To par In Aditya Family</p>
</div>
</div>
</div>
</div>
</div>
<!-- /.team-img -->
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 ">
<h4>Latest News</h4>
<ul class="timeline">
<li>
<a target="_blank" href="https://www.totoprayogo.com/#">New Web Design</a>
<a href="#" class="float-right">21 March, 2014</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non nisi semper, et elementum lorem ornare. Maecenas placerat facilisis mollis. Duis sagittis ligula in sodales vehicula....</p>
</li>
<li>
<a href="#">21 000 Job Seekers</a>
<a href="#" class="float-right">4 March, 2014</a>
<p>Curabitur purus sem, malesuada eu luctus eget, suscipit sed turpis. Nam pellentesque felis vitae justo accumsan, sed semper nisi sollicitudin...</p>
</li>
<li>
<a href="#">Awesome Employers</a>
<a href="#" class="float-right">1 April, 2014</a>
<p>Fusce ullamcorper ligula sit amet quam accumsan aliquet. Sed nulla odio, tincidunt vitae nunc vitae, mollis pharetra velit. Sed nec tempor nibh...</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<center>
<h4 class="modal-title">Workshop Details</h4>
</center>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<article>
<center>
<h3 class="d-inline-block mb-2 text-primary">Mean Stack</h3>
</center>
<!-- <p class="price-detail-wrap">
<span class="price h3 text-warning">
<span>Price :</span> <span class="currency">RS</span><span class="num">1000</span>
</span>
</p>price-detail-wrap .// -->
<dl class="item-property">
<dt> Description</dt>
<dd>
<blockquote>
<p class='small'>MEAN is a free and open-source JavaScript software stack for building dynamic web sites and web applications. The MEAN stack is MongoDB, Express.js, AngularJS, and Node.js.</p>
</blockquote>
</dd>
<div class='row'>
<div class='col-6'>
<dt>Price</dt>
<dd class='small'>1200</dd>
<!-- item-property-hor .// -->
<dt>What You get:</dt>
<dd class='small'>T-Shirt ,Certficate</dd>
<!-- item-property-hor .// -->
<dt>Date</dt>
<dd class='small'>12-NOV-2018</dd>
<dt>Venue</dt>
<dd class='small'>College :AEC</dd>
<dd class='small'>FLOOR :1</dd>
<dd class='small'>ROOM NO: 121</dd>
<dd class='small'>LAB : 1</dd>
<!-- item-property-hor .// -->
</div>
<div class="col-6">
<dt>Conducted By</dt>
<dd class='small'>T-HUB</dd>
<!-- item-property-hor .// -->
<dt>Instructor:</dt>
<dd class='small'>Mr.Sandeep</dd>
<!-- item-property-hor .// -->
<dt>Published On</dt>
<dd class='small'> 12-NOV-2018</dd>
<dt>prerequisite</dt>
<dd class='small'>HTML</dd>
<dd class='small'>CSS</dd>
<dd class='small'>JAVASCRIPT</dd>
<dd class='small'>JQUERY</dd>
</div>
</div>
</dl></article></div></div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-outline-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
ul.timeline {
list-style-type: none;
position: relative;
}
ul.timeline:before {
content: ' ';
background: #d4d9df;
display: inline-block;
position: absolute;
left: 29px;
width: 2px;
height: 100%;
z-index: 400;
}
ul.timeline > li {
margin: 20px 0;
padding-left: 20px;
}
ul.timeline > li:before {
content: ' ';
background: white;
display: inline-block;
position: absolute;
border-radius: 50%;
border: 3px solid #22c0e8;
left: 20px;
width: 20px;
height: 20px;
z-index: 400;
}
a:link, a:visited {
text-decoration: none;
}
