diff --git a/.gitignore b/.gitignore index 55e48ae..fa13355 100644 --- a/.gitignore +++ b/.gitignore @@ -278,19 +278,4 @@ pyrightconfig.json .history .ionide -### Web ### -*.asp -*.cer -*.csr -*.css -*.htm -*.html -*.js -*.jsp -*.php -*.rss -*.wasm -*.wat -*.xhtml - # End of https://www.toptal.com/developers/gitignore/api/visualstudiocode,python,flask,web diff --git a/static/css/style.css b/static/css/style.css new file mode 100644 index 0000000..8b2fd72 --- /dev/null +++ b/static/css/style.css @@ -0,0 +1,197 @@ +: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: #98C379; + --hover: #56B6C2; + --glow: #C678DD; + + --green: #98C379; + --red: #E06C75; +} + +html { + background-color: var(--bg); + color: var(--fg); + padding:2%; + font-size: 160%; + font-family: 'Courier New', Courier, monospace; +} + +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: 15%; + 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:600px) { + .not-required { + display: none; + } +} + +a { + text-decoration: none; + position: relative; + color: var(--link); + white-space: nowrap; +} + +a:after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 0%; + border-bottom: 2px solid var(--fg); + transition: 0.4s; +} + +a:hover:after { + width: 100%; + color: var(--glow); +} + +a:hover { + color: var(--glow); +} + +a:active { + color: var(--header); +} + +.categories { + background-color: var(--bg); + padding-top: 3rem; + 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: center; + align-items: center; + width: 100%; + flex-direction: column; +} + +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 { + width: 70%; + font-size: inherit; + background-color: var(--fg); +} + +.button { + background-color: orange; +} + +.filter-pane { + width: 100%; + margin: .5rem 0rem; + background-color: var(--bg-grad-3); + border-radius: 1rem; + min-height: 3rem; +} + +.product-container { + width: 90%; + margin: .5rem 0rem; + background-color: var(--bg-grad-3); + border-radius: 1rem; + display: flex; + flex-wrap: wrap; + flex-direction: row; + gap: 3rem 1.5rem; + padding: 2rem 1rem 2rem 1rem; + transition: all 0.2s; +} + +.product { + display: flex; + flex-direction: column; + justify-content: space-between; + flex-wrap: wrap; + flex: 4 0 1rem; + padding: .5rem 2.5rem 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; +} \ No newline at end of file diff --git a/static/index.html b/static/index.html new file mode 100644 index 0000000..0fec522 --- /dev/null +++ b/static/index.html @@ -0,0 +1,88 @@ + + + + + + + + WMGZON + + + + +
+
+ +
+ Car Parts + Animals + Sports + Books + Phones + Music +
+ +
+
+
+
+
+
+
+
12" Brake Disks
+
+
+ Brake Disks +
+
+
£64.50
+
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
+
+
+
+
+ + +
+
12" Brake Disks
+
+
+ Brake Disks +
+
+
£64.50
+
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
+
+
+
+
+ + +
+
12" Brake Disks
+
+
+ Brake Disks +
+
+
£64.50
+
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
+
+
+
+
+
+ +
+
+ + + \ No newline at end of file