Adjusted styling on main page to make the product listings span to just below the bottom of the page
This commit is contained in:
parent
bc63f5138c
commit
cb89544a1e
@ -22,6 +22,14 @@ html {
|
|||||||
padding: 2%;
|
padding: 2%;
|
||||||
font-size: 160%;
|
font-size: 160%;
|
||||||
font-family: 'Courier New', Courier, monospace;
|
font-family: 'Courier New', Courier, monospace;
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
height: 103vh;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
@ -44,7 +52,7 @@ form {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#logo {
|
#logo {
|
||||||
width: 12%;
|
width: 8rem;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -104,14 +112,13 @@ a:active {
|
|||||||
|
|
||||||
.categories {
|
.categories {
|
||||||
background-color: var(--bg);
|
background-color: var(--bg);
|
||||||
padding-top: 3rem;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.category {
|
.category {
|
||||||
margin: .5rem 0rem;
|
margin: .5rem 0rem;
|
||||||
padding: 0rem 1rem;
|
padding: 0rem 1rem;
|
||||||
border-left: .125rem solid var(--fg);
|
border-left: .125rem solid var(--fg);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -121,38 +128,35 @@ a:active {
|
|||||||
|
|
||||||
.container {
|
.container {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
flex-grow: 1;
|
||||||
|
height: 90%;
|
||||||
fieldset {
|
|
||||||
font-size: 1rem;
|
|
||||||
border-radius: 1rem;
|
|
||||||
font-family: consolas;
|
|
||||||
}
|
|
||||||
|
|
||||||
input, label, button {
|
|
||||||
font-size: inherit;
|
|
||||||
padding: .125rem .5rem;
|
|
||||||
/* the following ensures they're all using the same box-model for rendering */
|
|
||||||
-moz-box-sizing: content-box; /* or `border-box` */
|
|
||||||
-webkit-box-sizing: content-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.textbox {
|
.textbox {
|
||||||
font-size: inherit;
|
padding: .25rem;
|
||||||
|
margin-top: .25rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
width: 15rem;
|
||||||
|
border: none;
|
||||||
background-color: var(--fg);
|
background-color: var(--fg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
.search-button {
|
||||||
|
padding: .25rem .5rem;
|
||||||
|
margin-top: .25rem;
|
||||||
|
margin-right: .5rem;
|
||||||
|
background: #ddd;
|
||||||
|
font-size: 1rem;
|
||||||
|
border: none;
|
||||||
background-color: orange;
|
background-color: orange;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-pane {
|
.filter-pane {
|
||||||
width: 100%;
|
width: 70%;
|
||||||
margin: .5rem 0rem;
|
margin: .5rem 0rem;
|
||||||
background-color: var(--bg-grad-3);
|
background-color: var(--bg-grad-3);
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
@ -160,16 +164,17 @@ input, label, button {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.product-container {
|
.product-container {
|
||||||
width: 90%;
|
width: 95%;
|
||||||
margin: .5rem 0rem;
|
margin: .5rem 0rem;
|
||||||
background-color: var(--bg-grad-3);
|
background-color: var(--bg-grad-3);
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
gap: 3rem 1.5rem;
|
gap: 2rem 1.5rem;
|
||||||
padding: 2rem 1rem 2rem 1rem;
|
padding: 2rem 1rem;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
|
overflow-y: scroll;
|
||||||
}
|
}
|
||||||
|
|
||||||
.product {
|
.product {
|
||||||
|
|||||||
@ -13,32 +13,31 @@
|
|||||||
<img src="assets/img/WMGZON.png" id="logo" class="not-required" alt="WMGZON Logo">
|
<img src="assets/img/WMGZON.png" id="logo" class="not-required" alt="WMGZON Logo">
|
||||||
<form action="test.html" method="get">
|
<form action="test.html" method="get">
|
||||||
<input type="text" name="search" placeholder="Find your favourite products" class="textbox">
|
<input type="text" name="search" placeholder="Find your favourite products" class="textbox">
|
||||||
<input type="submit" class="button">
|
<input type="submit" class="search-button">
|
||||||
</form>
|
</form>
|
||||||
<a href="login.html">Login/Signup</a>
|
<a href="login.html">Login/Signup</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="sticky">
|
|
||||||
|
|
||||||
<div class="categories">
|
<div class="categories">
|
||||||
<a href="Car Parts" class="category">Car Parts</a>
|
<a href="Car Parts" class="category">Car Parts</a>
|
||||||
<a href="Animals" class="category">Animals</a>
|
<a href="Animals" class="category">Animals</a>
|
||||||
<a href="Sports" class="category">Sports</a>
|
<a href="Sports" class="category">Sports</a>
|
||||||
<a href="Books" class="category">Books</a>
|
<a href="Books" class="category">Books</a>
|
||||||
<a href="Phones" class="category">Phones</a>
|
<a href="Phones" class="category">Phones</a>
|
||||||
<a href="Music" class="category">Music</a>
|
<a href="Music" class="category">Music</a>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="filter-pane">
|
|
||||||
<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>
|
</div>
|
||||||
|
|
||||||
|
<div class="filter-pane">
|
||||||
|
<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 class="product-container">
|
<div class="product-container">
|
||||||
<div class="product">
|
<div class="product">
|
||||||
<div class="product-title">12" Brake Disks</div>
|
<div class="product-title">12" Brake Disks</div>
|
||||||
@ -70,6 +69,134 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="product">
|
||||||
|
<div class="product-title">12" Brake Disks</div>
|
||||||
|
<div class="product-information">
|
||||||
|
<div class="product-image">
|
||||||
|
<img src="assets/img/products/brake-disks.png" alt="Brake Disks"/>
|
||||||
|
</div>
|
||||||
|
<div class="product-details">
|
||||||
|
<div class="product-price">£64.50</div>
|
||||||
|
<div class="product-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="product-add-to-cart"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product">
|
||||||
|
<div class="product-title">12" Brake Disks</div>
|
||||||
|
<div class="product-information">
|
||||||
|
<div class="product-image">
|
||||||
|
<img src="assets/img/products/brake-disks.png" alt="Brake Disks"/>
|
||||||
|
</div>
|
||||||
|
<div class="product-details">
|
||||||
|
<div class="product-price">£64.50</div>
|
||||||
|
<div class="product-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="product-add-to-cart"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product">
|
||||||
|
<div class="product-title">12" Brake Disks</div>
|
||||||
|
<div class="product-information">
|
||||||
|
<div class="product-image">
|
||||||
|
<img src="assets/img/products/brake-disks.png" alt="Brake Disks"/>
|
||||||
|
</div>
|
||||||
|
<div class="product-details">
|
||||||
|
<div class="product-price">£64.50</div>
|
||||||
|
<div class="product-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="product-add-to-cart"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product">
|
||||||
|
<div class="product-title">12" Brake Disks</div>
|
||||||
|
<div class="product-information">
|
||||||
|
<div class="product-image">
|
||||||
|
<img src="assets/img/products/brake-disks.png" alt="Brake Disks"/>
|
||||||
|
</div>
|
||||||
|
<div class="product-details">
|
||||||
|
<div class="product-price">£64.50</div>
|
||||||
|
<div class="product-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="product-add-to-cart"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product">
|
||||||
|
<div class="product-title">12" Brake Disks</div>
|
||||||
|
<div class="product-information">
|
||||||
|
<div class="product-image">
|
||||||
|
<img src="assets/img/products/brake-disks.png" alt="Brake Disks"/>
|
||||||
|
</div>
|
||||||
|
<div class="product-details">
|
||||||
|
<div class="product-price">£64.50</div>
|
||||||
|
<div class="product-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="product-add-to-cart"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="product">
|
||||||
|
<div class="product-title">12" Brake Disks</div>
|
||||||
|
<div class="product-information">
|
||||||
|
<div class="product-image">
|
||||||
|
<img src="assets/img/products/brake-disks.png" alt="Brake Disks"/>
|
||||||
|
</div>
|
||||||
|
<div class="product-details">
|
||||||
|
<div class="product-price">£64.50</div>
|
||||||
|
<div class="product-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="product-add-to-cart"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="product">
|
||||||
|
<div class="product-title">12" Brake Disks</div>
|
||||||
|
<div class="product-information">
|
||||||
|
<div class="product-image">
|
||||||
|
<img src="assets/img/products/brake-disks.png" alt="Brake Disks"/>
|
||||||
|
</div>
|
||||||
|
<div class="product-details">
|
||||||
|
<div class="product-price">£64.50</div>
|
||||||
|
<div class="product-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="product-add-to-cart"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product">
|
||||||
|
<div class="product-title">12" Brake Disks</div>
|
||||||
|
<div class="product-information">
|
||||||
|
<div class="product-image">
|
||||||
|
<img src="assets/img/products/brake-disks.png" alt="Brake Disks"/>
|
||||||
|
</div>
|
||||||
|
<div class="product-details">
|
||||||
|
<div class="product-price">£64.50</div>
|
||||||
|
<div class="product-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="product-add-to-cart"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product">
|
||||||
|
<div class="product-title">12" Brake Disks</div>
|
||||||
|
<div class="product-information">
|
||||||
|
<div class="product-image">
|
||||||
|
<img src="assets/img/products/brake-disks.png" alt="Brake Disks"/>
|
||||||
|
</div>
|
||||||
|
<div class="product-details">
|
||||||
|
<div class="product-price">£64.50</div>
|
||||||
|
<div class="product-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="product-add-to-cart"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="product">
|
<div class="product">
|
||||||
<div class="product-title">12" Brake Disks</div>
|
<div class="product-title">12" Brake Disks</div>
|
||||||
<div class="product-information">
|
<div class="product-information">
|
||||||
@ -86,7 +213,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div style="height: 100rem;"></div>
|
<!-- <div style="height: 100rem;"></div> -->
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user