├── .eslintrc.json ├── .github └── workflows │ └── linters.yml ├── .gitignore ├── .hintrc ├── .stylelintrc.json ├── .vscode └── settings.json ├── About.html ├── LICENSE ├── README.md ├── img ├── 2018.png ├── 2020.png ├── About-mobile.png ├── Buku 2 (1).png ├── Buku 3 (1).png ├── Buku 4 (1).png ├── Buku 5 (1).png ├── Buku 6.png ├── Partners │ ├── airbnb.png │ ├── daumkakao.png │ ├── google.png │ ├── mozilla.png │ └── naver.png ├── ScreenShots │ ├── About-second.PNG │ ├── About.PNG │ ├── Book-Section.PNG │ ├── Desktop.PNG │ ├── Homepage.png │ ├── Hot-Selling-Books.PNG │ ├── about-footer.PNG │ └── mock3.png ├── Social1.png ├── Social2.png ├── about_bg_01.png ├── arrow-circle-down.svg ├── arrow_down.png ├── arrow_up2.png ├── book.svg ├── card-pos.svg ├── footerlogo.png ├── footerlogodesktop.png ├── frame.svg ├── h1.png ├── h2.png ├── h3.png ├── h4.jpg ├── h4.png ├── logo.png ├── main_big.png ├── mobile_intro_bg.png ├── program-x.png ├── receipt-add.svg ├── texture-bg.png └── truck-tick.svg ├── index.html ├── index.js ├── package-lock.json ├── package.json └── sass ├── main.css ├── main.css.map ├── main.scss └── partials ├── _mobile-AboutUs.scss ├── _mobile-Hero-Section.scss ├── _mobile-bookSection.scss ├── _mobile-footer.scss ├── _mobile-header.scss ├── _mobile-hotsellingbooks.scss └── _typography-color.scss /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true, 5 | "jest": true 6 | }, 7 | "parser": "babel-eslint", 8 | "parserOptions": { 9 | "ecmaVersion": 2018, 10 | "sourceType": "module" 11 | }, 12 | "extends": ["airbnb-base"], 13 | "rules": { 14 | "no-shadow": "off", 15 | "no-param-reassign": "off", 16 | "eol-last": "off", 17 | "import/extensions": [ 1, { 18 | "js": "always", "json": "always" 19 | }] 20 | }, 21 | "ignorePatterns": [ 22 | "dist/", 23 | "build/" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /.github/workflows/linters.yml: -------------------------------------------------------------------------------- 1 | name: Linters 2 | 3 | on: pull_request 4 | 5 | env: 6 | FORCE_COLOR: 1 7 | 8 | jobs: 9 | lighthouse: 10 | name: Lighthouse 11 | runs-on: ubuntu-18.04 12 | steps: 13 | - uses: actions/checkout@v2 14 | - uses: actions/setup-node@v1 15 | with: 16 | node-version: "12.x" 17 | - name: Setup Lighthouse 18 | run: npm install -g @lhci/cli@0.7.x 19 | - name: Lighthouse Report 20 | run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=. 21 | webhint: 22 | name: Webhint 23 | runs-on: ubuntu-18.04 24 | steps: 25 | - uses: actions/checkout@v2 26 | - uses: actions/setup-node@v1 27 | with: 28 | node-version: "12.x" 29 | - name: Setup Webhint 30 | run: | 31 | npm install --save-dev hint@6.x 32 | [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.hintrc 33 | - name: Webhint Report 34 | run: npx hint . 35 | stylelint: 36 | name: Stylelint 37 | runs-on: ubuntu-18.04 38 | steps: 39 | - uses: actions/checkout@v2 40 | - uses: actions/setup-node@v1 41 | with: 42 | node-version: "12.x" 43 | - name: Setup Stylelint 44 | run: | 45 | npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x 46 | [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.stylelintrc.json 47 | - name: Stylelint Report 48 | run: npx stylelint "**/*.{css,scss}" 49 | eslint: 50 | name: ESLint 51 | runs-on: ubuntu-18.04 52 | steps: 53 | - uses: actions/checkout@v2 54 | - uses: actions/setup-node@v1 55 | with: 56 | node-version: "12.x" 57 | - name: Setup ESLint 58 | run: | 59 | npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x 60 | [ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.eslintrc.json 61 | - name: ESLint Report 62 | run: npx eslint . 63 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /.hintrc: -------------------------------------------------------------------------------- 1 | { 2 | "connector": { 3 | "name": "local", 4 | "options": { 5 | "pattern": ["**", "!.git/**", "!node_modules/**"] 6 | } 7 | }, 8 | "extends": ["development"], 9 | "formatters": ["stylish"], 10 | "hints": [ 11 | "button-type", 12 | "disown-opener", 13 | "html-checker", 14 | "meta-charset-utf-8", 15 | "meta-viewport", 16 | "no-inline-styles:error" 17 | ] 18 | } -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-standard"], 3 | "plugins": ["stylelint-scss", "stylelint-csstree-validator"], 4 | "rules": { 5 | "at-rule-no-unknown": [ 6 | true, 7 | { 8 | "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"] 9 | } 10 | ], 11 | "scss/at-rule-no-unknown": [ 12 | true, 13 | { 14 | "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"] 15 | } 16 | ], 17 | "csstree/validator": true 18 | }, 19 | "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"] 20 | } 21 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /About.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | About 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | 24 |
25 | 55 |
56 | 57 |
58 | 59 |

60 | "Hello! Pakistani People"
61 | Pakistan's Largest Book Shop! 2020 62 |

63 |

64 | Pakistan's Largest
Book Shop! 65 |

66 |
67 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Id cumque neque qui rerum consequuntur. Illo 68 | culpa 69 | officia aliquid illum cumque? 70 |
71 |
72 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque corporis quam ducimus, natus 73 | explicabo debitis alias enim veritatis, laudantium, beatae voluptate ipsum numquam? Optio earum, odit 74 | accusantium ducimus debitis ipsam.lorem20 Lorem ipsum dolor sit amet consectetur adipisicing elit. 75 | Soluta dignissimos atque vitae consequuntur laborum voluptatem, non 76 |
77 |
78 | Please Contact us on our Email for any further questions about The Book Shop!
waleedamjad99@hotmail.com 80 |
81 |
82 | 83 |
84 | 85 |
86 |

The Book Shop
Pakistan Shop Logo!

87 |
88 |
89 |
90 | The logo of Book Shop was decided in back january, 2022 through the logo competition held in paris on 91 | 17.jan.2022 92 |
93 | 94 | 97 |
98 | 99 |
100 | 101 |
102 |

See the past of
The Book Shop!

103 |
104 |
105 |
106 | Take a look at the last two Biggest Book festivals whicht Took place in London and in Paris. 107 |
108 |
109 | Pastfunctionimg1 110 | Pastfunctionimg1 111 |
112 |
113 | 114 | 134 | 135 | 136 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Waleed Amjad 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software (Book Shop) and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | logo 6 |
7 |
8 | 9 | 10 | 11 | # 📗 Table of Contents 12 | 13 |
14 | Click to view contents 15 |
    16 |
  1. 17 | 📖 About the Project 18 | 29 |
    2. 30 |
  2. 31 | 💻 Getting Started 32 | 40 |
    3. 41 |
  3. 👥 Authors
    4. 42 |
  4. 🔭 Future Features
    5. 43 |
  5. 🤝 Contributing
    6. 44 |
  6. ⭐️ Show your support
    7. 45 |
  7. 🙏 Acknowledgements
    8. 46 |
  8. ❓ FAQ
    9. 47 |
  9. 📝 License
    10. 48 |
49 |
50 | 51 | 52 | 53 | # 📖 Book Shop 54 | 55 | **Book Shop** is a static website. It displays all the information related to shop. The Website can be edited to any version required easily. 56 | 57 |
58 | 59 | ## 🛠 Built With 60 | 61 | ### Tech Stack 62 | 63 | - HTML 64 | - CSS 65 | - JavaScript 66 | 67 |
68 | Client 69 |
70 | 71 | 72 | 73 | ### Key Features 74 | 75 | - Built using only HTML, CSS, JavaScript 76 | - Easy to edit and create another similar feature website. 77 | 78 |

(back to top)

79 | 80 | 81 | 82 | ## 🚀 Live Demo 83 | [Click Here for live Version!](https://developerwaleed.github.io/Book-Shop-Website/) 84 | 85 |

(back to top)

86 | 87 | 88 | 89 | ## 💻 Getting Started 90 | 91 | To get a local copy up and running, follow these steps. 92 | 93 | ### Prerequisites 94 | 95 | - Live Server 96 | 97 | ### Setup 98 | 99 | #### Github 100 | - Enter this url: [https://github.com/developerwaleed/Book-Shop-Website](https://github.com/developerwaleed/Book-Shop-Website) in your web browser. 101 | - Once opened navigate to the top left level of the project a green code download button will be visible on the righthand side. 102 | - Select the download Zip option from drop-down menu. 103 | - Once the download is complete you will be able to access my project locally. 104 | 105 | #### Local (Terminal) 106 | 107 | ```sh 108 | git clone https://github.com/developerwaleed/Book-Shop-Website.git 109 | cd Book-Shop-Website 110 | ``` 111 | 112 | ### Install 113 | 114 | no dependencies 115 | 116 | 117 | ### Usage 118 | 119 | To run the project: 120 | - Open `index.html` on live server. 121 | 122 | ### Run tests 123 | 124 | To run tests, run the following command: 125 | 126 | ``` 127 | npm run test 128 | ``` 129 | 130 | ### Deployment 131 | 132 | You can deploy this project using: 133 | 134 | - Github Pages 135 | - Netlify 136 | 137 |

(back to top)

138 | 139 | 140 | ## 👥 Authors 141 | | 👤 Name | Github | Twitter | LinkedIn | 142 | |------|--------|---------|----------| 143 | |Waleed Amjad|[@caasperr](https://github.com/developerwaleed)|[@developerwaleed](https://twitter.com/developerwaleed)|[@developerwaleed](https://www.linkedin.com/in/developerwaleed/)| 144 |

(back to top)

145 | 146 | 147 | 148 | ## 🔭 Future Features 149 | 150 | - Currently none. 151 | 152 |

(back to top)

153 | 154 | 155 | 156 | ## 🤝 Contributing 157 | 158 | Contributions are what makes the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**. 159 | 160 | 1. Fork the Project 161 | 2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`) 162 | 3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`) 163 | 4. Push to the Branch (`git push origin feature/AmazingFeature`) 164 | 5. Open a Pull Request 165 | 166 | If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue, feel free to check the [issues page](../../issues/). 167 | 168 |

(back to top)

169 | 170 | 171 | 172 | ## ⭐️ Show your support 173 | 174 | If you like this project. Don't forget to give it a ⭐️ 175 | 176 |

(back to top)

177 | 178 | 179 | 180 | ## 🙏 Acknowledgments 181 | 182 | - A big thanks to [@microverseinc](https://github.com/microverseinc) for the project idea, guidance and inspiration. 183 | - Thanks to Julieta Ulanovsky, Sol Matas, Juan Pablo del Peral and Jacques Le Bailly from [Freepik](https://twitter.com/DeeMaejor) for the background images 184 | - Thanks to [Cindy shin](https://www.behance.net/adagio07) for the design. 185 | 186 |

(back to top)

187 | 188 | 189 | 190 | ## ❓ FAQ 191 | 192 | - **What inspired me to create this project?** 193 | 194 | - The inspiration for this project came from microverse – a software development bootcamp where you work with teammates remotely on different projects. 195 | 196 |

(back to top)

197 | 198 | 199 | 200 | ## 📝 License 201 | 202 | This project is [MIT](./LICENSE) licensed. 203 | 204 |

(back to top)

205 | -------------------------------------------------------------------------------- /img/2018.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerwaleed/Book-Shop-Website/f52cd09e2d271322e34ffa3e683d2c776f932a89/img/2018.png -------------------------------------------------------------------------------- /img/2020.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerwaleed/Book-Shop-Website/f52cd09e2d271322e34ffa3e683d2c776f932a89/img/2020.png -------------------------------------------------------------------------------- /img/About-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerwaleed/Book-Shop-Website/f52cd09e2d271322e34ffa3e683d2c776f932a89/img/About-mobile.png -------------------------------------------------------------------------------- /img/Buku 2 (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerwaleed/Book-Shop-Website/f52cd09e2d271322e34ffa3e683d2c776f932a89/img/Buku 2 (1).png -------------------------------------------------------------------------------- /img/Buku 3 (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerwaleed/Book-Shop-Website/f52cd09e2d271322e34ffa3e683d2c776f932a89/img/Buku 3 (1).png -------------------------------------------------------------------------------- /img/Buku 4 (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerwaleed/Book-Shop-Website/f52cd09e2d271322e34ffa3e683d2c776f932a89/img/Buku 4 (1).png -------------------------------------------------------------------------------- /img/Buku 5 (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerwaleed/Book-Shop-Website/f52cd09e2d271322e34ffa3e683d2c776f932a89/img/Buku 5 (1).png -------------------------------------------------------------------------------- /img/Buku 6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerwaleed/Book-Shop-Website/f52cd09e2d271322e34ffa3e683d2c776f932a89/img/Buku 6.png -------------------------------------------------------------------------------- /img/Partners/airbnb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerwaleed/Book-Shop-Website/f52cd09e2d271322e34ffa3e683d2c776f932a89/img/Partners/airbnb.png -------------------------------------------------------------------------------- /img/Partners/daumkakao.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerwaleed/Book-Shop-Website/f52cd09e2d271322e34ffa3e683d2c776f932a89/img/Partners/daumkakao.png -------------------------------------------------------------------------------- /img/Partners/google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerwaleed/Book-Shop-Website/f52cd09e2d271322e34ffa3e683d2c776f932a89/img/Partners/google.png -------------------------------------------------------------------------------- /img/Partners/mozilla.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerwaleed/Book-Shop-Website/f52cd09e2d271322e34ffa3e683d2c776f932a89/img/Partners/mozilla.png -------------------------------------------------------------------------------- /img/Partners/naver.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerwaleed/Book-Shop-Website/f52cd09e2d271322e34ffa3e683d2c776f932a89/img/Partners/naver.png -------------------------------------------------------------------------------- /img/ScreenShots/About-second.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerwaleed/Book-Shop-Website/f52cd09e2d271322e34ffa3e683d2c776f932a89/img/ScreenShots/About-second.PNG -------------------------------------------------------------------------------- /img/ScreenShots/About.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerwaleed/Book-Shop-Website/f52cd09e2d271322e34ffa3e683d2c776f932a89/img/ScreenShots/About.PNG -------------------------------------------------------------------------------- /img/ScreenShots/Book-Section.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerwaleed/Book-Shop-Website/f52cd09e2d271322e34ffa3e683d2c776f932a89/img/ScreenShots/Book-Section.PNG -------------------------------------------------------------------------------- /img/ScreenShots/Desktop.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerwaleed/Book-Shop-Website/f52cd09e2d271322e34ffa3e683d2c776f932a89/img/ScreenShots/Desktop.PNG -------------------------------------------------------------------------------- /img/ScreenShots/Homepage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerwaleed/Book-Shop-Website/f52cd09e2d271322e34ffa3e683d2c776f932a89/img/ScreenShots/Homepage.png -------------------------------------------------------------------------------- /img/ScreenShots/Hot-Selling-Books.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerwaleed/Book-Shop-Website/f52cd09e2d271322e34ffa3e683d2c776f932a89/img/ScreenShots/Hot-Selling-Books.PNG -------------------------------------------------------------------------------- /img/ScreenShots/about-footer.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerwaleed/Book-Shop-Website/f52cd09e2d271322e34ffa3e683d2c776f932a89/img/ScreenShots/about-footer.PNG -------------------------------------------------------------------------------- /img/ScreenShots/mock3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerwaleed/Book-Shop-Website/f52cd09e2d271322e34ffa3e683d2c776f932a89/img/ScreenShots/mock3.png -------------------------------------------------------------------------------- /img/Social1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerwaleed/Book-Shop-Website/f52cd09e2d271322e34ffa3e683d2c776f932a89/img/Social1.png -------------------------------------------------------------------------------- /img/Social2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerwaleed/Book-Shop-Website/f52cd09e2d271322e34ffa3e683d2c776f932a89/img/Social2.png -------------------------------------------------------------------------------- /img/about_bg_01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerwaleed/Book-Shop-Website/f52cd09e2d271322e34ffa3e683d2c776f932a89/img/about_bg_01.png -------------------------------------------------------------------------------- /img/arrow-circle-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /img/arrow_down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerwaleed/Book-Shop-Website/f52cd09e2d271322e34ffa3e683d2c776f932a89/img/arrow_down.png -------------------------------------------------------------------------------- /img/arrow_up2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerwaleed/Book-Shop-Website/f52cd09e2d271322e34ffa3e683d2c776f932a89/img/arrow_up2.png -------------------------------------------------------------------------------- /img/book.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /img/card-pos.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /img/footerlogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerwaleed/Book-Shop-Website/f52cd09e2d271322e34ffa3e683d2c776f932a89/img/footerlogo.png -------------------------------------------------------------------------------- /img/footerlogodesktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerwaleed/Book-Shop-Website/f52cd09e2d271322e34ffa3e683d2c776f932a89/img/footerlogodesktop.png -------------------------------------------------------------------------------- /img/frame.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /img/h1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerwaleed/Book-Shop-Website/f52cd09e2d271322e34ffa3e683d2c776f932a89/img/h1.png -------------------------------------------------------------------------------- /img/h2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerwaleed/Book-Shop-Website/f52cd09e2d271322e34ffa3e683d2c776f932a89/img/h2.png -------------------------------------------------------------------------------- /img/h3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerwaleed/Book-Shop-Website/f52cd09e2d271322e34ffa3e683d2c776f932a89/img/h3.png -------------------------------------------------------------------------------- /img/h4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerwaleed/Book-Shop-Website/f52cd09e2d271322e34ffa3e683d2c776f932a89/img/h4.jpg -------------------------------------------------------------------------------- /img/h4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerwaleed/Book-Shop-Website/f52cd09e2d271322e34ffa3e683d2c776f932a89/img/h4.png -------------------------------------------------------------------------------- /img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerwaleed/Book-Shop-Website/f52cd09e2d271322e34ffa3e683d2c776f932a89/img/logo.png -------------------------------------------------------------------------------- /img/main_big.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerwaleed/Book-Shop-Website/f52cd09e2d271322e34ffa3e683d2c776f932a89/img/main_big.png -------------------------------------------------------------------------------- /img/mobile_intro_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerwaleed/Book-Shop-Website/f52cd09e2d271322e34ffa3e683d2c776f932a89/img/mobile_intro_bg.png -------------------------------------------------------------------------------- /img/program-x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerwaleed/Book-Shop-Website/f52cd09e2d271322e34ffa3e683d2c776f932a89/img/program-x.png -------------------------------------------------------------------------------- /img/receipt-add.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /img/texture-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developerwaleed/Book-Shop-Website/f52cd09e2d271322e34ffa3e683d2c776f932a89/img/texture-bg.png -------------------------------------------------------------------------------- /img/truck-tick.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Book-Shop 12 | 13 | 14 | 15 | 16 |
17 |
18 | 25 |
26 | 56 |
57 | 58 |
59 | 60 | 61 |

62 | "Hello! Pakistani People"
63 | Pakistan's Largest
Book Shop!
2020 64 |

65 | 66 |
67 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Id cumque neque qui rerum consequuntur. Illo culpa 68 | officia aliquid illum cumque? 69 |
70 |
71 | Starting From 10.02.2022 ~ 72 |
73 |
74 | @ Created and Managed by CASPER! 75 |
76 |
77 | 78 |
79 |

Book Section

80 | 81 |
82 | 83 |
84 | 85 |
86 |
87 |
88 | Show All 89 |
90 |
91 | 92 |
93 |

Hot Selling Books 🔥

94 |
95 |
96 |
97 |
99 |
100 |
101 | 102 | 121 | 122 | 123 | 124 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const BookContainer = document.getElementById('booksection'); 2 | const HotBookContainer = document.getElementById('HotBooks'); 3 | const mediaQuery = window.matchMedia('(min-width: 768px)'); 4 | 5 | let BookSection = ''; 6 | 7 | const BookSectionOBJ = [ 8 | { 9 | title: 'The Genius Habit', 10 | image: './img/Buku 2 (1).png', 11 | alt: 'Book1', 12 | description: 'The Genius Habit is an amazing book... ', 13 | }, 14 | { 15 | title: 'The BestSeller Code', 16 | image: './img/Buku 3 (1).png', 17 | alt: 'Book2', 18 | description: 'The BestSeller Code is an amazing book... ', 19 | }, 20 | { 21 | title: 'Becoming Best sellers', 22 | image: './img/Buku 4 (1).png', 23 | alt: 'Book2', 24 | description: 'Becoming Best sellers is an amazing book it ...', 25 | }, 26 | { 27 | title: 'The Sielent Patient!', 28 | image: './img/Buku 5 (1).png', 29 | alt: 'Book2', 30 | description: 'The Sielent Patient! book revolves around.... ', 31 | }, 32 | { 33 | title: 'The Lord of Rings', 34 | image: './img/Buku 6.png', 35 | alt: 'Book2', 36 | description: 'The Lord of Rings Amazing fiction based....', 37 | }, 38 | ]; 39 | 40 | const HotBookSection = [ 41 | { 42 | title: 'The Hobbits', 43 | image: './img/h1.png', 44 | alt: 'HotBook1', 45 | description: 'Books are referred to as a mans best friend. They are very beneficial for mankind and have helped it evolve.', 46 | }, 47 | { 48 | title: 'Harry Porter', 49 | image: './img/h2.png', 50 | alt: 'HotBook2', 51 | description: 'Books are referred to as a mans best friend. They are very beneficial for mankind and have helped it evolve.', 52 | }, 53 | { 54 | title: 'The Subtle Art', 55 | image: './img/h3.png', 56 | alt: 'HotBook3', 57 | description: 'Books are referred to as a mans best friend. They are very beneficial for mankind and have helped it evolve.', 58 | }, 59 | { 60 | title: 'Think like a monk', 61 | image: './img/h4.png', 62 | alt: 'HotBook4', 63 | description: 'Books are referred to as a mans best friend. They are very beneficial for mankind and have helped it evolve.', 64 | }, 65 | { 66 | title: 'The Hobbits', 67 | image: './img/h1.png', 68 | alt: 'HotBook1', 69 | description: 'Books are referred to as a mans best friend. They are very beneficial for mankind and have helped it evolve.', 70 | }, 71 | { 72 | title: 'The Subtle Art', 73 | image: './img/h3.png', 74 | alt: 'HotBook3', 75 | description: 'Books are referred to as a mans best friend. They are very beneficial for mankind and have helped it evolve.', 76 | }, 77 | 78 | ]; 79 | 80 | const ShowBooks = () => { 81 | for (let i = 0; i < BookSectionOBJ.length; i += 1) { 82 | BookSection += ` 83 |
84 |
85 | ${BookSectionOBJ[i].alt} 86 |
87 |
88 |
${BookSectionOBJ[i].title}
89 | ${BookSectionOBJ[i].description} 90 |
91 |
92 | `; 93 | } 94 | if (BookContainer !== null) { 95 | BookContainer.innerHTML = BookSection; 96 | } 97 | }; 98 | 99 | ShowBooks(); 100 | BookSection = ''; 101 | 102 | const ShowHotBooks = () => { 103 | for (let i = 0; i < HotBookSection.length; i += 1) { 104 | BookSection += ` 105 |
106 |
107 | ${HotBookSection[i].alt} 108 |
109 |
110 |
${HotBookSection[i].title}
111 | ${HotBookSection[i].description} 112 |
113 |
114 | `; 115 | } 116 | if (HotBookContainer !== null) { 117 | HotBookContainer.innerHTML = BookSection; 118 | } 119 | }; 120 | 121 | ShowHotBooks(); 122 | 123 | function toggle() { 124 | const containerSelector = HotBookContainer.getElementsByClassName('Hotbook-holder'); 125 | const Btn = document.getElementById('togglebutton'); 126 | 127 | for (let i = containerSelector.length - 1; i >= containerSelector.length - 4; i -= 1) { 128 | const Row = containerSelector[i]; 129 | if (Row.style.display === 'none') { 130 | Row.style.display = 'grid'; 131 | Btn.innerHTML = 'Less '; 132 | } else { 133 | Row.style.display = 'none'; 134 | Btn.innerHTML = 'MORE '; 135 | } 136 | } 137 | } 138 | 139 | if (!mediaQuery.matches) { 140 | toggle(); 141 | } 142 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "typed.js": "^2.0.12" 4 | }, 5 | "devDependencies": { 6 | "babel-eslint": "^10.1.0", 7 | "eslint": "^7.32.0", 8 | "eslint-config-airbnb-base": "^14.2.1", 9 | "eslint-plugin-import": "^2.26.0", 10 | "stylelint": "^13.13.1", 11 | "stylelint-config-standard": "^21.0.0", 12 | "stylelint-csstree-validator": "^1.9.0", 13 | "stylelint-scss": "^3.21.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /sass/main.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Lato&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | text-decoration: none; 8 | list-style: none; 9 | color: #272a31; 10 | font-family: "Lato", sans-serif; 11 | } 12 | 13 | .numberclass { 14 | font-family: "Lato", sans-serif; 15 | font-weight: bolder !important; 16 | } 17 | 18 | .numberclasswthoutcolor { 19 | font-family: "Lato", sans-serif; 20 | font-weight: bolder !important; 21 | color: #4f4f4f !important; 22 | } 23 | 24 | .nav-bar { 25 | display: flex; 26 | flex-direction: row; 27 | align-items: center; 28 | justify-content: space-between; 29 | position: absolute; 30 | width: 100vw; 31 | color: #fff; 32 | height: 5rem; 33 | padding: 2em; 34 | } 35 | 36 | .navbar-logo { 37 | display: none; 38 | } 39 | 40 | .menu { 41 | display: flex; 42 | flex-direction: column; 43 | justify-content: center; 44 | align-items: center; 45 | position: fixed; 46 | list-style-type: none; 47 | width: 100%; 48 | margin-top: -70px; 49 | padding: 0; 50 | top: 0; 51 | left: 0; 52 | height: 23px; 53 | transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1); 54 | } 55 | 56 | .menu li { 57 | font-size: 45px; 58 | display: flex; 59 | justify-content: center; 60 | margin: 0 1rem; 61 | padding: 0.5em 0; 62 | width: 100%; 63 | color: white; 64 | } 65 | 66 | .menu a { 67 | font-size: 25px; 68 | color: #ec5242; 69 | } 70 | 71 | .menu-button-container { 72 | display: flex; 73 | height: 100%; 74 | width: 30px; 75 | cursor: pointer; 76 | flex-direction: row; 77 | justify-content: center; 78 | align-items: center; 79 | } 80 | 81 | #menu-toggle { 82 | display: none; 83 | } 84 | 85 | .menu-button, 86 | .menu-button::before, 87 | .menu-button::after { 88 | display: block; 89 | background-color: #272a31; 90 | position: absolute; 91 | height: 4px; 92 | width: 30px; 93 | transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1); 94 | } 95 | 96 | .menu-button::before { 97 | content: ""; 98 | margin-top: -8px; 99 | } 100 | 101 | .menu-button::after { 102 | content: ""; 103 | margin-top: 8px; 104 | } 105 | 106 | #menu-toggle:checked + .menu-button-container.menu-button { 107 | background: rgba(255, 255, 255, 0); 108 | } 109 | 110 | #menu-toggle:checked + .menu-button-container.menu-button::before { 111 | margin-top: 0; 112 | transform: rotate(405deg); 113 | } 114 | 115 | #menu-toggle:checked + .menu-button-container.menu-button::after { 116 | margin-top: 0; 117 | transform: rotate(-405deg); 118 | } 119 | 120 | #menu-toggle ~ .menu li { 121 | height: 0; 122 | margin: 0; 123 | padding: 0; 124 | border: 0; 125 | transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1); 126 | } 127 | 128 | #menu-toggle:checked ~ .menu li { 129 | height: 2.5em; 130 | padding: 0.5em; 131 | transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1); 132 | } 133 | 134 | #menu-toggle:checked ~ .menu { 135 | background-color: #272a31; 136 | opacity: 0.98; 137 | margin-top: 9vh; 138 | height: 93vh; 139 | } 140 | 141 | .pre-navbar { 142 | display: none; 143 | } 144 | 145 | .logo { 146 | display: none; 147 | } 148 | 149 | .bg-color { 150 | background-color: #272a31; 151 | } 152 | 153 | .desktopnav { 154 | display: none; 155 | } 156 | 157 | @media (min-width: 768px) { 158 | .mobile-nav { 159 | display: none; 160 | } 161 | 162 | .nav-bar { 163 | background-color: white; 164 | } 165 | 166 | .pre-navbar { 167 | display: flex; 168 | justify-content: flex-end; 169 | height: 8vh; 170 | width: 100vw; 171 | padding: 0 30px; 172 | color: #ec5242; 173 | } 174 | 175 | .pre-navbar ul { 176 | display: flex; 177 | gap: 10px; 178 | } 179 | 180 | .pre-navbar ul li { 181 | font-size: 20px; 182 | align-self: center; 183 | color: white; 184 | } 185 | 186 | .desktopnav { 187 | display: flex; 188 | box-sizing: border-box; 189 | width: 100vw; 190 | } 191 | 192 | .desktopnav ul { 193 | font-size: 1rem; 194 | width: 85vw; 195 | display: flex; 196 | align-items: center; 197 | justify-content: flex-end; 198 | } 199 | 200 | .desktopnav ul li { 201 | padding-left: 5rem; 202 | } 203 | 204 | .desktopnav ul li:nth-child(4) { 205 | padding-right: 30px; 206 | } 207 | 208 | #unique-item { 209 | height: 2.7rem; 210 | color: #ec5242; 211 | border: 4px solid red; 212 | padding: 0.5rem; 213 | } 214 | 215 | .navbar-logo { 216 | display: block; 217 | padding-left: 3rem; 218 | } 219 | } 220 | 221 | .hero { 222 | display: flex; 223 | flex-direction: column; 224 | justify-content: center; 225 | height: auto; 226 | padding-right: 10px; 227 | gap: 10px; 228 | background-image: url("../img/mobile_intro_bg.png"); 229 | background-repeat: no-repeat; 230 | } 231 | 232 | .hero h1 { 233 | font-family: "COCOGOOSE", sans-serif; 234 | padding-left: 1rem; 235 | color: #ec5242; 236 | line-height: 1.5; 237 | font-size: 2.1rem; 238 | margin-top: 6rem; 239 | } 240 | 241 | .hero span { 242 | color: #ec5242; 243 | font-size: 2rem; 244 | font-weight: 400; 245 | } 246 | 247 | .header-text2 { 248 | color: #4f4f4f; 249 | font-size: 25px; 250 | font-family: "COCOGOOSE", sans-serif; 251 | padding-left: 1rem; 252 | } 253 | 254 | .header-text2 span { 255 | font-size: 25px; 256 | } 257 | 258 | .header-text3 { 259 | color: #4f4f4f; 260 | font-size: 20px; 261 | font-weight: 400; 262 | padding-left: 1rem; 263 | padding-bottom: 50px; 264 | } 265 | 266 | .header-text { 267 | padding: 30px; 268 | margin-left: 1rem; 269 | width: 95vw; 270 | font-size: 19px; 271 | background-color: #f7f7f8; 272 | border: 4px solid white; 273 | } 274 | 275 | #typed-text { 276 | font-family: "Smooch", cursive; 277 | } 278 | 279 | .vector1 { 280 | align-self: flex-end; 281 | } 282 | 283 | .vector2 { 284 | padding-top: 30px; 285 | align-self: center; 286 | } 287 | 288 | @media (min-width: 768px) { 289 | .hero { 290 | display: flex; 291 | background-image: url("../img/main_big.png"); 292 | background-repeat: no-repeat; 293 | background-size: cover; 294 | } 295 | 296 | .hero h1 { 297 | padding-left: 5.5rem; 298 | padding-top: 2rem; 299 | } 300 | 301 | .vector1 { 302 | display: none; 303 | } 304 | 305 | .vector3 { 306 | display: none; 307 | } 308 | 309 | .logo { 310 | display: none; 311 | } 312 | 313 | .header-text { 314 | margin-left: 5.5rem; 315 | width: 53vw; 316 | } 317 | 318 | .header-text2 { 319 | padding-left: 5.5rem; 320 | } 321 | 322 | .header-text3 { 323 | padding-left: 5.5rem; 324 | padding-bottom: 50px; 325 | } 326 | } 327 | 328 | .book-section { 329 | height: auto; 330 | width: 100%; 331 | background-color: #272a31; 332 | background-image: url("../img/program-x.png"); 333 | display: flex; 334 | flex-direction: column; 335 | align-items: center; 336 | justify-content: center; 337 | } 338 | 339 | .book-section h3 { 340 | font-size: 25px; 341 | padding-top: 35px; 342 | color: #ec5242; 343 | text-align: center; 344 | } 345 | 346 | .book-section a { 347 | cursor: pointer; 348 | color: #272a31; 349 | text-decoration: none; 350 | } 351 | 352 | .booktitle { 353 | text-align: center; 354 | font-size: 18px; 355 | font-family: "COCOGOOSE", sans-serif; 356 | padding: 10px 0; 357 | } 358 | 359 | .btn { 360 | margin-bottom: 30px; 361 | } 362 | 363 | .btn button { 364 | border: none; 365 | outline: none; 366 | height: 70px; 367 | width: 50vw; 368 | background-color: #ec5242; 369 | } 370 | 371 | .btn button a { 372 | font-weight: 400; 373 | font-family: "COCOGOOSE", sans-serif; 374 | color: #f7f7f8; 375 | } 376 | 377 | .title-book-section { 378 | background-color: #ec5242; 379 | } 380 | 381 | .Books { 382 | display: grid; 383 | grid-template-columns: 1fr; 384 | grid-template-rows: auto; 385 | padding: 10px 30px; 386 | grid-row-gap: 25px; 387 | } 388 | 389 | .book-holder { 390 | display: grid; 391 | grid-template-columns: 150px 1fr; 392 | place-items: center center; 393 | background-color: rgba(60, 63, 70, 0.4588235294); 394 | } 395 | 396 | .book-holder-color { 397 | background-color: white; 398 | } 399 | 400 | .image-holder { 401 | align-self: baseline; 402 | } 403 | 404 | .lineheight { 405 | margin: auto auto; 406 | height: 1px; 407 | width: 4rem; 408 | margin-top: 1rem; 409 | } 410 | 411 | .description { 412 | color: #272a31; 413 | } 414 | 415 | .whitecolor { 416 | color: white !important; 417 | } 418 | 419 | .primarycolor { 420 | color: #ec5242; 421 | } 422 | 423 | .moresection { 424 | display: none; 425 | } 426 | 427 | @media (min-width: 768px) { 428 | .book-section h3 { 429 | padding: 50px 0; 430 | } 431 | 432 | .lineheight { 433 | margin-top: -2.5rem; 434 | margin-bottom: 2rem; 435 | } 436 | 437 | .Books { 438 | grid-template-columns: repeat(5, 1fr); 439 | grid-column-gap: 4px; 440 | margin: 0 101px; 441 | } 442 | 443 | .book-holder { 444 | grid-template-columns: 1fr; 445 | background-color: rgba(60, 63, 70, 0.4588235294); 446 | grid-column-gap: 10px; 447 | text-align: center; 448 | transition: all 0.5s ease-in-out; 449 | padding: 20px; 450 | } 451 | 452 | .book-holder:hover { 453 | border: 2px solid #fff; 454 | margin-top: -1rem; 455 | } 456 | 457 | .btn { 458 | display: none; 459 | } 460 | 461 | .moresection { 462 | text-align: center; 463 | display: block; 464 | padding: 10px 20px; 465 | border: 2px solid white; 466 | margin: 3rem 0; 467 | } 468 | } 469 | 470 | .hotSellingBooks { 471 | display: flex; 472 | flex-direction: column; 473 | align-items: center; 474 | margin-top: 50px; 475 | } 476 | 477 | .btn2 { 478 | padding: 40px 0; 479 | display: flex; 480 | align-self: center; 481 | justify-self: baseline; 482 | } 483 | 484 | .btn2 button { 485 | outline: none; 486 | height: 3rem; 487 | width: 85vw; 488 | background-color: white; 489 | border: 1px solid #272a31; 490 | font-weight: 300; 491 | font-size: 20px; 492 | } 493 | 494 | .btn2 button img { 495 | padding-left: 13px; 496 | padding-bottom: 2px; 497 | } 498 | 499 | .descriptionColor { 500 | color: #272a31; 501 | } 502 | 503 | .shadow { 504 | box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.8); 505 | } 506 | 507 | .HotBooks { 508 | display: grid; 509 | grid-template-columns: 1fr; 510 | grid-template-rows: auto; 511 | padding: 10px 30px; 512 | grid-row-gap: 25px; 513 | } 514 | 515 | .Hotbook-holder { 516 | display: grid; 517 | grid-template-columns: 150px 1fr; 518 | place-items: center center; 519 | } 520 | 521 | .lineHeightHotSection { 522 | margin: auto auto; 523 | height: 1px; 524 | width: 4rem; 525 | margin-top: 0.5rem; 526 | margin-bottom: 2rem; 527 | } 528 | 529 | @media (min-width: 768px) { 530 | .hotSellingBooks h3 { 531 | height: 5vh; 532 | } 533 | 534 | #togglebutton { 535 | display: none; 536 | } 537 | 538 | .lineHeightHotSection { 539 | margin: auto auto; 540 | height: 1px; 541 | width: 4rem; 542 | margin-top: 0; 543 | margin-bottom: 2rem; 544 | } 545 | 546 | .Hotbook-holder { 547 | padding: 20px; 548 | } 549 | 550 | .HotBooks { 551 | display: grid; 552 | grid-template-columns: 1fr 1fr; 553 | grid-template-rows: auto; 554 | gap: 10px; 555 | } 556 | } 557 | 558 | footer { 559 | display: none; 560 | } 561 | 562 | @media (min-width: 768px) { 563 | footer { 564 | display: block; 565 | } 566 | 567 | .footerhead { 568 | background-color: #2a2a2a; 569 | } 570 | 571 | .footertitle { 572 | padding-top: 50px; 573 | text-align: center; 574 | font-size: 30px; 575 | color: #919193; 576 | } 577 | 578 | .images { 579 | padding: 50px 0; 580 | } 581 | 582 | .imgcontainer { 583 | list-style: none; 584 | display: flex; 585 | align-items: center; 586 | justify-content: space-evenly; 587 | } 588 | 589 | .lineHeightfooter { 590 | margin: auto auto; 591 | height: 1px; 592 | width: 4rem; 593 | margin-top: 0.5rem; 594 | margin-bottom: 2rem; 595 | background-color: #ec5242; 596 | } 597 | 598 | .footerfoot { 599 | display: flex; 600 | flex-direction: row; 601 | align-items: center; 602 | justify-content: center; 603 | margin: auto auto; 604 | gap: 50px; 605 | padding: 20px; 606 | } 607 | 608 | .footerfoot p { 609 | font-size: 30px; 610 | font-family: "COCOGOOSE", sans-serif; 611 | } 612 | } 613 | 614 | .Aboutus { 615 | display: flex; 616 | flex-direction: column; 617 | justify-content: space-evenly; 618 | height: auto; 619 | text-align: center; 620 | background-color: #f7f7f7; 621 | background-image: url("../img/About-mobile.png"); 622 | background-position: center 116px; 623 | background-size: inherit; 624 | background-repeat: no-repeat; 625 | } 626 | 627 | .Aboutus h1 { 628 | font-family: "COCOGOOSE", sans-serif; 629 | padding-left: 1rem; 630 | color: #ec5242; 631 | line-height: 1.5; 632 | font-size: 1.7rem; 633 | margin-top: 6rem; 634 | } 635 | 636 | .Aboutus span { 637 | color: #ec5242; 638 | font-size: 1.8rem; 639 | font-weight: 400; 640 | } 641 | 642 | .About-text { 643 | color: #585555; 644 | font-size: 20px; 645 | font-weight: 400; 646 | background-color: white; 647 | border: 0.5px solid grey; 648 | padding: 20px; 649 | margin: 20px; 650 | } 651 | 652 | .About-text2 { 653 | color: #585555; 654 | font-size: 20px; 655 | font-weight: 400; 656 | padding: 20px; 657 | margin: 20px; 658 | } 659 | 660 | .About-text3 { 661 | text-align: center; 662 | font-size: 2rem; 663 | font-weight: bold; 664 | } 665 | 666 | .aboutline { 667 | margin: auto auto; 668 | height: 2px; 669 | width: 2rem; 670 | margin-top: 0.5rem; 671 | margin-bottom: 2rem; 672 | background-color: #ec5242; 673 | } 674 | 675 | .About-text4 { 676 | text-align: center; 677 | font-size: 20px; 678 | padding: 25px; 679 | padding-top: 8px; 680 | } 681 | 682 | .aboutSection2 { 683 | padding: 25px; 684 | display: flex; 685 | flex-direction: column; 686 | justify-content: center; 687 | align-items: center; 688 | width: 100vw; 689 | } 690 | 691 | .aboutSection2 .About-logo { 692 | display: flex; 693 | align-items: center; 694 | justify-content: center; 695 | margin: auto auto; 696 | border: 0.5px solid gray; 697 | width: 70vw; 698 | height: 15vh; 699 | } 700 | 701 | .aboutSection2 .About-logo img { 702 | padding: 10px; 703 | } 704 | 705 | .about-Email { 706 | color: #272a31 !important; 707 | text-decoration: underline; 708 | font-size: 25px !important; 709 | } 710 | 711 | .AboutFooter { 712 | display: flex; 713 | flex-direction: row; 714 | flex-wrap: wrap; 715 | align-items: center; 716 | justify-content: space-around; 717 | } 718 | 719 | .AboutFooter * { 720 | color: white; 721 | } 722 | 723 | .aboutimgcontainer { 724 | width: 100vw; 725 | list-style: none; 726 | display: flex; 727 | flex-wrap: wrap; 728 | align-items: center; 729 | justify-content: space-around; 730 | padding: 20px; 731 | } 732 | 733 | .coloryes { 734 | color: #ec5242 !important; 735 | } 736 | 737 | .aboutfooterhead { 738 | text-align: center; 739 | padding-top: 30px; 740 | font-size: 25px; 741 | background-color: #2a2a2a; 742 | } 743 | 744 | .lineHeightfooter { 745 | width: 40px; 746 | } 747 | 748 | .aboutfooterfoot { 749 | padding: 50px; 750 | display: flex; 751 | flex-direction: row; 752 | align-items: center; 753 | justify-content: center; 754 | margin: auto auto; 755 | gap: 50px; 756 | } 757 | 758 | .aboutfooterfoot p { 759 | font-size: 20px; 760 | color: #4f4f4f !important; 761 | font-family: "COCOGOOSE", sans-serif; 762 | } 763 | 764 | .About-text-Desktop { 765 | display: none; 766 | } 767 | 768 | .notshowondesktop { 769 | display: block; 770 | } 771 | 772 | .notshowonmobile { 773 | display: none; 774 | } 775 | 776 | .Desktop-text { 777 | display: none; 778 | } 779 | 780 | .pastimagestext { 781 | font-size: 1rem; 782 | margin-bottom: 40px; 783 | } 784 | 785 | .pastimages { 786 | display: flex; 787 | flex-direction: column; 788 | align-items: center; 789 | justify-content: space-evenly; 790 | gap: 20px; 791 | } 792 | 793 | @media (min-width: 768px) { 794 | .Aboutus { 795 | background-image: url("../img/about_bg_01.png"); 796 | } 797 | 798 | .Aboutus h1 { 799 | font-size: 2.5rem; 800 | } 801 | 802 | .About-text { 803 | display: none; 804 | } 805 | 806 | .About-text-Desktop { 807 | display: block; 808 | color: #585555; 809 | font-size: 20px; 810 | font-weight: 400; 811 | background-color: white; 812 | border: 0.5px solid grey; 813 | padding: 20px; 814 | margin: 20px; 815 | width: 60vw; 816 | align-self: center; 817 | } 818 | 819 | .notshowondesktop { 820 | display: none; 821 | } 822 | 823 | .about-Email { 824 | padding-bottom: 30px; 825 | } 826 | 827 | .Desktop-text { 828 | display: block; 829 | } 830 | 831 | .About-logo { 832 | width: 25vw; 833 | height: 20vh; 834 | } 835 | 836 | .notshowonmobile { 837 | display: block; 838 | } 839 | 840 | .aboutfooterhead { 841 | display: none; 842 | } 843 | 844 | .aboutfooterfoot { 845 | width: 100vw; 846 | background-color: #2a2a2a; 847 | } 848 | 849 | .aboutfooterfoot p { 850 | color: white !important; 851 | padding-top: 25px; 852 | } 853 | 854 | .pastimages { 855 | flex-direction: row; 856 | width: 100vw; 857 | padding: 50px; 858 | } 859 | } 860 | -------------------------------------------------------------------------------- /sass/main.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["partials/_typography-color.scss","partials/_mobile-header.scss","partials/_mobile-Hero-Section.scss","partials/_mobile-bookSection.scss","partials/_mobile-hotsellingbooks.scss","partials/_mobile-footer.scss","partials/_mobile-AboutUs.scss"],"names":[],"mappings":"AAOQ;AAER;EACE;EACA;EACA;EACA;EACA;EACA,OAfS;EAgBT;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AC1BF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA,OD3CW;;;AC+Cf;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;EAGE;EAEA,kBDnES;ECoET;EACA;EACA;EACA;;;AAIA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE,kBDnHS;ECoHT;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE,kBDlIS;;;ACqIX;EACE;;;AAGF;EACE;IACE;;;EAGF;IACE;;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA,ODvJW;;ECyJX;IACE;IACA;;EAEA;IACE;IACA;IACA;;;EAKN;IACE;IACA;IACA;;EAEA;IACE;IACA;IACA;IACA;IACA;;EAEA;IACE;;EAEA;IACE;;;EAMR;IACE;IACA,OD7LW;IC8LX;IACA;;;EAGF;IACE;IACA;;;ACrMJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA,cFPK;EEQL,OFZW;EEaX;EACA;EACA;;AAGF;EACE,OFnBW;EEoBX;EACA;;;AAIJ;EACE,OFvBO;EEwBP;EACA;EACA,cFzBO;;AE2BP;EACE;;;AAIJ;EACE,OFlCO;EEmCP;EACA;EACA,cFpCO;EEqCP;;;AAGF;EACE;EACA,aF1CO;EE2CP;EACA;EACA,kBF/CO;EEgDP;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;IACE;IACA;IACA;IACA;;EAEA;IACE;IACA;;;EAIJ;IACE;;;EAGF;IACE;;;EAGF;IACE;;;EAGF;IACE;IACA;;;EAIF;IACE;;;EAGF;IACE;IACA;;;ACxGJ;EACE;EACA;EACA,kBHHS;EGIT;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA,OHZW;EGaX;;AAGF;EACE;EACA,OHnBO;EGoBP;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA,kBHtCW;;AGwCX;EACE;EACA;EACA,OHzCG;;;AG8CT;EACE,kBHjDa;;;AGoDf;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE,OHpFS;;;AGuFX;EACE;;;AAGF;EACE,OH3Fa;;;AG8Ff;EACE;;;AAGF;EAEI;IACE;;;EAIJ;IACE;IACA;;;EAGF;IACE;IACA;IACA;;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;;;EAGF;IACE;IACA;;;EAGF;IACE;;;EAGF;IACE;IACA;IACA;IACA;IACA;;;AC5IJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAKN;EACE,OJ9BS;;;AIiCX;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAEI;IACE;;;EAIJ;IACE;;;EAGF;IACE;IACA;IACA;IACA;IACA;;;EAGF;IACE;;;EAGF;IACE;IACA;IACA;IACA;;;ACtFJ;EACE;;;AAGF;EACE;IACE;;;EAGF;IACE;;;EAGF;IACE;IACA;IACA;IACA;;;EAGF;IACE;;;EAGF;IACE;IACA;IACA;IACA;;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA,kBLpCW;;;EKuCb;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;IACA;;;ACnDN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA,cNTK;EMUL,ONdW;EMeX;EACA;EACA;;AAGF;EACE,ONrBW;EMsBX;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA,kBNzDa;;;AM4Df;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;;EAEA;IACE;;;EAIJ;IACE;;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;EAGF;IACE;;;EAGF;IACE;;;EAGF;IACE;;;EAGF;IACE;IACA;;;EAGF;IACE;;;EAGF;IACE;;;EAGF;IACE;IACA;;EAEA;IACE;IACA;;;EAIJ;IACE;IACA;IACA","file":"main.css"} -------------------------------------------------------------------------------- /sass/main.scss: -------------------------------------------------------------------------------- 1 | @import "partials/typography-color"; 2 | @import "partials/mobile-header"; 3 | @import "partials/mobile-Hero-Section"; 4 | @import "partials/mobile-bookSection"; 5 | @import "partials/mobile-hotsellingbooks"; 6 | @import "partials/mobile-footer"; 7 | @import "partials/mobile-AboutUs"; 8 | -------------------------------------------------------------------------------- /sass/partials/_mobile-AboutUs.scss: -------------------------------------------------------------------------------- 1 | .Aboutus { 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: space-evenly; 5 | height: auto; 6 | text-align: center; 7 | background-color: #f7f7f7; 8 | background-image: url('../img/About-mobile.png'); 9 | background-position: center 116px; 10 | background-size: inherit; 11 | background-repeat: no-repeat; 12 | 13 | h1 { 14 | font-family: 'COCOGOOSE', sans-serif; 15 | padding-left: $rempad; 16 | color: $primarycolor; 17 | line-height: 1.5; 18 | font-size: 1.7rem; 19 | margin-top: 6rem; 20 | } 21 | 22 | span { 23 | color: $primarycolor; 24 | font-size: 1.8rem; 25 | font-weight: 400; 26 | } 27 | } 28 | 29 | .About-text { 30 | color: #585555; 31 | font-size: 20px; 32 | font-weight: 400; 33 | background-color: white; 34 | border: 0.5px solid grey; 35 | padding: 20px; 36 | margin: 20px; 37 | } 38 | 39 | .About-text2 { 40 | color: #585555; 41 | font-size: 20px; 42 | font-weight: 400; 43 | padding: 20px; 44 | margin: 20px; 45 | } 46 | 47 | .About-text3 { 48 | text-align: center; 49 | font-size: 2rem; 50 | font-weight: bold; 51 | } 52 | 53 | .aboutline { 54 | margin: auto auto; 55 | height: 2px; 56 | width: 2rem; 57 | margin-top: 0.5rem; 58 | margin-bottom: 2rem; 59 | background-color: $primarycolor; 60 | } 61 | 62 | .About-text4 { 63 | text-align: center; 64 | font-size: 20px; 65 | padding: 25px; 66 | padding-top: 8px; 67 | } 68 | 69 | .aboutSection2 { 70 | padding: 25px; 71 | display: flex; 72 | flex-direction: column; 73 | justify-content: center; 74 | align-items: center; 75 | width: 100vw; 76 | 77 | .About-logo { 78 | display: flex; 79 | align-items: center; 80 | justify-content: center; 81 | margin: auto auto; 82 | border: 0.5px solid gray; 83 | width: 70vw; 84 | height: 15vh; 85 | 86 | img { 87 | padding: 10px; 88 | } 89 | } 90 | } 91 | 92 | .about-Email { 93 | color: $bg-color !important; 94 | text-decoration: underline; 95 | font-size: 25px !important; 96 | } 97 | 98 | .AboutFooter { 99 | display: flex; 100 | flex-direction: row; 101 | flex-wrap: wrap; 102 | align-items: center; 103 | justify-content: space-around; 104 | 105 | & * { 106 | color: white; 107 | } 108 | } 109 | 110 | .aboutimgcontainer { 111 | width: 100vw; 112 | list-style: none; 113 | display: flex; 114 | flex-wrap: wrap; 115 | align-items: center; 116 | justify-content: space-around; 117 | padding: 20px; 118 | } 119 | 120 | .coloryes { 121 | color: $primarycolor !important; 122 | } 123 | 124 | .aboutfooterhead { 125 | text-align: center; 126 | padding-top: 30px; 127 | font-size: 25px; 128 | background-color: #2a2a2a; 129 | } 130 | 131 | .lineHeightfooter { 132 | width: 40px; 133 | } 134 | 135 | .aboutfooterfoot { 136 | padding: 50px; 137 | display: flex; 138 | flex-direction: row; 139 | align-items: center; 140 | justify-content: center; 141 | margin: auto auto; 142 | gap: 50px; 143 | 144 | p { 145 | font-size: 20px; 146 | color: $color5 !important; 147 | font-family: 'COCOGOOSE', sans-serif; 148 | } 149 | } 150 | 151 | .About-text-Desktop { 152 | display: none; 153 | } 154 | 155 | .notshowondesktop { 156 | display: block; 157 | } 158 | 159 | .notshowonmobile { 160 | display: none; 161 | } 162 | 163 | .Desktop-text { 164 | display: none; 165 | } 166 | 167 | .pastimagestext { 168 | font-size: 1rem; 169 | margin-bottom: 40px; 170 | } 171 | 172 | .pastimages { 173 | display: flex; 174 | flex-direction: column; 175 | align-items: center; 176 | justify-content: space-evenly; 177 | gap: 20px; 178 | } 179 | 180 | @media (min-width: 768px) { 181 | .Aboutus { 182 | background-image: url('../img/about_bg_01.png'); 183 | 184 | h1 { 185 | font-size: 2.5rem; 186 | } 187 | } 188 | 189 | .About-text { 190 | display: none; 191 | } 192 | 193 | .About-text-Desktop { 194 | display: block; 195 | color: #585555; 196 | font-size: 20px; 197 | font-weight: 400; 198 | background-color: white; 199 | border: 0.5px solid grey; 200 | padding: 20px; 201 | margin: 20px; 202 | width: 60vw; 203 | align-self: center; 204 | } 205 | 206 | .notshowondesktop { 207 | display: none; 208 | } 209 | 210 | .about-Email { 211 | padding-bottom: 30px; 212 | } 213 | 214 | .Desktop-text { 215 | display: block; 216 | } 217 | 218 | .About-logo { 219 | width: 25vw; 220 | height: 20vh; 221 | } 222 | 223 | .notshowonmobile { 224 | display: block; 225 | } 226 | 227 | .aboutfooterhead { 228 | display: none; 229 | } 230 | 231 | .aboutfooterfoot { 232 | width: 100vw; 233 | background-color: #2a2a2a; 234 | 235 | p { 236 | color: white !important; 237 | padding-top: 25px; 238 | } 239 | } 240 | 241 | .pastimages { 242 | flex-direction: row; 243 | width: 100vw; 244 | padding: 50px; 245 | } 246 | } 247 | -------------------------------------------------------------------------------- /sass/partials/_mobile-Hero-Section.scss: -------------------------------------------------------------------------------- 1 | .hero { 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: center; 5 | height: auto; 6 | padding-right: 10px; 7 | gap: 10px; 8 | background-image: url('../img/mobile_intro_bg.png'); 9 | background-repeat: no-repeat; 10 | 11 | h1 { 12 | font-family: 'COCOGOOSE', sans-serif; 13 | padding-left: $rempad; 14 | color: $primarycolor; 15 | line-height: 1.5; 16 | font-size: 2.1rem; 17 | margin-top: 6rem; 18 | } 19 | 20 | span { 21 | color: $primarycolor; 22 | font-size: 2rem; 23 | font-weight: 400; 24 | } 25 | } 26 | 27 | .header-text2 { 28 | color: $color5; 29 | font-size: 25px; 30 | font-family: 'COCOGOOSE', sans-serif; 31 | padding-left: $rempad; 32 | 33 | span { 34 | font-size: 25px; 35 | } 36 | } 37 | 38 | .header-text3 { 39 | color: $color5; 40 | font-size: 20px; 41 | font-weight: 400; 42 | padding-left: $rempad; 43 | padding-bottom: 50px; 44 | } 45 | 46 | .header-text { 47 | padding: 30px; 48 | margin-left: $rempad; 49 | width: 95vw; 50 | font-size: 19px; 51 | background-color: $color4; 52 | border: 4px solid white; 53 | } 54 | 55 | #typed-text { 56 | font-family: 'Smooch', cursive; 57 | } 58 | 59 | .vector1 { 60 | align-self: flex-end; 61 | } 62 | 63 | .vector2 { 64 | padding-top: 30px; 65 | align-self: center; 66 | } 67 | 68 | @media (min-width: 768px) { 69 | .hero { 70 | display: flex; 71 | background-image: url('../img/main_big.png'); 72 | background-repeat: no-repeat; 73 | background-size: cover; 74 | 75 | h1 { 76 | padding-left: 5.5rem; 77 | padding-top: 2rem; 78 | } 79 | } 80 | 81 | .vector1 { 82 | display: none; 83 | } 84 | 85 | .vector3 { 86 | display: none; 87 | } 88 | 89 | .logo { 90 | display: none; 91 | } 92 | 93 | .header-text { 94 | margin-left: 5.5rem; 95 | width: 53vw; 96 | // padding: 10px; 97 | } 98 | 99 | .header-text2 { 100 | padding-left: 5.5rem; 101 | } 102 | 103 | .header-text3 { 104 | padding-left: 5.5rem; 105 | padding-bottom: 50px; 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /sass/partials/_mobile-bookSection.scss: -------------------------------------------------------------------------------- 1 | .book-section { 2 | height: auto; 3 | width: 100%; 4 | background-color: $bg-color; 5 | background-image: url("../img/program-x.png"); 6 | display: flex; 7 | flex-direction: column; 8 | align-items: center; 9 | justify-content: center; 10 | 11 | h3 { 12 | font-size: 25px; 13 | padding-top: 35px; 14 | color: $primarycolor; 15 | text-align: center; 16 | } 17 | 18 | a { 19 | cursor: pointer; 20 | color: $bg-color; 21 | text-decoration: none; 22 | } 23 | } 24 | 25 | .booktitle { 26 | text-align: center; 27 | font-size: 18px; 28 | font-family: 'COCOGOOSE', sans-serif; 29 | padding: 10px 0; 30 | } 31 | 32 | .btn { 33 | margin-bottom: 30px; 34 | 35 | button { 36 | border: none; 37 | outline: none; 38 | height: 70px; 39 | width: 50vw; 40 | background-color: $primarycolor; 41 | 42 | a { 43 | font-weight: 400; 44 | font-family: 'COCOGOOSE', sans-serif; 45 | color: $color4; 46 | } 47 | } 48 | } 49 | 50 | .title-book-section { 51 | background-color: $primarycolor; 52 | } 53 | 54 | .Books { 55 | display: grid; 56 | grid-template-columns: 1fr; 57 | grid-template-rows: auto; 58 | padding: 10px 30px; 59 | grid-row-gap: 25px; 60 | } 61 | 62 | .book-holder { 63 | display: grid; 64 | grid-template-columns: 150px 1fr; 65 | place-items: center center; 66 | background-color: #3c3f4675; 67 | } 68 | 69 | .book-holder-color { 70 | background-color: white; 71 | } 72 | 73 | .image-holder { 74 | align-self: baseline; 75 | } 76 | 77 | .lineheight { 78 | margin: auto auto; 79 | height: 1px; 80 | width: 4rem; 81 | margin-top: 1rem; 82 | } 83 | 84 | .description { 85 | color: $bg-color; 86 | } 87 | 88 | .whitecolor { 89 | color: white !important; 90 | } 91 | 92 | .primarycolor { 93 | color: $primarycolor; 94 | } 95 | 96 | .moresection { 97 | display: none; 98 | } 99 | 100 | @media (min-width: 768px) { 101 | .book-section { 102 | h3 { 103 | padding: 50px 0; 104 | } 105 | } 106 | 107 | .lineheight { 108 | margin-top: -2.5rem; 109 | margin-bottom: 2rem; 110 | } 111 | 112 | .Books { 113 | grid-template-columns: repeat(5, 1fr); 114 | grid-column-gap: 4px; 115 | margin: 0 101px; 116 | } 117 | 118 | .book-holder { 119 | grid-template-columns: 1fr; 120 | background-color: #3c3f4675; 121 | grid-column-gap: 10px; 122 | text-align: center; 123 | transition: all 0.5s ease-in-out; 124 | padding: 20px; 125 | } 126 | 127 | .book-holder:hover { 128 | border: 2px solid #fff; 129 | margin-top: -1rem; 130 | } 131 | 132 | .btn { 133 | display: none; 134 | } 135 | 136 | .moresection { 137 | text-align: center; 138 | display: block; 139 | padding: 10px 20px; 140 | border: 2px solid white; 141 | margin: 3rem 0; 142 | } 143 | } 144 | -------------------------------------------------------------------------------- /sass/partials/_mobile-footer.scss: -------------------------------------------------------------------------------- 1 | footer { 2 | display: none; 3 | } 4 | 5 | @media (min-width: 768px) { 6 | footer { 7 | display: block; 8 | } 9 | 10 | .footerhead { 11 | background-color: #2a2a2a; 12 | } 13 | 14 | .footertitle { 15 | padding-top: 50px; 16 | text-align: center; 17 | font-size: 30px; 18 | color: #919193; 19 | } 20 | 21 | .images { 22 | padding: 50px 0; 23 | } 24 | 25 | .imgcontainer { 26 | list-style: none; 27 | display: flex; 28 | align-items: center; 29 | justify-content: space-evenly; 30 | } 31 | 32 | .lineHeightfooter { 33 | margin: auto auto; 34 | height: 1px; 35 | width: 4rem; 36 | margin-top: 0.5rem; 37 | margin-bottom: 2rem; 38 | background-color: $primarycolor; 39 | } 40 | 41 | .footerfoot { 42 | display: flex; 43 | flex-direction: row; 44 | align-items: center; 45 | justify-content: center; 46 | margin: auto auto; 47 | gap: 50px; 48 | padding: 20px; 49 | 50 | p { 51 | font-size: 30px; 52 | font-family: 'COCOGOOSE', sans-serif; 53 | } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /sass/partials/_mobile-header.scss: -------------------------------------------------------------------------------- 1 | // Hamburger Menu 2 | .nav-bar { 3 | display: flex; 4 | flex-direction: row; 5 | align-items: center; 6 | justify-content: space-between; 7 | position: absolute; 8 | width: 100vw; 9 | color: #fff; 10 | height: 5rem; 11 | padding: 2em; 12 | } 13 | 14 | .navbar-logo { 15 | display: none; 16 | } 17 | 18 | .menu { 19 | display: flex; 20 | flex-direction: column; 21 | justify-content: center; 22 | align-items: center; 23 | position: fixed; 24 | list-style-type: none; 25 | width: 100%; 26 | margin-top: -70px; 27 | padding: 0; 28 | top: 0; 29 | left: 0; 30 | height: 23px; 31 | transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1); 32 | 33 | li { 34 | font-size: 45px; 35 | display: flex; 36 | justify-content: center; 37 | margin: 0 1rem; 38 | padding: 0.5em 0; 39 | width: 100%; 40 | color: white; 41 | } 42 | 43 | a { 44 | font-size: 25px; 45 | color: $primarycolor; 46 | } 47 | } 48 | 49 | .menu-button-container { 50 | display: flex; 51 | height: 100%; 52 | width: 30px; 53 | cursor: pointer; 54 | flex-direction: row; 55 | justify-content: center; 56 | align-items: center; 57 | } 58 | 59 | #menu-toggle { 60 | display: none; 61 | } 62 | 63 | .menu-button, 64 | .menu-button::before, 65 | .menu-button::after { 66 | display: block; 67 | // background-color: #fff; 68 | background-color: $bg-color; 69 | position: absolute; 70 | height: 4px; 71 | width: 30px; 72 | transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1); 73 | } 74 | 75 | .menu-button { 76 | &::before { 77 | content: ''; 78 | margin-top: -8px; 79 | } 80 | 81 | &::after { 82 | content: ''; 83 | margin-top: 8px; 84 | } 85 | } 86 | 87 | #menu-toggle:checked + .menu-button-container.menu-button { 88 | background: rgba(255, 255, 255, 0); 89 | 90 | &::before { 91 | margin-top: 0; 92 | transform: rotate(405deg); 93 | } 94 | 95 | &::after { 96 | margin-top: 0; 97 | transform: rotate(-405deg); 98 | } 99 | } 100 | 101 | #menu-toggle ~ .menu li { 102 | height: 0; 103 | margin: 0; 104 | padding: 0; 105 | border: 0; 106 | transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1); 107 | } 108 | 109 | #menu-toggle:checked ~ .menu li { 110 | height: 2.5em; 111 | padding: 0.5em; 112 | transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1); 113 | } 114 | 115 | #menu-toggle:checked ~ .menu { 116 | background-color: $bg-color; 117 | opacity: 0.98; 118 | margin-top: 9vh; 119 | height: 93vh; 120 | } 121 | 122 | .pre-navbar { 123 | display: none; 124 | } 125 | 126 | .logo { 127 | display: none; 128 | } 129 | 130 | .bg-color { 131 | background-color: $bg-color; 132 | } 133 | 134 | .desktopnav { 135 | display: none; 136 | } 137 | 138 | @media (min-width: 768px) { 139 | .mobile-nav { 140 | display: none; 141 | } 142 | 143 | .nav-bar { 144 | background-color: white; 145 | } 146 | 147 | .pre-navbar { 148 | display: flex; 149 | justify-content: flex-end; 150 | height: 8vh; 151 | width: 100vw; 152 | padding: 0 30px; 153 | color: $primarycolor; 154 | 155 | ul { 156 | display: flex; 157 | gap: 10px; 158 | 159 | li { 160 | font-size: 20px; 161 | align-self: center; 162 | color: white; 163 | } 164 | } 165 | } 166 | 167 | .desktopnav { 168 | display: flex; 169 | box-sizing: border-box; 170 | width: 100vw; 171 | 172 | ul { 173 | font-size: 1rem; 174 | width: 85vw; 175 | display: flex; 176 | align-items: center; 177 | justify-content: flex-end; 178 | 179 | li { 180 | padding-left: 5rem; 181 | 182 | &:nth-child(4) { 183 | padding-right: 30px; 184 | } 185 | } 186 | } 187 | } 188 | 189 | #unique-item { 190 | height: 2.7rem; 191 | color: $primarycolor; 192 | border: 4px solid red; 193 | padding: 0.5rem; 194 | } 195 | 196 | .navbar-logo { 197 | display: block; 198 | padding-left: 3rem; 199 | } 200 | } 201 | -------------------------------------------------------------------------------- /sass/partials/_mobile-hotsellingbooks.scss: -------------------------------------------------------------------------------- 1 | .hotSellingBooks { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | margin-top: 50px; 6 | } 7 | 8 | .btn2 { 9 | padding: 40px 0; 10 | display: flex; 11 | align-self: center; 12 | justify-self: baseline; 13 | 14 | button { 15 | outline: none; 16 | height: 3rem; 17 | width: 85vw; 18 | background-color: white; 19 | border: 1px solid $bg-color; 20 | font-weight: 300; 21 | font-size: 20px; 22 | 23 | img { 24 | padding-left: 13px; 25 | padding-bottom: 2px; 26 | } 27 | } 28 | } 29 | 30 | .descriptionColor { 31 | color: $bg-color; 32 | } 33 | 34 | .shadow { 35 | box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.8); 36 | } 37 | 38 | .HotBooks { 39 | display: grid; 40 | grid-template-columns: 1fr; 41 | grid-template-rows: auto; 42 | padding: 10px 30px; 43 | grid-row-gap: 25px; 44 | } 45 | 46 | .Hotbook-holder { 47 | display: grid; 48 | grid-template-columns: 150px 1fr; 49 | place-items: center center; 50 | } 51 | 52 | .lineHeightHotSection { 53 | margin: auto auto; 54 | height: 1px; 55 | width: 4rem; 56 | margin-top: 0.5rem; 57 | margin-bottom: 2rem; 58 | } 59 | 60 | @media (min-width: 768px) { 61 | .hotSellingBooks { 62 | h3 { 63 | height: 5vh; 64 | } 65 | } 66 | 67 | #togglebutton { 68 | display: none; 69 | } 70 | 71 | .lineHeightHotSection { 72 | margin: auto auto; 73 | height: 1px; 74 | width: 4rem; 75 | margin-top: 0; 76 | margin-bottom: 2rem; 77 | } 78 | 79 | .Hotbook-holder { 80 | padding: 20px; 81 | } 82 | 83 | .HotBooks { 84 | display: grid; 85 | grid-template-columns: 1fr 1fr; 86 | grid-template-rows: auto; 87 | gap: 10px; 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /sass/partials/_typography-color.scss: -------------------------------------------------------------------------------- 1 | $bg-color: #272a31; 2 | $primarycolor: #ec5242; 3 | $color3: #d3d3d3; 4 | $color4: #f7f7f8; 5 | $color5: #4f4f4f; 6 | $rempad: 1rem; 7 | 8 | @import url('https://fonts.googleapis.com/css2?family=Lato&display=swap'); 9 | 10 | * { 11 | margin: 0; 12 | padding: 0; 13 | box-sizing: border-box; 14 | text-decoration: none; 15 | list-style: none; 16 | color: $bg-color; 17 | font-family: 'Lato', sans-serif; 18 | } 19 | 20 | .numberclass { 21 | font-family: 'Lato', sans-serif; 22 | font-weight: bolder !important; 23 | } 24 | 25 | .numberclasswthoutcolor { 26 | font-family: 'Lato', sans-serif; 27 | font-weight: bolder !important; 28 | color: #4f4f4f !important; 29 | } 30 | --------------------------------------------------------------------------------