Commit abb7ce97 authored by Rodrigo Tapia-McClung's avatar Rodrigo Tapia-McClung

Added landing page

parent 1085dfec
html {
font-size: 14px;
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
.container {
max-width: 960px;
}
.pricing-header {
max-width: 700px;
}
.card-deck .card {
min-width: 220px;
}
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.zoom img {
transition: all .2s linear;
}
.zoom:hover img {
transform: scale(1.1);
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
/* background-color: rgba(75,75,75,0.7);*/
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.hovereffect:hover .overlay {
background-color: rgba(75,75,75,0.3);
}
.hovereffect img {
display: block;
position: relative;
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
-webkit-transform: translateY(45px);
-ms-transform: translateY(45px);
transform: translateY(45px);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.hovereffect:hover h2 {
-webkit-transform: translateY(5px);
-ms-transform: translateY(5px);
transform: translateY(5px);
}
.hovereffect a.info {
display: inline-block;
text-decoration: none;
text-transform: uppercase;
color: #fff;
border: 1px solid #fff;
background-color: transparent;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
font-weight: normal;
/*margin: 15px 0 0 0;
padding: 140px 60px 0px 60px;*/
margin: 10px;
padding: 0px 15px;
}
.hovereffect:hover a.info {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.hovereffect a.info:hover {
box-shadow: 0 0 5px #fff;
}
.hovereffect:hover .hoverimg {
opacity: 1;
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
.hoverimg {
opacity: 0;
margin: -15px;
}
.hoverbtn {
margin: -10px;
}
.photo-credit {
position: absolute;
bottom: 0px;
right: 0px;
font-size: 10px;
color: #b2b2b2;
background-color: rgba(0,0,0,0.7);
padding: 2px;
border-radius: .25rem;
}
\ No newline at end of file
<!DOCTYPE html>
<html lang="es">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Proyecto FORDECyT 2018 - 10</title>
<link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../css/cover_style.css">
<link rel="icon" href="../img/monitoreo.png" sizes="16x16">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light sb-navbar">
<div class="container">
<a class="navbar-brand" href="http://www.centrogeo.org.mx/">
<img src="../img/centrogeo.png" height="70" alt="CentroGeo">
</a>
<a class="mr-sm-2" href="http://conacyt.gob.mx/">
<img src="../img/conacyt.png" height="70" alt="CONACyT">
</a>
</nav>
<div>
<!--<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
<h5 class="my-0 mr-md-auto font-weight-normal">Centro de Investigaci&oacute;n en Ciencias de Informaci&oacute;n Espacial</h5>
<nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-dark" href="#">Features</a>
<a class="p-2 text-dark" href="#">Enterprise</a>
<a class="p-2 text-dark" href="#">Support</a>
<a class="p-2 text-dark" href="#">Pricing</a>
</nav>
<a class="btn btn-outline-primary" href="#">Sign up</a>-->
</div>
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
<h1 class="display-5">Proyecto FORDECyT 2018 - 10</h1>
<p class="lead">An&aacute;lisis y Monitoreo del Crecimiento del Medio Urbano y del
Comportamiento de Cuerpos de Agua desde un Enfoque de Sustentabilidad.
Casos de Estudio: Corredor Metropolitano Centro País y Cuenca del r&iacute;o
Grijalva.</p>
</div>
<div class="container">
<div class="card-deck mb-3 text-center">
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">R&iacute;o Grijalva</h4>
</div>
<div class="card-body">
<div class="hovereffect zoom">
<img class="card-img"
src="../img/sumidero.jpg" alt="Ca&ntilde;&oacute;n del Sumidero">
<span class="photo-credit">Foto: Gabriela L&oacute;pez</span>
<div class="overlay">
<a class="info" href="../grijalva">
<img class="hoverimg mx-auto d-block" src="../img/cuenca.png" width="325px">
<span class="btn btn-primary hoverbtn" href="../grijalva" role="button">Visitar
sitio</span>
<br><br>
</a>
</div>
</div>
</div>
</div>
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Corredor Metropolitano Centro Pa&iacute;s</h4>
</div>
<div class="card-body">
<div class="hovereffect zoom">
<img class="card-img" src="../img/centropais.jpg" alt="CMCP">
<span class="photo-credit">Foto: Lucy Nieto</span>
<div class="overlay">
<a class="info" href="../centropais">
<img class="hoverimg mx-auto d-block" src="../img/cmcp.png" width="325px">
<span class="btn btn-primary hoverbtn" href="../centropais" role="button">Visitar
sitio</span>
<br><br>
</a>
</div>
</div>
</div>
</div>
</div>
<footer class="pt-4 my-md-5 pt-md-5 border-top">
<div class="row">
<div class="col-12 col-md">
<img class="mb-2" src="../img/geoint.png" alt="GeoInt" height="70px">
<small class="d-block mb-3 text-muted">&copy; 2019</small>
</div>
<div class="col-6 col-md">
<h5>Features</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Cool stuff</a></li>
<li><a class="text-muted" href="#">Random feature</a></li>
<li><a class="text-muted" href="#">Team feature</a></li>
<li><a class="text-muted" href="#">Stuff for developers</a></li>
<li><a class="text-muted" href="#">Another one</a></li>
<li><a class="text-muted" href="#">Last time</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Resource</a></li>
<li><a class="text-muted" href="#">Resource name</a></li>
<li><a class="text-muted" href="#">Another resource</a></li>
<li><a class="text-muted" href="#">Final resource</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Acerca de</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Equipo</a></li>
<li><a class="text-muted" href="#">Desarrollo</a></li>
<li><a class="text-muted" href="#">Tecnolog&iacute;a</a></li>
<li><a class="text-muted" href="#">Terms</a></li>
</ul>
</div>
</div>
</footer>
</div>
</body>
</html>
\ No newline at end of file
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