From d3269d8b2a98619c14d71ae2c03eb956d1133837 Mon Sep 17 00:00:00 2001 From: Durgaprasad-Developer Date: Tue, 8 Oct 2024 16:51:30 +0530 Subject: [PATCH 1/7] Update index.html --- index.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 0bc28958..16e24538 100644 --- a/index.html +++ b/index.html @@ -27,6 +27,7 @@ +
+
@@ -293,7 +295,7 @@

Quick Links

-

Contact Us

+

Contact Us

From 0df9da83269e21f7d42be536115968a8d2b37022 Mon Sep 17 00:00:00 2001 From: Durgaprasad-Developer Date: Tue, 8 Oct 2024 16:53:11 +0530 Subject: [PATCH 2/7] Update style.css I aligned navbar and styled contact us and made it responsive --- style.css | 141 ++++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 106 insertions(+), 35 deletions(-) diff --git a/style.css b/style.css index d044a7b9..ce544b11 100644 --- a/style.css +++ b/style.css @@ -143,7 +143,7 @@ html::-webkit-scrollbar-thumb:window-inactive { nav { flex: 1; text-align: right; - margin-right: 100px; + margin: 0px 80px 30px 0px; } nav ul li { @@ -216,7 +216,9 @@ nav ul li.login:hover { font-weight: 500; cursor: pointer; } - +.search_bar_container{ + margin: 0px 100px 30px 0px; +} button { width: 140px; border: 0; @@ -413,9 +415,10 @@ button:hover img { } .footer h2 { - color: white; + color:#ff459f; font-size: 1.3em; margin-bottom: 20px; + text-align: center; } .logo-container { @@ -507,38 +510,59 @@ button:hover img { padding-left: 10px; } -.contact-form .text-input { - background: #272727; - color: #bebdbd; - margin-bottom: 20px; - line-height: 1.5rem; - padding: 10px 15px; - border: none; +/* General Form Styles */ +.contact-form { width: 100%; + max-width: 600px; + margin: 0 auto; + padding: 30px; + background-color: #f9f9f9; + border-radius: 10px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + font-family: Arial, sans-serif; +} + +/* Input Styles */ +.text-input { + width: 80%; + padding: 15px; + margin-bottom: 20px; + border: 1px solid #ddd; border-radius: 5px; + font-size: 16px; + transition: border-color 0.3s ease; + margin:0px 0px 10px 20px; } -.contact-form textarea.text-input { - height: 120px; - resize: none; +.text-input:focus { + outline: none; + border-color: #007BFF; } -.contact-form .contact-btn { - float: right; - font-size: 1.1em; - font-family: 'Arial', sans-serif; - background: #4CAF50; - color: white; +/* Button Styles */ +.contact-btn { + display: inline-block; + padding: 12px 25px; + background-color: #007BFF; + color: #fff; border: none; - padding: 12px 20px; border-radius: 5px; - cursor: pointer; - transition: all .3s; + font-size: 18px; + transition: background-color 0.3s ease; + margin-left: 100px;; +} + +.contact-btn i { + margin-right: 8px; } -.contact-form .contact-btn:hover { - background: #45a049; +.contact-btn:hover { + background-color: #0056b3; } +input{ + width: 10px; +} + .footer-bottom { background: #343a40; @@ -548,24 +572,46 @@ button:hover img { margin-top: 40px; } + + +/* ------------------------Contact Form Responsiveness------------------------ */ + +/* Tablets and small laptops */ @media screen and (max-width: 768px) { - .footer-content { - flex-direction: column; + .contact-form { + max-width: 90%; + padding: 15px; } - - .footer-section { - margin-bottom: 30px; + + .contact-form .text-input { + padding: 12px; + font-size: 15px; } - - .contact-form .contact-btn { - width: 100%; - float: none; + + .contact-form .btn-big { + padding: 10px; + font-size: 16px; } } +/* Smartphones */ +@media screen and (max-width: 500px) { + .contact-form { + max-width: 100%; + padding: 10px; + } + .contact-form .text-input { + padding: 10px; + font-size: 14px; + } - + .contact-form .btn-big { + padding: 8px; + font-size: 14px; + margin:0px auto; + } +} /* -----------------------------------------------Responsiveness----------------------------------------------------- */ @@ -593,6 +639,7 @@ button:hover img { margin-bottom: 10px; text-align: center; margin-left: 50px; + z-index:2; } nav ul li a { @@ -604,6 +651,30 @@ button:hover img { transform: scale(1.18); } + .hero { + position: relative; + display: flex; + justify-content: center; + align-items: center; + background-image: url('https://img.freepik.com/free-photo/view-illuminated-neon-gaming-keyboard-setup-controller_23-2149529354.jpg?size=626&ext=jpg'); + background-size: cover; + background-position: center; + height: 88vh; + color: white; + text-align: center; + z-index: 1; + } + + .overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); /* Dark overlay for better text visibility */ + z-index: 1; + } + .login a { background-color: (#ff459f, #ff9532); color: white; @@ -662,7 +733,7 @@ button:hover img { } .footer-section { - max-width: 100%; + max-width: 80%; text-align: center; } From c371a45f9a7fa360b7b54b9d0d188e16c2311191 Mon Sep 17 00:00:00 2001 From: Durgaprasad-Developer Date: Fri, 11 Oct 2024 14:08:19 +0530 Subject: [PATCH 3/7] Update style.css --- style.css | 1058 +++++------------------------------------------------ 1 file changed, 83 insertions(+), 975 deletions(-) diff --git a/style.css b/style.css index d2e71ab7..02b22aa9 100644 --- a/style.css +++ b/style.css @@ -1,111 +1,33 @@ -.card { - width: 50%; /* Set a specific width */ - margin: 10px auto; /* Center horizontally with automatic margins */ - padding: 20px; /* Add padding */ - margin-bottom: 70px; - - - border: 1px solid #ccc; /* Optional: Add a border */ - border-radius: 8px; /* Optional: Add rounded corners */ - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Optional: Add shadow */ -} -.card-header { - background-color: #333; - color: #fff; - padding: 10px; - margin-bottom: 15px; - text-align: center; - width: 90%; - border-bottom: 1px solid #ddd; - border-radius: 6px; - } -.card-body { - display: flex; - justify-content: space-between; /* Form on the left and image on the right */ - align-items: flex-start; /* Align content to the top */ -} - -.form-section { - width: 50%; /* Width for the form section */ -} - -.image-section { - width: 50%; /* Width for the image section */ - display: flex; - justify-content: center; /* Center the image */ - align-items: center; -} - -.image-section img { - max-width: 100%; /* Make sure image does not exceed its container width */ - height: auto; -} - -.form-group { - margin-bottom: 20px; -} - -label { - display: block; - margin-bottom: 10px; -} - -input, textarea { - width: 100%; /* Adjust width for better alignment */ - padding: 10px; - border: 1px solid #ccc; - border-radius: 5px; -} - -textarea { - height: 100px; /* Adjust height for textarea */ -} - -button[type="submit"] { - background-color: #333; - color: #fff; - padding: 10px 20px; - border: none; - border-radius: 5px; - cursor: pointer; -} - -button[type="submit"]:hover { - background-color: #444; -} - - - - - - - - +/* Reset some basic styles */ * { margin: 0; padding: 0; + box-sizing: border-box; font-family: sans-serif; } +/* Progress Bar Styles */ #progressBarContainer { position: fixed; top: 0; left: 0; width: 100%; height: 7px; - background-color: whitesmoke; - z-index: 9999; - } - - #progressBar { + background-color: whitesmoke; + z-index: 9999; +} + +#progressBar { height: 100%; - width: 0%; - background: linear-gradient(to right, #fb5283, #ff3527);; - transition: width 0.2s ease; - } -*.dark-mode{ + width: 0%; + background: linear-gradient(to right, #fb5283, #ff3527); + transition: width 0.2s ease; +} + +/* Dark Mode Styles */ +.dark-mode { background-color: #493d3d; - color:#f1f1f1; + color: #f1f1f1; } html { @@ -113,10 +35,10 @@ html { scroll-behavior: smooth; } +/* Scrollbar Styles */ html::-webkit-scrollbar { width: 9px; transition: width 0.3s ease; - margin: 10px; } html::-webkit-scrollbar-thumb { @@ -128,135 +50,65 @@ html::-webkit-scrollbar-thumb { html::-webkit-scrollbar-thumb:window-inactive { background: rgb(156, 156, 156); } + +/* Container Styles */ .container { width: 100%; min-height: 100vh; - padding-right: 5%; - box-sizing: border-box; + padding: 0 5%; overflow-x: hidden; } +/* Navbar Styles */ .navbar { width: 100%; display: flex; align-items: center; position: fixed; top: 0; - overflow: hidden; background-color: #fff; z-index: 1000; } -.dark-mode .navbar{ +.dark-mode .navbar { background-color: #493d3d; } -.switch { - position: relative; - display: inline-block; - width: 60px !important; - height: 24px !important; - margin-right: 20px; - - } - - .switch input { - opacity: 0; - width: 0; - height: 0; - } - - .slider { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: #ccc; - transition: .4s; - border-radius: 34px; - } - - .slider:before { - position: absolute; - content: ""; - height: 22px; - width: 22px; - left: 6px; - bottom: 2px; - top:1px; - background-color: black; - transition: .4s; - border-radius: 50%; - } - - input:checked + .slider { - background:linear-gradient(to right, #fb5283, #ff3527) !important; - } - - input:checked + .slider:before { - transform: translateX(26px); - } - - .logo { width: 50px; cursor: pointer; margin: 18px 0; } -@keyframes rainbow { - 0% { - background-position: 0% 50%; - } - - 50% { - background-position: 100% 50%; - } - - 100% { - background-position: 0% 50%; - } -} - .website-name { margin-left: 16px; font-size: 20px; font-weight: bold; - color: transparent; background: linear-gradient(90deg, #ff459f, #ff9532, #ffd700, #32cd32, #1e90ff, #8a2be2, #ff459f); background-size: 400% 400%; -webkit-background-clip: text; background-clip: text; + color: transparent; display: inline-block; animation: rainbow 5s linear infinite; - font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; - font-weight: bolder; - cursor: pointer; -} - -.menu-icon { - width: 25px; - cursor: pointer; - display: none; } +/* Navbar Menu Styles */ nav { flex: 1; text-align: right; - margin: 0px 80px 30px 0px; } -nav ul{ + +nav ul { margin-left: 20px; display: flex; flex-direction: row; } + nav ul li { list-style: none; display: inline; margin-right: 30px; - text-wrap: nowrap; } nav ul li a { @@ -264,35 +116,36 @@ nav ul li a { color: #000; font-size: 14px; font-weight: bold; - display: inline-block; transition: color 0.5s, transform 0.5s; } -.dark-mode nav ul li a{ - color:#ccc; +.dark-mode nav ul li a { + color: #ccc; } + nav ul li a:hover { color: #e00999; transform: scale(1.18); } -nav ul li.login { +/* Button Styles */ +button { + width: 140px; + border: 0; + color: var(--text-color); + font-size: 16px; + font-weight: bolder; background: linear-gradient(to right, #fb5283, #ff3527); - height: 24px; - border-radius: 20px; - padding: 4px 18px; + border-radius: 6px; cursor: pointer; + transition: background 0.3s ease-in-out; } -nav ul li.login a { - color: #fff; -} - -nav ul li.login:hover { - color: #fff; +button:hover { + background: linear-gradient(to right, #ff3527, #fb5283); } - +/* Main Section Styles */ .row { display: flex; justify-content: space-between; @@ -302,844 +155,99 @@ nav ul li.login:hover { .col-1 { flex-basis: 40%; - position: relative; - margin-left: 50px; } .col-1 h2 { font-size: 54px; - color: var(--text-color); cursor: pointer; - letter-spacing: 1px; -} - -.dark-mode h2{ - color: #ccc; } .col-1 h3 { font-size: 30px; - color: var(--text-color); font-weight: 100; margin: 20px 0 10px; - cursor: pointer; } .col-1 p { font-size: 16px; - color: var(--text-color); font-weight: 500; - cursor: pointer; -} -.search_bar_container{ - margin: 0px 100px 30px 0px; -} -button { - width: 140px; - border: 0; - outline: none; - color: var(--text-color); - font-size: 16px; - font-weight: bolder; - background: linear-gradient(to right, #fb5283, #ff3527); - border-radius: 6px; - cursor: pointer; - transition: width 0.5s; - background: linear-gradient(to right, #ff3527, #fb5283, #ffd700); - transition: background 0.3s ease-in-out; -} -#cart-btn -{ - padding: 12px 14px; -} - -button img { - width: 30px; - display: none; -} - -button:hover img { - display: block; -} - -#cart-btn:hover -{ - width: 160px; - display: flex; - align-items: center; - justify-content: space-between; - -} -#buy-btn:hover -{ - width: 160px; - display: flex; - align-items: center; - justify-content: space-between; - padding: 10px; -} -.btn-section -{ display: inline-flex; - gap: 15px; -} - -.col-1::after { - content: ''; - width: 10px; - height: 63%; - background: linear-gradient(#ff459f, #ff6062); - position: absolute; - left: -40px; - top: 8px; } .col-2 { - position: relative; flex-basis: 60%; display: flex; align-items: center; + position: relative; } -.col-2 .controller { - width: 90%; -} - -.color-box { - position: absolute; - right: 0; - top: 0; - background: linear-gradient(#ff459f, #ff9532); - border-radius: 20px 0 0 20px; - height: 100%; - width: 80%; - z-index: -1; - transform: translateX(150px); -} - -.price { - margin: 20px 0; - display: flex; -} - -.original-price { - font-size: 20px; - color: var(--text-color); - text-decoration: line-through; - margin-right: 15px; -} - -.discounted-price { - font-size: 24px; - color: var(--text-color); - font-weight: bold; -} - -.discount { - background-color: #ff3c6d; - color: var(--text-color); - padding: 5px 10px; - border-radius: 5px; - font-size: 14px; - font-weight: bold; - margin-left: 15px; -} - -.add-btn img { - width: 40px; - margin-bottom: 5px; +/* Card Styles */ +.card { + width: 50%; + margin: 10px auto; + padding: 20px; + margin-bottom: 70px; + border: 1px solid #ccc; + border-radius: 8px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } -.add-btn { - text-align: center; - font-size: 14px; - font-weight: bold; - color: var(--text-color); - cursor: pointer; - border: 1.5px solid #fff; +.card-header { + background-color: #333; + color: #fff; padding: 10px; - border-radius: 5px; - display: inline-block; - transition: transform 0.5s; -} - -.add-btn p { - font-size: 16px; -} - -.add-btn:hover { - transform: scale(1.1); -} - -.rating { - display: flex; - align-items: center; - margin: 10px 0; -} - -.rating span { - font-size: 26px; - margin-right: 10px; - background: linear-gradient(to right, #ff459f, #ff9532, #ffd700, #32cd32, #1e90ff); - /* Example gradient colors */ - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; -} - -.rating p { - font-size: 14px; - color: #707070; - margin: 0; -} - -.overall-rating { - margin: 14px 0; - font-size: 16px; - font-weight: bold; - display: flex; - align-items: center; -} - -.overall-rating .star { - margin-left: 5px; - color: #ff3c6d; - font-weight: 600; -} - -.footer { - background: #303036; - color: #d3d3d3; - padding: 50px 0 0; - font-family: 'Arial', sans-serif; + margin-bottom: 15px; + text-align: center; + border-bottom: 1px solid #ddd; + border-radius: 6px; } -.footer-content { +.card-body { display: flex; - flex-wrap: wrap; justify-content: space-between; - max-width: 1200px; - margin: 0 auto; - padding: 0 20px; + align-items: flex-start; } -.footer-section { - flex: 1; - margin-bottom: 40px; - min-width: 300px; - padding: 0 20px; -} - -.footer h2 { - color:#ff459f; - font-size: 1.3em; - margin-bottom: 20px; - text-align: center; +.form-section { + width: 50%; } -.logo-container { +.image-section { + width: 50%; display: flex; + justify-content: center; align-items: center; - margin-bottom: 20px; } -.footer-logo { - width: 60px; +.image-section img { + max-width: 100%; height: auto; - margin-right: 15px; } -.logo-text { - font-size: 1.5em; - margin: 0; -} - -.about-text { - line-height: 1.5; +/* Form Styles */ +.form-group { margin-bottom: 20px; } -.contact span { - display: block; - font-size: 1.1em; - margin-bottom: 8px; -} - -.socials { - margin-top: 20px; -} - -.socials a { - display: inline-block; - width: 40px; - height: 40px; - background: rgba(255,255,255,0.1); - margin-right: 10px; - text-align: center; - line-height: 40px; - border-radius: 50%; - color: #d3d3d3; - transition: all .3s; - transition: transform 0.3s ease, background 0.3s ease; /* Added transform property */ -} - -.socials a:hover{ - transform: scale(1.2); /* Zoom effect on hover */ -} -/* Hover zoom effect for facebook icon */ -.socials .facebook:hover { - background: blue; - color: white; - } - /* Hover zoom effect for instagram icon */ - .socials .instagram:hover { - background: orangered; - color: white; - } - /* Hover zoom effect for twitter[X] icon */ - .socials .twitter:hover { - background: black; - color: white; - } - /* Hover zoom effect for youtube icon */ - .socials .youtube:hover { - background: red; - color: white; - } - -.links ul { - list-style-type: none; - padding: 0; -} - -.links ul a { +label { display: block; margin-bottom: 10px; - font-size: 1.1em; - color: #d3d3d3; - text-decoration: none; - transition: all .3s; -} - -.links ul a:hover { - color: white; - padding-left: 10px; } -/* General Form Styles */ -.contact-form { +input, +textarea { width: 100%; - max-width: 600px; - margin: 0 auto; - padding: 30px; - background-color: #f9f9f9; - border-radius: 10px; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); - font-family: Arial, sans-serif; -} - -/* Input Styles */ -.text-input { - width: 80%; - padding: 15px; - margin-bottom: 20px; - border: 1px solid #ddd; - border-radius: 5px; - font-size: 16px; - transition: border-color 0.3s ease; - margin:0px 0px 10px 20px; -} - -.text-input:focus { - outline: none; - border-color: #007BFF; -} - -/* Button Styles */ -.contact-btn { - display: inline-block; - padding: 12px 25px; - background-color: #007BFF; - color: #fff; - border: none; - border-radius: 5px; - font-size: 18px; - transition: background-color 0.3s ease; - margin-left: 100px;; -} - -.contact-btn i { - margin-right: 8px; -} - -.contact-btn:hover { - background-color: #0056b3; -} -input{ - width: 10px; -} - - -.footer-bottom { - background: #343a40; - color: #686868; - text-align: center; - padding: 15px 0; - margin-top: 40px; -} - - - -/* ------------------------Contact Form Responsiveness------------------------ */ - -/* Tablets and small laptops */ -@media screen and (max-width: 768px) { - .contact-form { - max-width: 90%; - padding: 15px; - } - - .contact-form .text-input { - padding: 12px; - font-size: 15px; - } - - .contact-form .btn-big { - padding: 10px; - font-size: 16px; - } -} - - -/* Smartphones */ -@media screen and (max-width: 500px) { - .contact-form { - max-width: 100%; - padding: 10px; - } - - .contact-form .text-input { - padding: 10px; - font-size: 14px; - } - -.close-btn { - position: absolute; - top: -10px; - right: -10px; - width: 25px; - height: 25px; - font-size: 20px; - color: white; - cursor: pointer; - background-color: #1f2937; - border: 2px solid white; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - box-sizing: border-box; -} - - .toggle-arrow { - position: fixed; - top: 50%; - left: 0; - transform: translateY(-50%); - transition: transform 0.3s ease-in-out; - background-color: #333; - padding: 5px; - border-radius: 0 10px 10px 0; - cursor: pointer; - color: white; - font-size: 25px; - padding: 12px; -} - -.social-sidebar { - position: fixed; - top: 50%; - left: 0; - transform: translateY(-50%); - display: flex; - flex-direction: column; - gap: 15px; - background-color: #333; - padding: 3px; - border-radius: 0 15px 15px 0; - border: none; - transition: background-color 0.3s ease, transform 0.3s ease; - z-index: 1; -} - -.social-sidebar ul{ - list-style: none; - margin: 0; -} - -.social-sidebar li { - display: block; - margin: 12px 0; - position: relative; -} - -.social-sidebar a { - text-decoration: none; - color: white; - font-size: 20px; - padding: 10px; - transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out; - border: none; - border-bottom: none; - border-radius: 50%; - display: flex; - justify-content: center; - align-items: center; - width: 30px; - height: 30px; - margin: 0 10px; -} - -.social-sidebar a:hover i { - transform: scale(1.5); -} - -.social-sidebar li a:hover { - background-color: #ffffff; - border-radius: 50%; - color: #1f2937; - transform: scale(1.1); -} - -.social-sidebar i { - display: inline-block; - transition: transform 0.3s ease-in-out; -} - -.social-sidebar a:hover i { - transform: scale(1.1); -} - - - .contact-form .btn-big { - padding: 8px; - font-size: 14px; - margin:0px auto; - } -} -/* -----------------------------------------------Responsiveness----------------------------------------------------- */ - - -/* ----------------------------for mobiles--------------------------------------- */ - -@media only screen and (max-width: 700px) { - - .menu-icon { - margin-right: 40px; - } - - nav ul { - width: 100%; - background: linear-gradient(to right, #fb5283, #ff3527); - position: absolute; - top: 73px; - right: 0; - z-index: 2; - margin-right: 20px; - } - - nav ul li { - display: block; - margin-top: 10px; - margin-bottom: 10px; - text-align: center; - margin-left: 50px; - z-index:2; - } - - nav ul li a { - color: #fff; - } - - nav ul li a:hover { - color: #ffee00; - transform: scale(1.18); - } - - .hero { - position: relative; - display: flex; - justify-content: center; - align-items: center; - background-image: url('https://img.freepik.com/free-photo/view-illuminated-neon-gaming-keyboard-setup-controller_23-2149529354.jpg?size=626&ext=jpg'); - background-size: cover; - background-position: center; - height: 88vh; - color: white; - text-align: center; - z-index: 1; - } - - .overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.5); /* Dark overlay for better text visibility */ - z-index: 1; - } - - .login a { - background-color: (#ff459f, #ff9532); - color: white; - padding: 4px 20px; - text-decoration: none; - border-radius: 5px; - display: inline-block; - } - - .login a:hover { - background-color: #e05599; - } - - .menu-icon { - display: block; - } - - #menuList { - overflow: hidden; - transition: 0.5s; - } - - .row { - flex-direction: column-reverse; - margin: 100px 0; - } - - .col-2 { - flex-basis: 100%; - margin-bottom: 50px; - } - - .col-2 .controller { - width: 77%; - } - - .color-box { - transform: translateX(75px); - } - - .col-1 { - flex-basis: 100%; - } - - .col-1 h2 { - font-size: 35px; - } - - .col-1 h3 { - font-size: 20px; - } - - .footer-content { - flex-direction: column; - align-items: center; - } - - .footer-section { - max-width: 80%; - text-align: center; - } - - .footer-section .logo-name { - justify-content: center; - } - - .footer-bottom { - max-width: fit-content; - } - -} - - -/* --------------------------for tabs------------------------------------ */ - - -@media only screen and (max-width: 1180px) { - - .menu-icon { - margin-right: 60px; - } - - nav ul { - width: 100%; - background: linear-gradient(to right, #fb5283, #ff3527); - position: absolute; - top: 73px; - right: 0; - z-index: 2; - margin-right: 21px; - } - - nav ul li { - display: block; - margin-top: 10px; - margin-bottom: 10px; - text-align: center; - margin-left: 50px; - } - - nav ul li a { - color: #fff; - } - - nav ul li a:hover { - color: #ffee00; - transform: scale(1.18); - } - - .login a { - background-color: #752280; - color: white; - padding: 4px 20px; - text-decoration: none; - border-radius: 5px; - display: inline-block; - } - - .login a:hover { - background-color: (#f267ff, #ff9532); - } - - .menu-icon { - display: block; - } - - #menuList { - overflow: hidden; - transition: 0.5s; - } -} - -.scroll-top { - position: fixed; - bottom: 20px; - right: 20px; - background: #ff459f; padding: 10px; - border-radius: 50%; - cursor: pointer; - display: none; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); - } - - .scroll-top:hover { - background: #ff6062; - } - - .hidden { - display: none; -} - -.search-bar { - text-align: center; - margin: 15px 0; - display: flex; - justify-content: flex-end; /* Align to right */ - align-items: center; - gap: 8px; /* Space between input and button */ - background-color: #f0f0f0; - padding: 8px 15px; - border-radius: 50px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - max-width: 250px; /* Adjust width to make it smaller */ - margin: 20px auto 0 auto; /* Right alignment with some margin */ - position: relative; - right: 80px; /* Push it further right */ -} - -#search-input { - width: 60%; /* Smaller input size */ - padding: 8px 10px; - font-size: 14px; - border: none; - border-radius: 50px; - background-color: #fff; - outline: none; - box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); - transition: box-shadow 0.3s ease; -} - -#search-input:focus { - box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2); -} - -.search-bar button { - background-color: #333; - color: #fff; - border: none; - padding: 8px 12px; - font-size: 16px; - border-radius: 50px; - cursor: pointer; - transition: background-color 0.3s ease; -} - -.search-bar button:hover { - background-color: #555; -} - -.hero { - position: relative; - display: flex; - justify-content: center; - align-items: center; - background-image: url('https://img.freepik.com/free-photo/view-illuminated-neon-gaming-keyboard-setup-controller_23-2149529354.jpg?size=626&ext=jpg'); - background-size: cover; - background-position: center; - height: 100vh; - color: white; - text-align: center; -} - -.overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.5); /* Dark overlay for better text visibility */ - z-index: 1; -} - -.hero-content { - position: relative; - z-index: 2; -} - -.hero-content h1 { - font-size: 48px; - margin-bottom: 20px; - text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); -} - -.hero-content p { - font-size: 18px; - margin-bottom: 30px; - text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); + border: 1px solid #ccc; + border-radius: 5px; } -.cta-btn { - background-color: white; - color: #ce0606; - padding: 15px 30px; - border-radius: 50px; - text-decoration: none; - font-size: 16px; - transition: background-color 0.3s, color 0.3s; +textarea { + height: 100px; } -.cta-btn:hover { - background-color: #c9565a; - color: white; -} +/* Footer Styles */ +.footer { + background: #303036; + color: #d3d3d3; + padding: 50px 0 0; + font-family: ' From f0139946e00335bde7cc817df5b6a9985e311ba0 Mon Sep 17 00:00:00 2001 From: Durgaprasad-Developer Date: Fri, 11 Oct 2024 14:21:03 +0530 Subject: [PATCH 4/7] Update style.css --- style.css | 336 ++++++++++++++++++++++++------------------------------ 1 file changed, 150 insertions(+), 186 deletions(-) diff --git a/style.css b/style.css index 02b22aa9..e3504dbd 100644 --- a/style.css +++ b/style.css @@ -1,253 +1,217 @@ -/* Reset some basic styles */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: sans-serif; -} - -/* Progress Bar Styles */ -#progressBarContainer { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 7px; - background-color: whitesmoke; - z-index: 9999; -} +@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap'); -#progressBar { - height: 100%; - width: 0%; - background: linear-gradient(to right, #fb5283, #ff3527); - transition: width 0.2s ease; +:root { + --white: #fff; + --light: #eeeded; + --orange: #FFA16C; } -/* Dark Mode Styles */ -.dark-mode { - background-color: #493d3d; - color: #f1f1f1; +body { + background-color: var(--orange); + font-family: system-ui; + overflow: hidden; } -html { - overflow-y: scroll; - scroll-behavior: smooth; -} - -/* Scrollbar Styles */ -html::-webkit-scrollbar { - width: 9px; - transition: width 0.3s ease; +.container { + width: 1200px; + border: 1px solid var(--white); + max-width: 100%; + margin: 50px auto 0; + display: grid; + grid-template-columns: 200px auto 300px; + padding: 20px; + border-radius: 30px; + min-height: 80vh; } -html::-webkit-scrollbar-thumb { - border-radius: 10px; - background: linear-gradient(90deg, #ff459f, #ff9532, #ff459f); - box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); +.menu { + background-color: var(--white); + border-top-left-radius: 30px; + border-bottom-left-radius: 30px; } -html::-webkit-scrollbar-thumb:window-inactive { - background: rgb(156, 156, 156); +.cart { + background-color: var(--white); + border-top-right-radius: 30px; + border-bottom-right-radius: 30px; } -/* Container Styles */ -.container { - width: 100%; - min-height: 100vh; - padding: 0 5%; - overflow-x: hidden; -} - -/* Navbar Styles */ -.navbar { - width: 100%; - display: flex; - align-items: center; - position: fixed; - top: 0; - background-color: #fff; - z-index: 1000; -} - -.dark-mode .navbar { - background-color: #493d3d; +.center { + background-color: var(--light); + border-left: 1px solid var(--light); + border-right: 1px solid var(--light); } +/* Menu Styles */ .logo { - width: 50px; - cursor: pointer; - margin: 18px 0; + padding: 20px; + font-family: 'Lobster', cursive; + font-size: xx-large; + height: 40px; } -.website-name { - margin-left: 16px; - font-size: 20px; - font-weight: bold; - background: linear-gradient(90deg, #ff459f, #ff9532, #ffd700, #32cd32, #1e90ff, #8a2be2, #ff459f); - background-size: 400% 400%; - -webkit-background-clip: text; - background-clip: text; - color: transparent; - display: inline-block; - animation: rainbow 5s linear infinite; +.logo span { + color: var(--orange); } -/* Navbar Menu Styles */ -nav { - flex: 1; - text-align: right; +.menu ul { + padding: 20px 0 20px 20px; + list-style: none; + border-bottom: 1px solid var(--light); } -nav ul { - margin-left: 20px; - display: flex; - flex-direction: row; +.menu ul li { + padding: 10px 0; } -nav ul li { - list-style: none; - display: inline; - margin-right: 30px; +.menu ul li i { + margin-right: 12px; } -nav ul li a { - text-decoration: none; - color: #000; - font-size: 14px; - font-weight: bold; - transition: color 0.5s, transform 0.5s; +.menu ul li.active { + color: var(--orange); + border-right: 2px solid var(--orange); } -.dark-mode nav ul li a { - color: #ccc; +.menu ul li:hover { + color: var(--orange); + border-right: 2px solid var(--orange); } -nav ul li a:hover { - color: #e00999; - transform: scale(1.18); +/* Center Styles */ +.search { + background-color: var(--white); + padding: 20px; + height: 40px; } -/* Button Styles */ -button { - width: 140px; - border: 0; - color: var(--text-color); - font-size: 16px; - font-weight: bolder; - background: linear-gradient(to right, #fb5283, #ff3527); - border-radius: 6px; - cursor: pointer; - transition: background 0.3s ease-in-out; +.search .form { + width: max-content; + border: 1px solid var(--light); + border-radius: 20px; + padding-left: 15px; + color: var(--light); + display: flex; + align-items: center; } -button:hover { - background: linear-gradient(to right, #ff3527, #fb5283); +.search .form input { + border: none; + padding: 0 10px; + outline: none; + width: 100px; } -/* Main Section Styles */ -.row { - display: flex; - justify-content: space-between; - align-items: center; - margin: 120px 0; +.search .form button { + border: none; + background-color: var(--orange); + color: var(--light); + padding: 10px 20px; + border-radius: 20px; } -.col-1 { - flex-basis: 40%; +/* Product List */ +h2 { + padding: 20px; } -.col-1 h2 { - font-size: 54px; - cursor: pointer; +.list { + padding: 0 20px 20px; + display: grid; + grid-template-columns: auto auto; + column-gap: 20px; + row-gap: 20px; } -.col-1 h3 { - font-size: 30px; - font-weight: 100; - margin: 20px 0 10px; +.item { + background-color: var(--white); + display: grid; + grid-template-columns: 20% auto; + padding: 10px; + column-gap: 20px; + border-radius: 20px; } -.col-1 p { - font-size: 16px; - font-weight: 500; +.item .img img { + height: 70px; } -.col-2 { - flex-basis: 60%; +.item .img { + background-color: var(--light); + border-radius: 20px; display: flex; + justify-content: center; align-items: center; - position: relative; } -/* Card Styles */ -.card { - width: 50%; - margin: 10px auto; - padding: 20px; - margin-bottom: 70px; - border: 1px solid #ccc; - border-radius: 8px; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); +.item .content .title { + font-weight: bold; } -.card-header { - background-color: #333; - color: #fff; - padding: 10px; - margin-bottom: 15px; - text-align: center; - border-bottom: 1px solid #ddd; - border-radius: 6px; +.item .content .des { + font-size: small; + opacity: 0.7; + margin-top: 5px; } -.card-body { - display: flex; - justify-content: space-between; - align-items: flex-start; +.item .content .price { + color: var(--orange); + letter-spacing: 2px; + font-weight: 500; + font-size: small; + margin-top: 5px; } -.form-section { - width: 50%; +.item .count { + width: 50px; + border-radius: 10px; + margin-right: 10px; + padding: 3px 5px; + border: 1px solid var(--light); + outline: none; + margin-top: 5px; +} + +.item .content .add { + margin-top: 5px; + background-color: var(--orange); + color: var(--white); + padding: 5px 10px; + border: none; + border-radius: 10px; } -.image-section { - width: 50%; - display: flex; - justify-content: center; - align-items: center; +.item .content .remove { + padding: 5px; + border: none; + margin-top: 5px; + border-radius: 10px; + display: none; } -.image-section img { - max-width: 100%; - height: auto; +/* Cart Styles */ +.cart .item { + transition: 0.5s; + border-bottom: 1px solid var(--light); } -/* Form Styles */ -.form-group { - margin-bottom: 20px; +.cart .name { + padding: 20px; + height: 40px; + font-weight: bold; + font-size: xx-large; + border-bottom: 1px solid var(--light); } -label { - display: block; - margin-bottom: 10px; +.danger { + box-shadow: 0 10px 10px var(--orange); + transform: translate(0, -10px); } -input, -textarea { - width: 100%; - padding: 10px; - border: 1px solid #ccc; - border-radius: 5px; +.cart .add { + display: none; } -textarea { - height: 100px; +.cart .remove { + display: inline-block !important; } - -/* Footer Styles */ -.footer { - background: #303036; - color: #d3d3d3; - padding: 50px 0 0; - font-family: ' From 8aa4354a10abf3abac6623b999e27f71111aa5e1 Mon Sep 17 00:00:00 2001 From: Durgaprasad-Developer Date: Fri, 11 Oct 2024 14:26:04 +0530 Subject: [PATCH 5/7] Update script.js --- script.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/script.js b/script.js index 2cd7df86..30e9f1a8 100644 --- a/script.js +++ b/script.js @@ -65,5 +65,25 @@ window.onload = () => { themeToggle.checked = true; } }; +const cartList = document.querySelector('.cart-list'); +const addButtons = document.querySelectorAll('.add'); + +addButtons.forEach(button => { + button.addEventListener('click', (event) => { + const item = event.target.closest('.item'); + const title = item.querySelector('.title').innerText; + const price = item.querySelector('.price').innerText; + const count = item.querySelector('.count').value; + + addToCart(title, price, count); + }); +}); + +function addToCart(title, price, count) { + const cartItem = document.createElement('div'); + cartItem.classList.add('cart-item'); + cartItem.innerHTML = ` + ${title} - ${price} + From f29059337cd5bd4369be8240249dc7b36582f489 Mon Sep 17 00:00:00 2001 From: Durgaprasad-Developer Date: Fri, 11 Oct 2024 14:26:30 +0530 Subject: [PATCH 6/7] Update index.html --- index.html | 527 ++++++++--------------------------------------------- 1 file changed, 76 insertions(+), 451 deletions(-) diff --git a/index.html b/index.html index 58357e45..bca489a4 100644 --- a/index.html +++ b/index.html @@ -1,471 +1,96 @@ - + - Collect your GamingTools - - - + LΓΉn Dev + - -
-
-
- -
- -
- - Collect your GamingTools - - - - -
- - - - -
- -
- - - -
-
-
-

Welcome to GamingTools

-

Your one-stop shop for all gaming accessories.

- Explore Products -
-
- - -
-
-

PS4 V2 Dualshock 4

-

Wireless Controllers for PlayStation 4

-

(Compatible/Generic)

-
- ₹5500 - ₹3999 - 30% off -
-
- β˜…β˜…β˜…β˜…β˜† -

(2252 reviews)

-
-
- Overall Rating: -

4.1β˜…

-
-
- - -
-
-
- Controller -
-
-
- - -
-
-

Xbox Wireless Controller

-

Controllers for Xbox One and Series X

-

(Official)

-
- ₹4500 - ₹3499 - 22% off -
-
- β˜…β˜…β˜…β˜…β˜… -

(1189 reviews)

-
-
- Overall Rating: -

4.8β˜…

-
-
- - -
-
-
- Controller -
- -
-
- - -
-
-

Nintendo Switch Pro Controller

-

Wireless Controllers for Nintendo Switch

-

(Official)

-
- ₹6000 - ₹4999 - 17% off -
-
- β˜…β˜…β˜…β˜…β˜† -

(3145 reviews)

-
-
- Overall Rating: -

4.2β˜…

-
-
- - -
-
-
- Controller -
- -
-
- - -
-
-

Meta Quest Pro

-

VR Headset from Meta

-

(Official)

-
- ₹40000 - ₹35200 - 12% off -
-
- β˜…β˜…β˜…β˜…β˜† -

(871 reviews)

-
-
- Overall Rating: -

4.2β˜…

-
-
- - -
-
-
- Controller -
- -
-
- - -
-
-

Apple Vision Pro

-

VR Headset from Apple

-

(Official)

-
- ₹293999 - ₹264599 - 10% off -
-
- β˜…β˜…β˜…β˜…β˜… -

(235 reviews)

-
-
- Overall Rating: -

4.8β˜…

-
-
- - -
-
-
- Controller -
- -
-
- - -
-
-

Logitech G502 Hero

-

High Performance Gaming Mouse

-

(Wired)

-
- ₹4000 - ₹2999 - 25% off -
-
- β˜…β˜…β˜…β˜…β˜… -

(9256 reviews)

-
-
- Overall Rating: -

5.0β˜…

-
-
- - -
-
-
- Gaming Mouse -
- -
-
- - -
-
-

Razer BlackWidow

-

Mechanical Gaming Keyboard

-

(Wired)

-
- ₹7000 - ₹5499 - 21% off -
-
- β˜…β˜…β˜…β˜…β˜† -

(6184 reviews)

-
-
- Overall Rating: -

4.5β˜…

-
-
- - -
-
-
- Gaming Keyboard -
- -
-
- - -
-
-

SteelSeries Arctis 7

-

Wireless Gaming Headset

-

(Surround Sound)

-
- ₹12000 - ₹8999 - 25% off -
-
- β˜…β˜…β˜…β˜…β˜… -

(8452 reviews)

-
-
- Overall Rating: -

4.7β˜…

-
-
- - -
-
-
- Gaming Headset -
- -
-
- - -
-
-

Secretlab Omega

-

Ergonomic Gaming Chair

-

(Adjustable)

-
- ₹30000 - ₹24999 - 17% off -
-
- β˜…β˜…β˜…β˜…β˜… -

(3564 reviews)

-
-
- Overall Rating: -

4.8β˜…

-
-
- - -
-
-
- Gaming Chair -
- -
-
-
-
- -
-
-

Contact Us

-
-
-
- -
- - -
-
- - -
-
- - -
- - -
-
- Contact Image -
+
+ + +
+
+
+ + + +
+
+ +

PRODUCTS

+
+ +
+
Product 1
+
+
Product name 1
+
Lorem ipsum dolor sit amet.
+
$20.03
+ + +
-
- -
-
-
-
- -

Collect your GamingTools

+
+
Product 2
+
+
Product name 2
+
Lorem ipsum dolor sit amet.
+
$20.03
+ + + +
-

- Your one-stop shop for premium gaming accessories. Elevate your gaming experience with our curated selection of controllers, VR gear, and more. -

-
-   123-456-789 -   info@gamingtools.com +
+
Product 3
+
+
Product name 3
+
Lorem ipsum dolor sit amet.
+
$20.03
+ + + +
-
- - - - - +
+
Product 4
+
+
Product name 4
+
Lorem ipsum dolor sit amet.
+
$20.03
+ + + +
-
-

Quick Links

- -
-
-

Contact Us

-
- - - -
-
-
-
- © 2024 GamingTools | Designed by Swaraj
-
- - - - - - - - -
- -
- - - - - - + - - - - - - - From 40f5b5b80662178b583ba86600326055f0db54f1 Mon Sep 17 00:00:00 2001 From: Durgaprasad-Developer Date: Fri, 11 Oct 2024 14:26:59 +0530 Subject: [PATCH 7/7] Update style.css --- style.css | 181 +++++++++++++++++++++--------------------------------- 1 file changed, 69 insertions(+), 112 deletions(-) diff --git a/style.css b/style.css index e3504dbd..dc0c402e 100644 --- a/style.css +++ b/style.css @@ -8,210 +8,167 @@ body { background-color: var(--orange); - font-family: system-ui; + font-family: 'Arial', sans-serif; overflow: hidden; } .container { width: 1200px; - border: 1px solid var(--white); - max-width: 100%; - margin: 50px auto 0; + margin: 50px auto; display: grid; grid-template-columns: 200px auto 300px; padding: 20px; border-radius: 30px; - min-height: 80vh; + background-color: var(--white); } .menu { - background-color: var(--white); - border-top-left-radius: 30px; - border-bottom-left-radius: 30px; + background-color: var(--light); + border-radius: 30px 0 0 30px; + padding: 20px; } .cart { - background-color: var(--white); - border-top-right-radius: 30px; - border-bottom-right-radius: 30px; + background-color: var(--light); + border-radius: 0 30px 30px 0; + padding: 20px; } .center { - background-color: var(--light); - border-left: 1px solid var(--light); - border-right: 1px solid var(--light); + padding: 20px; } /* Menu Styles */ .logo { - padding: 20px; font-family: 'Lobster', cursive; - font-size: xx-large; - height: 40px; -} - -.logo span { - color: var(--orange); + font-size: 30px; + margin-bottom: 20px; } .menu ul { - padding: 20px 0 20px 20px; list-style: none; - border-bottom: 1px solid var(--light); + padding: 0; } .menu ul li { padding: 10px 0; -} - -.menu ul li i { - margin-right: 12px; + cursor: pointer; } .menu ul li.active { color: var(--orange); - border-right: 2px solid var(--orange); } .menu ul li:hover { color: var(--orange); - border-right: 2px solid var(--orange); } -/* Center Styles */ +/* Search Styles */ .search { - background-color: var(--white); - padding: 20px; - height: 40px; + margin-bottom: 20px; } .search .form { - width: max-content; - border: 1px solid var(--light); - border-radius: 20px; - padding-left: 15px; - color: var(--light); display: flex; align-items: center; + border: 1px solid var(--light); + border-radius: 20px; + padding: 5px; } -.search .form input { +.search input { border: none; - padding: 0 10px; outline: none; - width: 100px; + padding: 5px; + flex: 1; } -.search .form button { - border: none; +.search button { background-color: var(--orange); - color: var(--light); - padding: 10px 20px; + color: var(--white); + border: none; border-radius: 20px; + padding: 5px 10px; } -/* Product List */ -h2 { - padding: 20px; -} - -.list { - padding: 0 20px 20px; +/* Product List Styles */ +.product-list { display: grid; - grid-template-columns: auto auto; - column-gap: 20px; - row-gap: 20px; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: 20px; } .item { - background-color: var(--white); - display: grid; - grid-template-columns: 20% auto; - padding: 10px; - column-gap: 20px; - border-radius: 20px; + background-color: var(--light); + border-radius: 10px; + padding: 15px; + display: flex; } -.item .img img { - height: 70px; +.item .img { + flex: 1; } -.item .img { - background-color: var(--light); - border-radius: 20px; - display: flex; - justify-content: center; - align-items: center; +.item img { + width: 100%; + border-radius: 10px; +} + +.item .content { + flex: 2; + padding-left: 10px; } -.item .content .title { +.item .title { font-weight: bold; + margin-bottom: 5px; } -.item .content .des { +.item .des { font-size: small; - opacity: 0.7; - margin-top: 5px; + margin-bottom: 5px; } -.item .content .price { +.item .price { color: var(--orange); - letter-spacing: 2px; font-weight: 500; - font-size: small; - margin-top: 5px; } .item .count { width: 50px; - border-radius: 10px; - margin-right: 10px; - padding: 3px 5px; + border-radius: 5px; border: 1px solid var(--light); - outline: none; margin-top: 5px; } -.item .content .add { +.item .add, +.item .remove { margin-top: 5px; - background-color: var(--orange); - color: var(--white); - padding: 5px 10px; border: none; - border-radius: 10px; + border-radius: 5px; + padding: 5px 10px; } -.item .content .remove { - padding: 5px; - border: none; - margin-top: 5px; - border-radius: 10px; - display: none; +.item .add { + background-color: var(--orange); + color: var(--white); } -/* Cart Styles */ -.cart .item { - transition: 0.5s; - border-bottom: 1px solid var(--light); +.item .remove { + background-color: transparent; } -.cart .name { - padding: 20px; - height: 40px; +/* Cart Styles */ +.cart-name { font-weight: bold; - font-size: xx-large; - border-bottom: 1px solid var(--light); + font-size: 24px; + margin-bottom: 20px; } -.danger { - box-shadow: 0 10px 10px var(--orange); - transform: translate(0, -10px); -} - -.cart .add { - display: none; -} - -.cart .remove { - display: inline-block !important; +.cart-list { + background-color: var(--white); + border-radius: 10px; + padding: 10px; + max-height: 400px; + overflow-y: auto; }