diff --git a/img/aserradero-portatil-bolport_278x182.jpg b/img/aserradero-portatil-bolport_278x182.jpg new file mode 100644 index 0000000..5dcc7f4 Binary files /dev/null and b/img/aserradero-portatil-bolport_278x182.jpg differ diff --git a/img/language-icon.gif b/img/language-icon.gif new file mode 100644 index 0000000..3b59e90 Binary files /dev/null and b/img/language-icon.gif differ diff --git a/logo.png b/img/logo-opensource-hardware.png similarity index 100% rename from logo.png rename to img/logo-opensource-hardware.png diff --git a/img/opensource-off.png b/img/opensource-off.png new file mode 100644 index 0000000..76e782c Binary files /dev/null and b/img/opensource-off.png differ diff --git a/img/opensource-on.png b/img/opensource-on.png new file mode 100644 index 0000000..12995e6 Binary files /dev/null and b/img/opensource-on.png differ diff --git a/index.html b/index.html index a7b7838..8c5347d 100644 --- a/index.html +++ b/index.html @@ -125,6 +125,206 @@
  • #db513d (Linkfarbe 1)
  • +
    +
    +

    Suchergebnisgallerie Variante 3

    +
    +
    +
    +
    + +
    +
    +

    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
    • +
    • +
    • DIN
    • +
    • +
    +
     
    +
    +
    +
    +
    +
    +
    + +
    +
    +

    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
    • +
    • +
    • DIN
    • +
    • +
    +
     
    +
    +
    +
    +
    +
    +
    + +
    +
    +

    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
    • +
    • +
    • DIN
    • +
    • +
    +
     
    +
    +
    +
    +
    +
    +
    + +
    +
    +

    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
    • +
    • +
    • DIN
    • +
    • +
    +
     
    +
    +
    +
    +
    +
    +
    + +
    +
    +

    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
    • +
    • +
    • DIN
    • +
    • +
    +
     
    +
    +
    +
    +
    +
    +
    + +
    +
    +

    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
    • +
    • +
    • DIN
    • +
    • +
    +
     
    +
    +
    +
    +
    +
    +
     
    +

    Categories

    diff --git a/style.css b/style.css index d66b1e1..0f607ef 100644 --- a/style.css +++ b/style.css @@ -55,7 +55,7 @@ a:hover { position: relative; min-width: 777px; } -.row:nth-child(2n) { +.row:nth-child(2n+1) { background: #fef0e4; } .row::before { @@ -97,6 +97,16 @@ a:hover { 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) { + margin-right:0; +} .col-1-5 { width:20%; float:left; @@ -467,6 +477,114 @@ a:hover { .imprint img { margin:0 10px -3px 0; } +/****** SEARCH RESULTS Variante 3 ******/ +.search-results-variante3-item { + position: absolute; + top:0; + left: 0; + width: 100%; + z-index:999; +} +.search-results-variante3-item:hover { + left: -16px; + width:278px; + z-index:1000; + border:1px #002b3e solid; + border-radius: 10px; + -webkit-box-shadow: 10px 10px 60px 0px rgba(0,0,0,0.75); + -moz-box-shadow: 10px 10px 60px 0px rgba(0,0,0,0.75); + box-shadow: 10px 10px 60px 0px rgba(0,0,0,0.75); +} +.search-results-variante3-item .search-results-variante3-item-img { + +} +.search-results-variante3-item .search-results-variante3-item-img img { + clip-path: inset(33px 0 33px 0); + width:245px; + margin:-33px 0; +} +.search-results-variante3-item:hover .search-results-variante3-item-img img { + clip-path: inset(0 0 0 0); + width:278px; + margin:0 0; +} +.search-results-variante3-item .search-results-variante3-item-info { + background: #fef0e4; + padding:10px; +} +.search-results-variante3-item .search-results-variante3-item-info h2 { + margin:0; + padding:0; +} +.search-results-variante3-item .search-results-variante3-item-description { + display:none; + margin:0; +} +.search-results-variante3-item:hover .search-results-variante3-item-description { + display:block; +} +.search-results-variante3-item .search-results-variante3-item-meta { + padding: 5px; + background:#fff; +} +.search-results-variante3-item:hover .search-results-variante3-item-meta { + padding: 5px 10px; +} +.search-results-variante3-item .search-results-variante3-item-meta p { + margin:0; +} +.search-results-variante3-item .search-results-variante3-item-meta ul { + margin:0; + padding:0; + width:180px; +} +.search-results-variante3-item .search-results-variante3-item-meta li { + list-style: none; + margin:0; + padding:0 8px; + float:left; + border-right:1px #002b3e solid; +} +.search-results-variante3-item .search-results-variante3-item-meta li:first-child { + padding-left:0; +} +.search-results-variante3-item .search-results-variante3-item-meta li:last-child { + border-right:0; + padding-right:0; +} +.search-results-variante3-item .search-results-variante3-item-meta .search-results-variante3-item-meta-compl { + width:180px; + float:left; +} +.search-results-variante3-item .search-results-variante3-item-meta-status { + width:35px; + padding-left: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 { + background:#c9d7dd; + width:100%; + height:7px; +} +.search-results-variante3-item .search-results-variante3-item-meta .search-results-variante3-item-meta-compl-bar span { + background:#296178; + height:7px; + display: block; +} +.search-results-variante3 svg { + transform: rotate(-90deg); + stroke-dasharray: 251; /* (2PI * 40px) */ + stroke-dashoffset: 251; + animation: offsettozero 1s linear forwards; +} + +@keyframes offsettozero { + to { + stroke-dashoffset: 200; + } +} /****** SEARCH RESULTS Variante 2 ******/ .search-results-variante2-item { width:100%;