├── .gitignore ├── LICENSE.md ├── assets ├── favicon.ico └── images │ ├── bat-ball.png │ ├── bike-palace.png │ ├── books-library.png │ ├── calculator.png │ ├── cuda-portfolio.png │ ├── dream-theme.png │ ├── facebook-login.png │ ├── fashion-ecommerce.png │ ├── football-club.png │ ├── hamburger-food.png │ ├── jamuna-news.png │ ├── macbook-cart.png │ ├── navigation-bar.png │ ├── personal-web.png │ ├── pomodoro-timer.png │ ├── portfolio.png │ ├── restaurant-menu.png │ ├── shopping-cart.png │ ├── simple-blog.png │ ├── spourmo-web.png │ ├── systematic-page.png │ ├── todo-list.png │ ├── weather-info.png │ └── youtube-ui.png ├── bat-ball ├── bat.png ├── index.html └── readme.md ├── bike-palace ├── images │ ├── app-store.png │ ├── awesomebike.jpg │ ├── bike-1.png │ ├── bike-2.png │ ├── bike-3.png │ ├── bike-4.jpg │ ├── bike.jpeg │ ├── faq.png │ ├── feature-bike.jpg │ ├── features-bg.jpg │ ├── harely-davidson-logo.ico │ ├── harely-davidson-logo.png │ ├── harley-1.jpg │ ├── harley-4.jpg │ ├── harley-5.jpg │ ├── harley-6.jpg │ ├── harley-header.jpg │ ├── harley-main.jpg │ ├── harley-main.png │ ├── header-bike.png │ ├── new-bike-1.jpg │ ├── new-bike-2.jpg │ ├── play-store.png │ ├── user-1.png │ ├── user-2.png │ └── user-3.png ├── index.html ├── readme.md └── style.css ├── books-library ├── index.html ├── readme.md └── script.js ├── calculator ├── index.html ├── readme.md ├── script.js └── style.css ├── cuda-portfolio ├── index.html ├── readme.md ├── resources │ ├── css │ │ ├── img │ │ │ ├── contact-bg.jpg │ │ │ ├── hero-bg.jpg │ │ │ ├── portfolio-bg.jpg │ │ │ ├── services-bg.jpg │ │ │ ├── skill-bg.jpg │ │ │ ├── team-bg.jpg │ │ │ └── testimonial-bg.jpg │ │ ├── responsive.css │ │ └── style.css │ ├── img │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── crayon.png │ │ ├── favicon.png │ │ ├── flag.png │ │ ├── gears.png │ │ ├── logo.png │ │ ├── portfolio1.png │ │ ├── portfolio2.png │ │ ├── portfolio3.png │ │ ├── portfolio4.png │ │ └── rocket.png │ └── js │ │ └── main.js └── vendors │ ├── css │ ├── animated-circle.css │ ├── grid.css │ └── normalize.css │ └── js │ ├── animated-circle.js │ ├── html5shiv.min.js │ ├── jquery.waypoints.min.js │ ├── mixitup.min.js │ ├── respond.min.js │ └── selectivizr-min.js ├── dream-theme ├── icon │ ├── feature-1.webp │ ├── feature-2.webp │ └── feature-3.webp ├── img │ ├── footer-logo.webp │ ├── hero-bg.jpg │ ├── logo.webp │ ├── pricing-bg.jpg │ ├── team-1.webp │ ├── team-2.webp │ ├── team-3.webp │ ├── team-4.webp │ └── video-bg.jpg ├── index.html ├── readme.md └── style.css ├── ecommerce-website ├── README.md ├── assests │ └── css │ │ ├── images │ │ ├── banner-1.jpg │ │ ├── banner-2.jpg │ │ ├── banner-3.jpg │ │ ├── blog-1.jpg │ │ ├── blog-2.jpg │ │ ├── blog-3.jpg │ │ ├── blog-4.jpg │ │ ├── cta-banner.jpg │ │ ├── electronics-banner-1.jpg │ │ ├── electronics-banner-2.jpg │ │ ├── icons │ │ ├── mens-banner.jpg │ │ ├── newsletter.png │ │ ├── payment.png │ │ ├── products │ │ │ ├── 1.jpg │ │ │ ├── 2.jpg │ │ │ ├── 3.jpg │ │ │ ├── 4.jpg │ │ │ ├── belt.jpg │ │ │ ├── clothes-1.jpg │ │ │ ├── clothes-2.jpg │ │ │ ├── clothes-3.jpg │ │ │ ├── clothes-4.jpg │ │ │ ├── jacket-1.jpg │ │ │ ├── jacket-2.jpg │ │ │ ├── jacket-3.jpg │ │ │ ├── jacket-4.jpg │ │ │ ├── jacket-5.jpg │ │ │ ├── jacket-6.jpg │ │ │ ├── jewellery-1.jpg │ │ │ ├── jewellery-2.jpg │ │ │ ├── jewellery-3.jpg │ │ │ ├── party-wear-1.jpg │ │ │ ├── party-wear-2.jpg │ │ │ ├── perfume.jpg │ │ │ ├── shampoo.jpg │ │ │ ├── shirt-1.jpg │ │ │ ├── shirt-2.jpg │ │ │ ├── shoe-1.jpg │ │ │ ├── shoe-1_1.jpg │ │ │ ├── shoe-2.jpg │ │ │ ├── shoe-2_1.jpg │ │ │ ├── shoe-3.jpg │ │ │ ├── shoe-4.jpg │ │ │ ├── shoe-5.jpg │ │ │ ├── shorts-1.jpg │ │ │ ├── shorts-2.jpg │ │ │ ├── sports-1.jpg │ │ │ ├── sports-2.jpg │ │ │ ├── sports-3.jpg │ │ │ ├── sports-4.jpg │ │ │ ├── sports-5.jpg │ │ │ ├── sports-6.jpg │ │ │ ├── watch-1.jpg │ │ │ ├── watch-2.jpg │ │ │ ├── watch-3.jpg │ │ │ └── watch-4.jpg │ │ ├── testimonial-1.jpg │ │ └── womens-banner.jpg │ │ ├── js │ │ └── script.js │ │ ├── style-prefix.css │ │ └── style.css └── index.html ├── facebook-login ├── favicon.ico ├── favicon │ └── favicon.ico ├── index.html ├── readme.md └── style.css ├── fashion-ecommerce ├── css │ ├── bootstrap.min.css │ └── style.css ├── images │ ├── PngItem_2597366 1.png │ ├── SeekPng 1.png │ ├── banner-images │ │ ├── 2.png │ │ ├── 6.png │ │ └── Mask Group.png │ ├── flag.webp │ ├── image 11.png │ ├── image 15.png │ ├── toppng 1.png │ └── vippng 1.png ├── index.html ├── js │ └── bootstrap.bundle.min.js ├── logo │ ├── Group 33071.png │ ├── Group 33072.png │ ├── Group 33091.png │ ├── Group 33102.png │ ├── XMLID 1.png │ ├── green.png │ ├── image 12.png │ ├── image 13.png │ ├── image 14.png │ └── shopping-cart 1.png └── readme.md ├── football-club ├── img │ ├── Logo.png │ ├── banner.png │ ├── best-bg.jpg │ ├── favicon.png │ ├── match.png │ ├── players │ │ ├── player-1.png │ │ ├── player-10.png │ │ ├── player-11.png │ │ ├── player-12.png │ │ ├── player-2.png │ │ ├── player-3.png │ │ ├── player-4.png │ │ ├── player-5.png │ │ ├── player-6.png │ │ ├── player-7.png │ │ ├── player-8.png │ │ └── player-9.png │ ├── policy-1.jpg │ └── policy-2.jpg ├── index.html ├── readme.md └── style.css ├── hamburger-food ├── README.md ├── favicon.png ├── images │ ├── about-team.png │ ├── about-us.png │ ├── burger-recipie0-min.jpg │ ├── burger-recipie1-min.jpg │ ├── burger-recipie3-min.jpg │ ├── burger.jpg │ ├── easy-order.jpg │ ├── fdelivery.jpg │ ├── frame4.jpg │ ├── logo.png │ └── quality.jpg ├── index.html └── style.css ├── index.html ├── jamuna-news ├── css │ ├── bootstrap.min.css │ └── style.css ├── images │ ├── 0.jpg │ ├── 1.jpg │ ├── 11.jpg │ ├── 111.jpg │ ├── 112.jpg │ ├── 113.jpg │ ├── 114.jpg │ ├── 115.jpg │ ├── 116.jpg │ ├── 117.jpg │ ├── 118.jpg │ ├── 119.jpg │ ├── 120.jpg │ ├── 121.jpg │ ├── 122.jpg │ ├── 123.jpg │ ├── 124.jpg │ ├── 125.jpg │ ├── 126.jpg │ ├── 127.jpg │ ├── 128.jpg │ ├── 129.jpg │ ├── 130.jpg │ ├── 2.jpg │ ├── 22.jpg │ ├── 3.jpg │ ├── 33.jpg │ ├── 4.jpg │ ├── 44.jpg │ ├── 5.jpg │ ├── 55.jpg │ ├── 6.jpg │ ├── 7.jpg │ ├── 8.jpg │ ├── add.gif │ ├── logo.png │ └── mujib.jpg ├── index.html ├── js │ └── bootstrap.bundle.min.js └── readme.md ├── macbook-cart ├── img │ ├── favicon.png │ ├── mac-book-1.jfif │ └── mac-book-2.jfif ├── index.html ├── js │ └── script.js └── readme.md ├── navigation-bar ├── bg.jpg ├── index.html ├── readme.md └── style.css ├── personal-website ├── icons │ ├── Group 33059.png │ ├── image 6.png │ └── image 7.png ├── img │ ├── bg1.png │ ├── img1.png │ ├── img2.png │ ├── img3.png │ ├── profile1.png │ └── profile2.png ├── index.html ├── readme.md └── style.css ├── pomodoro-timer ├── index.html ├── script.js └── style.css ├── portfolio ├── images │ └── alsiam.jpg ├── index.html ├── package.json ├── readme.md ├── style.css ├── styles │ ├── input.css │ └── output.css ├── tailwind.config.js └── yarn.lock ├── projects.js ├── readme.md ├── restaurant-menu ├── api.js ├── index.html └── readme.md ├── script.js ├── simple-blog ├── about.html ├── contact.html ├── features.html ├── images │ ├── ad22.jpg │ ├── code.jpg │ ├── coding.jpg │ ├── contact.jpg │ ├── design.jpg │ ├── logo.jpg │ ├── nemo.jpg │ ├── siam.jpg │ ├── toystory.jpg │ ├── up.jpg │ └── walle.jpg ├── index.html ├── portfolio.html ├── post.html ├── readme.md ├── responsive.css └── style.css ├── simple-cart ├── css │ └── style.css ├── index.html ├── js │ └── app.js └── readme.md ├── spourmo-web ├── img │ ├── 100x100.png │ └── 480x300.png ├── index.html ├── readme.md └── style.css ├── style.css ├── systematic-page ├── img │ ├── headImg.png │ ├── second.png │ └── third.png ├── index.html ├── readme.md └── style.css ├── tailwind.config.js ├── todo-list ├── index.html ├── readme.md └── todo.js ├── travel_portfolio ├── about.html ├── blog.html ├── contact.html ├── css │ ├── normalize.css │ ├── responsive.css │ ├── style.css │ └── utility.css ├── font │ └── fonts.css ├── gallery.html ├── index.html └── js │ └── script.js ├── weather-info ├── api.js ├── images │ └── bg-image.jpg ├── index.html └── readme.md └── youtube-ui ├── assets ├── alsiam.png └── youtube.webp ├── index.html ├── readme.md └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | idea.md 15 | 16 | # Editor directories and files 17 | .vscode/* 18 | !.vscode/extensions.json 19 | .idea 20 | .DS_Store 21 | *.suo 22 | *.ntvs* 23 | *.njsproj 24 | *.sln 25 | *.sw? 26 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Saif Al Siam 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software 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. 22 | -------------------------------------------------------------------------------- /assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/assets/favicon.ico -------------------------------------------------------------------------------- /assets/images/bat-ball.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/assets/images/bat-ball.png -------------------------------------------------------------------------------- /assets/images/bike-palace.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/assets/images/bike-palace.png -------------------------------------------------------------------------------- /assets/images/books-library.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/assets/images/books-library.png -------------------------------------------------------------------------------- /assets/images/calculator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/assets/images/calculator.png -------------------------------------------------------------------------------- /assets/images/cuda-portfolio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/assets/images/cuda-portfolio.png -------------------------------------------------------------------------------- /assets/images/dream-theme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/assets/images/dream-theme.png -------------------------------------------------------------------------------- /assets/images/facebook-login.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/assets/images/facebook-login.png -------------------------------------------------------------------------------- /assets/images/fashion-ecommerce.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/assets/images/fashion-ecommerce.png -------------------------------------------------------------------------------- /assets/images/football-club.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/assets/images/football-club.png -------------------------------------------------------------------------------- /assets/images/hamburger-food.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/assets/images/hamburger-food.png -------------------------------------------------------------------------------- /assets/images/jamuna-news.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/assets/images/jamuna-news.png -------------------------------------------------------------------------------- /assets/images/macbook-cart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/assets/images/macbook-cart.png -------------------------------------------------------------------------------- /assets/images/navigation-bar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/assets/images/navigation-bar.png -------------------------------------------------------------------------------- /assets/images/personal-web.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/assets/images/personal-web.png -------------------------------------------------------------------------------- /assets/images/pomodoro-timer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/assets/images/pomodoro-timer.png -------------------------------------------------------------------------------- /assets/images/portfolio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/assets/images/portfolio.png -------------------------------------------------------------------------------- /assets/images/restaurant-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/assets/images/restaurant-menu.png -------------------------------------------------------------------------------- /assets/images/shopping-cart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/assets/images/shopping-cart.png -------------------------------------------------------------------------------- /assets/images/simple-blog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/assets/images/simple-blog.png -------------------------------------------------------------------------------- /assets/images/spourmo-web.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/assets/images/spourmo-web.png -------------------------------------------------------------------------------- /assets/images/systematic-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/assets/images/systematic-page.png -------------------------------------------------------------------------------- /assets/images/todo-list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/assets/images/todo-list.png -------------------------------------------------------------------------------- /assets/images/weather-info.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/assets/images/weather-info.png -------------------------------------------------------------------------------- /assets/images/youtube-ui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/assets/images/youtube-ui.png -------------------------------------------------------------------------------- /bat-ball/bat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/bat-ball/bat.png -------------------------------------------------------------------------------- /bat-ball/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Bal Ball 8 | 52 | 53 | 54 |
55 | 56 |
57 |
58 | 59 | -------------------------------------------------------------------------------- /bat-ball/readme.md: -------------------------------------------------------------------------------- 1 | # Bat Ball - animation 2 | 3 | # [Preview the site](https://alsiam.github.io/web-projects/bat-ball) 4 | 5 | ![image info](../assets/images/bat-ball.png) -------------------------------------------------------------------------------- /bike-palace/images/app-store.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/bike-palace/images/app-store.png -------------------------------------------------------------------------------- /bike-palace/images/awesomebike.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/bike-palace/images/awesomebike.jpg -------------------------------------------------------------------------------- /bike-palace/images/bike-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/bike-palace/images/bike-1.png -------------------------------------------------------------------------------- /bike-palace/images/bike-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/bike-palace/images/bike-2.png -------------------------------------------------------------------------------- /bike-palace/images/bike-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/bike-palace/images/bike-3.png -------------------------------------------------------------------------------- /bike-palace/images/bike-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/bike-palace/images/bike-4.jpg -------------------------------------------------------------------------------- /bike-palace/images/bike.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/bike-palace/images/bike.jpeg -------------------------------------------------------------------------------- /bike-palace/images/faq.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/bike-palace/images/faq.png -------------------------------------------------------------------------------- /bike-palace/images/feature-bike.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/bike-palace/images/feature-bike.jpg -------------------------------------------------------------------------------- /bike-palace/images/features-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/bike-palace/images/features-bg.jpg -------------------------------------------------------------------------------- /bike-palace/images/harely-davidson-logo.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/bike-palace/images/harely-davidson-logo.ico -------------------------------------------------------------------------------- /bike-palace/images/harely-davidson-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/bike-palace/images/harely-davidson-logo.png -------------------------------------------------------------------------------- /bike-palace/images/harley-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/bike-palace/images/harley-1.jpg -------------------------------------------------------------------------------- /bike-palace/images/harley-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/bike-palace/images/harley-4.jpg -------------------------------------------------------------------------------- /bike-palace/images/harley-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/bike-palace/images/harley-5.jpg -------------------------------------------------------------------------------- /bike-palace/images/harley-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/bike-palace/images/harley-6.jpg -------------------------------------------------------------------------------- /bike-palace/images/harley-header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/bike-palace/images/harley-header.jpg -------------------------------------------------------------------------------- /bike-palace/images/harley-main.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/bike-palace/images/harley-main.jpg -------------------------------------------------------------------------------- /bike-palace/images/harley-main.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/bike-palace/images/harley-main.png -------------------------------------------------------------------------------- /bike-palace/images/header-bike.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/bike-palace/images/header-bike.png -------------------------------------------------------------------------------- /bike-palace/images/new-bike-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/bike-palace/images/new-bike-1.jpg -------------------------------------------------------------------------------- /bike-palace/images/new-bike-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/bike-palace/images/new-bike-2.jpg -------------------------------------------------------------------------------- /bike-palace/images/play-store.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/bike-palace/images/play-store.png -------------------------------------------------------------------------------- /bike-palace/images/user-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/bike-palace/images/user-1.png -------------------------------------------------------------------------------- /bike-palace/images/user-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/bike-palace/images/user-2.png -------------------------------------------------------------------------------- /bike-palace/images/user-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/bike-palace/images/user-3.png -------------------------------------------------------------------------------- /bike-palace/readme.md: -------------------------------------------------------------------------------- 1 | # Bike Palace 2 | 3 | # [Preview the site](https://alsiam.github.io/web-projects/bike-palace) 4 | 5 | ![image info](../assets/images/bike-palace.png) -------------------------------------------------------------------------------- /bike-palace/style.css: -------------------------------------------------------------------------------- 1 | 2 | *{margin: 0;padding: 0;} 3 | body{ 4 | font-family: 'Poppins', sans-serif; 5 | } 6 | .back-top{ 7 | position: fixed; 8 | bottom: 15px; 9 | right: 15px; 10 | font-size: 25px;width: 40px ;height: 40px; 11 | background-color: #333; 12 | color: #ddd; 13 | border-radius: 50%;text-align: center; 14 | } 15 | .logo-text{ 16 | font-size: 40px; 17 | font-family: 'Berkshire Swash',cursive; 18 | } 19 | .logo-dot{ 20 | font-size: 40px; 21 | margin-left: 3px; 22 | color: #4eda4e; 23 | } 24 | .primary-color{ 25 | background-color: #333; 26 | } 27 | .single-shop{ 28 | background-color: #555; 29 | } 30 | 31 | img{ 32 | transition: .5s; 33 | } 34 | img:hover{ 35 | transform: scale(1.05); 36 | } 37 | 38 | .client-section{ 39 | background-color: #333; 40 | } 41 | .single-card { 42 | background-color: #555; 43 | } 44 | #features{ 45 | background-image: url(images/features-bg.jpg); 46 | } 47 | .slider-img { 48 | height: 85vh; 49 | background-image: url(images/awesomebike.jpg); 50 | background-repeat: no-repeat; 51 | background-size: cover; 52 | background-position: left; 53 | } 54 | .slide-wrap{ 55 | width: 60%;; 56 | } 57 | .slide-details{ 58 | color: #ddd 59 | } 60 | .about-harley-box{ 61 | background-color: #0D0925; 62 | } 63 | .frequent-box{ 64 | background-color: #222; 65 | } 66 | /* ---------------- */ 67 | a { 68 | color: #ddd; 69 | text-decoration: none; 70 | display: block; 71 | } 72 | 73 | h1 { 74 | color: #0D0925; 75 | } 76 | 77 | p { 78 | color: #6C6C6C; 79 | } 80 | 81 | .btn:focus, 82 | .form-control:focus { 83 | outline: none; 84 | box-shadow: none; 85 | } 86 | 87 | .small-border-p::after, 88 | .small-border::after { 89 | content: ""; 90 | background-color: rgba(231, 111, 81, 0.5); 91 | width: 100px; 92 | height: 2px; 93 | position: absolute; 94 | top: 110px; 95 | left: 0; 96 | right: 0; 97 | margin: auto; 98 | } 99 | 100 | .small-border-p::after { 101 | top: 30px; 102 | } 103 | 104 | .text-color { 105 | color: #E76F51; 106 | } 107 | 108 | .text-second { 109 | color: #264653; 110 | } 111 | 112 | .bg-main { 113 | background-color: #E76F51; 114 | } 115 | 116 | .bg-gray { 117 | background-color: rgba(128, 128, 128, 0.2); 118 | } -------------------------------------------------------------------------------- /books-library/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Biggest Books Library by AL Siam 9 | 10 | 12 | 17 | 18 | 19 | 20 | 21 |
22 |
23 |

Search Your Favourite Books

24 |
25 | 27 | 29 |
30 | 31 | 32 | 35 | 36 | 37 |
38 | 39 | 40 |
41 | 42 | 44 |
45 |
46 |
47 | 48 |
49 |
50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /books-library/readme.md: -------------------------------------------------------------------------------- 1 | # Books Library - Search 2 | 3 | # [Preview the site](https://alsiam.github.io/web-projects/books-library) 4 | 5 | ![image info](../assets/images/books-library.png) -------------------------------------------------------------------------------- /books-library/script.js: -------------------------------------------------------------------------------- 1 | // Global Variable for using multiple Times 2 | const errorMessage = document.getElementById('error-message'); 3 | const totalFound = document.getElementById('total-found'); 4 | const searchResult = document.getElementById('search-result'); 5 | 6 | 7 | //loading spinner function 8 | const loadingDisplay = display => { 9 | document.getElementById('loading').style.display = display; 10 | } 11 | const searchResultDisplay = display => { 12 | document.getElementById('search-result').style.display = display; 13 | } 14 | 15 | 16 | const loadData = () => { 17 | // input value 18 | const inputValue = document.getElementById('search-field'); 19 | 20 | const loading = document.getElementById('loading'); 21 | // error 22 | if (inputValue.value == '') { 23 | 24 | totalFound.innerHTML = ''; 25 | errorMessage.innerHTML = ` 26 | Please, Input a Valid Book Name..! 27 | `; 28 | searchResult.innerHTML = ''; 29 | 30 | } else { 31 | 32 | // display spiner 33 | loadingDisplay('block'); 34 | searchResultDisplay('none') 35 | 36 | 37 | // Loading data 38 | const url = `https://openlibrary.org/search.json?q=${inputValue.value}`; 39 | fetch(url) 40 | .then(res => res.json()) 41 | .then(data => displayData(data)) 42 | .catch(error => { 43 | errorMessage.innerHTML = ` 44 | Cound't Get Data API Error 45 | `; 46 | 47 | loadingDisplay('none'); 48 | }); 49 | 50 | // clear error message 51 | errorMessage.innerHTML = ''; 52 | 53 | } 54 | // clear input value 55 | inputValue.value = ''; 56 | totalFound.innerHTML = ''; 57 | 58 | 59 | } 60 | const displayData = (books) => { 61 | 62 | 63 | 64 | // search found 65 | totalFound.innerHTML = ` 66 | 67 | About ${books.numFound} Results Found Searching '${books.q}' keyword 68 | 69 | `; 70 | // No result found Message 71 | if (books.numFound === 0) { 72 | errorMessage.innerText = `No Result's Found !`; 73 | loadingDisplay('none'); 74 | totalFound.innerHTML = ''; 75 | } 76 | 77 | // All About Search Result 78 | const minBooks = books.docs; 79 | console.log(minBooks); 80 | searchResult.innerHTML = ''; 81 | 82 | minBooks.forEach(book => { 83 | const div = document.createElement('div'); 84 | div.classList.add('col'); 85 | 86 | // Getting Details 87 | let cover = book.cover_i; 88 | let title = book.title.slice(0, 10); 89 | let author = book.author_name; 90 | let publisher = book.publisher; 91 | let publishYear = book.first_publish_year; 92 | 93 | div.innerHTML = ` 94 |
95 |
96 |
97 | ${title ? title : 103 |
104 |
105 |
106 |

${title === undefined ? 'Unknown' : title}

107 |
108 |

Author : ${author === undefined ? 'Unknown' : author[0]}

109 |

Publisher : ${publisher === undefined ? 'Unknown' : publisher[0]}

110 | 111 |

112 | First Published : ${publishYear === undefined ? 'Unknown' : publishYear} 113 |

114 |
115 |
116 |
117 |
118 | `; 119 | searchResult.appendChild(div); 120 | // display spiner 121 | loadingDisplay('none'); 122 | searchResultDisplay('flex') 123 | }); 124 | 125 | 126 | 127 | 128 | } -------------------------------------------------------------------------------- /calculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Simple JS Calculator - AlSiamWorld 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | 16 | 17 | 18 | 19 |
20 |
21 | 22 | 23 | 24 | 25 |
26 |
27 | 28 | 29 | 30 | 31 |
32 |
33 | 34 | 35 | 36 | 37 |
38 |
39 | 40 | 41 | 42 | 43 |
44 |
45 |
46 |
47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /calculator/readme.md: -------------------------------------------------------------------------------- 1 | # Calculator 2 | 3 | # [Preview the site](https://alsiam.github.io/web-projects/calculator) 4 | 5 | ![image info](../assets/images/calculator.png) -------------------------------------------------------------------------------- /calculator/script.js: -------------------------------------------------------------------------------- 1 | const buttons = document.querySelectorAll('button'); 2 | const display = document.querySelector('.display'); 3 | 4 | buttons.forEach(function (button) { 5 | button.addEventListener('click', calculate); 6 | }); 7 | 8 | function calculate(event) { 9 | const clickedButtonValue = event.target.value; 10 | 11 | if (clickedButtonValue === '=') { 12 | if (display.value !== '') { 13 | display.value = eval(display.value); 14 | } 15 | } else if (clickedButtonValue === 'C') { 16 | display.value = ''; 17 | } else { 18 | display.value += clickedButtonValue; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /calculator/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | body { 7 | width: 100vw; 8 | height: 100vh; 9 | overflow: hidden; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | background-color: #222831; 14 | font-family: sans-serif; 15 | } 16 | 17 | .calculator { 18 | width: 300px; 19 | padding-bottom: 15px; 20 | border-radius: 7px; 21 | background-color: #000; 22 | box-shadow: 5px 8px 8px -2px rgba(0, 0, 0, 0.61); 23 | } 24 | 25 | .display { 26 | width: 100%; 27 | height: 80px; 28 | border: none; 29 | color: #222; 30 | font-weight: bold; 31 | box-sizing: border-box; 32 | padding: 10px; 33 | font-size: 2rem; 34 | background-color: #d9ff00; 35 | text-align: right; 36 | border-top-left-radius: 7px; 37 | border-top-right-radius: 7px; 38 | } 39 | 40 | .row { 41 | display: flex; 42 | justify-content: space-between; 43 | } 44 | 45 | button { 46 | width: 50px; 47 | height: 50px; 48 | border-radius: 50%; 49 | border: none; 50 | outline: none; 51 | font-size: 1.5rem; 52 | background-color: #222; 53 | color: #fff; 54 | margin: 10px; 55 | } 56 | 57 | button:hover { 58 | cursor: pointer; 59 | } 60 | 61 | .operator { 62 | background-color: #d9ff00; 63 | color: #000; 64 | font-size: 35px; 65 | } -------------------------------------------------------------------------------- /cuda-portfolio/readme.md: -------------------------------------------------------------------------------- 1 | # Cuda Portfolio 2 | 3 | # [Preview the site](https://alsiam.github.io/web-projects/cuda-portfolio) 4 | 5 | ![image info](../assets/images/cuda-portfolio.png) -------------------------------------------------------------------------------- /cuda-portfolio/resources/css/img/contact-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/cuda-portfolio/resources/css/img/contact-bg.jpg -------------------------------------------------------------------------------- /cuda-portfolio/resources/css/img/hero-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/cuda-portfolio/resources/css/img/hero-bg.jpg -------------------------------------------------------------------------------- /cuda-portfolio/resources/css/img/portfolio-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/cuda-portfolio/resources/css/img/portfolio-bg.jpg -------------------------------------------------------------------------------- /cuda-portfolio/resources/css/img/services-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/cuda-portfolio/resources/css/img/services-bg.jpg -------------------------------------------------------------------------------- /cuda-portfolio/resources/css/img/skill-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/cuda-portfolio/resources/css/img/skill-bg.jpg -------------------------------------------------------------------------------- /cuda-portfolio/resources/css/img/team-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/cuda-portfolio/resources/css/img/team-bg.jpg -------------------------------------------------------------------------------- /cuda-portfolio/resources/css/img/testimonial-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/cuda-portfolio/resources/css/img/testimonial-bg.jpg -------------------------------------------------------------------------------- /cuda-portfolio/resources/css/responsive.css: -------------------------------------------------------------------------------- 1 | @media only screen and (max-width: 1200px) 2 | { 3 | header{ 4 | height: 65vh; 5 | } 6 | } 7 | @media only screen and (max-width: 1024px) 8 | { 9 | header{ 10 | height: 55vh; 11 | } 12 | .row{ 13 | margin: 0 1.5rem; 14 | } 15 | .hero-text-box{ 16 | width: 90%; 17 | } 18 | .main-nav{ 19 | display: none; 20 | } 21 | html{ 22 | font-size: 57.5%; 23 | } 24 | .client-photo{ 25 | width: 100%; 26 | float: none; 27 | text-align: center; 28 | } 29 | .client-review{ 30 | width: 100%; 31 | float: none; 32 | text-align: center; 33 | } 34 | .contact-section form{ 35 | width: 100%; 36 | margin: 0; 37 | } 38 | } 39 | 40 | @media only screen and (max-width: 980px) 41 | { 42 | .span_1_of_4{ 43 | width: 49.2%; 44 | } 45 | .span_1_of_4:nth-child(3){ 46 | margin-left: 0; 47 | } 48 | html{ 49 | font-size: 62.5%; 50 | } 51 | .span_1_of_2:nth-child(3){ 52 | margin-left: 0; 53 | } 54 | } 55 | 56 | @media only screen and (max-width: 768px) 57 | { 58 | .little-description{ 59 | width: 100%; 60 | margin-left: 0; 61 | } 62 | h1{ 63 | font-size: 3.5rem; 64 | } 65 | h2{ 66 | font-size: 3rem; 67 | } 68 | h3{ 69 | font-size: 2.1rem; 70 | } 71 | } 72 | @media only screen and (max-width: 480px) 73 | { 74 | header{ 75 | height: 75vh; 76 | } 77 | .span_1_of_4{ 78 | width: 100%; 79 | } 80 | h1{ 81 | font-size: 3rem; 82 | } 83 | h2{ 84 | font-size: 2.5rem; 85 | } 86 | h3{ 87 | font-size: 2rem; 88 | } 89 | .little-description{ 90 | font-size: 1.6rem; 91 | } 92 | .footer-section li a { 93 | font-size: 2rem; 94 | } 95 | .portfolio-filter button:last-child{ 96 | margin-top: 3px; 97 | } 98 | 99 | } -------------------------------------------------------------------------------- /cuda-portfolio/resources/img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/cuda-portfolio/resources/img/1.jpg -------------------------------------------------------------------------------- /cuda-portfolio/resources/img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/cuda-portfolio/resources/img/2.jpg -------------------------------------------------------------------------------- /cuda-portfolio/resources/img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/cuda-portfolio/resources/img/3.jpg -------------------------------------------------------------------------------- /cuda-portfolio/resources/img/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/cuda-portfolio/resources/img/4.jpg -------------------------------------------------------------------------------- /cuda-portfolio/resources/img/crayon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/cuda-portfolio/resources/img/crayon.png -------------------------------------------------------------------------------- /cuda-portfolio/resources/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/cuda-portfolio/resources/img/favicon.png -------------------------------------------------------------------------------- /cuda-portfolio/resources/img/flag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/cuda-portfolio/resources/img/flag.png -------------------------------------------------------------------------------- /cuda-portfolio/resources/img/gears.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/cuda-portfolio/resources/img/gears.png -------------------------------------------------------------------------------- /cuda-portfolio/resources/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/cuda-portfolio/resources/img/logo.png -------------------------------------------------------------------------------- /cuda-portfolio/resources/img/portfolio1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/cuda-portfolio/resources/img/portfolio1.png -------------------------------------------------------------------------------- /cuda-portfolio/resources/img/portfolio2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/cuda-portfolio/resources/img/portfolio2.png -------------------------------------------------------------------------------- /cuda-portfolio/resources/img/portfolio3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/cuda-portfolio/resources/img/portfolio3.png -------------------------------------------------------------------------------- /cuda-portfolio/resources/img/portfolio4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/cuda-portfolio/resources/img/portfolio4.png -------------------------------------------------------------------------------- /cuda-portfolio/resources/img/rocket.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/cuda-portfolio/resources/img/rocket.png -------------------------------------------------------------------------------- /cuda-portfolio/resources/js/main.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | 3 | //Sticky Menu 4 | $(".js-sticky-section").waypoint(function(direction){ 5 | if(direction == "down"){ 6 | $("nav").addClass("sticky"); 7 | } else{ 8 | $("nav").removeClass("sticky"); 9 | } 10 | }); 11 | 12 | 13 | // MIxITUP 14 | var mixer= mixitup('.container'); 15 | }); -------------------------------------------------------------------------------- /cuda-portfolio/vendors/css/animated-circle.css: -------------------------------------------------------------------------------- 1 | svg.radial-progress { 2 | height: auto; 3 | max-width: 200px; 4 | padding: 1em; 5 | transform: rotate(-90deg); 6 | width: 100%; 7 | } 8 | 9 | svg.radial-progress circle { 10 | fill: rgba(0,0,0,0); 11 | stroke: #fff; 12 | stroke-dashoffset: 219.91148575129; 13 | stroke-width: 10; 14 | } 15 | 16 | svg.radial-progress circle.incomplete { opacity: 0.25; } 17 | 18 | svg.radial-progress circle.complete { stroke-dasharray: 219.91148575129; } 19 | 20 | svg.radial-progress text { 21 | fill: #fff; 22 | text-anchor: middle; 23 | } -------------------------------------------------------------------------------- /cuda-portfolio/vendors/css/grid.css: -------------------------------------------------------------------------------- 1 | 2 | /* SECTIONS ============================================================================= */ 3 | 4 | .section { 5 | clear: both; 6 | padding: 0px; 7 | margin: 0px; 8 | } 9 | 10 | /* GROUPING ============================================================================= */ 11 | 12 | 13 | .row:before, 14 | .row:after { 15 | content:""; 16 | display:table; 17 | } 18 | .row:after { 19 | clear:both; 20 | } 21 | .row { 22 | zoom:1; /* For IE 6/7 (trigger hasLayout) */ 23 | } 24 | 25 | /* GRID COLUMN SETUP ==================================================================== */ 26 | 27 | .col { 28 | display: block; 29 | float:left; 30 | margin: 1% 0 1% 1.6%; 31 | } 32 | 33 | .col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */ 34 | 35 | 36 | /* REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */ 37 | 38 | @media only screen and (max-width: 480px) { 39 | .col { 40 | margin: 1% 0 1% 0%; 41 | } 42 | } 43 | /* GRID OF TWO ============================================================================= */ 44 | 45 | 46 | .span_2_of_2 { 47 | width: 100%; 48 | } 49 | 50 | .span_1_of_2 { 51 | width: 49.2%; 52 | } 53 | 54 | /* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 55 | 56 | @media only screen and (max-width: 480px) { 57 | .span_2_of_2 { 58 | width: 100%; 59 | } 60 | .span_1_of_2 { 61 | width: 100%; 62 | } 63 | } 64 | /* GRID OF THREE ============================================================================= */ 65 | 66 | 67 | .span_3_of_3 { 68 | width: 100%; 69 | } 70 | 71 | .span_2_of_3 { 72 | width: 66.13%; 73 | } 74 | 75 | .span_1_of_3 { 76 | width: 32.26%; 77 | } 78 | 79 | 80 | /* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 81 | 82 | @media only screen and (max-width: 480px) { 83 | .span_3_of_3 { 84 | width: 100%; 85 | } 86 | .span_2_of_3 { 87 | width: 100%; 88 | } 89 | .span_1_of_3 { 90 | width: 100%; 91 | } 92 | } 93 | /* GRID OF FOUR ============================================================================= */ 94 | 95 | 96 | .span_4_of_4 { 97 | width: 100%; 98 | } 99 | 100 | .span_3_of_4 { 101 | width: 74.6%; 102 | } 103 | 104 | .span_2_of_4 { 105 | width: 49.2%; 106 | } 107 | 108 | .span_1_of_4 { 109 | width: 23.8%; 110 | } 111 | 112 | 113 | /* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 114 | 115 | @media only screen and (max-width: 480px) { 116 | .span_4_of_4 { 117 | width: 100%; 118 | } 119 | .span_3_of_4 { 120 | width: 100%; 121 | } 122 | .span_2_of_4 { 123 | width: 100%; 124 | } 125 | .span_1_of_4 { 126 | width: 100%; 127 | } 128 | } 129 | /* GRID OF FIVE ============================================================================= */ 130 | 131 | 132 | .span_5_of_5 { 133 | width: 100%; 134 | } 135 | 136 | .span_4_of_5 { 137 | width: 79.68%; 138 | } 139 | 140 | .span_3_of_5 { 141 | width: 59.36%; 142 | } 143 | 144 | .span_2_of_5 { 145 | width: 39.04%; 146 | } 147 | 148 | .span_1_of_5 { 149 | width: 18.72%; 150 | } 151 | 152 | 153 | /* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 154 | 155 | @media only screen and (max-width: 480px) { 156 | .span_5_of_5 { 157 | width: 100%; 158 | } 159 | .span_4_of_5 { 160 | width: 100%; 161 | } 162 | .span_3_of_5 { 163 | width: 100%; 164 | } 165 | .span_2_of_5 { 166 | width: 100%; 167 | } 168 | .span_1_of_5 { 169 | width: 100%; 170 | } 171 | } -------------------------------------------------------------------------------- /cuda-portfolio/vendors/js/animated-circle.js: -------------------------------------------------------------------------------- 1 | $('svg.radial-progress').each(function( index, value ) { 2 | $(this).find($('circle.complete')).removeAttr( 'style' ); 3 | }); 4 | $(window).scroll(function(){ 5 | $('svg.radial-progress').each(function( index, value ) { 6 | // If svg.radial-progress is approximately 25% vertically into the window when scrolling from the top or the bottom 7 | if ( 8 | $(window).scrollTop() > $(this).offset().top - ($(window).height() * 0.75) && 9 | $(window).scrollTop() < $(this).offset().top + $(this).height() - ($(window).height() * 0.25) 10 | ) { 11 | // Get percentage of progress 12 | percent = $(value).data('percentage'); 13 | // Get radius of the svg's circle.complete 14 | radius = $(this).find($('circle.complete')).attr('r'); 15 | // Get circumference (2πr) 16 | circumference = 2 * Math.PI * radius; 17 | // Get stroke-dashoffset value based on the percentage of the circumference 18 | strokeDashOffset = circumference - ((percent * circumference) / 100); 19 | // Transition progress for 1.25 seconds 20 | $(this).find($('circle.complete')).animate({'stroke-dashoffset': strokeDashOffset}, 1250); 21 | } 22 | }); 23 | }).trigger('scroll'); -------------------------------------------------------------------------------- /cuda-portfolio/vendors/js/html5shiv.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @preserve HTML5 Shiv 3.7.3 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed 3 | */ 4 | !function(a,b){function c(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function d(){var a=t.elements;return"string"==typeof a?a.split(" "):a}function e(a,b){var c=t.elements;"string"!=typeof c&&(c=c.join(" ")),"string"!=typeof a&&(a=a.join(" ")),t.elements=c+" "+a,j(b)}function f(a){var b=s[a[q]];return b||(b={},r++,a[q]=r,s[r]=b),b}function g(a,c,d){if(c||(c=b),l)return c.createElement(a);d||(d=f(c));var e;return e=d.cache[a]?d.cache[a].cloneNode():p.test(a)?(d.cache[a]=d.createElem(a)).cloneNode():d.createElem(a),!e.canHaveChildren||o.test(a)||e.tagUrn?e:d.frag.appendChild(e)}function h(a,c){if(a||(a=b),l)return a.createDocumentFragment();c=c||f(a);for(var e=c.frag.cloneNode(),g=0,h=d(),i=h.length;i>g;g++)e.createElement(h[g]);return e}function i(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return t.shivMethods?g(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+d().join().replace(/[\w\-:]+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(t,b.frag)}function j(a){a||(a=b);var d=f(a);return!t.shivCSS||k||d.hasCSS||(d.hasCSS=!!c(a,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),l||i(a,d),a}var k,l,m="3.7.3",n=a.html5||{},o=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,p=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,q="_html5shiv",r=0,s={};!function(){try{var a=b.createElement("a");a.innerHTML="",k="hidden"in a,l=1==a.childNodes.length||function(){b.createElement("a");var a=b.createDocumentFragment();return"undefined"==typeof a.cloneNode||"undefined"==typeof a.createDocumentFragment||"undefined"==typeof a.createElement}()}catch(c){k=!0,l=!0}}();var t={elements:n.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video",version:m,shivCSS:n.shivCSS!==!1,supportsUnknownElements:l,shivMethods:n.shivMethods!==!1,type:"default",shivDocument:j,createElement:g,createDocumentFragment:h,addElements:e};a.html5=t,j(b),"object"==typeof module&&module.exports&&(module.exports=t)}("undefined"!=typeof window?window:this,document); -------------------------------------------------------------------------------- /cuda-portfolio/vendors/js/respond.min.js: -------------------------------------------------------------------------------- 1 | /*! Respond.js v1.4.2: min/max-width media query polyfill 2 | * Copyright 2014 Scott Jehl 3 | * Licensed under MIT 4 | * https://j.mp/respondjs */ 5 | 6 | !function(a){"use strict";a.matchMedia=a.matchMedia||function(a){var b,c=a.documentElement,d=c.firstElementChild||c.firstChild,e=a.createElement("body"),f=a.createElement("div");return f.id="mq-test-1",f.style.cssText="position:absolute;top:-100em",e.style.background="none",e.appendChild(f),function(a){return f.innerHTML='­',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{matches:b,media:a}}}(a.document)}(this),function(a){"use strict";function b(){v(!0)}var c={};a.respond=c,c.update=function(){};var d=[],e=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}(),f=function(a,b){var c=e();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))},g=function(a){return a.replace(c.regex.minmaxwh,"").match(c.regex.other)};if(c.ajax=f,c.queue=d,c.unsupportedmq=g,c.regex={media:/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,keyframes:/@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,comments:/\/\*[^*]*\*+([^/][^*]*\*+)*\//gi,urls:/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,findStyles:/@media *([^\{]+)\{([\S\s]+?)$/,only:/(only\s+)?([a-zA-Z]+)\s?/,minw:/\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,maxw:/\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,minmaxwh:/\(\s*m(in|ax)\-(height|width)\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/gi,other:/\([^\)]*\)/g},c.mediaQueriesSupported=a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,!c.mediaQueriesSupported){var h,i,j,k=a.document,l=k.documentElement,m=[],n=[],o=[],p={},q=30,r=k.getElementsByTagName("head")[0]||l,s=k.getElementsByTagName("base")[0],t=r.getElementsByTagName("link"),u=function(){var a,b=k.createElement("div"),c=k.body,d=l.style.fontSize,e=c&&c.style.fontSize,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",c||(c=f=k.createElement("body"),c.style.background="none"),l.style.fontSize="100%",c.style.fontSize="100%",c.appendChild(b),f&&l.insertBefore(c,l.firstChild),a=b.offsetWidth,f?l.removeChild(c):c.removeChild(b),l.style.fontSize=d,e&&(c.style.fontSize=e),a=j=parseFloat(a)},v=function(b){var c="clientWidth",d=l[c],e="CSS1Compat"===k.compatMode&&d||k.body[c]||d,f={},g=t[t.length-1],p=(new Date).getTime();if(b&&h&&q>p-h)return a.clearTimeout(i),i=a.setTimeout(v,q),void 0;h=p;for(var s in m)if(m.hasOwnProperty(s)){var w=m[s],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?j||u():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?j||u():1)),w.hasquery&&(z&&A||!(z||e>=x)||!(A||y>=e))||(f[w.media]||(f[w.media]=[]),f[w.media].push(n[w.rules]))}for(var C in o)o.hasOwnProperty(C)&&o[C]&&o[C].parentNode===r&&r.removeChild(o[C]);o.length=0;for(var D in f)if(f.hasOwnProperty(D)){var E=k.createElement("style"),F=f[D].join("\n");E.type="text/css",E.media=D,r.insertBefore(E,g.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(k.createTextNode(F)),o.push(E)}},w=function(a,b,d){var e=a.replace(c.regex.comments,"").replace(c.regex.keyframes,"").match(c.regex.media),f=e&&e.length||0;b=b.substring(0,b.lastIndexOf("/"));var h=function(a){return a.replace(c.regex.urls,"$1"+b+"$2$3")},i=!f&&d;b.length&&(b+="/"),i&&(f=1);for(var j=0;f>j;j++){var k,l,o,p;i?(k=d,n.push(h(a))):(k=e[j].match(c.regex.findStyles)&&RegExp.$1,n.push(RegExp.$2&&h(RegExp.$2))),o=k.split(","),p=o.length;for(var q=0;p>q;q++)l=o[q],g(l)||m.push({media:l.split("(")[0].match(c.regex.only)&&RegExp.$2||"all",rules:n.length-1,hasquery:l.indexOf("(")>-1,minw:l.match(c.regex.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:l.match(c.regex.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}v()},x=function(){if(d.length){var b=d.shift();f(b.href,function(c){w(c,b.href,b.media),p[b.href]=!0,a.setTimeout(function(){x()},0)})}},y=function(){for(var b=0;b0){var a=l,f,e=s.substring(0,e).replace(H,i);if(e==i||e.charAt(e.length-1)==o)e+="*";try{f=t(e)}catch(k){}if(f){e=0;for(c=f.length;e-1&&(a=a.substring(0,l));if(a.charAt(0)==":")switch(a.slice(1)){case "root":c=function(a){return b?a!=p:a==p};break;case "target":if(m==8){c=function(a){function c(){var d=location.hash,e=d.slice(1);return b?d==i||a.id!=e:d!=i&&a.id==e}k(j,"hashchange",function(){g(a,d,c())});return c()};break}return!1;case "checked":c=function(a){J.test(a.type)&&k(a,"propertychange",function(){event.propertyName=="checked"&&g(a,d,a.checked!==b)});return a.checked!==b};break;case "disabled":b=!b;case "enabled":c=function(c){if(K.test(c.tagName))return k(c,"propertychange",function(){event.propertyName=="$disabled"&&g(c,d,c.a===b)}),q.push(c),c.a=c.disabled,c.disabled===b;return a==":enabled"?b:!b};break;case "focus":e="focus",f="blur";case "hover":e||(e="mouseenter",f="mouseleave");c=function(a){k(a,b?f:e,function(){g(a,d,!0)});k(a,b?e:f,function(){g(a,d,!1)});return b};break;default:if(!L.test(a))return!1}return{className:d,b:c}}function w(a){return M+"-"+(m==6&&N?O++:a.replace(P,function(a){return a.charCodeAt(0)}))}function D(a){return a.replace(x,h).replace(Q,o)}function g(a,c,d){var b=a.className,c=u(b,c,d);if(c!=b)a.className=c,a.parentNode.className+=i}function u(a,c,d){var b=RegExp("(^|\\s)"+c+"(\\s|$)"),e=b.test(a);return d?e?a:a+o+c:e?a.replace(b,h).replace(x,h):a}function k(a,c,d){a.attachEvent("on"+c,d)}function r(a,c){if(/^https?:\/\//i.test(a))return c.substring(0,c.indexOf("/",8))==a.substring(0,a.indexOf("/",8))?a:null;if(a.charAt(0)=="/")return c.substring(0,c.indexOf("/",8))+a;var d=c.split(/[?#]/)[0];a.charAt(0)!="?"&&d.charAt(d.length-1)!="/"&&(d=d.substring(0,d.lastIndexOf("/")+1));return d+a}function y(a){if(a)return n.open("GET",a,!1),n.send(),(n.status==200?n.responseText:i).replace(R,i).replace(S,function(c,d,b,e,f){return y(r(b||f,a))}).replace(T,function(c,d,b){d=d||i;return" url("+d+r(b,a)+d+") "});return i}function U(){var a,c;a=f.getElementsByTagName("BASE");for(var d=a.length>0?a[0].href:f.location.href,b=0;b0&&setInterval(function(){for(var a=0,c=q.length;a8||!n)){var z={NW:"*.Dom.select",MooTools:"$$",DOMAssistant:"*.$",Prototype:"$$",YAHOO:"*.util.Selector.query",Sizzle:"*",jQuery:"*",dojo:"*.query"},t,q=[],O=0,N=!0,M="slvzr",R=/(\/\*[^*]*\*+([^\/][^*]*\*+)*\/)\s*/g,S=/@import\s*(?:(?:(?:url\(\s*(['"]?)(.*)\1)\s*\))|(?:(['"])(.*)\3))[^;]*;/g,T=/\burl\(\s*(["']?)(?!data:)([^"')]+)\1\s*\)/g,L=/^:(empty|(first|last|only|nth(-last)?)-(child|of-type))$/,B=/:(:first-(?:line|letter))/g,C=/(^|})\s*([^\{]*?[\[:][^{]+)/g,G=/([ +~>])|(:[a-z-]+(?:\(.*?\)+)?)|(\[.*?\])/g,H=/(:not\()?:(hover|enabled|disabled|focus|checked|target|active|visited|first-line|first-letter)\)?/g,P=/[^\w-]/g,K=/^(INPUT|SELECT|TEXTAREA|BUTTON)$/,J=/^(checkbox|radio)$/,v=m>6?/[\$\^*]=(['"])\1/:null,E=/([(\[+~])\s+/g,F=/\s+([)\]+~])/g,Q=/\s+/g,x=/^\s*((?:[\S\s]*\S)?)\s*$/,i="",o=" ",h="$1";(function(a,c){function d(){try{p.doScroll("left")}catch(a){setTimeout(d,50);return}b("poll")}function b(d){if(!(d.type=="readystatechange"&&f.readyState!="complete")&&((d.type=="load"?a:f).detachEvent("on"+d.type,b,!1),!e&&(e=!0)))c.call(a,d.type||d)}var e=!1,g=!0;if(f.readyState=="complete")c.call(a,i);else{if(f.createEventObject&&p.doScroll){try{g=!a.frameElement}catch(h){}g&&d()}k(f,"readystatechange",b);k(a,"load",b)}})(j,function(){for(var a in z){var c,d,b=j;if(j[a]){for(c=z[a].replace("*",a).split(".");(d=c.shift())&&(b=b[d]););if(typeof b=="function"){t=b;U();break}}}})}}})(this); -------------------------------------------------------------------------------- /dream-theme/icon/feature-1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/dream-theme/icon/feature-1.webp -------------------------------------------------------------------------------- /dream-theme/icon/feature-2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/dream-theme/icon/feature-2.webp -------------------------------------------------------------------------------- /dream-theme/icon/feature-3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/dream-theme/icon/feature-3.webp -------------------------------------------------------------------------------- /dream-theme/img/footer-logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/dream-theme/img/footer-logo.webp -------------------------------------------------------------------------------- /dream-theme/img/hero-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/dream-theme/img/hero-bg.jpg -------------------------------------------------------------------------------- /dream-theme/img/logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/dream-theme/img/logo.webp -------------------------------------------------------------------------------- /dream-theme/img/pricing-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/dream-theme/img/pricing-bg.jpg -------------------------------------------------------------------------------- /dream-theme/img/team-1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/dream-theme/img/team-1.webp -------------------------------------------------------------------------------- /dream-theme/img/team-2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/dream-theme/img/team-2.webp -------------------------------------------------------------------------------- /dream-theme/img/team-3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/dream-theme/img/team-3.webp -------------------------------------------------------------------------------- /dream-theme/img/team-4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/dream-theme/img/team-4.webp -------------------------------------------------------------------------------- /dream-theme/img/video-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/dream-theme/img/video-bg.jpg -------------------------------------------------------------------------------- /dream-theme/readme.md: -------------------------------------------------------------------------------- 1 | # dream-theme 2 | 3 | # [Preview the site](https://alsiam.github.io/web-projects/dream-theme) 4 | 5 | ![image info](../assets/images/dream-theme.png) -------------------------------------------------------------------------------- /ecommerce-website/README.md: -------------------------------------------------------------------------------- 1 | # Anon - An eCommerce Website 2 | 3 | ![GitHub repo size](https://img.shields.io/github/repo-size/codewithsadee/anon-ecommerce-website) 4 | ![GitHub stars](https://img.shields.io/github/stars/codewithsadee/anon-ecommerce-website?style=social) 5 | ![GitHub forks](https://img.shields.io/github/forks/codewithsadee/anon-ecommerce-website?style=social) 6 | [![Twitter Follow](https://img.shields.io/twitter/follow/codewithsadee_?style=social)](https://twitter.com/intent/follow?screen_name=codewithsadee_) 7 | [![YouTube Video Views](https://img.shields.io/youtube/views/3l8Lob4ysI0?style=social)](https://youtu.be/3l8Lob4ysI0) 8 | 9 | Anon is a fully responsive ecommerce website, maximum compatiblities in all mobile devices, built using HTML, CSS, and JavaScript. 10 | 11 | ## Demo 12 | 13 | ![Anon Desktop Demo](./website-demo-image/desktop.png "Desktop Demo") 14 | ![Anon Mobile Demo](./website-demo-image/mobile.png "Mobile Demo") 15 | 16 | ## Prerequisites 17 | 18 | Before you begin, ensure you have met the following requirements: 19 | 20 | * [Git](https://git-scm.com/downloads "Download Git") must be installed on your operating system. 21 | 22 | ## Installing Anon 23 | 24 | To install **Anon**, follow these steps: 25 | 26 | Linux and macOS: 27 | 28 | ```bash 29 | sudo git clone https://github.com/codewithsadee/anon-ecommerce-website.git 30 | ``` 31 | 32 | Windows: 33 | 34 | ```bash 35 | git clone https://github.com/codewithsadee/anon-ecommerce-website.git 36 | ``` 37 | 38 | ## Contact 39 | 40 | If you want to contact me you can reach me at [Twitter](https://www.twitter.com/codewithsadee). 41 | 42 | ## License 43 | 44 | This project is **free to use** and does not contains any license. 45 | -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/banner-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/banner-1.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/banner-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/banner-2.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/banner-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/banner-3.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/blog-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/blog-1.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/blog-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/blog-2.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/blog-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/blog-3.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/blog-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/blog-4.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/cta-banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/cta-banner.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/electronics-banner-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/electronics-banner-1.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/electronics-banner-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/electronics-banner-2.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/icons: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/mens-banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/mens-banner.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/newsletter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/newsletter.png -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/payment.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/payment.png -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/1.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/2.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/3.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/4.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/belt.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/belt.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/clothes-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/clothes-1.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/clothes-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/clothes-2.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/clothes-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/clothes-3.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/clothes-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/clothes-4.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/jacket-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/jacket-1.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/jacket-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/jacket-2.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/jacket-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/jacket-3.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/jacket-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/jacket-4.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/jacket-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/jacket-5.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/jacket-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/jacket-6.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/jewellery-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/jewellery-1.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/jewellery-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/jewellery-2.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/jewellery-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/jewellery-3.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/party-wear-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/party-wear-1.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/party-wear-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/party-wear-2.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/perfume.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/perfume.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/shampoo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/shampoo.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/shirt-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/shirt-1.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/shirt-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/shirt-2.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/shoe-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/shoe-1.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/shoe-1_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/shoe-1_1.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/shoe-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/shoe-2.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/shoe-2_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/shoe-2_1.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/shoe-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/shoe-3.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/shoe-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/shoe-4.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/shoe-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/shoe-5.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/shorts-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/shorts-1.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/shorts-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/shorts-2.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/sports-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/sports-1.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/sports-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/sports-2.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/sports-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/sports-3.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/sports-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/sports-4.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/sports-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/sports-5.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/sports-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/sports-6.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/watch-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/watch-1.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/watch-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/watch-2.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/watch-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/watch-3.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/products/watch-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/products/watch-4.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/testimonial-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/testimonial-1.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/images/womens-banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/ecommerce-website/assests/css/images/womens-banner.jpg -------------------------------------------------------------------------------- /ecommerce-website/assests/css/js/script.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // modal variables 4 | const modal = document.querySelector('[data-modal]'); 5 | const modalCloseBtn = document.querySelector('[data-modal-close]'); 6 | const modalCloseOverlay = document.querySelector('[data-modal-overlay]'); 7 | 8 | // modal function 9 | const modalCloseFunc = function () { modal.classList.add('closed') } 10 | 11 | // modal eventListener 12 | modalCloseOverlay.addEventListener('click', modalCloseFunc); 13 | modalCloseBtn.addEventListener('click', modalCloseFunc); 14 | 15 | 16 | 17 | 18 | 19 | // notification toast variables 20 | const notificationToast = document.querySelector('[data-toast]'); 21 | const toastCloseBtn = document.querySelector('[data-toast-close]'); 22 | 23 | // notification toast eventListener 24 | toastCloseBtn.addEventListener('click', function () { 25 | notificationToast.classList.add('closed'); 26 | }); 27 | 28 | 29 | 30 | 31 | 32 | // mobile menu variables 33 | const mobileMenuOpenBtn = document.querySelectorAll('[data-mobile-menu-open-btn]'); 34 | const mobileMenu = document.querySelectorAll('[data-mobile-menu]'); 35 | const mobileMenuCloseBtn = document.querySelectorAll('[data-mobile-menu-close-btn]'); 36 | const overlay = document.querySelector('[data-overlay]'); 37 | 38 | for (let i = 0; i < mobileMenuOpenBtn.length; i++) { 39 | 40 | // mobile menu function 41 | const mobileMenuCloseFunc = function () { 42 | mobileMenu[i].classList.remove('active'); 43 | overlay.classList.remove('active'); 44 | } 45 | 46 | mobileMenuOpenBtn[i].addEventListener('click', function () { 47 | mobileMenu[i].classList.add('active'); 48 | overlay.classList.add('active'); 49 | }); 50 | 51 | mobileMenuCloseBtn[i].addEventListener('click', mobileMenuCloseFunc); 52 | overlay.addEventListener('click', mobileMenuCloseFunc); 53 | 54 | } 55 | 56 | 57 | 58 | 59 | 60 | // accordion variables 61 | const accordionBtn = document.querySelectorAll('[data-accordion-btn]'); 62 | const accordion = document.querySelectorAll('[data-accordion]'); 63 | 64 | for (let i = 0; i < accordionBtn.length; i++) { 65 | 66 | accordionBtn[i].addEventListener('click', function () { 67 | 68 | const clickedBtn = this.nextElementSibling.classList.contains('active'); 69 | 70 | for (let i = 0; i < accordion.length; i++) { 71 | 72 | if (clickedBtn) break; 73 | 74 | if (accordion[i].classList.contains('active')) { 75 | 76 | accordion[i].classList.remove('active'); 77 | accordionBtn[i].classList.remove('active'); 78 | 79 | } 80 | 81 | } 82 | 83 | this.nextElementSibling.classList.toggle('active'); 84 | this.classList.toggle('active'); 85 | 86 | }); 87 | 88 | } 89 | -------------------------------------------------------------------------------- /facebook-login/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/facebook-login/favicon.ico -------------------------------------------------------------------------------- /facebook-login/favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/facebook-login/favicon/favicon.ico -------------------------------------------------------------------------------- /facebook-login/readme.md: -------------------------------------------------------------------------------- 1 | # Facebook login page 2 | 3 | # [Preview the site](https://alsiam.github.io/web-projects/facebook-login) 4 | 5 | ![image info](../assets/images/facebook-login.png) -------------------------------------------------------------------------------- /facebook-login/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | body{ 6 | font-family: Montserrat; 7 | box-sizing: border-box; 8 | } 9 | .fb-header{ 10 | background: #46629E; 11 | overflow: hidden; 12 | } 13 | .fb-header-container{ 14 | padding: 15px; 15 | overflow: hidden; 16 | width: 70%; 17 | margin: auto; 18 | } 19 | .logo h1{ 20 | color: rgb(252, 252, 252); 21 | float: left; 22 | text-align: center; 23 | text-transform: lowercase; 24 | font-size: 45px; 25 | 26 | } 27 | .fb-log-in{ 28 | text-align: center; 29 | margin-top: 5px; 30 | float: right; 31 | padding: 10px; 32 | } 33 | .fb-log-in a{ 34 | color: #fff; 35 | text-decoration: none; 36 | border: 1px solid #244180; 37 | background: #375492; 38 | padding: 8px; 39 | font-size: 15px; 40 | font-weight: bold; 41 | } 42 | .fb-log-in a:hover{ 43 | background: #3357a5; 44 | transition: .5s; 45 | } 46 | 47 | 48 | /* ================== 49 | ----- Account Info Started 50 | ===================*/ 51 | 52 | .acc-info{ 53 | background: #EBEDF0; 54 | } 55 | .acc-wrapper{ 56 | width: 30%; 57 | margin: auto; 58 | } 59 | .acc-header{ 60 | overflow: hidden;; 61 | } 62 | .acc-header h1{ 63 | font-size: 40px; 64 | margin: 15px 0; 65 | font-weight: 700; 66 | color: #333; 67 | } 68 | .acc-header h3{ 69 | font-weight: normal; 70 | font-family: arial; 71 | font-size: 22px; 72 | color: rgb(112, 110, 110); 73 | margin-bottom: 15px; 74 | } 75 | 76 | .acc-input form input{ 77 | width: 95%; 78 | border-radius: 5px; 79 | margin-bottom: 10px; 80 | overflow: hidden;; 81 | } 82 | .acc-input form input:first-child{ 83 | width: 44%; 84 | float: left; 85 | margin-right: 5px; 86 | } 87 | .acc-input form input:nth-child(2){ 88 | width: 44.5%; 89 | float: left; 90 | margin-right: 0; 91 | } 92 | 93 | form input { 94 | padding: 10px; 95 | font-size: 18px; 96 | border: none; 97 | outline: none; 98 | } 99 | 100 | .acc-input form h3{ 101 | color: gray; 102 | font-weight: none; 103 | font-family: arial; 104 | font-size: 16px; 105 | margin: 10px 0; 106 | } 107 | 108 | .acc-input select{ 109 | padding: 5px; 110 | border: 1px solid #ddd; 111 | } 112 | 113 | .acc-input label input{ 114 | width:20px !important; 115 | float: none !important; 116 | } 117 | .acc-input label span{ 118 | font-size: 20px; 119 | color: #333; 120 | margin-right: 20px; 121 | font-weight: normal; 122 | font-family: arial; 123 | } 124 | 125 | .fb-input-disc{ 126 | font-size: 11px; 127 | font-weight: normal; 128 | font-family: arial; 129 | width: 70%; 130 | color: gray; 131 | padding: 10px 0px; 132 | } 133 | .input-highLight{ 134 | color: rgb(2, 128, 179); 135 | } 136 | 137 | .fb-input-button{ 138 | padding: 15px 0; 139 | padding-bottom: 30px; 140 | } 141 | .fb-input-button input{ 142 | background: #69a74e; 143 | color: white; 144 | padding: 8px 60px; 145 | font-size: 20px; 146 | font-family: arial; 147 | border: 1px solid black; 148 | outline: none; 149 | font-weight: bold; 150 | border-radius: 5px; 151 | } 152 | .fb-input-button input:hover{ 153 | background: linear-gradient(#76b45b,#69a74e) 154 | } 155 | 156 | .fa-question-circle{ 157 | color: rgb(122, 122, 122); 158 | font-size: 16px; 159 | } 160 | 161 | .fb-footer{ 162 | margin-top: 50px; 163 | } 164 | .footer-wrapper{ 165 | width: 70%; 166 | margin: auto; 167 | } 168 | .footer-head ul{ 169 | width: 70%; 170 | list-style: none; 171 | padding: 10px 0px; 172 | } 173 | .footer-head ul li{ 174 | display: inline-block; 175 | padding-right: 5px; 176 | 177 | } 178 | .footer-head ul li a{ 179 | color: rgb(16, 75, 109); 180 | font-size: 11px; 181 | text-decoration: none; 182 | font-family: arial; 183 | 184 | } 185 | .fa-plus-circle{ 186 | color: rgb(16, 75, 109); 187 | } 188 | .footer-bottom ul{ 189 | width: 100%; 190 | list-style: none; 191 | border-top: 1px solid rgb(192, 191, 191); 192 | padding-top: 10px; 193 | padding-bottom: 20px; 194 | } 195 | .footer-bottom ul li{ 196 | display: inline-block; 197 | padding-right: 15px; 198 | } 199 | .footer-bottom ul li a{ 200 | color: rgb(16, 75, 109); 201 | font-size: 12px; 202 | font-family: arial; 203 | text-decoration: none; 204 | } 205 | .active{ 206 | color: gray; 207 | } 208 | b{ 209 | font-weight: normal; 210 | color: gray; 211 | font-size: 12px; 212 | font-family: arial; 213 | padding-bottom: 50px; 214 | } 215 | -------------------------------------------------------------------------------- /fashion-ecommerce/css/style.css: -------------------------------------------------------------------------------- 1 | .panda-slider-box{ 2 | background-color: #00000015; 3 | margin: auto 4 | } 5 | h1,h2,h3,h4,h5,h6{ 6 | font-weight: bold; 7 | color: #363958; 8 | } 9 | section{ 10 | margin: 40px 0; 11 | } 12 | .slider-header h1{ 13 | color: #fcc560 ; 14 | font-size: 60px; 15 | font-weight: bold; 16 | font-family: arial; 17 | } 18 | .slider-header span{ 19 | color: #363958; 20 | display: block; 21 | } 22 | .penguin-logo{ 23 | width: 200px; 24 | } 25 | .dropdown-menu-own{ 26 | height: 60vh; 27 | } 28 | .penguin-search{ 29 | width: 80%; 30 | } 31 | .slider-img img{ 32 | height: 450px; 33 | } 34 | 35 | 36 | 37 | /* Shopping Cart started */ 38 | .card-img{ 39 | width: 90%; 40 | margin: auto; 41 | background: rgb(230, 221, 221); 42 | border-radius: 10px; 43 | border: none; 44 | } 45 | .buy-now{ 46 | align-items: center; 47 | } 48 | h1.buy-now{ 49 | color: orange; 50 | } 51 | h2.buy-now{ 52 | color: white; 53 | padding: 5px 15px; 54 | font-weight: bold; 55 | } 56 | .card-img img{ 57 | width: 60%; 58 | height: 250px; 59 | margin: auto; 60 | padding: 10px; 61 | 62 | } 63 | .shopping-cart{ 64 | margin:40px 0; 65 | } 66 | .contact-section{ 67 | margin: 150px 0; 68 | } 69 | .contact-box{ 70 | width: 100%; 71 | border-radius: 10px;; 72 | } 73 | .contact-box img{ 74 | width: 30%; 75 | padding: 20px; 76 | } 77 | .shop-box{ 78 | overflow: hidden; 79 | height: 100%; 80 | } 81 | 82 | /* Footer section */ 83 | .footer{ 84 | background-color: #232F3E; 85 | overflow: hidden; 86 | 87 | } 88 | .back-top{ 89 | background: #232f3ed0; 90 | margin: 0; 91 | text-align: center; 92 | font-size: 18px; 93 | font-family: arial; 94 | padding: 10px 0; 95 | } 96 | .back-top a{ 97 | color: #fff; 98 | text-decoration: none; 99 | display: block; 100 | } 101 | footer h4{ 102 | color: white; 103 | } 104 | footer ul{ 105 | padding: 0; 106 | } 107 | footer ul li{ 108 | list-style: none; 109 | } 110 | footer ul li a{ 111 | text-decoration: none; 112 | color: #ddd; 113 | } 114 | .footer-box{ 115 | padding: 40px 0; 116 | margin: 0 10%; 117 | 118 | } 119 | 120 | /* Responsive */ 121 | 122 | @media (max-width:991px){ 123 | .hide-nav{ 124 | display: none; 125 | } 126 | .penguin-search{ 127 | width: 100%; 128 | } 129 | } 130 | @media (max-width:767px){ 131 | .hide-nav{ 132 | display: none; 133 | } 134 | .penguin-search{ 135 | width: 100%; 136 | } 137 | } 138 | -------------------------------------------------------------------------------- /fashion-ecommerce/images/PngItem_2597366 1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/fashion-ecommerce/images/PngItem_2597366 1.png -------------------------------------------------------------------------------- /fashion-ecommerce/images/SeekPng 1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/fashion-ecommerce/images/SeekPng 1.png -------------------------------------------------------------------------------- /fashion-ecommerce/images/banner-images/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/fashion-ecommerce/images/banner-images/2.png -------------------------------------------------------------------------------- /fashion-ecommerce/images/banner-images/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/fashion-ecommerce/images/banner-images/6.png -------------------------------------------------------------------------------- /fashion-ecommerce/images/banner-images/Mask Group.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/fashion-ecommerce/images/banner-images/Mask Group.png -------------------------------------------------------------------------------- /fashion-ecommerce/images/flag.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/fashion-ecommerce/images/flag.webp -------------------------------------------------------------------------------- /fashion-ecommerce/images/image 11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/fashion-ecommerce/images/image 11.png -------------------------------------------------------------------------------- /fashion-ecommerce/images/image 15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/fashion-ecommerce/images/image 15.png -------------------------------------------------------------------------------- /fashion-ecommerce/images/toppng 1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/fashion-ecommerce/images/toppng 1.png -------------------------------------------------------------------------------- /fashion-ecommerce/images/vippng 1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/fashion-ecommerce/images/vippng 1.png -------------------------------------------------------------------------------- /fashion-ecommerce/logo/Group 33071.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/fashion-ecommerce/logo/Group 33071.png -------------------------------------------------------------------------------- /fashion-ecommerce/logo/Group 33072.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/fashion-ecommerce/logo/Group 33072.png -------------------------------------------------------------------------------- /fashion-ecommerce/logo/Group 33091.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/fashion-ecommerce/logo/Group 33091.png -------------------------------------------------------------------------------- /fashion-ecommerce/logo/Group 33102.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/fashion-ecommerce/logo/Group 33102.png -------------------------------------------------------------------------------- /fashion-ecommerce/logo/XMLID 1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/fashion-ecommerce/logo/XMLID 1.png -------------------------------------------------------------------------------- /fashion-ecommerce/logo/green.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/fashion-ecommerce/logo/green.png -------------------------------------------------------------------------------- /fashion-ecommerce/logo/image 12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/fashion-ecommerce/logo/image 12.png -------------------------------------------------------------------------------- /fashion-ecommerce/logo/image 13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/fashion-ecommerce/logo/image 13.png -------------------------------------------------------------------------------- /fashion-ecommerce/logo/image 14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/fashion-ecommerce/logo/image 14.png -------------------------------------------------------------------------------- /fashion-ecommerce/logo/shopping-cart 1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/fashion-ecommerce/logo/shopping-cart 1.png -------------------------------------------------------------------------------- /fashion-ecommerce/readme.md: -------------------------------------------------------------------------------- 1 | # Fashion Ecommerce 2 | 3 | # [Preview the site](https://alsiam.github.io/web-projects/fashion-ecommerce) 4 | 5 | ![image info](../assets/images/fashion-ecommerce.png) -------------------------------------------------------------------------------- /football-club/img/Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/football-club/img/Logo.png -------------------------------------------------------------------------------- /football-club/img/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/football-club/img/banner.png -------------------------------------------------------------------------------- /football-club/img/best-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/football-club/img/best-bg.jpg -------------------------------------------------------------------------------- /football-club/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/football-club/img/favicon.png -------------------------------------------------------------------------------- /football-club/img/match.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/football-club/img/match.png -------------------------------------------------------------------------------- /football-club/img/players/player-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/football-club/img/players/player-1.png -------------------------------------------------------------------------------- /football-club/img/players/player-10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/football-club/img/players/player-10.png -------------------------------------------------------------------------------- /football-club/img/players/player-11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/football-club/img/players/player-11.png -------------------------------------------------------------------------------- /football-club/img/players/player-12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/football-club/img/players/player-12.png -------------------------------------------------------------------------------- /football-club/img/players/player-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/football-club/img/players/player-2.png -------------------------------------------------------------------------------- /football-club/img/players/player-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/football-club/img/players/player-3.png -------------------------------------------------------------------------------- /football-club/img/players/player-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/football-club/img/players/player-4.png -------------------------------------------------------------------------------- /football-club/img/players/player-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/football-club/img/players/player-5.png -------------------------------------------------------------------------------- /football-club/img/players/player-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/football-club/img/players/player-6.png -------------------------------------------------------------------------------- /football-club/img/players/player-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/football-club/img/players/player-7.png -------------------------------------------------------------------------------- /football-club/img/players/player-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/football-club/img/players/player-8.png -------------------------------------------------------------------------------- /football-club/img/players/player-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/football-club/img/players/player-9.png -------------------------------------------------------------------------------- /football-club/img/policy-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/football-club/img/policy-1.jpg -------------------------------------------------------------------------------- /football-club/img/policy-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/football-club/img/policy-2.jpg -------------------------------------------------------------------------------- /football-club/readme.md: -------------------------------------------------------------------------------- 1 | # Football Club 2 | 3 | # [Preview the site](https://alsiam.github.io/web-projects/football-club) 4 | 5 | ![image info](../assets/images/football-club.png) -------------------------------------------------------------------------------- /hamburger-food/README.md: -------------------------------------------------------------------------------- 1 | # hamburger-food 2 | It's a hamburger restaurant website. You can get the fast delivery with best quality product...! 3 | 4 | # [Preview the site](https://alsiam.github.io/web-projects/hamburger-food) 5 | 6 | ![image info](../assets/images/hamburger-food.png) -------------------------------------------------------------------------------- /hamburger-food/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/hamburger-food/favicon.png -------------------------------------------------------------------------------- /hamburger-food/images/about-team.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/hamburger-food/images/about-team.png -------------------------------------------------------------------------------- /hamburger-food/images/about-us.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/hamburger-food/images/about-us.png -------------------------------------------------------------------------------- /hamburger-food/images/burger-recipie0-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/hamburger-food/images/burger-recipie0-min.jpg -------------------------------------------------------------------------------- /hamburger-food/images/burger-recipie1-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/hamburger-food/images/burger-recipie1-min.jpg -------------------------------------------------------------------------------- /hamburger-food/images/burger-recipie3-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/hamburger-food/images/burger-recipie3-min.jpg -------------------------------------------------------------------------------- /hamburger-food/images/burger.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/hamburger-food/images/burger.jpg -------------------------------------------------------------------------------- /hamburger-food/images/easy-order.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/hamburger-food/images/easy-order.jpg -------------------------------------------------------------------------------- /hamburger-food/images/fdelivery.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/hamburger-food/images/fdelivery.jpg -------------------------------------------------------------------------------- /hamburger-food/images/frame4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/hamburger-food/images/frame4.jpg -------------------------------------------------------------------------------- /hamburger-food/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/hamburger-food/images/logo.png -------------------------------------------------------------------------------- /hamburger-food/images/quality.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/hamburger-food/images/quality.jpg -------------------------------------------------------------------------------- /hamburger-food/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | body { 6 | font-family: "Poppins", sans-serif; 7 | } 8 | p { 9 | color: #444; 10 | line-height: 25px; 11 | } 12 | .container { 13 | width: 85%; 14 | margin: auto; 15 | overflow: hidden; 16 | } 17 | header { 18 | padding-bottom: 50px; 19 | } 20 | header, 21 | .intro-section { 22 | background-color: #ededed; 23 | } 24 | .header-wrap { 25 | display: flex; 26 | justify-content: space-between; 27 | } 28 | .logo { 29 | width: 20%; 30 | padding: 10px 0; 31 | display: flex; 32 | align-items: center; 33 | } 34 | .logo img { 35 | width: 20%; 36 | } 37 | .logo span { 38 | font-size: 30px; 39 | font-weight: 900; 40 | color: #f83b3b; 41 | font-family: "Berkshire Swash", cursive; 42 | } 43 | .menu-box { 44 | width: 75%; 45 | } 46 | .menu-box ul { 47 | float: right; 48 | } 49 | .menu-box ul li { 50 | display: inline-block; 51 | } 52 | .menu-box ul li a { 53 | text-decoration: none; 54 | color: black; 55 | padding: 20px 20px; 56 | display: block; 57 | font-size: 20px; 58 | font-weight: 700; 59 | } 60 | .menu-box .active { 61 | color: #f83b3b; 62 | } 63 | .half-width { 64 | display: flex; 65 | justify-content: space-between; 66 | } 67 | .intro-img { 68 | width: 50%; 69 | } 70 | .intro-img img { 71 | width: 100%; 72 | } 73 | .intro-wrap { 74 | padding-top: 2em; 75 | padding-bottom: 8em; 76 | overflow: hidden; 77 | } 78 | .intro-title { 79 | width: 50%; 80 | } 81 | .intro-title h1 { 82 | color: #363958; 83 | font-size: 70px; 84 | line-height: 80px; 85 | margin-bottom: 20px; 86 | } 87 | .intro-title span { 88 | display: block; 89 | } 90 | .span-color { 91 | color: #f83b3b; 92 | } 93 | .intro-title p { 94 | width: 80%; 95 | margin-top: 10px; 96 | margin-bottom: 50px; 97 | text-align: justify; 98 | } 99 | .link-button { 100 | color: white; 101 | text-decoration: none; 102 | background-image: linear-gradient(90deg, #fc5858, crimson); 103 | padding: 15px 30px; 104 | border-radius: 5px; 105 | font-size: 18px; 106 | font-weight: bold; 107 | } 108 | .about-section { 109 | background-image: url(images/frame4.jpg); 110 | background-repeat: no-repeat; 111 | background-size: 100%; 112 | padding: 80px 0; 113 | } 114 | .about-img { 115 | width: 50%; 116 | } 117 | .about-img img { 118 | width: 80%; 119 | } 120 | .about-title { 121 | color: #444; 122 | width: 45%; 123 | } 124 | .about-title h2 { 125 | font-size: 50px; 126 | margin-bottom: 2rem; 127 | } 128 | .about-title p { 129 | margin-bottom: 8rem; 130 | text-align: justify; 131 | } 132 | 133 | .recipie-header { 134 | width: 60%; 135 | text-align: center; 136 | margin: auto; 137 | padding-top: 5rem; 138 | padding-bottom: 2rem; 139 | } 140 | .recipie-header h1 { 141 | color: #444; 142 | font-size: 45px; 143 | margin-bottom: 20px; 144 | } 145 | .recipie-box span { 146 | color: #363958; 147 | } 148 | .recipie-wrap { 149 | padding: 20px 0; 150 | overflow: hidden; 151 | display: flex; 152 | } 153 | .recipie-box { 154 | width: 25%; 155 | padding: 2%; 156 | border-radius: 20px; 157 | box-shadow: rgba(0, 0, 0, 0.6) 0px 4px 6px -1px, 158 | rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; 159 | margin-left: 25px; 160 | margin-right: 25px; 161 | } 162 | 163 | .recipie-box img { 164 | width: 100%; 165 | border-radius: 20px; 166 | } 167 | .recipie-box h2 { 168 | margin: 15px 0; 169 | } 170 | .recipie-box p { 171 | width: 100%; 172 | text-align: justify; 173 | } 174 | .delivery-header { 175 | width: 60%; 176 | text-align: center; 177 | margin: auto; 178 | padding-top: 5rem; 179 | padding-bottom: 2rem; 180 | } 181 | .delivery-header h1 { 182 | color: #444; 183 | font-size: 45px; 184 | margin-bottom: 20px; 185 | } 186 | .delivery-box span { 187 | color: #363958; 188 | } 189 | .delivery-wrap { 190 | padding: 20px 0; 191 | overflow: hidden; 192 | } 193 | .delivery-box { 194 | width: 25%; 195 | padding: 2%; 196 | text-align: center; 197 | } 198 | 199 | .delivery-box img { 200 | width: 100%; 201 | height: 300px; 202 | } 203 | .delivery-box h2 { 204 | font-size: 30px; 205 | margin: 10px 0; 206 | } 207 | .delivery-box p { 208 | width: 100%; 209 | text-align: justify; 210 | } 211 | .social-wrap { 212 | width: 80%; 213 | margin: 5rem auto; 214 | padding: 5rem; 215 | box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 6px -1px, 216 | rgba(0, 0, 0, 0.06) 0px 2px 4px 5px; 217 | border-radius: 20px; 218 | } 219 | .social-wrap h1 { 220 | font-family: "Berkshire Swash", cursive; 221 | font-size: 60px; 222 | color: #333; 223 | } 224 | footer { 225 | background-color: #222; 226 | text-align: center; 227 | padding: 2rem 0; 228 | } 229 | footer h1 { 230 | color: #f83b3b; 231 | margin-bottom: 2rem; 232 | font-family: "Berkshire Swash", cursive; 233 | } 234 | footer h1 span { 235 | color: #666; 236 | } 237 | footer p { 238 | color: #888; 239 | margin-bottom: 4rem; 240 | } 241 | footer span { 242 | color: #999; 243 | } 244 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 12 | 13 | Web Projects by Al Siam 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 | 47 | 57 | 58 | 59 |
60 |
61 |
62 | 64 | HTML PROJECTS 22+ 66 | 67 | 68 | 70 | Follow on GitHub 71 | 72 |
73 |
74 |
75 |
76 |
77 |
78 |

80 | 6+ Featured 81 | Projects

82 | 85 |
86 |
87 | 88 |
89 |
90 |

92 | 17+ Other 93 | Projects

94 |
95 | 96 |
97 |
98 |
99 |
100 |
101 |

102 | © 2023 All rights reserved by Al Siam 103 |

104 |
105 | 106 | 107 | -------------------------------------------------------------------------------- /jamuna-news/css/style.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | width: 1170px; 3 | } 4 | .header{ 5 | background-color: #B20F14; 6 | } 7 | h1,h2,h3,h4,h5,h6{font-weight: bold !important;} 8 | .menu-item ul li a{ 9 | font-weight: bold; 10 | font-size: 20px; 11 | color: #fff !important; 12 | } 13 | .card{ 14 | margin-top: 20px; 15 | } 16 | .card.h-100{ 17 | margin: 10px; 18 | } 19 | @media (max-width:767px){ 20 | .hide{ 21 | display: none; 22 | } 23 | } 24 | @media (max-width:580){ 25 | .col-sm-12{ 26 | width: 100% !important; 27 | } 28 | .col-sm-6{ 29 | width: 100% !important; 30 | } 31 | .col-sm-4{ 32 | width: 100% !important; 33 | } 34 | } 35 | 36 | -------------------------------------------------------------------------------- /jamuna-news/images/0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/jamuna-news/images/0.jpg -------------------------------------------------------------------------------- /jamuna-news/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/jamuna-news/images/1.jpg -------------------------------------------------------------------------------- /jamuna-news/images/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/jamuna-news/images/11.jpg -------------------------------------------------------------------------------- /jamuna-news/images/111.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/jamuna-news/images/111.jpg -------------------------------------------------------------------------------- /jamuna-news/images/112.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/jamuna-news/images/112.jpg -------------------------------------------------------------------------------- /jamuna-news/images/113.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/jamuna-news/images/113.jpg -------------------------------------------------------------------------------- /jamuna-news/images/114.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/jamuna-news/images/114.jpg -------------------------------------------------------------------------------- /jamuna-news/images/115.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/jamuna-news/images/115.jpg -------------------------------------------------------------------------------- /jamuna-news/images/116.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/jamuna-news/images/116.jpg -------------------------------------------------------------------------------- /jamuna-news/images/117.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/jamuna-news/images/117.jpg -------------------------------------------------------------------------------- /jamuna-news/images/118.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/jamuna-news/images/118.jpg -------------------------------------------------------------------------------- /jamuna-news/images/119.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/jamuna-news/images/119.jpg -------------------------------------------------------------------------------- /jamuna-news/images/120.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/jamuna-news/images/120.jpg -------------------------------------------------------------------------------- /jamuna-news/images/121.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/jamuna-news/images/121.jpg -------------------------------------------------------------------------------- /jamuna-news/images/122.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/jamuna-news/images/122.jpg -------------------------------------------------------------------------------- /jamuna-news/images/123.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/jamuna-news/images/123.jpg -------------------------------------------------------------------------------- /jamuna-news/images/124.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/jamuna-news/images/124.jpg -------------------------------------------------------------------------------- /jamuna-news/images/125.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/jamuna-news/images/125.jpg -------------------------------------------------------------------------------- /jamuna-news/images/126.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/jamuna-news/images/126.jpg -------------------------------------------------------------------------------- /jamuna-news/images/127.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/jamuna-news/images/127.jpg -------------------------------------------------------------------------------- /jamuna-news/images/128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/jamuna-news/images/128.jpg -------------------------------------------------------------------------------- /jamuna-news/images/129.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/jamuna-news/images/129.jpg -------------------------------------------------------------------------------- /jamuna-news/images/130.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/jamuna-news/images/130.jpg -------------------------------------------------------------------------------- /jamuna-news/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/jamuna-news/images/2.jpg -------------------------------------------------------------------------------- /jamuna-news/images/22.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/jamuna-news/images/22.jpg -------------------------------------------------------------------------------- /jamuna-news/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/jamuna-news/images/3.jpg -------------------------------------------------------------------------------- /jamuna-news/images/33.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/jamuna-news/images/33.jpg -------------------------------------------------------------------------------- /jamuna-news/images/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/jamuna-news/images/4.jpg -------------------------------------------------------------------------------- /jamuna-news/images/44.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/jamuna-news/images/44.jpg -------------------------------------------------------------------------------- /jamuna-news/images/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/jamuna-news/images/5.jpg -------------------------------------------------------------------------------- /jamuna-news/images/55.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/jamuna-news/images/55.jpg -------------------------------------------------------------------------------- /jamuna-news/images/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/jamuna-news/images/6.jpg -------------------------------------------------------------------------------- /jamuna-news/images/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/jamuna-news/images/7.jpg -------------------------------------------------------------------------------- /jamuna-news/images/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/jamuna-news/images/8.jpg -------------------------------------------------------------------------------- /jamuna-news/images/add.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/jamuna-news/images/add.gif -------------------------------------------------------------------------------- /jamuna-news/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/jamuna-news/images/logo.png -------------------------------------------------------------------------------- /jamuna-news/images/mujib.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/jamuna-news/images/mujib.jpg -------------------------------------------------------------------------------- /jamuna-news/readme.md: -------------------------------------------------------------------------------- 1 | # Jamuna News 2 | 3 | # [Preview the site](https://alsiam.github.io/web-projects/jamuna-news) 4 | 5 | ![image info](../assets/images/jamuna-news.png) -------------------------------------------------------------------------------- /macbook-cart/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/macbook-cart/img/favicon.png -------------------------------------------------------------------------------- /macbook-cart/img/mac-book-1.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/macbook-cart/img/mac-book-1.jfif -------------------------------------------------------------------------------- /macbook-cart/img/mac-book-2.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/macbook-cart/img/mac-book-2.jfif -------------------------------------------------------------------------------- /macbook-cart/js/script.js: -------------------------------------------------------------------------------- 1 | // Memory Price Calculation 2 | function getRamPrice(ramPrice) { 3 | const ramPriceAmount = document.getElementById('ram-price-amount'); 4 | ramPriceAmount.innerText = ramPrice; 5 | totalPrice(); 6 | } 7 | 8 | // Storage Price Calculation 9 | function getSsdPrice(ssdPrice) { 10 | const ssdPriceAmount = document.getElementById('ssd-price-amount'); 11 | 12 | ssdPriceAmount.innerText = ssdPrice; 13 | totalPrice(); 14 | } 15 | 16 | // Delivery Charge Calculation 17 | function getDelivery(charge) { 18 | const deliveryAmount = document.getElementById('delivery-price-amount'); 19 | deliveryAmount.innerText = charge; 20 | totalPrice(); 21 | } 22 | 23 | // totalPrize 24 | function totalPrice() { 25 | const totalPrice = document.getElementById('total-price-amount') 26 | const ramPriceAmount = document.getElementById('ram-price-amount'); 27 | const ssdPriceAmount = document.getElementById('ssd-price-amount'); 28 | const deliveryAmount = document.getElementById('delivery-price-amount'); 29 | const finalTotalAmount = document.getElementById('final-total-amount'); 30 | 31 | const allTotalPrice = totalPrice.innerText = 1299 + parseFloat(ramPriceAmount.innerText) + parseFloat(ssdPriceAmount.innerText) + parseFloat(deliveryAmount.innerText); 32 | 33 | finalTotalAmount.innerText = allTotalPrice; 34 | return allTotalPrice; 35 | 36 | } 37 | 38 | // Ram Price Include 39 | document.getElementById('ram-8gb').addEventListener('click', function () { 40 | getRamPrice(0); 41 | }) 42 | document.getElementById('ram-16gb').addEventListener('click', function () { 43 | getRamPrice(180); 44 | }) 45 | 46 | // SSd Price Include 47 | document.getElementById('ssd-256gb').addEventListener('click', function () { 48 | getSsdPrice(0); 49 | }) 50 | document.getElementById('ssd-512gb').addEventListener('click', function () { 51 | getSsdPrice(100); 52 | }) 53 | document.getElementById('ssd-1tb').addEventListener('click', function () { 54 | getSsdPrice(180); 55 | }) 56 | 57 | // Delivery Charge Included 58 | document.getElementById('regular-delivery').addEventListener('click', function () { 59 | getDelivery(0); 60 | }) 61 | document.getElementById('fast-delivery').addEventListener('click', function () { 62 | getDelivery(20); 63 | }) 64 | 65 | // Getting the Promo Calculation 66 | document.getElementById('promo-apply').addEventListener('click', function () { 67 | const finalTotalAmount = document.getElementById('final-total-amount'); 68 | const promoCode = document.getElementById('promo-code'); 69 | const totalDiscount = (totalPrice() / 100) * 20; 70 | const getValue = promoCode.value; 71 | if (getValue.toLowerCase() == 'stevekaku') { 72 | finalTotalAmount.innerText = totalPrice() - totalDiscount; 73 | console.log('workd') 74 | } 75 | promoCode.value = ''; 76 | 77 | }) 78 | -------------------------------------------------------------------------------- /macbook-cart/readme.md: -------------------------------------------------------------------------------- 1 | # Macbook Cart 2 | 3 | # [Preview the site](https://alsiam.github.io/web-projects/macbook-cart) 4 | 5 | ![image info](../assets/images/macbook-cart.png) -------------------------------------------------------------------------------- /navigation-bar/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/navigation-bar/bg.jpg -------------------------------------------------------------------------------- /navigation-bar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Simple Menu Bar 7 | 8 | 9 | 10 | 11 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /navigation-bar/readme.md: -------------------------------------------------------------------------------- 1 | # Navigation Bar 2 | 3 | # [Preview the site](https://alsiam.github.io/web-projects/navigation-bar) 4 | 5 | ![image info](../assets/images/navigation-bar.png) -------------------------------------------------------------------------------- /navigation-bar/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | text-decoration: none; 5 | list-style: none; 6 | box-sizing: border-box; 7 | } 8 | body { 9 | background-image: url("bg.jpg"); 10 | background-repeat: no-repeat; 11 | background-size: cover; 12 | } 13 | nav { 14 | background-color: #333; 15 | height: 80px; 16 | padding: 0 5%; 17 | } 18 | label.logo { 19 | color: #fff; 20 | font-size: 35px; 21 | font-weight: bold; 22 | margin: 0 100px; 23 | cursor: pointer; 24 | line-height: 80px; 25 | } 26 | nav ul { 27 | float: right; 28 | margin-right: 40px; 29 | } 30 | nav ul li { 31 | display: inline-block; 32 | margin: 0 20px; 33 | line-height: 80px; 34 | } 35 | nav ul li a { 36 | color: #fff; 37 | font-size: 18px; 38 | padding: 7px; 39 | text-align: center; 40 | border-radius: 3px; 41 | text-transform: uppercase; 42 | position: relative; 43 | transition: 0.8s; 44 | } 45 | nav ul li a::before { 46 | position: absolute; 47 | left: 0; 48 | bottom: 0; 49 | content: ""; 50 | width: 0; 51 | height: 3px; 52 | transition: 0.8s; 53 | } 54 | a:hover::before, 55 | a.active::before { 56 | content: ""; 57 | width: 100%; 58 | height: 3px; 59 | background-color: #fff; 60 | } 61 | a:hover, 62 | a.active { 63 | background-color: #666; 64 | } 65 | -------------------------------------------------------------------------------- /personal-website/icons/Group 33059.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/personal-website/icons/Group 33059.png -------------------------------------------------------------------------------- /personal-website/icons/image 6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/personal-website/icons/image 6.png -------------------------------------------------------------------------------- /personal-website/icons/image 7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/personal-website/icons/image 7.png -------------------------------------------------------------------------------- /personal-website/img/bg1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/personal-website/img/bg1.png -------------------------------------------------------------------------------- /personal-website/img/img1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/personal-website/img/img1.png -------------------------------------------------------------------------------- /personal-website/img/img2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/personal-website/img/img2.png -------------------------------------------------------------------------------- /personal-website/img/img3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/personal-website/img/img3.png -------------------------------------------------------------------------------- /personal-website/img/profile1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/personal-website/img/profile1.png -------------------------------------------------------------------------------- /personal-website/img/profile2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/personal-website/img/profile2.png -------------------------------------------------------------------------------- /personal-website/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Personal Website | By AL SIAM 9 | 10 | 11 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 | 23 | 31 |
32 |
33 | 34 |
35 |
36 |
37 |

Hello, I'm Saif Al Siam

38 |

A full stack allaround designer that placerat 39 | in massa consectetur

40 | Hire Me 41 |
42 |
43 | 44 |
45 |
46 |
47 |
48 |
49 | 50 |
51 | 52 |
53 |
54 |

About

55 |

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the 56 | industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type 57 | and scrambled it to make a type specimen book.

58 | Download CV 59 |
60 | 61 |
62 |
63 | 64 | 65 |
66 |
67 |

My Services

68 |
69 |
70 |

71 |

Logo Design

72 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est et dicta enim incidunt maxime, necessitatibus aspernatur saepe eaque quia. Officiis amet, voluptatum ducimus dolor cum explicabo maxime unde porro beatae!

73 |
74 |
75 |

76 |

Web Design

77 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est et dicta enim incidunt maxime, necessitatibus aspernatur saepe eaque quia. Officiis amet, voluptatum ducimus dolor cum explicabo maxime unde porro beatae!

78 |
79 |
80 |

81 |

Web Development

82 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est et dicta enim incidunt maxime, necessitatibus aspernatur saepe eaque quia. Officiis amet, voluptatum ducimus dolor cum explicabo maxime unde porro beatae!

83 |
84 |
85 |
86 |
87 | 88 | 89 |
90 |
91 |

LASTET WORKING PROJECT

92 |
93 |
94 | 95 |

Power-x-gym (gym website)

96 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum totam voluptatibus quos minima 97 | expedita explicabo.

98 |
99 |
100 | 101 |

Creative Agency

102 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum totam voluptatibus quos minima 103 | expedita explicabo.

104 |
105 |
106 | 107 |

Hard Rock Music

108 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum totam voluptatibus quos minima 109 | expedita explicabo.

110 |
111 |
112 |
113 |
114 | 115 |
116 |
117 |
118 |

Work Inquiry

119 | Let's Chat 120 |
121 |
122 | 123 | 124 |
125 | 126 |
127 |
128 |

Stay Connected

129 |

alsiamworld@gmail.com

130 | 135 |
136 |
137 | 138 | 139 | -------------------------------------------------------------------------------- /personal-website/readme.md: -------------------------------------------------------------------------------- 1 | # Personal Web 2 | 3 | # [Preview the site](https://alsiam.github.io/web-projects/personal-web) 4 | 5 | ![image info](../assets/images/personal-web.png) -------------------------------------------------------------------------------- /personal-website/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | body{ 6 | font-family: 'Roboto', sans-serif; 7 | } 8 | h1,h2,h3,h4,span{ 9 | font-family: 'Bebas Neue', sans-serif; 10 | } 11 | .container{ 12 | width: 80%; 13 | margin: auto; 14 | overflow: hidden; 15 | } 16 | 17 | 18 | 19 | header{ 20 | padding-bottom: 50px; 21 | } 22 | .logo{ 23 | width: 20%; 24 | float: left; 25 | } 26 | .logo span{ 27 | color: tomato; 28 | font-size: 35px; 29 | letter-spacing: 3px; 30 | padding: 3px 0; 31 | margin: 7px 0; 32 | display: block; 33 | border-bottom: 3px solid tomato; 34 | } 35 | .menu-box{ 36 | width: 80%; 37 | overflow: hidden; 38 | } 39 | .menu-box ul{ 40 | float: right; 41 | } 42 | .menu-box ul li{ 43 | display: inline-block; 44 | } 45 | .menu-box ul li a{ 46 | text-decoration: none; 47 | color: black; 48 | padding: 20px 20px; 49 | display: block; 50 | font-size: 20px; 51 | font-weight: 700; 52 | } 53 | 54 | 55 | .half-width{ 56 | width: 40%; 57 | float: left; 58 | } 59 | .half-width img{ 60 | width: 100%; 61 | } 62 | .intro-img{ 63 | margin-left: 20%; 64 | } 65 | .intro-title h1{ 66 | color: #363958; 67 | font-size: 70px; 68 | line-height: 80px; 69 | } 70 | .intro-title span{ 71 | display:block; 72 | color: #FF8367; 73 | letter-spacing: 5px; 74 | } 75 | .intro-title p{ 76 | width: 80%; 77 | margin-top: 10px; 78 | margin-bottom: 50px; 79 | } 80 | .link-button { 81 | color: white; 82 | text-decoration: none; 83 | background-image: linear-gradient(lightsalmon,tomato); 84 | padding: 15px 30px; 85 | border-radius: 5px; 86 | font-size: 18px; 87 | font-weight: bold; 88 | } 89 | .about-title{ 90 | margin-left: 20%; 91 | margin-top: 100px; 92 | } 93 | .about-title h2{ 94 | font-size: 50px; 95 | } 96 | .about-title p{ 97 | margin: 30px 0; 98 | margin-bottom: 50px; 99 | } 100 | 101 | 102 | 103 | 104 | .service-box{ 105 | padding: 50px 0; 106 | } 107 | .service-box h3{ 108 | color: #363958; 109 | text-align: center; 110 | font-size: 45px; 111 | font-weight: 700; 112 | margin: 20px 0; 113 | width: 250px; 114 | margin: auto; 115 | margin-bottom: 50px; 116 | } 117 | .service-box span{ 118 | color: #FF8367; 119 | } 120 | .box-wrap{ 121 | padding: 50px; 122 | overflow: hidden; 123 | 124 | } 125 | .box{ 126 | width: 25%; 127 | padding: 3%; 128 | box-shadow: 0px 0px 20px gray; 129 | margin-left: 15px; 130 | margin-right: 10px; 131 | float: left; 132 | position: relative; 133 | 134 | } 135 | .box h1{ 136 | font-size: 80px; 137 | text-align: center; 138 | position: absolute; 139 | top: -50px; 140 | left: 130px; 141 | color: #444; 142 | } 143 | .box h2{ 144 | font-size: 30px; 145 | text-align: center; 146 | font-weight: 500; 147 | margin-top: 30px; 148 | } 149 | .box p{ 150 | font-size: 15px; 151 | text-align: justify; 152 | } 153 | 154 | 155 | 156 | .project-box{ 157 | overflow: hidden; 158 | margin-bottom: 50px; 159 | } 160 | .project-box h1{ 161 | color: #FF8367; 162 | font-size: 45px; 163 | text-align: center; 164 | margin-bottom: 50px; 165 | } 166 | .project-box span{ 167 | color: #363958; 168 | } 169 | .project-work{ 170 | padding: 20px 0; 171 | overflow: hidden; 172 | } 173 | .work-box{ 174 | width: 25%; 175 | padding: 2%; 176 | border-radius: 10px; 177 | float: left; 178 | box-shadow: 0px 0px 20px gray; 179 | margin-left: 25px; 180 | margin-right: 25px; 181 | height: 300px; 182 | } 183 | 184 | .work-box img{ 185 | width: 100%; 186 | border-radius: 10px; 187 | } 188 | .work-box h3{ 189 | margin: 10px 0; 190 | font-family: Roboto; 191 | } 192 | .work-box p{ 193 | width: 100%; 194 | text-align: justify; 195 | } 196 | 197 | 198 | 199 | .chat-box{ 200 | width: 70%; 201 | margin: auto; 202 | } 203 | 204 | .inquiry-desc{ 205 | background-image: url(img/bg1.png); 206 | background-repeat: no-repeat; 207 | background-size: 100% ; 208 | overflow: hidden; 209 | } 210 | .inquiry-desc h1{ 211 | color: white; 212 | font-size: 50px; 213 | font-weight: 400; 214 | margin: 9%; 215 | float: left 216 | 217 | } 218 | .inquiry-desc a{ 219 | padding: 10px 15px; 220 | border: none; 221 | outline: none; 222 | margin: 10%; 223 | display: block; 224 | width: 150px; 225 | text-align: center; 226 | float: right; 227 | 228 | } 229 | 230 | 231 | 232 | .contact-box{ 233 | margin: 50px 0; 234 | } 235 | .contact-box h3{ 236 | text-align: center; 237 | font-weight: 300; 238 | } 239 | .contact-box h1{ 240 | text-align: center; 241 | font-weight: 300; 242 | font-size: 40px; 243 | } 244 | .social-box{ 245 | width: 15%; 246 | margin: auto; 247 | overflow: hidden; 248 | } 249 | .contact-box img{ 250 | width: 40px; 251 | text-align: center; 252 | display: block; 253 | float: left; 254 | padding: 0 10px; 255 | margin: auto; 256 | } -------------------------------------------------------------------------------- /pomodoro-timer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Pomodoro Timer 9 | 10 | 11 | 12 |
13 |

14 | Pomodoro Timer 15 |

16 |

17 | 25:00 18 |

19 |
20 | 21 | 22 | 23 |
24 |
25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /pomodoro-timer/script.js: -------------------------------------------------------------------------------- 1 | const start = document.getElementById('start'); 2 | const stop = document.getElementById('stop'); 3 | const reset = document.getElementById('reset'); 4 | const timer = document.getElementById('timer'); 5 | 6 | 7 | let interval; 8 | 9 | let timeLeft = 1500; 10 | 11 | function update(){ 12 | let minutes = Math.floor(timeLeft / 60); 13 | let seconds = timeLeft % 60 ; 14 | let formattedTime =` ${minutes} : ${seconds}`; 15 | 16 | timer.innerHTML = formattedTime; 17 | } 18 | 19 | function startTimer(){ 20 | interval = setInterval(() => { 21 | timeLeft--; 22 | update(); 23 | if(timeLeft === 0){ 24 | alert('Times Up'); 25 | timeLeft = 1500; 26 | } 27 | }, 1000); 28 | } 29 | 30 | 31 | function stopTimer(){ 32 | clearInterval(interval); 33 | } 34 | function resetTimer(){ 35 | clearInterval(interval); 36 | timeLeft = 1500; 37 | update(); 38 | } 39 | 40 | start.addEventListener('click', startTimer); 41 | stop.addEventListener('click', stopTimer); 42 | reset.addEventListener('click', resetTimer); -------------------------------------------------------------------------------- /pomodoro-timer/style.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | margin: 0 auto; 3 | max-width: 400px; 4 | text-align: center; 5 | padding: 20px; 6 | font-family: "Roboto",sans-serif; 7 | background-color: #f5f5f5; 8 | margin-top:120px; 9 | } 10 | 11 | .title{ 12 | font-size: 36px; 13 | margin-bottom: 10px; 14 | color: #2c3e50; 15 | } 16 | 17 | .timer{ 18 | font-size: 72px; 19 | color: #2c3e50; 20 | } 21 | 22 | button{ 23 | font-size: 18px; 24 | padding:10px 20px; 25 | margin: 10px; 26 | color: #fff; 27 | border: none; 28 | border-radius: 4px; 29 | cursor: pointer; 30 | text-transform: uppercase; 31 | transition: opacity .3s ease-in-out; 32 | } 33 | 34 | button:hover{ 35 | opacity: 70%; 36 | } 37 | 38 | #start{ 39 | background-color: #37ae60; 40 | } 41 | 42 | #stop{ 43 | background-color: #c0392b; 44 | } 45 | 46 | #reset{ 47 | background-color: #7f8c8d; 48 | } 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /portfolio/images/alsiam.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/portfolio/images/alsiam.jpg -------------------------------------------------------------------------------- /portfolio/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "portfolio", 3 | "author": "alsiam", 4 | "license": "MIT", 5 | "scripts": { 6 | "build:style": "tailwindcss -i ./styles/input.css -o ./styles/output.css --watch" 7 | }, 8 | "devDependencies": { 9 | "tailwindcss": "^3.2.7" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /portfolio/readme.md: -------------------------------------------------------------------------------- 1 | # Simple Folio 2 | 3 | # [Preview the site](https://alsiam.github.io/web-projects/portfolio) 4 | 5 | ![image info](../assets/images/portfolio.png) -------------------------------------------------------------------------------- /portfolio/styles/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /portfolio/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ["./src/**/*.{html,js}"], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | } -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Web PROJECTS 🚀 2 | 3 | Welcome to the **Web PROJECTS**! 🎉 This repository contains over 22+ 🔥 Web projects created using HTML, CSS, and JS. These projects showcase the power of web design and the beauty that can be achieved with these technologies. Each project is designed to be easy to understand and follow, making it perfect for anyone looking to learn more about web design. 4 | 5 | ## Project List 📜 6 | 7 | | No.| Project | Source Code | Live Preview | 8 | | :-: | ----------------|----------------------------------------------------------------------|----------------------------------------------------- 9 | | 01 | Spourmo Web | [View Code](https://github.com/alsiam/web-projects/tree/main/spourmo-web) | [Preview Site](https://alsiam.github.io/web-projects/spourmo-web) 10 | | 02 | Weather Info | [View Code](https://github.com/alsiam/web-projects/tree/main/weather-info) | [Preview Site](https://alsiam.github.io/web-projects/weather-info) 11 | | 03 | Cuda Portfolio | [View Code](https://github.com/alsiam/web-projects/tree/main/cuda-portfolio) | [Preview Site](https://alsiam.github.io/web-projects/cuda-portfolio) 12 | | 04 | Youtube UI | [View Code](https://github.com/alsiam/web-projects/tree/main/youtube-ui) | [Preview Site](https://alsiam.github.io/web-projects/youtube-ui) 13 | | 05 | Bike Palace | [View Code](https://github.com/alsiam/web-projects/tree/main/bike-palace) | [Preview Site](https://alsiam.github.io/web-projects/bike-palace) 14 | | 06 | Dream Theme | [View Code](https://github.com/alsiam/web-projects/tree/main/dream-theme) | [Preview Site](https://alsiam.github.io/web-projects/dream-theme) 15 | | 07 | Todo List | [View Code](https://github.com/alsiam/web-projects/tree/main/todo-list) | [Preview Site](https://alsiam.github.io/web-projects/todo-list) 16 | | 08 | Simple Blog | [View Code](https://github.com/alsiam/web-projects/tree/main/simple-blog) | [Preview Site](https://alsiam.github.io/web-projects/simple-blog) 17 | | 09 | Facebook Login | [View Code](https://github.com/alsiam/web-projects/tree/main/facebook-login) | [Preview Site](https://alsiam.github.io/web-projects/facebook-login) 18 | | 10 | Calculator | [View Code](https://github.com/alsiam/web-projects/tree/main/calculator) | [Preview Site](https://alsiam.github.io/web-projects/calculator) 19 | | 11 | Hamburger Food | [View Code](https://github.com/alsiam/web-projects/tree/main/hamburger-food) | [Preview Site](https://alsiam.github.io/web-projects/hamburger-food) 20 | | 12 | Bat Ball | [View Code](https://github.com/alsiam/web-projects/tree/main/bat-ball) | [Preview Site](https://alsiam.github.io/web-projects/bat-ball) 21 | | 13 | Navigation Bar | [View Code](https://github.com/alsiam/web-projects/tree/main/navigation-bar) | [Preview Site](https://alsiam.github.io/web-projects/navigation-bar) 22 | | 14 | Football Club | [View Code](https://github.com/alsiam/web-projects/tree/main/football-club) | [Preview Site](https://alsiam.github.io/web-projects/football-club) 23 | | 15 | Fashion Ecommerce| [View Code](https://github.com/alsiam/web-projects/tree/main/fashion-ecommerce)| [Preview Site](https://alsiam.github.io/web-projects/fashion-ecommerce) 24 | | 16 | Jamuna News | [View Code](https://github.com/alsiam/web-projects/tree/main/jamuna-news) | [Preview Site](https://alsiam.github.io/web-projects/jamuna-news) 25 | | 17 | Personal Web | [View Code](https://github.com/alsiam/web-projects/tree/main/personal-website) | [Preview Site](https://alsiam.github.io/web-projects/personal-website) 26 | | 18 | Simple Cart | [View Code](https://github.com/alsiam/web-projects/tree/main/simple-cart) | [Preview Site](https://alsiam.github.io/web-projects/simple-cart) 27 | | 19 | Portfolio | [View Code](https://github.com/alsiam/web-projects/tree/main/portfolio) | [Preview Site](https://alsiam.github.io/web-projects/portfolio) 28 | | 20 | Systematic Page | [View Code](https://github.com/alsiam/web-projects/tree/main/systematic-page) | [Preview Site](https://alsiam.github.io/web-projects/systematic-page) 29 | | 21 | Books Library | [View Code](https://github.com/alsiam/web-projects/tree/main/books-library) | [Preview Site](https://alsiam.github.io/web-projects/books-library) 30 | | 22 | Macbook Cart | [View Code](https://github.com/alsiam/web-projects/tree/main/macbook-cart) | [Preview Site](https://alsiam.github.io/web-projects/macbook-cart) 31 | | 23 | Restaurant Menu | [View Code](https://github.com/alsiam/web-projects/tree/main/restaurnat-menu) | [Preview Site](https://alsiam.github.io/web-projects/restaurnat-menu) 32 | 33 | ## How to Contribute 👨‍💻 34 | 35 | Want to add your own project to our collection? We welcome all contributions, big or small. Here's how you can get started: 36 | 37 | 1. Fork the repository 38 | 2. Create a new branch for your changes 39 | 3. Make your changes and commit them 40 | 4. Submit a pull request 41 | 42 | ### Contact Us 43 | 44 | If you have any questions or feedback, feel free to reach out to us. We're always happy to hear from you! 45 | 46 | ## License 📄 47 | 48 | This repository is licensed under the [MIT](https://github.com/alsiam/web-projects/blob/main/LICENSE). 49 | 50 | [![Build Status](https://img.shields.io/travis/alsiam/REPO.svg?style=flat-square)](https://travis-ci.org/alsiam/web-projects) 51 | [![License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://github.com/alsiam/web-projects/blob/master/LICENSE) 52 | 53 | ## Acknowledgements 54 | 55 | We would like to acknowledge and thank the open-source community for their contributions to this project. 56 | 57 | Join us in creating something truly beautiful on the web. 58 | -------------------------------------------------------------------------------- /restaurant-menu/api.js: -------------------------------------------------------------------------------- 1 | // Load First 2 | const url = `https://www.themealdb.com/api/json/v1/1/search.php?s=chicken`; 3 | fetch(url) 4 | .then(res => res.json()) 5 | .then(data => displayMeal(data.meals)) 6 | .catch(error => { 7 | 8 | document.getElementById('api-error').innerHTML = ` Something went wrong `; 9 | 10 | }); 11 | 12 | const searchFood = () => { 13 | // Preloader adding 14 | const preloader = () => { 15 | document.getElementById('loading').classList.remove('invisible'); 16 | document.getElementById('search-result').classList.add('d-none'); 17 | setTimeout(() => { 18 | document.getElementById('loading').classList.add('invisible'); 19 | document.getElementById('search-result').classList.remove('d-none') 20 | }, 3000) 21 | } 22 | preloader(); 23 | 24 | const searchInput = document.getElementById('search-field'); 25 | const searchValue = searchInput.value; 26 | 27 | // Clear Data 28 | searchInput.value = ''; 29 | 30 | if (searchValue == '') { 31 | document.getElementById('error-message').innerHTML = ` 32 |

No Result Found

33 | `; 34 | } else { 35 | // Load Data 36 | const url = `https://www.themealdb.com/api/json/v1/1/search.php?s=${searchValue}`; 37 | fetch(url) 38 | .then(res => res.json()) 39 | .then(data => displayMeal(data.meals)) 40 | .catch(error => { 41 | 42 | document.getElementById('api-error').innerHTML = ` Something went wrong `; 43 | 44 | }); 45 | } 46 | } 47 | 48 | 49 | const displayMeal = getMeals => { 50 | 51 | const searchResult = document.getElementById('search-result'); 52 | 53 | // Clear PRevious 54 | searchResult.textContent = ''; 55 | 56 | if (getMeals == null) { 57 | document.getElementById('error-message').innerHTML = ` 58 |

No Result Found

59 | ` 60 | } else { 61 | document.getElementById('error-message').innerHTML = ""; 62 | } 63 | getMeals.forEach(meal => { 64 | const mealList = document.createElement('div'); 65 | mealList.classList.add('col'); 66 | 67 | mealList.innerHTML = ` 68 |
69 | ... 70 |
71 |
${meal.strMeal}
72 |

${(meal.strInstructions).slice(0, 100)}

73 |
74 |
75 | `; 76 | 77 | 78 | searchResult.appendChild(mealList); 79 | }) 80 | 81 | } 82 | const loadMealDetails = idMeal => { 83 | 84 | const url = `https://www.themealdb.com/api/json/v1/1/lookup.php?i=${idMeal}`; 85 | fetch(url) 86 | .then(res => res.json()) 87 | .then(data => { 88 | const meal = data.meals[0]; 89 | const mealDetails = document.getElementById('meal-details'); 90 | mealDetails.innerHTML = ''; 91 | 92 | const div = document.createElement('div'); 93 | div.classList.add('card'); 94 | div.innerHTML = ` 95 | ... 96 |
97 |
${meal.strMeal}
98 |

${(meal.strInstructions).slice(0, 150)}

99 | Learn To Cook 100 |
101 | `; 102 | mealDetails.appendChild(div); 103 | }) 104 | 105 | } -------------------------------------------------------------------------------- /restaurant-menu/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | The MealDB by AL Siam 9 | 10 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |

Welcome To The Unique Resturants

19 |
20 | 23 | 25 |
26 | 27 | 28 | 32 | 33 | 34 |
35 |
36 | 37 | 39 |
40 | 41 |
42 | 43 | 44 | 46 |
47 | 48 |
49 |
50 |
51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /restaurant-menu/readme.md: -------------------------------------------------------------------------------- 1 | # Restaurant Menu 2 | 3 | # [Preview the site](https://alsiam.github.io/web-projects/restaurant-menu) 4 | 5 | ![image info](../assets/images/restaurant-menu.png) -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | window.onload = () => { 2 | const featuredProjectList = featuredProjects.map((project) => { 3 | return ` 4 |
5 |
6 | hamburger food 7 |
8 |
9 |

${project.name}

10 |
11 | Source Code 14 | Preview 16 | Demo 17 |
18 |
19 |
20 | `; 21 | }); 22 | 23 | document.getElementById("featured-projects").innerHTML = 24 | featuredProjectList.join(""); 25 | const totalProjectList = totalProjects.map((project) => { 26 | return ` 27 |
28 |
29 | hamburger food 30 |
31 |
32 |

${project.name}

33 |
34 | Source Code 37 | Preview 39 | Demo 40 |
41 |
42 |
43 | `; 44 | }); 45 | 46 | document.getElementById("total-projects").innerHTML = 47 | totalProjectList.join(""); 48 | 49 | setTimeout(() => { 50 | document.getElementById("preloader").style.display = "none"; 51 | }, 2000); 52 | }; 53 | -------------------------------------------------------------------------------- /simple-blog/contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | The Blog Site | By Al Siam 9 | 10 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 |
23 | 37 | 40 |
41 |
42 | 61 |
62 |
63 | 64 | 65 | 66 | 67 |
68 |

Contact Me

69 |
70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 |
79 | 80 |
81 | 82 | 83 | 84 | 85 |
86 |
87 |
88 |

News

89 | 100 |
101 |
102 |

News

103 | 114 |
115 |
116 |

News

117 | 128 |
129 |
130 |
131 | 132 |
133 |

© Copyright 2021 . All Rights Reserverd By Al Siam World

134 |
135 | 136 | 137 | 138 | -------------------------------------------------------------------------------- /simple-blog/images/ad22.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/simple-blog/images/ad22.jpg -------------------------------------------------------------------------------- /simple-blog/images/code.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/simple-blog/images/code.jpg -------------------------------------------------------------------------------- /simple-blog/images/coding.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/simple-blog/images/coding.jpg -------------------------------------------------------------------------------- /simple-blog/images/contact.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/simple-blog/images/contact.jpg -------------------------------------------------------------------------------- /simple-blog/images/design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/simple-blog/images/design.jpg -------------------------------------------------------------------------------- /simple-blog/images/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/simple-blog/images/logo.jpg -------------------------------------------------------------------------------- /simple-blog/images/nemo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/simple-blog/images/nemo.jpg -------------------------------------------------------------------------------- /simple-blog/images/siam.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/simple-blog/images/siam.jpg -------------------------------------------------------------------------------- /simple-blog/images/toystory.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/simple-blog/images/toystory.jpg -------------------------------------------------------------------------------- /simple-blog/images/up.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/simple-blog/images/up.jpg -------------------------------------------------------------------------------- /simple-blog/images/walle.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/simple-blog/images/walle.jpg -------------------------------------------------------------------------------- /simple-blog/portfolio.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | The Blog Site | By Al Siam 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 |
30 | 44 | 47 |
48 |
49 | 68 |
69 |
70 | 71 | 72 | 73 | 74 |
75 | 76 |
77 | 78 |

Portfolio :

79 | 80 |
81 | 1 person standing 82 |
83 | 84 |
85 | html 86 |
87 |
  70%
88 |
89 | Css 90 |
91 |
  40%
92 |
93 | 94 | JavaScript 95 |
96 |
  20%
97 |
98 | 99 | Bootstrap 100 |
101 |
  50%
102 |
103 | 104 | PHP 105 |
106 |
  10%
107 |
108 | 109 | Wordpress 110 |
111 |
  20%
112 |
113 |
114 | 115 |
116 | 117 |
118 | 119 | 120 |
121 |

© Copyright 2021 . All Rights Reserverd By Al Siam World

122 |
123 | 124 | 125 | 126 | -------------------------------------------------------------------------------- /simple-blog/readme.md: -------------------------------------------------------------------------------- 1 | # Simple Blog 2 | 3 | # [Preview the site](https://alsiam.github.io/web-projects/simple-blog) 4 | 5 | ![image info](../assets/images/simple-blog.png) -------------------------------------------------------------------------------- /simple-cart/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: "Montserrat", sans-serif; 3 | overflow-x: hidden; 4 | } 5 | 6 | /* Header Style */ 7 | .header { 8 | padding-top: 20px; 9 | padding-bottom: 20px; 10 | background-color: rgba(0, 89, 255, 0.479); 11 | border-bottom: 3px solid lightgrey; 12 | } 13 | .color { 14 | color: #333; 15 | font-size: 50px; 16 | } 17 | .logo { 18 | color: #fff; 19 | font-size: 40px; 20 | font-weight: 700; 21 | } 22 | .icon-list, 23 | .icon-list1 { 24 | display: inline-block; 25 | display: inline-block; 26 | padding: 5px 26px 0px 18px; 27 | } 28 | .input-field { 29 | display: flex; 30 | } 31 | .search-btn { 32 | background: #333; 33 | color: #fff; 34 | padding: 6px; 35 | display: block; 36 | border-radius: 0px 10px 10px 0px; 37 | border: none; 38 | } 39 | .the-btn { 40 | background: #333; 41 | color: #fff; 42 | padding: 6px; 43 | display: block; 44 | border-radius: 5px; 45 | border: none; 46 | transition: .6s; 47 | border: 1px solid #333; 48 | } 49 | .the-btn:hover{ 50 | background-color: transparent; 51 | border: 1px solid #333; 52 | } 53 | .title { 54 | padding: 10px; 55 | margin: auto; 56 | color: cadetblue; 57 | text-align: center; 58 | font-weight: 900; 59 | font-size: 45px; 60 | } 61 | 62 | /* Products */ 63 | #all-products { 64 | display: grid; 65 | grid-template-columns: repeat(3, 1fr); 66 | text-align: center; 67 | width: 100%; 68 | margin: auto; 69 | align-items: center; 70 | justify-content: center; 71 | } 72 | .main-header { 73 | display: flex; 74 | justify-content: center; 75 | align-items: center; 76 | } 77 | 78 | /* single product styles */ 79 | .single-product { 80 | margin: 15px; 81 | height: 475px; 82 | padding: 10px; 83 | background: linear-gradient(180deg, white, rgba(0, 20, 255, 0.1)); 84 | border-radius: 10px; 85 | box-shadow: 4px 4px 9px rgb(163, 161, 161); 86 | transition: 0.6s; 87 | } 88 | .single-product:hover { 89 | box-shadow: px 9px 12px rgb(163, 161, 161); 90 | background: linear-gradient(180deg, white, rgba(255, 0, 0, 0.1)); 91 | } 92 | .product-image { 93 | width: 150px; 94 | height: 150px; 95 | } 96 | .product-title { 97 | font-size: large; 98 | font-weight: bold; 99 | } 100 | .icon-color { 101 | color: rgb(248, 183, 18); 102 | font-size: small; 103 | } 104 | .icon-detail { 105 | font-weight: bolder; 106 | } 107 | .product-price { 108 | font-size: 25px; 109 | } 110 | .buy-now { 111 | background-color: rgb(6, 6, 7); 112 | color: white; 113 | font-weight: bolder; 114 | } 115 | 116 | .rating { 117 | color: rgb(201, 201, 201); 118 | } 119 | 120 | .fill-rate { 121 | color: #fda500ed; 122 | } 123 | 124 | /* cart styles */ 125 | .cart { 126 | background-color: rgba(255, 0, 0, 0.1); 127 | width: 350px; 128 | padding: 10px; 129 | box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5); 130 | border-radius: 5px; 131 | margin-right: 30px; 132 | position: fixed; 133 | } 134 | .cart-main { 135 | padding-right: 30px; 136 | } 137 | /* styles for responsive site */ 138 | @media only screen and (max-width: 768px) { 139 | #all-products { 140 | display: grid; 141 | grid-template-columns: repeat(1, 1fr); 142 | } 143 | .cart { 144 | width: 300px; 145 | /* border: 1px solid green; */ 146 | padding: 10px; 147 | box-shadow: 10px 10px 20px gray; 148 | border-radius: 5px; 149 | margin-right: 30px; 150 | position: fixed; 151 | } 152 | .cart-main { 153 | padding-right: 10px; 154 | } 155 | } 156 | @media only screen and (max-width: 468px) { 157 | #all-products { 158 | display: grid; 159 | grid-template-columns: repeat(1, 1fr); 160 | } 161 | } 162 | -------------------------------------------------------------------------------- /simple-cart/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Al Smart Shop - AL Siam 9 | 10 | 11 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 23 | 24 | 25 | 26 | 27 |
28 |
29 |
30 | 31 |
32 | 33 |
34 | 35 |
36 |
37 |
38 | 40 | 41 |
42 |
43 |
44 | 45 |
46 |
47 | 48 |

Your wishlist

49 |
50 |
51 | 52 |

Your card

53 |
54 |
55 |
56 |
57 |
58 | 59 |
60 | 61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 | 69 | 70 |

My-Cart

71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 |
Total Added-Products:0
Price:$ 0
Delivery-Charge:$ 20
Total-Tax:$ 0
Total$ 0
102 |
103 | 104 |
105 |
106 |
107 |
108 |
109 | 110 | 111 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /simple-cart/readme.md: -------------------------------------------------------------------------------- 1 | # Shopping Cart 2 | 3 | # [Preview the site](https://alsiam.github.io/web-projects/shopping-cart) 4 | 5 | ![image info](../assets/images/shopping-cart.png) -------------------------------------------------------------------------------- /spourmo-web/img/100x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/spourmo-web/img/100x100.png -------------------------------------------------------------------------------- /spourmo-web/img/480x300.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/spourmo-web/img/480x300.png -------------------------------------------------------------------------------- /spourmo-web/readme.md: -------------------------------------------------------------------------------- 1 | # Spourmo Web 2 | 3 | # [Preview the site](https://alsiam.github.io/web-projects/spourmo-web) 4 | 5 | ![image info](../assets/images/spourmo-web.png) -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | .banner{ 2 | z-index: 999; 3 | position: relative; 4 | background: rgb(23, 25, 27); 5 | font-weight: 500; 6 | padding: 12px 0; 7 | } 8 | .banner-wrap{ 9 | display: flex;; 10 | justify-content: center; 11 | align-items: center; 12 | } 13 | .banner-card{ 14 | font-size: 16px; 15 | color: black; 16 | background-color: rgb(99, 216, 218); 17 | padding: 1px 10px; 18 | border-radius: 10px; 19 | margin-right: 4px; 20 | font-weight: 600; 21 | } 22 | .banner-desc{ 23 | text-align: center; 24 | color: white; 25 | font-weight: 500; 26 | } 27 | .banner-btn{ 28 | outline: none; 29 | border: none;; 30 | color: black; 31 | background-color: white; 32 | padding: 2px 8px; 33 | display: flex; 34 | align-items: center; 35 | margin-left: 8px; 36 | border-radius: 8px; 37 | min-width: max-content; 38 | max-width: max-content; 39 | transition: .3s ease-in-out; 40 | } 41 | .banner-btn:hover{ 42 | color: white; 43 | background-color: black; 44 | } 45 | -------------------------------------------------------------------------------- /systematic-page/img/headImg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/systematic-page/img/headImg.png -------------------------------------------------------------------------------- /systematic-page/img/second.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/systematic-page/img/second.png -------------------------------------------------------------------------------- /systematic-page/img/third.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/systematic-page/img/third.png -------------------------------------------------------------------------------- /systematic-page/readme.md: -------------------------------------------------------------------------------- 1 | # Systematic Page 2 | 3 | # [Preview the site](https://alsiam.github.io/web-projects/systematic-page) 4 | 5 | ![image info](../assets/images/systematic-page.png) -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: [], 3 | theme: { 4 | extend: {}, 5 | }, 6 | plugins: [], 7 | } -------------------------------------------------------------------------------- /todo-list/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | To Do List 9 | 10 | 11 | 12 | 13 |
14 |
15 | 16 |

To Do List

17 |
18 | 19 | 20 | 21 |
    22 | 23 |
    24 | 25 | 26 | 27 |
    28 |
    29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /todo-list/readme.md: -------------------------------------------------------------------------------- 1 | # Todo List 2 | 3 | # [Preview the site](https://alsiam.github.io/web-projects/todo-list) 4 | 5 | ![image info](../assets/images/todo-list.png) -------------------------------------------------------------------------------- /todo-list/todo.js: -------------------------------------------------------------------------------- 1 | const localStorageList = () => { 2 | const list = getList(); 3 | for (const name in list) { 4 | displayList(name) 5 | } 6 | } 7 | const addItem = () => { 8 | const inputField = document.getElementById('input-field'); 9 | const inputValue = inputField.value; 10 | if (!inputValue) { 11 | return 12 | } 13 | 14 | // display List 15 | displayList(inputValue); 16 | 17 | // Local Storage 18 | addList(inputValue); 19 | 20 | // clear input field 21 | inputField.value = ''; 22 | 23 | } 24 | const displayList = name => { 25 | const ul = document.getElementById('ul-list'); 26 | const li = document.createElement('li'); 27 | li.innerHTML = name; 28 | 29 | ul.appendChild(li); 30 | } 31 | const getList = () => { 32 | const list = localStorage.getItem('list'); 33 | let listObject; 34 | if (list) { 35 | listObject = JSON.parse(list); 36 | } 37 | else { 38 | listObject = {}; 39 | } 40 | return listObject; 41 | } 42 | const addList = name => { 43 | const list = getList(); 44 | if (list[name]) { 45 | list[name] = list[name] + 1; 46 | } else { 47 | list[name] = 1; 48 | } 49 | const listStringified = JSON.stringify(list); 50 | localStorage.setItem('list', listStringified); 51 | 52 | } 53 | localStorageList(); 54 | const resetAll = () => { 55 | document.getElementById('ul-list').textContent = ''; 56 | localStorage.removeItem('list'); 57 | } -------------------------------------------------------------------------------- /travel_portfolio/css/responsive.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | @media screen and (max-width: 460px){ 5 | .featured-item-content{ 6 | -webkit-transform: translateY(68%); 7 | -ms-transform: translateY(68%); 8 | transform: translateY(68%); 9 | } 10 | } 11 | 12 | @media screen and (min-width: 678px){ 13 | .test-item::after{ 14 | left: 4rem; 15 | -webkit-transform: translateX(0); 16 | -ms-transform: translateX(0); 17 | transform: translateX(0); 18 | } 19 | .test-item-info{ 20 | left: 1rem; 21 | -webkit-transform: translateX(0); 22 | -ms-transform: translateX(0); 23 | transform: translateX(0); 24 | text-align: left; 25 | display: grid; 26 | grid-template-columns: repeat(2, 1fr); 27 | -webkit-box-align: center; 28 | -ms-flex-align: center; 29 | align-items: center; 30 | } 31 | } 32 | 33 | @media screen and (min-width: 768px){ 34 | .header-title p{ 35 | font-size: 1.4rem; 36 | } 37 | .featured-row, .services-row, .footer-row{ 38 | display: grid; 39 | grid-template-columns: repeat(2, 1fr); 40 | gap: 2rem; 41 | } 42 | .featured-item, .services-item{ 43 | margin: 0; 44 | } 45 | .footer-row{ 46 | text-align: left; 47 | } 48 | .social-links{ 49 | -webkit-box-pack: start; 50 | -ms-flex-pack: start; 51 | justify-content: start; 52 | } 53 | .social-links li:nth-child(1){ 54 | margin-left: 0; 55 | } 56 | .subscribe-form form{ 57 | -webkit-box-align: start; 58 | -ms-flex-align: start; 59 | align-items: flex-start; 60 | } 61 | 62 | .gallery-row, .popular-row, .blog-row, .facts-row{ 63 | display: grid; 64 | grid-template-columns: repeat(2, 1fr); 65 | gap: 2rem; 66 | } 67 | .gallery-item{ 68 | margin: 0; 69 | } 70 | .popular-row, .facts-row{ 71 | gap: 0; 72 | } 73 | .facts-row{ 74 | -webkit-column-gap: 5rem; 75 | -moz-column-gap: 5rem; 76 | column-gap: 5rem; 77 | } 78 | } 79 | @media screen and (min-width: 992px){ 80 | .header-title h1{ 81 | font-size: 4rem; 82 | } 83 | .header-form form{ 84 | -webkit-box-orient: horizontal; 85 | -webkit-box-direction: normal; 86 | -ms-flex-direction: row; 87 | flex-direction: row; 88 | -webkit-box-align: stretch; 89 | -ms-flex-align: stretch; 90 | align-items: stretch; 91 | } 92 | .header-form .form-control, .header-form .btn{ 93 | margin: 0 0.5rem; 94 | } 95 | /* navbar */ 96 | #navbar-show-btn{ 97 | display: none; 98 | } 99 | #navbar-collapse{ 100 | display: block!important; 101 | background-color: transparent; 102 | -webkit-transform: translateX(0); 103 | -ms-transform: translateX(0); 104 | transform: translateX(0); 105 | height: auto; 106 | padding: 0; 107 | position: static; 108 | width: 100%; 109 | } 110 | #navbar-close-btn{ 111 | display: none; 112 | } 113 | .navbar-nav{ 114 | display: -webkit-box; 115 | display: -ms-flexbox; 116 | display: flex; 117 | -webkit-box-pack: end; 118 | -ms-flex-pack: end; 119 | justify-content: flex-end; 120 | margin: 0; 121 | } 122 | .nav-item{ 123 | margin: 0; 124 | margin-left: 2rem; 125 | } 126 | /* change on scroll */ 127 | .navbar-cng .navbar-nav .nav-link{ 128 | color: var(--dark); 129 | } 130 | 131 | .test-row, .about-row, .contact-row{ 132 | display: grid; 133 | grid-template-columns: repeat(2, 1fr); 134 | gap: 2rem; 135 | } 136 | 137 | .popular-row, .blog-row{ 138 | grid-template-columns: repeat(3, 1fr); 139 | } 140 | .about-row{ 141 | -webkit-box-align: center; 142 | -ms-flex-align: center; 143 | align-items: center; 144 | } 145 | .about-left{ 146 | margin: 0; 147 | } 148 | .facts-row{ 149 | grid-template-columns: repeat(4, 1fr); 150 | } 151 | .contact-row{ 152 | row-gap: 0; 153 | } 154 | .contact-form .form-control{ 155 | margin-left: 0; 156 | } 157 | .contact-form .form-control:nth-child(1){ 158 | margin-top: 0; 159 | } 160 | .contact-right{ 161 | margin: 0; 162 | } 163 | .contact-form .btn{ 164 | margin-left: 0; 165 | } 166 | .contact-icon{ 167 | width: 45px; 168 | height: 45px; 169 | font-size: 1.4rem; 170 | margin: 0 1rem; 171 | } 172 | .contact-item{ 173 | display: -webkit-box; 174 | display: -ms-flexbox; 175 | display: flex; 176 | -webkit-box-align: start; 177 | -ms-flex-align: start; 178 | align-items: flex-start; 179 | text-align: left; 180 | } 181 | .contact-item:nth-child(1){ 182 | margin-top: 0; 183 | } 184 | } 185 | 186 | @media screen and (min-width: 1200px){ 187 | .test-row, .gallery-row{ 188 | grid-template-columns: repeat(3, 1fr); 189 | } 190 | .footer-row, .popular-row{ 191 | grid-template-columns: repeat(4, 1fr); 192 | } 193 | } 194 | 195 | @media screen and (min-width: 1400px){ 196 | .featured-row, .services-row{ 197 | grid-template-columns: repeat(3, 1fr); 198 | } 199 | } -------------------------------------------------------------------------------- /travel_portfolio/css/utility.css: -------------------------------------------------------------------------------- 1 | html, body{ 2 | font-family: 'Open Sans', sans-serif; 3 | } 4 | h1, h2, h3, h4, h5, h6{ 5 | font-family: 'Raleway', sans-serif; 6 | } 7 | a{ 8 | color: var(--dark); 9 | text-decoration: none; 10 | } 11 | ul{ 12 | list-style-type: none; 13 | } 14 | button, input[type = "submit"]{ 15 | font-size: 1rem; 16 | cursor: pointer; 17 | font-family: 'Raleway', sans-serif; 18 | } 19 | .container{ 20 | max-width: 1320px; 21 | padding: 0 1rem; 22 | margin: 0 auto; 23 | } 24 | .flex{ 25 | display: -webkit-box; 26 | display: -ms-flexbox; 27 | display: flex; 28 | -webkit-box-align: center; 29 | -ms-flex-align: center; 30 | align-items: center; 31 | -webkit-box-pack: center; 32 | -ms-flex-pack: center; 33 | justify-content: center; 34 | } 35 | .text{ 36 | font-weight: 400; 37 | opacity: 0.9; 38 | line-height: 1.6; 39 | letter-spacing: 1px; 40 | } 41 | .form-control{ 42 | width: 100%; 43 | margin: 0.6rem 0; 44 | max-width: 500px; 45 | border: 1px solid #fff; 46 | border-radius: 0.2rem; 47 | padding: 0.7rem; 48 | font-size: 1rem; 49 | font-family: 'Raleway', sans-serif; 50 | color: #fff; 51 | background-color: transparent; 52 | -webkit-box-sizing: border-box; 53 | box-sizing: border-box; 54 | } 55 | .btn{ 56 | padding: 0.7rem 2.4rem; 57 | border-radius: 0.2rem; 58 | font-weight: 600; 59 | background-color: var(--green); 60 | color: #fff; 61 | border: 1px solid var(--green); 62 | } 63 | .btn:hover{ 64 | opacity: 0.9; 65 | -webkit-transition: var(--trans); 66 | -o-transition: var(--trans); 67 | transition: var(--trans); 68 | } 69 | 70 | /* css stop transition and animation */ 71 | .resize-animation-stopper *{ 72 | -webkit-animation: none!important; 73 | animation: none!important; 74 | -webkit-transition: none!important; 75 | -o-transition: none!important; 76 | transition: none!important; 77 | } 78 | 79 | .py-4{ 80 | padding: 4rem 0; 81 | } 82 | img{ 83 | width: 100%; 84 | display: block; 85 | } 86 | .title-wrap{ 87 | text-align: center; 88 | padding: 1.4rem 0; 89 | margin-bottom: 2rem; 90 | letter-spacing: 2px; 91 | text-transform: uppercase; 92 | } 93 | .lg-title{ 94 | font-size: 1.8rem; 95 | } 96 | .sm-title{ 97 | display: block; 98 | color: #787878; 99 | font-weight: 300; 100 | font-size: 1.2rem; 101 | padding-bottom: 1rem; 102 | max-width: 450px; 103 | margin-right: auto; 104 | margin-left: auto; 105 | line-height: 1.7; 106 | } 107 | .my-2{ 108 | margin: 2rem 0; 109 | } 110 | .shadow:hover{ 111 | -webkit-box-shadow: 0px 0px 18px -4px rgba(109, 109, 109, 0.64); 112 | box-shadow: 0px 0px 18px -4px rgba(109, 109, 109, 0.64); 113 | } -------------------------------------------------------------------------------- /travel_portfolio/js/script.js: -------------------------------------------------------------------------------- 1 | let navbarDiv = document.querySelector('.navbar'); 2 | window.addEventListener('scroll', () => { 3 | if(document.body.scrollTop > 40 || document.documentElement.scrollTop > 40){ 4 | navbarDiv.classList.add('navbar-cng'); 5 | } else { 6 | navbarDiv.classList.remove('navbar-cng'); 7 | } 8 | }); 9 | 10 | 11 | const navbarCollapseDiv = document.getElementById('navbar-collapse'); 12 | const navbarShowBtn = document.getElementById('navbar-show-btn'); 13 | const navbarCloseBtn = document.getElementById('navbar-close-btn'); 14 | // show navbar 15 | navbarShowBtn.addEventListener('click', () => { 16 | navbarCollapseDiv.classList.add('navbar-collapse-rmw'); 17 | }); 18 | 19 | // hide side bar 20 | navbarCloseBtn.addEventListener('click', () => { 21 | navbarCollapseDiv.classList.remove('navbar-collapse-rmw'); 22 | }); 23 | 24 | document.addEventListener('click', (e) => { 25 | if(e.target.id != "navbar-collapse" && e.target.id != "navbar-show-btn" && e.target.parentElement.id != "navbar-show-btn"){ 26 | navbarCollapseDiv.classList.remove('navbar-collapse-rmw'); 27 | } 28 | }); 29 | 30 | // stop transition and animatino during window resizing 31 | let resizeTimer; 32 | window.addEventListener('resize', () => { 33 | document.body.classList.add("resize-animation-stopper"); 34 | clearTimeout(resizeTimer); 35 | resizeTimer = setTimeout(() => { 36 | document.body.classList.remove("resize-animation-stopper"); 37 | }, 400); 38 | }); 39 | -------------------------------------------------------------------------------- /weather-info/api.js: -------------------------------------------------------------------------------- 1 | const loadTemparatureData = () => { 2 | const key = "a1d9c445802e1d4ceb6f9b29e5cb97cd"; 3 | const inputValue = document.getElementById('input-value'); 4 | const weatherStatus = document.getElementById('weather-status'); 5 | 6 | if (inputValue == 0) { 7 | console.log('input city name') 8 | } else { 9 | 10 | fetch(`https://api.openweathermap.org/data/2.5/weather?q=${inputValue.value}&appid=${key}`) 11 | .then(res => res.json()) 12 | .then(data => displayTemparature(data)); 13 | } 14 | inputValue.value = ''; 15 | weatherStatus.innerHTML = ''; 16 | 17 | 18 | } 19 | const displayTemparature = (data) => { 20 | console.log(data); 21 | // Getting Id 22 | const weatherStatus = document.getElementById('weather-status'); 23 | const weatherInfo = document.createElement('div'); 24 | 25 | // Getting Time 26 | const sunriseCode = data.sys.sunrise; 27 | const sunriseTime = new Date(sunriseCode * 1000) 28 | const sunsetCode = data.sys.sunset; 29 | const sunsetTime = new Date(sunsetCode * 1000) 30 | 31 | 32 | // Geting Weather Info 33 | weatherInfo.innerHTML = ` 34 | 35 | smart weather info icon 36 |

    ${data.name}

    37 |

    ${((data.main.temp) - 273.15).toFixed(2)}°C

    38 |

    Sunrise : ${sunriseTime}

    39 |

    Sunset : ${sunsetTime}

    40 | 41 | `; 42 | 43 | // Appening child 44 | weatherStatus.appendChild(weatherInfo); 45 | 46 | 47 | 48 | 49 | } 50 | -------------------------------------------------------------------------------- /weather-info/images/bg-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/weather-info/images/bg-image.jpg -------------------------------------------------------------------------------- /weather-info/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Smart Weather Info 6 | 7 | 8 | 9 | 10 | 11 | 12 | 19 | 20 | 21 | 22 |
    23 |
    24 |
    25 | 26 |
    27 | 28 |
    29 |
    30 |
    31 |
    32 |
    33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /weather-info/readme.md: -------------------------------------------------------------------------------- 1 | # Weather Info 2 | 3 | # [Preview the site](https://alsiam.github.io/web-projects/weather-info) 4 | 5 | ![image info](../assets/images/weather-info.png) -------------------------------------------------------------------------------- /youtube-ui/assets/alsiam.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/youtube-ui/assets/alsiam.png -------------------------------------------------------------------------------- /youtube-ui/assets/youtube.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alsiam/web-projects/917bba1b318b8d153990c85060e11b4f77751d51/youtube-ui/assets/youtube.webp -------------------------------------------------------------------------------- /youtube-ui/readme.md: -------------------------------------------------------------------------------- 1 | # Youtube UI 2 | 3 | # [Preview the site](https://alsiam.github.io/web-projects/youtube-ui) 4 | 5 | ![image info](../assets/images/youtube-ui.png) -------------------------------------------------------------------------------- /youtube-ui/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | font-family: 'Source Sans Pro', sans-serif; 5 | } 6 | .youtube-header{ 7 | font-family: 'Big Shoulders Display', cursive; 8 | font-weight: 700; 9 | } 10 | .container{ 11 | background: #202020; 12 | padding: 15px 0px; 13 | overflow: hidden; 14 | } 15 | .tube-bar-header{ 16 | width: 20%; 17 | display: flex; 18 | align-items: center; 19 | } 20 | .tube-bar, .tube-logo{ 21 | display: inline-block; 22 | } 23 | .tube-bar i{ 24 | font-size: 18px; 25 | color: white; 26 | margin-left: 30px; 27 | 28 | } 29 | .tube-logo{ 30 | color: white; 31 | font-size: 19px; 32 | margin-left: 20px; 33 | display: flex; 34 | gap: 4px; 35 | } 36 | .tube-logo img{ 37 | color: red; 38 | width: 30px; 39 | } 40 | .tube-logo sup{ 41 | font-size: 11px; 42 | color: rgb(119, 118, 118); 43 | font-family: arial; 44 | } 45 | 46 | /* ============ search box =========== */ 47 | 48 | .tube-search-account{ 49 | overflow: hidden; 50 | } 51 | .tube-bar-header, .tube-search-account{ 52 | float: left; 53 | } 54 | .tube-search-account{ 55 | width: 77%; 56 | } 57 | .search-box { 58 | width: 680px; 59 | float: left; 60 | margin-left: 150px; 61 | } 62 | .search-box input{ 63 | width: 550px; 64 | padding: 4px 10px; 65 | background: #050505bd; 66 | color: #fff; 67 | font-size: 16px; 68 | outline: none; 69 | border: 1px solid #4d4d4d; 70 | } 71 | .search-box i{ 72 | color: white; 73 | padding: 0 5px; 74 | } 75 | .search-box i:nth-child(2){ 76 | background: #333; 77 | padding: 6px 20px; 78 | color: rgb(167, 160, 160); 79 | font-size: 14px; 80 | border: 1px solid #4d4d4d; 81 | 82 | } 83 | .search-box i:nth-child(3){ 84 | margin-left: 20px; 85 | font-size: 20px; 86 | } 87 | .account-box{ 88 | width: 230px; 89 | float: right; 90 | } 91 | .account-box i{ 92 | color: #fff; 93 | margin-right: 30px; 94 | font-size: 20px; 95 | } 96 | .account-box img{ 97 | width: 25px; 98 | border-radius: 50px; 99 | border: 1px solid rgb(109, 108, 108); 100 | } 101 | .account-box i, .account-box img{ 102 | display: inline-block; 103 | overflow: hidden; 104 | } 105 | 106 | 107 | /* ========Menu Box and Side bar */ 108 | 109 | .left-side-bar{ 110 | width: 16%; 111 | height: 87vh; 112 | overflow: auto; 113 | background: #212121; 114 | float: left; 115 | } 116 | /* ======= OVerflow Design */ 117 | ::-webkit-scrollbar { 118 | width: 10px; 119 | } 120 | 121 | ::-webkit-scrollbar-track { 122 | background: #f1f1f100; 123 | } 124 | 125 | ::-webkit-scrollbar-thumb { 126 | background: rgb(71, 71, 71); 127 | } 128 | 129 | ::-webkit-scrollbar-thumb:hover { 130 | background: #555; 131 | } 132 | 133 | .menu-section-all ul{ 134 | list-style: none; 135 | width: 100%; 136 | margin: auto; 137 | 138 | } 139 | .menu-section-all li{ 140 | color: rgb(236, 236, 236); 141 | font-size: 17px; 142 | font-weight: 600; 143 | padding: 10px 0px; 144 | padding-left: 30px; 145 | 146 | } 147 | .menu-section-all ul li i{ 148 | padding: 5px 0px; 149 | color: gray; 150 | width: 40px; 151 | height: 15px; 152 | } 153 | 154 | .yt-sub-heading{ 155 | margin-top: 10px; 156 | color: white; 157 | margin-bottom: 10px; 158 | margin-left: 30px; 159 | font-size: 18px; 160 | color: gray; 161 | } 162 | 163 | .menu-section-all ul li:hover{ 164 | background: #3b3b3b; 165 | color: #fff; 166 | } 167 | b{ 168 | color: white; 169 | font-size: 13px; 170 | font-weight: noraml; 171 | margin-left: 30px; 172 | font-family: arial; 173 | margin-top: 10px; 174 | display: block; 175 | } 176 | 177 | .first-section ul{ 178 | border-bottom: 1px solid gray; 179 | } 180 | .second-section ul{ 181 | border-bottom: 1px solid gray; 182 | } 183 | .third-section ul{ 184 | border-bottom: 1px solid gray; 185 | } 186 | .fourth-section ul{ 187 | border-bottom: 1px solid gray; 188 | } 189 | .fifth-section ul{ 190 | border-bottom: 1px solid gray; 191 | } 192 | 193 | 194 | 195 | 196 | /* Right SIde top Bar */ 197 | 198 | 199 | 200 | .right-side-top-bar{ 201 | width: 83%; 202 | float: right; 203 | overflow: hidden; 204 | } 205 | .right-side-top-bar ul{ 206 | padding: 10px; 207 | overflow: hidden; 208 | border-top: 1px solid #474747; 209 | border-bottom: 1px solid #474747; 210 | 211 | } 212 | .right-side-top-bar ul li{ 213 | float: left; 214 | padding: 7px 15px; 215 | background: #383838; 216 | color: white; 217 | margin-left: 5px; 218 | border-radius: 20px; 219 | list-style: none; 220 | border: 1px solid rgb(78, 78, 78); 221 | font-size: 15px; 222 | font-family: arial; 223 | } 224 | .right-side-top-bar ul li:hover{ 225 | background: rgb(112, 112, 112); 226 | } 227 | .yt-videos-wrapper{ 228 | padding: 20px; 229 | overflow: hidden; 230 | } 231 | 232 | .yt-videos-wrapper{ 233 | background: #181818; 234 | overflow: hidden; 235 | } 236 | .yt-videos{ 237 | width: 394PX; 238 | padding: 10px; 239 | float: left; 240 | } 241 | .yt-videos video{ 242 | border-radius: 3px; 243 | } 244 | .yt-video-deatails i{ 245 | width: 30px; 246 | height: 70px; 247 | list-style: none; 248 | color: white; 249 | font-size: 26px; 250 | float: left; 251 | padding: 10px 5px; 252 | } 253 | .yt-video-deatails { 254 | width: 370px; 255 | 256 | } 257 | .yt-video-deatails h3{ 258 | color: white; 259 | } 260 | .yt-video-deatails span{ 261 | color: gray; 262 | font-size: 16px; 263 | display: block; 264 | } 265 | 266 | footer{ 267 | background-color: #333; 268 | } 269 | footer p{ 270 | color: #fff; 271 | font-size: 14px; 272 | text-align: center; 273 | padding: 8px 0; 274 | } --------------------------------------------------------------------------------