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

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>

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">
@ -64,33 +64,33 @@
<div class="col-777">
<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>

132
style.css
View File

@ -93,10 +93,6 @@ a:hover {
max-width:1040px;
margin:0 auto;
}
.col-1055 {
max-width: 1055px;
margin:0 auto;
}
.col-1-3 {
width:36%;
float:left;
@ -109,20 +105,13 @@ a:hover {
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;
}
.col-1-4-fixed:nth-child(4) {
.col-1-4:nth-child(4) {
margin-right:0;
}
.col-1-5 {
@ -130,8 +119,8 @@ a:hover {
float:left;
position:relative;
}
/****** HEADER BLACK ******/
.header-black {
/****** HEADER ******/
.header {
position:fixed;
top:0;
left:0;
@ -139,22 +128,22 @@ a:hover {
background:rgba(0, 0, 0, 0.7);
z-index:10000;
}
.header-black ul {
.header ul {
max-width:900px;
margin:0 auto;
}
.header-black li {
.header li {
list-style:none;
float:left;
margin:0;
}
.header-black li a {
.header li a {
color:#fcd4b1;
font-size:110%;
padding:20px 15px 20px 15px;
display:block;
}
.header-black li a:hover {
.header li a:hover {
background:#296178;
}
/****** SEARCHBAR ******/
@ -227,20 +216,6 @@ a:hover {
.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;
@ -255,23 +230,23 @@ a:hover {
display:block;
margin:0 auto;
}
/****** HEADLINE ******/
.headline {
/****** home-search-intro ******/
.home-search-intro {
text-align:center;
font-family:'Lora', serif;
font-style:italic;
font-size:150%;
line-height:150%;
}
.headline p {
.home-search-intro p {
line-height:140%;
}
.headline form {
.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;
font-size:100%;
@ -280,15 +255,15 @@ a:hover {
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 {
.home-search-intro .search-filter-quick {
display:none;
}
.headline button {
.home-search-intro button {
position:absolute;
color:#a14032;
top:0;
@ -302,7 +277,7 @@ a:hover {
border-bottom-right-radius:8px;
border-top-right-radius:8px;
}
.headline button:hover {
.home-search-intro button:hover {
color:#fff;
background:#a14032;
}
@ -319,7 +294,7 @@ a:hover {
.search-filter-quick a:last-of-type {
float:right;
}
.headline select {
.home-search-intro select {
position:relative;
display:block;
border:2px #a14032 solid;
@ -334,13 +309,13 @@ a:hover {
float:left;
margin:3px 30px 0 0;
}
.headline select:last-of-type {
.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;
@ -395,14 +370,14 @@ a:hover {
margin:0 10px -3px 0;
}
/****** SEARCH RESULTS Variante 3 ******/
.search-results-variante3-item {
.search-results-item {
position:absolute;
top:0;
left:0;
width:100%;
z-index:999;
}
.search-results-variante3-item:hover {
.search-results-item:hover {
top:-10px;
left:-16px;
width:278px;
@ -413,17 +388,17 @@ 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-variante3-item .search-results-variante3-item-img {
.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 {
.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 {
.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;
@ -431,46 +406,46 @@ a:hover {
border-top-left-radius:6px;
border-top-right-radius:6px;
}
.search-results-variante3-item .search-results-variante3-item-info {
.search-results-item .search-results-item-info {
background:#fef0e4;
padding:10px;
border-bottom-right-radius:7px;
border-bottom-left-radius:7px;
}
.search-results-variante3-item:hover .search-results-variante3-item-info {
.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 {
.search-results-item .search-results-item-meta {
padding:5px;
background:#fff;
border-bottom-right-radius:7px;
border-bottom-left-radius:7px;
font-size:11px;
}
.search-results-variante3-item:hover .search-results-variante3-item-meta {
.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 {
.search-results-item .search-results-item-meta li {
list-style:none;
margin:0;
padding:2px 11px;
@ -478,77 +453,76 @@ a:hover {
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 {
.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;
}
.search-results-variante3-item .search-results-variante3-item-meta li svg path {
.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;
}
.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;
}
.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 {
.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;