added product meta infos as table and the description
This commit is contained in:
bmen
parent
6e4b3ef52b
commit
7a0eefc827
305
detail.html
305
detail.html
|
|
@ -11,7 +11,7 @@
|
|||
<body class="product-detail">
|
||||
<div class="header-black">
|
||||
<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="#">about <i class="fas fa-caret-down"></i></a></li>
|
||||
<li><a href="#">metadata repository <i class="fas fa-caret-down"></i></a></li>
|
||||
|
|
@ -63,11 +63,308 @@
|
|||
<h1>Product title mechanical device</h1>
|
||||
<div class="clearer"> </div>
|
||||
<div class="col-2-3">
|
||||
<img src="img/fancycrave-530803-unsplash.jpg" />
|
||||
<img class="product-img" src="img/fancycrave-530803-unsplash.jpg" />
|
||||
<h2>Lorem ipsum dolor sit amet</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
||||
</div>
|
||||
<div class="col-1-3">
|
||||
<div class="product-meta">
|
||||
<h3>Completeness of profile</h3>
|
||||
<table class="product-meta">
|
||||
<tr>
|
||||
<td colspan="2"><h3>Completeness of profile</h3></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<div class="profile-completed">
|
||||
<p>25%</p>
|
||||
<div class="profile-completed-bar">
|
||||
<span style="width:25%"></span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="2"><h3>OSH Lizenz</h3></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="img/OSH_logo.svg" width="20" /></td>
|
||||
<td><a href="#">SSP-OSH2549</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="2"><h3>Norm Specification</h3></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="img/DIN_logo.svg" width="20" /></td>
|
||||
<td><a href="#">DIN-SPEC Standard T302</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="2"><h3>Sources</h3></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="fas fa-book-open"></i></td>
|
||||
<td>
|
||||
<ul>
|
||||
<li><a href="#">Link to maker's website</a></li>
|
||||
<li><a href="#">Original documents</a></li>
|
||||
<li><a href="#">consetetur sadipscing elitr</a></li>
|
||||
<li><a href="#">magna aliquyam erat</a></li>
|
||||
<li><a href="#">sed diam voluptua</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="2"><h3>Missing Infos</h3></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td><a href="#">Sources</a>, <a href="#">Norm Specifications</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="2"><h3>Status of Product Circle</h3></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" style="text-align:center;">
|
||||
<svg height="240" width="240">
|
||||
<circle cx="120" cy="120" r="80" stroke="#296178" stroke-width="48" fill="#fef0e4" />
|
||||
</svg>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="2"><h3>User Rating</h3></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td><a href="#">Sources</a>, <a href="#">Norm Specifications</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="clearer"> </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row last-resulte">
|
||||
<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" />
|
||||
</div>
|
||||
<div class="search-results-variante3-item-info">
|
||||
<h2><span>Aserradero portatil Bolport Rm100</span></h2>
|
||||
<p class="search-results-variante3-item-description">Lorem ipsum dolor sit amet, consetetur saidispscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore a magna aliquyam ...</p>
|
||||
</div>
|
||||
<div class="search-results-variante3-item-meta">
|
||||
<div class="search-results-variante3-item-meta-status">
|
||||
<p>Status</p>
|
||||
<svg height="30" width="30">
|
||||
<circle cx="15" cy="15" r="10" stroke="#296178" stroke-width="6" fill="#fff" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="search-results-variante3-item-meta-compl">
|
||||
<p>Completeness</p>
|
||||
<div class="search-results-variante3-item-meta-compl-bar">
|
||||
<span style="width:25%"></span>
|
||||
</div>
|
||||
</div>
|
||||
<ul>
|
||||
<li><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>
|
||||
</ul>
|
||||
<div class="clearer"> </div>
|
||||
<div class="search-results-variante3-item-meta-date">
|
||||
<span class="updated">Updated: 03/27/19</span>
|
||||
<span class="released">Released: 04/12/15</span>
|
||||
</div>
|
||||
<div class="clearer"> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-1-4-fixed">
|
||||
<div class="search-results-variante3-item">
|
||||
<div class="search-results-variante3-item-img">
|
||||
<img src="img/thumb02.jpg" />
|
||||
</div>
|
||||
<div class="search-results-variante3-item-info">
|
||||
<h2><span>Aserradero portatil Bolport Rm100</span></h2>
|
||||
<p class="search-results-variante3-item-description">Lorem ipsum dolor sit amet, consetetur saidispscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore a magna aliquyam ...</p>
|
||||
</div>
|
||||
<div class="search-results-variante3-item-meta">
|
||||
<div class="search-results-variante3-item-meta-status">
|
||||
<p>Status</p>
|
||||
<svg height="30" width="30">
|
||||
<circle cx="15" cy="15" r="10" stroke="#296178" stroke-width="6" fill="#fff" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="search-results-variante3-item-meta-compl">
|
||||
<p>Completeness</p>
|
||||
<div class="search-results-variante3-item-meta-compl-bar">
|
||||
<span style="width:25%"></span>
|
||||
</div>
|
||||
</div>
|
||||
<ul>
|
||||
<li><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>
|
||||
</ul>
|
||||
<div class="clearer"> </div>
|
||||
<div class="search-results-variante3-item-meta-date">
|
||||
<span class="updated">Updated: 03/27/19</span>
|
||||
<span class="released">Released: 04/12/15</span>
|
||||
</div>
|
||||
<div class="clearer"> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-1-4-fixed">
|
||||
<div class="search-results-variante3-item">
|
||||
<div class="search-results-variante3-item-img">
|
||||
<img src="img/thumb03.jpg" />
|
||||
</div>
|
||||
<div class="search-results-variante3-item-info">
|
||||
<h2><span>Aserradero portatil Bolport Rm100</span></h2>
|
||||
<p class="search-results-variante3-item-description">Lorem ipsum dolor sit amet, consetetur saidispscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore a magna aliquyam ...</p>
|
||||
</div>
|
||||
<div class="search-results-variante3-item-meta">
|
||||
<div class="search-results-variante3-item-meta-status">
|
||||
<p>Status</p>
|
||||
<svg height="30" width="30">
|
||||
<circle cx="15" cy="15" r="10" stroke="#296178" stroke-width="6" fill="#fff" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="search-results-variante3-item-meta-compl">
|
||||
<p>Completeness</p>
|
||||
<div class="search-results-variante3-item-meta-compl-bar">
|
||||
<span style="width:25%"></span>
|
||||
</div>
|
||||
</div>
|
||||
<ul>
|
||||
<li><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>
|
||||
</ul>
|
||||
<div class="clearer"> </div>
|
||||
<div class="search-results-variante3-item-meta-date">
|
||||
<span class="updated">Updated: 03/27/19</span>
|
||||
<span class="released">Released: 04/12/15</span>
|
||||
</div>
|
||||
<div class="clearer"> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-1-4-fixed">
|
||||
<div class="search-results-variante3-item">
|
||||
<div class="search-results-variante3-item-img">
|
||||
<img src="img/thumb04.jpg" />
|
||||
</div>
|
||||
<div class="search-results-variante3-item-info">
|
||||
<h2><span>Aserradero portatil Bolport Rm100</span></h2>
|
||||
<p class="search-results-variante3-item-description">Lorem ipsum dolor sit amet, consetetur saidispscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore a magna aliquyam ...</p>
|
||||
</div>
|
||||
<div class="search-results-variante3-item-meta">
|
||||
<div class="search-results-variante3-item-meta-status">
|
||||
<p>Status</p>
|
||||
<svg height="30" width="30">
|
||||
<circle cx="15" cy="15" r="10" stroke="#296178" stroke-width="6" fill="#fff" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="search-results-variante3-item-meta-compl">
|
||||
<p>Completeness</p>
|
||||
<div class="search-results-variante3-item-meta-compl-bar">
|
||||
<span style="width:25%"></span>
|
||||
</div>
|
||||
</div>
|
||||
<ul>
|
||||
<li><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>
|
||||
</ul>
|
||||
<div class="clearer"> </div>
|
||||
<div class="search-results-variante3-item-meta-date">
|
||||
<span class="updated">Updated: 03/27/19</span>
|
||||
<span class="released">Released: 04/12/15</span>
|
||||
</div>
|
||||
<div class="clearer"> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-1-4-fixed">
|
||||
<div class="search-results-variante3-item">
|
||||
<div class="search-results-variante3-item-img">
|
||||
<img src="img/thumb05.jpg" />
|
||||
</div>
|
||||
<div class="search-results-variante3-item-info">
|
||||
<h2><span>Aserradero portatil Bolport Rm100</span></h2>
|
||||
<p class="search-results-variante3-item-description">Lorem ipsum dolor sit amet, consetetur saidispscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore a magna aliquyam ...</p>
|
||||
</div>
|
||||
<div class="search-results-variante3-item-meta">
|
||||
<div class="search-results-variante3-item-meta-status">
|
||||
<p>Status</p>
|
||||
<svg height="30" width="30">
|
||||
<circle cx="15" cy="15" r="10" stroke="#296178" stroke-width="6" fill="#fff" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="search-results-variante3-item-meta-compl">
|
||||
<p>Completeness</p>
|
||||
<div class="search-results-variante3-item-meta-compl-bar">
|
||||
<span style="width:25%"></span>
|
||||
</div>
|
||||
</div>
|
||||
<ul>
|
||||
<li><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>
|
||||
</ul>
|
||||
<div class="clearer"> </div>
|
||||
<div class="search-results-variante3-item-meta-date">
|
||||
<span class="updated">Updated: 03/27/19</span>
|
||||
<span class="released">Released: 04/12/15</span>
|
||||
</div>
|
||||
<div class="clearer"> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-1-4-fixed">
|
||||
<div class="search-results-variante3-item">
|
||||
<div class="search-results-variante3-item-img">
|
||||
<img src="img/thumb06.jpg" />
|
||||
</div>
|
||||
<div class="search-results-variante3-item-info">
|
||||
<h2><span>Aserradero portatil Bolport Rm100</span></h2>
|
||||
<p class="search-results-variante3-item-description">Lorem ipsum dolor sit amet, consetetur saidispscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore a magna aliquyam ...</p>
|
||||
</div>
|
||||
<div class="search-results-variante3-item-meta">
|
||||
<div class="search-results-variante3-item-meta-status">
|
||||
<p>Status</p>
|
||||
<svg height="30" width="30">
|
||||
<circle cx="15" cy="15" r="10" stroke="#296178" stroke-width="6" fill="#fff" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="search-results-variante3-item-meta-compl">
|
||||
<p>Completeness</p>
|
||||
<div class="search-results-variante3-item-meta-compl-bar">
|
||||
<span style="width:25%"></span>
|
||||
</div>
|
||||
</div>
|
||||
<ul>
|
||||
<li><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>
|
||||
</ul>
|
||||
<div class="clearer"> </div>
|
||||
<div class="search-results-variante3-item-meta-date">
|
||||
<span class="updated">Updated: 03/27/19</span>
|
||||
<span class="released">Released: 04/12/15</span>
|
||||
</div>
|
||||
<div class="clearer"> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearer"> </div>
|
||||
|
|
|
|||
73
style.css
73
style.css
|
|
@ -97,12 +97,12 @@ a:hover {
|
|||
margin:0 auto;
|
||||
}
|
||||
.col-1-3 {
|
||||
width:30%;
|
||||
width:36%;
|
||||
float:left;
|
||||
position: relative;
|
||||
}
|
||||
.col-2-3 {
|
||||
width:60%;
|
||||
width:62%;
|
||||
margin-right:20px;
|
||||
float:left;
|
||||
position: relative;
|
||||
|
|
@ -888,16 +888,77 @@ a:hover {
|
|||
}
|
||||
|
||||
/****** PRODUCT DETAIL PAGE ******/
|
||||
.product-detail .product-meta {
|
||||
.product-detail .row img.product-img {
|
||||
width: 100%;
|
||||
border-radius: 7px;
|
||||
}
|
||||
.product-detail table.product-meta {
|
||||
width: 100%;
|
||||
background:#fef0e4;
|
||||
padding:20px;
|
||||
width:100%;
|
||||
position: relative;
|
||||
}
|
||||
.product-detail .row img {
|
||||
width: 100%;
|
||||
.product-detail table.product-meta a {
|
||||
color:#db513d;
|
||||
}
|
||||
.product-detail table.product-meta th {
|
||||
text-align: left;
|
||||
padding:10px 0 0 0;
|
||||
}
|
||||
.product-detail table.product-meta td {
|
||||
vertical-align: top;
|
||||
}
|
||||
.product-detail table.product-meta h3 {
|
||||
font-weight:normal;
|
||||
font-size: 11px;
|
||||
border-top:1px #296178 solid;
|
||||
margin:0;
|
||||
display: block;
|
||||
}
|
||||
.product-detail table.product-meta h3:first-child {
|
||||
margin-top:0;
|
||||
}
|
||||
.product-detail table.product-meta ul {
|
||||
padding:0 0 0 20px;
|
||||
margin:-3px 0 0 0;
|
||||
}
|
||||
.product-detail table.product-meta li {
|
||||
list-style-type: circle;
|
||||
}
|
||||
.product-detail table.product-meta svg {
|
||||
transform: rotate(-90deg);
|
||||
stroke-dasharray: 502; /* (2PI * 40px) */
|
||||
stroke-dashoffset: 502;
|
||||
animation: offsettozero 1s linear forwards;
|
||||
}
|
||||
.product-detail table.product-meta @keyframes offsettozero {
|
||||
to {
|
||||
stroke-dashoffset: 180;
|
||||
}
|
||||
}
|
||||
|
||||
/****** ELEMENTS ******/
|
||||
.profile-completed {
|
||||
width:100%;
|
||||
}
|
||||
.profile-completed p {
|
||||
width:auto;
|
||||
float:right;
|
||||
margin:0;
|
||||
color:#db513d;
|
||||
}
|
||||
.profile-completed-bar {
|
||||
display: block;
|
||||
background:#c9d7dd;
|
||||
width:86%;
|
||||
height:20px;
|
||||
float:left;
|
||||
}
|
||||
.profile-completed-bar span {
|
||||
background:#296178;
|
||||
height:20px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/** https://codepen.io/chrisota/pen/rpaLw
|
||||
*, *:before, *:after { box-sizing: border-box; }
|
||||
|
|
|
|||
Loading…
Reference in New Issue