elite homepage

by Petr Haluza

HTML

<link rel="stylesheet" href="https://www.rollei-eshop.cz/rollei/stylesheets/style.css?v=1620641683">
<link rel="stylesheet" href="https://www.rollei-eshop.cz/rollei/stylesheets/bootstrap.min.css">
<div class="container">
		<div class="row">

			<div class="col-md-12">
      
				<div class="HP-mainKat">
        
					<div class="col-md-12">
						<a href="#" class="HP-katBox">
							<img src="https://www.img4.cz/elitescreens/www/imgs/kat-platna.jpg" alt="">
							<h3>Projekční plátna</h3>
						</a>
					</div>

					<div class="col-md-4 col-sm-12">
						<a href="#" class="HP-katBox">
							<img src="https://www.img4.cz/elitescreens/www/imgs/kat-drzaky.jpg" alt="">
							<h3>Uchycení projektorů</h3>
						</a>
					</div>

					<div class="col-md-4 col-sm-12">
						<a href="#" class="HP-katBox">
							<img src="https://www.img4.cz/elitescreens/www/imgs/kat-stolky.jpg" alt="">
							<h3>Mobilní stolky pro TV</h3>
						</a>
					</div>

					<div class="col-md-4 col-sm-12">
						<a href="#" class="HP-katBox">
							<img src="https://www.img4.cz/elitescreens/www/imgs/kat-tvdrzaky.jpg" alt="">
							<h3>Upevnění televizorů</h3>
						</a>
					</div>
        
				</div><!-- /.HP-mainKat -->
			</div><!-- /.col-md-12 -->
		</div><!-- /.row -->
	</div>


<div class="container">
		<div class="row">

			<div class="col-md-12">
      <h2 class="HP-heading2">Projekční plátna</h2>
      
				<div class="HP-mainKatMini" >
        
					<div class="col-md-x">
						<a href="#" class="HP-katBoxMini">
							<img src="https://www.img4.cz/elitescreens/www/imgs/kat-pl-electric.jpg" alt="">
							<h3>Elektricky ovládaná</h3>
						</a>
					</div>

					<div class="col-md-x">
						<a href="#" class="HP-katBoxMini">
							<img src="https://www.img4.cz/elitescreens/www/imgs/kat-pl-manual.jpg" alt="">
							<h3>Manuální stažení</h3>
						</a>
					</div>

					<div class="col-md-x">
						<a href="#" class="HP-katBoxMini">
							<img...

CSS

.HP-mainKat { display: flex; flex-wrap: wrap; gap: 15px}
.HP-mainKat > div { padding: 0; }
.HP-mainKat > div.col-md-4 { flex: 1 1 30% }
a.HP-katBox { display:block; position:relative; overflow:hidden; }
a.HP-katBox h3{ position:absolute; left:0; bottom:0; width: 100%; padding: 1em;
    color: white;background: rgba(0,0,0,.5); z-index:1}


.HP-heading2 { margin: 4em 0 1em;  text-align:center; text-transform:uppercase; font-size:1.5em; display: grid;  grid-template-columns: 1fr auto 1fr; grid-template-rows: 16px 0; grid-gap: 22px;}
.HP-heading2:after,.HP-heading2:before { content: " "; display: block; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; background-color:#f8f8f8; height:6px; margin-top:.5em}

.HP-mainKatMini { display:flex;flex-wrap: nowrap; gap:25px; margin: 0 0 4em }
a.HP-katBoxMini { display:block; position:relative; overflow:hidden; }
a.HP-katBoxMini h3 { font-size:1.4em;width:100%; position:relative; text-align:center; padding: 1em 0 0; z-index:2}

a.HP-katBox img,
a.HP-katBoxMini img{ width:100%;  transition: transform .3s}

a.HP-katBox:hover img,
a.HP-katBoxMini:hover img{ transform:scale(1.1)}

@media screen and (max-width: 992px){
  .HP-mainKatMini { flex-wrap:wrap}
  .HP-mainKatMini .col-md-x { flex: 1 1 30%}
 }