Task 1 - Landing Page
Features Used:-
◼️HTML
◼️CSS
A landing page is crucial for any online service as it serves as the first impression for potential customers, providing them with essential information and encouraging them to engage with the service further.
I created a landing page as part of my internship project. The landing page is designed for a wheel repair service, and I used HTML and CSS to build it.
In the landing page, visitors can likely find information about the wheel repair services offered, along with details about the company providing the service. The use of HTML indicates the structuring of the content, such as headings, paragraphs, and images, while CSS would be used for styling and layout, ensuring the page looks visually appealing and user-friendly.
![Preview 1 Landing Page](https://private-user-images.githubusercontent.com/112323639/278006452-41a9ce94-7c5a-4db4-a8eb-b5d4af2d30de.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU1NjU2NTIsIm5iZiI6MTcyNTU2NTM1MiwicGF0aCI6Ii8xMTIzMjM2MzkvMjc4MDA2NDUyLTQxYTljZTk0LTdjNWEtNGRiNC1hOGViLWI1ZDRhZjJkMzBkZS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTA1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwNVQxOTQyMzJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1jNmMxZWIxYzA1ZTFlYzY0ODQ0NTFiY2MwZDQ4MmNhM2Q0OGZmZTRjOWQyYjQ3YWFlYjgwZmJhZGQ1ZGVkM2RkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.tFmpGjRYeeMJiCucj4f_ZdJ_xMK-fK-XSXoqzqJMwEs)
![Preview 2 Landing Page](https://private-user-images.githubusercontent.com/112323639/278003879-c459262d-8c78-489f-9163-d46e891970f9.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU1NjU2NTIsIm5iZiI6MTcyNTU2NTM1MiwicGF0aCI6Ii8xMTIzMjM2MzkvMjc4MDAzODc5LWM0NTkyNjJkLThjNzgtNDg5Zi05MTYzLWQ0NmU4OTE5NzBmOS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTA1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwNVQxOTQyMzJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT05YTMxYmZhYTJjYTZjMWIwN2I4OTZjNmM1MzIwYjIyNmQzM2U0NGM5NWJkMTk0MTE1MGNkMDBhOTc2YjZiZWRmJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.D3F-7_cLuCss6aX2uK-tKA9_K3OnyMJ3TknFW276Vyw)
![Preview 3 Landing Page](https://private-user-images.githubusercontent.com/112323639/278003972-5163f959-8ed8-4c67-a8ab-186056173986.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU1NjU2NTIsIm5iZiI6MTcyNTU2NTM1MiwicGF0aCI6Ii8xMTIzMjM2MzkvMjc4MDAzOTcyLTUxNjNmOTU5LThlZDgtNGM2Ny1hOGFiLTE4NjA1NjE3Mzk4Ni5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTA1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwNVQxOTQyMzJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1mNDI1MjRhYmIwZWMxMWRlOTliMWZkOTY3MGU0NGNkY2M4M2IwOTQzZTFiZDk4N2YzOTI2YzkwZGQ1NjM2MmFkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.RfyS25CjXlxiL1jCOGs6RIgtI4uIuX5UXIs2-kEtGf4)
Task 2 - Portfolio Page
Features Used:-
◼️HTML
◼️CSS
◼️JS
A portfolio page created using HTML, CSS, and JavaScript is a dynamic and visually appealing web page that showcases your skills, projects, and experiences. HTML (HyperText Markup Language) is used to structure the content, CSS (Cascading Style Sheets) is employed for styling and layout, and JavaScript adds interactivity and enhances user experience.
Your portfolio page serves as a digital resume, allowing visitors to learn about your work, expertise, and achievements. Through carefully designed user interfaces, animations, and interactive elements powered by JavaScript, your portfolio becomes engaging and informative. This combination of technologies enables you to present your work in a professional manner, making it easier for potential employers or clients to understand your capabilities and make informed decisions.
![Preview 1 Portfolio](https://private-user-images.githubusercontent.com/112323639/278004505-1f8effa2-89ff-4694-9ac1-046760d9c9b4.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU1NjU2NTIsIm5iZiI6MTcyNTU2NTM1MiwicGF0aCI6Ii8xMTIzMjM2MzkvMjc4MDA0NTA1LTFmOGVmZmEyLTg5ZmYtNDY5NC05YWMxLTA0Njc2MGQ5YzliNC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTA1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwNVQxOTQyMzJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT00ZDEwNzRjMzIzNGViZDA3YThhZmM4YzYyNGRmNjI2M2Q1NDliMzQ1NWNiY2ZhNzM2ODk1YTM2NmYzZDg0Mjk0JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.clapQlZbLckOKwi2Gpz4xpnZ6333vULXfrlRMJadce8)
![Preview 2 Portfolio](https://private-user-images.githubusercontent.com/112323639/278004687-8e119f57-9fa2-472e-8818-32a5eb90893c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU1NjU2NTIsIm5iZiI6MTcyNTU2NTM1MiwicGF0aCI6Ii8xMTIzMjM2MzkvMjc4MDA0Njg3LThlMTE5ZjU3LTlmYTItNDcyZS04ODE4LTMyYTVlYjkwODkzYy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTA1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwNVQxOTQyMzJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0zYTNkNjJhZmJkZDdjM2Y1MmNlMTc4NWFhMTBiZDUzMDdjNmMxZDkzYjUzMTgwZmNhOGU2ODViYmJmZGRmYzJhJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.q2m_wHDbq3lrZjIh1l8XZ_5_RKhJgcMkvXKZfBeV0hY)
![Preview 3 Portfolio](https://private-user-images.githubusercontent.com/112323639/278004841-5ff635fe-781a-4286-b1ee-3589fbd3f549.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU1NjU2NTIsIm5iZiI6MTcyNTU2NTM1MiwicGF0aCI6Ii8xMTIzMjM2MzkvMjc4MDA0ODQxLTVmZjYzNWZlLTc4MWEtNDI4Ni1iMWVlLTM1ODlmYmQzZjU0OS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTA1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwNVQxOTQyMzJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1iODQ3YzUyYmY4MmIzNzZlMzBlYjU5ZmI4NmYwOTgyYTQzZDZlYjczMDRiNWViMGQyMjQ1NjU1NjU0NTgxYjJhJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9._sVLdDQi6DOpu8YjkVK46d_2alw6HAIzWvijr0AglVg)
![Preview 4 Portfolio](https://private-user-images.githubusercontent.com/112323639/278004956-a1cbee17-608e-4a89-b07f-1f665246e074.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU1NjU2NTIsIm5iZiI6MTcyNTU2NTM1MiwicGF0aCI6Ii8xMTIzMjM2MzkvMjc4MDA0OTU2LWExY2JlZTE3LTYwOGUtNGE4OS1iMDdmLTFmNjY1MjQ2ZTA3NC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTA1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwNVQxOTQyMzJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT04YzE3ZDI0ZjZlNTNlOGZmMjQxNjRiMzI5M2QyYzk5ZWE2MzFlOGM0ODc0YjBhMTgzZjM1M2VhNzY4Y2VjNDJjJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.0qE-UIlRLuJ5LBqZhVc9ZiDtqwTL59i3A8SctX4UFGg)
![Preview 5 Portfolio](https://private-user-images.githubusercontent.com/112323639/278005121-eb59f6c6-ebcc-4bc7-8a0e-c1b68d81a2e1.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU1NjU2NTIsIm5iZiI6MTcyNTU2NTM1MiwicGF0aCI6Ii8xMTIzMjM2MzkvMjc4MDA1MTIxLWViNTlmNmM2LWViY2MtNGJjNy04YTBlLWMxYjY4ZDgxYTJlMS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTA1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwNVQxOTQyMzJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1jNTY1ZjI2NDAzYWM1MTAyMzViMjM0OTAxYTk3MzM3YzQxN2Y1Y2ZjYzg2M2JlMWM2N2ZhN2E1ODVlMzZkZmZhJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.dNMPB8_tXEOdmQfZ0AHPdPJtklqeaO8AssIRFbpkejw)
Task 3 - Calculator Using JS
Features Used:-
◼️HTML
◼️CSS
◼️JS
A calculator created using HTML, CSS, and JavaScript is a functional and interactive web application that performs mathematical calculations in real-time. HTML provides the structure for the calculator's layout, CSS styles the visual elements to make it user-friendly and visually appealing, and JavaScript handles the logic for performing arithmetic operations.
This calculator allows users to input numbers and operators through a graphical interface, mimicking the functionality of a physical calculator. When users click on the buttons or use the keyboard, the JavaScript code processes the input and displays the results dynamically on the calculator screen. It can handle basic arithmetic operations such as addition, subtraction, multiplication, and division, providing a convenient tool for users to perform calculations without the need for a physical calculator. The combination of HTML, CSS, and JavaScript creates a seamless and intuitive user experience, making mathematical computations quick and easy.
![Preview Calculator](https://private-user-images.githubusercontent.com/112323639/281014105-5afcaafc-1f1d-4585-ac58-79eefcadeba5.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU1NjU2NTIsIm5iZiI6MTcyNTU2NTM1MiwicGF0aCI6Ii8xMTIzMjM2MzkvMjgxMDE0MTA1LTVhZmNhYWZjLTFmMWQtNDU4NS1hYzU4LTc5ZWVmY2FkZWJhNS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTA1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwNVQxOTQyMzJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0zYmNjZWExMWRjNDdhMWMzZTNlNzI4MDIwYTUwOGYwMDViNjlmNDhhZTYzNGIwMTMwMTFmZTM0MjY3MzQzZTg3JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.XWOHNbCnbxNQIyKzFJu2quEum1i_7L3FtAAORB2ek6Q)