renamed some classes

anton -> variante2
bmen -> variante1
This commit is contained in:
bmen 2019-03-28 11:06:35 +01:00
parent 00bee7dc60
commit cd5ed4c03f
2 changed files with 77 additions and 78 deletions

View File

@ -66,7 +66,6 @@
</ul>
<div class="clearer">&nbsp;</div>
</div>
<div class="banner">
<img src="img/oho_logo_WHITE.svg" />
</div>
@ -113,7 +112,7 @@
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie conse</p>
</div>
</div>
<div class="row search-result-example-anton">
<div class="row search-result-example-variante2">
<div class="filter-vert">
<h2>Categories</h2>
<div id="accordion">
@ -144,15 +143,15 @@
</div>
</div>
<div class="col-777">
<h1>Suchergebnisgallerie von Anton</h1>
<div class="search-results-anton">
<h1>Suchergebnisgallerie Variante 2</h1>
<div class="search-results-variante2">
<div class="col-1-4">
<div class="search-results-anton-item">
<div class="search-results-variante2-item">
<img src="img/aserradero-portatil-bolport.jpg" />
<h2><span>Aserradero portatil Bolport Rm100</span></h2>
<div class="search-results-anton-item-info">
<div class="search-results-variante2-item-info">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore ...</p>
<div class="search-results-anton-item-info-tags">
<div class="search-results-variante2-item-info-tags">
<a href="#"><i class="far fa-clock"></i> 03.04.2017</a>
<a href="#"><i class="fab fa-creative-commons"></i> CC BY-SA</a><br />
<a href="#"><i class="fas fa-business-time"></i> 8 Stunden</a>
@ -161,12 +160,12 @@
</div>
</div>
<div class="col-1-4">
<div class="search-results-anton-item">
<div class="search-results-variante2-item">
<img src="img/aserradero-portatil-bolport.jpg" />
<h2><span>Aserradero portatil Bolport Rm100</span></h2>
<div class="search-results-anton-item-info">
<div class="search-results-variante2-item-info">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore ...</p>
<div class="search-results-anton-item-info-tags">
<div class="search-results-variante2-item-info-tags">
<a href="#"><i class="far fa-clock"></i> 03.04.2017</a>
<a href="#"><i class="fab fa-creative-commons"></i> CC BY-SA</a><br />
<a href="#"><i class="fas fa-business-time"></i> 8 Stunden</a>
@ -175,12 +174,12 @@
</div>
</div>
<div class="col-1-4">
<div class="search-results-anton-item">
<div class="search-results-variante2-item">
<img src="img/aserradero-portatil-bolport.jpg" />
<h2><span>Aserradero portatil Bolport Rm100</span></h2>
<div class="search-results-anton-item-info">
<div class="search-results-variante2-item-info">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore ...</p>
<div class="search-results-anton-item-info-tags">
<div class="search-results-variante2-item-info-tags">
<a href="#"><i class="far fa-clock"></i> 03.04.2017</a>
<a href="#"><i class="fab fa-creative-commons"></i> CC BY-SA</a><br />
<a href="#"><i class="fas fa-business-time"></i> 8 Stunden</a>
@ -189,12 +188,12 @@
</div>
</div>
<div class="col-1-4">
<div class="search-results-anton-item">
<div class="search-results-variante2-item">
<img src="img/aserradero-portatil-bolport.jpg" />
<h2><span>Aserradero portatil Bolport Rm100</span></h2>
<div class="search-results-anton-item-info">
<div class="search-results-variante2-item-info">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore ...</p>
<div class="search-results-anton-item-info-tags">
<div class="search-results-variante2-item-info-tags">
<a href="#"><i class="far fa-clock"></i> 03.04.2017</a>
<a href="#"><i class="fab fa-creative-commons"></i> CC BY-SA</a><br />
<a href="#"><i class="fas fa-business-time"></i> 8 Stunden</a>
@ -203,12 +202,12 @@
</div>
</div>
<div class="col-1-4">
<div class="search-results-anton-item">
<div class="search-results-variante2-item">
<img src="img/aserradero-portatil-bolport.jpg" />
<h2><span>Aserradero portatil Bolport Rm100</span></h2>
<div class="search-results-anton-item-info">
<div class="search-results-variante2-item-info">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore ...</p>
<div class="search-results-anton-item-info-tags">
<div class="search-results-variante2-item-info-tags">
<a href="#"><i class="far fa-clock"></i> 03.04.2017</a>
<a href="#"><i class="fab fa-creative-commons"></i> CC BY-SA</a><br />
<a href="#"><i class="fas fa-business-time"></i> 8 Stunden</a>
@ -217,12 +216,12 @@
</div>
</div>
<div class="col-1-4">
<div class="search-results-anton-item">
<div class="search-results-variante2-item">
<img src="img/aserradero-portatil-bolport.jpg" />
<h2><span>Aserradero portatil Bolport Rm100</span></h2>
<div class="search-results-anton-item-info">
<div class="search-results-variante2-item-info">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore ...</p>
<div class="search-results-anton-item-info-tags">
<div class="search-results-variante2-item-info-tags">
<a href="#"><i class="far fa-clock"></i> 03.04.2017</a>
<a href="#"><i class="fab fa-creative-commons"></i> CC BY-SA</a><br />
<a href="#"><i class="fas fa-business-time"></i> 8 Stunden</a>
@ -231,12 +230,12 @@
</div>
</div>
<div class="col-1-4">
<div class="search-results-anton-item">
<div class="search-results-variante2-item">
<img src="img/aserradero-portatil-bolport.jpg" />
<h2><span>Aserradero portatil Bolport Rm100</span></h2>
<div class="search-results-anton-item-info">
<div class="search-results-variante2-item-info">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore ...</p>
<div class="search-results-anton-item-info-tags">
<div class="search-results-variante2-item-info-tags">
<a href="#"><i class="far fa-clock"></i> 03.04.2017</a>
<a href="#"><i class="fab fa-creative-commons"></i> CC BY-SA</a><br />
<a href="#"><i class="fas fa-business-time"></i> 8 Stunden</a>
@ -248,7 +247,7 @@
</div>
</div>
</div>
<div class="row search-result-example-bmen">
<div class="row search-result-example-variante1">
<div class="filter scroll">
<div class="filter-content">
<div class="filter-category">
@ -279,11 +278,11 @@
<div class="clearer"></div>
</div>
</div>
<div class="search-results-bmen">
<h1>Suchergebnisgallerie von Bastian</h1>
<div class="search-results-variante1">
<h1>Suchergebnisgallerie Variante 1</h1>
<div class="clearer">&nbsp;</div>
<div class="search-results-bmen-grid">
<div class="search-results-bmen-item">
<div class="search-results-variante1-grid">
<div class="search-results-variante1-item">
<img src="img/aserradero-portatil-bolport.jpg" />
<h3>Aserradero portatil Bolport Rm100 mejorado para la fabricacion</h3>
<p class="recerpt">Aserradero portatil Bolport Rm100 mejorado para la fabricacion<br />Estimados clientes: La Empresa fabricante de Aserraderos Portátiles Bolport termino la etapa de perfeccionamiento de las ..</p>
@ -300,8 +299,8 @@
</ul>
</div>
</div>
<div class="search-results-bmen-grid">
<div class="search-results-bmen-item">
<div class="search-results-variante1-grid">
<div class="search-results-variante1-item">
<img src="img/aserradero-portatil-bolport.jpg" />
<h3>Aserradero portatil Bolport Rm100 mejorado para la fabricacion</h3>
<p class="recerpt">Aserradero portatil Bolport Rm100 mejorado para la fabricacion<br />Estimados clientes: La Empresa fabricante de Aserraderos Portátiles Bolport termino la etapa de perfeccionamiento de las ..</p>
@ -318,8 +317,8 @@
</ul>
</div>
</div>
<div class="search-results-bmen-grid">
<div class="search-results-bmen-item">
<div class="search-results-variante1-grid">
<div class="search-results-variante1-item">
<img src="img/aserradero-portatil-bolport.jpg" />
<h3>Aserradero portatil Bolport Rm100 mejorado para la fabricacion</h3>
<p class="recerpt">Aserradero portatil Bolport Rm100 mejorado para la fabricacion<br />Estimados clientes: La Empresa fabricante de Aserraderos Portátiles Bolport termino la etapa de perfeccionamiento de las ..</p>
@ -336,8 +335,8 @@
</ul>
</div>
</div>
<div class="search-results-bmen-grid">
<div class="search-results-bmen-item">
<div class="search-results-variante1-grid">
<div class="search-results-variante1-item">
<img src="img/aserradero-portatil-bolport.jpg" />
<h3>Aserradero portatil Bolport Rm100 mejorado para la fabricacion</h3>
<p class="recerpt">Aserradero portatil Bolport Rm100 mejorado para la fabricacion<br />Estimados clientes: La Empresa fabricante de Aserraderos Portátiles Bolport termino la etapa de perfeccionamiento de las ..</p>
@ -354,8 +353,8 @@
</ul>
</div>
</div>
<div class="search-results-bmen-grid">
<div class="search-results-bmen-item">
<div class="search-results-variante1-grid">
<div class="search-results-variante1-item">
<img src="img/aserradero-portatil-bolport.jpg" />
<h3>Aserradero portatil Bolport Rm100 mejorado para la fabricacion</h3>
<p class="recerpt">Aserradero portatil Bolport Rm100 mejorado para la fabricacion<br />Estimados clientes: La Empresa fabricante de Aserraderos Portátiles Bolport termino la etapa de perfeccionamiento de las ..</p>
@ -372,8 +371,8 @@
</ul>
</div>
</div>
<div class="search-results-bmen-grid">
<div class="search-results-bmen-item">
<div class="search-results-variante1-grid">
<div class="search-results-variante1-item">
<img src="img/aserradero-portatil-bolport.jpg" />
<h3>Aserradero portatil Bolport Rm100 mejorado para la fabricacion</h3>
<p class="recerpt">Aserradero portatil Bolport Rm100 mejorado para la fabricacion<br />Estimados clientes: La Empresa fabricante de Aserraderos Portátiles Bolport termino la etapa de perfeccionamiento de las ..</p>
@ -390,8 +389,8 @@
</ul>
</div>
</div>
<div class="search-results-bmen-grid">
<div class="search-results-bmen-item">
<div class="search-results-variante1-grid">
<div class="search-results-variante1-item">
<img src="img/aserradero-portatil-bolport.jpg" />
<h3>Aserradero portatil Bolport Rm100 mejorado para la fabricacion</h3>
<p class="recerpt">Aserradero portatil Bolport Rm100 mejorado para la fabricacion<br />Estimados clientes: La Empresa fabricante de Aserraderos Portátiles Bolport termino la etapa de perfeccionamiento de las ..</p>
@ -408,8 +407,8 @@
</ul>
</div>
</div>
<div class="search-results-bmen-grid">
<div class="search-results-bmen-item">
<div class="search-results-variante1-grid">
<div class="search-results-variante1-item">
<img src="img/aserradero-portatil-bolport.jpg" />
<h3>Aserradero portatil Bolport Rm100 mejorado para la fabricacion</h3>
<p class="recerpt">Aserradero portatil Bolport Rm100 mejorado para la fabricacion<br />Estimados clientes: La Empresa fabricante de Aserraderos Portátiles Bolport termino la etapa de perfeccionamiento de las ..</p>
@ -426,8 +425,8 @@
</ul>
</div>
</div>
<div class="search-results-bmen-grid">
<div class="search-results-bmen-item">
<div class="search-results-variante1-grid">
<div class="search-results-variante1-item">
<img src="img/aserradero-portatil-bolport.jpg" />
<h3>Aserradero portatil Bolport Rm100 mejorado para la fabricacion</h3>
<p class="recerpt">Aserradero portatil Bolport Rm100 mejorado para la fabricacion<br />Estimados clientes: La Empresa fabricante de Aserraderos Portátiles Bolport termino la etapa de perfeccionamiento de las ..</p>
@ -444,8 +443,8 @@
</ul>
</div>
</div>
<div class="search-results-bmen-grid">
<div class="search-results-bmen-item">
<div class="search-results-variante1-grid">
<div class="search-results-variante1-item">
<img src="img/aserradero-portatil-bolport.jpg" />
<h3>Aserradero portatil Bolport Rm100 mejorado para la fabricacion</h3>
<p class="recerpt">Aserradero portatil Bolport Rm100 mejorado para la fabricacion<br />Estimados clientes: La Empresa fabricante de Aserraderos Portátiles Bolport termino la etapa de perfeccionamiento de las ..</p>
@ -462,8 +461,8 @@
</ul>
</div>
</div>
<div class="search-results-bmen-grid">
<div class="search-results-bmen-item">
<div class="search-results-variante1-grid">
<div class="search-results-variante1-item">
<img src="img/aserradero-portatil-bolport.jpg" />
<h3>Aserradero portatil Bolport Rm100 mejorado para la fabricacion</h3>
<p class="recerpt">Aserradero portatil Bolport Rm100 mejorado para la fabricacion<br />Estimados clientes: La Empresa fabricante de Aserraderos Portátiles Bolport termino la etapa de perfeccionamiento de las ..</p>

View File

@ -463,19 +463,19 @@ a:hover {
.imprint img {
margin:0 10px -3px 0;
}
/****** SEARCH RESULTS Anton ******/
.search-results-anton-item {
/****** SEARCH RESULTS Variante 2 ******/
.search-results-variante2-item {
width:100%;
display: block;
position: relative;
}
.search-results-anton-item:hover {
.search-results-variante2-item:hover {
border:1px #a14032 solid;
-webkit-box-shadow: 10px 10px 60px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 60px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 60px 0px rgba(0,0,0,0.75);
}
.search-results-anton-item h2 {
.search-results-variante2-item h2 {
position: absolute;
top: 7px;
left: 42px;
@ -483,23 +483,23 @@ a:hover {
z-index: 1001;
width:60%;
}
.search-results-anton-item h2 span {
.search-results-variante2-item h2 span {
background:#fff;
display:inline;
padding:2px 5px;
}
.search-results-anton-item:hover h2 {
.search-results-variante2-item:hover h2 {
top:175px;
left: 5px;
width:98%;
}
.search-results-anton-item {
.search-results-variante2-item {
clip-path: inset(0 15% 0 15%);
z-index: 999;
margin-left: -20%;
width:140%;
}
.search-results-anton-item:hover {
.search-results-variante2-item:hover {
position: absolute;
top:-10px;
clip-path: inset(0 0 0 0);
@ -510,25 +510,25 @@ a:hover {
box-shadow: 10px 10px 60px 0px rgba(0,0,0,0.75);
transition: all 0.1s ease;
}
.search-results-anton-item .search-results-anton-item-info {
.search-results-variante2-item .search-results-variante2-item-info {
background: #fef0e4;
padding:0 10px;
display: none;
}
.search-results-anton-item:hover .search-results-anton-item-info {
.search-results-variante2-item:hover .search-results-variante2-item-info {
display: block;
}
.search-results-anton-item .search-results-anton-item-info-tags {
.search-results-variante2-item .search-results-variante2-item-info-tags {
background: #fcd4b1;
margin: 0 -10px;
padding:10px;
}
/****** SEARCH RESULTS BMEN ******/
.search-results-bmen {
.search-results-variante1 {
max-width: 1024px;
margin: 40px auto;
}
.search-results-bmen .search-results-bmen-grid {
.search-results-variante1 .search-results-variante1-grid {
width:25%;
float:left;
position: relative;
@ -536,28 +536,28 @@ a:hover {
min-height: 350px;
margin:20px 0;
}
.search-results-bmen .search-results-bmen-item {
.search-results-variante1 .search-results-variante1-item {
width: 90%;
position: relative;
}
.search-results-bmen .search-results-bmen-item img {
.search-results-variante1 .search-results-variante1-item img {
width:100%;
}
.search-results-bmen .search-results-bmen-item h3 {
.search-results-variante1 .search-results-variante1-item h3 {
margin:4 0;
}
.search-results-bmen .search-results-bmen-item .language img {
.search-results-variante1 .search-results-variante1-item .language img {
width:32px;
margin-top:-3px;
}
.search-results-bmen .search-results-bmen-item .meta-infos div {
.search-results-variante1 .search-results-variante1-item .meta-infos div {
float:left;
margin:0 5px;
}
.search-results-bmen .search-results-bmen-item .recerpt {
.search-results-variante1 .search-results-variante1-item .recerpt {
clear:both;
}
.search-results-bmen .search-results-bmen-item .short-infos {
.search-results-variante1 .search-results-variante1-item .short-infos {
position: absolute;
top:0;
right:10px;
@ -567,24 +567,24 @@ a:hover {
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(255,255,255,0.31) 19%,rgba(255,255,255,0.65) 40%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6ffffff',GradientType=1 );
}
.search-results-bmen .search-results-bmen-item .recerpt {
.search-results-variante1 .search-results-variante1-item .recerpt {
display: none;
}
.search-results-bmen .search-results-bmen-item .short-infos {
.search-results-variante1 .search-results-variante1-item .short-infos {
opacity:0;
}
.search-results-bmen .search-results-bmen-item .short-infos ul {
.search-results-variante1 .search-results-variante1-item .short-infos ul {
padding:0;
display: inline;
}
.search-results-bmen .search-results-bmen-item .short-infos li {
.search-results-variante1 .search-results-variante1-item .short-infos li {
margin: 10px -50px 10px 0;
opacity: 0;
padding:0;
list-style-type: none;
font-size: 140%;
}
.search-results-bmen .search-results-bmen-item:hover {
.search-results-variante1 .search-results-variante1-item:hover {
width: 120%;
position: absolute;
top:-20px;
@ -599,13 +599,13 @@ a:hover {
-moz-box-shadow: 10px 10px 60px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 60px 0px rgba(0,0,0,0.75);
}
.search-results-bmen .search-results-bmen-item:hover .recerpt {
.search-results-variante1 .search-results-variante1-item:hover .recerpt {
display: block;
}
.search-results-bmen .search-results-bmen-item:hover .short-infos {
.search-results-variante1 .search-results-variante1-item:hover .short-infos {
opacity: 1;
}
.search-results-bmen .search-results-bmen-item:hover .short-infos li {
.search-results-variante1 .search-results-variante1-item:hover .short-infos li {
opacity: 1;
margin-right:0;
-webkit-transition: all 0.2s ease-in;