How can I make contenders on top of a slide? [closed]

Question

How can I make contenders on top of a slide? [closed]

Navigation

#1 by (1 votes)
#2 by (0 votes)

-2

I want to know how I can do that green containers but as you can see in the image I was reviewing the code but I think I did not find the class which is being used to create that, but as I see that containers (or do not know how it would be called that) they go over the slider and I have tried to make them but it does not stay the same ... here the reference 121cc.com

html css

asked by JOGUEL CB 12.11.2017 в 19:50

source

2 answers

1

Property z-index maybe that's what you mean, overlay containers in others:

example:

answered by 12.11.2017 в 23:52

Search all the articles of a SQL query [closed] AdMob ads really do not appear

score 0 · Accepted Answer

Hello on that page there are several tricks among which I highlight the following:

We make the smaller side green containers by margin-top: -1rem;
We always send them down and to the left with absolute positioning
we use skewX to deform a div

/*fuente de textos*/
body {
    font-family: Montserrat,sans-serif;
    line-height: 1.7647058824em;
}

body {
    font-size: .9em;
}

body, label {
    font-weight: 400;
}

/*tamaño del video*/
.hero-block--video, .home .hero-block--video {
    height: calc(100vw / 1.7777778) !important;
    max-height: 75rem;
    background-position-y: 50%;
    background-size: cover;
}
/*manda el video al frente de la imágen cuando no carga*/
.home .hero-block--video {
    z-index: 1;
    background-position-x: 50%;
    background-position-y: 0;
    background-size: auto 75%;
}

/*manda los links abajo y los pone verdes*/
.hero-block__bottom-links {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #9fb937;
    width: 100%;
}

/*los pone uno tras otro horizontalmente*/
.hero-block__bottom-links .bottom-links__content {
    max-width: 92.5rem;
    display: -ms-flexbox;
    display: flex;
    margin: 0 auto;
}

/*quita linea de links*/
.btn:hover, .button:hover, .teaser-card.feature .teaser-card__link a:hover, .teaser-card.feature .teaser-card__link:hover, a, abbr[title], button:hover {
    text-decoration: none;
}


/*forma complementaria para formar el trapecio*/
.hero-block__bottom-link--feature::after, .hero-block__bottom-link--feature::before {
    content: "";
    background-color: #7d922b;
    display: block;
    width: 30px;
    height: 100%;
    position: absolute;
    bottom: 0;
    transform-origin: bottom;
}

/*orillas del trapecio*/
.hero-block__bottom-link--feature::after {
    right: -30px;
    transform: skewX(9deg);
}

.hero-block__bottom-link--feature::before {

    left: -30px;
    transform: skewX(-9deg);

}

/*cambia color de fondo del primer tab*/
.hero-block__bottom-link--feature {
    background-color: #7d922b;
}


/*mocha el alto de dos tabs*/
.hero-block__bottom-link {
    -ms-flex: 0 0 33.3333333333%;
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
    border-bottom: none;
    margin-top: -1rem;
    padding: .875rem 0.225rem 0rem;
    padding-right: 0.225rem;
    padding-left: 0.225rem;
}

/*orden de los textos*/
.hero-block__bottom-link--feature {
    position: relative;
    -ms-flex-order: 1;
    order: 1;
}

/*orden de links*/
.hero-block__bottom-link:last-child {
    -ms-flex-order: 2;
    order: 2;
}

/*alineacion del texto gris*/
.hero-block__bottom-link {
    text-align: center;
}

/*color del texto superior de los tabs*/
.hero-block__bottom-link .bottom-link__heading {
    color: #fff;
    font-weight: 700;
    font-size: 1.5em;
    text-transform: uppercase;
}

/**color de texto inferior*/
.hero-block__bottom-link .bottom-link__subheading {
    color: #3a4314;
    font-family: "Roboto Condensed",sans-serif;
    font-style: italic;
    font-size: 1.125em;
}

<div style="position: absolute; z-index: -1; top: 0px; left: 0px; bottom: 0px; right: 0px; overflow: hidden; background-size: cover; background-color: transparent; background-repeat: no-repeat; background-position: 50% 50%; background-image: none;"><video autoplay="" loop="" muted="" style="margin: auto; position: absolute; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: visible; opacity: 1; width: auto; height: 722px;"><source src="https://121cc.com/assets/video/header.mp4" type="video/mp4"></video></div>

<div class="hero-block__wrapper ">
  <!-- end -->



  <div class="hero-block__bottom-links">
    <div class="bottom-links__content">
      <div class="hero-block__bottom-link hero-block__bottom-link--feature">
        <a href="http://121cc.com/visit">
          <span class="bottom-link__heading">Visit Us</span>
          <span class="bottom-link__subheading">What To Expect, Service Times &amp; Directions</span>
        </a>
      </div>
      <div class="hero-block__bottom-link ">
        <a href="http://121cc.com/next-steps">
          <span class="bottom-link__heading">Next Steps</span>
          <span class="bottom-link__subheading">Get Involved at 121</span>
        </a>
      </div>
      <div class="hero-block__bottom-link ">
        <a href="http://121cc.com/ministries/mission/serve">
          <span class="bottom-link__heading">Serve</span>
          <span class="bottom-link__subheading">Impact The Community</span>
        </a>
      </div>
    </div>
  </div>

</div>