├── .vscode └── settings.json ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── README.md ├── Smartphone.html ├── about ├── About.css ├── About.html ├── About.js ├── aboutimg │ ├── Cho.png │ ├── Kids.png.crdownload │ ├── Men's.png │ ├── Screenshot 2023-10-08 183106.png │ ├── Sports.png │ ├── Support.png │ ├── Women.png │ ├── banner.png │ ├── cdo.png │ ├── cdojpeg.jpeg │ ├── ceo.jpeg │ ├── ceo.png │ ├── cho.webp │ ├── cto.png │ ├── cto.webp │ ├── customer.png │ ├── customer1.jpg │ ├── customer3.jpg │ ├── electronics.png │ ├── electronis.jpeg │ ├── kids.jpeg │ ├── ourstory.jpg │ ├── pexels-liza-summer-6347720.jpg │ └── shopping.png ├── index.html └── style.css ├── calculator.cpp ├── contact ├── index.html ├── index.js └── style.css ├── images ├── 5691822.jpg ├── 8331128.jpg ├── Blue Dynamic Fashion Special Sale Banner(1).png ├── Categories │ ├── bag.png │ ├── pale-order.png │ ├── perfume.png │ └── shoe.png ├── arrow.png ├── banner-products │ ├── angular.jpg │ ├── iphone.png │ ├── nodejs.jpg │ ├── product-1.png │ ├── slider-1.png │ ├── slider-3.png │ └── smartwatch.png ├── bestseller-phone1.jpg ├── bestseller-phone2.jpg ├── boy.webp ├── download.jpg ├── envelope.png ├── hot-gadget.png ├── hot-gadget.xd ├── iphone_.jpg ├── kids1.jpg ├── kids2.jpg ├── kids3.jpg ├── laptop │ ├── angular.png │ ├── images.png │ ├── ktshirt.jpg │ ├── ktshirt2.jpg │ ├── ktshirt3.jpg │ ├── nodejs.png │ ├── product-1.png │ ├── product-2.png │ ├── product-3.png │ ├── public.avif │ ├── react.png │ └── sweater.jpg ├── log.svg ├── logo.png ├── mobile-banner.png ├── phone │ ├── phone-1.png │ ├── phone-2.png │ └── phone-3.png ├── pre-pageloader.gif ├── react-tshirt.jpg ├── register.svg ├── shirt1.jpg ├── shirt2.jpg ├── shirt3.jpg ├── smartwatch-banner.png ├── smartwatch.png ├── summersale-banner.jpg ├── women1.jpg ├── women2.jpg ├── women3.jpg ├── women4.jpg └── —Pngtree—women contact support flat illustration_5439566.png ├── index.html ├── js ├── components │ ├── BackToTop.js │ ├── ProductBox.js │ ├── ProductContainer.js │ └── SwiperSlide.js ├── copyrightYear.js ├── script.js └── swipper.js ├── json ├── products.json └── swiper-images.json ├── kids.html ├── login.js ├── menshirts.html ├── package-lock.json ├── pattern.cpp ├── pattern.exe ├── privacy ├── index.html ├── index.js └── style.css ├── review.html ├── script.js ├── signIn.html ├── style-login.css ├── style.css └── womens.html /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | * Demonstrating empathy and kindness toward other people 21 | * Being respectful of differing opinions, viewpoints, and experiences 22 | * Giving and gracefully accepting constructive feedback 23 | * Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | * Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | * The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | * Trolling, insulting or derogatory comments, and personal or political attacks 33 | * Public or private harassment 34 | * Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | * Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | syedimtiyazali141@gmail.com. 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 122 | enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 |

For the contributors.

2 | 3 | # Contributing 4 | 5 | We love pull requests from everyone. By participating in this project, you 6 | agree to abide by the [Code Of Conduct](CODE_OF_CONDUCT.md). 7 | 8 | ## Project setup 9 | 10 | ### Fork and clone the repository 11 | 12 | Copy the URL of the forked repository and clone it. 13 | 14 | ```bash 15 | https://github.com//Code-Shop.git 16 | ``` 17 | 18 | ### Change the directory 19 | 20 | ```bash 21 | cd Code-Shop 22 | ``` 23 | ## Submitting an Issue 24 | 25 | Before you submit an issue, please search the issue tracker, maybe an issue for your problem already exists and the discussion might inform you of workarounds readily available. 26 | 27 | You can report the issues by filling out the [new issue form](https://github.com/SyedImtiyaz-1/Code-Shop/issues/new/choose). 28 | 29 | ## Steps to start making changes 30 | 31 | ### Create and checkout to the new branch. 32 | 33 | ```bash 34 | git checkout -b 35 | ``` 36 | 37 | ### Add the changes 38 | 39 | ```bash 40 | git add . 41 | ``` 42 | 43 | ### Commit your change with a proper message 44 | 45 | ```bash 46 | git commit -m "Enter your message here" 47 | ``` 48 | 49 | ### Make the Pull Request 50 | 51 | ```bash 52 | git push origin 53 | ``` 54 | ### ✅ Code Reviews 55 | 56 | - Be open to feedback and constructive criticism from other contributors. 57 | - Participate in code reviews by reviewing and providing feedback. 58 | 59 | ### ✅ Bug Fixes and Issue Reporting 60 | 61 | - Help identify and fix bugs in the project. 62 | - Report any issues or bugs you encounter during your contribution by creating a new issue in the GitHub repository. 63 | 64 | ### 🚀 Feature Requests 65 | 66 | - Suggest new features or improvements that you believe would enhance the project. 67 | 68 | ### ☘️ Spread the Word 69 | 70 | - Share your experience and the project with others. 71 | - Spread the word about the project on social media, developer forums, or any relevant community platforms. 72 | 73 | ## DONE 🥳 74 | That's it! Thank you for your valuable contribution! 75 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Let's connect - https://www.linkedin.com/in/imtiyaz-sde/ 2 | 3 | - Connect 1:1 with me ➡ https://topmate.io/syedimtiyazali/ 4 | 5 | # Welcome to CodeShop 6 | 7 | Welcome to CodeShop! We are thrilled to have you here. Our app is dedicated to providing you with an exceptional online shopping experience, offering a wide selection of high-quality products ata competitive prices. 8 | 9 | ## Our Mission 10 | 11 | At CodeShop, out mission is to make shopping easy, convenient, and enjoyable for our customers. We strive to offer a user-friendly platform that allows you to find the products you love quickly and securely. Customer satisfaction is our top priority, and we are committed to delivering top-notch service at every step of you shopping journey. 12 | 13 | ## Our Products 14 | 15 | We take pride in curating a diverse range of products that cater to various tastes and preferences. Whether you are looking for trendy fashion items, cutting-edge electronics, stylish home decor, or unique gifts,we have something for everyone. Our team carefully selects each product to ensure it meets our quality standards, providing you with confidence in every purchase. 16 | 17 | ## Secure Shopping 18 | 19 | At CodeShop, your privacy and security are of utmost importance to us. We employ the latest industry-standard encryption and security measures to safeguard your personal information and payment details. You can shop with peace of mind, knowing that your data is protected. 20 | 21 | ## Customer Support 22 | 23 | Our dedicated customer support team is always ready to assist you with any questions, concerns or issues you may encounter. We are available to help through various channels, including email and live chat, to provide prompt and helpful responses to your inquires. 24 | 25 | ## Community and Feedback 26 | 27 | We value the input of our customers and encourage you to share feedback with us. Your suggestion help us improve our services and enhance the overall shopping experience for all users. 28 | 29 | Join the vibrant community on social media to stay updated on the latest deals, promotions and exciting announcements. 30 | 31 | ## Get Started 32 | 33 | Thankyou for choosing CodeShop. If you wish to [contribute](CONTRIBUTING.md) in any way, feel free to get involved. You can suggest improvements, share additional resources, or provide support and encouragement by [opening an issue](https://github.com/SyedImtiyaz-1/Code-Shop/issues) 34 | 35 | The CodeShop Team 36 | -------------------------------------------------------------------------------- /about/About.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: 'Abel', sans-serif; 3 | font-size: large; 4 | background-color: rgb(255, 239, 239); 5 | } 6 | 7 | h1, h2, h3, h4, h5, h6, p{ 8 | cursor: pointer; 9 | } 10 | 11 | 12 | 13 | /* Header nav start */ 14 | 15 | a.nav-link { 16 | margin-right: 20px; 17 | font-weight: 700; 18 | } 19 | .navbar-light .navbar-nav .active>.nav-link:hover{ 20 | color: #ffffff; 21 | } 22 | 23 | nav.fill ul li a.nav-link { 24 | transition: all .5s; 25 | } 26 | 27 | nav.fill ul li a.nav-link:after { 28 | text-align: left; 29 | content: '.'; 30 | margin: 0; 31 | opacity: 0; 32 | } 33 | 34 | nav.fill ul li a.nav-link:hover { 35 | color: white; 36 | z-index: 1; 37 | } 38 | 39 | nav.fill ul li a.nav-link:hover:after { 40 | z-index: -10; 41 | animation: fill 1s forwards; 42 | opacity: 1; 43 | } 44 | 45 | nav.fill ul li a.nav-link { 46 | position: relative; 47 | } 48 | 49 | nav.fill ul li a.nav-link:after { 50 | position: absolute; 51 | bottom: 0; 52 | left: 0; 53 | right: 0; 54 | margin: auto; 55 | width: 0%; 56 | content: '.'; 57 | color: transparent; 58 | background: #aaa; 59 | height: 1px; 60 | } 61 | 62 | /* End */ 63 | 64 | 65 | /* section Mack book start */ 66 | 67 | section#mack-book{ 68 | margin-bottom: 100px; 69 | } 70 | 71 | .carousel-indicators li{ 72 | width: 20px; 73 | height: 8px; 74 | border: none; 75 | border-radius: 4px; 76 | background-color: #CECECE; 77 | } 78 | .carousel-indicators li.active{ 79 | width: 35px; 80 | height: 10px; 81 | border-radius: 8px; 82 | background-image: linear-gradient(145deg,#f1c40f,#e67e22); 83 | } 84 | 85 | .mack { 86 | padding: 10% 4%; 87 | } 88 | 89 | .mack p { 90 | margin-bottom: 30px; 91 | } 92 | 93 | .mack a.mack-btn { 94 | font-weight: bold; 95 | background-color: black; 96 | color: white; 97 | border: 2px solid black; 98 | padding: 15px; 99 | border-radius: 10px; 100 | text-transform: uppercase; 101 | transition: 1s; 102 | cursor: pointer; 103 | } 104 | 105 | .mack a.mack-btn:hover { 106 | background-color: white; 107 | color: black; 108 | } 109 | 110 | svg.bi.bi-arrow-right { 111 | color: white; 112 | font-size: 20px; 113 | transition: .5s; 114 | } 115 | 116 | a.mack-btn:hover svg.bi.bi-arrow-right{ 117 | transform: rotate(-180deg); 118 | color: black; 119 | } 120 | 121 | /* End */ 122 | 123 | /* section Smart phone start */ 124 | 125 | section#smartphone { 126 | margin-bottom: 100px; 127 | } 128 | 129 | .card-hover :hover{ 130 | transform: scale(1.05); 131 | } 132 | 133 | .smartphone-header{ 134 | margin-bottom: 50px; 135 | } 136 | 137 | .smartphone-header h5{ 138 | font-weight: bold; 139 | cursor: pointer; 140 | background: -webkit-linear-gradient(145deg,#f1c40f,#e67e22); 141 | -webkit-background-clip: text; 142 | -webkit-text-fill-color: transparent; 143 | } 144 | 145 | a.smartphone-btn { 146 | font-weight: bold; 147 | background-color: black; 148 | color: white; 149 | border: 2px solid black; 150 | padding: 15px; 151 | border-radius: 10px; 152 | text-transform: uppercase; 153 | transition: 1s; 154 | cursor: pointer; 155 | } 156 | 157 | a.smartphone-btn:hover { 158 | background-color: white; 159 | color: black; 160 | } 161 | 162 | a.smartphone-btn:hover svg.bi.bi-arrow-right{ 163 | transform: rotate(-180deg); 164 | color: black; 165 | } 166 | 167 | /* End */ 168 | 169 | /* section Laptop start */ 170 | 171 | section#laptop{ 172 | margin-bottom: 100px; 173 | } 174 | 175 | .laptop-header{ 176 | margin-bottom: 50px; 177 | } 178 | 179 | 180 | .laptop-header h5{ 181 | font-weight: bold; 182 | cursor: pointer; 183 | background: -webkit-linear-gradient(145deg,#f1c40f,#e67e22); 184 | -webkit-background-clip: text; 185 | -webkit-text-fill-color: transparent; 186 | } 187 | 188 | a.laptop-btn { 189 | font-weight: bold; 190 | background-color: black; 191 | color: white; 192 | border: 2px solid black; 193 | padding: 15px; 194 | border-radius: 10px; 195 | text-transform: uppercase; 196 | transition: 1s; 197 | cursor: pointer; 198 | } 199 | 200 | a.laptop-btn:hover { 201 | background-color: white; 202 | color: black; 203 | } 204 | 205 | a.laptop-btn:hover svg.bi.bi-arrow-right{ 206 | transform: rotate(-180deg); 207 | color: black; 208 | } 209 | 210 | /* End */ 211 | 212 | /* Categories start */ 213 | 214 | hr{ 215 | width: 130px; 216 | background-image: linear-gradient(145deg,#f1c40f,#e67e22); 217 | height: 10px; 218 | border: none; 219 | border-radius: 50px; 220 | margin-bottom: 50px; 221 | } 222 | .categories-card { 223 | box-shadow: 0px 5px 15px gray; 224 | padding: 5%; 225 | } 226 | .mt-5{ 227 | margin-top: 6rem!important; 228 | } 229 | /* End */ 230 | 231 | /* Footer */ 232 | footer { 233 | padding: 5%; 234 | } 235 | /* End */ 236 | 237 | /* Nav animation */ 238 | 239 | @-webkit-keyframes fill { 240 | 0% { 241 | width: 0%; 242 | height: 1px; 243 | } 244 | 50% { 245 | width: 100%; 246 | height: 1px; 247 | } 248 | 100% { 249 | width: 100%; 250 | height: 100%; 251 | background: #333; 252 | } 253 | } 254 | 255 | 256 | 257 | .contact-form { 258 | padding: 40px 0; 259 | margin: 0 10px; 260 | } 261 | 262 | .form-container { 263 | max-width: 55%; 264 | margin: 0 auto; 265 | padding: 20px; 266 | background-color: #ffffff; 267 | border-radius: 10px; 268 | box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); 269 | } 270 | 271 | .contact-form h2 { 272 | text-align: center; 273 | margin-bottom: 20px; 274 | } 275 | 276 | .form-group { 277 | margin-bottom: 20px; 278 | } 279 | 280 | .form-container label { 281 | display:block; 282 | font-weight: bold; 283 | } 284 | .form-container input, textarea{ 285 | width: 100%; 286 | padding: 10px; 287 | border: 1px solid #ccc; 288 | border-radius: 4px; 289 | margin-bottom: 1rem; 290 | resize: vertical; 291 | } 292 | .submit-button { 293 | padding: 10px 20px; 294 | background-color: #0dac30; 295 | border: none; 296 | color: white; 297 | border-radius: 4px; 298 | font-size: 1rem; 299 | cursor: pointer; 300 | } 301 | /* added css to correct the view of contact form for different devices */ 302 | @media (min-width: 1200px){ 303 | .form-container{ 304 | min-width: 40%; 305 | } 306 | } 307 | @media (min-width: 992px)and (max-width:1200px){ 308 | .form-container{ 309 | min-width: 55%; 310 | } 311 | } 312 | @media (min-width: 768px)and (max-width: 992px){ 313 | .form-container{ 314 | min-width: 70%; 315 | } 316 | } 317 | @media (min-width: 576px)and (max-width:768px){ 318 | #contact{ 319 | width:90%; 320 | } 321 | .form-container{ 322 | min-width: 95%; 323 | } 324 | } 325 | @media (max-width: 576px) { 326 | #contact{ 327 | width:90%; 328 | } 329 | .form-container{ 330 | min-width: 95%; 331 | } 332 | } 333 | /* ends here */ 334 | 335 | footer{ 336 | /* padding-top: 1.3em; */ 337 | padding: 0; 338 | width: 110%; 339 | position:relative; 340 | left: -5%; 341 | /* height: ; */ 342 | margin: auto; 343 | border: 2px solid rgb(228, 223, 223); 344 | background-color: #ebd2d2; 345 | } 346 | .footer-main{ 347 | padding-top: 0.4em; 348 | padding-bottom: -0.2em; 349 | display: flex; 350 | width: 90%; 351 | margin: auto; 352 | 353 | justify-content: space-evenly; 354 | 355 | } 356 | 357 | .footer-sec1, .footer-sec4{ 358 | width: 24%; 359 | } 360 | .footer-sec1 h4, .footer-sec4 h4{ 361 | font-size: 1.3rem; 362 | } 363 | .footer-sec1 h3, .footer-sec4 h3{ 364 | font-size: 1.4rem; 365 | } 366 | .footer-sec2, .footer-sec3{ 367 | width: 24%; 368 | } 369 | .footer-sec2 h3, .footer-sec3 h3{ 370 | font-size: 1.4rem; 371 | } 372 | footer a{ 373 | text-decoration: none; 374 | color: #212529; 375 | 376 | } 377 | /* footer amin styling */ 378 | 379 | .footer-main li{ 380 | list-style:none; 381 | } 382 | .footer-main ul{ 383 | padding-left: 0.5em; 384 | 385 | } 386 | footer a:hover{ 387 | color: #212529; 388 | text-decoration: none; 389 | } 390 | .footer-main select{ 391 | width: 40%; 392 | padding: 0.15em; 393 | margin-left: 0.2em; 394 | border: 1px solid black; 395 | border-radius: 0.3em ; 396 | background-color: #ffdbdb; 397 | } 398 | 399 | .footer-main option:checked{ 400 | background: grey; 401 | color: white; 402 | padding: 0.15em; 403 | margin-left: 0.5em; 404 | border-radius: 0.3em ; 405 | font-size: 1.05rem; 406 | padding-bottom: 0.25em; 407 | } 408 | .footer-main option{ 409 | 410 | font-size: 1.05rem; 411 | padding-bottom: 0.25em; 412 | } 413 | @media (min-width:765px) and (max-width:1000px){ 414 | .footer-sec3{ 415 | display: none; 416 | } 417 | footer{ 418 | margin-left:0.9em; 419 | } 420 | .footer-main select{ 421 | width: 55%; 422 | } 423 | 424 | } 425 | @media (max-width:765px){ 426 | .footer-sec3, .footer-sec2{ 427 | display: none; 428 | } 429 | .footer-sec1, .footer-sec4{ 430 | width: 45%; 431 | } 432 | .footer-main select{ 433 | width: 60%; 434 | } 435 | 436 | } 437 | 438 | /* footer main styling ends */ 439 | 440 | /* footer go styling starts */ 441 | .footer-go{ 442 | 443 | padding-top: 0.15em; 444 | border-bottom: 2px solid white ; 445 | border-top: 2px solid white ; 446 | } 447 | .footer-go:hover{ 448 | /* background-color: rgb(255, 239, 239); */ 449 | 450 | border: 2px solid rgb(255, 239, 239) ; 451 | background-color: rgb(177, 168, 168); 452 | cursor: pointer; 453 | } 454 | /* footer go styling ends */ 455 | 456 | 457 | /* footer lower styling starts */ 458 | .footer-lower{ 459 | display: flex; 460 | padding-left: 1.5em; 461 | padding-top: 0.3em; 462 | padding-bottom: 0.3em; 463 | justify-content: space-between; 464 | border-top: 2px solid white; 465 | border-bottom: 2px solid white; 466 | 467 | } 468 | .footer-lower-item1{ 469 | width: 33%; 470 | } 471 | 472 | .footer-lower-item1 div input{ 473 | border: 1px solid #ced4da; 474 | 475 | } 476 | .footer-lower-item1 div span{ 477 | padding: 0 0.75rem; 478 | } 479 | .footer-lower-item2{ 480 | width: 50%; 481 | } 482 | .payment-logos{ 483 | padding-left: 1.5em; 484 | padding-right: 7.5em; 485 | display: flex; 486 | justify-content: space-evenly; 487 | } 488 | @media (min-width:765px) and (max-width:1000px){ 489 | .footer-lower-item1{ 490 | width: 47%; 491 | } 492 | .payment-logos{ 493 | padding-right: 2.5em; 494 | } 495 | #payment-logos5 , #payment-logos6 , #payment-logos7 { 496 | display: none; 497 | } 498 | } 499 | @media (max-width:765px) { 500 | .footer-lower-item2{ 501 | display: none; 502 | } 503 | .footer-lower-item1{ 504 | width: 80%; 505 | } 506 | } 507 | /* footer lower styling ends */ 508 | 509 | 510 | 511 | /* aboutusbanner css */ 512 | .about_banner{ 513 | display: flex; 514 | justify-content: space-between; 515 | } 516 | .about_banner .image{ 517 | width: 60%; 518 | } 519 | .about_banner .image img{ 520 | width: 100%; 521 | } 522 | .about_banner .article{ 523 | width: 40%; 524 | color: black; 525 | } 526 | .about_banner .article h1{ 527 | margin-top: 45%; 528 | font-size:2.5rem; 529 | font-family: 'Mulish', sans-serif; 530 | font-family: 'Ysabeau Office', sans-serif; 531 | } 532 | .about_banner .article p{ 533 | font-size: 1.15rem; 534 | font-family: 'Ysabeau Office', sans-serif; 535 | } 536 | @media screen and (max-width: 768px) { 537 | .about_banner .image{ 538 | display: none; 539 | } 540 | .about_banner .article{ 541 | width:95%; 542 | margin: auto; 543 | text-align: center; 544 | background-image: url(./aboutimg/pexels-liza-summer-6347720.jpg); 545 | background-size: cover; 546 | height: 200px; 547 | box-shadow: 0px 5px 15px gray; 548 | border-radius: 8px; 549 | 550 | 551 | 552 | } 553 | .about_banner .article h1{ 554 | margin-top: 14%; 555 | 556 | } 557 | 558 | 559 | } 560 | 561 | 562 | /* ourstory css */ 563 | .ourstory .image img{ 564 | width: 50%; 565 | height: 250px; 566 | object-fit: cover; 567 | border-radius: 25px; 568 | } 569 | .ourstory .image { 570 | display: flex; 571 | } 572 | .ourstory .image div{ 573 | width: 40%; 574 | text-align: center; 575 | font-family: 'Mulish', sans-serif; 576 | font-family: 'Ysabeau Office', sans-serif; 577 | } 578 | .ourstory .image h1{ 579 | margin-top: 15%; 580 | text-align: center; 581 | font-family: 'Mulish', sans-serif; 582 | font-family: 'Ysabeau Office', sans-serif; 583 | } 584 | .ourstory .article{ 585 | display: flex; 586 | } 587 | .ourstory .article div{ 588 | width: 45%; 589 | } 590 | .ourstory .article p{ 591 | width: 55%; 592 | background-color: white; 593 | box-shadow: 0px 5px 15px gray; 594 | position: relative; 595 | top: -3em; 596 | left: -1em; 597 | border-radius: 15px ; 598 | padding: 1.7em; 599 | font-family: 'Ysabeau Office', sans-serif; 600 | } 601 | @media screen and (max-width: 768px){ 602 | .ourstory .image{ 603 | display: block; 604 | } 605 | .ourstory .image img{ 606 | width: 80%; 607 | margin-left: 10%; 608 | 609 | } 610 | .ourstory .article p{ 611 | top: 0; 612 | left: 0; 613 | width: 100%; 614 | } 615 | .ourstory .image div{ 616 | 617 | 618 | margin: 0.2em auto; 619 | text-align: center; 620 | } 621 | .ourstory h1{ 622 | font-size: 2rem; 623 | font-weight: 500; 624 | } 625 | .ourstory .article div{ 626 | display: none; 627 | width: 0; 628 | } 629 | } 630 | 631 | 632 | /* -------meet our team member5s styling ---------*/ 633 | 634 | 635 | .team { 636 | display: flex; 637 | flex-wrap: wrap; 638 | justify-content: center; 639 | gap: 20px; 640 | padding: 20px; 641 | } 642 | 643 | 644 | .team .team-member { 645 | text-align: center; 646 | max-width: 300px; 647 | } 648 | 649 | .team .team-member img { 650 | max-width: 100%; 651 | } 652 | 653 | 654 | @media screen and (max-width: 768px) { 655 | .team { 656 | flex-direction: column; 657 | align-items: center; 658 | } 659 | } 660 | 661 | /* mission-css */ 662 | .mission{ 663 | display: flex; 664 | justify-content: space-between; 665 | } 666 | .mission .image-column{ 667 | width: 40%; 668 | order: 2; 669 | } 670 | .mission .image-column img{ 671 | width: 100%; 672 | 673 | } 674 | .mission .mission-article{ 675 | width: 55%; 676 | display: flex; 677 | flex-direction: column; 678 | justify-content:space-between; 679 | padding: 2.5em 2em; 680 | } 681 | .mission .mission-article p{ 682 | padding-left: 0.8em; 683 | } 684 | @media screen and (max-width: 1050px){ 685 | .mission{ 686 | display: block; 687 | background-image: url(./aboutimg/customer.png); 688 | background-size: cover; 689 | 690 | color: black; 691 | } 692 | .mission p{ 693 | color: black; 694 | font-weight: 600; 695 | } 696 | .mission .mission-article{ 697 | display: block; 698 | width: 100%; 699 | } 700 | .mission .image-column{ 701 | display: none; 702 | } 703 | } 704 | 705 | /* customer feedbak */ 706 | 707 | .carousel { 708 | padding: 0 70px; 709 | } 710 | .carousel .carousel-item { 711 | color: #999; 712 | font-size: 14px; 713 | text-align: center; 714 | overflow: hidden; 715 | min-height: 290px; 716 | } 717 | .carousel .carousel-item .img-box { 718 | width: 135px; 719 | height: 135px; 720 | margin: 0 auto; 721 | padding: 5px; 722 | border: 1px solid #ddd; 723 | border-radius: 50%; 724 | } 725 | .carousel .img-box img { 726 | width: 100%; 727 | height: 100%; 728 | display: block; 729 | border-radius: 50%; 730 | } 731 | .carousel .testimonial { 732 | padding: 30px 0 10px; 733 | } 734 | .carousel .overview { 735 | font-style: italic; 736 | } 737 | .carousel .overview b { 738 | text-transform: uppercase; 739 | color: #7AA641; 740 | } 741 | .carousel-control-prev, .carousel-control-next { 742 | width: 40px; 743 | height: 40px; 744 | margin-top: -20px; 745 | top: 50%; 746 | background: none; 747 | } 748 | .carousel-control-prev i, .carousel-control-next i { 749 | font-size: 68px; 750 | line-height: 42px; 751 | position: absolute; 752 | display: inline-block; 753 | color: rgba(0, 0, 0, 0.8); 754 | text-shadow: 0 3px 3px #e6e6e6, 0 0 0 #000; 755 | } 756 | .carousel-indicators { 757 | bottom: -40px; 758 | } 759 | .carousel-indicators li, .carousel-indicators li.active { 760 | width: 12px; 761 | height: 12px; 762 | margin: 1px 3px; 763 | border-radius: 50%; 764 | border: none; 765 | } 766 | .carousel-indicators li { 767 | background: #999; 768 | border-color: transparent; 769 | box-shadow: inset 0 2px 1px rgba(0,0,0,0.2); 770 | } 771 | .carousel-indicators li.active { 772 | background: #555; 773 | box-shadow: inset 0 2px 1px rgba(0,0,0,0.2); 774 | } 775 | .customer-feedback { 776 | text-align: center; 777 | padding: 20px; 778 | } 779 | 780 | .customer-feedback h2 { 781 | font-size: 2rem; 782 | margin-bottom: 20px; 783 | } 784 | 785 | 786 | 787 | 788 | 789 | @media screen and (max-width: 768px) { 790 | .testimonial { 791 | max-width: 100%; 792 | } 793 | } 794 | 795 | /* customer-support css */ 796 | .support{ 797 | display: flex; 798 | } 799 | .support .image{ 800 | width: 50%; 801 | } 802 | .support .image img{ 803 | width: 100%; 804 | } 805 | .support .customer-support{ 806 | width: 50%; 807 | padding-top: 2.5em; 808 | 809 | } 810 | @media screen and (max-width: 768px){ 811 | .support{ 812 | display: block; 813 | } 814 | .support .customer-support{ 815 | 816 | width: 100%; 817 | } 818 | .customer-support p{ 819 | padding: 0.5em; 820 | } 821 | .support .image{ 822 | width: 100%; 823 | } 824 | 825 | } 826 | 827 | 828 | 829 | -------------------------------------------------------------------------------- /about/About.js: -------------------------------------------------------------------------------- 1 | function topFunction() { 2 | document.body.scrollTop = 0; // For Safari 3 | document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera 4 | } -------------------------------------------------------------------------------- /about/aboutimg/Cho.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/about/aboutimg/Cho.png -------------------------------------------------------------------------------- /about/aboutimg/Kids.png.crdownload: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/about/aboutimg/Kids.png.crdownload -------------------------------------------------------------------------------- /about/aboutimg/Men's.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/about/aboutimg/Men's.png -------------------------------------------------------------------------------- /about/aboutimg/Screenshot 2023-10-08 183106.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/about/aboutimg/Screenshot 2023-10-08 183106.png -------------------------------------------------------------------------------- /about/aboutimg/Sports.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/about/aboutimg/Sports.png -------------------------------------------------------------------------------- /about/aboutimg/Support.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/about/aboutimg/Support.png -------------------------------------------------------------------------------- /about/aboutimg/Women.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/about/aboutimg/Women.png -------------------------------------------------------------------------------- /about/aboutimg/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/about/aboutimg/banner.png -------------------------------------------------------------------------------- /about/aboutimg/cdo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/about/aboutimg/cdo.png -------------------------------------------------------------------------------- /about/aboutimg/cdojpeg.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/about/aboutimg/cdojpeg.jpeg -------------------------------------------------------------------------------- /about/aboutimg/ceo.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/about/aboutimg/ceo.jpeg -------------------------------------------------------------------------------- /about/aboutimg/ceo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/about/aboutimg/ceo.png -------------------------------------------------------------------------------- /about/aboutimg/cho.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/about/aboutimg/cho.webp -------------------------------------------------------------------------------- /about/aboutimg/cto.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/about/aboutimg/cto.png -------------------------------------------------------------------------------- /about/aboutimg/cto.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/about/aboutimg/cto.webp -------------------------------------------------------------------------------- /about/aboutimg/customer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/about/aboutimg/customer.png -------------------------------------------------------------------------------- /about/aboutimg/customer1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/about/aboutimg/customer1.jpg -------------------------------------------------------------------------------- /about/aboutimg/customer3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/about/aboutimg/customer3.jpg -------------------------------------------------------------------------------- /about/aboutimg/electronics.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/about/aboutimg/electronics.png -------------------------------------------------------------------------------- /about/aboutimg/electronis.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/about/aboutimg/electronis.jpeg -------------------------------------------------------------------------------- /about/aboutimg/kids.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/about/aboutimg/kids.jpeg -------------------------------------------------------------------------------- /about/aboutimg/ourstory.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/about/aboutimg/ourstory.jpg -------------------------------------------------------------------------------- /about/aboutimg/pexels-liza-summer-6347720.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/about/aboutimg/pexels-liza-summer-6347720.jpg -------------------------------------------------------------------------------- /about/aboutimg/shopping.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/about/aboutimg/shopping.png -------------------------------------------------------------------------------- /about/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 40 |
41 | About Page 42 |
43 | 44 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /about/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 6 | } 7 | 8 | .container { 9 | display: flex; 10 | flex-direction: column; 11 | min-height: 100vh; 12 | width: 100vw; 13 | background: linear-gradient(to left top, rgb(4, 18, 46), rgb(105, 163, 201)); 14 | padding: 50px; 15 | } 16 | h1, h2{ 17 | color: white; 18 | } 19 | p{ 20 | color: rgba(255, 255, 255, 0.74); 21 | } -------------------------------------------------------------------------------- /calculator.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | using namespace std; 3 | void add(int a, int b) 4 | { 5 | cout<< a+b; 6 | } 7 | void sub(int a , int b) 8 | { 9 | cout<< a-b; 10 | 11 | } 12 | void mul(int a, int b) 13 | { 14 | cout<>a; 36 | cout<<"enter second number"; 37 | cin>>b; 38 | cout<<"ENTER YOUR OPTION"<>op; 40 | switch (op) 41 | { 42 | case 1:add(a,b)/* constant-expression */; 43 | /* code */ 44 | break; 45 | case 2:sub(a,b); 46 | break; 47 | case 3:mul(a,b); 48 | break; 49 | case 4: divide(a,b); 50 | break; 51 | case 5:modulo(a,b); 52 | break; 53 | 54 | default: cout<<"enter valid option"; 55 | break; 56 | } 57 | } -------------------------------------------------------------------------------- /contact/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 10 | 11 | 12 | 13 | Contact 14 | 15 | 16 | 17 | 30 |
31 |
32 |
33 | 34 |
35 | 36 | 37 |
38 |

We would like to hear from you!

39 |
We will get back to you in 24 hours
40 |
41 |
42 | 43 | 44 |
45 |
46 | 47 |
48 |
49 |
50 | 51 |
52 |
53 | 54 | 55 |
56 |
57 | 58 | 59 |
60 |
61 | 62 | 63 | 99 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /contact/index.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", function () { 2 | const nameInput = document.getElementById("name"); 3 | const emailInput = document.getElementById("email"); 4 | const messageInput = document.getElementById("message"); 5 | const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; 6 | 7 | nameInput.addEventListener("blur", validateName); 8 | emailInput.addEventListener("blur", validateEmail); 9 | messageInput.addEventListener("blur", validateMessage); 10 | let isValid = true; 11 | 12 | function validateName() { 13 | const nameError = document.getElementById("name-error"); 14 | if (nameInput.value.trim() === "") { 15 | nameError.textContent = "Name is required"; 16 | nameError.style.display = "block"; 17 | isValid = false; 18 | } else { 19 | nameError.textContent = ""; 20 | nameError.style.display = "none"; 21 | } 22 | } 23 | 24 | function validateEmail() { 25 | const emailError = document.getElementById("email-error"); 26 | if (emailInput.value.trim() === "") { 27 | emailError.textContent = "Email is required"; 28 | emailError.style.display = "block"; 29 | isValid = false; 30 | } else if (!emailPattern.test(emailInput.value)) { 31 | emailError.textContent = "Invalid email format"; 32 | emailError.style.display = "block"; 33 | isValid = false; 34 | } else { 35 | emailError.textContent = ""; 36 | emailError.style.display = "none"; 37 | } 38 | } 39 | 40 | function validateMessage() { 41 | const messageError = document.getElementById("message-error"); 42 | if (messageInput.value.trim() === "") { 43 | messageError.textContent = "Message is required"; 44 | messageError.style.display = "block"; 45 | isValid = false; 46 | } else { 47 | messageError.textContent = ""; 48 | messageError.style.display = "none"; 49 | } 50 | } 51 | document 52 | .getElementById("my-form") 53 | .addEventListener("submit", function (event) { 54 | validateName(); 55 | validateEmail(); 56 | validateMessage(); 57 | 58 | if (!isValid) { 59 | event.preventDefault(); 60 | } 61 | }); 62 | }); 63 | -------------------------------------------------------------------------------- /contact/style.css: -------------------------------------------------------------------------------- 1 | body, 2 | p, 3 | h1, 4 | h2, 5 | h3, 6 | ul, 7 | li, 8 | button { 9 | margin: 0; 10 | padding: 0; 11 | } 12 | 13 | /* Set a background color and font family for the entire page */ 14 | body { 15 | font-family: Arial, sans-serif; 16 | background-color: #f5f5f5; 17 | } 18 | 19 | /* Style the navigation bar */ 20 | nav { 21 | background-color: #333; 22 | color: #fff; 23 | display: flex; 24 | justify-content: space-between; 25 | padding: 10px 20px; 26 | } 27 | 28 | nav h3 { 29 | font-size: 24px; 30 | font-weight: bold; 31 | } 32 | 33 | nav ul { 34 | list-style: none; 35 | display: flex; 36 | } 37 | 38 | nav ul li { 39 | margin-right: 20px; 40 | } 41 | 42 | nav ul li:last-child { 43 | margin-right: 0; 44 | } 45 | 46 | nav a { 47 | text-decoration: none; 48 | color: #fff; 49 | } 50 | 51 | /* Style the main content */ 52 | main { 53 | padding: 20px; 54 | } 55 | 56 | .my-form { 57 | margin-top: 15px; 58 | } 59 | 60 | .contact-box { 61 | display: flex; 62 | justify-content: space-between; 63 | align-items: center; 64 | background-color: #fff; 65 | border-radius: 10px; 66 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 67 | padding: 20px; 68 | } 69 | 70 | .contact-sec-1 img { 71 | max-width: 100%; 72 | height: auto; 73 | } 74 | 75 | .contact-sec-2 { 76 | flex: 1; 77 | padding-left: 20px; 78 | } 79 | 80 | .contact-sec-2 h1 { 81 | font-size: 24px; 82 | margin-bottom: 10px; 83 | color: #333; 84 | } 85 | 86 | .contact-sec-2 input[type="text"], 87 | .contact-sec-2 input[type="email"], 88 | .contact-sec-2 textarea { 89 | width: 100%; 90 | padding: 10px; 91 | margin-bottom: 10px; 92 | border: 1px solid #ccc; 93 | border-radius: 5px; 94 | } 95 | .contact-sec-2 input:focus, 96 | textarea:focus { 97 | border: 2px solid #555; 98 | outline: none; 99 | } 100 | 101 | .contact-sec-2 textarea { 102 | resize: vertical; 103 | } 104 | 105 | .contact-sec-2 button { 106 | background-color: #333; 107 | color: #fff; 108 | padding: 10px 20px; 109 | border: none; 110 | border-radius: 5px; 111 | cursor: pointer; 112 | } 113 | .error-message { 114 | color: red; 115 | } 116 | .contact-sec-2 button:hover { 117 | background-color: #555; 118 | } 119 | 120 | /* Style the footer */ 121 | footer { 122 | background-color: #333; 123 | color: #fff; 124 | padding: 20px; 125 | } 126 | 127 | footer h3 { 128 | font-size: 24px; 129 | font-weight: bold; 130 | } 131 | 132 | .f2-center { 133 | display: flex; 134 | justify-content: space-between; 135 | align-items: center; 136 | } 137 | 138 | .f2 ul { 139 | list-style: none; 140 | } 141 | 142 | .f2 ul li { 143 | margin-bottom: 10px; 144 | } 145 | 146 | .socials { 147 | margin-top: 20px; 148 | } 149 | 150 | .s-link a { 151 | color: #fff; 152 | margin-right: 10px; 153 | text-decoration: none; 154 | font-size: 24px; 155 | } 156 | 157 | .s-link a:hover { 158 | color: #ccc; 159 | } 160 | 161 | /* Copyright text at the bottom */ 162 | .copyright { 163 | margin-top: 20px; 164 | text-align: center; 165 | } 166 | 167 | .copyright span { 168 | font-weight: bold; 169 | } 170 | -------------------------------------------------------------------------------- /images/5691822.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/5691822.jpg -------------------------------------------------------------------------------- /images/8331128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/8331128.jpg -------------------------------------------------------------------------------- /images/Blue Dynamic Fashion Special Sale Banner(1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/Blue Dynamic Fashion Special Sale Banner(1).png -------------------------------------------------------------------------------- /images/Categories/bag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/Categories/bag.png -------------------------------------------------------------------------------- /images/Categories/pale-order.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/Categories/pale-order.png -------------------------------------------------------------------------------- /images/Categories/perfume.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/Categories/perfume.png -------------------------------------------------------------------------------- /images/Categories/shoe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/Categories/shoe.png -------------------------------------------------------------------------------- /images/arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/arrow.png -------------------------------------------------------------------------------- /images/banner-products/angular.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/banner-products/angular.jpg -------------------------------------------------------------------------------- /images/banner-products/iphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/banner-products/iphone.png -------------------------------------------------------------------------------- /images/banner-products/nodejs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/banner-products/nodejs.jpg -------------------------------------------------------------------------------- /images/banner-products/product-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/banner-products/product-1.png -------------------------------------------------------------------------------- /images/banner-products/slider-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/banner-products/slider-1.png -------------------------------------------------------------------------------- /images/banner-products/slider-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/banner-products/slider-3.png -------------------------------------------------------------------------------- /images/banner-products/smartwatch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/banner-products/smartwatch.png -------------------------------------------------------------------------------- /images/bestseller-phone1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/bestseller-phone1.jpg -------------------------------------------------------------------------------- /images/bestseller-phone2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/bestseller-phone2.jpg -------------------------------------------------------------------------------- /images/boy.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/boy.webp -------------------------------------------------------------------------------- /images/download.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/download.jpg -------------------------------------------------------------------------------- /images/envelope.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/envelope.png -------------------------------------------------------------------------------- /images/hot-gadget.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/hot-gadget.png -------------------------------------------------------------------------------- /images/hot-gadget.xd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/hot-gadget.xd -------------------------------------------------------------------------------- /images/iphone_.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/iphone_.jpg -------------------------------------------------------------------------------- /images/kids1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/kids1.jpg -------------------------------------------------------------------------------- /images/kids2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/kids2.jpg -------------------------------------------------------------------------------- /images/kids3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/kids3.jpg -------------------------------------------------------------------------------- /images/laptop/angular.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/laptop/angular.png -------------------------------------------------------------------------------- /images/laptop/images.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/laptop/images.png -------------------------------------------------------------------------------- /images/laptop/ktshirt.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/laptop/ktshirt.jpg -------------------------------------------------------------------------------- /images/laptop/ktshirt2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/laptop/ktshirt2.jpg -------------------------------------------------------------------------------- /images/laptop/ktshirt3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/laptop/ktshirt3.jpg -------------------------------------------------------------------------------- /images/laptop/nodejs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/laptop/nodejs.png -------------------------------------------------------------------------------- /images/laptop/product-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/laptop/product-1.png -------------------------------------------------------------------------------- /images/laptop/product-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/laptop/product-2.png -------------------------------------------------------------------------------- /images/laptop/product-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/laptop/product-3.png -------------------------------------------------------------------------------- /images/laptop/public.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/laptop/public.avif -------------------------------------------------------------------------------- /images/laptop/react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/laptop/react.png -------------------------------------------------------------------------------- /images/laptop/sweater.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/laptop/sweater.jpg -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/logo.png -------------------------------------------------------------------------------- /images/mobile-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/mobile-banner.png -------------------------------------------------------------------------------- /images/phone/phone-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/phone/phone-1.png -------------------------------------------------------------------------------- /images/phone/phone-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/phone/phone-2.png -------------------------------------------------------------------------------- /images/phone/phone-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/phone/phone-3.png -------------------------------------------------------------------------------- /images/pre-pageloader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/pre-pageloader.gif -------------------------------------------------------------------------------- /images/react-tshirt.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/react-tshirt.jpg -------------------------------------------------------------------------------- /images/register.svg: -------------------------------------------------------------------------------- 1 | special_event -------------------------------------------------------------------------------- /images/shirt1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/shirt1.jpg -------------------------------------------------------------------------------- /images/shirt2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/shirt2.jpg -------------------------------------------------------------------------------- /images/shirt3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/shirt3.jpg -------------------------------------------------------------------------------- /images/smartwatch-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/smartwatch-banner.png -------------------------------------------------------------------------------- /images/smartwatch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/smartwatch.png -------------------------------------------------------------------------------- /images/summersale-banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/summersale-banner.jpg -------------------------------------------------------------------------------- /images/women1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/women1.jpg -------------------------------------------------------------------------------- /images/women2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/women2.jpg -------------------------------------------------------------------------------- /images/women3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/women3.jpg -------------------------------------------------------------------------------- /images/women4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/women4.jpg -------------------------------------------------------------------------------- /images/—Pngtree—women contact support flat illustration_5439566.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/images/—Pngtree—women contact support flat illustration_5439566.png -------------------------------------------------------------------------------- /js/components/BackToTop.js: -------------------------------------------------------------------------------- 1 | const scrollBtn = document.getElementById("backTop"); 2 | window.onscroll = function() { scrollFunction() }; 3 | 4 | function scrollFunction() { 5 | if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) { 6 | scrollBtn.style.display = "block"; 7 | } else { 8 | scrollBtn.style.display = "none"; 9 | } 10 | } 11 | 12 | scrollBtn.addEventListener("click", () => { 13 | window.scrollTo({ 14 | top: 0, 15 | behavior: "smooth" 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /js/components/ProductBox.js: -------------------------------------------------------------------------------- 1 | function ProductsBox(product) { 2 | // product parameter must be an object containing info about the product 3 | // info: name, link, imageSource, price, priceCurrency. 4 | 5 | // Assigning default currency as dollars. 6 | product.priceCurrency = product.priceCurrency || '$'; 7 | // Assigning default link to #. 8 | product.productLink = product.productLink || '#'; 9 | 10 | const mainBox = document.createElement('a'); 11 | mainBox.classList.add('products-box'); 12 | mainBox.href = `${product.productLink}`; 13 | 14 | const productImage = document.createElement('img'); 15 | productImage.src = `${product.imageSource}` 16 | productImage.alt = `${product.name}` 17 | mainBox.append(productImage); 18 | 19 | const productTitle = document.createElement('h4'); 20 | productTitle.innerText = `${product.name}`; 21 | mainBox.append(productTitle); 22 | 23 | const productPrice = document.createElement('p'); 24 | productPrice.textContent = `${product.priceCurrency}${product.price}`; 25 | mainBox.append(productPrice); 26 | 27 | return mainBox; 28 | } 29 | 30 | export default ProductsBox; -------------------------------------------------------------------------------- /js/components/ProductContainer.js: -------------------------------------------------------------------------------- 1 | import ProductsBox from './ProductBox.js'; 2 | 3 | function ProductsContainer(title, products) { 4 | // title paramerter should be a string (Necessary), 5 | // products parameter should be an array/list of objects(Necessary). 6 | 7 | const wrapperDiv = document.createElement('div'); 8 | 9 | const containerTitle = document.createElement('h1'); 10 | containerTitle.textContent = `${title}`; 11 | containerTitle.classList.add('fontSizeTitle'); 12 | containerTitle.style.display = 'flex'; 13 | containerTitle.style.justifyContent = 'center'; 14 | wrapperDiv.append(containerTitle); 15 | 16 | const productsContainer = document.createElement('div'); 17 | productsContainer.classList.add('products-container'); 18 | products.forEach(product => { 19 | productsContainer.append(ProductsBox(product)); 20 | }); 21 | wrapperDiv.append(productsContainer); 22 | 23 | return wrapperDiv; 24 | } 25 | 26 | export default ProductsContainer; -------------------------------------------------------------------------------- /js/components/SwiperSlide.js: -------------------------------------------------------------------------------- 1 | function SwiperSlide(imageData) { 2 | const swiperSlideDiv = document.createElement('div'); 3 | swiperSlideDiv.classList.add('swiper-slide'); 4 | 5 | const slideImage = document.createElement('img'); 6 | slideImage.src = `${imageData.imageSource}`; 7 | slideImage.alt = `${imageData.imageAlt}`; 8 | swiperSlideDiv.append(slideImage); 9 | 10 | return swiperSlideDiv; 11 | } 12 | 13 | export default SwiperSlide; -------------------------------------------------------------------------------- /js/copyrightYear.js: -------------------------------------------------------------------------------- 1 | let copyRightYear = document.getElementById("copyRightYear"); 2 | let currentDate = new Date(); 3 | let currentYear = currentDate.getFullYear(); 4 | copyRightYear.innerText = currentYear; -------------------------------------------------------------------------------- /js/script.js: -------------------------------------------------------------------------------- 1 | import ProductsContainer from "./components/ProductContainer.js"; 2 | import SwiperSlide from "./components/SwiperSlide.js"; 3 | 4 | let heroSec = document.querySelector("#hero img"); 5 | let scroll = document.querySelector(".mouse_scroll"); 6 | let copyright = document.querySelector(".copyright span"); 7 | let input = document.querySelector(".mail-part-1 input"); 8 | let mailBtn = document.querySelector(".mail-part-1 button"); 9 | let openNav = document.querySelector(".open-nav"); 10 | let closeNav = document.querySelector(".close-nav"); 11 | let sideNav = document.querySelector(".nav-mobile"); 12 | 13 | function capitalize(str) { 14 | return str 15 | .split(' ') 16 | .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()) 17 | .join(' ') 18 | } 19 | 20 | async function fetchAndRenderData() { 21 | try { 22 | const tShirtDiv = document.getElementById("tshirt-products"); 23 | const smartWatchDiv = document.getElementById("smartwatch-products"); 24 | const mobilePhoneDiv = document.getElementById("mobile-phone-products"); 25 | const swiperWrapperDiv = document.getElementById("bottom-swiper-wrapper"); 26 | 27 | let tShirtProducts; 28 | let smartWatchProducts; 29 | let mobilePhoneProducts; 30 | 31 | const swiperImagesResponse = await fetch('../json/swiper-images.json'); 32 | const productsResponse = await fetch('../json/products.json'); 33 | 34 | const swiperImagesData = await swiperImagesResponse.json(); 35 | const productsData = await productsResponse.json(); 36 | 37 | swiperImagesData.forEach(swiperImage => { 38 | swiperWrapperDiv.append(SwiperSlide(swiperImage)); 39 | }); 40 | 41 | productsData.forEach(product => { 42 | if (product.type.toLowerCase() == "tshirts") tShirtProducts = product; 43 | else if (product.type.toLowerCase() == "smartwatch") smartWatchProducts = product; 44 | else if (product.type.toLowerCase() == "mobile phones") mobilePhoneProducts = product; 45 | }); 46 | tShirtDiv.append(ProductsContainer(capitalize(tShirtProducts.type), tShirtProducts.products)); 47 | smartWatchDiv.append(ProductsContainer(capitalize(smartWatchProducts.type), smartWatchProducts.products)); 48 | mobilePhoneDiv.append(ProductsContainer(capitalize(mobilePhoneProducts.type), mobilePhoneProducts.products)); 49 | } 50 | catch (error) { 51 | console.error(error); 52 | } 53 | } 54 | fetchAndRenderData() 55 | 56 | heroSec.addEventListener("click", function () { 57 | console.log("I am a click event listener"); 58 | }); 59 | 60 | scroll.addEventListener("click", function () { 61 | window.scrollBy(0, 980); 62 | }); 63 | 64 | // github copyright onclick 65 | copyright.addEventListener("click", () => { 66 | window.open("https://github.com/SyedImtiyaz-1"); 67 | }); 68 | 69 | // mail 70 | mailBtn.addEventListener("click", () => { 71 | if (input.required == true) { 72 | alert("Subscribed !"); 73 | input.value = " "; 74 | } else if ((input.value = " ")) { 75 | setTimeout(() => { 76 | input.placeholder = "Please enter email first"; 77 | }); 78 | } 79 | 80 | setTimeout(() => { 81 | input.placeholder = "Enter your mail"; 82 | }, 600); 83 | }); 84 | 85 | // Navigation for Mobile 86 | openNav.addEventListener("click", () => { 87 | sideNav.style.width = "200vw"; 88 | }) 89 | 90 | closeNav.addEventListener("click", () => { 91 | sideNav.style.width = "0px" 92 | }) 93 | 94 | // reload 95 | window.addEventListener('load', function () { 96 | input.value = " "; 97 | }); -------------------------------------------------------------------------------- /js/swipper.js: -------------------------------------------------------------------------------- 1 | const swiper = new Swiper('.swiper', { 2 | // Optional parameters 3 | direction: 'horizontal', 4 | loop: true, 5 | 6 | // If we need pagination 7 | pagination: { 8 | el: '.swiper-pagination', 9 | }, 10 | 11 | // Navigation arrows 12 | navigation: { 13 | nextEl: '.swiper-button-next', 14 | prevEl: '.swiper-button-prev', 15 | }, 16 | 17 | // And if we need scrollbar 18 | scrollbar: { 19 | el: '.swiper-scrollbar', 20 | }, 21 | }); 22 | 23 | // Scroll To Top Button 24 | // Get the button 25 | let mybutton = document.getElementById("myBtn"); 26 | 27 | // When the user scrolls down 20px from the top of the document, show the button 28 | window.onscroll = function () { scrollFunction() }; 29 | 30 | function scrollFunction() { 31 | if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { 32 | mybutton.style.display = "block"; 33 | } else { 34 | mybutton.style.display = "none"; 35 | } 36 | } 37 | 38 | // When the user clicks on the button, scroll to the top of the document 39 | function topFunction() { 40 | document.body.scrollTop = 0; 41 | document.documentElement.scrollTop = 0; 42 | } 43 | -------------------------------------------------------------------------------- /json/products.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "type": "tshirts", 4 | "products": [ 5 | { 6 | "name": "React T-shirt", 7 | "link": "#", 8 | "imageSource": "../images/react-tshirt.jpg", 9 | "price": "20", 10 | "priceCurrency": "$" 11 | }, 12 | { 13 | "name": "React T-shirt", 14 | "link": "#", 15 | "imageSource": "../images/react-tshirt.jpg", 16 | "price": "20", 17 | "priceCurrency": "$" 18 | }, 19 | { 20 | "name": "React T-shirt", 21 | "link": "#", 22 | "imageSource": "../images/react-tshirt.jpg", 23 | "price": "20", 24 | "priceCurrency": "$" 25 | }, 26 | { 27 | "name": "React T-shirt", 28 | "link": "#", 29 | "imageSource": "../images/react-tshirt.jpg", 30 | "price": "20", 31 | "priceCurrency": "$" 32 | }, 33 | { 34 | "name": "React T-shirt", 35 | "link": "#", 36 | "imageSource": "../images/react-tshirt.jpg", 37 | "price": "20", 38 | "priceCurrency": "$" 39 | } 40 | ] 41 | }, 42 | { 43 | "type": "smartwatch", 44 | "products": [ 45 | { 46 | "name": "Noise Smartwatch", 47 | "link": "#", 48 | "imageSource": "../images/smartwatch.png", 49 | "price": "20", 50 | "priceCurrency": "$" 51 | }, 52 | { 53 | "name": "Noise Smartwatch", 54 | "link": "#", 55 | "imageSource": "../images/smartwatch.png", 56 | "price": "20", 57 | "priceCurrency": "$" 58 | }, 59 | { 60 | "name": "Noise Smartwatch", 61 | "link": "#", 62 | "imageSource": "../images/smartwatch.png", 63 | "price": "20", 64 | "priceCurrency": "$" 65 | }, 66 | { 67 | "name": "Noise Smartwatch", 68 | "link": "#", 69 | "imageSource": "../images/smartwatch.png", 70 | "price": "20", 71 | "priceCurrency": "$" 72 | }, 73 | { 74 | "name": "Noise Smartwatch", 75 | "link": "#", 76 | "imageSource": "../images/smartwatch.png", 77 | "price": "20", 78 | "priceCurrency": "$" 79 | } 80 | ] 81 | }, 82 | { 83 | "type": "mobile phones", 84 | "products": [ 85 | { 86 | "name": "Iphone 14", 87 | "link": "#", 88 | "imageSource": "../images/iphone_.jpg", 89 | "price": "699", 90 | "priceCurrency": "$" 91 | }, 92 | { 93 | "name": "Iphone 14 Pro", 94 | "link": "#", 95 | "imageSource": "../images/iphone_.jpg", 96 | "price": "799", 97 | "priceCurrency": "$" 98 | }, 99 | { 100 | "name": "Iphone 14 Pro Max", 101 | "link": "#", 102 | "imageSource": "../images/iphone_.jpg", 103 | "price": "899", 104 | "priceCurrency": "$" 105 | }, 106 | { 107 | "name": "Iphone 15", 108 | "link": "#", 109 | "imageSource": "../images/iphone_.jpg", 110 | "price": "999", 111 | "priceCurrency": "$" 112 | }, 113 | { 114 | "name": "Iphone 15 Pro", 115 | "link": "#", 116 | "imageSource": "../images/iphone_.jpg", 117 | "price": "1099", 118 | "priceCurrency": "$" 119 | }, 120 | { 121 | "name": "Iphone 15 Pro Max", 122 | "link": "#", 123 | "imageSource": "../images/iphone_.jpg", 124 | "price": "1299", 125 | "priceCurrency": "$" 126 | } 127 | ] 128 | } 129 | ] 130 | -------------------------------------------------------------------------------- /json/swiper-images.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "imageSource": "../images/5691822.jpg", 4 | "imageAlt": "" 5 | }, 6 | { 7 | "imageSource": "../images/8331128.jpg", 8 | "imageAlt": "" 9 | }, 10 | { 11 | "imageSource": "../images/summersale-banner.jpg", 12 | "imageAlt": "" 13 | } 14 | ] -------------------------------------------------------------------------------- /login.js: -------------------------------------------------------------------------------- 1 | const sign_in_btn = document.querySelector("#sign-in-btn"); 2 | const sign_up_btn = document.querySelector("#sign-up-btn"); 3 | const container = document.querySelector(".container"); 4 | 5 | sign_up_btn.addEventListener("click", () => { 6 | container.classList.add("sign-up-mode"); 7 | }); 8 | 9 | sign_in_btn.addEventListener("click", () => { 10 | container.classList.remove("sign-up-mode"); 11 | }); -------------------------------------------------------------------------------- /menshirts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 11 | 13 | 14 | 15 | 17 | 18 | 19 | 20 | 21 | 22 | 24 | 25 | 26 | 27 | 28 | 29 | 31 | 32 | 33 | 34 | 35 | 36 | 46 | review 47 | 48 | 49 | 50 | 51 |
52 | 86 |
87 |

Bestsellers here!

88 |
89 |
90 | 91 |
92 | 93 |

Classic Cotton

94 |

95 |

  • 100% pure cotton
    • 96 |
  • available in all sizes
    • 97 |
  • Customise your design
    • 98 |

    99 | Buy Now 100 | 102 | 104 | 106 | 107 | 108 |
    109 | 110 | 111 |
    112 | 113 |

    Oversize T-Shirts

    114 |

    115 |

  • Hot-Trend made with cotton
    • 116 |
  • Customised shirt designs
    • 117 |
  • Altered to your fashion sense
    • 118 |

    119 | Buy Now 120 | 122 | 124 | 126 | 127 | 128 |
    129 | 130 | 131 |
    132 | 133 |

    Perfect Shirt

    134 |

    135 |

  • Body-shape friendly
    • 136 |
  • Made with artificial cotton
    • 137 |
  • Available in mmulti-colours
    • 138 |

    139 | Buy Now 140 | 142 | 144 | 146 | 147 | 148 |
    149 |
    150 |
    151 |

    See more options here!

    152 | 153 | 154 | 155 |
    156 |
    157 |
    158 |
    159 | image not found 160 |
    161 |
    ReactJS T-Shirt
    162 |

    Vintage ReactJS, Classic T-Shirt

    163 |
    $22.12
    164 | BUY NOW 165 | 167 | 169 | 171 | 172 | 173 |
    174 |
    175 |
    176 |
    177 |
    178 | image not found 179 |
    180 | 181 |
    Angular Tshirt
    182 |

    A Tshirt with a angular logo attached to it. Meant for 183 | developers 184 |

    185 |
    $27
    186 | BUY NOW 187 | 189 | 191 | 193 | 194 | 195 |
    196 |
    197 |
    198 |
    199 |
    200 | image not found 201 |
    202 |
    Node Js Tshirt
    203 | 204 |

    A Tshirt with a Node Js logo attached to it. Meant for 205 | developers 206 |

    207 |
    $30
    208 | 209 | BUY NOW 210 | 212 | 214 | 216 | 217 | 218 |
    219 |
    220 |
    221 |
    222 | 223 |
    224 | 225 |
    226 |
    227 | 228 |
    229 |
    230 |

    My CodeShop

    231 |
    232 | 238 | 239 |
    240 |
    241 |

    Language:

    242 |
    243 | 244 | 251 |
    252 |
    253 |
    254 |
    255 |

    Categories

    256 | 267 |
    268 |
    269 |

    Our Pages

    270 | 280 | 281 |
    282 |
    283 |

    Connect with Us

    284 |
    285 | 316 |
    317 |
    318 |

    Offers

    319 | 325 |
    326 |
    327 |
    328 |
    329 |
    330 | 331 |
    332 |
    333 | 334 |
    337 |
    338 |

    340 | Get latest News and Product offers 341 |

    342 |
    345 |
    346 | 347 | 349 |
    350 |
    351 |
    352 | 354 |

    Intuit Mailchimp 361 |

    362 |
    363 |
    364 |
    365 |
    366 |
    367 |
    368 |
    369 |
    370 |

    372 | Our Payment Partners

    373 |
    374 | 376 | 378 | 379 | 381 | 383 | 385 | 387 | 388 |
    389 | 390 |
    391 | 392 |
    393 |
    394 | Code Shop © All Right reserved 395 |
    396 |
    397 |
    398 | 399 | 400 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Code-Shop", 3 | "lockfileVersion": 2, 4 | "requires": true, 5 | "packages": {} 6 | } 7 | -------------------------------------------------------------------------------- /pattern.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | using namespace std; 3 | main() 4 | { 5 | int i,j,n; 6 | cout<<"enter the range"; 7 | cin>>n; 8 | for(i=0;i 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 43 |
    44 |

    Privacy Policy for Code Shop

    45 |
    46 |

    Welcome to Code Shop. We are committed to safeguarding your privacy and ensuring the security of your 47 | personal information. This Privacy Policy outlines how we collect, use, disclose, and safeguard your data 48 | when you use our mobile application [Your Ecommerce App Name] ("App").

    49 |
    50 |

    Information We Collect:

    51 |

    When you create an account or interact with our App, we may collect personal information, including your 52 | name, email address, postal address, phone number, and payment details. We also collect usage data to 53 | improve our services, such as the pages you visit, products you view, and features you access. Additionally, 54 | we collect device information, like your device's unique identifier and IP address, for diagnostic purposes 55 | and to provide personalized experiences. We use cookies and similar technologies to enhance your App 56 | experience.

    57 |
    58 |

    How We Use Your Information:

    59 |

    We use your information to process orders, provide customer support, and enhance the App's functionality. By 60 | analyzing usage data, we personalize your shopping experience and provide relevant product recommendations. 61 | We may send you transactional emails, order updates, and promotional materials related to the App. You can 62 | opt-out of marketing communications.

    63 |
    64 |

    Data Sharing and Disclosure:

    65 |

    We may share your information with trusted third-party service providers to assist us in operating the App, 66 | processing payments, and conducting analytics. In the event of a business transfer, your information may be 67 | transferred to the acquiring entity. We may disclose your information to comply with the law or protect our 68 | rights and interests.

    69 |
    70 |

    Data Security:

    71 |

    We implement reasonable security measures to protect your information from unauthorized access, alteration, 72 | disclosure, or destruction. However, no method of data transmission over the internet or electronic storage 73 | is 100% secure.

    74 |
    75 |

    Children's Privacy:

    76 |

    Our services are not intended for individuals under the age of 16, and we do not knowingly collect personal 77 | information from children.

    78 |
    79 |

    Your Choices and Rights:

    80 |

    You can review and update your account information within the App. If you wish to delete your account, please 81 | contact us. You have the option to opt-out of receiving marketing communications. You have the right to 82 | access and correct any personal information we hold about you.

    83 |
    84 |

    Changes to this Privacy Policy:

    85 |

    We may update or modify this Privacy Policy at any time, and the revised policy will be effective when posted 86 | in the App. Your continued use of the App after the changes have been posted constitutes your acceptance. 87 |

    88 |
    89 |

    Thank you for trusting Code Shop. We are committed to protecting your privacy and providing you with a 90 | secure shopping experience.

    91 |
    92 |
    93 |
    94 |

    CodeShop

    95 |
    96 |
    97 |
    98 |
    99 | 106 |
    107 |
    108 | 113 |
    114 |
    115 |
    116 | 117 |
    118 |
    119 | 120 | 121 | 122 |
    123 |
    124 | 125 | 126 |

    Made with ❤️ by Imtiyaz

    127 |
    128 | 129 | 130 | 131 | -------------------------------------------------------------------------------- /privacy/index.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyedImtiyaz-1/Code-Shop/80d7e51bdef7da8642657d19bd77cbc7de20ebc2/privacy/index.js -------------------------------------------------------------------------------- /privacy/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 6 | } 7 | 8 | .container { 9 | display: flex; 10 | flex-direction: column; 11 | min-height: 100vh; 12 | width: 100vw; 13 | background: linear-gradient(to left top, rgb(4, 18, 46), rgb(105, 163, 201)); 14 | padding: 50px; 15 | } 16 | 17 | h1, 18 | h2 { 19 | color: white; 20 | } 21 | h1{ 22 | text-align: center; 23 | } 24 | p { 25 | color: rgba(255, 255, 255, 0.74); 26 | } -------------------------------------------------------------------------------- /review.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 11 | 13 | 14 | 15 | 17 | 18 | 19 | 20 | 21 | 22 | 24 | 25 | 26 | 27 | 28 | 29 | 31 | 32 | 33 | 34 | 35 | 36 | 46 | review 47 | 48 | 64 | 65 | 66 | 67 | 68 |
    69 | 104 |
    105 | 106 |
    107 |
    108 | image not found 109 |
    110 |

    Classic Shirt

    111 |

    Amazing product by Code shop! 112 | Absolutely promising website for clothes 113 |

    114 |
    115 |
    116 | 117 |
    118 | Image 2 119 |
    120 |

    Apple SmartWatch

    121 |

    122 | First cutomer-approved perfect waterproof watch by apple. 123 | Classic service by Code Shop 124 |

    125 |
    126 |
    127 | 128 |
    129 | Image 3 130 |
    131 |

    Leather Jacket

    132 |

    133 | Zero difference between image and real product. 134 | Loved it. 135 |

    136 |
    137 |
    138 |
    139 | 140 | 141 |
    142 |
    143 |

    Review

    144 |
    145 |

    Your reviews here:

    146 | 147 | 148 |
    149 |
    150 |
    151 |
    152 | 153 |
    154 |
    155 |

    My CodeShop

    156 |
    157 | 163 | 164 |
    165 |
    166 |

    Language:

    167 |
    168 | 169 | 176 |
    177 |
    178 |
    179 |
    180 |

    Categories

    181 | 192 |
    193 |
    194 |

    Our Pages

    195 | 205 | 206 |
    207 |
    208 |

    Connect with Us

    209 |
    210 | 242 |
    243 |
    244 |

    Offers

    245 | 251 |
    252 |
    253 |
    254 |
    255 |
    256 | 257 |
    258 |
    259 | 260 |
    263 |
    264 |

    266 | Get latest News and Product offers 267 |

    268 |
    271 |
    272 | 273 | 275 |
    276 |
    277 |
    278 | 280 |

    Intuit Mailchimp 287 |

    288 |
    289 |
    290 |
    291 |
    292 |
    293 |
    294 |
    295 |
    296 |

    298 | Our Payment Partners

    299 |
    300 | 302 | 304 | 305 | 307 | 309 | 311 | 313 | 314 |
    315 | 316 |
    317 | 318 |
    319 |
    320 | Code Shop © All Right reserved 321 |
    322 |
    323 |
    324 | 325 | 326 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", function() { 2 | // Show pre-loader for 3 seconds 3 | var preloader = document.getElementById("preloader"); 4 | var content = document.getElementById("content"); 5 | 6 | setTimeout(function() { 7 | preloader.style.display = "none"; 8 | content.style.display = "block"; 9 | }, 2500); 10 | }); 11 | 12 | // Get the button: 13 | const goToTopBtn = document.getElementById("goToTopBtn"); 14 | 15 | // Add a click event listener to the button 16 | goToTopBtn.addEventListener("click", function() {topFunction()}); 17 | 18 | 19 | // When the user scrolls down 20px from the top of the document, show the button 20 | window.onscroll = function() {scrollFunction()}; 21 | 22 | function scrollFunction() { 23 | if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { 24 | goToTopBtn.style.display = "block"; 25 | } else { 26 | goToTopBtn.style.display = "none"; 27 | } 28 | } 29 | 30 | function topFunction() { 31 | document.body.scrollTop = 0; // For Safari 32 | document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera 33 | } 34 | // Intersection Observer for showing and hiding elements 35 | const observer = new IntersectionObserver((entries) => { 36 | entries.forEach((entry) => { 37 | if (entry.isIntersecting) { 38 | entry.target.classList.add('show'); 39 | } else { 40 | entry.target.classList.remove('show'); 41 | } 42 | }); 43 | }); 44 | 45 | // Select all elements with the class "hidden" 46 | const hiddenElements = document.querySelectorAll('.hidden'); 47 | hiddenElements.forEach((element) => observer.observe(element)); 48 | 49 | const toggle = document.getElementById('toggleDark'); 50 | const body = document.querySelector('body'); 51 | 52 | toggle.addEventListener('click', function(){ 53 | this.classList.toggle('bi-moon'); 54 | if(this.classList.toggle('bi-brightness-high-fill')){ 55 | body.style.background = 'rgb(255,239,239)'; 56 | body.style.color = 'black'; 57 | body.style.transition = '2s'; 58 | }else{ 59 | body.style.background = 'black'; 60 | body.style.color = 'white'; 61 | body.style.transition = '2s'; 62 | } 63 | }); 64 | 65 | const clearButton = document.querySelector('.clear-button'); 66 | const inputField = document.querySelector('#my-input-field'); 67 | 68 | clearButton.addEventListener('click', () => { 69 | // Clear the input field 70 | inputField.value = ''; 71 | }); 72 | 73 | const accordionItems = document.querySelectorAll('.accordion__item'); 74 | 75 | accordionItems.forEach((item) => { 76 | const btn = item.querySelector('.accordion__btn'); 77 | const content = item.querySelector('.accordion__content'); 78 | 79 | btn.addEventListener('click', () => { 80 | item.classList.toggle('accordion__item--active'); 81 | 82 | // Toggle the visibility of the content 83 | if (item.classList.contains('accordion__item--active')) { 84 | content.style.maxHeight = content.scrollHeight + 'px'; 85 | } else { 86 | content.style.maxHeight = '0'; 87 | } 88 | }); 89 | }); -------------------------------------------------------------------------------- /signIn.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 15 | 16 | Login & Registration 17 | 27 | 28 | 29 |
    30 |
    31 | 128 |
    129 | 130 |
    131 | 132 |
    133 |
    134 |

    New here?

    135 |

    136 | Register yourself to access our services. 137 |

    138 | 141 |
    142 | 143 |
    144 | 145 | 146 |
    147 |
    148 |

    One of us?

    149 |

    150 | Already registered? then hop on & access our services. 151 |

    152 | 155 |
    156 | 157 |
    158 |
    159 |
    160 | 161 | 162 | 163 | 164 | 165 | 166 | -------------------------------------------------------------------------------- /style-login.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body, 10 | input { 11 | font-family: "Poppins", sans-serif; 12 | } 13 | 14 | .container { 15 | position: relative; 16 | width: 100%; 17 | background-color: #fff; 18 | min-height: 100vh; 19 | overflow: hidden; 20 | } 21 | 22 | .forms-container { 23 | position: absolute; 24 | width: 100%; 25 | height: 100%; 26 | top: 0; 27 | left: 0; 28 | } 29 | 30 | .signin-signup { 31 | position: absolute; 32 | top: 50%; 33 | transform: translate(-50%, -50%); 34 | left: 75%; 35 | width: 50%; 36 | transition: 1s 0.7s ease-in-out; 37 | display: grid; 38 | grid-template-columns: 1fr; 39 | z-index: 5; 40 | } 41 | 42 | form { 43 | display: flex; 44 | align-items: center; 45 | justify-content: center; 46 | flex-direction: column; 47 | padding: 0rem 5rem; 48 | transition: all 0.2s 0.7s; 49 | overflow: hidden; 50 | grid-column: 1 / 2; 51 | grid-row: 1 / 2; 52 | } 53 | 54 | form.sign-up-form { 55 | opacity: 0; 56 | z-index: 1; 57 | } 58 | 59 | form.sign-in-form { 60 | z-index: 2; 61 | } 62 | 63 | .title { 64 | font-size: 2.2rem; 65 | color: #444; 66 | margin-bottom: 10px; 67 | } 68 | 69 | .input-field { 70 | max-width: 380px; 71 | width: 100%; 72 | background-color: #f0f0f0; 73 | margin: 10px 0; 74 | height: 55px; 75 | border-radius: 55px; 76 | display: grid; 77 | grid-template-columns: 15% 85%; 78 | padding: 0 0.4rem; 79 | position: relative; 80 | } 81 | 82 | .input-field i { 83 | text-align: center; 84 | line-height: 55px; 85 | color: #acacac; 86 | transition: 0.5s; 87 | font-size: 1.1rem; 88 | } 89 | 90 | .input-field input { 91 | background: none; 92 | outline: none; 93 | border: none; 94 | line-height: 1; 95 | font-weight: 600; 96 | font-size: 1.1rem; 97 | color: #333; 98 | } 99 | 100 | .input-field input::placeholder { 101 | color: #aaa; 102 | font-weight: 500; 103 | } 104 | 105 | .social-text { 106 | padding: 0.7rem 0; 107 | font-size: 1rem; 108 | } 109 | 110 | .social-media { 111 | display: flex; 112 | justify-content: center; 113 | } 114 | 115 | .social-icon { 116 | height: 46px; 117 | width: 46px; 118 | display: flex; 119 | justify-content: center; 120 | align-items: center; 121 | margin: 0 0.45rem; 122 | color: #333; 123 | border-radius: 50%; 124 | border: 1px solid #333; 125 | text-decoration: none; 126 | font-size: 1.1rem; 127 | transition: 0.3s; 128 | } 129 | 130 | .social-icon:hover { 131 | color: #4481eb; 132 | border-color: #4481eb; 133 | } 134 | 135 | .btn { 136 | width: 150px; 137 | background-color: #fd59d4; 138 | border: none; 139 | outline: none; 140 | height: 49px; 141 | border-radius: 49px; 142 | color: #fff; 143 | text-transform: uppercase; 144 | font-weight: 600; 145 | margin: 10px 0; 146 | cursor: pointer; 147 | transition: 0.5s; 148 | } 149 | 150 | .btn:hover { 151 | background-color: #f700ff; 152 | } 153 | .panels-container { 154 | position: absolute; 155 | height: 100%; 156 | width: 100%; 157 | top: 0; 158 | left: 0; 159 | display: grid; 160 | grid-template-columns: repeat(2, 1fr); 161 | } 162 | 163 | .container:before { 164 | content: ""; 165 | position: absolute; 166 | height: 2000px; 167 | width: 2000px; 168 | top: -10%; 169 | right: 48%; 170 | transform: translateY(-50%); 171 | background-image: linear-gradient(-45deg, #01ff9e 0%, #048654 100%); 172 | transition: 1.8s ease-in-out; 173 | border-radius: 50%; 174 | z-index: 6; 175 | } 176 | 177 | .image { 178 | width: 100%; 179 | transition: transform 1.1s ease-in-out; 180 | transition-delay: 0.4s; 181 | } 182 | 183 | .panel { 184 | display: flex; 185 | flex-direction: column; 186 | align-items: flex-end; 187 | justify-content: space-around; 188 | text-align: center; 189 | z-index: 6; 190 | } 191 | 192 | .left-panel { 193 | pointer-events: all; 194 | padding: 3rem 17% 2rem 12%; 195 | } 196 | 197 | .right-panel { 198 | pointer-events: none; 199 | padding: 3rem 12% 2rem 17%; 200 | } 201 | 202 | .panel .content { 203 | color: #fff; 204 | transition: transform 0.9s ease-in-out; 205 | transition-delay: 0.6s; 206 | } 207 | 208 | .panel h3 { 209 | font-weight: 600; 210 | line-height: 1; 211 | font-size: 1.5rem; 212 | } 213 | 214 | .panel p { 215 | font-size: 0.95rem; 216 | padding: 0.7rem 0; 217 | } 218 | 219 | .btn.transparent { 220 | margin: 0; 221 | background: none; 222 | border: 2px solid #fff; 223 | width: 130px; 224 | height: 41px; 225 | font-weight: 600; 226 | font-size: 0.8rem; 227 | } 228 | 229 | .right-panel .image, 230 | .right-panel .content { 231 | transform: translateX(800px); 232 | } 233 | 234 | /* ANIMATION */ 235 | 236 | .container.sign-up-mode:before { 237 | transform: translate(100%, -50%); 238 | right: 52%; 239 | } 240 | 241 | .container.sign-up-mode .left-panel .image, 242 | .container.sign-up-mode .left-panel .content { 243 | transform: translateX(-800px); 244 | } 245 | 246 | .container.sign-up-mode .signin-signup { 247 | left: 25%; 248 | } 249 | 250 | .container.sign-up-mode form.sign-up-form { 251 | opacity: 1; 252 | z-index: 2; 253 | } 254 | 255 | .container.sign-up-mode form.sign-in-form { 256 | opacity: 0; 257 | z-index: 1; 258 | } 259 | 260 | .container.sign-up-mode .right-panel .image, 261 | .container.sign-up-mode .right-panel .content { 262 | transform: translateX(0%); 263 | } 264 | 265 | .container.sign-up-mode .left-panel { 266 | pointer-events: none; 267 | } 268 | 269 | .container.sign-up-mode .right-panel { 270 | pointer-events: all; 271 | } 272 | 273 | @media (max-width: 870px) { 274 | .container { 275 | min-height: 800px; 276 | height: 100vh; 277 | } 278 | .signin-signup { 279 | width: 100%; 280 | top: 95%; 281 | transform: translate(-50%, -100%); 282 | transition: 1s 0.8s ease-in-out; 283 | } 284 | 285 | .signin-signup, 286 | .container.sign-up-mode .signin-signup { 287 | left: 50%; 288 | } 289 | 290 | .panels-container { 291 | grid-template-columns: 1fr; 292 | grid-template-rows: 1fr 2fr 1fr; 293 | } 294 | 295 | .panel { 296 | flex-direction: row; 297 | justify-content: space-around; 298 | align-items: center; 299 | padding: 2.5rem 8%; 300 | grid-column: 1 / 2; 301 | } 302 | 303 | .right-panel { 304 | grid-row: 3 / 4; 305 | } 306 | 307 | .left-panel { 308 | grid-row: 1 / 2; 309 | } 310 | 311 | .image { 312 | width: 200px; 313 | transition: transform 0.9s ease-in-out; 314 | transition-delay: 0.6s; 315 | } 316 | 317 | .panel .content { 318 | padding-right: 15%; 319 | transition: transform 0.9s ease-in-out; 320 | transition-delay: 0.8s; 321 | } 322 | 323 | .panel h3 { 324 | font-size: 1.2rem; 325 | } 326 | 327 | .panel p { 328 | font-size: 0.7rem; 329 | padding: 0.5rem 0; 330 | } 331 | 332 | .btn.transparent { 333 | width: 110px; 334 | height: 35px; 335 | font-size: 0.7rem; 336 | } 337 | 338 | .container:before { 339 | width: 1500px; 340 | height: 1500px; 341 | transform: translateX(-50%); 342 | left: 30%; 343 | bottom: 68%; 344 | right: initial; 345 | top: initial; 346 | transition: 2s ease-in-out; 347 | } 348 | 349 | .container.sign-up-mode:before { 350 | transform: translate(-50%, 100%); 351 | bottom: 32%; 352 | right: initial; 353 | } 354 | 355 | .container.sign-up-mode .left-panel .image, 356 | .container.sign-up-mode .left-panel .content { 357 | transform: translateY(-300px); 358 | } 359 | 360 | .container.sign-up-mode .right-panel .image, 361 | .container.sign-up-mode .right-panel .content { 362 | transform: translateY(0px); 363 | } 364 | 365 | .right-panel .image, 366 | .right-panel .content { 367 | transform: translateY(300px); 368 | } 369 | 370 | .container.sign-up-mode .signin-signup { 371 | top: 5%; 372 | transform: translate(-50%, 0); 373 | } 374 | } 375 | 376 | /*FORGOT PASSWORD*/ 377 | div.f-password{ 378 | float:right; 379 | } 380 | 381 | h4.forgot-password { 382 | color: #707070; 383 | font-weight: 500; 384 | float: left; 385 | } 386 | 387 | a.fp-link{ 388 | color: #707070; 389 | transition: .3s; 390 | text-decoration: none; 391 | } 392 | 393 | a.fp-link:hover{ 394 | color: #069C54; 395 | } 396 | /*FORGOT-PASSWORD ENDS*/ 397 | 398 | @media (max-width: 570px) { 399 | form { 400 | padding: 0 1.5rem; 401 | } 402 | tu 403 | .image { 404 | display: none; 405 | } 406 | .panel .content { 407 | padding: 0.5rem 1rem; 408 | } 409 | .container { 410 | padding: 1.5rem; 411 | } 412 | 413 | .container:before { 414 | bottom: 72%; 415 | left: 50%; 416 | } 417 | 418 | .container.sign-up-mode:before { 419 | bottom: 28%; 420 | left: 50%; 421 | } 422 | } 423 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Abel&family=Inconsolata:wght@300;400;500;700&display=swap"); 2 | 3 | html { 4 | scroll-behavior: smooth; 5 | } 6 | 7 | body { 8 | font-family: "Abel", sans-serif; 9 | font-size: large; 10 | background-color: rgb(255, 239, 239); 11 | display: flex; 12 | flex-direction: column; 13 | justify-content: center; 14 | align-items: center; 15 | 16 | } 17 | section { 18 | display: grid; 19 | place-items: center; 20 | align-items: center; 21 | min-height: 100vh; 22 | } 23 | 24 | .hidden{ 25 | opacity: 0; 26 | filter: blur(5px); 27 | transition: all 1s; 28 | transform: translateX(-100%); 29 | } 30 | .show{ 31 | opacity: 1; 32 | filter: blur(0); 33 | transform: translateX(0); 34 | } 35 | 36 | 37 | 38 | #preloader { 39 | position: fixed; 40 | top: 0; 41 | left: 0; 42 | width: 100%; 43 | height: 100%; 44 | background-color: rgb(242, 242, 242); 45 | display: flex; 46 | justify-content: center; 47 | align-items: center; 48 | } 49 | 50 | 51 | h2{ 52 | font-size: 2.5rem; 53 | } 54 | 55 | h1, 56 | h2, 57 | h3, 58 | h4, 59 | h5, 60 | h6, 61 | p { 62 | cursor: pointer; 63 | } 64 | 65 | 66 | /* Header nav start */ 67 | 68 | toggle{ 69 | font-size: 25px; 70 | cursor: pointer; 71 | position: fixed; 72 | top: 28px; 73 | left: 31px; 74 | transform: translate(-50%, -50%); 75 | } 76 | .light-mode-footer { 77 | background-color: rgb(250, 219, 223); 78 | color: black; 79 | } 80 | 81 | .light-mode-ur-details { 82 | background-color: #aaa; 83 | color: #000; 84 | } 85 | 86 | .light-mode-cat{ 87 | background-color: rgb(255,239,239); 88 | color: #000; 89 | 90 | } 91 | 92 | .light-mode{ 93 | background-color: white; 94 | color: #000; 95 | } 96 | 97 | .light-mode-logo { 98 | background-color: rgb(255, 239, 239); 99 | border-radius: 20px; 100 | margin: 10px; 101 | 102 | } 103 | .light-mode-nav{ 104 | background-color: #fbe4e4; 105 | color: #000; 106 | margin: 10px; 107 | padding: 10px; 108 | border-radius: 10px; 109 | } 110 | 111 | .search-box { 112 | height: 54px; 113 | display: flex; 114 | align-items: center; 115 | padding: 10px 20px; 116 | background: #fff; 117 | border-radius: 50px; 118 | box-shadow: 0 10px 25px rgba(0,0,0,0.3); 119 | position: relative; 120 | } 121 | 122 | .search-input { 123 | width: 100%; 124 | height: 100%; 125 | margin:10px 24px; 126 | outline: none; 127 | border: 1px solid #ccc; 128 | font-size: 20px; 129 | font-weight: 500; 130 | transition: width 0.8s; 131 | background: transparent; 132 | position: relative; 133 | } 134 | 135 | .placeholder-box { 136 | position: absolute; 137 | top: 0; 138 | left: 0; 139 | width: 100%; 140 | height: 100%; 141 | display: flex; 142 | align-items: center; 143 | justify-content: center; 144 | pointer-events: none; 145 | opacity: 1; 146 | } 147 | 148 | .placeholder-box::after { 149 | content: attr(placeholder); 150 | color: #ccc; 151 | font-size: 16px; 152 | font-weight: 500; 153 | } 154 | 155 | .search-button, 156 | .clear-button { 157 | cursor: pointer; 158 | flex-shrink: 0; 159 | } 160 | 161 | .search-button { 162 | position: absolute; 163 | top: 50%; 164 | left: 17px; 165 | transform: translateY(-50%); 166 | } 167 | 168 | .search-button .fas { 169 | color: rgb(161, 9, 118); 170 | font-size: 18px; 171 | } 172 | 173 | .clear-button{ 174 | position: absolute; 175 | top: 50%; 176 | right: 10px; 177 | transform: translateY(-50%); 178 | border-radius: 5px; 179 | } 180 | 181 | .clear-button .fas { 182 | color: #ccc; 183 | font-size: 16px; 184 | } 185 | 186 | 187 | a.nav-link { 188 | margin-right: 20px; 189 | font-weight: 700; 190 | } 191 | .navbar-light .navbar-nav .active > .nav-link:hover { 192 | color: #ffffff; 193 | } 194 | 195 | nav.fill ul li a.nav-link { 196 | transition: all 0.5s; 197 | } 198 | 199 | nav.fill ul li a.nav-link:after { 200 | text-align: left; 201 | content: "."; 202 | margin: 0; 203 | opacity: 0; 204 | } 205 | 206 | nav.fill ul li a.nav-link:hover { 207 | /* color: white; */ 208 | animation: hover-color 0.5s forwards; 209 | z-index: 1; 210 | } 211 | 212 | nav.fill ul li a.nav-link:hover:after { 213 | z-index: -10; 214 | border-radius: 10px; 215 | animation: fill 0.7s forwards; 216 | opacity: 1; 217 | } 218 | 219 | nav.fill ul li a.nav-link { 220 | position: relative; 221 | } 222 | 223 | nav.fill ul li a.nav-link:after { 224 | position: absolute; 225 | bottom: 0; 226 | left: 0; 227 | right: 0; 228 | margin: auto; 229 | width: 0%; 230 | content: "."; 231 | color: transparent; 232 | background: #aaa; 233 | height: 1px; 234 | } 235 | 236 | /* End */ 237 | 238 | /* section Mack book start */ 239 | 240 | section#mack-book { 241 | margin-bottom: 100px; 242 | } 243 | 244 | .carousel-indicators li { 245 | width: 20px; 246 | height: 8px; 247 | border: none; 248 | border-radius: 4px; 249 | background-color: #cecece; 250 | } 251 | .carousel-indicators li.active { 252 | width: 35px; 253 | height: 10px; 254 | border-radius: 8px; 255 | background-image: linear-gradient(145deg, #f1c40f, #e67e22); 256 | } 257 | 258 | .mack { 259 | padding: 10% 4%; 260 | } 261 | 262 | .mack p { 263 | margin-bottom: 30px; 264 | } 265 | 266 | .mack a.mack-btn { 267 | font-weight: bold; 268 | background-color: black; 269 | color: white; 270 | border: 2px solid black; 271 | padding: 15px; 272 | border-radius: 10px; 273 | text-transform: uppercase; 274 | transition: 1s; 275 | cursor: pointer; 276 | } 277 | 278 | .mack a.mack-btn:hover { 279 | background-color: white; 280 | color: black; 281 | } 282 | 283 | svg.bi.bi-arrow-right { 284 | color: white; 285 | font-size: 20px; 286 | transition: 0.5s; 287 | } 288 | 289 | a.mack-btn:hover svg.bi.bi-arrow-right { 290 | transform: rotate(-180deg); 291 | color: black; 292 | } 293 | 294 | /* End */ 295 | 296 | /* section Smart phone start */ 297 | 298 | section#smartphone { 299 | margin-bottom: 100px; 300 | } 301 | 302 | .card { 303 | border-radius: 10px; 304 | transition: ease-in-out 0.2s; 305 | } 306 | 307 | .card img { 308 | border-radius: 10px 10px 0 0; 309 | } 310 | 311 | .card:hover { 312 | transform: scale(1.05); 313 | } 314 | 315 | .smartphone-header { 316 | margin-bottom: 50px; 317 | } 318 | 319 | .smartphone-header h5 { 320 | font-weight: bold; 321 | cursor: pointer; 322 | background: -webkit-linear-gradient(145deg, #f1c40f, #e67e22); 323 | -webkit-background-clip: text; 324 | -webkit-text-fill-color: transparent; 325 | } 326 | 327 | a.smartphone-btn { 328 | font-weight: bold; 329 | background-color: black; 330 | color: white; 331 | border: 2px solid black; 332 | padding: 15px; 333 | border-radius: 10px; 334 | text-transform: uppercase; 335 | transition: 1s; 336 | cursor: pointer; 337 | } 338 | 339 | a.smartphone-btn:hover { 340 | background-color: white; 341 | color: black; 342 | } 343 | 344 | a.smartphone-btn:hover svg.bi.bi-arrow-right { 345 | transform: rotate(-180deg); 346 | color: black; 347 | } 348 | 349 | /* End */ 350 | 351 | /* section Laptop start */ 352 | 353 | section#laptop { 354 | margin-bottom: 100px; 355 | } 356 | 357 | .laptop-header { 358 | margin-bottom: 50px; 359 | } 360 | 361 | .laptop-header h5 { 362 | font-weight: bold; 363 | cursor: pointer; 364 | background: -webkit-linear-gradient(145deg, #f1c40f, #e67e22); 365 | -webkit-background-clip: text; 366 | -webkit-text-fill-color: transparent; 367 | } 368 | 369 | a.laptop-btn { 370 | font-weight: bold; 371 | background-color: black; 372 | color: white; 373 | border: 2px solid black; 374 | padding: 15px; 375 | border-radius: 10px; 376 | text-transform: uppercase; 377 | transition: 1s; 378 | cursor: pointer; 379 | } 380 | 381 | a.laptop-btn:hover { 382 | background-color: white; 383 | color: black; 384 | } 385 | 386 | a.laptop-btn:hover svg.bi.bi-arrow-right { 387 | transform: rotate(-180deg); 388 | color: black; 389 | } 390 | 391 | /* End */ 392 | 393 | /* Categories start */ 394 | 395 | hr { 396 | width: 130px; 397 | background-image: linear-gradient(145deg, #f1c40f, #e67e22); 398 | height: 10px; 399 | border: none; 400 | border-radius: 50px; 401 | margin-bottom: 50px; 402 | } 403 | .categories-card { 404 | box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);; 405 | padding: 5%; 406 | transition: ease-in-out 0.2s; 407 | } 408 | 409 | .categories-card:hover { 410 | transform: scale(1.05); 411 | } 412 | 413 | .mt-5 { 414 | margin-top: 6rem !important; 415 | } 416 | /* End */ 417 | 418 | /* backtotop */ 419 | #goToTopBtn { 420 | position: fixed; /* Fixed/sticky position */ 421 | bottom: 20px; /* Place the button at the bottom of the page */ 422 | right: 30px; /* Place the button 30px from the right */ 423 | z-index: 99; /* Make sure it does not overlap */ 424 | 425 | border-radius: 50%; 426 | background-color: #ffffff; 427 | border: none; 428 | color: rgb(0, 0, 0); 429 | padding: 20px; 430 | text-align: center; 431 | text-decoration: none; 432 | display: inline-block; 433 | font-size: 20px; 434 | margin: 4px 2px; 435 | } 436 | 437 | /* Footer */ 438 | footer { 439 | padding: 5%; 440 | } 441 | /* End */ 442 | 443 | /* Nav animation */ 444 | 445 | @-webkit-keyframes hover-color { 446 | 0% { 447 | color: #000; 448 | } 449 | 50% { 450 | color: #4b4b4b; 451 | } 452 | 100% { 453 | color: #ffffff; 454 | } 455 | } 456 | 457 | @-webkit-keyframes fill { 458 | 0% { 459 | width: 0%; 460 | height: 1px; 461 | } 462 | 50% { 463 | width: 100%; 464 | height: 3px; 465 | } 466 | 100% { 467 | width: 100%; 468 | height: 100%; 469 | background: #333; 470 | } 471 | } 472 | 473 | .contact-form, 474 | .faq-form { 475 | padding: 40px 0; 476 | margin: 0 10px; 477 | } 478 | 479 | .form-container { 480 | max-width: 55%; 481 | margin: 0 auto; 482 | padding: 20px; 483 | background-color: #ffffff; 484 | border-radius: 10px; 485 | box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); 486 | width: 30vw; 487 | } 488 | 489 | .contact-form h2 { 490 | text-align: center; 491 | margin-bottom: 20px; 492 | } 493 | 494 | .form-group { 495 | margin-bottom: 20px; 496 | } 497 | 498 | .form-container label { 499 | display: block; 500 | font-weight: bold; 501 | } 502 | .form-container input, 503 | textarea { 504 | width: 100%; 505 | padding: 10px; 506 | border: 1px solid #ccc; 507 | border-radius: 4px; 508 | margin-bottom: 1rem; 509 | resize: vertical; 510 | } 511 | .submit-button { 512 | padding: 10px 20px; 513 | background-color: #0dac30; 514 | border: none; 515 | color: white; 516 | border-radius: 4px; 517 | font-size: 1rem; 518 | cursor: pointer; 519 | } 520 | /* added css to correct the view of contact form for different devices */ 521 | @media (min-width: 1200px){ 522 | .form-container{ 523 | min-width: 40%; 524 | } 525 | } 526 | @media (min-width: 992px)and (max-width:1200px){ 527 | .form-container{ 528 | min-width: 55%; 529 | } 530 | } 531 | @media (min-width: 768px)and (max-width: 992px){ 532 | .form-container{ 533 | min-width: 70%; 534 | } 535 | } 536 | @media (min-width: 576px)and (max-width:768px){ 537 | #contact{ 538 | width:90%; 539 | } 540 | .form-container{ 541 | min-width: 95%; 542 | } 543 | } 544 | @media (max-width: 576px) { 545 | #contact{ 546 | width:90%; 547 | } 548 | .form-container{ 549 | min-width: 95%; 550 | } 551 | } 552 | /* ends here */ 553 | 554 | footer{ 555 | padding: 0; 556 | width: 100%; 557 | position:relative; 558 | margin: auto; 559 | border: 2px solid rgb(228, 223, 223); 560 | background-color: #ebd2d2; 561 | border-radius:10px; 562 | padding-top:18px; 563 | } 564 | .footer-main{ 565 | padding-top: 0.4em; 566 | padding-bottom: -0.2em; 567 | display: flex; 568 | width: 90%; 569 | margin: auto; 570 | 571 | justify-content: space-evenly; 572 | 573 | } 574 | 575 | .footer-sec1, .footer-sec4{ 576 | width: 24%; 577 | } 578 | .footer-sec1 h4, .footer-sec4 h4{ 579 | font-size: 1.3rem; 580 | } 581 | .footer-sec1 h3, .footer-sec4 h3{ 582 | font-size: 1.4rem; 583 | } 584 | .footer-sec2, .footer-sec3{ 585 | width: 24%; 586 | } 587 | .footer-sec2 h3, .footer-sec3 h3{ 588 | font-size: 1.4rem; 589 | } 590 | footer a{ 591 | text-decoration: none; 592 | color: #212529; 593 | 594 | } 595 | /* footer amin styling */ 596 | 597 | .footer-main li{ 598 | list-style:none; 599 | } 600 | .footer-main ul{ 601 | padding-left: 0.5em; 602 | 603 | } 604 | footer a:hover{ 605 | color: #212529; 606 | text-decoration: none; 607 | } 608 | .footer-main select{ 609 | width: 40%; 610 | padding: 0.15em; 611 | margin-left: 0.2em; 612 | border: 1px solid black; 613 | border-radius: 0.3em ; 614 | background-color: #ffdbdb; 615 | } 616 | 617 | .footer-main option:checked{ 618 | background: grey; 619 | color: white; 620 | padding: 0.15em; 621 | margin-left: 0.5em; 622 | border-radius: 0.3em ; 623 | font-size: 1.05rem; 624 | padding-bottom: 0.25em; 625 | } 626 | .footer-main option{ 627 | 628 | font-size: 1.05rem; 629 | padding-bottom: 0.25em; 630 | } 631 | @media (min-width:765px) and (max-width:1000px){ 632 | .footer-sec3{ 633 | display: none; 634 | } 635 | footer{ 636 | margin-left:0.9em; 637 | } 638 | .footer-main select{ 639 | width: 55%; 640 | } 641 | 642 | } 643 | @media (max-width:765px){ 644 | .footer-sec3, .footer-sec2{ 645 | display: none; 646 | } 647 | .footer-sec1, .footer-sec4{ 648 | width: 45%; 649 | } 650 | .footer-main select{ 651 | width: 60%; 652 | } 653 | 654 | } 655 | 656 | /* footer main styling ends */ 657 | 658 | /* footer go styling starts */ 659 | .footer-go{ 660 | 661 | padding-top: 0.15em; 662 | border-bottom: 2px solid white ; 663 | border-top: 2px solid white ; 664 | } 665 | .footer-go:hover{ 666 | /* background-color: rgb(255, 239, 239); */ 667 | 668 | border: 2px solid rgb(255, 239, 239) ; 669 | background-color: rgb(177, 168, 168); 670 | cursor: pointer; 671 | } 672 | /* footer go styling ends */ 673 | 674 | 675 | /* footer lower styling starts */ 676 | .footer-lower{ 677 | width: 80%; 678 | margin:auto; 679 | display: flex; 680 | padding-left: 1.5em; 681 | padding-top: 0.3em; 682 | padding-bottom: 0.3em; 683 | justify-content: space-between; 684 | border-top: 2px solid white; 685 | border-bottom: 2px solid white; 686 | 687 | } 688 | .footer-lower-item1{ 689 | width: 33%; 690 | } 691 | 692 | .footer-lower-item1 div input{ 693 | border: 1px solid #ced4da; 694 | 695 | } 696 | .footer-lower-item1 div span{ 697 | padding: 0 0.75rem; 698 | } 699 | .footer-lower-item2{ 700 | width: 50%; 701 | } 702 | .payment-logos{ 703 | padding-left: 1.5em; 704 | padding-right: 7.5em; 705 | display: flex; 706 | justify-content: space-evenly; 707 | } 708 | @media (min-width:765px) and (max-width:1000px){ 709 | .footer-lower-item1{ 710 | width: 47%; 711 | } 712 | .payment-logos{ 713 | padding-right: 2.5em; 714 | } 715 | #payment-logos5 , #payment-logos6 , #payment-logos7 { 716 | display: none; 717 | } 718 | } 719 | @media (max-width:765px) { 720 | .footer-lower-item2{ 721 | display: none; 722 | } 723 | .footer-lower-item1{ 724 | width: 80%; 725 | } 726 | } 727 | /* footer lower styling ends */ 728 | 729 | /* About Us section's styles start here */ 730 | .custom-div { 731 | background-color: white; 732 | border-radius: 10px; 733 | padding: 30px; 734 | margin: 0; 735 | } 736 | .inner-container{ 737 | padding: 20px; 738 | border-left: 3px solid #e67e22; 739 | border-right: 3px solid #e67e22; 740 | background: linear-gradient(to right, #e67e22 50%, transparent 50%), 741 | linear-gradient(to right,transparent 50%,#e67e22 50%); 742 | background-size: 100% 3px; 743 | background-repeat: no-repeat; 744 | background-position: top,bottom; 745 | } 746 | .custom-content { 747 | padding: 10px; 748 | } 749 | 750 | .site-logo { 751 | max-width: 100%; 752 | height: auto; 753 | margin-top: 20px; 754 | } 755 | .people,.message,.quality{ 756 | width: 95%; 757 | height: auto; 758 | margin-top:80px; 759 | padding: 20px 0px; 760 | display: flex; 761 | flex-direction: column; 762 | align-items: center; 763 | transition: transform 0.3s ease, color 0.3s ease; 764 | } 765 | .people:hover,.message:hover,.quality:hover{ 766 | cursor: pointer; 767 | } 768 | .people:hover i,.message:hover i,.quality:hover i{ 769 | transform: scale(1.1); 770 | color: #c86713; 771 | } 772 | .people i,.message i,.quality i{ 773 | font-size: 40px; 774 | margin-bottom: 15px; 775 | color: #e67e22; 776 | } 777 | .logo-container{ 778 | display: flex; 779 | align-items: center; 780 | justify-content: space-between; 781 | } 782 | @media (max-width:767px){ 783 | .people,.message,.quality{ 784 | margin-top: 10px; 785 | } 786 | .people i,.message i,.quality i{ 787 | font-size: 30px; 788 | } 789 | .row-top{ 790 | margin-bottom: 40px; 791 | } 792 | .inner-container{ 793 | background: none; 794 | border: 2px solid #c86713; 795 | } 796 | } 797 | /* About Us section's styles ends here */ 798 | 799 | .form-container { 800 | background-color: #f9f9f9; 801 | padding: 20px; 802 | border-radius: 8px; 803 | box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); 804 | max-width: 100%; 805 | margin: 0 auto; 806 | } 807 | 808 | 809 | .styled-form { 810 | display: flex; 811 | flex-direction: column; 812 | } 813 | 814 | 815 | label { 816 | font-weight: bold; 817 | margin-bottom: 5px; 818 | } 819 | 820 | input[type="text"], 821 | input[type="email"], 822 | input[type="tel"], 823 | textarea { 824 | padding: 10px; 825 | margin-bottom: 15px; 826 | border: 1px solid #ccc; 827 | border-radius: 5px; 828 | font-size: 16px; 829 | } 830 | 831 | 832 | .submit-button { 833 | background-color: #007bff; 834 | color: white; 835 | padding: 10px 20px; 836 | border: none; 837 | border-radius: 5px; 838 | font-size: 16px; 839 | cursor: pointer; 840 | } 841 | 842 | .submit-button:hover { 843 | background-color: #0056b3; 844 | } 845 | 846 | /*FAQS*/ 847 | .faq-container { 848 | padding-bottom: 2px; 849 | display: grid; 850 | place-items: center; 851 | overflow: hidden; 852 | } 853 | 854 | .faq-cont{ 855 | padding: 30px; 856 | 857 | } 858 | .faq_heading { 859 | padding-top: 5rem; 860 | color:black; 861 | width: 100%; 862 | } 863 | 864 | .faq_heading h2 { 865 | 866 | padding-bottom: 2rem; 867 | } 868 | 869 | .accordion { 870 | width: 66.5rem; 871 | padding: 1.2rem 0; 872 | border-radius: 1rem; 873 | background: rgba(1, 59, 112, 0.4);; 874 | margin-top: 2rem; 875 | } 876 | 877 | .accordion__heading { 878 | margin-bottom: 1rem; 879 | padding: 0 1.4rem; 880 | } 881 | 882 | .accordion__item:not(:last-child) { 883 | border-bottom: 1px solid rgb(232, 227, 227); 884 | } 885 | 886 | .accordion__btn { 887 | display: flex; 888 | justify-content: space-between; 889 | align-items: center; 890 | width: 100%; 891 | padding: 1.2rem 1.4rem; 892 | background: rgba(1, 59, 112, 0.4); 893 | border: none; 894 | outline: none; 895 | color: white; 896 | font-size: 1.2rem; 897 | text-align: left; 898 | cursor: pointer; 899 | transition: 0.1s; 900 | font-weight: 300; 901 | } 902 | 903 | .accordion__btn:hover { 904 | color: #2868d0; 905 | background: hsl(248, 53%, 97%); 906 | font-weight: 700; 907 | } 908 | 909 | .accordion__item--active .accordion__btn { 910 | color: #2868d0; 911 | border-bottom: 2px solid #2868d0; 912 | background: hsl(248, 53%, 97%); 913 | font-weight: 700; 914 | } 915 | 916 | .accordion__btn .fa-lightbulb { 917 | padding-right: 1rem; 918 | } 919 | 920 | .accordion__icon { 921 | border-radius: 50%; 922 | transform: rotate(0deg); 923 | transition: 0.3s ease-in-out; 924 | opacity: 0.9; 925 | } 926 | 927 | .accordion__item--active .accordion__icon { 928 | transform: rotate(135deg); 929 | } 930 | 931 | .accordion__content { 932 | font-weight: 300; 933 | max-height: 0; 934 | opacity: 0; 935 | overflow: hidden; 936 | color: white; 937 | transform: translateX(16px); 938 | transition: max-height 0.5s ease, opacity 0.5s, transform 0.5s; 939 | } 940 | .accordion__content .email{ 941 | color: #1143c1; 942 | } 943 | .accordion__content p { 944 | padding: 1rem 1rem; 945 | color: #000; 946 | background-color: #c0d9f4; 947 | } 948 | 949 | .accordion__item--active .accordion__content { 950 | opacity: 1; 951 | transform: translateX(0px); 952 | max-height: 100vh; 953 | } 954 | 955 | @media (max-width: 991px) { 956 | .accordion { 957 | width: 31rem; 958 | left: 13rem; 959 | } 960 | } 961 | 962 | @media (max-width: 547px) { 963 | .accordion { 964 | width: 24rem; 965 | } 966 | } 967 | 968 | @media (max-width: 445px) { 969 | .faq_heading { 970 | width: 94%; 971 | } 972 | 973 | .faq_heading h1 { 974 | font-size: 29px; 975 | } 976 | 977 | .accordion { 978 | width: 16rem; 979 | } 980 | 981 | .accordion__btn { 982 | font-size: 11px; 983 | } 984 | } 985 | 986 | #thanks{ 987 | font-size: large; 988 | font-weight: bold; 989 | } 990 | -------------------------------------------------------------------------------- /womens.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 14 | 15 | 16 | 18 | 19 | 20 | 21 | 22 | 23 | 25 | 26 | 27 | 28 | 29 | 30 | 32 | 33 | 34 | 35 | 36 | 37 | 47 | review 48 | 49 | 50 | 51 | 52 | 53 |
    54 | 87 |
    88 |

    Bestsellers here!

    89 |
    90 |
    91 | 92 |
    93 | 94 |

    Classic Cotton

    95 |

    96 |

  • Perfect Fitting to any size
    • 97 |
  • available in all sizes
    • 98 |
  • Customise your design
    • 99 |

    100 | Buy Now 101 | 103 | 105 | 106 | 107 | 108 |
    109 | 110 | 111 |
    112 | 113 |

    Oversize T-Shirts

    114 |

    115 |

  • Artificial leather Jacket
    • 116 |
  • Customised shirt designs
    • 117 |
  • Altered to your fashion sense
    • 118 |

    119 | Buy Now 120 | 122 | 124 | 125 | 126 | 127 |
    128 | 129 | 130 |
    131 | 132 |

    Perfect Shirt

    133 |

    134 |

  • Double sided jacket
    • 135 |
  • Made with artificial cotton
    • 136 |
  • Available in mmulti-colours
    • 137 |

    138 | Buy Now 139 | 141 | 143 | 144 | 145 | 146 |
    147 |
    148 |
    149 |

    See more options here!

    150 | 151 | 152 | 153 |
    154 |
    155 |
    156 |
    157 |
    158 |
    159 | image not found 160 |
    161 |
    Belted Jacket Beige
    162 |

    Snow And Water Resistant With Fur Layer Inside

    163 |
    $61.29
    164 | BUY NOW 165 | 167 | 169 | 171 | 172 | 173 |
    174 |
    175 |
    176 |
    177 |
    178 | image not found 179 |
    180 |
    Ladies "Lydia" Parka
    181 |

    Soft, Padded, Quilted Coat. Winter wear

    182 |
    $144
    183 | BUY NOW 184 | 186 | 188 | 190 | 191 | 192 |
    193 |
    194 |
    195 |
    196 |
    197 | image not found 198 |
    199 |
    Black Hooded
    200 |

    Casual, Puffer, Regular Fit Bomber Jacket

    201 |
    $20
    202 | BUY NOW 203 | 205 | 207 | 209 | 210 | 211 |
    212 |
    213 |
    214 |
    215 | 216 |
    217 | 218 | 388 | 389 | 390 | --------------------------------------------------------------------------------