From 7a0eefc8275d3522d3f175a1ba2f7db9bbf03419 Mon Sep 17 00:00:00 2001 From: bmen Date: Fri, 29 Mar 2019 01:01:41 +0100 Subject: [PATCH] added product meta infos as table and the description --- detail.html | 305 +++++++++++++++++++++++++++++++++++++++++++++++++++- style.css | 73 +++++++++++-- 2 files changed, 368 insertions(+), 10 deletions(-) diff --git a/detail.html b/detail.html index 4666dab..b5aff12 100644 --- a/detail.html +++ b/detail.html @@ -11,7 +11,7 @@
+
+
+

Last Search Resulte

+
+
+
+
+ +
+
+

Aserradero portatil Bolport Rm100

+

Lorem ipsum dolor sit amet, consetetur saidispscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore a magna aliquyam ...

+
+
+
+

Status

+ + + +
+
+

Completeness

+
+ +
+
+
    +
  • DE,EN
    • +
    • +
    • +
    • +
+
 
+
+ Updated: 03/27/19 + Released: 04/12/15 +
+
 
+
+
+
+
+
+
+ +
+
+

Aserradero portatil Bolport Rm100

+

Lorem ipsum dolor sit amet, consetetur saidispscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore a magna aliquyam ...

+
+
+
+

Status

+ + + +
+
+

Completeness

+
+ +
+
+
    +
  • DE,EN
    • +
    • +
    • +
    • +
+
 
+
+ Updated: 03/27/19 + Released: 04/12/15 +
+
 
+
+
+
+
+
+
+ +
+
+

Aserradero portatil Bolport Rm100

+

Lorem ipsum dolor sit amet, consetetur saidispscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore a magna aliquyam ...

+
+
+
+

Status

+ + + +
+
+

Completeness

+
+ +
+
+
    +
  • DE,EN
    • +
    • +
    • +
    • +
+
 
+
+ Updated: 03/27/19 + Released: 04/12/15 +
+
 
+
+
+
+
+
+
+ +
+
+

Aserradero portatil Bolport Rm100

+

Lorem ipsum dolor sit amet, consetetur saidispscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore a magna aliquyam ...

+
+
+
+

Status

+ + + +
+
+

Completeness

+
+ +
+
+
    +
  • DE,EN
    • +
    • +
    • +
    • +
+
 
+
+ Updated: 03/27/19 + Released: 04/12/15 +
+
 
+
+
+
+
+
+
+ +
+
+

Aserradero portatil Bolport Rm100

+

Lorem ipsum dolor sit amet, consetetur saidispscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore a magna aliquyam ...

+
+
+
+

Status

+ + + +
+
+

Completeness

+
+ +
+
+
    +
  • DE,EN
    • +
    • +
    • +
    • +
+
 
+
+ Updated: 03/27/19 + Released: 04/12/15 +
+
 
+
+
+
+
+
+
+ +
+
+

Aserradero portatil Bolport Rm100

+

Lorem ipsum dolor sit amet, consetetur saidispscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore a magna aliquyam ...

+
+
+
+

Status

+ + + +
+
+

Completeness

+
+ +
+
+
    +
  • DE,EN
    • +
    • +
    • +
    • +
+
 
+
+ Updated: 03/27/19 + Released: 04/12/15 +
+
 
+
+
 
diff --git a/style.css b/style.css index 20f146e..b19398d 100644 --- a/style.css +++ b/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; }