added search result variante 3
This commit is contained in:
bmen
parent
ce00a404c0
commit
cb78a1eeab
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 929 B After Width: | Height: | Size: 929 B |
Binary file not shown.
|
After Width: | Height: | Size: 471 B |
Binary file not shown.
|
After Width: | Height: | Size: 473 B |
200
index.html
200
index.html
|
|
@ -125,6 +125,206 @@
|
||||||
<li style="height:50px;"><span style="width:50px; height:50px; display:block; float:left; background:#db513d;"></span>#db513d (Linkfarbe 1)</li>
|
<li style="height:50px;"><span style="width:50px; height:50px; display:block; float:left; background:#db513d;"></span>#db513d (Linkfarbe 1)</li>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="row search-result-example-variante3">
|
||||||
|
<div class="col-1040">
|
||||||
|
<h1>Suchergebnisgallerie Variante 3</h1>
|
||||||
|
<div class="search-results-variante3">
|
||||||
|
<div class="col-1-4-fixed">
|
||||||
|
<div class="search-results-variante3-item">
|
||||||
|
<div class="search-results-variante3-item-img">
|
||||||
|
<img src="img/aserradero-portatil-bolport_278x182.jpg" />
|
||||||
|
</div>
|
||||||
|
<div class="search-results-variante3-item-info">
|
||||||
|
<h2><span>Aserradero portatil Bolport Rm100</span></h2>
|
||||||
|
<p class="search-results-variante3-item-description">Lorem ipsum dolor sit amet, consetetur saidispscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore a magna aliquyam ...</p>
|
||||||
|
</div>
|
||||||
|
<div class="search-results-variante3-item-meta">
|
||||||
|
<div class="search-results-variante3-item-meta-status">
|
||||||
|
<p>Status</p>
|
||||||
|
<svg height="30" width="30">
|
||||||
|
<circle cx="15" cy="15" r="10" stroke="#296178" stroke-width="6" fill="#fff" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="search-results-variante3-item-meta-compl">
|
||||||
|
<p>Completeness</p>
|
||||||
|
<div class="search-results-variante3-item-meta-compl-bar">
|
||||||
|
<span style="width:25%"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li><img src="img/language-icon.gif" /> DE,EN</li>
|
||||||
|
<li><img src="img/opensource-off.png" /></li>
|
||||||
|
<li>DIN</li>
|
||||||
|
<li><i class="fas fa-book-open"></i></li>
|
||||||
|
</ul>
|
||||||
|
<div class="clearer"> </div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1-4-fixed">
|
||||||
|
<div class="search-results-variante3-item">
|
||||||
|
<div class="search-results-variante3-item-img">
|
||||||
|
<img src="img/aserradero-portatil-bolport_278x182.jpg" />
|
||||||
|
</div>
|
||||||
|
<div class="search-results-variante3-item-info">
|
||||||
|
<h2><span>Aserradero portatil Bolport Rm100</span></h2>
|
||||||
|
<p class="search-results-variante3-item-description">Lorem ipsum dolor sit amet, consetetur saidispscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore a magna aliquyam ...</p>
|
||||||
|
</div>
|
||||||
|
<div class="search-results-variante3-item-meta">
|
||||||
|
<div class="search-results-variante3-item-meta-status">
|
||||||
|
<p>Status</p>
|
||||||
|
<svg height="30" width="30">
|
||||||
|
<circle cx="15" cy="15" r="10" stroke="#296178" stroke-width="6" fill="#fff" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="search-results-variante3-item-meta-compl">
|
||||||
|
<p>Completeness</p>
|
||||||
|
<div class="search-results-variante3-item-meta-compl-bar">
|
||||||
|
<span style="width:25%"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li><img src="img/language-icon.gif" /> DE,EN</li>
|
||||||
|
<li><img src="img/opensource-off.png" /></li>
|
||||||
|
<li>DIN</li>
|
||||||
|
<li><i class="fas fa-book-open"></i></li>
|
||||||
|
</ul>
|
||||||
|
<div class="clearer"> </div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1-4-fixed">
|
||||||
|
<div class="search-results-variante3-item">
|
||||||
|
<div class="search-results-variante3-item-img">
|
||||||
|
<img src="img/aserradero-portatil-bolport_278x182.jpg" />
|
||||||
|
</div>
|
||||||
|
<div class="search-results-variante3-item-info">
|
||||||
|
<h2><span>Aserradero portatil Bolport Rm100</span></h2>
|
||||||
|
<p class="search-results-variante3-item-description">Lorem ipsum dolor sit amet, consetetur saidispscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore a magna aliquyam ...</p>
|
||||||
|
</div>
|
||||||
|
<div class="search-results-variante3-item-meta">
|
||||||
|
<div class="search-results-variante3-item-meta-status">
|
||||||
|
<p>Status</p>
|
||||||
|
<svg height="30" width="30">
|
||||||
|
<circle cx="15" cy="15" r="10" stroke="#296178" stroke-width="6" fill="#fff" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="search-results-variante3-item-meta-compl">
|
||||||
|
<p>Completeness</p>
|
||||||
|
<div class="search-results-variante3-item-meta-compl-bar">
|
||||||
|
<span style="width:25%"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li><img src="img/language-icon.gif" /> DE,EN</li>
|
||||||
|
<li><img src="img/opensource-off.png" /></li>
|
||||||
|
<li>DIN</li>
|
||||||
|
<li><i class="fas fa-book-open"></i></li>
|
||||||
|
</ul>
|
||||||
|
<div class="clearer"> </div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1-4-fixed">
|
||||||
|
<div class="search-results-variante3-item">
|
||||||
|
<div class="search-results-variante3-item-img">
|
||||||
|
<img src="img/aserradero-portatil-bolport_278x182.jpg" />
|
||||||
|
</div>
|
||||||
|
<div class="search-results-variante3-item-info">
|
||||||
|
<h2><span>Aserradero portatil Bolport Rm100</span></h2>
|
||||||
|
<p class="search-results-variante3-item-description">Lorem ipsum dolor sit amet, consetetur saidispscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore a magna aliquyam ...</p>
|
||||||
|
</div>
|
||||||
|
<div class="search-results-variante3-item-meta">
|
||||||
|
<div class="search-results-variante3-item-meta-status">
|
||||||
|
<p>Status</p>
|
||||||
|
<svg height="30" width="30">
|
||||||
|
<circle cx="15" cy="15" r="10" stroke="#296178" stroke-width="6" fill="#fff" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="search-results-variante3-item-meta-compl">
|
||||||
|
<p>Completeness</p>
|
||||||
|
<div class="search-results-variante3-item-meta-compl-bar">
|
||||||
|
<span style="width:25%"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li><img src="img/language-icon.gif" /> DE,EN</li>
|
||||||
|
<li><img src="img/opensource-off.png" /></li>
|
||||||
|
<li>DIN</li>
|
||||||
|
<li><i class="fas fa-book-open"></i></li>
|
||||||
|
</ul>
|
||||||
|
<div class="clearer"> </div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1-4-fixed">
|
||||||
|
<div class="search-results-variante3-item">
|
||||||
|
<div class="search-results-variante3-item-img">
|
||||||
|
<img src="img/aserradero-portatil-bolport_278x182.jpg" />
|
||||||
|
</div>
|
||||||
|
<div class="search-results-variante3-item-info">
|
||||||
|
<h2><span>Aserradero portatil Bolport Rm100</span></h2>
|
||||||
|
<p class="search-results-variante3-item-description">Lorem ipsum dolor sit amet, consetetur saidispscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore a magna aliquyam ...</p>
|
||||||
|
</div>
|
||||||
|
<div class="search-results-variante3-item-meta">
|
||||||
|
<div class="search-results-variante3-item-meta-status">
|
||||||
|
<p>Status</p>
|
||||||
|
<svg height="30" width="30">
|
||||||
|
<circle cx="15" cy="15" r="10" stroke="#296178" stroke-width="6" fill="#fff" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="search-results-variante3-item-meta-compl">
|
||||||
|
<p>Completeness</p>
|
||||||
|
<div class="search-results-variante3-item-meta-compl-bar">
|
||||||
|
<span style="width:25%"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li><img src="img/language-icon.gif" /> DE,EN</li>
|
||||||
|
<li><img src="img/opensource-off.png" /></li>
|
||||||
|
<li>DIN</li>
|
||||||
|
<li><i class="fas fa-book-open"></i></li>
|
||||||
|
</ul>
|
||||||
|
<div class="clearer"> </div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1-4-fixed">
|
||||||
|
<div class="search-results-variante3-item">
|
||||||
|
<div class="search-results-variante3-item-img">
|
||||||
|
<img src="img/aserradero-portatil-bolport_278x182.jpg" />
|
||||||
|
</div>
|
||||||
|
<div class="search-results-variante3-item-info">
|
||||||
|
<h2><span>Aserradero portatil Bolport Rm100</span></h2>
|
||||||
|
<p class="search-results-variante3-item-description">Lorem ipsum dolor sit amet, consetetur saidispscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore a magna aliquyam ...</p>
|
||||||
|
</div>
|
||||||
|
<div class="search-results-variante3-item-meta">
|
||||||
|
<div class="search-results-variante3-item-meta-status">
|
||||||
|
<p>Status</p>
|
||||||
|
<svg height="30" width="30">
|
||||||
|
<circle cx="15" cy="15" r="10" stroke="#296178" stroke-width="6" fill="#fff" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="search-results-variante3-item-meta-compl">
|
||||||
|
<p>Completeness</p>
|
||||||
|
<div class="search-results-variante3-item-meta-compl-bar">
|
||||||
|
<span style="width:25%"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li><img src="img/language-icon.gif" /> DE,EN</li>
|
||||||
|
<li><img src="img/opensource-off.png" /></li>
|
||||||
|
<li>DIN</li>
|
||||||
|
<li><i class="fas fa-book-open"></i></li>
|
||||||
|
</ul>
|
||||||
|
<div class="clearer"> </div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="clearer"> </div>
|
||||||
|
</div>
|
||||||
<div class="row search-result-example-variante2">
|
<div class="row search-result-example-variante2">
|
||||||
<div class="filter-vert">
|
<div class="filter-vert">
|
||||||
<h2>Categories</h2>
|
<h2>Categories</h2>
|
||||||
|
|
|
||||||
120
style.css
120
style.css
|
|
@ -55,7 +55,7 @@ a:hover {
|
||||||
position: relative;
|
position: relative;
|
||||||
min-width: 777px;
|
min-width: 777px;
|
||||||
}
|
}
|
||||||
.row:nth-child(2n) {
|
.row:nth-child(2n+1) {
|
||||||
background: #fef0e4;
|
background: #fef0e4;
|
||||||
}
|
}
|
||||||
.row::before {
|
.row::before {
|
||||||
|
|
@ -97,6 +97,16 @@ a:hover {
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: 250px;
|
min-height: 250px;
|
||||||
}
|
}
|
||||||
|
.col-1-4-fixed {
|
||||||
|
width:245px;
|
||||||
|
margin-right:20px;
|
||||||
|
float:left;
|
||||||
|
position: relative;
|
||||||
|
min-height: 250px;
|
||||||
|
}
|
||||||
|
.col-1-4-fixed:nth-child(4) {
|
||||||
|
margin-right:0;
|
||||||
|
}
|
||||||
.col-1-5 {
|
.col-1-5 {
|
||||||
width:20%;
|
width:20%;
|
||||||
float:left;
|
float:left;
|
||||||
|
|
@ -467,6 +477,114 @@ a:hover {
|
||||||
.imprint img {
|
.imprint img {
|
||||||
margin:0 10px -3px 0;
|
margin:0 10px -3px 0;
|
||||||
}
|
}
|
||||||
|
/****** SEARCH RESULTS Variante 3 ******/
|
||||||
|
.search-results-variante3-item {
|
||||||
|
position: absolute;
|
||||||
|
top:0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
z-index:999;
|
||||||
|
}
|
||||||
|
.search-results-variante3-item:hover {
|
||||||
|
left: -16px;
|
||||||
|
width:278px;
|
||||||
|
z-index:1000;
|
||||||
|
border:1px #002b3e solid;
|
||||||
|
border-radius: 10px;
|
||||||
|
-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-variante3-item .search-results-variante3-item-img {
|
||||||
|
|
||||||
|
}
|
||||||
|
.search-results-variante3-item .search-results-variante3-item-img img {
|
||||||
|
clip-path: inset(33px 0 33px 0);
|
||||||
|
width:245px;
|
||||||
|
margin:-33px 0;
|
||||||
|
}
|
||||||
|
.search-results-variante3-item:hover .search-results-variante3-item-img img {
|
||||||
|
clip-path: inset(0 0 0 0);
|
||||||
|
width:278px;
|
||||||
|
margin:0 0;
|
||||||
|
}
|
||||||
|
.search-results-variante3-item .search-results-variante3-item-info {
|
||||||
|
background: #fef0e4;
|
||||||
|
padding:10px;
|
||||||
|
}
|
||||||
|
.search-results-variante3-item .search-results-variante3-item-info h2 {
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
.search-results-variante3-item .search-results-variante3-item-description {
|
||||||
|
display:none;
|
||||||
|
margin:0;
|
||||||
|
}
|
||||||
|
.search-results-variante3-item:hover .search-results-variante3-item-description {
|
||||||
|
display:block;
|
||||||
|
}
|
||||||
|
.search-results-variante3-item .search-results-variante3-item-meta {
|
||||||
|
padding: 5px;
|
||||||
|
background:#fff;
|
||||||
|
}
|
||||||
|
.search-results-variante3-item:hover .search-results-variante3-item-meta {
|
||||||
|
padding: 5px 10px;
|
||||||
|
}
|
||||||
|
.search-results-variante3-item .search-results-variante3-item-meta p {
|
||||||
|
margin:0;
|
||||||
|
}
|
||||||
|
.search-results-variante3-item .search-results-variante3-item-meta ul {
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
width:180px;
|
||||||
|
}
|
||||||
|
.search-results-variante3-item .search-results-variante3-item-meta li {
|
||||||
|
list-style: none;
|
||||||
|
margin:0;
|
||||||
|
padding:0 8px;
|
||||||
|
float:left;
|
||||||
|
border-right:1px #002b3e solid;
|
||||||
|
}
|
||||||
|
.search-results-variante3-item .search-results-variante3-item-meta li:first-child {
|
||||||
|
padding-left:0;
|
||||||
|
}
|
||||||
|
.search-results-variante3-item .search-results-variante3-item-meta li:last-child {
|
||||||
|
border-right:0;
|
||||||
|
padding-right:0;
|
||||||
|
}
|
||||||
|
.search-results-variante3-item .search-results-variante3-item-meta .search-results-variante3-item-meta-compl {
|
||||||
|
width:180px;
|
||||||
|
float:left;
|
||||||
|
}
|
||||||
|
.search-results-variante3-item .search-results-variante3-item-meta-status {
|
||||||
|
width:35px;
|
||||||
|
padding-left:5px;
|
||||||
|
float:right;
|
||||||
|
border-left:1px #002b3e solid;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.search-results-variante3-item .search-results-variante3-item-meta .search-results-variante3-item-meta-compl-bar {
|
||||||
|
background:#c9d7dd;
|
||||||
|
width:100%;
|
||||||
|
height:7px;
|
||||||
|
}
|
||||||
|
.search-results-variante3-item .search-results-variante3-item-meta .search-results-variante3-item-meta-compl-bar span {
|
||||||
|
background:#296178;
|
||||||
|
height:7px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.search-results-variante3 svg {
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
stroke-dasharray: 251; /* (2PI * 40px) */
|
||||||
|
stroke-dashoffset: 251;
|
||||||
|
animation: offsettozero 1s linear forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes offsettozero {
|
||||||
|
to {
|
||||||
|
stroke-dashoffset: 200;
|
||||||
|
}
|
||||||
|
}
|
||||||
/****** SEARCH RESULTS Variante 2 ******/
|
/****** SEARCH RESULTS Variante 2 ******/
|
||||||
.search-results-variante2-item {
|
.search-results-variante2-item {
|
||||||
width:100%;
|
width:100%;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue