width adaption, jewellery site construction
This commit is contained in:
parent
a78438bf37
commit
775900e27f
3 changed files with 46 additions and 32 deletions
|
@ -25,7 +25,7 @@
|
||||||
</header>
|
</header>
|
||||||
<?php
|
<?php
|
||||||
if ($show_sep == true) {
|
if ($show_sep == true) {
|
||||||
print('<img style="filter: brightness(110%) contrast(80%); position:relative; top: 90px; width: 100%; height: auto" src="/images/background_img/dev_con.jpg"/>');
|
print('<img style="filter: brightness(110%) contrast(80%); position:relative; width: 100%; height: auto" src="/images/background_img/dev_con.jpg"/>');
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
|
|
|
@ -7,43 +7,34 @@ include('header.tpl');
|
||||||
<div class="jew_container">
|
<div class="jew_container">
|
||||||
<div class="flexbox-jew-btn">
|
<div class="flexbox-jew-btn">
|
||||||
<div class="jew-btn-container">
|
<div class="jew-btn-container">
|
||||||
Button1
|
<a href="#">Rings</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="jew-btn-container">
|
<div class="jew-btn-container">
|
||||||
Button2
|
<a href="#">Cufflinks</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="jew-btn-container">
|
<div class="jew-btn-container">
|
||||||
Button3
|
<a href="#">Amulets</a>
|
||||||
|
</div>
|
||||||
|
<div class="jew-btn-container">
|
||||||
|
<a href="#">Necklace</a>
|
||||||
|
</div>
|
||||||
|
<div class="jew-btn-container">
|
||||||
|
<a href="#">Pins</a>
|
||||||
|
</div>
|
||||||
|
<div class="jew-btn-container">
|
||||||
|
<a href="#">Earrings</a>
|
||||||
|
</div>
|
||||||
|
<div class="jew-btn-container">
|
||||||
|
<a href="#">Objects</a>
|
||||||
|
</div>
|
||||||
|
<div class="jew-btn-container">
|
||||||
|
<a href="#">Oak</a>
|
||||||
|
</div>
|
||||||
|
<div class="jew-btn-container">
|
||||||
|
<a href="#">Other</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="jew_container">
|
|
||||||
<div class="flexbox-jew-btn">
|
|
||||||
<div class="jew-btn-container">
|
|
||||||
Button4
|
|
||||||
</div>
|
|
||||||
<div class="jew-btn-container">
|
|
||||||
Button5
|
|
||||||
</div>
|
|
||||||
<div class="jew-btn-container">
|
|
||||||
Button6
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="jew_container">
|
|
||||||
<div class="flexbox-jew-btn">
|
|
||||||
<div class="jew-btn-container">
|
|
||||||
Button7
|
|
||||||
</div>
|
|
||||||
<div class="jew-btn-container">
|
|
||||||
Button8
|
|
||||||
</div>
|
|
||||||
<div class="jew-btn-container">
|
|
||||||
Button9
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<?php include('footer.tpl'); ?>
|
<?php include('footer.tpl'); ?>
|
||||||
|
|
23
tmp
Normal file
23
tmp
Normal file
|
@ -0,0 +1,23 @@
|
||||||
|
@media only screen and (min-width: 1000px) {
|
||||||
|
header {
|
||||||
|
z-index: 1;
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 500px) {
|
||||||
|
.nav li {
|
||||||
|
margin-left: 2px !important;
|
||||||
|
margin-right: 2px !important;
|
||||||
|
width: 20vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (min-width: 501px) and (max-width: 999px) {
|
||||||
|
.nav li {
|
||||||
|
margin-left: 2px !important;
|
||||||
|
margin-right: 2px !important;
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in a new issue