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>
|
||||
</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="filter-vert">
|
||||
<h2>Categories</h2>
|
||||
|
|
|
|||
120
style.css
120
style.css
|
|
@ -55,7 +55,7 @@ a:hover {
|
|||
position: relative;
|
||||
min-width: 777px;
|
||||
}
|
||||
.row:nth-child(2n) {
|
||||
.row:nth-child(2n+1) {
|
||||
background: #fef0e4;
|
||||
}
|
||||
.row::before {
|
||||
|
|
@ -97,6 +97,16 @@ a:hover {
|
|||
position: relative;
|
||||
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 {
|
||||
width:20%;
|
||||
float:left;
|
||||
|
|
@ -467,6 +477,114 @@ a:hover {
|
|||
.imprint img {
|
||||
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-variante2-item {
|
||||
width:100%;
|
||||
|
|
|
|||
Loading…
Reference in New Issue