└── fintech
    ├── app.js
    ├── style.css
    └── index.html


/fintech/app.js:
--------------------------------------------------------------------------------
1 | document.querySelector('#menu').addEventListener('click',()=>{
2 |     document.querySelector('nav ul').classList.toggle('showmenu')
3 | })


--------------------------------------------------------------------------------
/fintech/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap');
  2 | /* Base Styling */
  3 | 
  4 | * {
  5 |     margin: 0;
  6 |     padding: 0;
  7 |     box-sizing: border-box;
  8 |     font-size: 62.5%;
  9 | }
 10 | 
 11 | body {
 12 |     font-family: "Poppins", sans-serif;
 13 | }
 14 | 
 15 | a {
 16 |     text-decoration: none;
 17 |     font-weight: 400;
 18 |     /* 1.6*10 = 16px */
 19 |     font-size: 1.6rem;
 20 |     color: whitesmoke;
 21 | }
 22 | 
 23 | h1,
 24 | h2,
 25 | p {
 26 | 
 27 |     margin: 1.6rem 0;
 28 | }
 29 | 
 30 | h1 {
 31 |     font-weight: 800;
 32 |     font-size: 3.6rem;
 33 | }
 34 | 
 35 | h2 {
 36 |     font-weight: 800;
 37 |     font-size: 2.4rem;
 38 | }
 39 | 
 40 | p {
 41 |     font-weight: 400;
 42 |     font-size: 1.8rem;
 43 | }
 44 | 
 45 | img {
 46 |     width: 100%;
 47 |     height: auto;
 48 | }
 49 | 
 50 | .row {
 51 |     display: flex;
 52 |     justify-content: space-between;
 53 |     width: 80%;
 54 |     align-items: center;
 55 |     margin: auto;
 56 | }
 57 | 
 58 | section {
 59 |     padding: 100px 0;
 60 | }
 61 | 
 62 | 
 63 | 
 64 | /* Hero Section */
 65 | header {
 66 |     height: 100vh;
 67 |     background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.6)), url('images/bg.jpg');
 68 |     background-repeat: no-repeat;
 69 |     background-size: cover;
 70 |     background-position: center;
 71 |     color: whitesmoke;
 72 | }
 73 | 
 74 | .logo h1 {
 75 |     font-size: 3.2rem;
 76 |     color: #4CAF50;
 77 |     margin: 0;
 78 | }
 79 | 
 80 | nav {
 81 |     padding: 2% 8%;
 82 |     display: flex;
 83 |     justify-content: space-between;
 84 | }
 85 | 
 86 | nav box-icon {
 87 |     display: none;
 88 | }
 89 | 
 90 | nav ul {
 91 |     list-style-type: none;
 92 | }
 93 | 
 94 | nav ul li {
 95 |     display: inline-block;
 96 |     margin-left: 2.5rem;
 97 | }
 98 | 
 99 | nav ul li a:hover {
100 |     color: #4CAF50;
101 |     transition: .5s ease-in-out;
102 | }
103 | 
104 | .header-content {
105 |     width: 50%;
106 |     position: relative;
107 |     top: 16%;
108 |     left: 8%;
109 | }
110 | 
111 | form {
112 |     margin: 2.4rem 0;
113 | }
114 | 
115 | input {
116 |     font-size: 1.8rem;
117 | }
118 | 
119 | input[type=text],
120 | input[type=email] {
121 |     width: 50%;
122 |     padding: 12px 20px;
123 |     margin: 1.2rem 0;
124 |     display: block;
125 |     border: 1px solid #ccc;
126 | }
127 | 
128 | input[type=submit] {
129 |     width: 50%;
130 |     background-color: #4CAF50;
131 |     color: #fff;
132 |     padding: 14px 20px;
133 |     margin: 8px 0;
134 |     border: none;
135 |     border-radius: 4px;
136 |     cursor: pointer;
137 |     text-transform: uppercase;
138 | }
139 | 
140 | input::placeholder {
141 |     font-size: 1.3rem;
142 |     color: #ccc;
143 | }
144 | 
145 | /* About Section */
146 | .about-left,
147 | .about-middle,
148 | .about-right {
149 |     flex-basis: 30%;
150 |     padding: 1.6rem;
151 | }
152 | 
153 | .btn {
154 | 
155 |     background-color: #4CAF50;
156 |     color: #fff;
157 |     padding: 8px 16px;
158 |     display: inline-block;
159 |     margin: 2rem 0;
160 |     border: none;
161 |     border-radius: 4px;
162 |     cursor: pointer;
163 |     text-transform: uppercase;
164 | }
165 | 
166 | .about2 {
167 |     background-color: #222;
168 |     color: whitesmoke;
169 | }
170 | 
171 | .about2-left {
172 |     flex-basis: 50%;
173 | }
174 | 
175 | .about2-right {
176 |     flex-basis: 30%;
177 | }
178 | 
179 | .about2 .card {
180 |     padding: 3rem 8rem;
181 |     color: #222;
182 |     background-color: #DCDCDC;
183 |     margin: 1.6rem;
184 |     text-align: center;
185 | }
186 | 
187 | /* Process Section */
188 | .process .row {
189 |     justify-content: center;
190 | }
191 | 
192 | .process-content {
193 |     margin-top: 100px;
194 | }
195 | 
196 | .progress-bar {
197 |     width: 80%;
198 |     height: 2px;
199 |     background-color: #222;
200 |     margin: auto;
201 |     position: relative;
202 | }
203 | 
204 | .progress-bar .c1,
205 | .progress-bar .c2,
206 | .progress-bar .c3 {
207 |     height: 20px;
208 |     width: 20px;
209 |     border-radius: 50%;
210 |     background-color: #222;
211 |     position: absolute;
212 | }
213 | 
214 | .progress-bar .c1 {
215 |     top: -8px;
216 |     left: 50px;
217 | }
218 | 
219 | .progress-bar .c2 {
220 |     top: -8px;
221 |     left: 50%;
222 | }
223 | 
224 | .progress-bar .c3 {
225 |     top: -8px;
226 |     right: 50px;
227 | }
228 | 
229 | 
230 | .box1,
231 | .box2,
232 | .box3 {
233 |     padding: 1.8rem;
234 | }
235 | 
236 | .process .box2 {
237 |     text-align: center;
238 | }
239 | 
240 | .process .box3 {
241 |     text-align: right;
242 | }
243 | 
244 | .process-content h2 {
245 |     color: #4CAF50;
246 | }
247 | 
248 | /* Testimony */
249 | .testimony {
250 |     background-color: #222;
251 |     color: whitesmoke;
252 | }
253 | 
254 | .testimony .test {
255 |     background-color: #505050;
256 |     padding: 4rem 8rem;
257 |     margin: 0 1rem;
258 | }
259 | 
260 | .testimony .image {
261 |     height: 80px;
262 |     width: 80px;
263 | }
264 | 
265 | .testimony img {
266 |     height: 100%;
267 |     width: 100%;
268 |     border-radius: 50%;
269 |     object-fit: cover;
270 | }
271 | 
272 | 
273 | /* Contact */
274 | .contact .row {
275 |     justify-content: center;
276 | }
277 | 
278 | .contact form {
279 |     width: 100%;
280 |     display: flex;
281 |     flex-direction: column;
282 |     align-items: center;
283 | }
284 | 
285 | .contact form input {
286 |     width: 50%;
287 | }
288 | 
289 | .contact textarea {
290 |     width: 50%;
291 |     height: 150px;
292 |     padding: 12px 20px;
293 |     border: 1px solid #ccc;
294 |     font-size: 1.3rem;
295 |     resize: none;
296 |     color: #ccc;
297 |     margin: 1.2rem 0;
298 |     font-family: "Poppins", sans-serif;
299 | }
300 | 
301 | /* Footer */
302 | footer {
303 |     height: 80px;
304 |     background-color: #222;
305 |     color: #fff;
306 |     line-height: 80px;
307 |     text-align: center;
308 | }
309 | 
310 | 
311 | 
312 | /* Media Queries */
313 | 
314 | @media only screen and (max-width:768px) {
315 | 
316 |     .row{
317 |         flex-direction: column;
318 |     }
319 |     nav {
320 |         flex-direction: column;
321 |         position: relative;
322 |     }
323 | 
324 |     nav box-icon {
325 |         display: block;
326 |         position: absolute;
327 |         top: 18px;
328 |         right: 32px;
329 |     }
330 | 
331 |     nav ul {
332 |         background: whitesmoke;
333 |         display: none;
334 |     }
335 | 
336 |     .showmenu {
337 |         display: block;
338 |     }
339 | 
340 |     nav ul li {
341 |         display: block;
342 |         padding: 2% 0;
343 |     }
344 | 
345 |     nav ul li a {
346 |         color: #222;
347 |     }
348 | 
349 |     /* header content */
350 |     .header-content{
351 |         width: 100%;
352 |         top:16%;
353 |         left:0;
354 |         text-align: center;
355 |         padding:0 8px;
356 |     }
357 |     input[type=text],
358 |     input[type=email],
359 |     input[type=submit]{
360 |         width: 80%;
361 |         margin:1.2rem auto;
362 |     }
363 | 
364 |     .progress-bar{
365 |         display: none;
366 |     }
367 |     .process-content{
368 |         margin-top: 20px;
369 |     }
370 |     .process .box1,
371 |     .process .box2,
372 |     .process .box3{
373 |         text-align: center;
374 |     }
375 | 
376 |     /* Testimony */
377 |     .testimony .test{
378 |         margin:1.6rem 0;
379 |     }
380 | 
381 |     .contact form input,
382 |     .contact textarea{
383 |         width: 100%;
384 |     }
385 | }


--------------------------------------------------------------------------------
/fintech/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <link rel="stylesheet" href="style.css">
  9 |     <title>Fintech Solutions</title>
 10 | </head>
 11 | 
 12 | <body>
 13 |     <header>
 14 |         <nav>
 15 |             <div class="logo">
 16 |                 <h1>Fintech</h1>
 17 |             </div>
 18 |             <ul>
 19 |                 <li><a href="">Home</a></li>
 20 |                 <li><a href="">About</a></li>
 21 |                 <li><a href="">Process</a></li>
 22 |                 <li><a href="">Testimony</a></li>
 23 |                 <li><a href="">Contact</a></li>
 24 |             </ul>
 25 |             <box-icon name='menu' color="whitesmoke" size="lg" id="menu"></box-icon>
 26 |         </nav>
 27 |         <div class="header-content">
 28 |             <h1>Fintech Provide Solutions To Your Business Needs Whatever They Maybe.</h1>
 29 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur
 30 |                 adipisicing elit. Culpa, autem.Dolores, voluptatibus. Maiores nobis sequi magnam.</p>
 31 |             <form>
 32 |                 <input type="text" placeholder="Enter your Name">
 33 |                 <input type="email" placeholder="Enter your email">
 34 |                 <input type="submit" value="Subscribe">
 35 |             </form>
 36 |         </div>
 37 |     </header>
 38 | 
 39 |     <!-- About -->
 40 |     <section class="about">
 41 |         <div class="row">
 42 |             <div class="about-left">
 43 |                 <h2>Fintech is all about excellence in the world of business</h2>
 44 |                 <img src="images/about.jpg" alt="">
 45 |             </div>
 46 |             <div class="about-middle">
 47 |                 <h2>Our History</h2>
 48 |                 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum officiis quis omnis, cum culpa nisi!
 49 |                 </p>
 50 |                 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum officiis quis omm officiis quis
 51 |                     omnis, cum culpa nisi!</p>
 52 |                 <a href="" class="btn">Read More</a>
 53 |             </div>
 54 |             <div class="about-right">
 55 |                 <h2>Vision & Mission</h2>
 56 |                 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum officiis quis omnis, cum culpa nisi!
 57 |                 </p>
 58 |                 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum officiis quis omm officiis quis
 59 |                     omnis, cum culpa nisi!</p>
 60 |                 <a href="" class="btn">Read More</a>
 61 |             </div>
 62 |         </div>
 63 |     </section>
 64 | 
 65 |     <!-- About 2 -->
 66 |     <section class="about2">
 67 |         <div class="row">
 68 |             <div class="about2-left">
 69 |                 <h2>What we can do for you</h2>
 70 |                 <h1>About Us</h1>
 71 |                 <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque, aliquid?</p>
 72 |                 <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse quisquam, est, saepe molestias aut
 73 |                     deleniti dicta et enim consequatur explicabo at nulla reiciendis corporis culpa minus nam alias, id
 74 |                     repellat dolores quod!</p>
 75 |                 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, odit?</p>
 76 | 
 77 |             </div>
 78 |             <div class="about2-right">
 79 |                 <div class="row">
 80 |                     <div class="card">
 81 |                         <box-icon type="logo" name="apple" color="#4CAF50" size="60px"></box-icon>
 82 |                         <h2>IOS Development</h2>
 83 |                     </div>
 84 |                     <div class="card">
 85 |                         <box-icon type="logo" name="android" color="#4CAF50" size="60px"></box-icon>
 86 |                         <h2>Android Development</h2>
 87 |                     </div>
 88 |                 </div>
 89 |                 <div class="row">
 90 |                     <div class="card">
 91 |                         <box-icon name="data" color="#4CAF50" size="60px"></box-icon>
 92 |                         <h2>Database Management</h2>
 93 |                     </div>
 94 |                     <div class="card">
 95 |                         <box-icon name="line-chart-down" color="#4CAF50" size="60px"></box-icon>
 96 |                         <h2>Data Visualizations</h2>
 97 |                     </div>
 98 |                 </div>
 99 |             </div>
100 |         </div>
101 |     </section>
102 | 
103 |     <!-- process -->
104 |     <section class="process">
105 |         <div class="row">
106 |             <h1>What is our Process</h1>
107 |         </div>
108 |         <div class="row">
109 |             <div class="process-content">
110 |                 <div class="progress-bar">
111 |                     <div class="c1"></div>
112 |                     <div class="c2"></div>
113 |                     <div class="c3"></div>
114 |                 </div>
115 |                 <div class="row">
116 |                     <div class="box1">
117 |                         <h2>One</h2>
118 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, iure saepe. Ducimus quae tempore enim alias, esse rem assumenda impedit!</p>
119 |                     </div>
120 |                     <div class="box2">
121 |                         <h2>Two</h2>
122 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, iure saepe. Ducimus quae tempore enim alias, esse rem assumenda impedit!</p>
123 |                     </div>
124 |                     <div class="box3">
125 |                         <h2>Three</h2>
126 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, iure saepe. Ducimus quae tempore enim alias, esse rem assumenda impedit!</p>
127 |                     </div>
128 |                 </div>
129 |             </div>
130 |         </div>
131 |     </section>
132 | 
133 |     <!-- Testimony -->
134 | 
135 |     <section class="testimony">
136 |         <div class="row">
137 |             <div class="test">
138 |                 <div class="image">
139 |                     <img src="images/g1.jpg" alt="">
140 |                 </div>
141 |                 <div class="test-content">
142 |                     <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus sint error aperiam maiores nisi cupiditate, ullam quo qui necessitatibus odio!</p>
143 |                     <h2>Jane Doe</h2>
144 |                     <div class="icons">
145 |                         <box-icon name='star' type='solid' color='whitesmoke'></box-icon>
146 |                         <box-icon name='star' type='solid' color='whitesmoke'></box-icon>
147 |                         <box-icon name='star' type='solid' color='whitesmoke'></box-icon>
148 |                         <box-icon name='star' type='solid' color='whitesmoke'></box-icon>
149 |                         <box-icon name='star-half' type='solid' color='whitesmoke'></box-icon>
150 |                     </div>
151 |                 </div>
152 |             </div>
153 | 
154 |             <div class="test">
155 |                 <div class="image">
156 |                     <img src="images/g2.jpg" alt="">
157 |                 </div>
158 |                 <div class="test-content">
159 |                     <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus sint error aperiam maiores nisi cupiditate, ullam quo qui necessitatibus odio!</p>
160 |                     <h2>Lora Smith</h2>
161 |                     <div class="icons">
162 |                         <box-icon name='star' type='solid' color='whitesmoke'></box-icon>
163 |                         <box-icon name='star' type='solid' color='whitesmoke'></box-icon>
164 |                         <box-icon name='star' type='solid' color='whitesmoke'></box-icon>
165 |                         <box-icon name='star' type='solid' color='whitesmoke'></box-icon>
166 |                         <box-icon name='star-half' type='solid' color='whitesmoke'></box-icon>
167 |                     </div>
168 |                 </div>
169 |             </div>
170 |         </div>
171 |     </section>
172 | 
173 |     <!-- Contact -->
174 | 
175 |     <section class="contact">
176 |         <div class="row">
177 |             <h1>Contact Us</h1>
178 |         </div>
179 |         <div class="row">
180 |             <form>
181 |                 <input type="text" placeholder="Enter your name">
182 |                 <input type="email" placeholder="Enter your email">
183 |                 <textarea>Enter your message</textarea>
184 |                 <input type="submit" value="Send">
185 |             </form>
186 |         </div>
187 |     </section>
188 | 
189 |     <!-- Footer -->
190 |     <footer>
191 |         <p>Made with <box-icon name='heart' type='solid' color='whitesmoke'></box-icon>by Dev Gupta for my Dear Students</p>
192 |     </footer>
193 | 
194 |     <script src="https://unpkg.com/boxicons@latest/dist/boxicons.js"></script>
195 |     <script src="app.js"></script>
196 | </body>
197 | 
198 | </html>


--------------------------------------------------------------------------------