OASIS INFOBYTE PROJECT ON WEB DEVELOPMENT AND DESIGNING

Created by- Swastik Bhattacharya

Hi there, I am Swastik Bhattacharya, a beginner in web development in this vast world of technology. I have created this project for my internship task given by Oasis Infobyte using the basic skills of HTML, CSS and JavaScript to do the project on Web Development and Designing. I am really thankful to them for giving me this wonderful opportunity.

LEVEL - 1:

TASKS:

TASK- 1: LANDING PAGE

1. Navigation Bar (Header):

• A responsive navigation bar with links to different sections of the page (About, Services, Contact).
• Hover effects on navigation links, including background color change and scale animation.

2. Hero Section:

• Introduction section with a welcoming message and a call-to-action button (Get Started).
• The background of this section has an animated gradient effect using CSS animations.
• The call-to-action button has a pulsating animation to draw attention.

3. About Section:

• Information about me, introducing myself as a beginner in web development.
• Description of his passion for creativity and learning in the field.
• Stylish text animations on hover for added interactivity (color change and scale up effect).

4. Services Section:

• Lists the services offered by me as an example, including Web Design, Graphic Design, and Digital Marketing.
• Each service is listed in a simple bulleted format for easy reading.

5. Footer Section:

• Contains a copyright notice with my name and the year.
• The footer has a sliding animation for a subtle entrance effect.

6. CSS Styling:

• The overall design is clean and modern, with a light gray background and contrasting text colors for readability.
• Various CSS animations are used throughout the page for a dynamic and engaging user experience, including fade-ins, hover effects, and pulsating buttons.
• The background of the page has a continuous animation that creates a moving gradient effect.

7. Responsive Design:

• The page is designed to be responsive, adapting to different screen sizes and devices.
• The navigation bar collapses into a burger menu on smaller screens for better usability.

8. Color Scheme:

• The color scheme includes shades of orange, blue, brownish-orange, pinkish-red, and dark gray, creating a visually appealing and harmonious design.
• Color transitions and hover effects add depth and interaction to the elements.

TASK- 2: PORTFOLIO

1. Header Section:

• Includes my name as the main title.
• Contains a navigation bar with links to different sections of the page (About, Projects, Contact).

2. Social Links:

• A section with clickable icons linking to my social media profiles, including LinkedIn, YouTube, Instagram, Facebook, GitHub, WhatsApp, X (previously Twitter), and Discord.
• Each icon is linked to a specific social media platform and opens in a new tab.

3. About Section:

• Provides a brief introduction of myself, highlighting my passion for web development and continuous learning.
• Describes my journey in web development, mentioning HTML and CSS as foundational languages.
• Expresses eagerness to collaborate on projects and make meaningful contributions.

4. Projects Section:

• Mentions my projects and directs visitors to my GitHub account for detailed project information.
• The text includes a hyperlink to my GitHub account.

5. Contact Section:

• Provides my email address for contacting me directly.

6. Footer:

• Displays a copyright notice with my name and the current year.

7. CSS Styles:

• Sets the overall font family to Arial or sans-serif for consistency.
• Defines a light gray background color for the entire page (body).
• Adds a background image with cover size and centered position.
• Implements smooth transitions for background color changes and header elements.
• Uses a dark background color for the header with white text color and padding.
• Applies a box shadow for a subtle depth effect on the header.
• Styles navigation links with white color, hover effects, and vertical translation on hover.
• Adds padding and a scale transformation with smooth transitions to sections for a polished appearance.
• Aligns social media icons to the center and applies transformations and opacity changes on hover.
• Centers section titles, adds border-bottom for emphasis, and applies a fade-in animation for visual effect.
• Applies box shadow and a subtle hover effect to project items for a raised appearance on hover.
• Centers text, applies a dark background color, and adds padding to the footer.

8. Key Features:

• Responsive Design: The page layout and styles adjust seamlessly for different screen sizes.
• Interactive Navigation: Navigation links and social media icons have hover effects for improved interactivity.
• Clear Information Presentation: Sections like About, Projects, and Contact present relevant information clearly.
• Visual Enhancements: Smooth transitions, animations, and hover effects enhance the page's visual appeal and user experience.

TASK- 3: TEMPERATURE CONVERTER WEBSITE

1. Temperature Input Fields:

• Separate input fields are provided for Celsius, Fahrenheit, and Kelvin temperatures.
• Each input field has a corresponding label indicating the unit of measurement.
• Placeholder text guides the user on what type of input is expected in each field.

2. Conversion Functionality:

• The "Convert" button triggers a JavaScript function to perform temperature conversions.
• The conversion logic is implemented to handle input from any of the three temperature units.
• When the button is clicked, the entered temperature values are converted and displayed in the other two units simultaneously.

3. Responsive Design:

• The page layout is responsive, ensuring that it looks good and functions properly across different devices and screen sizes.
• Flexbox is used to center the content vertically and horizontally, maintaining a consistent appearance.

4. Visual Feedback:

• Hover effects are applied to the "Convert" button to provide visual feedback to the user.
• The button changes its background color, size, and text color when hovered over, enhancing interactivity.

5. Styling:

• The page's visual design includes a gradient background color scheme for a modern look.
• Input fields have a semi-transparent background, rounded corners, and padding for improved readability and aesthetics.
• The overall color scheme, including text colors and button styles, is designed for a pleasing user experience.

6. Animation:

• An animation effect is applied to the "Convert" button, causing it to pulse or scale slightly to draw attention.
• Another animation effect is triggered when hovering over the container, creating a dynamic background color transition.

7. Error Handling:

• The JavaScript function includes logic to handle invalid inputs.
• If the user enters an invalid temperature value or leaves the input fields blank, an alert message prompts them to enter a valid value.

THANK YOU !