projekte
/
oho
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added different thumbs and date meta

This commit is contained in:
bmen 2019-03-28 12:52:54 +01:00
parent cb78a1eeab
commit eabe2ccc7b
10 changed files with 48 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
img/thumb01.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
img/thumb02.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
img/thumb03.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
img/thumb04.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
img/thumb05.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
img/thumb06.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
img/thumb07.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
img/thumb08.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

42
index.html
View File

@ -132,7 +132,7 @@
<div class="col-1-4-fixed"> <div class="col-1-4-fixed">
<div class="search-results-variante3-item"> <div class="search-results-variante3-item">
<div class="search-results-variante3-item-img"> <div class="search-results-variante3-item-img">
<img src="img/aserradero-portatil-bolport_278x182.jpg" /> <img src="img/thumb01.jpg" />
</div> </div>
<div class="search-results-variante3-item-info"> <div class="search-results-variante3-item-info">
<h2><span>Aserradero portatil Bolport Rm100</span></h2> <h2><span>Aserradero portatil Bolport Rm100</span></h2>
@ -158,13 +158,18 @@
<li><i class="fas fa-book-open"></i></li> <li><i class="fas fa-book-open"></i></li>
</ul> </ul>
<div class="clearer">&nbsp;</div> <div class="clearer">&nbsp;</div>
<div class="search-results-variante3-item-meta-date">
<span class="updated">Updated: 03/27/19</span>
<span class="released">Released: 04/12/15</span>
</div>
<div class="clearer">&nbsp;</div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-1-4-fixed"> <div class="col-1-4-fixed">
<div class="search-results-variante3-item"> <div class="search-results-variante3-item">
<div class="search-results-variante3-item-img"> <div class="search-results-variante3-item-img">
<img src="img/aserradero-portatil-bolport_278x182.jpg" /> <img src="img/thumb02.jpg" />
</div> </div>
<div class="search-results-variante3-item-info"> <div class="search-results-variante3-item-info">
<h2><span>Aserradero portatil Bolport Rm100</span></h2> <h2><span>Aserradero portatil Bolport Rm100</span></h2>
@ -190,13 +195,18 @@
<li><i class="fas fa-book-open"></i></li> <li><i class="fas fa-book-open"></i></li>
</ul> </ul>
<div class="clearer">&nbsp;</div> <div class="clearer">&nbsp;</div>
<div class="search-results-variante3-item-meta-date">
<span class="updated">Updated: 03/27/19</span>
<span class="released">Released: 04/12/15</span>
</div>
<div class="clearer">&nbsp;</div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-1-4-fixed"> <div class="col-1-4-fixed">
<div class="search-results-variante3-item"> <div class="search-results-variante3-item">
<div class="search-results-variante3-item-img"> <div class="search-results-variante3-item-img">
<img src="img/aserradero-portatil-bolport_278x182.jpg" /> <img src="img/thumb03.jpg" />
</div> </div>
<div class="search-results-variante3-item-info"> <div class="search-results-variante3-item-info">
<h2><span>Aserradero portatil Bolport Rm100</span></h2> <h2><span>Aserradero portatil Bolport Rm100</span></h2>
@ -222,13 +232,18 @@
<li><i class="fas fa-book-open"></i></li> <li><i class="fas fa-book-open"></i></li>
</ul> </ul>
<div class="clearer">&nbsp;</div> <div class="clearer">&nbsp;</div>
<div class="search-results-variante3-item-meta-date">
<span class="updated">Updated: 03/27/19</span>
<span class="released">Released: 04/12/15</span>
</div>
<div class="clearer">&nbsp;</div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-1-4-fixed"> <div class="col-1-4-fixed">
<div class="search-results-variante3-item"> <div class="search-results-variante3-item">
<div class="search-results-variante3-item-img"> <div class="search-results-variante3-item-img">
<img src="img/aserradero-portatil-bolport_278x182.jpg" /> <img src="img/thumb04.jpg" />
</div> </div>
<div class="search-results-variante3-item-info"> <div class="search-results-variante3-item-info">
<h2><span>Aserradero portatil Bolport Rm100</span></h2> <h2><span>Aserradero portatil Bolport Rm100</span></h2>
@ -254,13 +269,18 @@
<li><i class="fas fa-book-open"></i></li> <li><i class="fas fa-book-open"></i></li>
</ul> </ul>
<div class="clearer">&nbsp;</div> <div class="clearer">&nbsp;</div>
<div class="search-results-variante3-item-meta-date">
<span class="updated">Updated: 03/27/19</span>
<span class="released">Released: 04/12/15</span>
</div>
<div class="clearer">&nbsp;</div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-1-4-fixed"> <div class="col-1-4-fixed">
<div class="search-results-variante3-item"> <div class="search-results-variante3-item">
<div class="search-results-variante3-item-img"> <div class="search-results-variante3-item-img">
<img src="img/aserradero-portatil-bolport_278x182.jpg" /> <img src="img/thumb05.jpg" />
</div> </div>
<div class="search-results-variante3-item-info"> <div class="search-results-variante3-item-info">
<h2><span>Aserradero portatil Bolport Rm100</span></h2> <h2><span>Aserradero portatil Bolport Rm100</span></h2>
@ -286,13 +306,18 @@
<li><i class="fas fa-book-open"></i></li> <li><i class="fas fa-book-open"></i></li>
</ul> </ul>
<div class="clearer">&nbsp;</div> <div class="clearer">&nbsp;</div>
<div class="search-results-variante3-item-meta-date">
<span class="updated">Updated: 03/27/19</span>
<span class="released">Released: 04/12/15</span>
</div>
<div class="clearer">&nbsp;</div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-1-4-fixed"> <div class="col-1-4-fixed">
<div class="search-results-variante3-item"> <div class="search-results-variante3-item">
<div class="search-results-variante3-item-img"> <div class="search-results-variante3-item-img">
<img src="img/aserradero-portatil-bolport_278x182.jpg" /> <img src="img/thumb06.jpg" />
</div> </div>
<div class="search-results-variante3-item-info"> <div class="search-results-variante3-item-info">
<h2><span>Aserradero portatil Bolport Rm100</span></h2> <h2><span>Aserradero portatil Bolport Rm100</span></h2>
@ -318,6 +343,11 @@
<li><i class="fas fa-book-open"></i></li> <li><i class="fas fa-book-open"></i></li>
</ul> </ul>
<div class="clearer">&nbsp;</div> <div class="clearer">&nbsp;</div>
<div class="search-results-variante3-item-meta-date">
<span class="updated">Updated: 03/27/19</span>
<span class="released">Released: 04/12/15</span>
</div>
<div class="clearer">&nbsp;</div>
</div> </div>
</div> </div>
</div> </div>

12
style.css
View File

@ -507,6 +507,7 @@ a:hover {
clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0);
width:278px; width:278px;
margin:0 0; margin:0 0;
border-radius:8px;
} }
.search-results-variante3-item .search-results-variante3-item-info { .search-results-variante3-item .search-results-variante3-item-info {
background: #fef0e4; background: #fef0e4;
@ -526,6 +527,8 @@ a:hover {
.search-results-variante3-item .search-results-variante3-item-meta { .search-results-variante3-item .search-results-variante3-item-meta {
padding: 5px; padding: 5px;
background:#fff; background:#fff;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
} }
.search-results-variante3-item:hover .search-results-variante3-item-meta { .search-results-variante3-item:hover .search-results-variante3-item-meta {
padding: 5px 10px; padding: 5px 10px;
@ -573,6 +576,15 @@ a:hover {
height:7px; height:7px;
display: block; display: block;
} }
.search-results-variante3-item .search-results-variante3-item-meta .search-results-variante3-item-meta-date {
display:none;
}
.search-results-variante3-item .search-results-variante3-item-meta .search-results-variante3-item-meta-date .released {
float:right;
}
.search-results-variante3-item:hover .search-results-variante3-item-meta .search-results-variante3-item-meta-date {
display:block;
}
.search-results-variante3 svg { .search-results-variante3 svg {
transform: rotate(-90deg); transform: rotate(-90deg);
stroke-dasharray: 251; /* (2PI * 40px) */ stroke-dasharray: 251; /* (2PI * 40px) */