Skip to content

Instantly share code, notes, and snippets.

@darwinsalinas
Created July 30, 2021 20:49
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 darwinsalinas/1e3452393d229793ef28a70a240f963e to your computer and use it in GitHub Desktop.
Save darwinsalinas/1e3452393d229793ef28a70a240f963e to your computer and use it in GitHub Desktop.
.nounderlinelink:hover {
text-decoration: none !important;
}
/*
Fade content bs-carousel with hero headers
Code snippet by maridlcrmn (Follow me on Twitter @maridlcrmn) for Bootsnipp.com
Image credits: unsplash.com
*/
/********************************/
/* Fade Bs-carousel */
/********************************/
.fade-carousel {
position: relative;
height: 20vh;
}
.fade-carousel .carousel-inner .item {
height: 20vh;
}
.fade-carousel .carousel-indicators > li {
margin: 0 2px;
background-color: #f39c12;
border-color: #f39c12;
opacity: 0.1;
}
.fade-carousel .carousel-indicators > li.active {
width: 10px;
height: 10px;
opacity: 0.1;
}
/********************************/
/* Hero Headers */
/********************************/
.hero {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
color: #fff;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);
-webkit-transform: translate3d(-50%, -50%, 0);
-moz-transform: translate3d(-50%, -50%, 0);
-ms-transform: translate3d(-50%, -50%, 0);
-o-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.hero h1 {
font-size: 6em;
font-weight: bold;
margin: 0;
padding: 0;
}
.fade-carousel .carousel-inner .item .hero {
opacity: 0;
-webkit-transition: 2s all ease-in-out 0.1s;
-moz-transition: 2s all ease-in-out 0.1s;
-ms-transition: 2s all ease-in-out 0.1s;
-o-transition: 2s all ease-in-out 0.1s;
transition: 2s all ease-in-out 0.1s;
}
.fade-carousel .carousel-inner .item.active .hero {
opacity: 1;
-webkit-transition: 2s all ease-in-out 0.1s;
-moz-transition: 2s all ease-in-out 0.1s;
-ms-transition: 2s all ease-in-out 0.1s;
-o-transition: 2s all ease-in-out 0.1s;
transition: 2s all ease-in-out 0.1s;
}
/********************************/
/* Overlay */
/********************************/
.overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
background-color: #080d15;
opacity: 0.2;
}
/********************************/
/* Custom Buttons */
/********************************/
.btn.btn-lg {
padding: 10px 40px;
}
.btn.btn-hero,
.btn.btn-hero:hover,
.btn.btn-hero:focus {
color: #f5f5f5;
background-color: #1abc9c;
border-color: #1abc9c;
outline: none;
margin: 20px auto;
}
/********************************/
/* Slides backgrounds */
/********************************/
.fade-carousel .slides .slide-1,
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3,
.fade-carousel .slides .slide-4 {
height: 20vh;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
}
.fade-carousel .slides .slide-1 {
background-image: url(//recsp.org/public/site/images/rapwas/slider1.jpg);
}
.fade-carousel .slides .slide-2 {
background-image: url(//recsp.org/public/site/images/rapwas/slider2.jpg);
}
.fade-carousel .slides .slide-3 {
background-image: url(//recsp.org/public/site/images/rapwas/slider3.jpg);
}
.fade-carousel .slides .slide-4 {
background-image: url(//recsp.org/public/site/images/rapwas/slider4.jpg);
}
.logoscolaboradores {
display: flex;
align-items: center;
justify-content: center;
background: #2c3e50 !important;
}
.logoscolaboradores-item {
width: 15%;
}
.logoscolaboradores-item a img {
filter: invert(30%);
transition: all ease 1s;
}
.logoscolaboradores-item a:hover img {
filter: invert(0%);
}
.img-logo-site {
width: 100%;
}
/********************************/
/* Media Queries */
/********************************/
@media screen and (min-width: 980px) {
.hero {
width: 980px;
}
}
@media screen and (max-width: 640px) {
.hero h1 {
font-size: 4em;
}
.logoscolaboradores-item {
width: 25%;
}
.img-logo-site {
width: 65%;
}
.title-site {
text-align: center;
}
}
@media screen and (max-width: 768px) {
.title-site,
.issn {
text-align: center;
}
}
@media screen and (min-width: 640px) and (max-width: 768px) {
.img-logo-site,
.issn {
width: 50%;
}
}
iframe {
width: 100%;
height: 100vh;
}
.Parrafos_parrafo-01,
.Parrafos_parrafo-02 {
font-size: 1em !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment