├── .github └── ISSUE_TEMPLATE │ ├── ---bug--give-a-suitable-title-here.md │ ├── ---give-a-suitable-title-here.md │ └── --feature--give-a-suitable-title.md ├── Project 00 - Starter ├── index.html ├── script.js └── style.css ├── Project 01 - Expandable Cards ├── img │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ └── 7.jpg ├── index.html ├── script.js └── style.css ├── Project 02 - Progress Step bars ├── index.html ├── script.js └── style.css ├── Project 03 - Rotating Navigation ├── img │ └── 1.jpg ├── index.html ├── script.js └── style.css ├── Project 04 - Hidden Search Widget ├── index.html ├── script.js └── style.css ├── Project 05 - Blurry Loading Page ├── img │ └── image.jpg ├── index.html ├── script.js └── style.css ├── Project 06 - Scrolling Animation ├── index.html ├── script.js └── style.css ├── Project 07 -Split The Landing Page ├── img │ ├── ps5.jpg │ └── xbox.jpg ├── index.html ├── script.js └── style.css ├── Project 08 - Animated Waving Form ├── index.html ├── script.js └── style.css ├── Project 09 - Sound Mini-Boards ├── index.html ├── music │ ├── music_angela_paulson_floating_001.mp3 │ ├── music_angela_paulson_out_at_sea_004.mp3 │ ├── music_david_gwyn_jones_the_celestial_harp_instrumental.mp3 │ ├── music_zapsplat_beautiful_reef.mp3 │ ├── music_zapsplat_game_music_action_agressive_pounding_tense_electro_synth_028.mp3 │ ├── music_zapsplat_morning_rush_hour_142.mp3 │ └── music_zapsplat_rapid_turnaround.mp3 ├── script.js └── style.css ├── Project 10 - Dad Jokes ├── android-chrome-192x192.png ├── android-chrome-512x512.png ├── apple-touch-icon.png ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon.ico ├── index.html ├── script.js ├── site.webmanifest └── style.css ├── Project 11 - Event Key ├── android-chrome-192x192.png ├── android-chrome-512x512.png ├── apple-touch-icon.png ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon.ico ├── img │ └── i.jpg ├── index.html ├── script.js ├── site.webmanifest └── style.css ├── Project 12 - FAQ Collapse ├── index.html ├── script.js └── style.css ├── Project 13 - Random Choice Picker ├── index.html ├── script.js └── style.css ├── README.md └── _config.yml /.github/ISSUE_TEMPLATE/---bug--give-a-suitable-title-here.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "\U0001FAB2[Bug] Give a suitable title here" 3 | about: Create a report to help us improve 4 | title: BUG 5 | labels: bug 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/---give-a-suitable-title-here.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "\U0001F4A1 Give a suitable title here" 3 | about: Describe this issue template's purpose here. 4 | title: CUSTOM 5 | labels: question 6 | assignees: '' 7 | 8 | --- 9 | 10 | 11 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/--feature--give-a-suitable-title.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "⭐[FEATURE] Give a suitable title" 3 | about: Suggest an idea for this project 4 | title: FEATURE 5 | labels: enhancement 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /Project 00 - Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | My Project 9 | 10 | 11 | 12 |

Starting of the project

13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Project 00 - Starter/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FahimFBA/Mini-Projects-in-HTML-CSS-and-Javascript/371ea7b3c1f28b04710b7b5a026b2f3904255fa9/Project 00 - Starter/script.js -------------------------------------------------------------------------------- /Project 00 - Starter/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); 2 | 3 | 4 | * { 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 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 | } -------------------------------------------------------------------------------- /Project 01 - Expandable Cards/img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FahimFBA/Mini-Projects-in-HTML-CSS-and-Javascript/371ea7b3c1f28b04710b7b5a026b2f3904255fa9/Project 01 - Expandable Cards/img/1.jpg -------------------------------------------------------------------------------- /Project 01 - Expandable Cards/img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FahimFBA/Mini-Projects-in-HTML-CSS-and-Javascript/371ea7b3c1f28b04710b7b5a026b2f3904255fa9/Project 01 - Expandable Cards/img/2.jpg -------------------------------------------------------------------------------- /Project 01 - Expandable Cards/img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FahimFBA/Mini-Projects-in-HTML-CSS-and-Javascript/371ea7b3c1f28b04710b7b5a026b2f3904255fa9/Project 01 - Expandable Cards/img/3.jpg -------------------------------------------------------------------------------- /Project 01 - Expandable Cards/img/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FahimFBA/Mini-Projects-in-HTML-CSS-and-Javascript/371ea7b3c1f28b04710b7b5a026b2f3904255fa9/Project 01 - Expandable Cards/img/4.jpg -------------------------------------------------------------------------------- /Project 01 - Expandable Cards/img/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FahimFBA/Mini-Projects-in-HTML-CSS-and-Javascript/371ea7b3c1f28b04710b7b5a026b2f3904255fa9/Project 01 - Expandable Cards/img/5.jpg -------------------------------------------------------------------------------- /Project 01 - Expandable Cards/img/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FahimFBA/Mini-Projects-in-HTML-CSS-and-Javascript/371ea7b3c1f28b04710b7b5a026b2f3904255fa9/Project 01 - Expandable Cards/img/6.jpg -------------------------------------------------------------------------------- /Project 01 - Expandable Cards/img/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FahimFBA/Mini-Projects-in-HTML-CSS-and-Javascript/371ea7b3c1f28b04710b7b5a026b2f3904255fa9/Project 01 - Expandable Cards/img/7.jpg -------------------------------------------------------------------------------- /Project 01 - Expandable Cards/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Expandable Cards 8 | 9 | 10 | 11 |
12 | 13 |
14 |

Innovation comes with technology!

15 |
16 | 17 |
18 |

1

19 |
20 | 21 |
22 |

2

23 |
24 | 25 |
26 |

3

27 |
28 | 29 |
30 |

4

31 |
32 | 33 |
34 |

5

35 |
36 | 37 |
38 |

6

39 |
40 | 41 |
42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /Project 01 - Expandable Cards/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 | 11 | function removeActiveClasses() { 12 | panels.forEach(panel => { 13 | panel.classList.remove('active') 14 | }) 15 | } -------------------------------------------------------------------------------- /Project 01 - Expandable Cards/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); 2 | 3 | 4 | * { 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 9 | font-family: 'Muli' , 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 | .container { 19 | display: flex; 20 | width: 90vw; 21 | } 22 | 23 | .panel { 24 | background-size: cover; 25 | background-position:center; 26 | background-repeat: no-repeat; 27 | height: 80vh; 28 | border-radius: 50px; 29 | color: rgb(245, 244, 244); 30 | cursor: pointer; 31 | flex: 0.5; 32 | margin: 10px; 33 | position: relative; 34 | transition: flex 0.9s ease-in; 35 | } 36 | 37 | .panel h3 { 38 | font-size:25px; 39 | position: absolute; 40 | bottom:20px; 41 | left: 20px; 42 | margin: 20; 43 | opacity: 0; 44 | } 45 | 46 | .panel.active { 47 | flex: 5; 48 | } 49 | 50 | .panel.active h3 { 51 | opacity: 1; 52 | transition: opacity 0.3s ease-in 0.5s; 53 | } 54 | 55 | @media(max-width: 480px) { 56 | .container{ 57 | width:100vw; 58 | 59 | } 60 | 61 | .panel:nth-of-type(4), 62 | .panel:nth-of-type(5), 63 | .panel:nth-of-type(6) { 64 | display: none; 65 | } 66 | 67 | } -------------------------------------------------------------------------------- /Project 02 - Progress Step bars/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Progress Steps Bar 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |
1
17 |
2
18 |
3
19 |
4
20 |
5
21 | 25 | 26 |
27 | 28 | 29 | 30 | 31 | 32 |
33 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /Project 02 - Progress Step bars/script.js: -------------------------------------------------------------------------------- 1 | const panels = 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 | 11 | if (currentActive > circles.length) { 12 | currentActive = circles.length 13 | } 14 | update() 15 | } 16 | 17 | ) 18 | 19 | prev.addEventListener('click' , () => { 20 | currentActive-- 21 | 22 | if (currentActive < 1) { 23 | currentActive = 1 24 | } 25 | update() 26 | } 27 | 28 | ) 29 | 30 | function update() { 31 | circles.forEach((circle, idx) => { 32 | if (idx < currentActive) { 33 | circle.classList.add('active') 34 | } 35 | else { 36 | circle.classList.remove('active') 37 | } 38 | }) 39 | 40 | const actives = document.querySelectorAll('.active') 41 | 42 | progress.style.width = (actives.length - 1) / (circles.length - 1) * 100 + '%' 43 | 44 | if (currentActive == 1) { 45 | prev.disabled = true 46 | } 47 | else if ( currentActive == circles.length) { 48 | next.disabled = true 49 | } 50 | else { 51 | prev.disabled = false 52 | next.disabled = false 53 | } 54 | } 55 | 56 | -------------------------------------------------------------------------------- /Project 02 - Progress Step bars/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); 2 | :root { 3 | --line-border-fill: #3498db; 4 | --line-border-empty: #e0e0e0; 5 | } 6 | 7 | * { 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | background-color: #f6f7fb; 13 | font-family: 'Muli', sans-serif; 14 | display: flex; 15 | align-items: center; 16 | justify-content: center; 17 | height: 100vh; 18 | overflow: hidden; 19 | margin: 0; 20 | } 21 | 22 | .container { 23 | text-align: center; 24 | } 25 | 26 | .progress-container { 27 | display: flex; 28 | justify-content: space-between; 29 | position: relative; 30 | margin-bottom: 30px; 31 | max-width: 100%; 32 | width: 350px; 33 | } 34 | 35 | .progress { 36 | background-color: var(--line-border-fill); 37 | position: absolute; 38 | top: 50%; 39 | left: 0; 40 | transform: translateY(-50%); 41 | height: 4px; 42 | width: 0%; 43 | z-index: -1; 44 | transition: .5s ease; 45 | } 46 | 47 | .progress-container::before { 48 | content: ' '; 49 | background-color: var(--line-border-empty); 50 | position: absolute; 51 | top: 50%; 52 | left: 0; 53 | transform: translateY(-50%); 54 | height: 4px; 55 | width: 100%; 56 | z-index: -1; 57 | } 58 | 59 | .circle { 60 | background-color: #fff; 61 | color: #999; 62 | border-radius: 50%; 63 | height: 30px; 64 | width: 30px; 65 | display: flex; 66 | align-items: center; 67 | justify-content: center; 68 | border: 3px solid var(--line-border-empty); 69 | transition: .5s ease; 70 | } 71 | 72 | .circle.active { 73 | border-color: var(--line-border-fill); 74 | } 75 | 76 | .btn { 77 | background-color: var(--line-border-fill); 78 | color: #fff; 79 | border: 0; 80 | border-radius: 6px; 81 | cursor: pointer; 82 | font-family: inherit; 83 | padding: 8px 30px; 84 | margin: 5px; 85 | font-size: 14px; 86 | } 87 | 88 | .btn:active { 89 | transform: scale(0.98); 90 | } 91 | 92 | .btn:focus { 93 | outline: 0; 94 | } 95 | 96 | .btn:disabled { 97 | background-color: var(--line-border-empty); 98 | cursor: not-allowed; 99 | } -------------------------------------------------------------------------------- /Project 03 - Rotating Navigation/img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FahimFBA/Mini-Projects-in-HTML-CSS-and-Javascript/371ea7b3c1f28b04710b7b5a026b2f3904255fa9/Project 03 - Rotating Navigation/img/1.jpg -------------------------------------------------------------------------------- /Project 03 - Rotating Navigation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Rotating Navigation 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | 19 | 22 |
23 |
24 | 25 |
26 |

Fire On Brown Wooden Table
27 | Timon Studler 28 |

29 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi earum qui, at aut dolor expedita dolorem. Aut, voluptas sapiente maiores saepe ullam iste at, necessitatibus quae tempora praesentium quia atque minus ea, molestiae obcaecati. Rerum dignissimos praesentium, iste odit ex quibusdam laborum reiciendis quis sit, saepe laudantium esse repellendus possimus, incidunt similique facere a vel itaque. Ex voluptates consequuntur nesciunt corporis iste enim animi accusamus nam nisi distinctio beatae nobis sed fugiat impedit pariatur, asperiores rerum illo aspernatur aut ratione quae odio necessitatibus fuga itaque repellat? Nesciunt inventore molestias soluta eos dolorum dignissimos, labore distinctio aspernatur vitae voluptatum officiis quis!

30 | 31 | 32 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem at tenetur quaerat, eius nobis ipsam aliquid vel nam omnis deleniti eum doloribus, maiores ea iste provident sed repudiandae molestiae quasi quibusdam cumque, in dolorem aperiam placeat! Enim cumque, commodi necessitatibus tenetur aliquam? Odio expedita quos, libero quia. Optio esse reprehenderit nobis explicabo sed, neque ea fuga animi, laudantium omnis dicta tempora nihil facere natus quasi. Eius numquam in minus blanditiis.

33 |
34 |
35 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /Project 03 - Rotating Navigation/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' , () => container.classList.add('show-nav')) 6 | 7 | close.addEventListener('click' , () => container.classList.remove('show-nav')) -------------------------------------------------------------------------------- /Project 03 - Rotating Navigation/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Lato&display=swap'); 2 | 3 | 4 | * { 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 9 | font-family: 'Lato' , sans-serif; 10 | overflow-x: hidden; 11 | margin: 0; 12 | background-color: #333; 13 | color: #222; 14 | 15 | } 16 | 17 | .container { 18 | background-color: #fafafa; 19 | transform-origin: top left; 20 | transition: transform 0.9s linear; 21 | width: 100vw; 22 | min-height: 100vh; 23 | padding: 50px; 24 | } 25 | 26 | .container.show-nav { 27 | transform: rotate(-25deg); 28 | } 29 | 30 | 31 | .circle-container { 32 | position: fixed; 33 | top: -100px; 34 | left: -100px; 35 | } 36 | 37 | 38 | .circle { 39 | background-color: #ff7979; 40 | height: 200px; 41 | width: 200px; 42 | border-radius: 50%; 43 | position: relative; 44 | transition: transform 0.9s linear; 45 | } 46 | 47 | .circle button { 48 | position: absolute; 49 | top: 50%; 50 | left: 50%; 51 | height: 100px; 52 | background: transparent; 53 | border: 0; 54 | font-size: 29px; 55 | color: #fff; 56 | cursor: pointer; 57 | } 58 | 59 | .circle button:focus { 60 | outline: none; 61 | } 62 | 63 | .circle button#open { 64 | left: 60%; 65 | } 66 | 67 | .circle button#close { 68 | top: 60%; 69 | transform: rotate(90deg); 70 | transform-origin: top left; 71 | } 72 | 73 | .content img { 74 | max-width: 100%; 75 | } 76 | 77 | 78 | .content { 79 | max-width: 1000px; 80 | margin: 50px auto; 81 | } 82 | 83 | .content h1 { 84 | margin: 0; 85 | } 86 | 87 | .content small { 88 | font-size: 20px; 89 | color: #555; 90 | font-style: italic; 91 | } 92 | 93 | .content p { 94 | color: #333; 95 | line-height: 1.5; 96 | } 97 | 98 | 99 | nav { 100 | position: fixed; 101 | bottom: 40px; 102 | left: 0; 103 | z-index: 100; 104 | } 105 | 106 | 107 | 108 | nav ul { 109 | list-style-type: none; 110 | padding-left: 30px; 111 | 112 | } 113 | 114 | 115 | nav ul li { 116 | text-transform: uppercase; 117 | color: #fff; 118 | margin: 40px 0; 119 | transform: translateX(-100%); 120 | transition: transform 0.5s ease-in; 121 | } 122 | 123 | 124 | nav ul li i { 125 | font-size: 20px; 126 | margin-right: 10px; 127 | } 128 | 129 | 130 | 131 | nav ul li + li { 132 | margin-left: 15px; 133 | transform: translateX(-150%); 134 | } 135 | 136 | 137 | nav ul li + li + li { 138 | margin-left: 30px; 139 | transform: translateX(-200%); 140 | } 141 | 142 | 143 | .container.show-nav + nav li { 144 | transform: translateX(0); 145 | transition-delay: 0.5s; 146 | } 147 | 148 | 149 | 150 | .container.show-nav .circle { 151 | transform: rotate(-70deg); 152 | } 153 | 154 | 155 | 156 | -------------------------------------------------------------------------------- /Project 04 - Hidden Search Widget/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Search Widget 9 | 10 | 11 |
12 | 13 | 16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /Project 04 - 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 | 7 | 8 | btn.addEventListener('click', () => { 9 | search.classList.toggle('active') 10 | input.focus() 11 | }) -------------------------------------------------------------------------------- /Project 04 - Hidden Search Widget/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); 2 | 3 | 4 | 5 | /*General*/ 6 | 7 | * { 8 | box-sizing: border-box; 9 | } 10 | 11 | /*Body*/ 12 | 13 | body { 14 | background-image: linear-gradient(90deg, #e699cc, #7158e2); 15 | font-family: 'Roboto', sans-serif; 16 | display: flex; 17 | align-items: center; 18 | justify-content: center; 19 | height: 100vh; 20 | overflow: hidden; 21 | margin: 0; 22 | } 23 | 24 | /*Search*/ 25 | 26 | .search { 27 | position: relative; 28 | height: 50px; 29 | } 30 | 31 | /*Search-Input*/ 32 | 33 | .search .input { 34 | background-color: #fff; 35 | border: 0; 36 | font-size: 18px; 37 | padding: 15px; 38 | height: 50px; 39 | width: 50px; 40 | transition: width 0.8s ease; 41 | } 42 | 43 | /*Button*/ 44 | 45 | .btn { 46 | background-color: #fff; 47 | border: 0; 48 | cursor: pointer; 49 | font-size: 24px; 50 | position: absolute; 51 | top: 0; 52 | left: 0; 53 | height: 50px; 54 | width: 50px; 55 | transition: transform 0.8s ease; 56 | } 57 | 58 | /*Focus-Active*/ 59 | 60 | .btn:focus, 61 | .input:focus { 62 | outline: none; 63 | } 64 | 65 | .search.active .input { 66 | width: 200px; 67 | } 68 | 69 | .search.active .btn { 70 | transform: translateX(198px); 71 | } 72 | -------------------------------------------------------------------------------- /Project 05 - Blurry Loading Page/img/image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FahimFBA/Mini-Projects-in-HTML-CSS-and-Javascript/371ea7b3c1f28b04710b7b5a026b2f3904255fa9/Project 05 - Blurry Loading Page/img/image.jpg -------------------------------------------------------------------------------- /Project 05 - Blurry Loading Page/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Blurry Loading Page 9 | 10 | 11 | 12 |
13 |
0%
14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Project 05 - Blurry Loading Page/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 | 7 | function blurring() { 8 | 9 | load++ 10 | 11 | if(load > 99) { 12 | 13 | clearInterval(int) 14 | 15 | } 16 | 17 | 18 | 19 | loadText.innerText = `${load}%`; 20 | loadText.style.opacity = scale(load, 0, 100, 1, 0) 21 | bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)` 22 | } 23 | 24 | 25 | 26 | const scale = (num, in_min, in_max, out_min, out_max) => { 27 | return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min 28 | } -------------------------------------------------------------------------------- /Project 05 - Blurry Loading Page/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Ubuntu'); 2 | 3 | 4 | * { 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 9 | font-family: 'Ubuntu' , 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 | .bg { 20 | background: url('img/image.jpg') no-repeat center center/cover; 21 | position: absolute; 22 | top: -30; 23 | left: -30; 24 | width: calc(100vw + 60px); 25 | height: calc(100vh + 60px); 26 | z-index: -1; 27 | filter: blur(0px); 28 | } 29 | 30 | .loading-text { 31 | font-size:50px; 32 | color: #fff; 33 | } -------------------------------------------------------------------------------- /Project 06 - Scrolling Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Scrolling Animation 9 | 10 | 11 | 12 |

Scroll to see the effect of scrolling

13 | 14 |

Content 01

15 |

Content 02

16 |

Content 03

17 |

Content 04

18 |

Content 05

19 |

Content 06

20 |

Content 07

21 |

Content 08

22 |

Content 09

23 |

Content 10

24 |

Content 11

25 |

Content 12

26 |

Content 13

27 |

Content 14

28 |

Content 15

29 |

Content 16

30 |

Content 17

31 |

Content 18

32 |

Content 19

33 |

Content 20

34 |

Content 21

35 |

Content 22

36 |

Content 23

37 |

Content 24

38 |

Content 25

39 |

Content 26

40 |

Content 27

41 |

Content 28

42 |

Content 29

43 |

Content 30

44 |

Content 31

45 |

Content 32

46 |

Content 33

47 |

Content 34

48 |

Content 35

49 |

Content 36

50 |

Content 37

51 |

Content 38

52 |

Content 39

53 |

Content 40

54 | 55 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /Project 06 - Scrolling Animation/script.js: -------------------------------------------------------------------------------- 1 | const boxes = document.querySelectorAll('.box') 2 | window.addEventListener('scroll', checkBoxes) 3 | 4 | // checkBoxes() // Remove it if you don't want any content first 5 | 6 | function checkBoxes() { 7 | const triggerBottom = window.innerHeight / 5 * 4 8 | boxes.forEach(box =>{ 9 | const boxTop = box.getBoundingClientRect().top 10 | 11 | 12 | if (boxTop < triggerBottom) 13 | { 14 | box.classList.add('show') 15 | } 16 | else 17 | { 18 | box.classList.remove('show') 19 | } 20 | }) 21 | } -------------------------------------------------------------------------------- /Project 06 - Scrolling Animation/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); 2 | 3 | 4 | * { 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 9 | background-color: #efedd6; 10 | font-family: 'Roboto' , sans-serif; 11 | display: flex; 12 | flex-direction: column; 13 | align-items: center; 14 | justify-content:center; 15 | margin: 0; 16 | overflow-x: hidden; 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(400%); 35 | transition: transform 0.6s ease; 36 | } 37 | 38 | 39 | .box:nth-of-type(even){ 40 | transform: translateX(-400%); 41 | 42 | } 43 | 44 | .box.show { 45 | transform: translateX(0); 46 | } 47 | 48 | .box h2 { 49 | font-size: 45px; 50 | } -------------------------------------------------------------------------------- /Project 07 -Split The Landing Page/img/ps5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FahimFBA/Mini-Projects-in-HTML-CSS-and-Javascript/371ea7b3c1f28b04710b7b5a026b2f3904255fa9/Project 07 -Split The Landing Page/img/ps5.jpg -------------------------------------------------------------------------------- /Project 07 -Split The Landing Page/img/xbox.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FahimFBA/Mini-Projects-in-HTML-CSS-and-Javascript/371ea7b3c1f28b04710b7b5a026b2f3904255fa9/Project 07 -Split The Landing Page/img/xbox.jpg -------------------------------------------------------------------------------- /Project 07 -Split The Landing Page/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Splitting Landing Page 9 | 10 | 11 | 12 |
13 |
14 |

Playstation 5

15 | Buy Now! 16 |
17 |
18 |

XBox Series X

19 | Buy Now! 20 |
21 |
22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /Project 07 -Split The Landing Page/script.js: -------------------------------------------------------------------------------- 1 | const left = document.querySelector('.left') 2 | const right = document.querySelector('.right') 3 | const container = document.querySelector('.container') 4 | 5 | left.addEventListener('mouseenter', () => container.classList.add('hover-left')) 6 | left.addEventListener('mouseleave', () => container.classList.remove('hover-left')) 7 | 8 | right.addEventListener('mouseenter', () => container.classList.add('hover-right')) 9 | right.addEventListener('mouseleave', () => container.classList.remove('hover-right')) -------------------------------------------------------------------------------- /Project 07 -Split The Landing Page/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); 2 | 3 | :root { 4 | --left-bg-color: rgba(87, 84, 236, 0.7); 5 | --right-bg-color: rgba(43, 43, 43, 0.8); 6 | --left-btn-hover-color: rgba(87, 84, 236, 1); 7 | --right-btn-hover-color: rgba(28, 122, 28, 1); 8 | --hover-width: 75%; 9 | --other-width: 25%; 10 | --speed: 1000ms; 11 | } 12 | 13 | * { 14 | box-sizing: border-box; 15 | } 16 | 17 | body { 18 | font-family: "Roboto", sans-serif; 19 | height: 100vh; 20 | overflow: hidden; 21 | margin: 0; 22 | } 23 | 24 | h1 { 25 | font-size: 4rem; 26 | color: #fff; 27 | position: absolute; 28 | left: 50%; 29 | top: 20%; 30 | transform: translateX(-50%); 31 | white-space: nowrap; 32 | } 33 | 34 | .container { 35 | position: relative; 36 | width: 100%; 37 | height: 100%; 38 | background: #333; 39 | } 40 | 41 | .split { 42 | position: absolute; 43 | width: 50%; 44 | height: 100%; 45 | overflow: hidden; 46 | } 47 | 48 | .split.left { 49 | left: 0; 50 | background: url("img/ps5.jpg"); 51 | background-repeat: no-repeat; 52 | background-size: cover; 53 | } 54 | 55 | .split.left::before { 56 | content: ""; 57 | position: absolute; 58 | width: 100%; 59 | height: 100%; 60 | background-color: var(--left-bg-color); 61 | } 62 | 63 | .split.right { 64 | right: 0; 65 | background: url("img/xbox.jpg"); 66 | background-repeat: no-repeat; 67 | background-size: cover; 68 | } 69 | 70 | .split.right::before { 71 | content: ""; 72 | position: absolute; 73 | width: 100%; 74 | height: 100%; 75 | background-color: var(--right-bg-color); 76 | } 77 | 78 | .split.right, 79 | .split.left, 80 | .split.right::before, 81 | .split.left::before { 82 | transition: all var(--speed) ease-in-out; 83 | } 84 | 85 | .hover-left .left { 86 | width: var(--hover-width); 87 | } 88 | 89 | .hover-left .right { 90 | width: var(--other-width); 91 | } 92 | 93 | .hover-right .right { 94 | width: var(--hover-width); 95 | } 96 | 97 | .hover-right .left { 98 | width: var(--other-width); 99 | } 100 | 101 | .btn { 102 | position: absolute; 103 | display: flex; 104 | align-items: center; 105 | justify-content: center; 106 | left: 50%; 107 | top: 40%; 108 | transform: translateX(-50%); 109 | text-decoration: none; 110 | color: #fff; 111 | border: #fff solid 0.2rem; 112 | font-size: 1rem; 113 | font-weight: bold; 114 | text-transform: uppercase; 115 | width: 15rem; 116 | padding: 1.5rem; 117 | } 118 | 119 | .split.left .btn:hover { 120 | background-color: var(--left-btn-hover-color); 121 | border-color: var(--left-btn-hover-color); 122 | } 123 | 124 | .split.right .btn:hover { 125 | background-color: var(--right-btn-hover-color); 126 | border-color: var(--right-btn-hover-color); 127 | } 128 | 129 | @media (max-width: 800px) { 130 | h1 { 131 | font-size: 2rem; 132 | top: 30%; 133 | } 134 | 135 | .btn { 136 | padding: 1.2rem; 137 | width: 12rem; 138 | } 139 | } 140 | -------------------------------------------------------------------------------- /Project 08 - Animated Waving Form/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Animated Wave 9 | 10 | 11 |
12 |

Please Login

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

Don't have any account? Register

25 |
26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /Project 08 - Animated Waving Form/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}`) 7 | .join(''); 8 | }) -------------------------------------------------------------------------------- /Project 08 - Animated Waving Form/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Muli&display=swap'); 2 | 3 | 4 | * { 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 9 | background-color: rgb(97, 169, 228); 10 | font-family: 'Muli' , sans-serif; 11 | display: flex; 12 | flex-direction: column; 13 | align-items: center; 14 | justify-content:center; 15 | height: 100vh; 16 | overflow: hidden; 17 | margin: 0; 18 | color: #fff; 19 | } 20 | 21 | .container { 22 | background-color:rgba(0, 0, 0, 0.4); 23 | padding:20px 40px; 24 | border-radius:25px; 25 | 26 | } 27 | 28 | .container h1 { 29 | text-align:center; 30 | margin-bottom:30px; 31 | } 32 | 33 | .container a { 34 | text-decoration: none; 35 | color: lightblue; 36 | } 37 | 38 | .form-control { 39 | position: relative; 40 | margin: 20px 0 40px; 41 | width: 250px; 42 | } 43 | 44 | 45 | 46 | .form-control input{ 47 | background-color: transparent; 48 | border: 0; 49 | border-bottom: 2px #fff solid; 50 | display: block; 51 | width: 100%; 52 | padding: 15px 0; 53 | font-size: 20px; 54 | color: white; 55 | } 56 | 57 | .form-control input:focus, .form-control input:valid{ 58 | outline: 0; /* Removing the borders while mouse click*/ 59 | border-bottom-color: lightblue; 60 | 61 | } 62 | 63 | .btn { 64 | cursor: pointer; 65 | display: inline-block; 66 | width: 100%; 67 | background: lightblue; 68 | padding: 15px; 69 | font-family: inherit; 70 | font-size: 16px; 71 | border: 0; 72 | border-radius: 15px; 73 | } 74 | 75 | .btn:focus{ 76 | outline: 0; 77 | } 78 | 79 | 80 | .btn:active{ 81 | transform: scale(0.98) 82 | } 83 | 84 | .text { 85 | margin-top: 30px; 86 | } 87 | 88 | .form-control label { 89 | position: absolute; 90 | top: 15px; 91 | left: 0; 92 | } 93 | 94 | .form-control label span { 95 | display: inline-block; 96 | font-size: 18px; 97 | min-width: 5px; 98 | transition: 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); 99 | } 100 | 101 | .form-control input:focus + label span, 102 | .form-control input:valid + label span { 103 | color: lightblue; 104 | transform: translateY(-35px); 105 | } 106 | 107 | 108 | -------------------------------------------------------------------------------- /Project 09 - Sound Mini-Boards/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 12 | 13 | Sound Mini-Boards 14 | 15 | 16 | 17 | 21 | 22 | 26 | 27 | 31 | 35 | 36 |
37 | 38 | 39 | 40 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /Project 09 - Sound Mini-Boards/music/music_angela_paulson_floating_001.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FahimFBA/Mini-Projects-in-HTML-CSS-and-Javascript/371ea7b3c1f28b04710b7b5a026b2f3904255fa9/Project 09 - Sound Mini-Boards/music/music_angela_paulson_floating_001.mp3 -------------------------------------------------------------------------------- /Project 09 - Sound Mini-Boards/music/music_angela_paulson_out_at_sea_004.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FahimFBA/Mini-Projects-in-HTML-CSS-and-Javascript/371ea7b3c1f28b04710b7b5a026b2f3904255fa9/Project 09 - Sound Mini-Boards/music/music_angela_paulson_out_at_sea_004.mp3 -------------------------------------------------------------------------------- /Project 09 - Sound Mini-Boards/music/music_david_gwyn_jones_the_celestial_harp_instrumental.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FahimFBA/Mini-Projects-in-HTML-CSS-and-Javascript/371ea7b3c1f28b04710b7b5a026b2f3904255fa9/Project 09 - Sound Mini-Boards/music/music_david_gwyn_jones_the_celestial_harp_instrumental.mp3 -------------------------------------------------------------------------------- /Project 09 - Sound Mini-Boards/music/music_zapsplat_beautiful_reef.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FahimFBA/Mini-Projects-in-HTML-CSS-and-Javascript/371ea7b3c1f28b04710b7b5a026b2f3904255fa9/Project 09 - Sound Mini-Boards/music/music_zapsplat_beautiful_reef.mp3 -------------------------------------------------------------------------------- /Project 09 - Sound Mini-Boards/music/music_zapsplat_game_music_action_agressive_pounding_tense_electro_synth_028.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FahimFBA/Mini-Projects-in-HTML-CSS-and-Javascript/371ea7b3c1f28b04710b7b5a026b2f3904255fa9/Project 09 - Sound Mini-Boards/music/music_zapsplat_game_music_action_agressive_pounding_tense_electro_synth_028.mp3 -------------------------------------------------------------------------------- /Project 09 - Sound Mini-Boards/music/music_zapsplat_morning_rush_hour_142.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FahimFBA/Mini-Projects-in-HTML-CSS-and-Javascript/371ea7b3c1f28b04710b7b5a026b2f3904255fa9/Project 09 - Sound Mini-Boards/music/music_zapsplat_morning_rush_hour_142.mp3 -------------------------------------------------------------------------------- /Project 09 - Sound Mini-Boards/music/music_zapsplat_rapid_turnaround.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FahimFBA/Mini-Projects-in-HTML-CSS-and-Javascript/371ea7b3c1f28b04710b7b5a026b2f3904255fa9/Project 09 - Sound Mini-Boards/music/music_zapsplat_rapid_turnaround.mp3 -------------------------------------------------------------------------------- /Project 09 - Sound Mini-Boards/script.js: -------------------------------------------------------------------------------- 1 | const sounds = ['reef', 'game', 'rapid', 'floating', 'sea', 'celestial', 'rush'] 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'). 12 | appendChild(btn) 13 | }) 14 | function stopSongs() { 15 | sounds.forEach(sound => { 16 | const song = document.getElementById(sound) 17 | song.pause() 18 | song.currentTime = 0; 19 | }) 20 | } -------------------------------------------------------------------------------- /Project 09 - Sound Mini-Boards/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap'); 2 | 3 | 4 | * { 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 9 | background-color: rgb(173, 195, 236); 10 | font-family: 'Poppins', sans-serif; 11 | display: flex; 12 | flex-wrap: wrap; 13 | align-items: center; 14 | justify-content: center; 15 | height: 100vh; 16 | overflow: hidden; 17 | margin: 0; 18 | } 19 | 20 | .btn { 21 | background-color: lightblue; 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:focus { 33 | outline: none; 34 | } 35 | 36 | .btn:hover { 37 | opacity: .6; 38 | } -------------------------------------------------------------------------------- /Project 10 - Dad Jokes/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FahimFBA/Mini-Projects-in-HTML-CSS-and-Javascript/371ea7b3c1f28b04710b7b5a026b2f3904255fa9/Project 10 - Dad Jokes/android-chrome-192x192.png -------------------------------------------------------------------------------- /Project 10 - Dad Jokes/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FahimFBA/Mini-Projects-in-HTML-CSS-and-Javascript/371ea7b3c1f28b04710b7b5a026b2f3904255fa9/Project 10 - Dad Jokes/android-chrome-512x512.png -------------------------------------------------------------------------------- /Project 10 - Dad Jokes/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FahimFBA/Mini-Projects-in-HTML-CSS-and-Javascript/371ea7b3c1f28b04710b7b5a026b2f3904255fa9/Project 10 - Dad Jokes/apple-touch-icon.png -------------------------------------------------------------------------------- /Project 10 - Dad Jokes/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FahimFBA/Mini-Projects-in-HTML-CSS-and-Javascript/371ea7b3c1f28b04710b7b5a026b2f3904255fa9/Project 10 - Dad Jokes/favicon-16x16.png -------------------------------------------------------------------------------- /Project 10 - Dad Jokes/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FahimFBA/Mini-Projects-in-HTML-CSS-and-Javascript/371ea7b3c1f28b04710b7b5a026b2f3904255fa9/Project 10 - Dad Jokes/favicon-32x32.png -------------------------------------------------------------------------------- /Project 10 - Dad Jokes/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FahimFBA/Mini-Projects-in-HTML-CSS-and-Javascript/371ea7b3c1f28b04710b7b5a026b2f3904255fa9/Project 10 - Dad Jokes/favicon.ico -------------------------------------------------------------------------------- /Project 10 - Dad Jokes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | Dad Jokes 21 | 22 | 23 |
24 |

Here's the challenge. Don't LAUGH !

25 |
26 | // Joke goes here 27 | 28 |
29 | 30 |
31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /Project 10 - 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 | 9 | // USING ASYNC/AWAIT 10 | async function generateJoke(){ 11 | 12 | const config= { 13 | headers: { 14 | Accept: 'application/json', 15 | }, 16 | } 17 | 18 | const res = await fetch('https://icanhazdadjoke.com', config) 19 | 20 | 21 | const data = await res.json() 22 | 23 | jokeEl.innerHTML = data.joke 24 | } 25 | 26 | 27 | 28 | 29 | 30 | // USINE .then() 31 | 32 | //function generateJoke(){ 33 | // 34 | // const config= { 35 | // headers: { 36 | // Accept: 'application/json', 37 | // }, 38 | // } 39 | // 40 | // fetch('https://icanhazdadjoke.com', config) 41 | // .then((res) => res.json()) 42 | // .then((data) => { 43 | // jokeEl.innerHTML = data.joke 44 | // }) 45 | //} -------------------------------------------------------------------------------- /Project 10 - Dad Jokes/site.webmanifest: -------------------------------------------------------------------------------- 1 | {"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} -------------------------------------------------------------------------------- /Project 10 - Dad Jokes/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); 2 | 3 | 4 | * { 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 9 | background-color: #686de0; 10 | font-family: 'Roboto' , sans-serif; 11 | display: flex; 12 | flex-direction: column; 13 | align-items: center; 14 | justify-content:center; 15 | height: 100vh; 16 | overflow: hidden; 17 | margin: 0; 18 | padding: 25px; 19 | } 20 | 21 | .container{ 22 | background-color: #fff; 23 | border-radius: 10px; 24 | box-shadow: 0 10px 20px rgba(0,0,0,0.1), 0 6px 6px rgba(0,0,0,0.1); 25 | padding: 50px 20px; 26 | text-align: center; 27 | max-width: 100%; 28 | width: 800px; 29 | } 30 | 31 | h3{ 32 | margin: 0; 33 | opacity: 0.5; 34 | letter-spacing: 2px; 35 | 36 | } 37 | 38 | .joke{ 39 | font-size: 30px; 40 | letter-spacing: 1px; 41 | line-height: 40px; 42 | margin: 50px auto; 43 | max-width: 600px; 44 | } 45 | 46 | .btn{ 47 | background-color: #9F68E0; 48 | color: #fff; 49 | border: 0; 50 | border-radius: 10px; 51 | box-shadow: 0 5px 15px rgba(0,0,0,0.1), 0 6px 6px rgba(0,0,0,0.1); 52 | padding: 15px 40px; 53 | font-size: 16px; 54 | cursor: pointer; 55 | } 56 | 57 | .btn:active{ 58 | transform: scale(0.98); 59 | } 60 | 61 | .btn:focus{ 62 | outline: 0; 63 | } 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /Project 11 - Event Key/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FahimFBA/Mini-Projects-in-HTML-CSS-and-Javascript/371ea7b3c1f28b04710b7b5a026b2f3904255fa9/Project 11 - Event Key/android-chrome-192x192.png -------------------------------------------------------------------------------- /Project 11 - Event Key/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FahimFBA/Mini-Projects-in-HTML-CSS-and-Javascript/371ea7b3c1f28b04710b7b5a026b2f3904255fa9/Project 11 - Event Key/android-chrome-512x512.png -------------------------------------------------------------------------------- /Project 11 - Event Key/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FahimFBA/Mini-Projects-in-HTML-CSS-and-Javascript/371ea7b3c1f28b04710b7b5a026b2f3904255fa9/Project 11 - Event Key/apple-touch-icon.png -------------------------------------------------------------------------------- /Project 11 - Event Key/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FahimFBA/Mini-Projects-in-HTML-CSS-and-Javascript/371ea7b3c1f28b04710b7b5a026b2f3904255fa9/Project 11 - Event Key/favicon-16x16.png -------------------------------------------------------------------------------- /Project 11 - Event Key/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FahimFBA/Mini-Projects-in-HTML-CSS-and-Javascript/371ea7b3c1f28b04710b7b5a026b2f3904255fa9/Project 11 - Event Key/favicon-32x32.png -------------------------------------------------------------------------------- /Project 11 - Event Key/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FahimFBA/Mini-Projects-in-HTML-CSS-and-Javascript/371ea7b3c1f28b04710b7b5a026b2f3904255fa9/Project 11 - Event Key/favicon.ico -------------------------------------------------------------------------------- /Project 11 - Event Key/img/i.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FahimFBA/Mini-Projects-in-HTML-CSS-and-Javascript/371ea7b3c1f28b04710b7b5a026b2f3904255fa9/Project 11 - Event Key/img/i.jpg -------------------------------------------------------------------------------- /Project 11 - Event Key/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 10 | 11 | Event Key Identification 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 |
27 | Press any key to get the Key Code 28 |
29 | 30 |
31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /Project 11 - Event Key/script.js: -------------------------------------------------------------------------------- 1 | const insert = document.getElementById('insert') 2 | 3 | window.addEventListener('keydown', (event) => { 4 | insert.innerHTML = ` 5 |
6 | ${event.key === ' ' ? 'Space' : event.key} 7 | event.Key 8 |
9 | 10 |
11 | ${event.keyCode} 12 | event.keyCode 13 |
14 | 15 |
16 | ${event.code} 17 | event.Code 18 |
19 | ` 20 | }) -------------------------------------------------------------------------------- /Project 11 - Event Key/site.webmanifest: -------------------------------------------------------------------------------- 1 | {"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} -------------------------------------------------------------------------------- /Project 11 - Event Key/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Muli&display=swap"); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: "Muli", sans-serif; 9 | background-image: url("img/i.jpg"); 10 | background-repeat: no-repeat; 11 | background-size: cover; 12 | background-position: center; 13 | display: flex; 14 | align-items: center; 15 | justify-content: center; 16 | height: 100vh; 17 | overflow: hidden; 18 | margin: 0; 19 | text-align: center; 20 | } 21 | 22 | .key { 23 | border: 1px solid rgb(37, 185, 37); 24 | background-color: #eee; 25 | box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); 26 | display: inline-flex; 27 | align-items: center; 28 | font-size: 20px; 29 | font-weight: bolder; 30 | padding: 20px; 31 | flex-direction: column; 32 | margin: 10px; 33 | min-width: 150px; 34 | position: relative; 35 | } 36 | 37 | .key small { 38 | position: absolute; 39 | top: -24px; 40 | left: 0; 41 | text-align: center; 42 | width: 100%; 43 | color: #555; 44 | font-size: 14px; 45 | } 46 | -------------------------------------------------------------------------------- /Project 12 - FAQ Collapse/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 12 | 13 | FAQ 14 | 15 | 16 |

Frequently Asked Questions

17 |
18 |
19 |

Why shouldn't we trust atoms?

20 | 21 |

They make up everything

22 | 23 | 27 |
28 | 29 |
30 |

31 | What do you call someone with no body and no nose? 32 |

33 |

Nobody knows.

34 | 38 |
39 | 40 |
41 |

42 | What's the object-oriented way to become wealthy? 43 |

44 |

Inheritance.

45 | 49 |
50 | 51 |
52 |

53 | How many tickles does it take to tickle an octopus? 54 |

55 |

Ten-tickles!

56 | 60 |
61 | 62 |
63 |

What is: 1 + 1?

64 |

Depends on who are you asking.

65 | 69 |
70 |
71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /Project 12 - FAQ Collapse/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 | }) -------------------------------------------------------------------------------- /Project 12 - FAQ Collapse/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 | background-color: #f0f0f0; 10 | } 11 | 12 | h1 { 13 | margin: 50px 0 30px; 14 | text-align: center; 15 | } 16 | 17 | .faq-container { 18 | max-width: 600px; 19 | margin: 0 auto; 20 | } 21 | 22 | .faq { 23 | background-color: transparent; 24 | border: 1px solid #9fa4a8; 25 | border-radius: 10px; 26 | margin: 20px 0; 27 | padding: 30px; 28 | position: relative; 29 | overflow: hidden; 30 | transition: 0.3s ease; 31 | } 32 | 33 | .faq.active { 34 | background-color: #fff; 35 | box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1); 36 | } 37 | 38 | .faq.active::before, 39 | .faq.active::after { 40 | content: "\f075"; 41 | font-family: "Font Awesome 5 Free"; 42 | color: #2ecc71; 43 | font-size: 7rem; 44 | position: absolute; 45 | opacity: 0.2; 46 | top: 20px; 47 | left: 20px; 48 | z-index: 0; 49 | } 50 | 51 | .faq.active::before { 52 | color: #3498db; 53 | top: -10px; 54 | left: -30px; 55 | transform: rotateY(180deg); 56 | } 57 | 58 | .faq-title { 59 | margin: 0 35px 0 0; 60 | } 61 | 62 | .faq-text { 63 | display: none; 64 | margin: 30px 0 0; 65 | } 66 | 67 | .faq.active .faq-text { 68 | display: block; 69 | } 70 | 71 | .faq-toggle:focus { 72 | outline: 0; 73 | } 74 | 75 | .faq-toggle .fa-times { 76 | display: none; 77 | } 78 | 79 | .faq.active .faq-toggle .fa-times { 80 | color: #fff; 81 | display: block; 82 | } 83 | 84 | .faq.active .faq-toggle .fa-chevron-down { 85 | display: none; 86 | } 87 | 88 | .faq.active .faq-toggle { 89 | background-color: #9fa4a8; 90 | } 91 | 92 | .faq-toggle { 93 | background-color: transparent; 94 | border: 0; 95 | border-radius: 50%; 96 | cursor: pointer; 97 | display: flex; 98 | align-items: center; 99 | justify-content: center; 100 | font-size: 16px; 101 | padding: 0; 102 | position: absolute; 103 | top: 30px; 104 | right: 30px; 105 | height: 30px; 106 | width: 30px; 107 | } 108 | -------------------------------------------------------------------------------- /Project 13 - Random Choice Picker/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Random Choice Picker 9 | 10 | 11 | 12 |
13 |

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

15 | 16 | 17 |
18 | Choice 1 19 | Choice 2 20 | Choice 3 21 |
22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /Project 13 - 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 | 9 | if(e.key === 'Enter') { 10 | setTimeout(() => { 11 | e.target.value = '' 12 | }, 10) 13 | 14 | randomSelect() 15 | } 16 | }) 17 | 18 | function createTags(input) { 19 | const tags = input.split(',').filter(tag => tag.trim() !== '').map(tag => tag.trim()) 20 | 21 | tagsEl.innerHTML = '' 22 | 23 | tags.forEach(tag => { 24 | const tagEl = document.createElement('span') 25 | tagEl.classList.add('tag') 26 | tagEl.innerText = tag 27 | tagsEl.appendChild(tagEl) 28 | }) 29 | } 30 | 31 | function randomSelect() { 32 | const times = 30 33 | 34 | const interval = setInterval(() => { 35 | const randomTag = pickRandomTag() 36 | 37 | if (randomTag !== undefined) { 38 | highlightTag(randomTag) 39 | 40 | setTimeout(() => { 41 | unHighlightTag(randomTag) 42 | }, 100) 43 | } 44 | }, 100); 45 | 46 | setTimeout(() => { 47 | clearInterval(interval) 48 | 49 | setTimeout(() => { 50 | const randomTag = pickRandomTag() 51 | 52 | highlightTag(randomTag) 53 | }, 100) 54 | 55 | }, times * 100) 56 | } 57 | 58 | function pickRandomTag() { 59 | const tags = document.querySelectorAll('.tag') 60 | return tags[Math.floor(Math.random() * tags.length)] 61 | } 62 | 63 | function highlightTag(tag) { 64 | tag.classList.add('highlight') 65 | } 66 | 67 | function unHighlightTag(tag) { 68 | tag.classList.remove('highlight') 69 | } 70 | -------------------------------------------------------------------------------- /Project 13 - 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 | display: block; 32 | width: 100%; 33 | height: 100px; 34 | font-family: inherit; 35 | padding: 10px; 36 | margin: 0 0 20px; 37 | font-size: 16px; 38 | } 39 | 40 | textarea:focus { 41 | outline: none; 42 | } 43 | 44 | .tag { 45 | background-color: #f0932b; 46 | color: #fff; 47 | border-radius: 50px; 48 | padding: 10px 20px; 49 | margin: 0 5px 10px 0; 50 | font-size: 14px; 51 | display: inline-block; 52 | } 53 | 54 | .tag.highlight { 55 | background-color: #273c75; 56 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Mini Projects in HTML, CSS and Javascript 2 | 3 |
4 | 5 | [![Tweet a thanks](https://img.shields.io/twitter/url?label=Tweet%20this%21&style=social&url=https%3A%2F%2Ftwitter.com%2FFahim_FBA)](https://twitter.com/intent/tweet?text=Wow!&url=https://github.com/FahimFBA/Mini-Projects-in-HTML-CSS-and-Javascript) 6 | [![Follow on Twitter](https://img.shields.io/twitter/follow/Fahim_FBA?style=social)](https://twitter.com/Fahim_FBA) 7 | 8 | ![Language](https://img.shields.io/github/languages/count/FahimFBA/Mini-Projects-in-HTML-CSS-and-Javascript?style=for-the-badge) 9 | ![Top Language](https://img.shields.io/github/languages/top/FahimFBA/Mini-Projects-in-HTML-CSS-and-Javascript?style=for-the-badge) 10 | ![Code Size](https://img.shields.io/github/languages/code-size/FahimFBA/Mini-Projects-in-HTML-CSS-and-Javascript?color=red&style=for-the-badge) 11 | ![GitHub Repo Size](https://img.shields.io/github/repo-size/FahimFBA/Mini-Projects-in-HTML-CSS-and-Javascript?color=bright&style=for-the-badge) 12 | ![Lines of Code](https://img.shields.io/tokei/lines/github/FahimFBA/Mini-Projects-in-HTML-CSS-and-Javascript?color=blue&style=for-the-badge) 13 | 14 | ### Used Software: 15 | 16 | > VS Code / VS Code insider 17 | 18 | ### Used Extensions (on VS Code) 19 | 20 | - Emmet 21 | - Live Server 22 | - Auto Rename Tag 23 | - Bracket Pair Colorizer 24 | - Prettier - Code Formatter 25 | - Save Typing 26 | 27 |
28 | 29 | ## PROJECTS 30 | 31 | | ID | Name | Live Website | Live Demo | 32 | | --- | ---------------------- | ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | 33 | | 01 | Expandable Cards | [Website](https://distracted-kepler-d186df.netlify.app) | [YouTube Video](https://www.youtube.com/watch?v=OxRJniILojA&list=PLutHME8vSEnEoS_-5Cl8RMsH0aWnWbsci&index=2) | 34 | | 02 | Progress Step Bars | [Website](https://infallible-brattain-6d5102.netlify.app/) | [YouTube Video](https://youtu.be/Jew-ydjswKs) | 35 | | 03 | Rotating Navigation | [Website](https://jolly-wilson-e155a4.netlify.app/) | [YouTube Video](https://youtu.be/_ScFokpHE44) | 36 | | 04 | Hidden Search Widget | [Website](https://loving-curie-166a7d.netlify.app/) | [YouTube Video](https://youtu.be/NyHPxXOIL2k) | 37 | | 05 | Blurry Loading Page | [Website](https://practical-kowalevski-a028aa.netlify.app/) | [YouTube Video](https://youtu.be/9TJTF8u-OQE) | 38 | | 06 | Scrolling Animation | [Website](https://objective-bohr-df6ca0.netlify.app/) | [YouTube Video](https://youtu.be/sP4H-XwFgqc) | 39 | | 07 | Split The Landing Page | [Website](https://gifted-cray-f612ff.netlify.app/) | [YouTube Video](https://youtu.be/csEWvMJTmd8) | 40 | | 08 | Animated Waving Form | [Website](https://priceless-leavitt-184bff.netlify.app/) | [YouTube Video](https://youtu.be/vkaYFedMRH0) | 41 | | 09 | Sound Mini-Boards | [Website](https://mini-projects-in-html-css-and-javascript.vercel.app/) | [YouTube Video](https://youtu.be/vRVdNjTedoI) | 42 | | 10 | Dad Jokes | [Website](https://hungry-agnesi-c7f8a3.netlify.app/) | [YouTube Video](https://youtu.be/5jxewf8Udzo) | 43 | | 11 | Event Key | [Website](https://gracious-roentgen-4bc525.netlify.app) | [YouTube Video](https://youtu.be/PYeEnIIsg2c) | 44 | | 12 | FAQ Collapse | [Website](https://superlative-kataifi-d457bf.netlify.app/) | [YouTube Video]() | 45 | |13 | Random Choice Picker | [Website](https://creative-banoffee-a17b22.netlify.app/) | [YouTube Video]() | 46 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-hacker --------------------------------------------------------------------------------