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

renamed css classes

This commit is contained in:
bmen 2019-04-14 23:02:42 +02:00
parent 4f44e8f131
commit 4fa45fda74
3 changed files with 450 additions and 439 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

227
detail.html
View File

@ -9,7 +9,7 @@
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body class="product-detail">
<div class="header-black">
<div class="header">
<ul>
<li><a class="logo" href="/"><img src="img/oho-logo-imprint.png" width="47" height="25" /></a></li>
<li><a href="#">news</a></li>
@ -140,40 +140,40 @@
<div class="clearer">&nbsp;</div>
</div>
</div>
<div class="row last-resulte">
<div class="row last-results">
<div class="col-1040">
<h1>Last Search Resulte</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/thumb01.jpg" />
<h1>Last Search Results</h1>
<div class="search-results-grid">
<div class="col-1-4">
<div class="search-results-item">
<div class="search-results-item-img">
<a href="detail.html"><img src="img/thumb01.jpg" /></a>
</div>
<div class="search-results-variante3-item-info">
<div class="search-results-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>
<p class="search-results-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">
<div class="search-results-item-meta">
<div class="search-results-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">
<div class="search-results-item-meta-compl">
<p>Completeness</p>
<div class="search-results-variante3-item-meta-compl-bar">
<div class="search-results-item-meta-compl-bar">
<span style="width:25%"></span>
</div>
</div>
<ul>
<li><i class="fas fa-language"></i> DE,EN</li>
<li><img src="img/OSH_logo.svg" width="16" /></li>
<li><img style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
<li><i class="fas fa-book-open"></i></li>
<li class="lang"><i class="fas fa-language"></i> DE,EN</li>
<li class="cert"><img class="svg" src="img/OSH_logo.svg" width="16" /></li>
<li class="din"><img class="svg" style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
<li class="doc"><i class="fas fa-book-open"></i></li>
</ul>
<div class="clearer">&nbsp;</div>
<div class="search-results-variante3-item-meta-date">
<div class="search-results-item-meta-date">
<span class="updated">Updated: 03/27/19</span>
<span class="released">Released: 04/12/15</span>
</div>
@ -181,36 +181,36 @@
</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/thumb02.jpg" />
<div class="col-1-4">
<div class="search-results-item">
<div class="search-results-item-img">
<a href="detail.html"><img src="img/thumb02.jpg" /></a>
</div>
<div class="search-results-variante3-item-info">
<div class="search-results-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>
<p class="search-results-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">
<div class="search-results-item-meta">
<div class="search-results-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">
<div class="search-results-item-meta-compl">
<p>Completeness</p>
<div class="search-results-variante3-item-meta-compl-bar">
<div class="search-results-item-meta-compl-bar">
<span style="width:25%"></span>
</div>
</div>
<ul>
<li><i class="fas fa-language"></i> DE,EN</li>
<li><img src="img/OSH_logo.svg" width="16" /></li>
<li><img style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
<li><i class="fas fa-book-open"></i></li>
<li class="lang"><i class="fas fa-language"></i> DE,EN</li>
<li class="cert"><img class="svg" src="img/OSH_logo.svg" width="16" /></li>
<li class="din"><img class="svg" style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
<li class="doc"><i class="fas fa-book-open"></i></li>
</ul>
<div class="clearer">&nbsp;</div>
<div class="search-results-variante3-item-meta-date">
<div class="search-results-item-meta-date">
<span class="updated">Updated: 03/27/19</span>
<span class="released">Released: 04/12/15</span>
</div>
@ -218,36 +218,36 @@
</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/thumb03.jpg" />
<div class="col-1-4">
<div class="search-results-item">
<div class="search-results-item-img">
<a href="detail.html"><img src="img/thumb03.jpg" /></a>
</div>
<div class="search-results-variante3-item-info">
<div class="search-results-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>
<p class="search-results-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">
<div class="search-results-item-meta">
<div class="search-results-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">
<div class="search-results-item-meta-compl">
<p>Completeness</p>
<div class="search-results-variante3-item-meta-compl-bar">
<div class="search-results-item-meta-compl-bar">
<span style="width:25%"></span>
</div>
</div>
<ul>
<li><i class="fas fa-language"></i> DE,EN</li>
<li><img src="img/OSH_logo.svg" width="16" /></li>
<li><img style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
<li><i class="fas fa-book-open"></i></li>
<li class="lang"><i class="fas fa-language"></i> DE,EN</li>
<li class="cert"><img class="svg" src="img/OSH_logo.svg" width="16" /></li>
<li class="din"><img class="svg" style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
<li class="doc"><i class="fas fa-book-open"></i></li>
</ul>
<div class="clearer">&nbsp;</div>
<div class="search-results-variante3-item-meta-date">
<div class="search-results-item-meta-date">
<span class="updated">Updated: 03/27/19</span>
<span class="released">Released: 04/12/15</span>
</div>
@ -255,36 +255,36 @@
</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/thumb04.jpg" />
<div class="col-1-4">
<div class="search-results-item">
<div class="search-results-item-img">
<a href="detail.html"><img src="img/thumb04.jpg" /></a>
</div>
<div class="search-results-variante3-item-info">
<div class="search-results-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>
<p class="search-results-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">
<div class="search-results-item-meta">
<div class="search-results-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">
<div class="search-results-item-meta-compl">
<p>Completeness</p>
<div class="search-results-variante3-item-meta-compl-bar">
<div class="search-results-item-meta-compl-bar">
<span style="width:25%"></span>
</div>
</div>
<ul>
<li><i class="fas fa-language"></i> DE,EN</li>
<li><img src="img/OSH_logo.svg" width="16" /></li>
<li><img style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
<li><i class="fas fa-book-open"></i></li>
<li class="lang"><i class="fas fa-language"></i> DE,EN</li>
<li class="cert"><img class="svg" src="img/OSH_logo.svg" width="16" /></li>
<li class="din"><img class="svg" style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
<li class="doc"><i class="fas fa-book-open"></i></li>
</ul>
<div class="clearer">&nbsp;</div>
<div class="search-results-variante3-item-meta-date">
<div class="search-results-item-meta-date">
<span class="updated">Updated: 03/27/19</span>
<span class="released">Released: 04/12/15</span>
</div>
@ -292,36 +292,36 @@
</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/thumb05.jpg" />
<div class="col-1-4">
<div class="search-results-item">
<div class="search-results-item-img">
<a href="detail.html"><img src="img/thumb05.jpg" /></a>
</div>
<div class="search-results-variante3-item-info">
<div class="search-results-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>
<p class="search-results-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">
<div class="search-results-item-meta">
<div class="search-results-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">
<div class="search-results-item-meta-compl">
<p>Completeness</p>
<div class="search-results-variante3-item-meta-compl-bar">
<div class="search-results-item-meta-compl-bar">
<span style="width:25%"></span>
</div>
</div>
<ul>
<li><i class="fas fa-language"></i> DE,EN</li>
<li><img src="img/OSH_logo.svg" width="16" /></li>
<li><img style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
<li><i class="fas fa-book-open"></i></li>
<li class="lang"><i class="fas fa-language"></i> DE,EN</li>
<li class="cert"><img class="svg" src="img/OSH_logo.svg" width="16" /></li>
<li class="din"><img class="svg" style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
<li class="doc"><i class="fas fa-book-open"></i></li>
</ul>
<div class="clearer">&nbsp;</div>
<div class="search-results-variante3-item-meta-date">
<div class="search-results-item-meta-date">
<span class="updated">Updated: 03/27/19</span>
<span class="released">Released: 04/12/15</span>
</div>
@ -329,36 +329,73 @@
</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/thumb06.jpg" />
<div class="col-1-4">
<div class="search-results-item">
<div class="search-results-item-img">
<a href="detail.html"><img src="img/thumb06.jpg" /></a>
</div>
<div class="search-results-variante3-item-info">
<div class="search-results-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>
<p class="search-results-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">
<div class="search-results-item-meta">
<div class="search-results-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">
<div class="search-results-item-meta-compl">
<p>Completeness</p>
<div class="search-results-variante3-item-meta-compl-bar">
<div class="search-results-item-meta-compl-bar">
<span style="width:25%"></span>
</div>
</div>
<ul>
<li><i class="fas fa-language"></i> DE,EN</li>
<li><img src="img/OSH_logo.svg" width="16" /></li>
<li><img style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
<li><i class="fas fa-book-open"></i></li>
<li class="lang"><i class="fas fa-language"></i> DE,EN</li>
<li class="cert"><img class="svg" src="img/OSH_logo.svg" width="16" /></li>
<li class="din"><img class="svg" style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
<li class="doc"><i class="fas fa-book-open"></i></li>
</ul>
<div class="clearer">&nbsp;</div>
<div class="search-results-variante3-item-meta-date">
<div class="search-results-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 class="col-1-4">
<div class="search-results-item">
<div class="search-results-item-img">
<a href="detail.html"><img src="img/thumb07.jpg" /></a>
</div>
<div class="search-results-item-info">
<h2><span>Aserradero portatil Bolport Rm100</span></h2>
<p class="search-results-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-item-meta">
<div class="search-results-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-item-meta-compl">
<p>Completeness</p>
<div class="search-results-item-meta-compl-bar">
<span style="width:25%"></span>
</div>
</div>
<ul>
<li class="lang"><i class="fas fa-language"></i> DE,EN</li>
<li class="cert"><img class="svg" src="img/OSH_logo.svg" width="16" /></li>
<li class="din"><img class="svg" style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
<li class="doc"><i class="fas fa-book-open"></i></li>
</ul>
<div class="clearer">&nbsp;</div>
<div class="search-results-item-meta-date">
<span class="updated">Updated: 03/27/19</span>
<span class="released">Released: 04/12/15</span>
</div>
@ -371,7 +408,7 @@
</div>
</div>
<div class="footer">
<div class="col-1055">
<div class="col-1040">
<div class="col-1-5">
<h3>Categories</h3>
<ul>

160
index.html
View File

@ -10,7 +10,7 @@
<script src="js/img-svg-color.js"></script>
</head>
<body>
<div class="header-black">
<div class="header">
<ul>
<li><a class="logo" href="#"><img src="img/oho-logo-imprint.png" width="47" height="25" /></a></li>
<li><a href="#">news</a></li>
@ -25,7 +25,7 @@
<div class="banner">
<img src="img/oho_logo_WHITE.svg" />
</div>
<div class="row headline">
<div class="row home-search-intro">
<form class="search-content">
<input class="search-field-content" id="searchfield-global" type="text" name="search" placeholder="What Open Hardware are you looking for?" />
<button type="submit" value="Submit">
@ -62,35 +62,35 @@
</div>
<div class="row text-example">
<div class="col-777">
<h1><strong>Headline1</strong></h1>
<h1><strong>Headline 1</strong></h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 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 co.</p>
<h2>Headline 2 Seed diam nonum</h2>
<h2>home-search-intro 2 Seed diam nonum</h2>
<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-variante3">
<div class="row search-results">
<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">
<div class="search-results-grid">
<div class="col-1-4">
<div class="search-results-item">
<div class="search-results-item-img">
<a href="detail.html"><img src="img/thumb01.jpg" /></a>
</div>
<div class="search-results-variante3-item-info">
<div class="search-results-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>
<p class="search-results-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">
<div class="search-results-item-meta">
<div class="search-results-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">
<div class="search-results-item-meta-compl">
<p>Completeness</p>
<div class="search-results-variante3-item-meta-compl-bar">
<div class="search-results-item-meta-compl-bar">
<span style="width:25%"></span>
</div>
</div>
@ -101,7 +101,7 @@
<li class="doc"><i class="fas fa-book-open"></i></li>
</ul>
<div class="clearer">&nbsp;</div>
<div class="search-results-variante3-item-meta-date">
<div class="search-results-item-meta-date">
<span class="updated">Updated: 03/27/19</span>
<span class="released">Released: 04/12/15</span>
</div>
@ -109,25 +109,25 @@
</div>
</div>
</div>
<div class="col-1-4-fixed">
<div class="search-results-variante3-item">
<div class="search-results-variante3-item-img">
<div class="col-1-4">
<div class="search-results-item">
<div class="search-results-item-img">
<a href="detail.html"><img src="img/thumb02.jpg" /></a>
</div>
<div class="search-results-variante3-item-info">
<div class="search-results-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>
<p class="search-results-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">
<div class="search-results-item-meta">
<div class="search-results-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">
<div class="search-results-item-meta-compl">
<p>Completeness</p>
<div class="search-results-variante3-item-meta-compl-bar">
<div class="search-results-item-meta-compl-bar">
<span style="width:25%"></span>
</div>
</div>
@ -138,7 +138,7 @@
<li class="doc"><i class="fas fa-book-open"></i></li>
</ul>
<div class="clearer">&nbsp;</div>
<div class="search-results-variante3-item-meta-date">
<div class="search-results-item-meta-date">
<span class="updated">Updated: 03/27/19</span>
<span class="released">Released: 04/12/15</span>
</div>
@ -146,25 +146,25 @@
</div>
</div>
</div>
<div class="col-1-4-fixed">
<div class="search-results-variante3-item">
<div class="search-results-variante3-item-img">
<div class="col-1-4">
<div class="search-results-item">
<div class="search-results-item-img">
<a href="detail.html"><img src="img/thumb03.jpg" /></a>
</div>
<div class="search-results-variante3-item-info">
<div class="search-results-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>
<p class="search-results-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">
<div class="search-results-item-meta">
<div class="search-results-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">
<div class="search-results-item-meta-compl">
<p>Completeness</p>
<div class="search-results-variante3-item-meta-compl-bar">
<div class="search-results-item-meta-compl-bar">
<span style="width:25%"></span>
</div>
</div>
@ -175,7 +175,7 @@
<li class="doc"><i class="fas fa-book-open"></i></li>
</ul>
<div class="clearer">&nbsp;</div>
<div class="search-results-variante3-item-meta-date">
<div class="search-results-item-meta-date">
<span class="updated">Updated: 03/27/19</span>
<span class="released">Released: 04/12/15</span>
</div>
@ -183,25 +183,25 @@
</div>
</div>
</div>
<div class="col-1-4-fixed">
<div class="search-results-variante3-item">
<div class="search-results-variante3-item-img">
<div class="col-1-4">
<div class="search-results-item">
<div class="search-results-item-img">
<a href="detail.html"><img src="img/thumb04.jpg" /></a>
</div>
<div class="search-results-variante3-item-info">
<div class="search-results-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>
<p class="search-results-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">
<div class="search-results-item-meta">
<div class="search-results-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">
<div class="search-results-item-meta-compl">
<p>Completeness</p>
<div class="search-results-variante3-item-meta-compl-bar">
<div class="search-results-item-meta-compl-bar">
<span style="width:25%"></span>
</div>
</div>
@ -212,7 +212,7 @@
<li class="doc"><i class="fas fa-book-open"></i></li>
</ul>
<div class="clearer">&nbsp;</div>
<div class="search-results-variante3-item-meta-date">
<div class="search-results-item-meta-date">
<span class="updated">Updated: 03/27/19</span>
<span class="released">Released: 04/12/15</span>
</div>
@ -220,25 +220,25 @@
</div>
</div>
</div>
<div class="col-1-4-fixed">
<div class="search-results-variante3-item">
<div class="search-results-variante3-item-img">
<div class="col-1-4">
<div class="search-results-item">
<div class="search-results-item-img">
<a href="detail.html"><img src="img/thumb05.jpg" /></a>
</div>
<div class="search-results-variante3-item-info">
<div class="search-results-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>
<p class="search-results-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">
<div class="search-results-item-meta">
<div class="search-results-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">
<div class="search-results-item-meta-compl">
<p>Completeness</p>
<div class="search-results-variante3-item-meta-compl-bar">
<div class="search-results-item-meta-compl-bar">
<span style="width:25%"></span>
</div>
</div>
@ -249,7 +249,7 @@
<li class="doc"><i class="fas fa-book-open"></i></li>
</ul>
<div class="clearer">&nbsp;</div>
<div class="search-results-variante3-item-meta-date">
<div class="search-results-item-meta-date">
<span class="updated">Updated: 03/27/19</span>
<span class="released">Released: 04/12/15</span>
</div>
@ -257,25 +257,25 @@
</div>
</div>
</div>
<div class="col-1-4-fixed">
<div class="search-results-variante3-item">
<div class="search-results-variante3-item-img">
<div class="col-1-4">
<div class="search-results-item">
<div class="search-results-item-img">
<a href="detail.html"><img src="img/thumb06.jpg" /></a>
</div>
<div class="search-results-variante3-item-info">
<div class="search-results-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>
<p class="search-results-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">
<div class="search-results-item-meta">
<div class="search-results-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">
<div class="search-results-item-meta-compl">
<p>Completeness</p>
<div class="search-results-variante3-item-meta-compl-bar">
<div class="search-results-item-meta-compl-bar">
<span style="width:25%"></span>
</div>
</div>
@ -286,7 +286,7 @@
<li class="doc"><i class="fas fa-book-open"></i></li>
</ul>
<div class="clearer">&nbsp;</div>
<div class="search-results-variante3-item-meta-date">
<div class="search-results-item-meta-date">
<span class="updated">Updated: 03/27/19</span>
<span class="released">Released: 04/12/15</span>
</div>
@ -294,25 +294,25 @@
</div>
</div>
</div>
<div class="col-1-4-fixed">
<div class="search-results-variante3-item">
<div class="search-results-variante3-item-img">
<div class="col-1-4">
<div class="search-results-item">
<div class="search-results-item-img">
<a href="detail.html"><img src="img/thumb07.jpg" /></a>
</div>
<div class="search-results-variante3-item-info">
<div class="search-results-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>
<p class="search-results-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">
<div class="search-results-item-meta">
<div class="search-results-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">
<div class="search-results-item-meta-compl">
<p>Completeness</p>
<div class="search-results-variante3-item-meta-compl-bar">
<div class="search-results-item-meta-compl-bar">
<span style="width:25%"></span>
</div>
</div>
@ -323,7 +323,7 @@
<li class="doc"><i class="fas fa-book-open"></i></li>
</ul>
<div class="clearer">&nbsp;</div>
<div class="search-results-variante3-item-meta-date">
<div class="search-results-item-meta-date">
<span class="updated">Updated: 03/27/19</span>
<span class="released">Released: 04/12/15</span>
</div>
@ -336,9 +336,9 @@
<div class="clearer">&nbsp;</div>
</div>
<div class="row styleguide">
<div class="col-1040">
<div class="col-777">
<h1>Styleguide</h1>
<h2>Farben</h2>
<h2>Colors</h2>
<ul>
<li style="height:50px;"><span style="width:50px; height:50px; display:block; float:left; background:#fef0e4;"></span>#fef0e4 (Content-Hintergrund)</li>
<li style="height:50px;"><span style="width:50px; height:50px; display:block; float:left; background:#fcd4b1;"></span>#fcd4b1 (Men&uuml;punkte)</li>
@ -354,12 +354,12 @@
<div class="clearer">&nbsp;</div>
<img style="float:left; margin-right:20px;" src="img/news-thumb.jpg" />
<p style="margin-top:0;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 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 co.</p>
<h2>Headline 2 Seed diam nonum</h2>
<h2>home-search-intro 2 Seed diam nonum</h2>
<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="footer">
<div class="col-1055">
<div class="col-1040">
<div class="col-1-5">
<h3>Categories</h3>
<ul>

502
style.css
View File

@ -1,9 +1,9 @@
/****** GENERAL ******/
body {
margin:0;
font-family: 'Open Sans', sans-serif;
font-family:'Open Sans', sans-serif;
color:#002b3e;
font-size: 14px;
font-size:14px;
}
h1,
h2,
@ -11,53 +11,53 @@ h3,
h4,
h5,
h6 {
font-weight: 900;
line-height: 22px;
font-weight:900;
line-height:22px;
}
h1 {
font-size: 18px;
font-weight : bolder;
font-size:18px;
font-weight :bolder;
color:#296178;
border-bottom: 1px #a14032 solid;
border-bottom:1px #a14032 solid;
display:inline-block;
margin-bottom:20px;
}
h2 {
font-size: 100%;
font-size:100%;
margin-bottom:-14px;
font-weight: bold;
font-weight:bold;
}
p {
line-height: 22px;
line-height:22px;
margin:18px 0;
}
a {
color:#000;
text-decoration: none;
text-decoration:none;
}
a:hover {
color: green;
color:green;
}
.clearer {
clear: both;
clear:both;
height:0;
line-height: 0;
line-height:0;
margin:0;
padding:0;
}
.red {
color: #db513d;
color:#db513d;
}
.row {
clear: both;
clear:both;
padding:60px 0;
display: block;
position: relative;
min-width: 777px;
background: -moz-linear-gradient(top, rgba(254,240,228,1) 0%, rgba(255,255,255,0) 25%);
background: -webkit-linear-gradient(top, rgba(254,240,228,1) 0%,rgba(255,255,255,0) 25%);
background: linear-gradient(to bottom, rgba(254,240,228,1) 0%,rgba(255,255,255,0) 25%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fef0e4', endColorstr='#00ffffff',GradientType=0 );
display:block;
position:relative;
min-width:777px;
background:-moz-linear-gradient(top, rgba(254,240,228,1) 0%, rgba(255,255,255,0) 25%);
background:-webkit-linear-gradient(top, rgba(254,240,228,1) 0%,rgba(255,255,255,0) 25%);
background:linear-gradient(to bottom, rgba(254,240,228,1) 0%,rgba(255,255,255,0) 25%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#fef0e4', endColorstr='#00ffffff',GradientType=0 );
}
.product-detail .row.content {
margin-top:118px;
@ -66,23 +66,23 @@ a:hover {
.row::before {
width:120px;
height:20px;
background: #a24033;
display: block;
content: "";
position: absolute;
top: -10px;
left: 0;
background:#a24033;
display:block;
content:"";
position:absolute;
top:-10px;
left:0;
z-index:10001;
}
.row::after {
width:120px;
height:20px;
background: #a24033;
display: block;
content: "";
position: absolute;
top: -10px;
right: 0;
background:#a24033;
display:block;
content:"";
position:absolute;
top:-10px;
right:0;
z-index:10001;
}
.col-777 {
@ -93,69 +93,58 @@ a:hover {
max-width:1040px;
margin:0 auto;
}
.col-1055 {
max-width: 1055px;
margin:0 auto;
}
.col-1-3 {
width:36%;
float:left;
position: relative;
position:relative;
}
.col-2-3 {
width:62%;
margin-right:20px;
float:left;
position: relative;
position:relative;
}
.col-1-4 {
width:22%;
margin-right:20px;
float:left;
position: relative;
min-height: 250px;
}
.col-1-4-fixed {
width:245px;
margin-right:20px;
float:left;
position: relative;
min-height: 250px;
position:relative;
min-height:250px;
}
.col-1-4-fixed:nth-child(4) {
.col-1-4:nth-child(4) {
margin-right:0;
}
.col-1-5 {
width:20%;
float:left;
position: relative;
position:relative;
}
/****** HEADER BLACK ******/
.header-black {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 10000;
/****** HEADER ******/
.header {
position:fixed;
top:0;
left:0;
width:100%;
background:rgba(0, 0, 0, 0.7);
z-index:10000;
}
.header-black ul {
.header ul {
max-width:900px;
margin:0 auto;
}
.header-black li {
list-style: none;
.header li {
list-style:none;
float:left;
margin:0;
}
.header-black li a {
.header li a {
color:#fcd4b1;
font-size: 110%;
font-size:110%;
padding:20px 15px 20px 15px;
display: block;
display:block;
}
.header-black li a:hover {
background: #296178;
.header li a:hover {
background:#296178;
}
/****** SEARCHBAR ******/
.searchbar {
@ -163,7 +152,7 @@ a:hover {
top:65px;
width:100%;
padding:6px 0;
background: rgba(252, 212, 177, 0.7);
background:rgba(252, 212, 177, 0.7);
z-index:10000;
}
.searchbar form {
@ -171,16 +160,16 @@ a:hover {
}
.searchbar .searchfield {
width:390px;
position: relative;
position:relative;
float:left;
}
.searchbar .searchfield input[type="text"] {
border:2px #a14032 solid;
border-radius: 7px;
border-radius:7px;
font-size:100%;
padding:6px 40px 6px 10px;
color:#002b3e;
width: 100%;
width:100%;
margin:4px;
}
.searchbar .searchfield input[type="text"]:focus {
@ -189,17 +178,17 @@ a:hover {
margin:3px;
}
.searchbar button {
position: absolute;
position:absolute;
color:#a14032;
top:4px;
right:-3px;
border:0;
font-size: 140%;
cursor: pointer;
font-size:140%;
cursor:pointer;
padding:7px 10px 6px 10px;
background: transparent;
border-bottom-right-radius: 6px;
border-top-right-radius: 7px;
background:transparent;
border-bottom-right-radius:6px;
border-top-right-radius:7px;
border-left:1px #a14032 solid;
}
.searchbar button:hover {
@ -207,161 +196,147 @@ a:hover {
background:#a14032;
}
.searchbar select {
position: relative;
display: block;
position:relative;
display:block;
border:2px #a14032 solid;
background: #fff;
width: 120px;
padding: 5px;
font-size: 100%;
line-height: 1;
border-radius: 7px;
height: 32px;
-webkit-appearance: none;
float: left;
margin: 4px 10px 4px 0;
background:#fff;
width:120px;
padding:5px;
font-size:100%;
line-height:1;
border-radius:7px;
height:32px;
-webkit-appearance:none;
float:left;
margin:4px 10px 4px 0;
}
.searchbar select:last-of-type {
margin-right: 0;
margin-right:0;
}
.searchbar select:focus {
outline:none;
}
.searchbar select::after {
content:"\f0dc";
font-family: FontAwesome;
color: #000;
padding: 12px 8px;
position: absolute; right: 0; top: 0;
background: red;
z-index: 1;
text-align: center;
width: 10%;
height: 100%;
pointer-events: none;
box-sizing: border-box;
}
.searchbar .search-filter-important {
width:auto;
float:right;
}
/****** BANNER ******/
.banner {
background: url(img/backgroun01.jpg) 0 0 no-repeat;
padding: 100px 0 40px 0;
background:url(img/backgroun01.jpg) 0 0 no-repeat;
padding:100px 0 40px 0;
}
.banner img {
width:392px;
display: block;
margin: 0 auto;
display:block;
margin:0 auto;
}
/****** HEADLINE ******/
.headline {
text-align: center;
font-family: 'Lora', serif;
font-style: italic;
font-size: 150%;
line-height: 150%;
/****** home-search-intro ******/
.home-search-intro {
text-align:center;
font-family:'Lora', serif;
font-style:italic;
font-size:150%;
line-height:150%;
}
.headline p {
line-height: 140%;
.home-search-intro p {
line-height:140%;
}
.headline form {
position: relative;
.home-search-intro form {
position:relative;
width:550px;
margin:20px auto 40px auto;
}
.headline input.search-field-content {
.home-search-intro input.search-field-content {
border:2px #a14032 solid;
border-radius: 7px;
border-radius:7px;
font-size:100%;
padding:10px 40px 10px 10px;
color:#002b3e;
width: 100%;
width:100%;
margin:2px;
}
.headline input.search-field-content:focus {
.home-search-intro input.search-field-content:focus {
border:3px #a14032 solid;
outline:none;
margin:1px;
}
.headline .search-filter-quick {
display: none;
.home-search-intro .search-filter-quick {
display:none;
}
.headline button {
position: absolute;
.home-search-intro button {
position:absolute;
color:#a14032;
top:0;
right:0;
border:0;
font-size: 140%;
cursor: pointer;
font-size:140%;
cursor:pointer;
padding:9px 9px 9px 11px;
margin: 2px 0 0 0;
background: transparent;
border-bottom-right-radius: 8px;
border-top-right-radius: 8px;
margin:2px 0 0 0;
background:transparent;
border-bottom-right-radius:8px;
border-top-right-radius:8px;
}
.headline button:hover {
.home-search-intro button:hover {
color:#fff;
background:#a14032;
}
.search-filter-quick {
text-align: left;
text-align:left;
padding:0 20px;
}
.search-filter-quick a {
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-family:'Open Sans', sans-serif;
font-style:normal;
color:#a14032;
font-size: 70%;
font-size:70%;
}
.search-filter-quick a:last-of-type {
float: right;
float:right;
}
.headline select {
position: relative;
display: block;
.home-search-intro select {
position:relative;
display:block;
border:2px #a14032 solid;
background: transparent;
width: 150px;
padding: 5px;
font-size: 100%;
line-height: 1;
border-radius: 7px;
height: 45px;
-webkit-appearance: none;
float: left;
margin: 3px 30px 0 0;
background:transparent;
width:150px;
padding:5px;
font-size:100%;
line-height:1;
border-radius:7px;
height:45px;
-webkit-appearance:none;
float:left;
margin:3px 30px 0 0;
}
.headline select:last-of-type {
margin-right: 0;
.home-search-intro select:last-of-type {
margin-right:0;
}
.headline select:focus {
.home-search-intro select:focus {
outline:none;
}
.headline select::after {
.home-search-intro select::after {
content:"\f0dc";
font-family: FontAwesome;
color: #000;
padding: 12px 8px;
position: absolute; right: 0; top: 0;
background: red;
z-index: 1;
text-align: center;
width: 10%;
height: 100%;
pointer-events: none;
box-sizing: border-box;
font-family:FontAwesome;
color:#000;
padding:12px 8px;
position:absolute; right:0; top:0;
background:red;
z-index:1;
text-align:center;
width:10%;
height:100%;
pointer-events:none;
box-sizing:border-box;
}
/****** FOOTER ******/
.footer {
background: url(img/backgroun02.jpg) 0 0 no-repeat;
background:url(img/backgroun02.jpg) 0 0 no-repeat;
padding:60px 0;
}
.footer h3 {
color:#fff;
margin: 4px 0;
margin:4px 0;
}
.footer a {
color:#fcd4b1;
@ -371,17 +346,17 @@ a:hover {
}
.footer ul {
padding:0;
margin: 0;
margin:0;
}
.footer li {
list-style-type: none;
padding: 2px 0;
margin: 0;
list-style-type:none;
padding:2px 0;
margin:0;
}
/****** IMPRINT ******/
.imprint {
background: #000;
text-align: center;
background:#000;
text-align:center;
color:#fcd4b1;
padding:10px 0;
}
@ -395,193 +370,192 @@ a:hover {
margin:0 10px -3px 0;
}
/****** SEARCH RESULTS Variante 3 ******/
.search-results-variante3-item {
position: absolute;
.search-results-item {
position:absolute;
top:0;
left: 0;
width: 100%;
left:0;
width:100%;
z-index:999;
}
.search-results-variante3-item:hover {
.search-results-item:hover {
top:-10px;
left: -16px;
left:-16px;
width:278px;
z-index:1000;
border:1px #002b3e solid;
border-radius: 7px;
-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);
border-radius:7px;
-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 {
border-top-left-radius: 7px;
border-top-right-radius: 7px;
.search-results-item .search-results-item-img {
border-top-left-radius:7px;
border-top-right-radius:7px;
}
.search-results-variante3-item .search-results-variante3-item-img img {
-webkit-clip-path: inset(33px 0 33px 0);
clip-path: inset(33px 0 33px 0);
.search-results-item .search-results-item-img img {
-webkit-clip-path:inset(33px 0 33px 0);
clip-path:inset(33px 0 33px 0);
width:245px;
margin:-33px 0;
}
.search-results-variante3-item:hover .search-results-variante3-item-img img {
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
.search-results-item:hover .search-results-item-img img {
-webkit-clip-path:inset(0 0 0 0);
clip-path:inset(0 0 0 0);
width:278px;
margin:0 0;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-top-left-radius:6px;
border-top-right-radius:6px;
}
.search-results-variante3-item .search-results-variante3-item-info {
background: #fef0e4;
.search-results-item .search-results-item-info {
background:#fef0e4;
padding:10px;
border-bottom-right-radius: 7px;
border-bottom-left-radius: 7px;
border-bottom-right-radius:7px;
border-bottom-left-radius:7px;
}
.search-results-variante3-item:hover .search-results-variante3-item-info {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
.search-results-item:hover .search-results-item-info {
border-bottom-right-radius:0;
border-bottom-left-radius:0;
}
.search-results-variante3-item .search-results-variante3-item-info h2 {
.search-results-item .search-results-item-info h2 {
margin:0;
padding:0;
}
.search-results-variante3-item .search-results-variante3-item-description {
.search-results-item .search-results-item-description {
display:none;
margin:0;
}
.search-results-variante3-item:hover .search-results-variante3-item-description {
.search-results-item:hover .search-results-item-description {
display:block;
}
.search-results-variante3-item .search-results-variante3-item-meta {
padding: 5px;
.search-results-item .search-results-item-meta {
padding:5px;
background:#fff;
border-bottom-right-radius: 7px;
border-bottom-left-radius: 7px;
font-size: 11px;
border-bottom-right-radius:7px;
border-bottom-left-radius:7px;
font-size:11px;
}
.search-results-variante3-item:hover .search-results-variante3-item-meta {
padding: 5px 10px;
.search-results-item:hover .search-results-item-meta {
padding:5px 10px;
}
.search-results-variante3-item .search-results-variante3-item-meta p {
.search-results-item .search-results-item-meta p {
margin:0;
}
.search-results-variante3-item .search-results-variante3-item-meta ul {
.search-results-item .search-results-item-meta ul {
margin:0;
padding:0;
width:180px;
}
.search-results-variante3-item .search-results-variante3-item-meta li {
list-style: none;
.search-results-item .search-results-item-meta li {
list-style:none;
margin:0;
padding:2px 11px;
float:left;
border-right:1px #002b3e solid;
height:16px;
}
.search-results-variante3-item .search-results-variante3-item-meta li {
.search-results-item .search-results-item-meta li {
}
.search-results-variante3-item .search-results-variante3-item-meta li.cert svg {
width: 16px;
.search-results-item .search-results-item-meta li.cert svg {
width:16px;
}
.search-results-variante3-item .search-results-variante3-item-meta li.din svg {
.search-results-item .search-results-item-meta li.din svg {
margin-top:-2px;
width: 20px;
width:20px;
}
.search-results-variante3-item .search-results-variante3-item-meta li svg path {
fill: #296178 !important;
.search-results-item .search-results-item-meta li svg path {
fill:#296178 !important;
}
.search-results-variante3-item:hover .search-results-variante3-item-meta li {
.search-results-item:hover .search-results-item-meta li {
padding:2px 11px;
}
.search-results-variante3-item .search-results-variante3-item-meta li i {
.search-results-item .search-results-item-meta li i {
font-size:13px;
color:#296178;
}
.search-results-variante3-item .search-results-variante3-item-meta li:first-child {
.search-results-item .search-results-item-meta li:first-child {
padding-left:0;
}
.search-results-variante3-item .search-results-variante3-item-meta li:last-child {
.search-results-item .search-results-item-meta li:last-child {
border-right:0;
padding-right:0;
}
.search-results-variante3-item:hover .search-results-variante3-item-meta li:last-child {
.search-results-item:hover .search-results-item-meta li:last-child {
padding-left:10px;
}
.search-results-variante3-item .search-results-variante3-item-meta .search-results-variante3-item-meta-compl {
.search-results-item .search-results-item-meta .search-results-item-meta-compl {
width:180px;
float:left;
margin-bottom:6px;
}
.search-results-variante3-item:hover .search-results-variante3-item-meta .search-results-variante3-item-meta-compl {
.search-results-item:hover .search-results-item-meta .search-results-item-meta-compl {
width:205px;
}
.search-results-variante3-item .search-results-variante3-item-meta-status {
.search-results-item .search-results-item-meta-status {
width:35px;
padding:0 0 3px 5px;
float:right;
border-left:1px #002b3e solid;
text-align: center;
text-align:center;
}
.search-results-variante3-item .search-results-variante3-item-meta .search-results-variante3-item-meta-compl-bar {
.search-results-item .search-results-item-meta .search-results-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 {
.search-results-item .search-results-item-meta .search-results-item-meta-compl-bar span {
background:#296178;
height:7px;
display: block;
display:block;
}
.search-results-variante3-item .search-results-variante3-item-meta .search-results-variante3-item-meta-date {
.search-results-item .search-results-item-meta .search-results-item-meta-date {
display:none;
margin-top:3px;
}
.search-results-variante3-item:hover .search-results-variante3-item-meta .search-results-variante3-item-meta-date {
.search-results-item:hover .search-results-item-meta .search-results-item-meta-date {
display:block;
}
.search-results-variante3-item .search-results-variante3-item-meta .search-results-variante3-item-meta-date .released {
.search-results-item .search-results-item-meta .search-results-item-meta-date .released {
float:right;
}
.search-results-variante3 .search-results-variante3-item-meta-status svg {
transform: rotate(-90deg);
stroke-dasharray: 251; /* (2PI * 40px) */
stroke-dashoffset: 251;
animation: offsettozero 1s linear forwards;
.search-results-item .search-results-item-meta-status svg {
transform:rotate(-90deg);
stroke-dasharray:251; /* (2PI * 40px) */
stroke-dashoffset:251;
animation:offsettozero 1s linear forwards;
}
@keyframes offsettozero {
to {
stroke-dashoffset: 200;
stroke-dashoffset:200;
}
}
/****** PRODUCT DETAIL PAGE ******/
.product-detail .row img.product-img {
width: 100%;
border-radius: 7px;
width:100%;
border-radius:7px;
}
.product-detail table.product-meta {
width: 100%;
width:100%;
background:#fef0e4;
padding:20px;
position: relative;
border-radius: 7px;
position:relative;
border-radius:7px;
}
.product-detail table.product-meta a {
color:#db513d;
}
.product-detail table.product-meta th {
text-align: left;
text-align:left;
padding:10px 0 0 0;
}
.product-detail table.product-meta td {
vertical-align: top;
vertical-align:top;
}
.product-detail table.product-meta h3 {
font-weight:normal;
font-size: 11px;
font-size:11px;
border-top:1px #296178 solid;
margin:0;
display: block;
display:block;
}
.product-detail table.product-meta h3:first-child {
margin-top:0;
@ -591,17 +565,17 @@ a:hover {
margin:-3px 0 0 0;
}
.product-detail table.product-meta li {
list-style-type: circle;
list-style-type:circle;
}
.product-detail table.product-meta svg {
transform: rotate(-90deg);
stroke-dasharray: 502; /* (2PI * 40px) */
stroke-dashoffset: 502;
animation: offsettozero 1s linear forwards;
transform:rotate(-90deg);
stroke-dasharray:502; /* (2PI * 40px) */
stroke-dashoffset:502;
animation:offsettozero 1s linear forwards;
}
.product-detail table.product-meta @keyframes offsettozero {
to {
stroke-dashoffset: 180;
stroke-dashoffset:180;
}
}
/****** ELEMENTS ******/
@ -615,7 +589,7 @@ a:hover {
color:#db513d;
}
.profile-completed-bar {
display: block;
display:block;
background:#c9d7dd;
width:86%;
height:20px;
@ -624,5 +598,5 @@ a:hover {
.profile-completed-bar span {
background:#296178;
height:20px;
display: block;
display:block;
}