Added HTML to services page and added effect to book slot icon

[Dimple-01]

Solved issue #342

Added HTML to services page and added effect to book slot icon

Description

I made a valuable contribution to the Services page and book slot icon of the project. As a part of this initiative, I forked the repository and focused on improving the HTML structure and CSS styling of the page.

Work

For the Services page, I added HTML code to make it coherent with other pages. By carefully analyzing the existing content and layout, I ensured that the HTML markup aligned with best practices, accessibility guidelines, and the project's coding conventions. I structured the content using semantic HTML tags, making it more readable, meaningful, and search engine friendly.

In addition to the HTML enhancements, I also dedicated efforts to improve the visual aspects of the book slot icon by adding CSS to it. I leveraged CSS styling techniques to modify the appearance of the icon and make it more visually appealing and intuitive for users. This involved customizing the icon's color, size, and positioning to create a consistent and coherent design with the rest of the page.

Furthermore, I made sure to consider responsive design principles while implementing the CSS changes. I ensured that the Services page remained visually appealing and functional across different screen sizes and devices.

Type of change

• [ ] Bug fix
• [✅] New feature
• [ ] Breaking change
• [ ] Documentation update
• [ ] Other (please describe)

Some of the key changes I made include:

Typography: I refined the typography by selecting appropriate fonts, sizes, and line heights to improve readability and create a consistent visual hierarchy.

Color Scheme: I revamped the color scheme of the page to align it with the branding and create a visually pleasing experience. I used a combination of complementary colors to enhance the overall aesthetics.

Layout and Spacing: I adjusted the layout and spacing of elements to ensure a balanced and harmonious arrangement. This involved tweaking borders, border-radius, and box-shadow to create a more organized and visually appealing structure.

Responsive Design: I implemented responsive CSS techniques to ensure that the Slot book icon looks and functions well on different devices and screen sizes. This involved utilizing media queries and optimizing the layout for mobile, tablet, and desktop views.

By incorporating these HTML and CSS changes, I aimed to provide a more polished and professional look to the pages, enhancing the overall user experience. I tested the changes extensively across multiple browsers and devices to ensure compatibility and responsiveness.

Checklist

• [ ✅] My code follows the code style of this project.
• [ ✅] My change requires a change to the documentation.
• [ ✅] I have updated the documentation accordingly.
• [ ✅] I have added tests to cover my changes.
• [✅ ] All new and existing tests passed.

Screenshots

Current behavior

More changes

Current behavior

Thankyou for giving this opportunity.

[Dimple-01]

Please check this work. I have tried to make it better.

[Dimple-01]

Please go through this as I have completed this work.

[Dimple-01]

@rolikaagarwal please see my work.