Improved styling on navbar and product containers

This commit is contained in:
Luke Else 2023-12-15 21:23:28 +00:00
parent 086e2c7b45
commit bc63f5138c
2 changed files with 23 additions and 14 deletions

View File

@ -9,9 +9,8 @@
--input: #4e5560;
--fg: #ABB2BF;
--header: #E06C75;
--link: #98C379;
--hover: #56B6C2;
--glow: #C678DD;
--link: #FFF;
--hover: #888;
--green: #98C379;
--red: #E06C75;
@ -20,7 +19,7 @@
html {
background-color: var(--bg);
color: var(--fg);
padding:2%;
padding: 2%;
font-size: 160%;
font-family: 'Courier New', Courier, monospace;
}
@ -45,7 +44,7 @@ form {
}
#logo {
width: 15%;
width: 12%;
height: auto;
}
@ -62,7 +61,7 @@ form {
}
*::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 0 10px;
box-shadow: inset 0 0 0 10px;
}
@media (max-width:600px) {
@ -76,25 +75,27 @@ a {
position: relative;
color: var(--link);
white-space: nowrap;
transition: 0.4s;
align-content: center;
}
a:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
left: 15%;
width: 0%;
border-bottom: 2px solid var(--fg);
transition: 0.4s;
}
a:hover:after {
width: 100%;
color: var(--glow);
width: 70%;
color: var(--hover);
}
a:hover {
color: var(--glow);
color: var(--hover);
}
a:active {
@ -131,6 +132,7 @@ fieldset {
border-radius: 1rem;
font-family: consolas;
}
input, label, button {
font-size: inherit;
padding: .125rem .5rem;
@ -141,7 +143,6 @@ input, label, button {
}
.textbox {
width: 70%;
font-size: inherit;
background-color: var(--fg);
}
@ -177,7 +178,7 @@ input, label, button {
justify-content: space-between;
flex-wrap: wrap;
flex: 4 0 1rem;
padding: .5rem 2.5rem 2rem;
padding: .5rem 1rem 2rem 2rem;
background: var(--bg-secondary);
border-radius: .5rem;
transition: all 0.2s;
@ -194,4 +195,8 @@ input, label, button {
flex-direction: column;
align-items: center;
gap: 1rem 1rem;
}
.product-description {
font-size: 70%;
}

View File

@ -12,7 +12,7 @@
<nav class="navbar">
<img src="assets/img/WMGZON.png" id="logo" class="not-required" alt="WMGZON Logo">
<form action="test.html" method="get">
<input type="text" name="search" class="textbox">
<input type="text" name="search" placeholder="Find your favourite products" class="textbox">
<input type="submit" class="button">
</form>
<a href="login.html">Login/Signup</a>
@ -31,7 +31,11 @@
</div>
<div class="filter-pane">
<div class="number-plate-filter"></div>
<div class="number-plate-filter">
<div class="number-plate">
<div class="number-plate-identifier"></div>
</div>
</div>
<div class="product-ordering not-required"></div>
</div>
</div>