Rollei popis šablona

by Petr Haluza

HTML

<div id="RPcontainer">



<div id="RPsect01" class="RPsect">
  <div class="RPcenter80">
    <span class="RPimageWrap ">
      <img src="https://rollei.de/inspiration/wp-content/uploads/2019/03/image.png" alt="">
    </span>
    <div class="RPtitle">
      <h1>Rollei Go! SMARTPHONE GIMBAL</h1>
    </div>
    <div class="RPsubTitle">
      <h2>Zachyťte sílu okamžiku, bez rozmazání, plynule</h2>
    </div>
    <div class="RPanotation">
      <p>Díky 360stupňovému naklánění natočíte snímky při jakékoli rotaci. Stabilitu a ostrost oceníte také při nahrávání zpomalených záznamů a natáčení ve vysokém rozlišení. Kromě toho nechybí ani podpora tak zvaného Dolly zoomu – dramatického oddálení záběru ve stylu filmových trháků. </p>
    </div><!-- RPanotation -->
  </div><!-- RPcener -->
  <div class="RPdividerR"></div>
</div><!-- RPsect 01 ***************************-->



<div id="RPsect02" class="RPsect">
  <div class="RPcenter100">
    <div class="RPsubTitle">
      <h2>Vše, co potřebujete na cesty</h2>
    </div>
  
    <div class="RPboxes">
      <div class="RPbox">
        <span class="RPimageWrap">
          <img src="https://rollei.de/inspiration/wp-content/uploads/2019/03/icon_wirlesscharging.png">
        </span>
        <h3>Powerbnak</h3>
        <p>Pomocí integrované baterie s kapacitou 2200 mAh můžete dobíjet smartphone pomocí USB konektoru či bezdrátové nabíječky.</p>
      </div><!-- RP1-3box -->

      <div class="RPbox">
        <span class="RPimageWrap">
          <img src="https://rollei.de/inspiration/wp-content/uploads/2019/03/icon_wirlesscharging.png">
        </span>
        <h3>Tripod</h3>
        <p>Kompaktní stativ je součástí balení. Využijete ho pro statické záběry a timelapse.</p>
      </div><!-- RP1-3box -->
      
      <div class="RPbox">
        <span class="RPimageWrap">
          <img src="https://rollei.de/inspiration/wp-content/uploads/2019/03/icon_wirlesscharging.png">
        </span>
        <h3>Pouzdro</h3>
        <p>Robustní pouzdro...

CSS

/*globály*/
#RPcontainer { color:white; max-width:786px; margin:0 auto;}
#RPcontainer p,
#RPcontainer h1,
#RPcontainer h2,
#RPcontainer h3,{ color:white;}
#RPcontainer .clear {width:100%; clear:both; height:1px;}



.RPboxes {display:flex;}
@media only screen and (max-width: 750px) {
  .RPboxes {flex-direction: column;}
}

.RPbox  {
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
    background-blend-mode: normal;
    background-image: url(https://rollei.de/inspiration/wp-content/uploads/2019/02/gaming-01.png);
    padding-top: 100px;
    padding-right: 30px;
    padding-left: 30px;
    flex: 1 1 0;}
.RPbox2 { flex-shrink: 3; text-align: left;}
.RPbox2 h3,
.RPbox2 p{color: #333;}
.RPbox3 {padding:15px; text-align:left;}
.RPbox3 img { border-radius:8px; margin-top: 25px;}

.RPcenter100 {width:100%;text-align:center;z-index: 10;position: relative;}
.RPcenter80 {width:80%;text-align:center; margin-left: auto;margin-right: auto;z-index: 10;position: relative;}
.RPimageWrap img {max-height: 60vh;max-width:100%;}
.RPtitle { font-size:2em;text-transform: uppercase;}
.RPsubTitle { font-size:1.3em;text-transform:uppercase;}
.RPanotation { font-size:1.1em;}
.RPfullWtext h3 { font-size:1.3em;text-transform:uppercase; background: rgba(255,255,255,0.22); border-radius: 8px; padding: 10px;}





.RPappLink { white-space: nowrap; display: block; background: linear-gradient(284deg,#2b87da 0%,#29c4a9 100%); margin: 8px 0; padding: 5px 5px; color: white; text-decoration: none; border-radius: 5px; border: 2px solid white; box-shadow: 0 0 3px black; text-align: center;}
.RPappLink:hover { background: linear-gradient(184deg,#2b87da 0%,#29c4a9 100%);text-decoration:underline;}


/* celé sekce */
.RPsect {margin:0;padding:30px;}
#RPsect01 {
    background-size: initial;
    background-repeat: no-repeat;
    background-position: top center;
    background-image:...