Turned index page into a template

static/css/style.css

@@ -0,0 +1,286 @@
+:root {
+    --bg: #282c34;
+    --bg-secondary: #474d57;
+    --bg-grad-1: #484e58;
+    --bg-grad-2: #4e5560;
+    --bg-grad-3: #59616d;
+    --bg-grad-4: #606a7b;
+    --bg-grad-5: #606978;
+    --input: #4e5560;
+    --fg: #ABB2BF;
+    --header: #E06C75;
+    --link: #FFF;
+    --hover: #888;
+
+    --green: #98C379;
+    --red: #E06C75;
+}
+
+html {
+    background-color: var(--bg);
+    color: var(--fg);
+    padding: 2%;
+    font-size: 160%;
+    font-family: 'Courier New', Courier, monospace;
+    overflow-y: hidden;
+}
+
+body {
+    display: flex;
+    height: 100vh;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 120%;
+}
+
+form {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.sticky {
+    position: -webkit-sticky;
+    position: sticky;
+    top: -2rem;
+}
+
+#logo {
+    width: 8rem;
+    height: auto;
+}
+
+*::-webkit-scrollbar,
+*::-webkit-scrollbar-thumb {
+    width: 26px;
+    border-radius: 13px;
+    background-clip: padding-box;
+    border: 10px solid transparent;
+    color: var(--fg);
+}
+*::-webkit-scrollbar-thumb:hover{
+    color: var(--link);
+}
+
+*::-webkit-scrollbar-thumb {        
+    box-shadow: inset 0 0 0 10px;
+}
+
+@media (max-width:1000px) {
+    .not-required {
+        display: none;
+    }
+}
+
+a {
+    text-decoration: none;				
+    position: relative;
+    color: var(--link);
+    white-space: nowrap;
+    transition: 0.4s;
+    align-content: center;
+}
+
+a:after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 15%;
+    width: 0%;
+    border-bottom: 2px solid var(--fg);
+    transition: 0.4s;
+}
+
+a:hover:after {
+    width: 70%;
+    color: var(--hover);
+}
+
+a:hover {
+    color: var(--hover);
+}
+
+a:active {
+    color: var(--header);
+}
+
+.categories {
+    background-color: var(--bg);
+    display: flex;
+    justify-content: center;
+}
+
+.category {
+    margin: .5rem 0rem;
+    padding: 0rem 1rem;
+    border-left: .125rem solid var(--fg);
+}
+  
+.category:first-child {
+    border-left: none;
+}
+
+.container {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+    gap: 1rem;
+    flex-direction: column;
+    flex-grow: 1;
+    height: 90%;
+}
+
+.search-bar {
+    padding: .25rem;
+    margin-top: .25rem;
+    font-size: 1rem;
+    width: 15rem;
+    border: none;
+    transition: width 0.4s ease-in-out;
+    background-color: var(--fg);
+}
+
+@media (min-width:1500px) {
+    .search-bar:focus {
+        width: 30rem;
+    }
+}
+
+.search-button {
+    padding: .25rem .5rem;
+    margin-top: .25rem;
+    margin-right: .5rem;
+    background: #ddd;
+    font-size: 1rem;
+    border: none;
+    background-color: orange;
+}
+
+
+
+.filter-pane {
+    padding: .5rem 2rem;
+    background-color: var(--bg-grad-3);
+    border-radius: 1rem;
+}
+
+.filter-items {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 2rem;
+}
+
+.product-filter {
+    width: 100%;
+    padding: 16px 20px;
+    border: none;
+    border-radius: 4px;
+    background-color: var(--bg-grad-2);
+    color: var(--fg);
+    font-size: .75rem;
+}
+
+
+
+
+
+
+
+/* Number Plate*/
+.number-plate {
+    display: flex;
+    align-items: center;
+}
+
+.country-identifier {
+    width: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: #ffffff;
+    font-weight: bold;
+    height: 60px;
+    justify-content: center;
+}
+.country-identifier img {
+    border-radius: 8px 0 0 8px;
+}
+.vrn {
+    width: 10rem;
+    height: 63px;
+    border: 1px solid #ead809;
+    background-color: #ead809;
+    border-radius: 0 8px 8px 0;
+}
+.vrn .vrn-text {
+    width: -webkit-fill-available;
+    height: -webkit-fill-available;
+    border-radius: 0;
+    border: 0;
+    font-family: "UKNumberPlate", sans-serif;
+    font-size: 180%;
+    text-transform: uppercase;
+    text-align: center;
+    outline: 0;
+    background-color: transparent;
+}
+.vrn .vrn-text:focus {
+    outline: 0;
+}
+
+
+
+
+
+/* Product Information*/
+
+.product-container {
+    width: 95%;
+    margin: .5rem 0rem;
+    background-color: var(--bg-grad-3);
+    border-radius: 1rem;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    gap: 2rem 1.5rem;
+    padding: 2rem 1rem 3rem;
+    transition: all 0.2s;
+    overflow-y: scroll;
+}
+
+.product {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    flex: 4 0 1rem;
+    padding: .5rem 1rem 2rem 2rem;
+    background: var(--bg-secondary);
+    border-radius: .5rem;
+    transition: all 0.2s;
+}
+
+.product-information {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem 1rem;
+}
+
+.product-details {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem 1rem;
+}
+
+.product-description {
+    font-size: 70%;
+}