added detail page and searchbar
This commit is contained in:
bmen
parent
feadbde967
commit
270ace5bbe
|
|
@ -0,0 +1,135 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Open Source Ecology (OSE) Germany - Entwicklungsplattform</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Lora|Open+Sans:400,500,600,700,800,900" rel="stylesheet">
|
||||
<link rel="stylesheet" href="style.css"/>
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
|
||||
<script src="js/jquery-3.3.1.min.js"></script>
|
||||
<script src="js/oseg-search.js"></script>
|
||||
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
|
||||
</head>
|
||||
<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 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>
|
||||
<li><a href="#">list of platforms</a></li>
|
||||
<li><a href="#">categories <i class="fas fa-caret-down"></i></a></li>
|
||||
<li><a href="#">menupunkt <i class="fas fa-caret-down"></i></a></li>
|
||||
</ul>
|
||||
<div class="clearer"> </div>
|
||||
</div>
|
||||
<div class="searchbar">
|
||||
<div class="col-1040">
|
||||
<form>
|
||||
<div class="searchfield">
|
||||
<input type="text" name="search" placeholder="What Open Hardware are you looking for?" />
|
||||
<button type="submit" value="Submit">
|
||||
<i class="fa fa-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="search-filter-important">
|
||||
<div class="clearer"> </div>
|
||||
<select class="search-filter-licence">
|
||||
<option value="licence">Licence</option>
|
||||
<option value="cc-by-sa-1">CC-BY-SA-1</option>
|
||||
<option value="cc-by-sa-2">CC-BY-SA-1</option>
|
||||
<option value="cc-by-sa-3">CC-BY-SA-1</option>
|
||||
<option value="cc-by-sa-4">CC-BY-SA-1</option>
|
||||
</select>
|
||||
<select class="search-filter-source">
|
||||
<option value="licence">Source</option>
|
||||
<option value="cc-by-sa-1">CC-BY-SA-1</option>
|
||||
<option value="cc-by-sa-2">CC-BY-SA-1</option>
|
||||
<option value="cc-by-sa-3">CC-BY-SA-1</option>
|
||||
<option value="cc-by-sa-4">CC-BY-SA-1</option>
|
||||
</select>
|
||||
<select class="search-filter-language">
|
||||
<option value="licence">Language</option>
|
||||
<option value="cc-by-sa-1">CC-BY-SA-1</option>
|
||||
<option value="cc-by-sa-2">CC-BY-SA-1</option>
|
||||
<option value="cc-by-sa-3">CC-BY-SA-1</option>
|
||||
<option value="cc-by-sa-4">CC-BY-SA-1</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="clearer"> </div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row content">
|
||||
<div class="col-1040">
|
||||
<h1>Product title mechanical device</h1>
|
||||
<div class="clearer"> </div>
|
||||
<div class="col-2-3">
|
||||
<img src="img/fancycrave-530803-unsplash.jpg" />
|
||||
</div>
|
||||
<div class="col-1-3">
|
||||
<div class="product-meta">
|
||||
<h3>Completeness of profile</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearer"> </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="col-1055">
|
||||
<div class="col-1-5">
|
||||
<h3>Categories</h3>
|
||||
<ul>
|
||||
<li><a href="#">sit amet</a></li>
|
||||
<li><a href="#">sit amet</a></li>
|
||||
<li><a href="#">sit amet</a></li>
|
||||
<li><a href="#">sit amet</a></li>
|
||||
<li><a href="#">sit amet</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-1-5">
|
||||
<h3>Categories</h3>
|
||||
<ul>
|
||||
<li><a href="#">sit amet</a></li>
|
||||
<li><a href="#">sit amet</a></li>
|
||||
<li><a href="#">sit amet</a></li>
|
||||
<li><a href="#">sit amet</a></li>
|
||||
<li><a href="#">sit amet</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-1-5">
|
||||
<h3>Categories</h3>
|
||||
<ul>
|
||||
<li><a href="#">sit amet</a></li>
|
||||
<li><a href="#">sit amet</a></li>
|
||||
<li><a href="#">sit amet</a></li>
|
||||
<li><a href="#">sit amet</a></li>
|
||||
<li><a href="#">sit amet</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-1-5">
|
||||
<h3>Categories</h3>
|
||||
<ul>
|
||||
<li><a href="#">sit amet</a></li>
|
||||
<li><a href="#">sit amet</a></li>
|
||||
<li><a href="#">sit amet</a></li>
|
||||
<li><a href="#">sit amet</a></li>
|
||||
<li><a href="#">sit amet</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-1-5">
|
||||
<h3>Categories</h3>
|
||||
<ul>
|
||||
<li><a href="#">sit amet</a></li>
|
||||
<li><a href="#">sit amet</a></li>
|
||||
<li><a href="#">sit amet</a></li>
|
||||
<li><a href="#">sit amet</a></li>
|
||||
<li><a href="#">sit amet</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="clearer"> </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="imprint">
|
||||
<p><img src="img/oho-logo-imprint.png" width="36" height="19" /> CC 2019 open hardware observatory | <a href="#">imprint</a> | <a href="#">legal</a></p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.6 MiB |
111
style.css
111
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; }
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue