Skip to content

Instantly share code, notes, and snippets.

@jeanphillippe

jeanphillippe/index.html

Created March 24, 2020 16:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jeanphillippe/27531b2ab5d974c7e0f1e424ca83040e to your computer and use it in GitHub Desktop.
Save jeanphillippe/27531b2ab5d974c7e0f1e424ca83040e to your computer and use it in GitHub Desktop.
Download ZIP
Ministerio de Educación GLP
Raw
index.html
<header>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="headmenu px-5">
<ul class="nav">
<li class="nav-item ml-md-auto"><a class="nav-link" href="https://www.lapampa.edu.ar/correo" target="_blank" title="Correo Electrónico Establecimientos Educativos">@edu</a></li><li class="nav-item ml-md-auto"><a class="nav-link" href="https://correomce.lapampa.edu.ar/" target="_blank" title="Correo Electrónico Ministerio">@mce</a></li><li><a class="nav-link" href="https://virtual.lapampa.edu.ar/" target="_blank" title="Campus Virtual">Campus Virtual</a></li><li class="nav-item ml-md-auto"><a class="nav-link" href="/index.php/relevamiento-anual" title="Relevamiento Anual 2018">RA</a></li><li class="nav-item ml-md-auto"><a class="nav-link" href="https://gisage.lapampa.edu.ar" target="_blank" title="Gestión Institucional integrada al SAGE">SIGIS</a></li><li class="nav-item ml-md-auto"><a class="nav-link" href="https://sage.lapampa.edu.ar/" target="_blank" title="Sistema de Administración y Gestión de la Educación">SAGE</a></li><li class="nav-item ml-md-auto"><a class="nav-link" href="https://vozporvos.lapampa.edu.ar/" target="_blank">Voz por Vos</a></li>
<li class="nav-item ml-md-auto d-none">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown">Dropdown link</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider">
</div> <a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
</ul>
</div>
</div></div>
</div>
</header>
<section class="">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-expand-lg navbar-light bg-light px-5">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="navbar-toggler-icon"></span>
</button> <a class="navbar-brand" href="#"><img src="https://i.imgur.com/H25W2gn.png" alt="" class="img-fluid img-responsive"></a>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="navbar-nav p-3">
<li class="nav-item active">
<a class="nav-link" href="#">Inicio <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Institucional</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown">Establecimientos</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider">
</div> <a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Areas</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contacto</a>
</li>
</ul>
<form class="form-inline form-inline ml-md-auto">
<input class="form-control mr-sm-2" type="text" />
<button class="btn btn-primary my-2 my-sm-0" type="submit">
Buscar
</button>
</form>
</div>
</nav>
</div>
</div>
</div>
</section>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="jumbotron p-0">
<div class="jumbotron-overlay py-5 px-5">
<div class="herotext px-4 py-4 w-50">
<h2>
Ministerio de Educación <br> Provincia de La Pampa
</h2>
<p>
Nos ocupamos de crear, promover y ejecutar políticas educativas en sus niveles inicial, primario, secundario y superior, que conformen un sistema educativo innovador, único e integrado.
</p>
<p>
<a class="btn btn-primary btn-large" href="#">Learn more</a>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="row px-5 py-3 ">
<div class="col-md-12 pb-4">
<div class="row">
<div class="col-md-3 py-4">
<h3 class="text-muted">
Elegí tu perfil
</h3>
</div>
<div class="col-md-2 text-center perfilselect">
<div class="circle" style=" background: linear-gradient(to bottom, #38ef7d, #11998e);">
<img src="https://i.imgur.com/4TrfOBN.png" alt="librito">
</div>
<h4>
Estudiantes
</h4>
</div>
<div class="col-md-2 text-center perfilselect">
<div class="circle" style="background: linear-gradient(to bottom, #1CCAD8, #11998e);">
<img src="https://i.imgur.com/VO2xBi5.png" style="height: 81%;
padding: 6px;" alt="librito">
</div>
<h4>
Docentes
</h4>
</div>
<div class="col-md-2 text-center perfilselect">
<div class="circle" style="background: linear-gradient(to top, #587291, #2F97C1);">
<img src="https://i.imgur.com/RuKT0sy.png" style=" left: 48%;" alt="librito">
</div>
<h4>
Familias
</h4>
</div>
<div class="col-md-2 text-center perfilselect">
<div class="circle" style=" background: linear-gradient(to bottom, #38EF7D, #4CAF50);">
<img src="https://i.imgur.com/IGzZWP4.png" alt="librito">
</div>
<h4>
Escuelas
</h4>
</div>
</div>
</div>
</div>
<div class="badge-success px-5 py-4 row">
<div class="col-md-12 pb-5">
<h3 style=" border-bottom: 2px solid #72cc68;
padding-bottom: 5px;
display: inline-block;" class="mt-4 mb-4">Novedades</h3>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-img-top" style="background-image:url('https://sitio.lapampa.edu.ar/cache/com_zoo/images/Flyer%20correcto_8eca7e01a95a32be667f4a30cff446ce.png')"></div>
<div class="card-body">
<h5 class="card-title">Extienden inscripción de aspirantes a Jurado</h5>
<p class="card-subtitle">Concursos de Ascenso 2020</p><br>
<p class="card-text">Hasta el 17 de abril inclusive, permanecerá abierta la inscripción para docentes de nivel Inicial, Primario y Secundario ...</p>
<a href="#" class="btn btn-primary d-none">Go somewhere</a>
</div>
</div>
<div class="card" style="width: 18rem;">
<div class="card-img-top" style="background-image:url('https://sitio.lapampa.edu.ar/cache/com_zoo/images/85419_img-20200318-wa0021_506cc3a369191d542f1ca525f8fa8a3d.jpg')"></div>
<div class="card-body">
<h5 class="card-title">Está disponible cuarentena.lapampa.gob.ar</h5>
<p class="card-subtitle">COVID19</p><br>
<p class="card-text">Con el objetivo de profundizar la responsabilidad social y al mismo tiempo facilitar que los ciudadanos puedan ejercer “control social”...</p>
<a href="#" class="btn btn-primary d-none">Go somewhere</a>
</div>
</div>
<div class="card" style="width: 18rem;">
<div class="card-img-top" style="background-image:url('https://sitio.lapampa.edu.ar/cache/com_zoo/images/67798_con-jefes-policiales-3_42eefe252e4c794d76ede733884b9514.jpg')"></div>
<div class="card-body">
<h5 class="card-title">Seguridad intensificará controles por la Emergencia Pública Sanitaria Nacional</h5>
<p class="card-subtitle d-none">Concursos de Ascenso 2020</p>
<p class="card-text">En el estado epidemiológico actual y acompañando las acciones nacionales tendientes a minimizar los efectos de la pandemia...</p>
<a href="#" class="btn btn-primary d-none">Go somewhere</a>
</div>
</div>
<div class="card" style="width: 18rem;">
<div class="card-img-top" style="background-image:url('https://sitio.lapampa.edu.ar/cache/com_zoo/images/192096_resize-of-1m6a1591_4be2325741294569450ad5bd34f5a494.jpg')"></div>
<div class="card-body">
<h5 class="card-title">A partir de las 00 de mañana rige la cuarentena general obligatoria</h5>
<p class="card-subtitle d-none">Concursos de Ascenso 2020</p>
<p class="card-text">Se brindan a continuación detalles principales del Régimen de Aislamiento Social Preventivo y Obligatorio anunciados por el presidente...</p>
<a href="#" class="btn btn-primary d-none">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row p-5">
<div class="col-md-12 ">
<h3>
Areas, Programas y Proyectos
</h3>
<div class="carousel slide" id="carousel-622668">
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#carousel-622668" class="active">
</li>
<li data-slide-to="1" data-target="#carousel-622668">
</li>
<li data-slide-to="2" data-target="#carousel-622668">
</li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" alt="Carousel Bootstrap First" src="https://www.layoutit.com/img/sports-q-c-1600-500-1.jpg" />
<div class="carousel-caption">
<h4>
First Thumbnail label
</h4>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="Carousel Bootstrap Second" src="https://www.layoutit.com/img/sports-q-c-1600-500-2.jpg" />
<div class="carousel-caption">
<h4>
Second Thumbnail label
</h4>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="Carousel Bootstrap Third" src="https://www.layoutit.com/img/sports-q-c-1600-500-3.jpg" />
<div class="carousel-caption">
<h4>
Third Thumbnail label
</h4>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
</div>
</div>
</div> <a class="carousel-control-prev" href="#carousel-622668" data-slide="prev"><span class="carousel-control-prev-icon"></span> <span class="sr-only">Previous</span></a> <a class="carousel-control-next" href="#carousel-622668" data-slide="next"><span class="carousel-control-next-icon"></span> <span class="sr-only">Next</span></a>
</div>
</div>
</div>
<div class="row badge-info p-5 text-light accesosrapidos">
<div class="col-md-3 p-4">
<h3 class="">
Accesos Rápidos
</h3>
</div>
<div class="col-md-4 p-4">
<ul class="list-unstyled">
<li class="">Establecimientos Educativos</li>
<li>Designaciones Docentes </li>
<li>Agendas</li>
<li>SAGE</li>
</ul>
</div>
<div class="col-md-4 p-4">
<ul class="list-unstyled">
<li>Dir. General de Educacion Primaria </li>
<li>Dir. General de Educacion Secundaria</li>
<li>Dir. General de Educacion Superior </li>
<li>Movimientos Docentes</li>
</ul>
</div>
</div>
<div class="row badge-dark p-5">
<div class="col-md-4">
<h2>
Logo
</h2>
<p>
Direccion y datos de contacto
</p>
<div>
(02954) 12 34 56 / 78 91 01
</div>
<div>
Santa Rosa, La Pampa
</div>
<div>
Patagonia Argentina
</div>
<div>
CP: 6300
</div>
<p>
<a class="btn" href="#">View details »</a>
</p>
</div>
<div class="col-md-4">
<ul>
<li class="list-item">
Lorem ipsum dolor sit amet
</li>
<li class="list-item">
Consectetur adipiscing elit
</li>
<li class="list-item">
Integer molestie lorem at massa
</li>
<li class="list-item">
Facilisis in pretium nisl aliquet
</li>
<li class="list-item">
Nulla volutpat aliquam velit
</li>
<li class="list-item">
Faucibus porta lacus fringilla vel
</li>
<li class="list-item">
Aenean sit amet erat nunc
</li>
<li class="list-item">
Eget porttitor lorem
</li>
</ul>
</div>
<div class="col-md-4">
</div>
</div>
<div class="row px-5 d-none">
<div class="col-md-12">
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
×
</button>
<h4>
Alert!
</h4> <strong>Warning!</strong> Best check yo self, you're not looking too good. <a href="#" class="alert-link">alert link</a>
</div>
</div>
</div>
</div>
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
Raw
style.css
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
font-family: 'Lato', sans-serif;font-weight:900;}
.navbar-brand img{max-height:90px;}
.jumbotron{background-image:url('https://i.imgur.com/10K8ojW.jpg');
background-size:cover;background-repeat:no-repeat;background-position:center center;}
.headmenu{float:right;width:100%;background: #4CAF50;}
.headmenu ul{float:right;max-width:50%;font-size:12px;color:#cacaca}
.headmenu ul a{color:#e8e8e8}
.headmenu:after {
transition: all 0.5s ease-in;
opacity: 0.5;
position: absolute;
content: "";
width: 100%;
height: 100px;
bottom: 0;
left: 0;
background: linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0, 0, 0, 0.02) 37%,rgba(0, 0, 0, 0.19) 99%,rgba(0, 0, 0, 0.22) 100%);
}
.perfilselect{cursor:pointer;}
.perfilselect h4,.perfilselect .circle{
transition: all .5s ease;
}
.perfilselect:hover .circle{
width:115px;
margin-top:-15px;
}
.perfilselect:hover h4{
color:#5a6764;
}
.accesosrapidos li {
cursor:pointer;
color: #01cee8;
font-style: italic;
font-weight: bold;
font-size: 1.2em;
margin-bottom: 10px;
}
.accesosrapidos li:hover {color:#e6e6e6;}
.card{ border: 0;width: 18rem;height:320px;max-height:320px;cursor:pointer; float: left;
margin-right: 20px;}
.card-text {
color: #565656;
overflow:hidden;
opacity:0;
text-overflow: ellipsis;
font-size: .85em;
-moz-transition: all 1.5s ease;
-webkit-transition: all 1.5s ease;
-o-transition: all 1.5s ease;
transition: all 1.5s ease;
}
.card:hover .card-img-top{
height:90px}
.card-img-top{ -moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
background-size:cover;
background-repeat:no-repeat;
background-position:center top;
height:170px;
position:relative;
}
.card .card-img-top:after{
transition: all 0.5s ease-in;
opacity:0.5;
position:absolute;
content:"";
width:100%;
height:100px;
bottom:0;
left:0;
background: linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0, 0, 0, 0.02) 37%,rgba(0, 0, 0, 0.19) 99%,rgba(0, 0, 0, 0.22) 100%);
}
.card:hover .card-img-top:after{
opacity:1;
}
.card-subtitle {
color: #ffffff;
font-size: .7em;
background: #bdbdbd;
display: inline-block;
padding: 1px 5px;
margin-bottom: 10px;
}
.card:hover .card-text {
opacity:1;
display:block!important;}
.card-body {
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;}
.card-title {
color: #2d2727;
font-size: 1.24rem;
}
.circle { background: #4CAF50;
border: 0px solid #4CAF50;
display: inline-block;
width: 100px;
position: relative;
border-radius: 50%;
overflow: hidden;
text-align: center;
box-shadow: 0px 0px 10px 4px rgba(196,196,196,0.5);
-moz-box-shadow: 0px 0px 10px 4px rgba(196,196,196,0.5);
-webkit-box-shadow: 0px 0px 10px 4px rgba(196,196,196,0.5);
transition: box-shadow .25s ease;
}
.circle:before {
display: block;
content: "";
width: 100%;
padding-top: 100%;
}
.circle>img {
-webkit-filter: invert(1);
filter: invert(1);
position: absolute;
height: 70%;
left: 50%;
transform: translateX( -50%);
top: 16px;
right: 0;
margin: 0 auto;
bottom: 0;
opacity: 0;
transition: opacity .4s;
}
.circle>img.tallAndNarrow {
width: 100%;
top: 50%;
transform: translateX(0) translateY( -50%);
left: 0;
height: auto;
}
.circle>img {
opacity: 1;
}
.jumbotron-overlay {
background: rgba(0,0,0,.4);
}
.jumbotron{
color: #fff;
text-shadow: 0px 2px 2px rgba(0,0,0,0.4);
}
.container-fluid {
padding: unset;
overflow-y: hidden;
}
.dropdown-toggle::after {
margin-left: .455em;
vertical-align: .355em;
font-size: 12px;}
.navbar-nav li.nav-item {
padding: 0 8px;
}
.btn.btn-primary{
border: 0px solid #7ae201;
background: #a0dc2a; /* fallback for old browsers */
background: -webkit-linear-gradient(to top, #a0dc2a, #DCE35B); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #a0dc2a, #DCE35B); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.btn-primary.focus, .btn-primary:focus,.form-control:focus {
border-color: #c7c7c7;
box-shadow: 0 0 0 0.2rem #8bc34a61;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&amp;display=swap" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment