Scribd
Upload
74 views44 pages

CALENDAR

The document contains information about calendars and fullcalendar jQuery plugin. It includes code snippets and links for different calendar implementations as well as code for a fullcalendar demo. The calendar demo code is commented and outputs a calendar to display events.

Uploaded by

Comunicaciones Grupoincap
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
74 views44 pages

CALENDAR

The document contains information about calendars and fullcalendar jQuery plugin. It includes code snippets and links for different calendar implementations as well as code for a fullcalendar demo. The calendar demo code is commented and outputs a calendar to display events.

Uploaded by

Comunicaciones Grupoincap
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 44

CALENDAR

https://codepen.io/ovdojoey/pen/GqRxYQ

https://codepen.io/davidkpiano/pen/xwyVXO

https://codepen.io/Antreas/pen/gmoJGE

https://codepen.io/bbarry/pen/Eopdk

https://codepen.io/peanav/pen/ulkof

https://codepen.io/gabrielcolombo/pen/LGzNwq

https://codepen.io/short/pen/qNNVKY

https://codepen.io/nizarmah/pen/LkjjWV

https://bootsnipp.com/snippets/3qKZV

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Fullcalendar jQuery Demo</title>

<meta name="description" content="Fullcalendar ejemplo..." />

<meta name="author" content="Jose Aguilar">

<link rel="apple-touch-icon" sizes="57x57" href="favicon/apple-icon-57x57.png">

<link rel="apple-touch-icon" sizes="60x60" href="favicon/apple-icon-60x60.png">

<link rel="apple-touch-icon" sizes="72x72" href="favicon/apple-icon-72x72.png">

<link rel="apple-touch-icon" sizes="76x76" href="favicon/apple-icon-76x76.png">

<link rel="apple-touch-icon" sizes="114x114" href="favicon/apple-icon-114x114.png">


<link rel="apple-touch-icon" sizes="120x120" href="favicon/apple-icon-120x120.png">

<link rel="apple-touch-icon" sizes="144x144" href="favicon/apple-icon-144x144.png">

<link rel="apple-touch-icon" sizes="152x152" href="favicon/apple-icon-152x152.png">

<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-icon-180x180.png">

<link rel="icon" type="image/png" sizes="192x192" href="favicon/android-icon-192x192.png">

<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">

<link rel="icon" type="image/png" sizes="96x96" href="favicon/favicon-96x96.png">

<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">

<link rel="manifest" href="favicon/manifest.json">

<meta name="msapplication-TileColor" content="#ffffff">

<meta name="msapplication-TileImage" content="favicon/ms-icon-144x144.png">

<meta name="theme-color" content="#ffffff">

<!-- Stylesheet -->

<link rel="stylesheet" href="style.css">

<link href="https://fonts.googleapis.com/css?family=Barlow&display=swap" rel="stylesheet">

<link rel="stylesheet" href="asset/css/bootstrap.css">

<link rel="stylesheet" href="asset/css/animate.css">

<link rel="stylesheet" href="asset/css/owl.carousel.min.css">

<link rel="stylesheet" href="asset/css/bootstrap-datepicker.css">

<link rel="stylesheet" href="asset/css/jquery.timepicker.css">

<link rel="stylesheet" href="asset/css/style.css">

<link rel="stylesheet" href="asset/css/fonts/ionicons/css/ionicons.min.css">

<link rel="stylesheet" href="asset/css/fonts/fontawesome/css/font-awesome.min.css">

<link rel="stylesheet" href="asset/css/fonts/flaticon/font/flaticon.css">

<link rel="stylesheet" type="text/css" href="css/default.css" />

<link rel="stylesheet" type="text/css" href="css/component.css" />


<link href="css/demo-page.css" rel="stylesheet" media="all">

<link href="css/hover.css" rel="stylesheet" media="all">

<link href="css/ihover.css" rel="stylesheet">

<!-- Latest compiled and minified CSS -->

<link rel='stylesheet' type='text/css' href='css/fullcalendar.css' />

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>

<script src="js/jquery/jquery-2.2.4.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<script type='text/javascript' src='js/moment.min.js'></script>

<script type='text/javascript' src='js/fullcalendar.min.js'></script>

<script type='text/javascript' src='js/locale/es.js'></script>

<script>

function addZero(i) {

if (i < 10) {

i = '0' + i;

return i;

var hoy = new Date();

var dd = hoy.getDate();

if (dd < 10) {

dd = '0' + dd;

}
if (mm < 10) {

mm = '0' + mm;

var mm = hoy.getMonth() + 1;

var yyyy = hoy.getFullYear();

dd = addZero(dd);

mm = addZero(mm);

$(document).ready(function() {

$('#calendar').fullCalendar({

header: {

left: 'prev,next',

center: 'title',

right: 'month,agendaWeek,agendaDay'

},

defaultDate: yyyy + '-' + mm + '-' + dd,

buttonIcons: true, // show the prev/next text

weekNumbers: false,

editable: true,

eventLimit: true, // allow "more" link when too many events

events: [{

title: 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',

image: '<img
src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png"
alt="Smiley face" > ',

description: 'Lorem ipsum 1...',

start: yyyy + '-' + mm + '-08',


color: '#3A87AD',

textColor: '#ffffff',

},

title: 'Meeting',

description: 'Lorem ipsum 6...',

start: yyyy + '-' + mm + '-12T10:30:00',

end: yyyy + '-' + mm + '-12T12:30:00',

color: '#3A87AD',

textColor: '#ffffff',

},

title: 'Event with link',

description: 'Lorem ipsum 12...',

url: 'http://www.jose-aguilar.com/',

start: yyyy + '-' + mm + '-28',

color: '#3A87AD',

textColor: '#ffffff',

],

/*

dayClick: function (date, jsEvent, view) {

alert('Has hecho click en: '+ date.format());

}, */

eventClick: function(calEvent, jsEvent, view) {

$('#event-title').text(calEvent.title);

$('#event-description').html(calEvent.description);

$('#event-img').html(calEvent.image);
$('#modal-event').modal();

},

});

});

</script>

</head>

<body>

<!-- ##### Header Area Start ##### -->

<header class="header-area">

<!--

<div class="home ">

<a href="#" class="home_uno text-center " >Soy estudiante</a>

<a href="#" class="home_dos text-center" >Quiero ser estudiante</a>

</div> -->

<!-- Navbar Area --> <br>

<div class="pixel-main-menu" id="sticker">

<div class="classy-nav-container breakpoint-off">

<div class="container-fluid">

<!-- Menu -->

<nav class="classy-navbar justify-content-center" id="pixelNav">

<!-- Nav brand -->

<li class="dropdown ">

<a href="#" class="dropdown-toggle blanco" data-toggle="dropdown" data-


hover="dropdown">
Regionales </a>

<ul class="dropdown-menu">

<li><a href="#">INCAP - CALI</a></li>

<li><a href="#">INCAP - TOLIMA</a></li>

</ul>

</li>

<a href="index.html" class="nav-brand"><img src="img/logos-escuelas/incap-


logo.png" alt="" width="68%"></a>

<!-- Navbar Toggler -->

<div class="classy-navbar-toggler">

<a href="" class="boton-soy-estudiante">Quiero Ser Estudiante</a>

<span
class="navbarToggler"><span></span><span></span><span></span></span>

</div>

<!-- Menu -->

<div class="classy-menu">

<!-- Close Button -->

<div class="classycloseIcon">

<div class="cross-wrap"><span class="top"></span><span


class="bottom"></span></div>

</div>

<!-- Nav Start -->

<div class="classynav">

<ul>
<li><a href="index.html">Inicio</a></li>

<li><a href="about.html">Educacion Continua</a></li>

<li><a href="services.html">Opciones Laborales</a></li>

<li><a href="services.html">Bienestar</a></li>

<li><a href="services.html">SINCAP</a></li>

<!-- <li><a href="portfolio.html">Pages</a>

<ul class="dropdown">

<li><a href="index.html">Home</a></li>

<li><a href="about.html">About Us</a></li>

<li><a href="services.html">Services</a>

<ul class="dropdown">

<li><a href="index.html">Home</a></li>

<li><a href="about.html">About Us</a></li>

<li><a href="services.html">Services</a></li>

<li><a href="portfolio.html">Portfolio</a>

<ul class="dropdown">

<li><a href="index.html">Home</a></li>

<li><a href="about.html">About Us</a></li>

<li><a href="services.html">Services</a></li>

<li><a href="portfolio.html">Portfolio</a></li>

<li><a href="contact.html">Contact</a></li>

<li><a href="elements.html">Elements</a></li>

</ul>

</li>

<li><a href="contact.html">Contact</a></li>

<li><a href="elements.html">Elements</a></li>

</ul>

</li>

<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>

<li><a href="elements.html">Elements</a></li>

</ul>

</li>

<li><a href="#">Mega</a>

<div class="megamenu">

<ul class="single-mega cn-col-4">

<li><a href="index.html">Home</a></li>

<li><a href="about.html">About Us</a></li>

<li><a href="services.html">Services</a></li>

<li><a href="portfolio.html">Portfolio</a></li>

<li><a href="contact.html">Contact</a></li>

<li><a href="elements.html">Elements</a></li>

</ul>

<ul class="single-mega cn-col-4">

<li><a href="index.html">Home</a></li>

<li><a href="about.html">About Us</a></li>

<li><a href="services.html">Services</a></li>

<li><a href="portfolio.html">Portfolio</a></li>

<li><a href="contact.html">Contact</a></li>

<li><a href="elements.html">Elements</a></li>

</ul>

<ul class="single-mega cn-col-4">

<li><a href="index.html">Home</a></li>

<li><a href="about.html">About Us</a></li>

<li><a href="services.html">Services</a></li>

<li><a href="portfolio.html">Portfolio</a></li>

<li><a href="contact.html">Contact</a></li>

<li><a href="elements.html">Elements</a></li>
</ul>

<ul class="single-mega cn-col-4">

<li><a href="index.html">Home</a></li>

<li><a href="about.html">About Us</a></li>

<li><a href="services.html">Services</a></li>

<li><a href="portfolio.html">Portfolio</a></li>

<li><a href="contact.html">Contact</a></li>

<li><a href="elements.html">Elements</a></li>

</ul>

</div>

</li> -->

<li><a href="contact.html" class="boton-soy-estudiante boton-soy-estudiante-


menu">Quiero Ser Estudiante</a></li>

</ul>

<!-- Top Social Info -->

<div class="top-social-info ml-5">

<a href="#"><i class="fa fa-facebook"></i></a>

<a href="#"><i class="fa fa-youtube"></i></a>

<a href="#"><i class="fa fa-instagram"></i></a>

<a href="#"><i class="fa fa-linkedin"></i></a>

</div>

</div>

<!-- Nav End -->

</div>

</nav>
</div>

</div>

</div>

</header>

<!-- ##### Header Area End ##### -->

<!-- ##### Hero Area Start ##### -->

<section class="hero-area">

<div class="hero-slideshow owl-carousel">

<!-- Single Slide -->

<div class="single-slide-estudiantes">

<!-- Background Image -->

<div class="slide-bg-img-estudiantes bg-img" style="background-image: url(img/bg-


img/estu.jpg);"></div>

<!-- Welcome Text -->

<div class=" h-100 slider ">

<div class="row h-100 align-items-center ">

<div class=" col-lg-8 text-center ">

<div class="welcome-text">

<img class="img__estudiantes--slider" data-animation="rotateInDownRight"


src="img/texto-02.png" alt="">

<img class="img__estudiantes--slider" data-animation="zoomInUp"


src="img/Plan-Referidos-nuevo-txt.png" alt="">
<a href="#" class="btn btn-primary btn-lg boton boton__estudiantes--slider"
data-animation="fadeInUp" data-delay="700ms">Conocenos más</a>

</div>

</div>

<div class=" col-lg-4 col-xs-12" style="margin-top: -120px">

<img data-animation="fadeInDown" data-delay="300ms" src="img/bg-


img/mucha.png" alt="">

</div>

</div>

</div>

</div>

<div class="single-slide-estudiantes">

<!-- Background Image -->

<div class="slide-bg-img-estudiantes bg-img" style="background-image: url(img/bg-


img/estu.jpg);"></div>

<!-- Welcome Text -->

<div class=" h-100 slider ">

<div class="row h-100 align-items-center ">

<div class=" col-lg-8 text-center ">

<div class="welcome-text">
<img class="img__estudiantes--slider" data-animation="rotateInDownRight"
src="img/texto-02.png" alt="">

<img class="img__estudiantes--slider" data-animation="zoomInUp"


src="img/Plan-Referidos-nuevo-txt.png" alt="">

<a href="#" class="btn btn-primary btn-lg boton boton__estudiantes--slider"


data-animation="fadeInUp" data-delay="700ms">Conocenos más</a>

</div>

</div>

<div class=" col-lg-4 col-xs-12" style="margin-top: -120px">

<img data-animation="fadeInDown" data-delay="300ms" src="img/bg-


img/mucha.png" alt="">

</div>

</div>

</div>

</div>
<!-- Single Slide

<div class="single-slide">

<!-- Background Image

<div class="slide-bg-img bg-img" style="background-image: url(img/bg-


img/2.jpg);"></div>

<!-- Welcome Text

<div class="container h-100">

<div class="row h-100 align-items-center">

<div class="col-12 col-lg-9">

<div class="welcome-text">

<h2 data-animation="fadeInUp" data-delay="300ms"><span>Creative


Agency</span><br>of the year 2019</h2>

<h4 data-animation="fadeInUp" data-delay="500ms">Visual Identity by John


Doe Client: <span>Lorem ipsum</span></h4>

<a href="#" class="btn pixel-btn mt-50" data-animation="fadeInUp" data-


delay="700ms">View Project</a>

</div>

</div>

</div>

</div>

</div>-->

</div>

</section>

<!-- ##### Hero Area End ##### -->

<!-- ##### Top Catagory Area Start ##### -->


<!-- ##### Top Catagory Area End ##### -->

<div class="grid">

<div class="row">

<div class="col-md-3">

<figure class="effect-ruby">

<img class="text-center" src="img/calendario.png" alt="img13" />

<figcaption>

<h2>Consulta Horario de Clase</h2>

<p>Ruby did not need any help. Everybody knew that.</p>

<p class="btn btn-primary" style=" font-size: 10px;padding: 10px; top: -30px">Clic


Aquí</p>

</figcaption>

</figure>

</div>

<div class="col-md-3">

<figure class="effect-ruby">

<img class="text-center" src="img/calendario.png" alt="img13" />

<figcaption>

<h2>Calendarios</h2>

<p>Ruby did not need any help. Everybody knew that.</p>

<p class="btn btn-primary" style=" font-size: 10px;padding: 10px; top: -30px">Clic


Aquí</p>

</figcaption>

</figure>

</div>

<div class="col-md-3">

<figure class="effect-ruby">
<img class="text-center" src="img/calendario.png" alt="img13" />

<figcaption>

<h2>Proceso de Graducación</h2>

<p>Ruby did not need any help. Everybody knew that.</p>

<p class="btn btn-primary" style=" font-size: 10px;padding: 10px; top: -30px">Clic


Aquí</p>

</figcaption>

</figure>

</div>

<div class="col-md-3">

<figure class="effect-ruby">

<img class="text-center" src="img/calendario.png" alt="img13" />

<figcaption>

<h2>Apoyo a la presencialidad</h2>

<p>Ruby did not need any help. Everybody knew that.</p>

<p class="btn btn-primary" style=" font-size: 10px;padding: 10px; top: -30px">Clic


Aquí</p>

</figcaption>

</figure>

</div>

</div>

</div>

<div class="grid">

<div class="row">

<div class="col-md-3">

<figure class="effect-julia">
<img src="img/calendario.png" alt="img21" />

<figcaption>

<h2>Consulta Horario de Clase</h2>

<div style="margin-top: -30px;">

<p>Julia dances in the deep dark</p>

<p>She loves the smell of the ocean</p>

<p>And dives into the morning light</p> <br><br><br>

<p class="btn btn-primary" style=" font-size: 10px;padding: 10px; top: -30px">Clic


Aquí</p>

</div>

<a href="#">View more</a>

</figcaption>

</figure>

</div>

<div class="col-md-3">

<figure class="effect-julia">

<img src="img/calendario.png" alt="img22" />

<figcaption>

<h2>Calendarios</h2>

<div style="margin-top: -30px;">

<p>Julia dances in the deep dark</p>

<p>She loves the smell of the ocean</p>

<p>And dives into the morning light</p><br><br><br>

<p class="btn btn-primary" style=" font-size: 10px;padding: 10px; top: -30px">Clic


Aquí</p>

</div>

<a href="#">View more</a>

</figcaption>

</figure>

</div>
<div class="col-md-3">

<figure class="effect-julia">

<img src="img/calendario.png" alt="img21" />

<figcaption>

<h2>Proceso de Graducación</h2>

<div style="margin-top: -30px;">

<p>Julia dances in the deep dark</p>

<p>She loves the smell of the ocean</p>

<p>And dives into the morning light</p> <br><br><br>

<p class="btn btn-primary" style=" font-size: 10px;padding: 10px; top: -30px">Clic


Aquí</p>

</div>

<a href="#">View more</a>

</figcaption>

</figure>

</div>

<div class="col-md-3">

<figure class="effect-julia">

<img src="img/calendario.png" alt="img22" />

<figcaption>

<h2>Apoyo a la presencialidad</h2>

<div style="margin-top: -30px;">

<p>Julia dances in the deep dark</p>

<p>She loves the smell of the ocean</p>

<p>And dives into the morning light</p><br><br><br>

<p class="btn btn-primary" style=" font-size: 10px;padding: 10px; top: -30px">Clic


Aquí</p>

</div>

<a href="#">View more</a>

</figcaption>
</figure>

</div>

</div>

</div>

<section class="section">

<div class="container">

<!-- Left to right -->

<div class="row">

<div class="col-sm-3">

<!-- normal -->

<div class="ih-item circle effect16 left_to_right" data-toggle="tooltip" title="Haz click


para ir los Horarios"><a href="#">

<div class="img"><img src="img/calendar.jpg" alt="img"></div>

<div class="info">

<h3>Consulta Horario de Clase</h3>

<p class="blanco">Description goes here</p>

</div>

</a></div>

<!-- end normal -->

</div>

<div class="col-sm-3">
<!-- normal -->

<div class="ih-item circle effect16 left_to_right" data-toggle="tooltip" title="Haz click


para ir al calendario"><a href="#">

<div class="img"><img src="img/calendar.jpg" alt="img"></div>

<div class="info">

<h3>Calendarios</h3>

<p class="blanco">Description goes here</p>

</div>

</a></div>

<!-- end normal -->

</div>

<div class="col-sm-3">

<!-- colored -->

<div class="ih-item circle effect16 left_to_right" data-toggle="tooltip" title=" Haz click


para ir al SINCAP"><a href="#">

<div class="img"><img src="img/calendar.jpg" alt="img"></div>

<div class="info">

<h3>SINCAP - Estudiantes</h3>

<p class="blanco">Description goes here</p>

</div>

</a></div>

<!-- end colored -->

</div>
<div class="col-sm-3">

<!-- colored -->

<div class="ih-item circle effect16 left_to_right" data-toggle="tooltip" title="Haz click


para ir Dynamo"><a href="#">

<div class="img"><img src="img/calendar.jpg" alt="img"></div>

<div class="info">

<h3>Dynamo</h3>

<p class="blanco">Description goes here</p>

</div>

</a></div>

<!-- end colored -->

</div>

</div>

<!-- end Left to right -->

</div>

</section>

<br><br>

<br>

<div href="#" class="cta-link element-animate" data-animate-effect="fadeIn" data-


toggle="modal" data-target="#modalAppointment">
<span class="heading" style="color: white">Conoce todos nuestros eventos</span>

<span class="sub-heading">Aqui encontraras todo el calendario de INCAP durante el año


2020</span>

</div>

<section class=" bg-img-3">

<section class="container">

<div class="row">

<div class="col-6">

<div id="calendar"></div>

</div>

<div class="col-lg-6 col-xs-12 ">

<div id="content" class="col-lg-12 col-xs-12 ">

<div class=" fade" id="modal-event" tabindex="-1" role="dialog" aria-


labelledby="modal-eventLabel" aria-hidden="true">

<div class="modal-dialog" role="document">

<div class="modal-content">

<div class="modal-header">

<h5 class="modal-title" id="event-title"></h5>

<button type="button" class="close" data-dismiss="modal" aria-


label="Close">

<span aria-hidden="true">&times;</span>

</button>

</div>

<div class="modal-body">

<div id="event-description"></div>
<div id="event-img"></div>

</div>

<div class="modal-footer">

<button type="button" class="btn btn-secondary" data-


dismiss="modal">Close</button>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</section>

</section>

<section class="section bg-img-2">

<div class="container">

<div class="row justify-content-center mb-5 element-animate">

<div class="col-md-8 text-center mb-5">

<h2 class="blanco text-uppercase heading border-bottom mb-4 ">Enlaces de


Interes</h2>

<p class="mb-0 lead blanco">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Commodi unde impedit, necessitatibus, soluta sit quam minima expedita atque corrupti
reiciendis.</p>

</div>

</div>
<div class="row">

<div class="col-lg-11 col-md-11 col-sm-10 col-xs-11 bhoechie-tab-container">

<div class="col-lg-3 col-md-3 col-sm-3 col-xs-5 bhoechie-tab-menu">

<div class="list-group">

<a href="#" class="list-group-item active text-center">

<h4></h4><br />SINCAP Estudiantes

</a>

<a href="#" class="list-group-item text-center">

<h4></h4><br />SINCAP DOCENTES

</a>

<a href="#" class="list-group-item text-center">

<h4></h4><br />Extenciones

</a>

<a href="#" class="list-group-item text-center">

<h4></h4><br />Proceso de Grado

</a>

</div>

</div>

<div class="col-lg-9 col-md-9 col-sm-9 col-xs-7 bhoechie-tab">

<!-- flight section -->

<div class="bhoechie-tab-content active text-center">

<h1 class="glyphicon glyphicon-plane" style="font-


size:10em;color:#55518a"></h1>

<h3 style="margin-top: 0;color:#00A5ED">Documentos Institucionales </h3>

<h3 style="margin-top: 0;color:#00A5ED">Lorem ipsum dolor sit amet, consectetur


adipisicing elit.</h3>

<button type="button" class="btn btn-primary">Primary</button>


</div>

<!-- train section -->

<div class="bhoechie-tab-content text-center">

<h1 class="glyphicon glyphicon-plane" style="font-


size:10em;color:#55518a"></h1>

<h3 style="margin-top: 0;color:#00A5ED">Legiscomex </h3>

<h3 style="margin-top: 0;color:#00A5ED">Lorem ipsum dolor sit amet, consectetur


adipisicing elit.</h3>

<button type="button" class="btn btn-primary">Primary</button>

</div>

<!-- hotel search -->

<div class="bhoechie-tab-content text-center">

<h1 class="glyphicon glyphicon-plane" style="font-


size:10em;color:#55518a"></h1>

<h3 style="margin-top: 0;color:#00A5ED">SINCAP DOCENTES </h3>

<h3 style="margin-top: 0;color:#00A5ED">Lorem ipsum dolor sit amet, consectetur


adipisicing elit.</h3>

<button type="button" class="btn btn-primary">Primary</button>

</div>

<div class="bhoechie-tab-content text-center">

<h1 class="glyphicon glyphicon-plane" style="font-


size:10em;color:#55518a"></h1>

<h3 style="margin-top: 0;color:#00A5ED">SINCAP ESTUDIANTES </h3>

<h3 style="margin-top: 0;color:#00A5ED">Lorem ipsum dolor sit amet, consectetur


adipisicing elit.</h3>

<button type="button" class="btn btn-primary">Primary</button>


</div>

<div class="bhoechie-tab-content text-center">

<h1 class="glyphicon glyphicon-plane" style="font-


size:10em;color:#55518a"></h1>

<h3 style="margin-top: 0;color:#00A5ED">Extensiones incap </h3>

<h3 style="margin-top: 0;color:#00A5ED">Lorem ipsum dolor sit amet, consectetur


adipisicing elit.</h3>

<button type="button" class="btn btn-primary">Primary</button>

</div>

<div class="bhoechie-tab-content text-center">

<h1 class="glyphicon glyphicon-plane" style="font-


size:10em;color:#55518a"></h1>

<h3 style="margin-top: 0;color:#00A5ED">Directorio de estudiantes </h3>

<h3 style="margin-top: 0;color:#00A5ED">Lorem ipsum dolor sit amet, consectetur


adipisicing elit.</h3>

<button type="button" class="btn btn-primary">Primary</button>

</div>

<div class="bhoechie-tab-content text-center">

<h1 class="glyphicon glyphicon-plane" style="font-


size:10em;color:#55518a"></h1>

<h3 style="margin-top: 0;color:#00A5ED">Convenios </h3>

<h3 style="margin-top: 0;color:#00A5ED">Lorem ipsum dolor sit amet, consectetur


adipisicing elit.</h3>

<button type="button" class="btn btn-primary">Primary</button>


</div>

</div>

</div>

</div>

</div>

</section>

<!-- Right to left-->

<!-- end Right to left -->

<section class="section ">

<div class="container ">

<div class="row justify-content-center mb-5 element-animate">

<div class="col-md-8 text-center mb-5">

<h2 class="text-uppercase heading border-bottom mb-4 ">Nuevos Eventos</h2>

<p class="mb-0 lead ">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Commodi unde impedit, necessitatibus, soluta sit quam minima expedita atque corrupti
reiciendis.</p>

</div>

</div>

<div class="row element-animate">

<div class="major-caousel js-carousel-2 owl-carousel">

<div>

<div class="media d-block media-custom text-left">

<img src="img/incap/incap.jpg" alt="Image Placeholder" class="img-fluid">

<div class="media-body">

<span class="meta-post">December 2, 2017</span>

<h3 class="mt-0 text-black"><a href="#" class="text-black">Lorem ipsum dolor


sit amet elit</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

<p class="clearfix">

<a href="#" class="float-left">Leer Más</a>

</p>

</div>

</div>

</div>

<div>

<div class="media d-block media-custom text-left">

<img src="img/incap/incap.jpg" alt="Image Placeholder" class="img-fluid">

<div class="media-body">

<span class="meta-post">December 2, 2017</span>

<h3 class="mt-0 text-black"><a href="#" class="text-black">Lorem ipsum dolor


sit amet elit</a></h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

<p class="clearfix">

<a href="#" class="float-left">Leer Más</a>

</p>

</div>

</div>

</div>

<div>

<div class="media d-block media-custom text-left">

<img src="img/incap/incap.jpg" alt="Image Placeholder" class="img-fluid">

<div class="media-body">

<span class="meta-post">December 2, 2017</span>

<h3 class="mt-0 text-black"><a href="#" class="text-black">Lorem ipsum dolor


sit amet elit</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

<p class="clearfix">

<a href="#" class="float-left">Leer Más</a>

</p>

</div>

</div>

</div>

<div>

<div class="media d-block media-custom text-left">

<img src="img/incap/incap.jpg" alt="Image Placeholder" class="img-fluid">

<div class="media-body">

<span class="meta-post">December 2, 2017</span>

<h3 class="mt-0 text-black"><a href="#" class="text-black">Lorem ipsum dolor


sit amet elit</a></h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

<p class="clearfix">

<a href="#" class="float-left">Leer Más</a>

</p>

</div>

</div>

</div>

<div>

<div class="media d-block media-custom text-left">

<img src="img/incap/incap.jpg" alt="Image Placeholder" class="img-fluid">

<div class="media-body">

<span class="meta-post">December 2, 2017</span>


<h3 class="mt-0 text-black"><a href="#" class="text-black">Lorem ipsum dolor
sit amet elit</a></h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

<p class="clearfix">

<a href="#" class="float-left">Leer Más</a>

</p>

</div>

</div>

</div>

<div>

<div class="media d-block media-custom text-left">

<img src="img/incap/incap.jpg" alt="Image Placeholder" class="img-fluid">

<div class="media-body">

<span class="meta-post">December 2, 2017</span>

<h3 class="mt-0 text-black"><a href="#" class="text-black">Lorem ipsum dolor


sit amet elit</a></h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

<p class="clearfix">

<a href="#" class="float-left">Leer Más</a>

</p>

</div>

</div>

</div>

<div>

<div class="media d-block media-custom text-left">

<img src="img/incap/incap.jpg" alt="Image Placeholder" class="img-fluid">

<div class="media-body">

<span class="meta-post">December 2, 2017</span>


<h3 class="mt-0 text-black"><a href="#" class="text-black">Lorem ipsum dolor
sit amet elit</a></h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

<p class="clearfix">

<a href="#" class="float-left">Leer Más</a>

</p>

</div>

</div>

</div>

<div>

<div class="media d-block media-custom text-left">

<img src="img/incap/incap.jpg" alt="Image Placeholder" class="img-fluid">

<div class="media-body">

<span class="meta-post">December 2, 2017</span>

<h3 class="mt-0 text-black"><a href="#" class="text-black">Lorem ipsum dolor


sit amet elit</a></h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

<p class="clearfix">

<a href="#" class="float-left">Leer Más</a>

</p>

</div>

</div>

</div>

</div>

<!-- END slider -->

</div>

</div>
</section>

<div href="#" class="cta-link element-animate" data-animate-effect="fadeIn" data-


toggle="modal" data-target="#modalAppointment">

<span class="heading" style="color: white">¿Presentas Problemas en INCAP?</span>

<span class="sub-heading">Aqui Podras dejar tus Felicitaciones, Quejas, Sugerencias,


Reclamos</span>

<a class="btn btn-primary" style="color: white">Clic Aquí, F.P.Q.R</a>

</div>

<section class="contact-area ">

<div class="container">

<div class="row">

<!-- Single Contact Area -->

<!-- Single Contact Area -->

<div class="col-12 col-lg-4">

<!-- Section Heading -->

<div class="section-heading">

<h2>INCAP</h2>

<h6>Conoce Nuestras sedes, y comunicate ahora mismo</h6>

</div>

<!-- Contact Form -->

<div class="contact-form-area ">


<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15906.59675131384!2d-
74.06525015223436!3d4.656495441759559!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2
!1s0x8e3f9a460671c2b3%3A0x8aaad9cffecd65f1!2sINCAP%20-
%20Bogot%C3%A1!5e0!3m2!1ses!2sco!4v1572994914732!5m2!1ses!2sco" width="100%"
height="380" frameborder="0" style="border:0;" allowfullscreen=""></iframe>

</div>

</div>

<div class="col-12 col-lg-4">

<!-- Contact Content -->

<div class="contact-content mb-100">

<!-- Section Heading -->

<div class="section-heading">

<h2>Nuestras Sedes</h2>

<h6>Contamos con sedes en distintos lugares en el cual podras encontrar carreras


tecnicas profesionales</h6>

</div>

<p>

<strong>Regional Chapinero</strong> <br>

Dirección: Avenida Caracas Nº 63 – 66 <br>

<strong>Sede División Salud Chapinero</strong> <br>

Dirección: Calle 64 Nº 13 – 53 <br>

<strong>Sede División Industrial</strong> <br>


Dirección: Calle 64 Nº13 – 78/84 <br>

<strong>Regional Centro Zona Universitaria</strong> <br>

Dirección: Carrera 5 Nº 20 – 08 <br>

<strong> Sede División Salud Centro</strong> <br>

Dirección: Carrera 5 Nº 20 – 64 <br>

<strong> Regional Soacha</strong> <br>

Dirección: Carrera 7 Nº 17-72 <br>

</p>

<!-- Single Contact Content -->

</div>

</div>

<div class="col-12 col-lg-4">

<!-- Contact Content -->

<div class="contact-content mb-100">

<!-- Section Heading -->

<div class="section-heading">

<h2>Contactenos</h2>

<h6>Llamanos o escribenos sobre alguna carrera tecnica, nos comunicaremos


contigo</h6>

</div>

<!-- Single Contact Content -->

<div class="single-contact-content d-flex">


<div class="icon">

<i class="fa fa-star" aria-hidden="true"></i>

</div>

<div class="text">

<h6>PBX</h6>

<p> <a href="tel:0315951951" style="font-size: 30px">5 951 951</a></p>

</div>

</div>

<!-- Single Contact Content -->

<div class="single-contact-content d-flex">

<div class="icon">

<i class="fa fa-envelope-o"></i>

</div>

<div class="text">

<h6>Email</h6>

<p>[email protected] <br> johndoe@pixelagency,com</p>

</div>

</div>

<!-- Single Contact Content -->

<div class="single-contact-content d-flex">

<div class="icon">

<i class="fa fa-phone"></i>

</div>

<div class="text">

<h6>Teléfonos</h6>

<p>+01 251 332 331 <br>+01 251 132 331</p>

</div>
</div>

</div>

</div>

</div>

</div>

</section>

<footer class="footer-area section-padding-100-0 bg-img">

<div class="container-fluid ">

<div class="row justify-content-between text-center margin-bottom-80px">

<div class="col-md-2">

<ul>

<li><a href="index.html" class="blanco">Inicio</a></li>

<li><a href="about.html" class="blanco">Nosotros</a></li>

<li><a href="services.html" class="blanco">Programas</a></li>

<li><a href="services.html" class="blanco">Convenios</a></li>

</ul>

</div>

<div class="col-md-2 ">

<ul>

<li><a href="index.html" class="blanco">SINCAP Estudiantes</a></li>

<li><a href="about.html" class="blanco">SINCAP Docentes</a></li>


<li><a href="services.html" class="blanco">Extenciones</a></li>

<li><a href="services.html" class="blanco">Proceso de Grados</a></li>

<li><a href="services.html" class="blanco">Documentación Institucional</a></li>

</ul>

</div>

<div class="col-md-3" style="padding-bottom: 100px">

<a href="index.html" class="footer-logo"><img src="img/logos-escuelas/incap.png"


alt=""></a> <br><br><br>

<img src="img/logos-escuelas/inconte.png" alt="" width="80%"></div>

<div class="col-md-2">

<div class="single-footer-widget mb-100">

<h5 class="widget-title">Siguenos en Nuestras redes Sociales</h5>

<div class="footer-social-info">

<a href="#"><i class="fa fa-facebook"></i></a>

<a href="#"><i class="fa fa-youtube"></i></a>

<a href="#"><i class="fa fa-instagram"></i></a>

<a href="#"><i class="fa fa-linkedin"></i></a>

</div>

</div>

</div>

<div class="col-md-2">

<div class="single-footer-widget mb-100 text-center">

<div class="text-center">
<h5 class="widget-title">PBX</h5>

<p class="text-center"> <a class="blanco text-center " href="tel:0315951951"


style="font-size: 30px">5 951 951</a></p>

</div>

</div>

</div>

</div>

</div>

<div class="copywrite-area text-center">

<div class="container-fluid text-center">

<div class="row text-center">

<div class="col-12 col-md-12 text-center">

<div class="copywrite-content text-center">

<!-- Copywrite Text -->

<p class="copywrite-text">

<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0.
-->

Copyright &copy;<script>

document.write(new Date().getFullYear());

</script> Todos los Derechos reservados | Pagína creada por la <a


href="https://www.organizacionincap.co/" target="_blank" class="blanco"> ORGANIZACIÓN
INCAP <i class="fa fa-heart-o" aria-hidden="true"></i> </a> / <a href="" class="blanco">Politica de
Protección de Datos </a>

<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0.
-->

</p>
</div>

</div>

</div>

</div>

</div>

</footer>

<!-- ##### Footer Area Start ##### -->

<!-- ##### All Javascript Script ##### -->

<!-- jQuery-2.2.4 js -->

<script src="js/modernizr.custom.js"></script>

<!-- Popper js -->

<script src="js/bootstrap/popper.min.js"></script>

<!-- Bootstrap js -->

<script src="js/bootstrap/bootstrap.min.js"></script>

<!-- All Plugins js -->

<script src="js/plugins/plugins.js"></script>

<!-- Active js -->

<script src="js/active.js"></script>

<script src="testimonios.js"></script>
<script src="asset/js/popper.min.js"></script>

<script src="asset/js/bootstrap.min.js"></script>

<script src="asset/js/owl.carousel.min.js"></script>

<script src="asset/js/bootstrap-datepicker.js"></script>

<script src="asset/js/jquery.timepicker.min.js"></script>

<script src="asset/js/jquery.waypoints.min.js"></script>

<script src="asset/js/main.js"></script>

<script>

$(document).ready(function() {

$('[data-toggle="tooltip"]').tooltip();

});

</script>

<script>

$(document).ready(function() {

$("div.bhoechie-tab-menu>div.list-group>a").click(function(e) {

e.preventDefault();

$(this).siblings('a.active').removeClass("active");

$(this).addClass("active");

var index = $(this).index();

$("div.bhoechie-tab>div.bhoechie-tab-content").removeClass("active");

$("div.bhoechie-tab>div.bhoechie-tab-content").eq(index).addClass("active");

});

});

</script>

<script>

$('.dropdown-toggle').dropdownHover(options);
</script>

</body>

</html>

<!--

title: 'All Day Event',

description: 'Lorem ipsum 1...',

start: yyyy+'-'+mm+'-01',

color: '#3A87AD',

textColor: '#ffffff',

},

title: 'Long Event',

description: 'Lorem ipsum 2...',

start: yyyy+'-'+mm+'-07',

end: yyyy+'-'+mm+'-10',

color: '#3A87AD',

textColor: '#ffffff',

},

title: 'Repeating Event',

description: 'Lorem ipsum 3...',

start: yyyy+'-'+mm+'-09T16:00:00',
color: '#3A87AD',

textColor: '#ffffff',

},

title: 'Repeating Event',

description: 'Lorem ipsum 4...',

start: yyyy+'-'+mm+'-16T16:00:00',

color: '#3A87AD',

textColor: '#ffffff',

},

title: 'Conference',

description: 'Lorem ipsum 5...',

start: yyyy+'-'+mm+'-11',

end: yyyy+'-'+mm+'-13',

color: '#3A87AD',

textColor: '#ffffff',

},

title: 'Meeting',

description: 'Lorem ipsum 6...',

start: yyyy+'-'+mm+'-12T10:30:00',

end: yyyy+'-'+mm+'-12T12:30:00',

color: '#3A87AD',

textColor: '#ffffff',

},

title: 'Lunch',

description: 'Lorem ipsum 7...',


start: yyyy+'-'+mm+'-12T12:00:00',

color: '#3A87AD',

textColor: '#ffffff',

},

title: 'Meeting',

description: 'Lorem ipsum 8...',

start: yyyy+'-'+mm+'-12T14:30:00',

color: '#3A87AD',

textColor: '#ffffff',

},

title: 'Happy Hour',

description: 'Lorem ipsum 9...',

start: yyyy+'-'+mm+'-12T17:30:00',

color: '#3A87AD',

textColor: '#ffffff',

},

title: 'Dinner',

description: 'Lorem ipsum 10...',

start: yyyy+'-'+mm+'-12T20:00:00',

color: '#3A87AD',

textColor: '#ffffff',

},

title: 'Birthday Party',

description: 'Lorem ipsum 11...',

start: yyyy+'-'+mm+'-13T07:00:00',
color: '#3A87AD',

textColor: '#ffffff',

},

title: 'Event with link',

description: 'Lorem ipsum 12...',

url: 'http://www.jose-aguilar.com/',

start: yyyy+'-'+mm+'-28',

color: '#3A87AD',

textColor: '#ffffff',

-->

You might also like