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

158
index.html
View File

@ -10,7 +10,7 @@
<script src="js/img-svg-color.js"></script> <script src="js/img-svg-color.js"></script>
</head> </head>
<body> <body>
<div class="header-black"> <div class="header">
<ul> <ul>
<li><a class="logo" href="#"><img src="img/oho-logo-imprint.png" width="47" height="25" /></a></li> <li><a class="logo" href="#"><img src="img/oho-logo-imprint.png" width="47" height="25" /></a></li>
<li><a href="#">news</a></li> <li><a href="#">news</a></li>
@ -25,7 +25,7 @@
<div class="banner"> <div class="banner">
<img src="img/oho_logo_WHITE.svg" /> <img src="img/oho_logo_WHITE.svg" />
</div> </div>
<div class="row headline"> <div class="row home-search-intro">
<form class="search-content"> <form class="search-content">
<input class="search-field-content" id="searchfield-global" type="text" name="search" placeholder="What Open Hardware are you looking for?" /> <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"> <button type="submit" value="Submit">
@ -64,33 +64,33 @@
<div class="col-777"> <div class="col-777">
<h1><strong>Headline 1</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> <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> <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> </div>
<div class="row search-result-example-variante3"> <div class="row search-results">
<div class="col-1040"> <div class="col-1040">
<h1>Suchergebnisgallerie Variante 3</h1> <h1>Suchergebnisgallerie Variante 3</h1>
<div class="search-results-variante3"> <div class="search-results-grid">
<div class="col-1-4-fixed"> <div class="col-1-4">
<div class="search-results-variante3-item"> <div class="search-results-item">
<div class="search-results-variante3-item-img"> <div class="search-results-item-img">
<a href="detail.html"><img src="img/thumb01.jpg" /></a> <a href="detail.html"><img src="img/thumb01.jpg" /></a>
</div> </div>
<div class="search-results-variante3-item-info"> <div class="search-results-item-info">
<h2><span>Aserradero portatil Bolport Rm100</span></h2> <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>
<div class="search-results-variante3-item-meta"> <div class="search-results-item-meta">
<div class="search-results-variante3-item-meta-status"> <div class="search-results-item-meta-status">
<p>Status</p> <p>Status</p>
<svg height="30" width="30"> <svg height="30" width="30">
<circle cx="15" cy="15" r="10" stroke="#296178" stroke-width="6" fill="#fff" /> <circle cx="15" cy="15" r="10" stroke="#296178" stroke-width="6" fill="#fff" />
</svg> </svg>
</div> </div>
<div class="search-results-variante3-item-meta-compl"> <div class="search-results-item-meta-compl">
<p>Completeness</p> <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> <span style="width:25%"></span>
</div> </div>
</div> </div>
@ -101,7 +101,7 @@
<li class="doc"><i class="fas fa-book-open"></i></li> <li class="doc"><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"> <div class="search-results-item-meta-date">
<span class="updated">Updated: 03/27/19</span> <span class="updated">Updated: 03/27/19</span>
<span class="released">Released: 04/12/15</span> <span class="released">Released: 04/12/15</span>
</div> </div>
@ -109,25 +109,25 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-1-4-fixed"> <div class="col-1-4">
<div class="search-results-variante3-item"> <div class="search-results-item">
<div class="search-results-variante3-item-img"> <div class="search-results-item-img">
<a href="detail.html"><img src="img/thumb02.jpg" /></a> <a href="detail.html"><img src="img/thumb02.jpg" /></a>
</div> </div>
<div class="search-results-variante3-item-info"> <div class="search-results-item-info">
<h2><span>Aserradero portatil Bolport Rm100</span></h2> <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>
<div class="search-results-variante3-item-meta"> <div class="search-results-item-meta">
<div class="search-results-variante3-item-meta-status"> <div class="search-results-item-meta-status">
<p>Status</p> <p>Status</p>
<svg height="30" width="30"> <svg height="30" width="30">
<circle cx="15" cy="15" r="10" stroke="#296178" stroke-width="6" fill="#fff" /> <circle cx="15" cy="15" r="10" stroke="#296178" stroke-width="6" fill="#fff" />
</svg> </svg>
</div> </div>
<div class="search-results-variante3-item-meta-compl"> <div class="search-results-item-meta-compl">
<p>Completeness</p> <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> <span style="width:25%"></span>
</div> </div>
</div> </div>
@ -138,7 +138,7 @@
<li class="doc"><i class="fas fa-book-open"></i></li> <li class="doc"><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"> <div class="search-results-item-meta-date">
<span class="updated">Updated: 03/27/19</span> <span class="updated">Updated: 03/27/19</span>
<span class="released">Released: 04/12/15</span> <span class="released">Released: 04/12/15</span>
</div> </div>
@ -146,25 +146,25 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-1-4-fixed"> <div class="col-1-4">
<div class="search-results-variante3-item"> <div class="search-results-item">
<div class="search-results-variante3-item-img"> <div class="search-results-item-img">
<a href="detail.html"><img src="img/thumb03.jpg" /></a> <a href="detail.html"><img src="img/thumb03.jpg" /></a>
</div> </div>
<div class="search-results-variante3-item-info"> <div class="search-results-item-info">
<h2><span>Aserradero portatil Bolport Rm100</span></h2> <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>
<div class="search-results-variante3-item-meta"> <div class="search-results-item-meta">
<div class="search-results-variante3-item-meta-status"> <div class="search-results-item-meta-status">
<p>Status</p> <p>Status</p>
<svg height="30" width="30"> <svg height="30" width="30">
<circle cx="15" cy="15" r="10" stroke="#296178" stroke-width="6" fill="#fff" /> <circle cx="15" cy="15" r="10" stroke="#296178" stroke-width="6" fill="#fff" />
</svg> </svg>
</div> </div>
<div class="search-results-variante3-item-meta-compl"> <div class="search-results-item-meta-compl">
<p>Completeness</p> <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> <span style="width:25%"></span>
</div> </div>
</div> </div>
@ -175,7 +175,7 @@
<li class="doc"><i class="fas fa-book-open"></i></li> <li class="doc"><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"> <div class="search-results-item-meta-date">
<span class="updated">Updated: 03/27/19</span> <span class="updated">Updated: 03/27/19</span>
<span class="released">Released: 04/12/15</span> <span class="released">Released: 04/12/15</span>
</div> </div>
@ -183,25 +183,25 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-1-4-fixed"> <div class="col-1-4">
<div class="search-results-variante3-item"> <div class="search-results-item">
<div class="search-results-variante3-item-img"> <div class="search-results-item-img">
<a href="detail.html"><img src="img/thumb04.jpg" /></a> <a href="detail.html"><img src="img/thumb04.jpg" /></a>
</div> </div>
<div class="search-results-variante3-item-info"> <div class="search-results-item-info">
<h2><span>Aserradero portatil Bolport Rm100</span></h2> <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>
<div class="search-results-variante3-item-meta"> <div class="search-results-item-meta">
<div class="search-results-variante3-item-meta-status"> <div class="search-results-item-meta-status">
<p>Status</p> <p>Status</p>
<svg height="30" width="30"> <svg height="30" width="30">
<circle cx="15" cy="15" r="10" stroke="#296178" stroke-width="6" fill="#fff" /> <circle cx="15" cy="15" r="10" stroke="#296178" stroke-width="6" fill="#fff" />
</svg> </svg>
</div> </div>
<div class="search-results-variante3-item-meta-compl"> <div class="search-results-item-meta-compl">
<p>Completeness</p> <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> <span style="width:25%"></span>
</div> </div>
</div> </div>
@ -212,7 +212,7 @@
<li class="doc"><i class="fas fa-book-open"></i></li> <li class="doc"><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"> <div class="search-results-item-meta-date">
<span class="updated">Updated: 03/27/19</span> <span class="updated">Updated: 03/27/19</span>
<span class="released">Released: 04/12/15</span> <span class="released">Released: 04/12/15</span>
</div> </div>
@ -220,25 +220,25 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-1-4-fixed"> <div class="col-1-4">
<div class="search-results-variante3-item"> <div class="search-results-item">
<div class="search-results-variante3-item-img"> <div class="search-results-item-img">
<a href="detail.html"><img src="img/thumb05.jpg" /></a> <a href="detail.html"><img src="img/thumb05.jpg" /></a>
</div> </div>
<div class="search-results-variante3-item-info"> <div class="search-results-item-info">
<h2><span>Aserradero portatil Bolport Rm100</span></h2> <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>
<div class="search-results-variante3-item-meta"> <div class="search-results-item-meta">
<div class="search-results-variante3-item-meta-status"> <div class="search-results-item-meta-status">
<p>Status</p> <p>Status</p>
<svg height="30" width="30"> <svg height="30" width="30">
<circle cx="15" cy="15" r="10" stroke="#296178" stroke-width="6" fill="#fff" /> <circle cx="15" cy="15" r="10" stroke="#296178" stroke-width="6" fill="#fff" />
</svg> </svg>
</div> </div>
<div class="search-results-variante3-item-meta-compl"> <div class="search-results-item-meta-compl">
<p>Completeness</p> <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> <span style="width:25%"></span>
</div> </div>
</div> </div>
@ -249,7 +249,7 @@
<li class="doc"><i class="fas fa-book-open"></i></li> <li class="doc"><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"> <div class="search-results-item-meta-date">
<span class="updated">Updated: 03/27/19</span> <span class="updated">Updated: 03/27/19</span>
<span class="released">Released: 04/12/15</span> <span class="released">Released: 04/12/15</span>
</div> </div>
@ -257,25 +257,25 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-1-4-fixed"> <div class="col-1-4">
<div class="search-results-variante3-item"> <div class="search-results-item">
<div class="search-results-variante3-item-img"> <div class="search-results-item-img">
<a href="detail.html"><img src="img/thumb06.jpg" /></a> <a href="detail.html"><img src="img/thumb06.jpg" /></a>
</div> </div>
<div class="search-results-variante3-item-info"> <div class="search-results-item-info">
<h2><span>Aserradero portatil Bolport Rm100</span></h2> <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>
<div class="search-results-variante3-item-meta"> <div class="search-results-item-meta">
<div class="search-results-variante3-item-meta-status"> <div class="search-results-item-meta-status">
<p>Status</p> <p>Status</p>
<svg height="30" width="30"> <svg height="30" width="30">
<circle cx="15" cy="15" r="10" stroke="#296178" stroke-width="6" fill="#fff" /> <circle cx="15" cy="15" r="10" stroke="#296178" stroke-width="6" fill="#fff" />
</svg> </svg>
</div> </div>
<div class="search-results-variante3-item-meta-compl"> <div class="search-results-item-meta-compl">
<p>Completeness</p> <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> <span style="width:25%"></span>
</div> </div>
</div> </div>
@ -286,7 +286,7 @@
<li class="doc"><i class="fas fa-book-open"></i></li> <li class="doc"><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"> <div class="search-results-item-meta-date">
<span class="updated">Updated: 03/27/19</span> <span class="updated">Updated: 03/27/19</span>
<span class="released">Released: 04/12/15</span> <span class="released">Released: 04/12/15</span>
</div> </div>
@ -294,25 +294,25 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-1-4-fixed"> <div class="col-1-4">
<div class="search-results-variante3-item"> <div class="search-results-item">
<div class="search-results-variante3-item-img"> <div class="search-results-item-img">
<a href="detail.html"><img src="img/thumb07.jpg" /></a> <a href="detail.html"><img src="img/thumb07.jpg" /></a>
</div> </div>
<div class="search-results-variante3-item-info"> <div class="search-results-item-info">
<h2><span>Aserradero portatil Bolport Rm100</span></h2> <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>
<div class="search-results-variante3-item-meta"> <div class="search-results-item-meta">
<div class="search-results-variante3-item-meta-status"> <div class="search-results-item-meta-status">
<p>Status</p> <p>Status</p>
<svg height="30" width="30"> <svg height="30" width="30">
<circle cx="15" cy="15" r="10" stroke="#296178" stroke-width="6" fill="#fff" /> <circle cx="15" cy="15" r="10" stroke="#296178" stroke-width="6" fill="#fff" />
</svg> </svg>
</div> </div>
<div class="search-results-variante3-item-meta-compl"> <div class="search-results-item-meta-compl">
<p>Completeness</p> <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> <span style="width:25%"></span>
</div> </div>
</div> </div>
@ -323,7 +323,7 @@
<li class="doc"><i class="fas fa-book-open"></i></li> <li class="doc"><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"> <div class="search-results-item-meta-date">
<span class="updated">Updated: 03/27/19</span> <span class="updated">Updated: 03/27/19</span>
<span class="released">Released: 04/12/15</span> <span class="released">Released: 04/12/15</span>
</div> </div>
@ -336,9 +336,9 @@
<div class="clearer">&nbsp;</div> <div class="clearer">&nbsp;</div>
</div> </div>
<div class="row styleguide"> <div class="row styleguide">
<div class="col-1040"> <div class="col-777">
<h1>Styleguide</h1> <h1>Styleguide</h1>
<h2>Farben</h2> <h2>Colors</h2>
<ul> <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:#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> <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> <div class="clearer">&nbsp;</div>
<img style="float:left; margin-right:20px;" src="img/news-thumb.jpg" /> <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> <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> <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> </div>
<div class="footer"> <div class="footer">
<div class="col-1055"> <div class="col-1040">
<div class="col-1-5"> <div class="col-1-5">
<h3>Categories</h3> <h3>Categories</h3>
<ul> <ul>

132
style.css
View File

@ -93,10 +93,6 @@ a:hover {
max-width:1040px; max-width:1040px;
margin:0 auto; margin:0 auto;
} }
.col-1055 {
max-width: 1055px;
margin:0 auto;
}
.col-1-3 { .col-1-3 {
width:36%; width:36%;
float:left; float:left;
@ -109,20 +105,13 @@ a:hover {
position:relative; position:relative;
} }
.col-1-4 { .col-1-4 {
width:22%;
margin-right:20px;
float:left;
position: relative;
min-height: 250px;
}
.col-1-4-fixed {
width:245px; width:245px;
margin-right:20px; margin-right:20px;
float:left; float:left;
position:relative; position:relative;
min-height:250px; min-height:250px;
} }
.col-1-4-fixed:nth-child(4) { .col-1-4:nth-child(4) {
margin-right:0; margin-right:0;
} }
.col-1-5 { .col-1-5 {
@ -130,8 +119,8 @@ a:hover {
float:left; float:left;
position:relative; position:relative;
} }
/****** HEADER BLACK ******/ /****** HEADER ******/
.header-black { .header {
position:fixed; position:fixed;
top:0; top:0;
left:0; left:0;
@ -139,22 +128,22 @@ a:hover {
background:rgba(0, 0, 0, 0.7); background:rgba(0, 0, 0, 0.7);
z-index:10000; z-index:10000;
} }
.header-black ul { .header ul {
max-width:900px; max-width:900px;
margin:0 auto; margin:0 auto;
} }
.header-black li { .header li {
list-style:none; list-style:none;
float:left; float:left;
margin:0; margin:0;
} }
.header-black li a { .header li a {
color:#fcd4b1; color:#fcd4b1;
font-size:110%; font-size:110%;
padding:20px 15px 20px 15px; padding:20px 15px 20px 15px;
display:block; display:block;
} }
.header-black li a:hover { .header li a:hover {
background:#296178; background:#296178;
} }
/****** SEARCHBAR ******/ /****** SEARCHBAR ******/
@ -227,20 +216,6 @@ a:hover {
.searchbar select:focus { .searchbar select:focus {
outline:none; 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 { .searchbar .search-filter-important {
width:auto; width:auto;
float:right; float:right;
@ -255,23 +230,23 @@ a:hover {
display:block; display:block;
margin:0 auto; margin:0 auto;
} }
/****** HEADLINE ******/ /****** home-search-intro ******/
.headline { .home-search-intro {
text-align:center; text-align:center;
font-family:'Lora', serif; font-family:'Lora', serif;
font-style:italic; font-style:italic;
font-size:150%; font-size:150%;
line-height:150%; line-height:150%;
} }
.headline p { .home-search-intro p {
line-height:140%; line-height:140%;
} }
.headline form { .home-search-intro form {
position:relative; position:relative;
width:550px; width:550px;
margin:20px auto 40px auto; margin:20px auto 40px auto;
} }
.headline input.search-field-content { .home-search-intro input.search-field-content {
border:2px #a14032 solid; border:2px #a14032 solid;
border-radius:7px; border-radius:7px;
font-size:100%; font-size:100%;
@ -280,15 +255,15 @@ a:hover {
width:100%; width:100%;
margin:2px; margin:2px;
} }
.headline input.search-field-content:focus { .home-search-intro input.search-field-content:focus {
border:3px #a14032 solid; border:3px #a14032 solid;
outline:none; outline:none;
margin:1px; margin:1px;
} }
.headline .search-filter-quick { .home-search-intro .search-filter-quick {
display:none; display:none;
} }
.headline button { .home-search-intro button {
position:absolute; position:absolute;
color:#a14032; color:#a14032;
top:0; top:0;
@ -302,7 +277,7 @@ a:hover {
border-bottom-right-radius:8px; border-bottom-right-radius:8px;
border-top-right-radius:8px; border-top-right-radius:8px;
} }
.headline button:hover { .home-search-intro button:hover {
color:#fff; color:#fff;
background:#a14032; background:#a14032;
} }
@ -319,7 +294,7 @@ a:hover {
.search-filter-quick a:last-of-type { .search-filter-quick a:last-of-type {
float:right; float:right;
} }
.headline select { .home-search-intro select {
position:relative; position:relative;
display:block; display:block;
border:2px #a14032 solid; border:2px #a14032 solid;
@ -334,13 +309,13 @@ a:hover {
float:left; float:left;
margin:3px 30px 0 0; margin:3px 30px 0 0;
} }
.headline select:last-of-type { .home-search-intro select:last-of-type {
margin-right:0; margin-right:0;
} }
.headline select:focus { .home-search-intro select:focus {
outline:none; outline:none;
} }
.headline select::after { .home-search-intro select::after {
content:"\f0dc"; content:"\f0dc";
font-family:FontAwesome; font-family:FontAwesome;
color:#000; color:#000;
@ -395,14 +370,14 @@ a:hover {
margin:0 10px -3px 0; margin:0 10px -3px 0;
} }
/****** SEARCH RESULTS Variante 3 ******/ /****** SEARCH RESULTS Variante 3 ******/
.search-results-variante3-item { .search-results-item {
position:absolute; position:absolute;
top:0; top:0;
left:0; left:0;
width:100%; width:100%;
z-index:999; z-index:999;
} }
.search-results-variante3-item:hover { .search-results-item:hover {
top:-10px; top:-10px;
left:-16px; left:-16px;
width:278px; width:278px;
@ -413,17 +388,17 @@ a:hover {
-moz-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); 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-left-radius:7px;
border-top-right-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); -webkit-clip-path:inset(33px 0 33px 0);
clip-path:inset(33px 0 33px 0); clip-path:inset(33px 0 33px 0);
width:245px; width:245px;
margin:-33px 0; 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); -webkit-clip-path:inset(0 0 0 0);
clip-path:inset(0 0 0 0); clip-path:inset(0 0 0 0);
width:278px; width:278px;
@ -431,46 +406,46 @@ a:hover {
border-top-left-radius:6px; border-top-left-radius:6px;
border-top-right-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; background:#fef0e4;
padding:10px; padding:10px;
border-bottom-right-radius:7px; border-bottom-right-radius:7px;
border-bottom-left-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-right-radius:0;
border-bottom-left-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; margin:0;
padding:0; padding:0;
} }
.search-results-variante3-item .search-results-variante3-item-description { .search-results-item .search-results-item-description {
display:none; display:none;
margin:0; margin:0;
} }
.search-results-variante3-item:hover .search-results-variante3-item-description { .search-results-item:hover .search-results-item-description {
display:block; display:block;
} }
.search-results-variante3-item .search-results-variante3-item-meta { .search-results-item .search-results-item-meta {
padding:5px; padding:5px;
background:#fff; background:#fff;
border-bottom-right-radius:7px; border-bottom-right-radius:7px;
border-bottom-left-radius:7px; border-bottom-left-radius:7px;
font-size:11px; font-size:11px;
} }
.search-results-variante3-item:hover .search-results-variante3-item-meta { .search-results-item:hover .search-results-item-meta {
padding:5px 10px; padding:5px 10px;
} }
.search-results-variante3-item .search-results-variante3-item-meta p { .search-results-item .search-results-item-meta p {
margin:0; margin:0;
} }
.search-results-variante3-item .search-results-variante3-item-meta ul { .search-results-item .search-results-item-meta ul {
margin:0; margin:0;
padding:0; padding:0;
width:180px; width:180px;
} }
.search-results-variante3-item .search-results-variante3-item-meta li { .search-results-item .search-results-item-meta li {
list-style:none; list-style:none;
margin:0; margin:0;
padding:2px 11px; padding:2px 11px;
@ -478,77 +453,76 @@ a:hover {
border-right:1px #002b3e solid; border-right:1px #002b3e solid;
height:16px; 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; 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; margin-top:-2px;
width:20px; 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; 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; 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; font-size:13px;
color:#296178; 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; 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; border-right:0;
padding-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; 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; width:180px;
float:left; float:left;
margin-bottom:6px; 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; width:205px;
} }
.search-results-variante3-item .search-results-variante3-item-meta-status { .search-results-item .search-results-item-meta-status {
width:35px; width:35px;
padding:0 0 3px 5px; padding:0 0 3px 5px;
float:right; float:right;
border-left:1px #002b3e solid; 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; background:#c9d7dd;
width:100%; width:100%;
height:7px; 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; background:#296178;
height:7px; 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; display:none;
margin-top:3px; 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; 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; float:right;
} }
.search-results-variante3 .search-results-variante3-item-meta-status svg { .search-results-item .search-results-item-meta-status svg {
transform:rotate(-90deg); transform:rotate(-90deg);
stroke-dasharray:251; /* (2PI * 40px) */ stroke-dasharray:251; /* (2PI * 40px) */
stroke-dashoffset:251; stroke-dashoffset:251;
animation:offsettozero 1s linear forwards; animation:offsettozero 1s linear forwards;
} }
@keyframes offsettozero { @keyframes offsettozero {
to { to {
stroke-dashoffset:200; stroke-dashoffset:200;