Skip to content

F
fordecyt_2019
Commit f0b5c42d authored by Rodrigo Tapia-McClung's avatar Rodrigo Tapia-McClung
Browse files
Options

Enhance card display on small screens

parent 742b355d
Hide whitespace changes
Inline Side-by-side
Showing with 39 additions and 44 deletions
public/css/cover_style.css
View file @ f0b5c42d
...@@ -108,11 +108,7 @@ html { ...@@ -108,11 +108,7 @@ html {
-ms-transform: scale(0); -ms-transform: scale(0);
transform: scale(0); transform: scale(0);
font-weight: normal; font-weight: normal;
/*margin: 15px 0 0 0;
padding: 140px 60px 0px 60px;*/
margin: 10px; margin: 10px;
padding: 0px 15px;
} }
.hovereffect:hover a.info { .hovereffect:hover a.info {
...@@ -138,7 +134,7 @@ html { ...@@ -138,7 +134,7 @@ html {
.hoverimg { .hoverimg {
opacity: 0; opacity: 0;
margin: -15px; margin: -35px;
} }
.hoverbtn { .hoverbtn {
......
public/index.html
View file @ f0b5c42d
...@@ -45,52 +45,53 @@ ...@@ -45,52 +45,53 @@
<div class="container"> <div class="container">
<div class="card-deck mb-3 text-center"> <div class="card-deck mb-3 text-center">
<div class="row"> <div class="row no-gutters">
<div class="card mb-4 shadow-sm"> <div class="col-sm-6">
<div class="card-header"> <div class="card mb-4 shadow-sm">
<h4 class="my-0 font-weight-normal">R&iacute;o Grijalva</h4> <div class="card-header">
</div> <h4 class="my-0 font-weight-normal">R&iacute;o Grijalva</h4>
<div class="card-body"> </div>
<div class="hovereffect zoom"> <div class="card-body">
<img class="card-img" src="img/sumidero.jpg" alt="Ca&ntilde;&oacute;n del Sumidero"> <div class="hovereffect zoom">
<span class="photo-credit">Foto: Gabriela L&oacute;pez</span> <img class="card-img" src="img/sumidero.jpg" alt="Ca&ntilde;&oacute;n del Sumidero">
<div class="overlay"> <span class="photo-credit">Foto: Gabriela L&oacute;pez</span>
<a class="info" href="grijalva/"> <div class="overlay">
<img class="hoverimg mx-auto d-block" src="img/cuenca.png" width="325px"> <a class="info" href="grijalva/">
<span class="btn btn-primary hoverbtn" href="grijalva/" role="button">Visitar <img class="hoverimg mx-auto d-block" src="img/cuenca.png" width="100%">
sitio</span> <span class="btn btn-primary hoverbtn" href="grijalva/" role="button">Visitar sitio</span>
<br><br> <br><br>
</a> </a>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="card mb-4 shadow-sm"> <div class="col-sm-6">
<span class="github-fork-ribbon left-bottom" data-ribbon="En construcción" title="En construcción">En construcción</span> <div class="card mb-4 shadow-sm">
<div class="card-header"> <span class="github-fork-ribbon left-bottom" data-ribbon="En construcción" title="En construcción">En construcción</span>
<h4 class="my-0 font-weight-normal">Riesgo</h4> <div class="card-header">
</div> <h4 class="my-0 font-weight-normal">Riesgo</h4>
<div class="card-body"> </div>
<div class="hovereffect zoom"> <div class="card-body">
<img class="card-img" src="img/inundacion.jpg" alt="Ca&ntilde;&oacute;n del Sumidero"> <div class="hovereffect zoom">
<span class="photo-credit">Foto: Felinto C&oacute;rdoba</span> <img class="card-img" src="img/inundacion.jpg" alt="Ca&ntilde;&oacute;n del Sumidero">
<div class="overlay"> <span class="photo-credit">Foto: Felinto C&oacute;rdoba</span>
<a class="info" href="riesgos/"> <div class="overlay">
<img class="hoverimg mx-auto d-block" src="img/cuenca.png" width="325px"> <a class="info" href="riesgos/">
<span class="btn btn-primary hoverbtn" href="grijalva/" role="button">Visitar <img class="hoverimg mx-auto d-block" src="img/cuenca.png" width="100%">
sitio</span> <span class="btn btn-primary hoverbtn" href="grijalva/" role="button">Visitar sitio</span>
<br><br> <br><br>
</a> </a>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="row justify-content-md-center"> <div class="row no-gutters justify-content-md-center">
<div class="col-6"> <div class="col-sm-6">
<div class="card mb-4 shadow-sm"> <div class="card mb-4 shadow-sm">
<span class="github-fork-ribbon left-bottom" data-ribbon="En construcción" title="En construcción">En construcción</span> <span class="github-fork-ribbon left-bottom" data-ribbon="En construcción" title="En construcción">En construcción</span>
<div class="card-header"> <div class="card-header">
...@@ -102,16 +103,14 @@ ...@@ -102,16 +103,14 @@
<span class="photo-credit">Foto: Lucy Nieto</span> <span class="photo-credit">Foto: Lucy Nieto</span>
<div class="overlay"> <div class="overlay">
<a class="info" href="centropais/"> <a class="info" href="centropais/">
<img class="hoverimg mx-auto d-block" src="img/cmcp.png" width="325px"> <img class="hoverimg mx-auto d-block" src="img/cmcp.png" width="100%">
<span class="btn btn-primary hoverbtn" href="centropais/" role="button">Visitar <span class="btn btn-primary hoverbtn" href="centropais/" role="button">Visitar sitio</span>
sitio</span>
<br><br> <br><br>
</a> </a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
......
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