diff --git a/detail.html b/detail.html new file mode 100644 index 0000000..4666dab --- /dev/null +++ b/detail.html @@ -0,0 +1,135 @@ + + + Open Source Ecology (OSE) Germany - Entwicklungsplattform + + + + + + + + +
+ +
 
+
+
+
+
+
+ + +
+
+
 
+ + + +
+
 
+
+
+
+
+
+

Product title mechanical device

+
 
+
+ +
+
+
+

Completeness of profile

+
+
+
 
+
+
+
+
+
+

Categories

+ +
+
+

Categories

+ +
+
+

Categories

+ +
+
+

Categories

+ +
+
+

Categories

+ +
+
 
+
+
+
+

CC 2019 open hardware observatory    |    imprint    |    legal

+
+ + diff --git a/img/fancycrave-530803-unsplash.jpg b/img/fancycrave-530803-unsplash.jpg new file mode 100644 index 0000000..d5decc8 Binary files /dev/null and b/img/fancycrave-530803-unsplash.jpg differ diff --git a/style.css b/style.css index 87f5e81..0f2c023 100644 --- a/style.css +++ b/style.css @@ -94,6 +94,17 @@ a:hover { max-width: 1055px; margin:0 auto; } +.col-1-3 { + width:30%; + float:left; + position: relative; +} +.col-2-3 { + width:60%; + margin-right:20px; + float:left; + position: relative; +} .col-1-4 { width:22%; margin-right:20px; @@ -228,6 +239,94 @@ a:hover { .header-black li a:hover { background: #296178; } +/****** SEARCHBAR ******/ +.searchbar { + position:fixed; + top:65px; + width:100%; + padding:6px 0; + background: rgba(252, 212, 177, 0.7); + z-index:10000; +} +.searchbar form { + margin:0; +} +.searchbar .searchfield { + width:390px; + position: relative; + float:left; +} +.searchbar .searchfield input[type="text"] { + border:2px #a14032 solid; + border-radius: 7px; + font-size:100%; + padding:6px 40px 6px 10px; + color:#002b3e; + width: 100%; + margin:4px; +} +.searchbar .searchfield input[type="text"]:focus { + border:3px #a14032 solid; + outline:none; + margin:3px; +} +.searchbar button { + position: absolute; + color:#a14032; + top:4px; + right:-3px; + border:0; + font-size: 140%; + cursor: pointer; + padding:7px 10px 6px 10px; + background: transparent; + border-bottom-right-radius: 6px; + border-top-right-radius: 7px; + border-left:1px #a14032 solid; +} +.searchbar button:hover { + color:#fff; + background:#a14032; +} +.searchbar select { + position: relative; + display: block; + border:2px #a14032 solid; + background: #fff; + width: 120px; + padding: 5px; + font-size: 100%; + line-height: 1; + border-radius: 7px; + height: 32px; + -webkit-appearance: none; + float: left; + margin: 4px 10px 4px 0; +} +.searchbar select:last-of-type { + margin-right: 0; +} +.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; +} /****** FILTER HORIZONTAL ******/ .filter { background:#a24033; @@ -786,6 +885,18 @@ a:hover { transition: all 0.2s ease-in; } +/****** PRODUCT DETAIL PAGE ******/ +.product-detail .product-meta { + background:#fef0e4; + padding:20px; + width:100%; + position: relative; +} +.product-detail .row img { + width: 100%; +} + + /** https://codepen.io/chrisota/pen/rpaLw *, *:before, *:after { box-sizing: border-box; }