├── .gitattributes ├── .gitignore ├── Analog-Digital-Clock ├── 1.png ├── 2.png ├── README.md ├── index.html ├── loader.svg ├── script.js └── style.css ├── Animated-Login-Form ├── animated.png ├── index.html └── style.css ├── Animated-Sliding-Login-Registration ├── index.html ├── login.png └── style.css ├── Apple eCommerce ├── 1.png ├── README.md ├── images │ ├── AirPods │ │ ├── airpods-1.png │ │ └── airpods-2.png │ ├── MacBook │ │ ├── macbook-1-desktop.png │ │ ├── macbook-keyboard.png │ │ └── macbook-screen.png │ ├── iPhone 12 │ │ ├── iphones-1-img.png │ │ └── iphones-2-img.png │ ├── icons │ │ ├── airpods-icon.png │ │ ├── apple.png │ │ ├── home-icon.png │ │ ├── iphone -icon.png │ │ ├── macbook-icon.png │ │ └── watch-icon.png │ ├── iphone.png │ ├── slideshow │ │ ├── section-1-bg-1.jpg │ │ ├── section-1-bg-2.jpg │ │ ├── section-1-bg-3.jpg │ │ ├── section-1-bg-4.jpg │ │ └── section-1-bg-5.jpg │ └── watches │ │ ├── watch-band-1.jpg │ │ ├── watch-band-10.jpg │ │ ├── watch-band-2.jpg │ │ ├── watch-band-3.jpg │ │ ├── watch-band-4.jpg │ │ ├── watch-band-5.jpg │ │ ├── watch-band-6.jpg │ │ ├── watch-band-7.jpg │ │ ├── watch-band-8.jpg │ │ ├── watch-band-9.jpg │ │ ├── watch-case-1.png │ │ ├── watch-case-10.png │ │ ├── watch-case-2.png │ │ ├── watch-case-3.png │ │ ├── watch-case-4.png │ │ ├── watch-case-5.png │ │ ├── watch-case-6.png │ │ ├── watch-case-7.png │ │ ├── watch-case-8.png │ │ └── watch-case-9.png ├── index.html ├── script.js └── style.css ├── Bettery Icon Animation ├── 1.png ├── 2.png ├── README.md ├── index.html ├── script.js └── style.css ├── Blurry Loading ├── 1.png ├── 2.png ├── README.md ├── index.html ├── script.js └── style.css ├── Bootstrap4 ├── bootstrap.min.css ├── bootstrap.min.js ├── jquery-3.2.1.slim.min.js └── popper.min.js ├── CSS-9-dots ├── 1.png ├── 2.png ├── 3.png ├── README.md ├── index.html ├── loader.svg ├── script.js └── style.css ├── Card UI Hover Effect ├── 1.png ├── 2.png ├── README.md ├── images │ ├── code.png │ ├── design.png │ └── launch.png ├── index.html ├── script.js └── style.css ├── Claymorphism-List ├── 1.png ├── 2.png ├── README.md ├── index.html ├── loader.svg ├── script.js └── style.css ├── Dad Jokes ├── 1.png ├── 2.png ├── README.md ├── index.html ├── script.js └── style.css ├── Expanding Card ├── 1.png ├── 2.png ├── README.md ├── index.html ├── script.js └── style.css ├── FAQ Box ├── 1.png ├── 2.png ├── README.md ├── index.html ├── script.js └── style.css ├── Form Wave Animation ├── 1.png ├── 2.png ├── README.md ├── index.html ├── script.js └── style.css ├── Gallery ├── 1.png ├── 2.png ├── 3.png ├── README.md ├── images │ ├── gallery │ │ ├── acrobats_fullsize.jpg │ │ ├── acrobats_preview.jpg │ │ ├── acrobats_thumbnail.jpg │ │ ├── apartments_fullsize.jpg │ │ ├── apartments_preview.jpg │ │ ├── apartments_thumbnail.jpg │ │ ├── berries_fullsize.jpg │ │ ├── berries_preview.jpg │ │ ├── berries_thumbnail.jpg │ │ ├── carousel_fullsize.jpg │ │ ├── carousel_preview.jpg │ │ ├── carousel_thumbnail.jpg │ │ ├── eighteighteight_fullsize.jpg │ │ ├── eighteighteight_preview.jpg │ │ ├── eighteighteight_thumbnail.jpg │ │ ├── evergreens_fullsize.jpg │ │ ├── evergreens_preview.jpg │ │ ├── evergreens_thumbnail.jpg │ │ ├── fish_fullsize.jpg │ │ ├── fish_preview.jpg │ │ ├── fish_thumbnail.jpg │ │ ├── lantern_fullsize.jpg │ │ ├── lantern_preview.jpg │ │ ├── lantern_thumbnail.jpg │ │ ├── montreal_fullsize.jpg │ │ ├── montreal_preview.jpg │ │ ├── montreal_thumbnail.jpg │ │ ├── neptune_fullsize.jpg │ │ ├── neptune_preview.jpg │ │ ├── neptune_thumbnail.jpg │ │ ├── nutcracker_fullsize.jpg │ │ ├── nutcracker_preview.jpg │ │ ├── nutcracker_thumbnail.jpg │ │ ├── ornament_fullsize.jpg │ │ ├── ornament_preview.jpg │ │ ├── ornament_thumbnail.jpg │ │ ├── pumpkins_fullsize.jpg │ │ ├── pumpkins_preview.jpg │ │ ├── pumpkins_thumbnail.jpg │ │ ├── redplant_fullsize.jpg │ │ ├── redplant_preview.jpg │ │ ├── redplant_thumbnail.jpg │ │ ├── refraction_fullsize.jpg │ │ ├── refraction_preview.jpg │ │ ├── refraction_thumbnail.jpg │ │ ├── rose_fullsize.jpg │ │ ├── rose_preview.jpg │ │ ├── rose_thumbnail.jpg │ │ ├── sculpture_fullsize.jpg │ │ ├── sculpture_preview.jpg │ │ ├── sculpture_thumbnail.jpg │ │ ├── ship_fullsize.jpg │ │ ├── ship_preview.jpg │ │ ├── ship_thumbnail.jpg │ │ ├── stowe_fullsize.jpg │ │ ├── stowe_preview.jpg │ │ ├── stowe_thumbnail.jpg │ │ ├── swatches_fullsize.jpg │ │ ├── swatches_preview.jpg │ │ └── swatches_thumbnail.jpg │ └── templates │ │ ├── link_email.png │ │ ├── link_zoom.png │ │ ├── page_bottom.jpg │ │ ├── page_tile.jpg │ │ └── page_top.jpg ├── includes │ ├── farinspace │ │ ├── README.md │ │ ├── jquery.imgpreload.js │ │ └── jquery.imgpreload.min.js │ ├── gallery.css │ ├── gallery.js │ ├── jquery.fancybox-1.3.4 │ │ ├── ajax.txt │ │ ├── example │ │ │ ├── 10_b.jpg │ │ │ ├── 10_s.jpg │ │ │ ├── 11_b.jpg │ │ │ ├── 11_s.jpg │ │ │ ├── 12_b.jpg │ │ │ ├── 12_s.jpg │ │ │ ├── 1_b.jpg │ │ │ ├── 1_s.jpg │ │ │ ├── 2_b.jpg │ │ │ ├── 2_s.jpg │ │ │ ├── 3_b.jpg │ │ │ ├── 3_s.jpg │ │ │ ├── 4_b.jpg │ │ │ ├── 4_s.jpg │ │ │ ├── 5_b.jpg │ │ │ ├── 5_s.jpg │ │ │ ├── 6_b.jpg │ │ │ ├── 6_s.jpg │ │ │ ├── 7_b.jpg │ │ │ ├── 7_s.jpg │ │ │ ├── 8_b.jpg │ │ │ ├── 8_s.jpg │ │ │ ├── 9_b.jpg │ │ │ └── 9_s.jpg │ │ ├── fancybox │ │ │ ├── blank.gif │ │ │ ├── fancy_close.png │ │ │ ├── fancy_loading.png │ │ │ ├── fancy_nav_left.png │ │ │ ├── fancy_nav_right.png │ │ │ ├── fancy_shadow_e.png │ │ │ ├── fancy_shadow_n.png │ │ │ ├── fancy_shadow_ne.png │ │ │ ├── fancy_shadow_nw.png │ │ │ ├── fancy_shadow_s.png │ │ │ ├── fancy_shadow_se.png │ │ │ ├── fancy_shadow_sw.png │ │ │ ├── fancy_shadow_w.png │ │ │ ├── fancy_title_left.png │ │ │ ├── fancy_title_main.png │ │ │ ├── fancy_title_over.png │ │ │ ├── fancy_title_right.png │ │ │ ├── fancybox-x.png │ │ │ ├── fancybox-y.png │ │ │ ├── fancybox.png │ │ │ ├── jquery.easing-1.3.pack.js │ │ │ ├── jquery.fancybox-1.3.4.css │ │ │ ├── jquery.fancybox-1.3.4.js │ │ │ ├── jquery.fancybox-1.3.4.pack.js │ │ │ └── jquery.mousewheel-3.0.4.pack.js │ │ ├── index.html │ │ ├── jquery-1.4.3.min.js │ │ └── style.css │ └── jquery3.js ├── index.html └── loader.svg ├── Glassmorphism ├── 1.png ├── 2.png ├── 3.png ├── README.md ├── close.png ├── index.html ├── loader.svg ├── menu.png ├── ocean.mp4 ├── script.js └── style.css ├── Hidden Search Widget ├── 1.png ├── 2.png ├── README.md ├── index.html ├── script.js └── style.css ├── IconDropShadow ├── 1.png ├── 2.png ├── 3.png ├── 4.png ├── README.md ├── index.html ├── loader.svg ├── script.js └── style.css ├── Infinite-scroll ├── 1.png ├── 2.png ├── README.md ├── favicon.png ├── index.html ├── loader.svg ├── script.js └── style.css ├── Key Code ├── 1.png ├── 2.png ├── 3.png ├── README.md ├── index.html ├── script.js └── style.css ├── Math Website ├── 1.png ├── 2.png ├── README.md ├── arrow.png ├── index.html ├── script.js ├── search.png ├── style.css └── tick.png ├── MoviesUi ├── 1.png ├── 2.png ├── 3.png ├── 4.png ├── README.md ├── index.html ├── loader.svg ├── script.js └── style.css ├── Nav Animation ├── 1.png ├── 2.png ├── 3.png ├── README.md ├── index.html ├── script.js └── style.css ├── Navigation ├── 1.png ├── 2.png ├── 3.png ├── README.md ├── index.html ├── loader.svg ├── script.js └── style.css ├── PIP ├── 1.png ├── 2.png ├── 3.png ├── 4.png ├── 5.png ├── README.md ├── index.html ├── loader.svg ├── script.js └── style.css ├── Product ├── .gitignore ├── 1.png ├── README-template.md ├── README.md ├── design │ ├── active-states.jpg │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ └── mobile-design.jpg ├── images │ ├── favicon-32x32.png │ ├── icon-cart.svg │ ├── image-product-desktop.jpg │ └── image-product-mobile.jpg ├── index.html ├── style-guide.md └── style.css ├── Progress Steps ├── 1.png ├── 2.png ├── 3.png ├── README.md ├── index.html ├── script.js └── style.css ├── Quote Generator ├── 1.png ├── 2.png ├── README.md ├── favicon.png ├── index.html ├── quotes.js ├── script.js └── style.css ├── README.md ├── Random Choice Picker ├── 1.png ├── 2.png ├── 3.png ├── README.md ├── index.html ├── script.js └── style.css ├── Random-Color-Palette ├── index.html ├── palette.png └── style.css ├── Report.png ├── Rotating Navbar ├── 1.png ├── 2.png ├── README.md ├── index.html ├── script.js └── style.css ├── Scroll Animation ├── 1.png ├── 2.png ├── 3.png ├── README.md ├── index.html ├── script.js └── style.css ├── Smoke-Effect-Text ├── effect.png ├── index.html ├── script.js └── style.css ├── Social-Counter ├── 1.png ├── 2.png ├── README.md ├── index.html ├── loader.svg ├── script.js └── style.css ├── SocialMediaHoverIcon ├── 1.png ├── 2.png ├── 3.png ├── README.md ├── index.html ├── loader.svg ├── script.js └── style.css ├── Sound Board ├── 1.png ├── README.md ├── index.html ├── script.js ├── sounds │ ├── applause.mp3 │ ├── boo.mp3 │ ├── gasp.mp3 │ ├── tada.mp3 │ ├── victory.mp3 │ └── wrong.mp3 └── style.css ├── Split Landing Page ├── 1.png ├── 2.png ├── 3.png ├── 4.png ├── 5.png ├── 6.png ├── README.md ├── index.html ├── ps.jpg ├── script.js ├── style.css └── xbox.jpg ├── Starter ├── README.md ├── index.html ├── loader.svg ├── script.js └── style.css ├── Team-Section ├── 1.png ├── 2.png ├── 3.png ├── README.md ├── index.html ├── loader.svg ├── script.js ├── style.css └── team │ ├── team1.jpg │ ├── team2.jpg │ └── team3.jpg ├── Z-Index-Hover-Effect ├── 1.png ├── 2.png ├── 3.png ├── README.md ├── index.html ├── loader.svg ├── script.js └── style.css ├── index.html ├── loader.gif ├── loader.svg ├── natours ├── .gitignore ├── 1.png ├── README.md ├── css │ ├── fonts │ │ ├── linea-basic-10.eot │ │ ├── linea-basic-10.svg │ │ ├── linea-basic-10.ttf │ │ └── linea-basic-10.woff │ ├── icon-font.css │ └── style.css ├── img │ ├── favicon.png │ ├── hero-small.jpg │ ├── hero.jpg │ ├── logo-green-1x.png │ ├── logo-green-2x.png │ ├── logo-green-small-1x.png │ ├── logo-green-small-2x.png │ ├── logo-white.png │ ├── nat-1-large.jpg │ ├── nat-1.jpg │ ├── nat-10.jpg │ ├── nat-2-large.jpg │ ├── nat-2.jpg │ ├── nat-3-large.jpg │ ├── nat-3.jpg │ ├── nat-4.jpg │ ├── nat-5.jpg │ ├── nat-6.jpg │ ├── nat-7.jpg │ ├── nat-8.jpg │ ├── nat-9.jpg │ ├── video.mp4 │ └── video.webm ├── index.html ├── package-lock.json ├── package.json └── sass │ ├── abstracts │ ├── _functions.scss │ ├── _mixins.scss │ └── _variables.scss │ ├── base │ ├── _animations.scss │ ├── _base.scss │ ├── _typography.scss │ └── _utilities.scss │ ├── components │ ├── _bg-video.scss │ ├── _button.scss │ ├── _card.scss │ ├── _composition.scss │ ├── _feature-box.scss │ ├── _form.scss │ ├── _popup.scss │ └── _story.scss │ ├── layout │ ├── _footer.scss │ ├── _grid.scss │ ├── _header.scss │ └── _navigation.scss │ ├── main.scss │ └── pages │ └── _home.scss └── style.css /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Local Netlify folder 2 | .netlify 3 | -------------------------------------------------------------------------------- /Analog-Digital-Clock/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Analog-Digital-Clock/1.png -------------------------------------------------------------------------------- /Analog-Digital-Clock/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Analog-Digital-Clock/2.png -------------------------------------------------------------------------------- /Analog-Digital-Clock/README.md: -------------------------------------------------------------------------------- 1 | # Analog Digital Clock 2 | 3 | 4 | * Demo 1 5 | - 6 | 7 | * Demo 2 8 | - 9 | 10 | -------------------------------------------------------------------------------- /Analog-Digital-Clock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Analog Digital Clock 8 | 9 | 10 | 11 | 12 |
13 |
14 | 15 |
16 |
17 |
18 | 19 | 1 20 | 2 21 | 3 22 | 4 23 | 5 24 | 6 25 | 7 26 | 8 27 | 9 28 | 10 29 | 11 30 | 12 31 |
32 | 33 |
34 |
00
35 |
00
36 |
00
37 |
PM
38 |
39 |
40 | 41 | 42 | -------------------------------------------------------------------------------- /Analog-Digital-Clock/loader.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Analog-Digital-Clock/script.js: -------------------------------------------------------------------------------- 1 | let sc = document.getElementById('sc'); 2 | let mn = document.getElementById('mn'); 3 | let hr = document.getElementById('hr'); 4 | 5 | let hour = document.getElementById('hour'); 6 | let min = document.getElementById('min'); 7 | let sec = document.getElementById('sec'); 8 | let ampm = document.getElementById('ampm'); 9 | 10 | 11 | setInterval(() => { 12 | let day = new Date(); 13 | let hh = day.getHours() * 30; 14 | let mm = day.getMinutes() * 6; 15 | let ss = day.getSeconds() * 6; 16 | 17 | hr.style.transform = `rotateZ(${hh + (mm / 12)}deg)`; 18 | mn.style.transform = `rotateZ(${mm}deg)`; 19 | sc.style.transform = `rotateZ(${ss}deg)`; 20 | // Digital Clock 21 | let h = new Date().getHours(); 22 | let m = new Date().getMinutes(); 23 | let s = new Date().getSeconds(); 24 | let am = h >= 12 ? 'PM' : 'AM'; 25 | // Convert to 12 hour format 26 | if(h > 12){ 27 | h = h - 12; 28 | } 29 | // add zero before single digit numbers 30 | h = h < 10 ? '0' + h : h; 31 | m = m < 10 ? '0' + m : m; 32 | s = s < 10 ? '0' + s : s; 33 | // update the clock 34 | hour.innerHTML = h; 35 | min.innerHTML = m; 36 | sec.innerHTML = s; 37 | ampm.innerHTML = am; 38 | 39 | }); -------------------------------------------------------------------------------- /Animated-Login-Form/animated.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Animated-Login-Form/animated.png -------------------------------------------------------------------------------- /Animated-Login-Form/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Animated Login Form 7 | 8 | 9 | 10 |
11 | 12 |
13 |

Sign In

14 |
15 | 16 | Username 17 | 18 |
19 |
20 | 21 | Password 22 | 23 |
24 |
25 | Forget Password? 26 | Sign Up 27 |
28 | 29 | 30 |
31 |
32 | 33 | -------------------------------------------------------------------------------- /Animated-Sliding-Login-Registration/login.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Animated-Sliding-Login-Registration/login.png -------------------------------------------------------------------------------- /Apple eCommerce/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/1.png -------------------------------------------------------------------------------- /Apple eCommerce/README.md: -------------------------------------------------------------------------------- 1 | # Apple eCommerce 2 | 3 | 4 | * Demo 1 5 | - 6 | 7 | -------------------------------------------------------------------------------- /Apple eCommerce/images/AirPods/airpods-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/AirPods/airpods-1.png -------------------------------------------------------------------------------- /Apple eCommerce/images/AirPods/airpods-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/AirPods/airpods-2.png -------------------------------------------------------------------------------- /Apple eCommerce/images/MacBook/macbook-1-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/MacBook/macbook-1-desktop.png -------------------------------------------------------------------------------- /Apple eCommerce/images/MacBook/macbook-keyboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/MacBook/macbook-keyboard.png -------------------------------------------------------------------------------- /Apple eCommerce/images/MacBook/macbook-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/MacBook/macbook-screen.png -------------------------------------------------------------------------------- /Apple eCommerce/images/iPhone 12/iphones-1-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/iPhone 12/iphones-1-img.png -------------------------------------------------------------------------------- /Apple eCommerce/images/iPhone 12/iphones-2-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/iPhone 12/iphones-2-img.png -------------------------------------------------------------------------------- /Apple eCommerce/images/icons/airpods-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/icons/airpods-icon.png -------------------------------------------------------------------------------- /Apple eCommerce/images/icons/apple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/icons/apple.png -------------------------------------------------------------------------------- /Apple eCommerce/images/icons/home-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/icons/home-icon.png -------------------------------------------------------------------------------- /Apple eCommerce/images/icons/iphone -icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/icons/iphone -icon.png -------------------------------------------------------------------------------- /Apple eCommerce/images/icons/macbook-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/icons/macbook-icon.png -------------------------------------------------------------------------------- /Apple eCommerce/images/icons/watch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/icons/watch-icon.png -------------------------------------------------------------------------------- /Apple eCommerce/images/iphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/iphone.png -------------------------------------------------------------------------------- /Apple eCommerce/images/slideshow/section-1-bg-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/slideshow/section-1-bg-1.jpg -------------------------------------------------------------------------------- /Apple eCommerce/images/slideshow/section-1-bg-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/slideshow/section-1-bg-2.jpg -------------------------------------------------------------------------------- /Apple eCommerce/images/slideshow/section-1-bg-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/slideshow/section-1-bg-3.jpg -------------------------------------------------------------------------------- /Apple eCommerce/images/slideshow/section-1-bg-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/slideshow/section-1-bg-4.jpg -------------------------------------------------------------------------------- /Apple eCommerce/images/slideshow/section-1-bg-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/slideshow/section-1-bg-5.jpg -------------------------------------------------------------------------------- /Apple eCommerce/images/watches/watch-band-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/watches/watch-band-1.jpg -------------------------------------------------------------------------------- /Apple eCommerce/images/watches/watch-band-10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/watches/watch-band-10.jpg -------------------------------------------------------------------------------- /Apple eCommerce/images/watches/watch-band-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/watches/watch-band-2.jpg -------------------------------------------------------------------------------- /Apple eCommerce/images/watches/watch-band-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/watches/watch-band-3.jpg -------------------------------------------------------------------------------- /Apple eCommerce/images/watches/watch-band-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/watches/watch-band-4.jpg -------------------------------------------------------------------------------- /Apple eCommerce/images/watches/watch-band-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/watches/watch-band-5.jpg -------------------------------------------------------------------------------- /Apple eCommerce/images/watches/watch-band-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/watches/watch-band-6.jpg -------------------------------------------------------------------------------- /Apple eCommerce/images/watches/watch-band-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/watches/watch-band-7.jpg -------------------------------------------------------------------------------- /Apple eCommerce/images/watches/watch-band-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/watches/watch-band-8.jpg -------------------------------------------------------------------------------- /Apple eCommerce/images/watches/watch-band-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/watches/watch-band-9.jpg -------------------------------------------------------------------------------- /Apple eCommerce/images/watches/watch-case-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/watches/watch-case-1.png -------------------------------------------------------------------------------- /Apple eCommerce/images/watches/watch-case-10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/watches/watch-case-10.png -------------------------------------------------------------------------------- /Apple eCommerce/images/watches/watch-case-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/watches/watch-case-2.png -------------------------------------------------------------------------------- /Apple eCommerce/images/watches/watch-case-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/watches/watch-case-3.png -------------------------------------------------------------------------------- /Apple eCommerce/images/watches/watch-case-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/watches/watch-case-4.png -------------------------------------------------------------------------------- /Apple eCommerce/images/watches/watch-case-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/watches/watch-case-5.png -------------------------------------------------------------------------------- /Apple eCommerce/images/watches/watch-case-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/watches/watch-case-6.png -------------------------------------------------------------------------------- /Apple eCommerce/images/watches/watch-case-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/watches/watch-case-7.png -------------------------------------------------------------------------------- /Apple eCommerce/images/watches/watch-case-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/watches/watch-case-8.png -------------------------------------------------------------------------------- /Apple eCommerce/images/watches/watch-case-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Apple eCommerce/images/watches/watch-case-9.png -------------------------------------------------------------------------------- /Bettery Icon Animation/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Bettery Icon Animation/1.png -------------------------------------------------------------------------------- /Bettery Icon Animation/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Bettery Icon Animation/2.png -------------------------------------------------------------------------------- /Bettery Icon Animation/README.md: -------------------------------------------------------------------------------- 1 | # Battery Icon Animation 2 | 3 | 4 | * Demo 1 5 | - 6 | 7 | * Demo 2 8 | - 9 | -------------------------------------------------------------------------------- /Bettery Icon Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Battery Icon 8 | 9 | 10 | 11 | 12 |

Battery Icon Animation

13 |
14 |
15 |
16 |
17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /Bettery Icon Animation/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Bettery Icon Animation/script.js -------------------------------------------------------------------------------- /Blurry Loading/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Blurry Loading/1.png -------------------------------------------------------------------------------- /Blurry Loading/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Blurry Loading/2.png -------------------------------------------------------------------------------- /Blurry Loading/README.md: -------------------------------------------------------------------------------- 1 | # Blurry Loading 2 | 3 | 4 | * Demo 1 5 | - 6 | 7 | * Demo 2 8 | - 9 | -------------------------------------------------------------------------------- /Blurry Loading/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Blurry Loading 8 | 9 | 10 | 11 |
12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /Blurry Loading/script.js: -------------------------------------------------------------------------------- 1 | const loadText = document.querySelector('.loading-text'); 2 | const bg = document.querySelector('.bg'); 3 | 4 | let load = 0; 5 | let int = setInterval(blurring, 30) 6 | function blurring() 7 | { 8 | load++; 9 | console.log(load); 10 | if(load > 99) 11 | { 12 | clearInterval(int) 13 | } 14 | loadText.innerText = `Loading...${load}%`; 15 | /* loadText.style.opacity = load / 100; */ /* Opacity range 0 - 1 */ 16 | /* loadText.style.opacity = scale(load, 0, 100, 1, 0); */ 17 | loadText.style.opacity = (100-load) / 100; /* My Function */ 18 | /* bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`; */ /* Tutor Function */ 19 | 20 | let blurValue = (3000 - 30*load) / 100; 21 | bg.style.filter = `blur(${blurValue}px)`; /* My Function */ 22 | } 23 | /* Range The Number Between Opacity Range */ 24 | function scale (number, inMin, inMax, outMin, outMax) { 25 | return (number - inMin) * (outMax - outMin) / (inMax - inMin) + outMin; 26 | } 27 | 28 | 29 | -------------------------------------------------------------------------------- /Blurry Loading/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Ubuntu'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: 'Ubuntu', 'sans-serif'; 9 | display: flex; 10 | flex-direction: column; 11 | align-items: center; 12 | justify-content: center; 13 | height: 100vh; 14 | overflow: hidden; 15 | margin: 0; 16 | } 17 | 18 | .bg { 19 | background: url('https://images.pexels.com/photos/552784/pexels-photo-552784.jpeg?auto=compress&cs=tinysrgb&w=1600') no-repeat center center/cover; 20 | position: absolute; 21 | top: -30px; 22 | left: -30px; 23 | width: calc(100vw + 60px); 24 | height: calc(100vh + 60px); 25 | z-index: -1; 26 | filter: blur(0px); 27 | } 28 | 29 | .loading-text { 30 | font-size: 50px; 31 | color: white; 32 | } -------------------------------------------------------------------------------- /CSS-9-dots/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/CSS-9-dots/1.png -------------------------------------------------------------------------------- /CSS-9-dots/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/CSS-9-dots/2.png -------------------------------------------------------------------------------- /CSS-9-dots/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/CSS-9-dots/3.png -------------------------------------------------------------------------------- /CSS-9-dots/README.md: -------------------------------------------------------------------------------- 1 | # CSS 9-Dots Menu 2 | 3 | 4 | * Demo 1 5 | - 6 | 7 | * Demo 2 8 | - 9 | 10 | * Demo 3 11 | - -------------------------------------------------------------------------------- /CSS-9-dots/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS 9 dots 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /CSS-9-dots/loader.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /CSS-9-dots/script.js: -------------------------------------------------------------------------------- 1 | let navigation = document.querySelector('.navigation'); 2 | 3 | navigation.addEventListener('click', function(e) { 4 | navigation.classList.toggle('active'); 5 | }) -------------------------------------------------------------------------------- /CSS-9-dots/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | min-height: 100vh; 12 | background: #10131c; 13 | } 14 | 15 | .navigation { 16 | position: relative; 17 | width: 70px; 18 | height: 70px; 19 | background: #212532; 20 | border-radius: 10px; 21 | cursor: pointer; 22 | transition: 0.5s; 23 | display: flex; 24 | justify-content: center; 25 | align-items: center; 26 | transition-delay: 0.8s; 27 | } 28 | .navigation.active { 29 | width: 200px; 30 | height: 200px; 31 | transition-delay: 0s; 32 | } 33 | .navigation span { 34 | position: absolute; 35 | width: 7px; 36 | height: 7px; 37 | background: #fff; 38 | border-radius: 50%; 39 | transform: translate(calc(12px * var(--x)), calc(12px * var(--y))); 40 | transition: transform 0.5s, width 0.5s, height 0.5s, background 0.5s; 41 | transition-delay: calc(0.1s * var(--i)); 42 | display: flex; 43 | justify-content: center; 44 | align-items: center; 45 | } 46 | .navigation.active span { 47 | width: 45px; 48 | height: 45px; 49 | background: #333839; 50 | transform: translate(calc(60px * var(--x)), calc(60px * var(--y))); 51 | } 52 | 53 | .navigation span ion-icon { 54 | transition: 0.5s; 55 | font-size: 0em; 56 | } 57 | 58 | .navigation.active span ion-icon { 59 | font-size: 1.35em; 60 | color: #fff; 61 | } 62 | 63 | .navigation.active span:hover ion-icon { 64 | color: #2df352; 65 | filter: drop-shadow(0 0 2px #2df352) 66 | drop-shadow(0 0 5px #2df352) 67 | drop-shadow(0 0 15px #2df352); 68 | } -------------------------------------------------------------------------------- /Card UI Hover Effect/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Card UI Hover Effect/1.png -------------------------------------------------------------------------------- /Card UI Hover Effect/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Card UI Hover Effect/2.png -------------------------------------------------------------------------------- /Card UI Hover Effect/README.md: -------------------------------------------------------------------------------- 1 | # Card UI Hover Effect 2 | 3 | 4 | * Demo 1 5 | - 6 | 7 | * Demo 2 8 | - 9 | -------------------------------------------------------------------------------- /Card UI Hover Effect/images/code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Card UI Hover Effect/images/code.png -------------------------------------------------------------------------------- /Card UI Hover Effect/images/design.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Card UI Hover Effect/images/design.png -------------------------------------------------------------------------------- /Card UI Hover Effect/images/launch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Card UI Hover Effect/images/launch.png -------------------------------------------------------------------------------- /Card UI Hover Effect/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Card UI Hover Effect/script.js -------------------------------------------------------------------------------- /Claymorphism-List/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Claymorphism-List/1.png -------------------------------------------------------------------------------- /Claymorphism-List/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Claymorphism-List/2.png -------------------------------------------------------------------------------- /Claymorphism-List/README.md: -------------------------------------------------------------------------------- 1 | # Claymorphism List 2 | 3 | 4 | * Demo 1 5 | - 6 | 7 | * Demo 2 8 | - 9 | -------------------------------------------------------------------------------- /Claymorphism-List/loader.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Claymorphism-List/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Claymorphism-List/script.js -------------------------------------------------------------------------------- /Dad Jokes/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Dad Jokes/1.png -------------------------------------------------------------------------------- /Dad Jokes/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Dad Jokes/2.png -------------------------------------------------------------------------------- /Dad Jokes/README.md: -------------------------------------------------------------------------------- 1 | # Dad Joke - Fetch From API 2 | 3 | 4 | * Demo 1 5 | - 6 | 7 | * Demo 2 8 | - 9 | -------------------------------------------------------------------------------- /Dad Jokes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Dad Jokes 8 | 9 | 10 | 11 | 12 |
13 |

Don't Laugh Challenge

14 |
15 | //Joke goes here 16 |
17 | 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Dad Jokes/script.js: -------------------------------------------------------------------------------- 1 | const jokeEl = document.getElementById('joke'); 2 | const jokeBtn = document.getElementById('jokeBtn'); 3 | 4 | jokeBtn.addEventListener('click', generateJoke); 5 | 6 | generateJoke(); 7 | 8 | /* fethc->then Method */ 9 | /* function generateJoke() { 10 | const config = { 11 | headers: { 12 | 'Accept': 'application/json' 13 | } 14 | }; 15 | fetch('https://icanhazdadjoke.com', config) 16 | .then(res => res.json()) 17 | .then(data => { 18 | jokeEl.innerHTML = data.joke; 19 | }); 20 | } */ 21 | 22 | 23 | /* Async Method is more popular */ 24 | async function generateJoke() { 25 | const config = { 26 | headers: { 27 | 'Accept': 'application/json' 28 | } 29 | }; 30 | const res = await fetch('https://icanhazdadjoke.com', config); 31 | const data = await res.json(); 32 | jokeEl.innerHTML = data.joke; 33 | 34 | } -------------------------------------------------------------------------------- /Dad Jokes/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: #686de0; 9 | font-family: 'Roboto', 'sans-serif'; 10 | display: flex; 11 | flex-direction: column; 12 | align-items: center; 13 | justify-content: center; 14 | height: 100vh; 15 | overflow: hidden; 16 | margin: 0; 17 | padding: 20px; 18 | } 19 | 20 | .container { 21 | background-color: #fff; 22 | border-radius: 10px; 23 | box-shadow: 0 10px 20px rgba(0,0,0,0.1), 0 6px 6px rgba(0,0,0,0.1); 24 | padding: 50px 20px; 25 | text-align: center; 26 | max-width: 100%; 27 | width: 800px; 28 | } 29 | 30 | h3 { 31 | margin: 0; 32 | opacity: 0.5; 33 | letter-spacing: 2px; 34 | } 35 | 36 | .joke { 37 | font-size: 30px; 38 | letter-spacing: 1px; 39 | line-height: 40px; 40 | margin: 50px auto; 41 | max-width: 600px; 42 | } 43 | 44 | .btn { 45 | background-color: #9f68e0; 46 | border: 0; 47 | border-radius: 10px; 48 | box-shadow: 0 5px 15px rgba(0,0,0,0.1), 0 6px 6px rgba(0,0,0,0.1);; 49 | padding: 14px 40px; 50 | font-size: 16px; 51 | cursor: pointer; 52 | } 53 | 54 | .btn:active { 55 | transform: scale(0.98); 56 | } 57 | 58 | .btn:focus { 59 | outline: 0; 60 | } -------------------------------------------------------------------------------- /Expanding Card/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Expanding Card/1.png -------------------------------------------------------------------------------- /Expanding Card/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Expanding Card/2.png -------------------------------------------------------------------------------- /Expanding Card/README.md: -------------------------------------------------------------------------------- 1 | # Expanding Cards 2 | 3 | 4 | * Demo 1 5 | - 6 | 7 | * Demo 2 8 | - -------------------------------------------------------------------------------- /Expanding Card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Expanding Card 8 | 9 | 10 | 11 |
12 |
13 |

Explore The World

14 |
15 |
16 |

Moonlit Night

17 |
18 |
19 |

Sunny Beach

20 |
21 |
22 |

Deep Ocean

23 |
24 |
25 |

Drone Show

26 |
27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /Expanding Card/script.js: -------------------------------------------------------------------------------- 1 | const panels = document.querySelectorAll('.panel'); 2 | 3 | panels.forEach(panel=>{ 4 | panel.addEventListener('click', ()=> { 5 | removeActiveClasses(); 6 | panel.classList.add('active'); 7 | }) 8 | }); 9 | 10 | function removeActiveClasses() { 11 | panels.forEach(panel => { 12 | panel.classList.remove('active'); 13 | }); 14 | } -------------------------------------------------------------------------------- /Expanding Card/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: 'Muli', 'sans-serif'; 9 | display: flex; 10 | align-items: center; 11 | height: 100vh; 12 | overflow: hidden; 13 | margin: 0; 14 | } 15 | 16 | .container { 17 | display: flex; 18 | width: 90vw; 19 | } 20 | .panel{ 21 | background-size: auto 100%; 22 | background-position: center; 23 | background-repeat: no-repeat; 24 | height: 80vh; 25 | border-radius: 100px; 26 | color: #fff; 27 | cursor: pointer; 28 | flex: 0.5; 29 | margin: 10px; 30 | position: relative; 31 | transition: flex 0.7 ease-in; 32 | } 33 | 34 | .panel h3 { 35 | font-size: 24px; 36 | position: absolute; 37 | bottom: 40px; 38 | left: 40px; 39 | margin: 0; 40 | opacity: 0; 41 | } 42 | .panel.active { 43 | flex: 5; 44 | } 45 | 46 | .panel.active h3 { 47 | opacity: 1; 48 | transition: opacity 0.3s ease-in 0.4s; 49 | } 50 | 51 | @media(max-width: 480px) { 52 | .container { 53 | width: 100vw; 54 | } 55 | .panel:nth-of-type(4), 56 | .panel:nth-of-type(5) { 57 | display: none; 58 | } 59 | } -------------------------------------------------------------------------------- /FAQ Box/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/FAQ Box/1.png -------------------------------------------------------------------------------- /FAQ Box/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/FAQ Box/2.png -------------------------------------------------------------------------------- /FAQ Box/README.md: -------------------------------------------------------------------------------- 1 | # FAQ Box 2 | 3 | 4 | * Demo 1 5 | - 6 | 7 | * Demo 2 8 | - -------------------------------------------------------------------------------- /FAQ Box/script.js: -------------------------------------------------------------------------------- 1 | const toggles = document.querySelectorAll('.faq-toggle'); 2 | 3 | toggles.forEach(toggle => { 4 | toggle.addEventListener('click', ()=> { 5 | toggle.parentNode.classList.toggle('active'); 6 | }) 7 | }) -------------------------------------------------------------------------------- /Form Wave Animation/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Form Wave Animation/1.png -------------------------------------------------------------------------------- /Form Wave Animation/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Form Wave Animation/2.png -------------------------------------------------------------------------------- /Form Wave Animation/README.md: -------------------------------------------------------------------------------- 1 | # Form Wave Animation 2 | 3 | 4 | * Demo 1 5 | - 6 | 7 | * Demo 2 8 | - 9 | -------------------------------------------------------------------------------- /Form Wave Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Form Wave Animation 8 | 9 | 10 | 11 |
12 |

Login

13 |
14 |
15 | 16 | 17 |
18 |
19 | 20 | 21 |
22 | 23 |

Don't have an account? Register

24 |
25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /Form Wave Animation/script.js: -------------------------------------------------------------------------------- 1 | const labels = document.querySelectorAll('.form-control label'); 2 | 3 | labels.forEach(label => { 4 | label.innerHTML = label.innerText 5 | .split('') 6 | .map((letter, idx) => `${letter}`) 8 | .join('') 9 | }) -------------------------------------------------------------------------------- /Gallery/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/1.png -------------------------------------------------------------------------------- /Gallery/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/2.png -------------------------------------------------------------------------------- /Gallery/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/3.png -------------------------------------------------------------------------------- /Gallery/README.md: -------------------------------------------------------------------------------- 1 | # Gallery JQuery 2 | 3 | ## Screenshots 4 | 5 | 6 | * Demo 1 7 | - 8 | 9 | * Demo 2 10 | - 11 | 12 | * Demo 3 13 | - 14 | -------------------------------------------------------------------------------- /Gallery/images/gallery/acrobats_fullsize.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/acrobats_fullsize.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/acrobats_preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/acrobats_preview.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/acrobats_thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/acrobats_thumbnail.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/apartments_fullsize.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/apartments_fullsize.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/apartments_preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/apartments_preview.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/apartments_thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/apartments_thumbnail.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/berries_fullsize.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/berries_fullsize.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/berries_preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/berries_preview.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/berries_thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/berries_thumbnail.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/carousel_fullsize.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/carousel_fullsize.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/carousel_preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/carousel_preview.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/carousel_thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/carousel_thumbnail.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/eighteighteight_fullsize.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/eighteighteight_fullsize.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/eighteighteight_preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/eighteighteight_preview.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/eighteighteight_thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/eighteighteight_thumbnail.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/evergreens_fullsize.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/evergreens_fullsize.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/evergreens_preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/evergreens_preview.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/evergreens_thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/evergreens_thumbnail.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/fish_fullsize.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/fish_fullsize.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/fish_preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/fish_preview.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/fish_thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/fish_thumbnail.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/lantern_fullsize.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/lantern_fullsize.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/lantern_preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/lantern_preview.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/lantern_thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/lantern_thumbnail.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/montreal_fullsize.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/montreal_fullsize.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/montreal_preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/montreal_preview.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/montreal_thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/montreal_thumbnail.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/neptune_fullsize.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/neptune_fullsize.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/neptune_preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/neptune_preview.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/neptune_thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/neptune_thumbnail.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/nutcracker_fullsize.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/nutcracker_fullsize.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/nutcracker_preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/nutcracker_preview.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/nutcracker_thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/nutcracker_thumbnail.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/ornament_fullsize.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/ornament_fullsize.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/ornament_preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/ornament_preview.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/ornament_thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/ornament_thumbnail.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/pumpkins_fullsize.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/pumpkins_fullsize.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/pumpkins_preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/pumpkins_preview.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/pumpkins_thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/pumpkins_thumbnail.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/redplant_fullsize.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/redplant_fullsize.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/redplant_preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/redplant_preview.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/redplant_thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/redplant_thumbnail.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/refraction_fullsize.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/refraction_fullsize.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/refraction_preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/refraction_preview.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/refraction_thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/refraction_thumbnail.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/rose_fullsize.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/rose_fullsize.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/rose_preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/rose_preview.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/rose_thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/rose_thumbnail.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/sculpture_fullsize.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/sculpture_fullsize.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/sculpture_preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/sculpture_preview.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/sculpture_thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/sculpture_thumbnail.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/ship_fullsize.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/ship_fullsize.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/ship_preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/ship_preview.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/ship_thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/ship_thumbnail.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/stowe_fullsize.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/stowe_fullsize.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/stowe_preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/stowe_preview.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/stowe_thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/stowe_thumbnail.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/swatches_fullsize.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/swatches_fullsize.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/swatches_preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/swatches_preview.jpg -------------------------------------------------------------------------------- /Gallery/images/gallery/swatches_thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/gallery/swatches_thumbnail.jpg -------------------------------------------------------------------------------- /Gallery/images/templates/link_email.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/templates/link_email.png -------------------------------------------------------------------------------- /Gallery/images/templates/link_zoom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/templates/link_zoom.png -------------------------------------------------------------------------------- /Gallery/images/templates/page_bottom.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/templates/page_bottom.jpg -------------------------------------------------------------------------------- /Gallery/images/templates/page_tile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/templates/page_tile.jpg -------------------------------------------------------------------------------- /Gallery/images/templates/page_top.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/images/templates/page_top.jpg -------------------------------------------------------------------------------- /Gallery/includes/farinspace/README.md: -------------------------------------------------------------------------------- 1 | [jQuery Image Preload Plugin][imgpreload] 2 | ========================= 3 | 4 | The jQuery imgpreload plugin allows you to preload images before and/or after the DOM is loaded. 5 | 6 | [imgpreload]: http://farinspace.com/2009/05/jquery-image-preload-plugin/ "jQuery Image Preload Plugin" -------------------------------------------------------------------------------- /Gallery/includes/farinspace/jquery.imgpreload.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Copyright (c) 2009 Dimas Begunoff, http://www.farinspace.com 4 | 5 | Licensed under the MIT license 6 | http://en.wikipedia.org/wiki/MIT_License 7 | 8 | */ 9 | 10 | function imgpreload(a,b){if(b instanceof Function){b={all:b}}if(typeof a=="string"){a=[a]}var c=[];var t=a.length;var i=0;for(i;i=t&&b.all instanceof Function){b.all.call(c)}};d.src=a[i]}}if(typeof jQuery!="undefined"){(function($){$.imgpreload=imgpreload;$.fn.imgpreload=function(b){b=$.extend({},$.fn.imgpreload.defaults,(b instanceof Function)?{all:b}:b);this.each(function(){var a=this;imgpreload($(this).attr('src'),function(){if(b.each instanceof Function){b.each.call(a)}})});var c=[];this.each(function(){c.push($(this).attr('src'))});var d=this;imgpreload(c,function(){if(b.all instanceof Function){b.all.call(d)}});return this};$.fn.imgpreload.defaults={each:null,all:null}})(jQuery)} -------------------------------------------------------------------------------- /Gallery/includes/gallery.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | 3 | $('.gallery_thumbnails a').click(function(e){ 4 | e.preventDefault(); 5 | $('.gallery_thumbnails a').removeClass('selected'); 6 | $('.gallery_thumbnails a').children().css('opacity','1'); 7 | $(this).addClass('selected'); 8 | $(this).children().css('opacity','0.4'); 9 | 10 | var photo_caption = $(this).attr('title'); 11 | var photo_fullsize = $(this).attr('href'); 12 | var photo_preview = photo_fullsize.replace('_fullsize','_preview'); 13 | 14 | $('.gallery_preview').html(''); 15 | $('.gallery_caption').html('

View larger

'+photo_caption+'

') 16 | }); 17 | 18 | }); -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/ajax.txt: -------------------------------------------------------------------------------- 1 |
2 |

This comes from ajax request

3 |

4 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non velit. Donec pharetra, felis ut tristique adipiscing, diam magna rhoncus neque, sit amet convallis nibh nibh vel libero. Nulla facilisi. In eleifend nisl quis lorem. Duis semper fringilla justo. Proin imperdiet sapien sed lectus. Integer quis nisl et est elementum tempor. Morbi quis tellus nec turpis suscipit molestie. Praesent sed pede. Pellentesque ac orci. Sed sit amet urna eget tellus hendrerit aliquet. Nulla consectetur, pede aliquam ornare placerat, nunc augue commodo leo, sit amet elementum dolor est eleifend magna. 5 |

6 |
-------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/example/10_b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/example/10_b.jpg -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/example/10_s.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/example/10_s.jpg -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/example/11_b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/example/11_b.jpg -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/example/11_s.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/example/11_s.jpg -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/example/12_b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/example/12_b.jpg -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/example/12_s.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/example/12_s.jpg -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/example/1_b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/example/1_b.jpg -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/example/1_s.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/example/1_s.jpg -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/example/2_b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/example/2_b.jpg -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/example/2_s.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/example/2_s.jpg -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/example/3_b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/example/3_b.jpg -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/example/3_s.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/example/3_s.jpg -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/example/4_b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/example/4_b.jpg -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/example/4_s.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/example/4_s.jpg -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/example/5_b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/example/5_b.jpg -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/example/5_s.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/example/5_s.jpg -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/example/6_b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/example/6_b.jpg -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/example/6_s.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/example/6_s.jpg -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/example/7_b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/example/7_b.jpg -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/example/7_s.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/example/7_s.jpg -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/example/8_b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/example/8_b.jpg -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/example/8_s.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/example/8_s.jpg -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/example/9_b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/example/9_b.jpg -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/example/9_s.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/example/9_s.jpg -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/fancybox/blank.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/fancybox/blank.gif -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/fancybox/fancy_close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/fancybox/fancy_close.png -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/fancybox/fancy_loading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/fancybox/fancy_loading.png -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/fancybox/fancy_nav_left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/fancybox/fancy_nav_left.png -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/fancybox/fancy_nav_right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/fancybox/fancy_nav_right.png -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/fancybox/fancy_shadow_e.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/fancybox/fancy_shadow_e.png -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/fancybox/fancy_shadow_n.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/fancybox/fancy_shadow_n.png -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/fancybox/fancy_shadow_ne.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/fancybox/fancy_shadow_ne.png -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/fancybox/fancy_shadow_nw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/fancybox/fancy_shadow_nw.png -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/fancybox/fancy_shadow_s.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/fancybox/fancy_shadow_s.png -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/fancybox/fancy_shadow_se.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/fancybox/fancy_shadow_se.png -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/fancybox/fancy_shadow_sw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/fancybox/fancy_shadow_sw.png -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/fancybox/fancy_shadow_w.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/fancybox/fancy_shadow_w.png -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/fancybox/fancy_title_left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/fancybox/fancy_title_left.png -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/fancybox/fancy_title_main.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/fancybox/fancy_title_main.png -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/fancybox/fancy_title_over.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/fancybox/fancy_title_over.png -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/fancybox/fancy_title_right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/fancybox/fancy_title_right.png -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/fancybox/fancybox-x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/fancybox/fancybox-x.png -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/fancybox/fancybox-y.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/fancybox/fancybox-y.png -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/fancybox/fancybox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Gallery/includes/jquery.fancybox-1.3.4/fancybox/fancybox.png -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/fancybox/jquery.mousewheel-3.0.4.pack.js: -------------------------------------------------------------------------------- 1 | /*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net) 2 | * Licensed under the MIT License (LICENSE.txt). 3 | * 4 | * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers. 5 | * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix. 6 | * Thanks to: Seamus Leahy for adding deltaX and deltaY 7 | * 8 | * Version: 3.0.4 9 | * 10 | * Requires: 1.2.2+ 11 | */ 12 | 13 | (function(d){function g(a){var b=a||window.event,i=[].slice.call(arguments,1),c=0,h=0,e=0;a=d.event.fix(b);a.type="mousewheel";if(a.wheelDelta)c=a.wheelDelta/120;if(a.detail)c=-a.detail/3;e=c;if(b.axis!==undefined&&b.axis===b.HORIZONTAL_AXIS){e=0;h=-1*c}if(b.wheelDeltaY!==undefined)e=b.wheelDeltaY/120;if(b.wheelDeltaX!==undefined)h=-1*b.wheelDeltaX/120;i.unshift(a,c,h,e);return d.event.handle.apply(this,i)}var f=["DOMMouseScroll","mousewheel"];d.event.special.mousewheel={setup:function(){if(this.addEventListener)for(var a= 14 | f.length;a;)this.addEventListener(f[--a],g,false);else this.onmousewheel=g},teardown:function(){if(this.removeEventListener)for(var a=f.length;a;)this.removeEventListener(f[--a],g,false);else this.onmousewheel=null}};d.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})})(jQuery); -------------------------------------------------------------------------------- /Gallery/includes/jquery.fancybox-1.3.4/style.css: -------------------------------------------------------------------------------- 1 | html, body, div, ul { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | color: #262626; 8 | background: #f4f4f4; 9 | font: normal 12px/18px Verdana, sans-serif; 10 | } 11 | 12 | #content { 13 | width: 400px; 14 | margin: 40px auto 0 auto; 15 | padding: 0 60px 30px 60px; 16 | border: solid 1px #cbcbcb; 17 | background: #fafafa; 18 | -moz-box-shadow: 0px 0px 10px #cbcbcb; 19 | -webkit-box-shadow: 0px 0px 10px #cbcbcb; 20 | } 21 | 22 | h1 { 23 | margin: 30px 0 15px 0; 24 | font-size: 30px; 25 | font-weight: bold; 26 | font-family: Arial; 27 | } 28 | 29 | h1 span { 30 | font-size: 50%; 31 | letter-spacing: -0.05em; 32 | } 33 | 34 | hr { 35 | border: none; 36 | height: 1px; line-height: 1px; 37 | background: #E5E5E5; 38 | margin-bottom: 20px; 39 | padding: 0; 40 | } 41 | 42 | p { 43 | margin: 0; 44 | padding: 7px 0; 45 | } 46 | 47 | a { 48 | outline: none; 49 | } 50 | 51 | a img { 52 | border: 1px solid #BBB; 53 | padding: 2px; 54 | margin: 10px 20px 10px 0; 55 | vertical-align: top; 56 | } 57 | 58 | a img.last { 59 | margin-right: 0; 60 | } 61 | 62 | ul { 63 | margin-bottom: 24px; 64 | padding-left: 30px; 65 | } 66 | -------------------------------------------------------------------------------- /Gallery/loader.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Glassmorphism/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Glassmorphism/1.png -------------------------------------------------------------------------------- /Glassmorphism/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Glassmorphism/2.png -------------------------------------------------------------------------------- /Glassmorphism/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Glassmorphism/3.png -------------------------------------------------------------------------------- /Glassmorphism/README.md: -------------------------------------------------------------------------------- 1 | # Glass Morphism Landing Page 2 | 3 | 4 | * Demo 1 5 | - 6 | 7 | * Demo 2 8 | - 9 | 10 | * Demo 3 11 | - -------------------------------------------------------------------------------- /Glassmorphism/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Glassmorphism/close.png -------------------------------------------------------------------------------- /Glassmorphism/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Glass Morphism Website 8 | 9 | 10 | 11 | 12 |
13 |
14 | 15 |
16 |
17 |
18 |
19 |

Happiness...
Crystal clear ocean water

20 |
21 | 22 | 27 | 33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /Glassmorphism/loader.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Glassmorphism/menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Glassmorphism/menu.png -------------------------------------------------------------------------------- /Glassmorphism/ocean.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Glassmorphism/ocean.mp4 -------------------------------------------------------------------------------- /Glassmorphism/script.js: -------------------------------------------------------------------------------- 1 | function menuToggle(){ 2 | const toggleMenu = document.querySelector('.toggle'); 3 | const section = document.querySelector('section'); 4 | toggleMenu.classList.toggle('active'); 5 | section.classList.toggle('active'); 6 | } -------------------------------------------------------------------------------- /Hidden Search Widget/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Hidden Search Widget/1.png -------------------------------------------------------------------------------- /Hidden Search Widget/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Hidden Search Widget/2.png -------------------------------------------------------------------------------- /Hidden Search Widget/README.md: -------------------------------------------------------------------------------- 1 | # Hidden Search Widget 2 | 3 | 4 | * Demo 1 5 | - 6 | 7 | * Demo 2 8 | - 9 | -------------------------------------------------------------------------------- /Hidden Search Widget/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Hidden Search 8 | 10 | 11 | 12 | 13 |
14 | 15 | 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /Hidden Search Widget/script.js: -------------------------------------------------------------------------------- 1 | const search = document.querySelector('.search') 2 | const btn = document.querySelector('.btn') 3 | const input = document.querySelector('.input') 4 | 5 | 6 | btn.addEventListener('click', () => { 7 | search.classList.toggle('active') 8 | input.focus() 9 | }) -------------------------------------------------------------------------------- /Hidden Search Widget/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-image: linear-gradient(90deg, #7d5fff, #7158e2); 9 | font-family: 'Roboto', 'sans-serif'; 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | height: 100vh; 14 | overflow: hidden; 15 | margin: 0; 16 | } 17 | 18 | .search { 19 | position: relative; 20 | height: 50px; 21 | } 22 | 23 | .search .input { 24 | background-color: #fff; 25 | border: 0; 26 | font-size: 18px; 27 | padding: 15px; 28 | height: 50px; 29 | width: 50px; 30 | transition: width 0.3s ease; 31 | } 32 | 33 | .btn { 34 | background-color: #fff; 35 | border: 0; 36 | cursor: pointer; 37 | font-size: 24px; 38 | position: absolute; 39 | top: 0; 40 | left: 0; 41 | height: 50px; 42 | width: 50px; 43 | transition: transform 0.3s ease; 44 | } 45 | 46 | .btn:focus, .input:focus { 47 | outline: none; 48 | } 49 | 50 | 51 | .search.active .input { 52 | width: 200px; 53 | } 54 | 55 | .search.active .btn { 56 | transform: translateX(198px); 57 | } -------------------------------------------------------------------------------- /IconDropShadow/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/IconDropShadow/1.png -------------------------------------------------------------------------------- /IconDropShadow/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/IconDropShadow/2.png -------------------------------------------------------------------------------- /IconDropShadow/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/IconDropShadow/3.png -------------------------------------------------------------------------------- /IconDropShadow/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/IconDropShadow/4.png -------------------------------------------------------------------------------- /IconDropShadow/README.md: -------------------------------------------------------------------------------- 1 | # Icon DropShadow 2 | 3 | 4 | * Demo 1 5 | - 6 | 7 | * Demo 2 8 | - 9 | 10 | * Demo 3 11 | - 12 | 13 | * Demo 4 14 | - -------------------------------------------------------------------------------- /IconDropShadow/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Icon DropShadow 8 | 9 | 10 | 11 | 12 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /IconDropShadow/loader.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /IconDropShadow/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/IconDropShadow/script.js -------------------------------------------------------------------------------- /Infinite-scroll/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Infinite-scroll/1.png -------------------------------------------------------------------------------- /Infinite-scroll/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Infinite-scroll/2.png -------------------------------------------------------------------------------- /Infinite-scroll/README.md: -------------------------------------------------------------------------------- 1 | # Infinite Scroll 2 | 3 | 4 | * Demo 1 5 | - 6 | 7 | * Demo 2 8 | - -------------------------------------------------------------------------------- /Infinite-scroll/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Infinite-scroll/favicon.png -------------------------------------------------------------------------------- /Infinite-scroll/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Infinite Scroll 7 | 8 | 9 | 10 | 11 | 12 |

13 | Unsplash API - Infinite Scroll 14 |

15 | 16 |
17 | Loading 18 |
19 | 20 |
21 | 22 |
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /Infinite-scroll/loader.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Infinite-scroll/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap'); 2 | 3 | html { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | margin: 0; 9 | font-family: Bebas Neue, sans-serif; 10 | background-color: whitesmoke; 11 | min-height: 100vh; 12 | } 13 | 14 | h1 { 15 | text-align: center; 16 | margin-top: 25px; 17 | margin-bottom: 15px; 18 | font-size: 40px; 19 | letter-spacing: 5px; 20 | } 21 | 22 | .loader { 23 | position: fixed; 24 | top: 0; 25 | bottom: 0; 26 | left: 0; 27 | right: 0; 28 | background: rgba(255,255,255, 0.8); 29 | } 30 | 31 | .loader img { 32 | position: fixed; 33 | top: 50%; 34 | left: 50%; 35 | transform: translate(-50%, -50%); 36 | } 37 | 38 | .image-container { 39 | margin: 10px 10%; 40 | } 41 | 42 | .image-container img { 43 | width: 100%; 44 | margin-top: 5px; 45 | } 46 | 47 | /* Media Query: large smartphone */ 48 | 49 | @media screen and (max-width: 600px) { 50 | h1{ 51 | font-size: 20px; 52 | } 53 | .image-container { 54 | margin: 10px 5%; 55 | } 56 | } -------------------------------------------------------------------------------- /Key Code/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Key Code/1.png -------------------------------------------------------------------------------- /Key Code/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Key Code/2.png -------------------------------------------------------------------------------- /Key Code/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Key Code/3.png -------------------------------------------------------------------------------- /Key Code/README.md: -------------------------------------------------------------------------------- 1 | # Key Code 2 | 3 | 4 | * Demo 1 5 | - 6 | 7 | * Demo 2 8 | - 9 | 10 | * Demo 3 11 | - -------------------------------------------------------------------------------- /Key Code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Event KeyCode 8 | 9 | 10 | 11 |
12 |
13 | Press any key to get the Key Code 14 |
15 | 16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /Key Code/script.js: -------------------------------------------------------------------------------- 1 | const insert = document.getElementById('insert'); 2 | 3 | window.addEventListener('keydown', (e)=>{ 4 | insert.innerHTML = `
5 | ${e.key === ' ' ? 'Space' : e.key} 6 | event.key 7 |
8 |
9 | ${e.keyCode} 10 | event.keyCode 11 |
12 |
13 | ${e.code} 14 | event.code 15 |
` 16 | }); 17 | -------------------------------------------------------------------------------- /Key Code/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: #e1e1e1; 9 | font-family: 'Muli', 'sans-serif'; 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | text-align: center; 14 | height: 100vh; 15 | overflow: hidden; 16 | margin: 0; 17 | } 18 | 19 | .key { 20 | border: 1px solid #999; 21 | background-color: #eee; 22 | box-shadow: 1px 1px 3px rgba(0,0,0,0.1); 23 | display: inline-flex; 24 | align-items: center; 25 | font-size: 20px; 26 | font-weight: bold; 27 | padding: 20px; 28 | flex-direction: column; 29 | margin: 10px; 30 | min-width: 150px; 31 | position: relative; 32 | } 33 | 34 | .key small { 35 | position: absolute; 36 | top: -24px; 37 | left: 0px; 38 | text-align: center; 39 | width: 100%; 40 | color: #555; 41 | font-size: 14px; 42 | } -------------------------------------------------------------------------------- /Math Website/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Math Website/1.png -------------------------------------------------------------------------------- /Math Website/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Math Website/2.png -------------------------------------------------------------------------------- /Math Website/README.md: -------------------------------------------------------------------------------- 1 | # Project Name 2 | 3 | 4 | * Demo 1 5 | - 6 | 7 | * Demo 2 8 | - 9 | 10 | * Demo 3 11 | - -------------------------------------------------------------------------------- /Math Website/arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Math Website/arrow.png -------------------------------------------------------------------------------- /Math Website/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Math Website/script.js -------------------------------------------------------------------------------- /Math Website/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Math Website/search.png -------------------------------------------------------------------------------- /Math Website/tick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Math Website/tick.png -------------------------------------------------------------------------------- /MoviesUi/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/MoviesUi/1.png -------------------------------------------------------------------------------- /MoviesUi/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/MoviesUi/2.png -------------------------------------------------------------------------------- /MoviesUi/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/MoviesUi/3.png -------------------------------------------------------------------------------- /MoviesUi/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/MoviesUi/4.png -------------------------------------------------------------------------------- /MoviesUi/README.md: -------------------------------------------------------------------------------- 1 | # Movies Review 2 | 3 | 4 | * Demo 1 5 | - 6 | 7 | * Demo 2 8 | - 9 | 10 | * Demo 3 11 | - 12 | 13 | * Demo 4 - Search Result 14 | - -------------------------------------------------------------------------------- /MoviesUi/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Movie Review 8 | 9 | 10 | 11 | 12 |
13 |
14 | 15 |
16 |
17 |
18 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /MoviesUi/loader.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Nav Animation/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Nav Animation/1.png -------------------------------------------------------------------------------- /Nav Animation/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Nav Animation/2.png -------------------------------------------------------------------------------- /Nav Animation/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Nav Animation/3.png -------------------------------------------------------------------------------- /Nav Animation/README.md: -------------------------------------------------------------------------------- 1 | # Nav Animation 2 | 3 | 4 | * Demo 1 5 | - 6 | 7 | * Demo 2 8 | - 9 | 10 | * Demo 3 11 | - -------------------------------------------------------------------------------- /Nav Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Animated Navigation 8 | 9 | 10 | 11 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /Nav Animation/script.js: -------------------------------------------------------------------------------- 1 | const toggle = document.getElementById('toggle'); 2 | const nav = document.getElementById('nav'); 3 | 4 | toggle.addEventListener('click', () => nav.classList.toggle('active')) -------------------------------------------------------------------------------- /Navigation/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Navigation/1.png -------------------------------------------------------------------------------- /Navigation/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Navigation/2.png -------------------------------------------------------------------------------- /Navigation/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Navigation/3.png -------------------------------------------------------------------------------- /Navigation/README.md: -------------------------------------------------------------------------------- 1 | # Navigation Menu - Curved 2 | 3 | 4 | * Demo 1 5 | - 6 | 7 | * Demo 2 8 | - 9 | 10 | * Demo 3 11 | - -------------------------------------------------------------------------------- /Navigation/loader.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Navigation/script.js: -------------------------------------------------------------------------------- 1 | let list = document.querySelectorAll('.list'); 2 | 3 | function activeLink(){ 4 | list.forEach((item) => { 5 | item.classList.remove('active'); 6 | this.classList.add('active'); 7 | }) 8 | } 9 | 10 | list.forEach((item) => { 11 | item.addEventListener('click', activeLink); 12 | }) -------------------------------------------------------------------------------- /PIP/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/PIP/1.png -------------------------------------------------------------------------------- /PIP/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/PIP/2.png -------------------------------------------------------------------------------- /PIP/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/PIP/3.png -------------------------------------------------------------------------------- /PIP/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/PIP/4.png -------------------------------------------------------------------------------- /PIP/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/PIP/5.png -------------------------------------------------------------------------------- /PIP/README.md: -------------------------------------------------------------------------------- 1 | # Picture in Picture 2 | 3 | 4 | * Demo 1 5 | - 6 | 7 | * Demo 2 8 | - 9 | 10 | * Demo 3 11 | - 12 | 13 | * Demo 4 14 | - 15 | 16 | * Demo 5 17 | - -------------------------------------------------------------------------------- /PIP/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Picture in Picture 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /PIP/loader.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /PIP/script.js: -------------------------------------------------------------------------------- 1 | const videoEl = document.getElementById('video'); 2 | const button = document.getElementById('button'); 3 | 4 | // Prompt user to select media stream, pass to video element, then play 5 | 6 | async function selectMediaStream() { 7 | try{ 8 | const mediaStream = await navigator.mediaDevices.getDisplayMedia(); 9 | videoEl.srcObject = mediaStream; 10 | videoEl.onloadedmetadata = () => { 11 | videoEl.play(); 12 | }; 13 | }catch(error){ 14 | // Catch Error 15 | console.log('Happened: ' + error); 16 | } 17 | } 18 | 19 | button.addEventListener('click', async () => { 20 | button.disabled = true; 21 | await videoEl.requestPictureInPicture(); 22 | button.disabled = false; 23 | }); 24 | 25 | // On Load 26 | selectMediaStream(); -------------------------------------------------------------------------------- /PIP/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); 2 | 3 | html { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | margin: 0; 9 | min-height: 100vh; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | background: rgb(37, 37, 37); 14 | } 15 | 16 | .btn-container { 17 | border: 2px solid black; 18 | padding: 10px; 19 | border-radius: 7px; 20 | box-shadow: inset 0 20px 4px -19px rgba(255, 255, 255, 0.7); 21 | /* inset -> inside shadow then 4 values -> horizontal offset, vertical offset, blur, spreading area, then color */ 22 | } 23 | 24 | button { 25 | cursor: pointer; 26 | outline: none; 27 | width: 120px; 28 | height: 75px; 29 | font-family: 'Barlow', sans-serif; 30 | font-size: 25px; 31 | text-transform: uppercase; 32 | color: white; 33 | text-shadow: 0 2px 5px black; 34 | background: linear-gradient(to top, #696969, #575757); 35 | border: 2px solid black; 36 | border-radius: 7px; 37 | box-shadow: inset 0 20px 4px -19px rgba(255, 255, 255, 0.4), 38 | 0 12px 12px 0 rgba(0, 0, 0, 0.3); 39 | } 40 | 41 | button:hover { 42 | background: linear-gradient(to bottom, #696969, #575757); 43 | } 44 | 45 | button:active { 46 | transform: translateY(3px); 47 | box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.3); 48 | } 49 | -------------------------------------------------------------------------------- /Product/.gitignore: -------------------------------------------------------------------------------- 1 | # Avoid accidental upload of the Sketch and Figma design files 2 | ##################################################### 3 | ## Please do not remove lines 5 and 6 - thanks! 🙂 ## 4 | ##################################################### 5 | *.sketch 6 | *.fig 7 | 8 | # Avoid accidental XD upload if you convert the design file 9 | ############################################### 10 | ## Please do not remove line 12 - thanks! 🙂 ## 11 | ############################################### 12 | *.xd 13 | 14 | # Avoid your project being littered with annoying .DS_Store files! 15 | .DS_Store 16 | .prettierignore -------------------------------------------------------------------------------- /Product/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Product/1.png -------------------------------------------------------------------------------- /Product/design/active-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Product/design/active-states.jpg -------------------------------------------------------------------------------- /Product/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Product/design/desktop-design.jpg -------------------------------------------------------------------------------- /Product/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Product/design/desktop-preview.jpg -------------------------------------------------------------------------------- /Product/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Product/design/mobile-design.jpg -------------------------------------------------------------------------------- /Product/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Product/images/favicon-32x32.png -------------------------------------------------------------------------------- /Product/images/icon-cart.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Product/images/image-product-desktop.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Product/images/image-product-desktop.jpg -------------------------------------------------------------------------------- /Product/images/image-product-mobile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Product/images/image-product-mobile.jpg -------------------------------------------------------------------------------- /Product/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Frontend Mentor | Product preview card component 10 | 11 | 12 | 16 | 17 | 18 | 19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
Perfume
28 |
Gabrielle Essence Eau De Parfum
29 |
A floral, solar and voluptuous interpretation composed by Olivier Polge, 30 | Perfumer-Creator for the House of CHANEL.
31 |
32 | $149.99$169.99 33 |
34 |
35 | cartAdd to Cart 36 |
37 |
38 |
39 | 40 |
41 |
42 |
43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /Product/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Dark cyan: hsl(158, 36%, 37%) 15 | - Cream: hsl(30, 38%, 92%) 16 | 17 | ### Neutral 18 | 19 | - Very dark blue: hsl(212, 21%, 14%) 20 | - Dark grayish blue: hsl(228, 12%, 48%) 21 | - White: hsl(0, 0%, 100%) 22 | 23 | ## Typography 24 | 25 | ### Body Copy 26 | 27 | - Font size (paragraph): 14px 28 | 29 | ### Font 30 | 31 | - Family: [Montserrat](https://fonts.google.com/specimen/Montserrat) 32 | - Weights: 500, 700 33 | 34 | - Family: [Fraunces](https://fonts.google.com/specimen/Fraunces) 35 | - Weights: 700 36 | -------------------------------------------------------------------------------- /Progress Steps/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Progress Steps/1.png -------------------------------------------------------------------------------- /Progress Steps/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Progress Steps/2.png -------------------------------------------------------------------------------- /Progress Steps/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Progress Steps/3.png -------------------------------------------------------------------------------- /Progress Steps/README.md: -------------------------------------------------------------------------------- 1 | # Progress Steps 2 | 3 | 4 | * Demo 1 5 | - 6 | 7 | * Demo 2 8 | - 9 | 10 | * Demo 3 11 | - -------------------------------------------------------------------------------- /Progress Steps/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Progress Steps 8 | 9 | 10 | 11 |
12 |
13 |
14 |
1
15 |
2
16 |
3
17 |
4
18 |
19 | 20 | 21 |
22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /Progress Steps/script.js: -------------------------------------------------------------------------------- 1 | const progress = document.getElementById('progress') 2 | const prev = document.getElementById('prev') 3 | const next = document.getElementById('next') 4 | const circles = document.querySelectorAll('.circle') 5 | 6 | let currentActive = 1; 7 | 8 | next.addEventListener('click', () => { 9 | currentActive++; 10 | if(currentActive > circles.length) { 11 | currentActive = circles.length 12 | } 13 | update() 14 | }) 15 | 16 | prev.addEventListener('click', () => { 17 | currentActive--; 18 | if(currentActive < 1) { 19 | currentActive = 1 20 | } 21 | update() 22 | }) 23 | 24 | function update() { 25 | circles.forEach((circle, index) => { 26 | if(index < currentActive) { 27 | circle.classList.add('active'); 28 | } else { 29 | circle.classList.remove('active'); 30 | } 31 | }); 32 | 33 | const actives = document.querySelectorAll('.active'); 34 | progress.style.width = (actives.length - 1) / (circles.length - 1) * 100 + '%'; 35 | 36 | if(currentActive === 1) { 37 | prev.disabled = true; 38 | } else if(currentActive === circles.length) { 39 | next.disabled = true; 40 | } else { 41 | prev.disabled = false; 42 | next.disabled = false; 43 | } 44 | } -------------------------------------------------------------------------------- /Quote Generator/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Quote Generator/1.png -------------------------------------------------------------------------------- /Quote Generator/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Quote Generator/2.png -------------------------------------------------------------------------------- /Quote Generator/README.md: -------------------------------------------------------------------------------- 1 | # Quote Generator 2 | 3 | 4 | * Demo 1 5 | - 6 | 7 | * Demo 2 8 | - -------------------------------------------------------------------------------- /Quote Generator/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Quote Generator/favicon.png -------------------------------------------------------------------------------- /Quote Generator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Quote Generator 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 |
15 | 16 | 17 |
18 | 19 |
20 | 21 |
22 | 23 |
24 | 27 | 28 |
29 |
30 | 31 |
32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /Random Choice Picker/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Random Choice Picker/1.png -------------------------------------------------------------------------------- /Random Choice Picker/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Random Choice Picker/2.png -------------------------------------------------------------------------------- /Random Choice Picker/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Random Choice Picker/3.png -------------------------------------------------------------------------------- /Random Choice Picker/README.md: -------------------------------------------------------------------------------- 1 | # Random Choice Picker 2 | 3 | 4 | * Demo 1 5 | - 6 | 7 | * Demo 2 8 | - 9 | 10 | * Demo 3 11 | - -------------------------------------------------------------------------------- /Random Choice Picker/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Random Choice Picker 8 | 9 | 10 | 11 |
12 |

Enter all of the choices divided by a comma(','). 13 |
Press enter when you're done

14 | 15 |
16 | Choice1 17 | Choice2 18 | Choice3 19 |
20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /Random Choice Picker/script.js: -------------------------------------------------------------------------------- 1 | const tagsEl = document.getElementById('tags'); 2 | const textarea = document.getElementById('textarea'); 3 | 4 | textarea.focus(); 5 | 6 | textarea.addEventListener('keyup', (e) => { 7 | createTags(e.target.value); 8 | if(e.key === 'Enter') { 9 | setTimeout(() => { 10 | e.target.value = ''; 11 | }, 10) 12 | randomSelect(); 13 | } 14 | }); 15 | 16 | function createTags(input) { 17 | const tags = input.split(',').filter(tag => tag.trim() !== '').map(tag => tag.trim()); 18 | tagsEl.innerHTML = ''; 19 | tags.forEach(tag => { 20 | const tagEl = document.createElement('span'); 21 | tagEl.classList.add('tag'); 22 | tagEl.innerText = tag; 23 | tagsEl.appendChild(tagEl); 24 | }); 25 | } 26 | 27 | function randomSelect(){ 28 | const times = 30; 29 | const interval = setInterval(() => { 30 | const randomTag = pickRandomTag(); 31 | highlightTag(randomTag); 32 | setTimeout(() => { 33 | unHighlightTag(randomTag); 34 | }, 100); 35 | }, 100); 36 | setTimeout(() => { 37 | clearInterval(interval); 38 | setTimeout(() => { 39 | const randomTag = pickRandomTag(); 40 | highlightTag(randomTag); 41 | }, 100); 42 | }, times * 100); 43 | } 44 | 45 | function pickRandomTag(){ 46 | const tags = document.querySelectorAll('.tag'); 47 | return tags[Math.floor(Math.random() * tags.length)]; 48 | } 49 | 50 | function highlightTag(tag){ 51 | tag.classList.add('highlight'); 52 | } 53 | 54 | function unHighlightTag(tag){ 55 | tag.classList.remove('highlight'); 56 | } -------------------------------------------------------------------------------- /Random Choice Picker/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: #2b88f0; 9 | font-family: 'Muli', 'sans-serif'; 10 | display: flex; 11 | flex-direction: column; 12 | align-items: center; 13 | justify-content: center; 14 | height: 100vh; 15 | overflow: hidden; 16 | margin: 0; 17 | } 18 | 19 | h3 { 20 | color: #fff; 21 | margin: 10px 0 20px; 22 | text-align: center; 23 | } 24 | 25 | .container { 26 | width: 500px; 27 | } 28 | 29 | textarea { 30 | border: none; 31 | border-radius: 10px; 32 | display: block; 33 | width: 100%; 34 | height: 100px; 35 | font-family: inherit; 36 | padding: 10px; 37 | margin: 0 0 20px; 38 | font-size: 16px; 39 | } 40 | 41 | .tag { 42 | background-color: #f0932b; 43 | color: #fff; 44 | border-radius: 50px; 45 | padding: 10px 20px; 46 | margin: 0 5px 10px 0; 47 | font-size: 14px; 48 | display: inline-block; 49 | } 50 | 51 | .tag.highlight { 52 | background-color: #273c75; 53 | } -------------------------------------------------------------------------------- /Random-Color-Palette/palette.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Random-Color-Palette/palette.png -------------------------------------------------------------------------------- /Random-Color-Palette/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: consolas; 6 | } 7 | 8 | .btn{ 9 | background: none; 10 | color: #111; 11 | padding: 15px 60px; 12 | font-size: 1em; 13 | margin: 20px auto; 14 | max-width: 200px; 15 | outline: none; 16 | display: block; 17 | border: 2px solid #111; 18 | cursor: pointer; 19 | } 20 | 21 | .container{ 22 | display: flex; 23 | flex-wrap: wrap; 24 | } 25 | 26 | .box { 27 | width: 20%; 28 | height: 150px; 29 | display: flex; 30 | justify-content: center; 31 | align-items: center; 32 | background: #f00; 33 | border: 2px solid #fff; 34 | color: #fff; 35 | font-size: 1.5em; 36 | cursor: pointer; 37 | } -------------------------------------------------------------------------------- /Report.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Report.png -------------------------------------------------------------------------------- /Rotating Navbar/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Rotating Navbar/1.png -------------------------------------------------------------------------------- /Rotating Navbar/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Rotating Navbar/2.png -------------------------------------------------------------------------------- /Rotating Navbar/README.md: -------------------------------------------------------------------------------- 1 | # Rotating Nav 2 | 3 | 4 | * Demo 1 5 | - 6 | 7 | * Demo 2 8 | - 9 | -------------------------------------------------------------------------------- /Rotating Navbar/script.js: -------------------------------------------------------------------------------- 1 | const open = document.getElementById('open'); 2 | const close = document.getElementById('close'); 3 | const container = document.querySelector('.container') 4 | 5 | open.addEventListener('click', () => { 6 | container.classList.add('show-nav'); 7 | }) 8 | 9 | close.addEventListener('click', () => { 10 | container.classList.remove('show-nav'); 11 | }) -------------------------------------------------------------------------------- /Scroll Animation/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Scroll Animation/1.png -------------------------------------------------------------------------------- /Scroll Animation/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Scroll Animation/2.png -------------------------------------------------------------------------------- /Scroll Animation/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Scroll Animation/3.png -------------------------------------------------------------------------------- /Scroll Animation/README.md: -------------------------------------------------------------------------------- 1 | # Scroll Animation 2 | 3 | 4 | * Demo 1 5 | - 6 | 7 | * Demo 2 8 | - 9 | 10 | * Demo 3 11 | - -------------------------------------------------------------------------------- /Scroll Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Scroll Animation 8 | 9 | 10 | 11 |

Scroll to see the animation

12 |

Content

13 |

Content

14 |

Content

15 |

Content

16 |

Content

17 |

Content

18 |

Content

19 |

Content

20 |

Content

21 |

Content

22 |

Content

23 |

Content

24 |

Content

25 |

Content

26 | 27 | 28 | -------------------------------------------------------------------------------- /Scroll Animation/script.js: -------------------------------------------------------------------------------- 1 | const boxes = document.querySelectorAll('.box'); 2 | 3 | window.addEventListener('scroll', checkBoxes); 4 | checkBoxes(); 5 | function checkBoxes() { 6 | const triggerBottom = window.innerHeight / 5 * 4; 7 | 8 | boxes.forEach(box => { 9 | const boxTop = box.getBoundingClientRect().top; 10 | if(boxTop < triggerBottom){ 11 | box.classList.add('show'); 12 | }else{ 13 | box.classList.remove('show'); 14 | } 15 | }) 16 | } -------------------------------------------------------------------------------- /Scroll Animation/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: #efedd6; 9 | font-family: 'Roboto', 'sans-serif'; 10 | display: flex; 11 | flex-direction: column; 12 | align-items: center; 13 | justify-content: center; 14 | margin: 0; 15 | overflow-x: hidden; 16 | overflow-y: visible; 17 | } 18 | 19 | h1 { 20 | margin: 10px; 21 | } 22 | 23 | .box { 24 | background-color: steelblue; 25 | color: #fff; 26 | display: flex; 27 | align-items: center; 28 | justify-content: center; 29 | width: 400px; 30 | height: 200px; 31 | margin: 10px; 32 | border-radius: 10px; 33 | box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3); 34 | transform: translateX(300%); 35 | transition: transform 0.4s ease; 36 | } 37 | 38 | .box:nth-of-type(even) { 39 | transform: translateX(-300%); 40 | } 41 | 42 | .box.show { 43 | transform: translateX(0); 44 | } 45 | 46 | .box h2 { 47 | font-size: 45px; 48 | } 49 | 50 | -------------------------------------------------------------------------------- /Smoke-Effect-Text/effect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Smoke-Effect-Text/effect.png -------------------------------------------------------------------------------- /Smoke-Effect-Text/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Smoke Effect | JavaScript 7 | 8 | 9 | 10 |
11 |

12 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta possimus quasi, eos corporis, eaque dicta assumenda, 13 | et cumque sed voluptatem dolorem consequatur sunt delectus tempora qui autem maxime atque quibusdam modi rerum 14 | recusandae unde? Labore sit ipsam modi laboriosam odio est cupiditate laborum corrupti! Voluptates hic quis, 15 | consectetur aliquid natus consequatur, iure necessitatibus tempore quia quisquam optio voluptatum odit 16 | perspiciatis. Unde omnis illum ad. Hic quas deserunt id provident corrupti qui et ab culpa aliquam labore 17 | nihil facere vel, esse officiis praesentium vero nobis minima nesciunt dolor soluta doloremque. Adipisci illo 18 | dolore sit vel modi praesentium distinctio consequatur? Libero, alias? 19 |

20 |
21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /Smoke-Effect-Text/script.js: -------------------------------------------------------------------------------- 1 | // Splitting text into letters 2 | const text = document.querySelector('.text'); 3 | text.innerHTML = text.textContent.replace(/\S/g, '$&'); 4 | 5 | // onHover -> add class active 6 | const letters = document.querySelectorAll('span'); 7 | for (let i = 0; i < letters.length; i++) { 8 | letters[i].addEventListener('mouseover', function () { 9 | letters[i].classList.add('active'); 10 | }); 11 | } 12 | -------------------------------------------------------------------------------- /Smoke-Effect-Text/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: 'Roboto', sans-serif; 8 | } 9 | 10 | section{ 11 | position: relative; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | min-height: 100vh; 16 | background: #111; 17 | overflow: hidden; 18 | } 19 | 20 | section .text{ 21 | position: relative; 22 | color: #fff; 23 | margin: 40px; 24 | max-width: 800px; 25 | user-select: none; 26 | font-size: 1.5em; 27 | } 28 | 29 | /* After splitting into letter in span tag */ 30 | section .text span{ 31 | position: relative; 32 | display: inline-block; 33 | cursor: pointer; 34 | } 35 | 36 | /* After onHover adding active class in all letters */ 37 | section .text span.active{ 38 | animation: smoke 2s linear forwards; 39 | transform-origin: bottom; 40 | } 41 | 42 | @keyframes smoke{ 43 | 0%{ 44 | 45 | opacity: 1; 46 | filter: blur(0px); 47 | transform: translateX(0px) translateY(0px) rotate(0deg) scale(1); 48 | } 49 | 50 | 50%{ 51 | opacity: 1; 52 | pointer-events: none; 53 | } 54 | 55 | 100%{ 56 | opacity: 0; 57 | filter: blur(20px); 58 | transform: translateX(300px) translateY(-300px) rotate(720deg) scale(4); 59 | } 60 | } 61 | /* Vertically removed in like smoke */ 62 | /* @keyframes smoke{ 63 | 0%{ 64 | transform: translateY(0px); 65 | opacity: 1; 66 | filter: blur(0px); 67 | } 68 | 69 | 70 | 71 | 100%{ 72 | transform: translateY(-1000px); 73 | opacity: 0; 74 | filter: blur(10px); 75 | } 76 | } */ -------------------------------------------------------------------------------- /Social-Counter/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Social-Counter/1.png -------------------------------------------------------------------------------- /Social-Counter/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Social-Counter/2.png -------------------------------------------------------------------------------- /Social-Counter/README.md: -------------------------------------------------------------------------------- 1 | # Social Counter 2 | 3 | 4 | * Demo 1 5 | - 6 | 7 | * Demo 2 8 | - 9 | -------------------------------------------------------------------------------- /Social-Counter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Subscriber Counter 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 | Twitter Followers 17 |
18 |
19 | 20 |
21 | Facebook Followers 22 |
23 |
24 | 25 |
26 | Youtube Subscribers 27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /Social-Counter/loader.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Social-Counter/script.js: -------------------------------------------------------------------------------- 1 | const counters = document.querySelectorAll('.counter'); 2 | 3 | counters.forEach(counter => { 4 | counter.innerText = '0'; 5 | 6 | const updateCounter = () => { 7 | const target = +counter.getAttribute('data-target'); 8 | const c = +counter.innerText; 9 | const increment = target / 1000; 10 | if(c < target) { 11 | counter.innerText = `${Math.ceil(c + increment)}`; 12 | setTimeout(updateCounter, 1); 13 | } 14 | } 15 | updateCounter(); 16 | }) -------------------------------------------------------------------------------- /Social-Counter/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: #8e44ad; 9 | color: white; 10 | font-family: 'Roboto Mono', 'sans-serif'; 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | height: 100vh; 15 | overflow: hidden; 16 | margin: 0; 17 | } 18 | 19 | .counter-container { 20 | display: flex; 21 | flex-direction: column; 22 | justify-content: center; 23 | margin: 30px 50px; 24 | text-align: center; 25 | } 26 | 27 | .counter { 28 | font-size: 60px; 29 | margin-top: 10px; 30 | } 31 | 32 | @media (max-width: 580px) { 33 | body { 34 | flex-direction: column; 35 | } 36 | } -------------------------------------------------------------------------------- /SocialMediaHoverIcon/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/SocialMediaHoverIcon/1.png -------------------------------------------------------------------------------- /SocialMediaHoverIcon/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/SocialMediaHoverIcon/2.png -------------------------------------------------------------------------------- /SocialMediaHoverIcon/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/SocialMediaHoverIcon/3.png -------------------------------------------------------------------------------- /SocialMediaHoverIcon/README.md: -------------------------------------------------------------------------------- 1 | # Social Icon Hover 2 | 3 | 4 | * Demo 1 5 | - 6 | 7 | * Demo 2 8 | - 9 | 10 | * Demo 3 11 | - -------------------------------------------------------------------------------- /SocialMediaHoverIcon/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Social Media 8 | 9 | 10 | 11 | 12 | 13 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /SocialMediaHoverIcon/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/SocialMediaHoverIcon/script.js -------------------------------------------------------------------------------- /SocialMediaHoverIcon/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | --bg : #222; 9 | } 10 | 11 | body { 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | min-height: 100vh; 16 | background: var(--bg); 17 | overflow: hidden; 18 | } 19 | 20 | ul { 21 | position: relative; 22 | display: flex; 23 | gap: 50px; 24 | } 25 | 26 | ul li { 27 | position: relative; 28 | list-style: none; 29 | width: 80px; 30 | height: 80px; 31 | display: flex; 32 | justify-content: center; 33 | align-items: center; 34 | cursor: pointer; 35 | transition: 0.5s; 36 | } 37 | 38 | ul li:hover { 39 | z-index: 10000; 40 | transform: scale(0.75); 41 | } 42 | 43 | ul li::before { 44 | content: ''; 45 | position: absolute; 46 | inset: 30; 47 | box-shadow: 0 0 0 10px var(--clr), 48 | 0 0 0 20px var(--bg), 49 | 0 0 0 22px var(--clr); 50 | transition: 0.5s; 51 | } 52 | 53 | ul li:hover:before { 54 | inset: 0; 55 | } 56 | 57 | ul li::after { 58 | content: ''; 59 | position: absolute; 60 | inset: 0; 61 | background: var(--bg); 62 | transform: rotate(45deg); 63 | } 64 | 65 | ul li a { 66 | position: relative; 67 | color: var(--clr); 68 | text-decoration: none; 69 | z-index: 10; 70 | font-size: 2em; 71 | transition: 0.5s; 72 | } 73 | 74 | ul li:hover a { 75 | font-size: 3em; 76 | filter: drop-shadow(0 0 20px var(--clr)) 77 | drop-shadow(0 0 40px var(--clr)) 78 | drop-shadow(0 0 60px var(--clr)); 79 | } 80 | 81 | @media screen and (max-width: 600px) { 82 | ul { 83 | gap: 15px; 84 | } 85 | 86 | } -------------------------------------------------------------------------------- /Sound Board/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Sound Board/1.png -------------------------------------------------------------------------------- /Sound Board/README.md: -------------------------------------------------------------------------------- 1 | # Sound Board 2 | 3 | 4 | * Demo 1 5 | - 6 | -------------------------------------------------------------------------------- /Sound Board/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Sound Board 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /Sound Board/script.js: -------------------------------------------------------------------------------- 1 | const sounds = ['applause', 'boo', 'gasp', 'tada', 'victory', 'wrong']; 2 | 3 | sounds.forEach(sound => { 4 | const btn = document.createElement('button'); 5 | btn.classList.add('btn'); 6 | btn.innerText = sound; 7 | btn.addEventListener('click', () => { 8 | stopSongs(); 9 | document.getElementById(sound).play(); 10 | }); 11 | document.getElementById('buttons').appendChild(btn); 12 | }); 13 | 14 | function stopSongs(){ 15 | sounds.forEach(sound => { 16 | const song = document.getElementById(sound); 17 | song.pause(); 18 | song.currentime = 0; 19 | }); 20 | } -------------------------------------------------------------------------------- /Sound Board/sounds/applause.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Sound Board/sounds/applause.mp3 -------------------------------------------------------------------------------- /Sound Board/sounds/boo.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Sound Board/sounds/boo.mp3 -------------------------------------------------------------------------------- /Sound Board/sounds/gasp.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Sound Board/sounds/gasp.mp3 -------------------------------------------------------------------------------- /Sound Board/sounds/tada.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Sound Board/sounds/tada.mp3 -------------------------------------------------------------------------------- /Sound Board/sounds/victory.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Sound Board/sounds/victory.mp3 -------------------------------------------------------------------------------- /Sound Board/sounds/wrong.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Sound Board/sounds/wrong.mp3 -------------------------------------------------------------------------------- /Sound Board/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: rgb(161, 100, 223); 9 | font-family: 'Poppins', 'sans-serif'; 10 | display: flex; 11 | flex-wrap: wrap; 12 | align-items: center; 13 | justify-content: center; 14 | text-align: center; 15 | height: 100vh; 16 | overflow: hidden; 17 | margin: 0; 18 | } 19 | 20 | .btn { 21 | background-color: rebeccapurple; 22 | border-radius: 5px; 23 | border: none; 24 | color: #fff; 25 | margin: 1rem; 26 | padding: 1.5rem 3rem; 27 | font-size: 1.2rem; 28 | font-family: inherit; 29 | cursor: pointer; 30 | } 31 | 32 | .btn:hover { 33 | opacity: 0.9; 34 | } 35 | 36 | .btn:focus { 37 | outline: none; 38 | } -------------------------------------------------------------------------------- /Split Landing Page/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Split Landing Page/1.png -------------------------------------------------------------------------------- /Split Landing Page/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Split Landing Page/2.png -------------------------------------------------------------------------------- /Split Landing Page/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Split Landing Page/3.png -------------------------------------------------------------------------------- /Split Landing Page/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Split Landing Page/4.png -------------------------------------------------------------------------------- /Split Landing Page/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Split Landing Page/5.png -------------------------------------------------------------------------------- /Split Landing Page/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Split Landing Page/6.png -------------------------------------------------------------------------------- /Split Landing Page/README.md: -------------------------------------------------------------------------------- 1 | # Split Landing Page 2 | 3 | 4 | * Demo 1 5 | - 6 | 7 | * Demo 2 8 | - 9 | 10 | * Demo 3 11 | - 12 | 13 | * Demo 4 800px Width Screen 14 | - 15 | 16 | * Demo 5 Small Screen Less Than 800px Width 17 | - 18 | 19 | * Demo 6 Small Screen Less Than 800px Width 20 | - -------------------------------------------------------------------------------- /Split Landing Page/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Split Landing Page 8 | 9 | 10 | 11 |
12 |
13 |

Playstation 5

14 | Buy Now 15 |
16 |
17 |

XBox Series X

18 | Buy Now 19 |
20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /Split Landing Page/ps.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Split Landing Page/ps.jpg -------------------------------------------------------------------------------- /Split Landing Page/script.js: -------------------------------------------------------------------------------- 1 | const left = document.querySelector('.left'); 2 | const right = document.querySelector('.right'); 3 | const container = document.querySelector('.container'); 4 | 5 | 6 | left.addEventListener('mouseenter', () => container.classList.add('hover-left')); 7 | left.addEventListener('mouseleave', () => container.classList.remove('hover-left')); 8 | 9 | right.addEventListener('mouseenter', () => container.classList.add('hover-right')); 10 | right.addEventListener('mouseleave', () => container.classList.remove('hover-right')); -------------------------------------------------------------------------------- /Split Landing Page/xbox.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Split Landing Page/xbox.jpg -------------------------------------------------------------------------------- /Starter/README.md: -------------------------------------------------------------------------------- 1 | # Project Name 2 | 3 | 4 | * Demo 1 5 | - 6 | 7 | * Demo 2 8 | - 9 | 10 | * Demo 3 11 | - -------------------------------------------------------------------------------- /Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Project Name 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Starter/loader.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Starter/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Starter/script.js -------------------------------------------------------------------------------- /Starter/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: 'Roboto', 'sans-serif'; 9 | display: flex; 10 | flex-direction: column; 11 | align-items: center; 12 | justify-content: center; 13 | height: 100vh; 14 | overflow: hidden; 15 | margin: 0; 16 | } -------------------------------------------------------------------------------- /Team-Section/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Team-Section/1.png -------------------------------------------------------------------------------- /Team-Section/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Team-Section/2.png -------------------------------------------------------------------------------- /Team-Section/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Team-Section/3.png -------------------------------------------------------------------------------- /Team-Section/README.md: -------------------------------------------------------------------------------- 1 | # Our Team 2 | 3 | 4 | * Demo 1 5 | - 6 | 7 | * Demo 2 8 | - 9 | 10 | * Demo 3 11 | - -------------------------------------------------------------------------------- /Team-Section/loader.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Team-Section/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Team-Section/script.js -------------------------------------------------------------------------------- /Team-Section/team/team1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Team-Section/team/team1.jpg -------------------------------------------------------------------------------- /Team-Section/team/team2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Team-Section/team/team2.jpg -------------------------------------------------------------------------------- /Team-Section/team/team3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Team-Section/team/team3.jpg -------------------------------------------------------------------------------- /Z-Index-Hover-Effect/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Z-Index-Hover-Effect/1.png -------------------------------------------------------------------------------- /Z-Index-Hover-Effect/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Z-Index-Hover-Effect/2.png -------------------------------------------------------------------------------- /Z-Index-Hover-Effect/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Z-Index-Hover-Effect/3.png -------------------------------------------------------------------------------- /Z-Index-Hover-Effect/README.md: -------------------------------------------------------------------------------- 1 | # Z - index hover effect 2 | 3 | 4 | * Demo 1 5 | - 6 | 7 | * Demo 2 8 | - 9 | 10 | * Demo 3 11 | - -------------------------------------------------------------------------------- /Z-Index-Hover-Effect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Z - index hover effect 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 | 34 |
35 | 36 | 37 | -------------------------------------------------------------------------------- /Z-Index-Hover-Effect/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/Z-Index-Hover-Effect/script.js -------------------------------------------------------------------------------- /loader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/loader.gif -------------------------------------------------------------------------------- /loader.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /natours/.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | /node_modules 3 | /.pnp 4 | .pnp.js 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /natours/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/natours/1.png -------------------------------------------------------------------------------- /natours/css/fonts/linea-basic-10.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/natours/css/fonts/linea-basic-10.eot -------------------------------------------------------------------------------- /natours/css/fonts/linea-basic-10.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/natours/css/fonts/linea-basic-10.ttf -------------------------------------------------------------------------------- /natours/css/fonts/linea-basic-10.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/natours/css/fonts/linea-basic-10.woff -------------------------------------------------------------------------------- /natours/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/natours/img/favicon.png -------------------------------------------------------------------------------- /natours/img/hero-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/natours/img/hero-small.jpg -------------------------------------------------------------------------------- /natours/img/hero.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/natours/img/hero.jpg -------------------------------------------------------------------------------- /natours/img/logo-green-1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/natours/img/logo-green-1x.png -------------------------------------------------------------------------------- /natours/img/logo-green-2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/natours/img/logo-green-2x.png -------------------------------------------------------------------------------- /natours/img/logo-green-small-1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/natours/img/logo-green-small-1x.png -------------------------------------------------------------------------------- /natours/img/logo-green-small-2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/natours/img/logo-green-small-2x.png -------------------------------------------------------------------------------- /natours/img/logo-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/natours/img/logo-white.png -------------------------------------------------------------------------------- /natours/img/nat-1-large.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/natours/img/nat-1-large.jpg -------------------------------------------------------------------------------- /natours/img/nat-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/natours/img/nat-1.jpg -------------------------------------------------------------------------------- /natours/img/nat-10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/natours/img/nat-10.jpg -------------------------------------------------------------------------------- /natours/img/nat-2-large.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/natours/img/nat-2-large.jpg -------------------------------------------------------------------------------- /natours/img/nat-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/natours/img/nat-2.jpg -------------------------------------------------------------------------------- /natours/img/nat-3-large.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/natours/img/nat-3-large.jpg -------------------------------------------------------------------------------- /natours/img/nat-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/natours/img/nat-3.jpg -------------------------------------------------------------------------------- /natours/img/nat-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/natours/img/nat-4.jpg -------------------------------------------------------------------------------- /natours/img/nat-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/natours/img/nat-5.jpg -------------------------------------------------------------------------------- /natours/img/nat-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/natours/img/nat-6.jpg -------------------------------------------------------------------------------- /natours/img/nat-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/natours/img/nat-7.jpg -------------------------------------------------------------------------------- /natours/img/nat-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/natours/img/nat-8.jpg -------------------------------------------------------------------------------- /natours/img/nat-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/natours/img/nat-9.jpg -------------------------------------------------------------------------------- /natours/img/video.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/natours/img/video.mp4 -------------------------------------------------------------------------------- /natours/img/video.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/natours/img/video.webm -------------------------------------------------------------------------------- /natours/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "natours", 3 | "version": "1.0.0", 4 | "description": "- [x] HTML\r - [x] CSS", 5 | "main": "index.js", 6 | "scripts": { 7 | "compile:sass": "node-sass sass/main.scss css/style.css -w", 8 | "watch:sass": "nodemon -e scss -x \"npm run compile:sass\"" 9 | }, 10 | "keywords": [], 11 | "author": "Akash", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "node-sass": "^7.0.1", 15 | "nodemon": "^2.0.19" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /natours/sass/abstracts/_functions.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmezan06/HTML-CSS-JS/eab45faa51b6507503db9da2d241e6e5fbf7d52e/natours/sass/abstracts/_functions.scss -------------------------------------------------------------------------------- /natours/sass/abstracts/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin clearfix { 2 | &::after { 3 | content: ""; 4 | display: table; 5 | clear: both; 6 | } 7 | } 8 | 9 | @mixin absCenter { 10 | position: absolute; 11 | top: 50%; 12 | left: 50%; 13 | transform: translate(-50%, -50%); 14 | } 15 | 16 | 17 | // MEDIA QUERIES 18 | 19 | /* 20 | 0 - 600px -----------> mobile 21 | 600px - 900px -----------> tablet Portrait 22 | 900px - 1200px -----------> tablet Landscape 23 | 1200px - 1800px -----------> desktop Normal Styles 24 | 1800px - infinity -----------> large desktop 25 | 26 | Breakpoint argument choices: 27 | -- phone 28 | -- tab-port 29 | -- tab-land 30 | -- desktop 31 | -- big-desktop 32 | 33 | rem sometimes is not enough, so we use em 34 | 35 | 1em = 16px; 36 | 37 | ORDER: BASE + Typography > Then General layout + grid + page layout + components 38 | */ 39 | 40 | @mixin respond($brkpoint) { 41 | @if $brkpoint == "phone" { 42 | @media (max-width: 37.5em) { // 37.5em = 600px 43 | @content; 44 | } 45 | } 46 | @if $brkpoint == "tab-port" { 47 | @media (max-width: 56.25em) { // 56.25em = 900px 48 | @content; 49 | } 50 | } 51 | @if $brkpoint == "tab-land" { 52 | @media (max-width: 75em) { // 75em = 1200px 53 | @content; 54 | } 55 | } 56 | @if $brkpoint == "big-desktop" { 57 | @media (min-width: 112.5em) { // 112.5em = 1800px 58 | @content; 59 | } 60 | } 61 | } -------------------------------------------------------------------------------- /natours/sass/abstracts/_variables.scss: -------------------------------------------------------------------------------- 1 | // COLORS 2 | $color-primary: #55c57a; 3 | $color-primary-light: #7ed56f; 4 | $color-primary-dark: #28b485; 5 | 6 | $color-secondary-light: #ffb900; 7 | $color-secondary-dark: #ff7730; 8 | 9 | $color-tertiary-light: #2998ff; 10 | $color-tertiary-dark: #5643fa; 11 | 12 | $color-grey-dark: #777; 13 | $color-grey-dark-2: #999; 14 | $color-grey-dark-3: #333; 15 | $color-white: #fff; 16 | $color-black: #000; 17 | 18 | $color-grey-light-1: #f7f7f7; 19 | $color-grey-light-2: #eee; 20 | 21 | // Font Size 22 | $default-font-size: 1.6rem; 23 | 24 | // GRID 25 | $grid-width: 114rem; 26 | $gutter-vertical: 8rem; 27 | $gutter-vertical-small: 6rem; 28 | $gutter-horizontal: 6rem; -------------------------------------------------------------------------------- /natours/sass/base/_animations.scss: -------------------------------------------------------------------------------- 1 | 2 | @keyframes moveInLeft { 3 | 0% { 4 | opacity: 0; 5 | transform: translateX(-10rem); 6 | } 7 | 80% { 8 | transform: translateX(1rem); 9 | } 10 | 100% { 11 | opacity: 1; 12 | transform: translateX(0); 13 | } 14 | } 15 | @keyframes moveInRight { 16 | 0% { 17 | opacity: 0; 18 | transform: translateX(10rem); 19 | } 20 | 80% { 21 | transform: translateX(-1rem); 22 | } 23 | 100% { 24 | opacity: 1; 25 | transform: translateX(0); 26 | } 27 | } 28 | @keyframes moveInBottom { 29 | 0% { 30 | opacity: 0; 31 | transform: translateY(3rem); 32 | } 33 | 100% { 34 | opacity: 1; 35 | transform: translateX(0); 36 | } 37 | } -------------------------------------------------------------------------------- /natours/sass/base/_base.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: inherit; 7 | } 8 | 9 | html { 10 | // 1 rem = 10px 11 | font-size: 62.5%; 12 | 13 | /* Max-width Bigger to Smaller and Min-width Smaller to Bigger */ 14 | @include respond(tab-land) { // width < 1200? 15 | font-size: 56.25%; // 1rem = 9px, 9/16 = 56.25% 16 | } 17 | 18 | @include respond(tab-port) { // width < 900? 19 | font-size: 50%; // 1rem = 8px, 8/16 = 50% 20 | } 21 | 22 | @include respond(big-desktop) { // width > 1800? 23 | font-size: 75%; // 1rem = 12px, 12/16 = 75% 24 | } 25 | 26 | } 27 | 28 | body { 29 | box-sizing: border-box; 30 | padding: 3rem; 31 | 32 | @include respond(tab-port) { // width < 900? 33 | padding: 0; // 1rem = 8px, 8/16 = 50% 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /natours/sass/base/_utilities.scss: -------------------------------------------------------------------------------- 1 | .u-center-text { 2 | text-align: center !important; 3 | } 4 | 5 | .u-margin-bottom-big { 6 | margin-bottom: 8rem !important; 7 | 8 | @include respond(tab-port) { 9 | margin-bottom: 5rem !important; 10 | } 11 | } 12 | .u-margin-bottom-medium { 13 | margin-bottom: 4rem !important; 14 | 15 | @include respond(tab-port) { 16 | margin-bottom: 3rem !important; 17 | } 18 | } 19 | .u-margin-bottom-small { 20 | margin-bottom: 1.5rem !important; 21 | } 22 | 23 | .u-margin-top-big { 24 | margin-top: 8rem !important; 25 | } 26 | .u-margin-top-huge { 27 | margin-top: 10rem !important; 28 | } -------------------------------------------------------------------------------- /natours/sass/components/_bg-video.scss: -------------------------------------------------------------------------------- 1 | .bg-video { 2 | position: absolute; 3 | top: 0; 4 | left: 0; 5 | height: 100%; 6 | width: 100%; 7 | z-index: -1; 8 | opacity: 0.15; 9 | overflow: hidden; 10 | 11 | &__content { 12 | height: 100%; 13 | width: 100%; 14 | object-fit: cover; 15 | } 16 | } -------------------------------------------------------------------------------- /natours/sass/components/_composition.scss: -------------------------------------------------------------------------------- 1 | .composition { 2 | position: relative; 3 | 4 | &__photo { 5 | width: 55%; 6 | box-shadow: 0 1.5rem 4rem rgba($color-black, 0.4); 7 | // border-radius: 2px; 8 | position: absolute; 9 | z-index: 10; 10 | transition: all 0.2s; 11 | outline-offset: 2rem; 12 | 13 | @include respond(tab-port) { 14 | float: left; 15 | position: relative; 16 | width: 33.33333%; 17 | box-shadow: 0 1.5rem 3rem rgba($color-black, 0.2); 18 | } 19 | 20 | &--p1 { 21 | left: 0; 22 | top: -2rem; 23 | @include respond(tab-port) { 24 | top: 0; 25 | transform: scale(1.2); 26 | } 27 | } 28 | &--p2 { 29 | right: 0; 30 | top: 2rem; 31 | @include respond(tab-port) { 32 | top: -1rem; 33 | transform: scale(1.3); 34 | z-index: 100; 35 | } 36 | } 37 | &--p3 { 38 | left: 20%; 39 | top: 10rem; 40 | @include respond(tab-port) { 41 | top: 1rem; 42 | left: 0; 43 | transform: scale(1.1); 44 | } 45 | } 46 | 47 | &:hover { 48 | outline: 1.5rem solid $color-primary; 49 | transform: scale(1.05) translateY(-0.5rem); 50 | box-shadow: 0 2.5rem 4rem rgba($color-black, 0.5); 51 | z-index: 20; 52 | } 53 | } 54 | &:hover &__photo:not(:hover) { 55 | transform: scale(0.9); 56 | } 57 | } -------------------------------------------------------------------------------- /natours/sass/components/_feature-box.scss: -------------------------------------------------------------------------------- 1 | .feature-box { 2 | background-color: rgba($color-white, 0.8); 3 | font-size: 1.5rem; 4 | padding: 2.5rem; 5 | text-align: center; 6 | border-radius: 3px; 7 | box-shadow: 0 1.5rem 4rem rgba($color-black, 0.15); 8 | transition: all 0.3s; 9 | 10 | @include respond(tab-port) { 11 | padding: 2rem; 12 | } 13 | 14 | &__icon { 15 | font-size: 6rem; 16 | margin-bottom: 0.5rem; 17 | background-image: linear-gradient( 18 | to right, 19 | $color-primary-light, 20 | $color-primary-dark 21 | ); 22 | display: inline-block; 23 | -webkit-background-clip: text; 24 | color: transparent; 25 | 26 | @include respond(tab-port) { 27 | margin-bottom: 0; 28 | } 29 | 30 | } 31 | 32 | &:hover { 33 | transform: translateY(-1.5rem) scale(1.03); 34 | } 35 | 36 | } 37 | -------------------------------------------------------------------------------- /natours/sass/layout/_footer.scss: -------------------------------------------------------------------------------- 1 | .footer { 2 | background-color: $color-grey-dark-3; 3 | color: $color-grey-light-1; 4 | padding: 10rem 0; 5 | font-size: 1.4rem; 6 | 7 | @include respond(tab-port) { 8 | padding: 8rem 0; 9 | } 10 | 11 | &__logo-box { 12 | text-align: center; 13 | margin-bottom: 8rem; 14 | 15 | @include respond(tab-port) { 16 | margin-bottom: 6rem; 17 | } 18 | } 19 | 20 | &__logo { 21 | width: 15rem; 22 | height: auto; 23 | } 24 | 25 | &__navigation { 26 | border-top: 1px solid $color-grey-light-2; 27 | padding-top: 2rem; 28 | display: inline-block; 29 | 30 | @include respond(tab-port) { 31 | width: 100%; 32 | text-align: center; 33 | } 34 | 35 | } 36 | 37 | &__list { 38 | list-style: none; 39 | } 40 | 41 | &__item { 42 | display: inline-block; 43 | 44 | &:not(:last-child) { 45 | margin-right: 1.5rem; 46 | } 47 | } 48 | 49 | &__link { 50 | &:link, 51 | &:visited { 52 | background-color: $color-grey-dark-3; 53 | color: $color-grey-light-1; 54 | text-decoration: none; 55 | text-transform: uppercase; 56 | display: inline-block; 57 | transition: all 0.2s; 58 | } 59 | 60 | &:hover { 61 | color: $color-primary; 62 | box-shadow: 0 1rem 2rem rgba($color-black, 0.4); 63 | transform: rotate(5deg) scale(1.3); 64 | } 65 | } 66 | 67 | &__copyright { 68 | border-top: 1px solid $color-grey-light-2; 69 | padding-top: 2rem; 70 | width: 80%; 71 | float: right; 72 | 73 | @include respond(tab-port) { 74 | width: 100%; 75 | float: none; 76 | } 77 | } 78 | } -------------------------------------------------------------------------------- /natours/sass/layout/_grid.scss: -------------------------------------------------------------------------------- 1 | .row { 2 | max-width: $grid-width; 3 | // background-color: #eee; 4 | margin: 0 auto; 5 | &:not(:last-child) { 6 | // Every row except the last one should have a bottom margin of $gutter-vertical 7 | margin-bottom: $gutter-vertical; 8 | 9 | @include respond(tab-port) { 10 | margin-bottom: $gutter-vertical-small; 11 | } 12 | } 13 | 14 | @include respond(tab-port) { 15 | max-width: 50rem; 16 | padding: 0 3rem; 17 | } 18 | 19 | @include clearfix; 20 | 21 | // attribute selector ^ -> start with * -> contains $ -> end with 22 | 23 | [class^="col-"] { 24 | // background-color: orangered; 25 | float: left; 26 | &:not(:last-child) { 27 | // Every column except the last one should have a right margin of $gutter-horizontal 28 | margin-right: $gutter-horizontal; 29 | 30 | @include respond(tab-port) { 31 | margin-right: 0; 32 | margin-bottom: $gutter-vertical-small; 33 | } 34 | } 35 | 36 | @include respond(tab-port) { 37 | width: 100% !important; 38 | } 39 | } 40 | 41 | .col-1-of-2 { 42 | width: calc((100% - #{$gutter-horizontal}) / 2); 43 | } 44 | 45 | .col-1-of-3 { 46 | width: calc((100% - 2 * #{$gutter-horizontal}) / 3); 47 | } 48 | 49 | .col-2-of-3 { 50 | width: calc(2 * ((100% - 2 * #{$gutter-horizontal}) / 3) + #{$gutter-horizontal}); 51 | } 52 | 53 | .col-1-of-4 { 54 | width: calc((100% - 3 * #{$gutter-horizontal}) / 4); 55 | } 56 | .col-2-of-4 { 57 | width: calc(2 * ((100% - 3 * #{$gutter-horizontal}) / 4) + #{$gutter-horizontal}); 58 | } 59 | .col-3-of-4 { 60 | width: calc(3 * ((100% - 3 * #{$gutter-horizontal}) / 4) + 2 * #{$gutter-horizontal}); 61 | } 62 | } -------------------------------------------------------------------------------- /natours/sass/layout/_header.scss: -------------------------------------------------------------------------------- 1 | .header { 2 | height: 95vh; 3 | background-image: linear-gradient( 4 | to right bottom, 5 | rgba($color-primary-light, 0.8), 6 | rgba($color-primary-dark, 0.8) 7 | ), 8 | url("../img/hero.jpg"); 9 | background-size: cover; 10 | background-position: top; 11 | position: relative; 12 | clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%); 13 | -webkit-clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%); 14 | 15 | @include respond(phone) { 16 | clip-path: polygon(0 0, 100% 0, 100% 85vh, 0 100%); 17 | -webkit-clip-path: polygon(0 0, 100% 0, 100% 85vh, 0 100%); 18 | } 19 | 20 | &__logo-box { 21 | position: absolute; 22 | top: 4rem; 23 | left: 4rem; 24 | } 25 | 26 | &__logo { 27 | height: 3.5rem; 28 | } 29 | 30 | &__text-box { 31 | position: absolute; 32 | top: 40%; 33 | left: 50%; 34 | transform: translate(-50%, -50%); 35 | text-align: center; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /natours/sass/main.scss: -------------------------------------------------------------------------------- 1 | @import "abstracts/functions"; 2 | @import "abstracts/mixins"; 3 | @import "abstracts/variables"; 4 | 5 | @import "base/animations"; 6 | @import "base/base"; 7 | @import "base/typography"; 8 | @import "base/utilities"; 9 | 10 | @import "components/button"; 11 | @import "components/card"; 12 | @import "components/story"; 13 | @import "components/popup"; 14 | @import "components/bg-video"; 15 | @import "components/composition"; 16 | @import "components/form"; 17 | @import "components/feature-box"; 18 | 19 | // Grid System 20 | @import "layout/navigation"; 21 | @import "layout/grid"; 22 | @import "layout/footer"; 23 | @import "layout/header"; 24 | 25 | @import "pages/home"; 26 | 27 | --------------------------------------------------------------------------------