"Clgnews"
Bootstrap 4.1.1 Snippet by vijay18399

Post to Facebook Tweet this

<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> <!-- 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>

Related: See More

Paper Kit 2 PRO Angular

Questions / Comments: