BookmyShow_stream

Hosted Link: https://mayankkatheriya.github.io/BookMyShow-Clone/

Team BookMyShow -Roles and Responsibility

1) Mansi Sorathiya -> HomePage + Header Section + Buzz Section
2) Mayank Gupta -> Stream Section + Login Page + Activity Section
3) Ayush Bansal -> Events Section + Sports Section
4) Rupesh Mandal -> Movies Section + Plays Section
5) Dibya Shakti Panda -> Icc Cricket world cup Section+ Footer

---

Mansi Sorathiya - Home Page + Header

UI Part

Description

*HTML TAG*
main: represents the main content of a web page, typically containing the unique and primary content of the page.
header: defines a container for introductory or navigational content at the top of a web page or section, often including elements like logos and navigation menus.
section: defines a thematic grouping of content within a web page, allowing you to structure related content together, such as articles, blog posts, or distinct sections of a page.

Here I use OWL Carousel : OWL Carousel is a popular and responsive jQuery carousel/slider plugin that allows you to create customizable and interactive carousels or sliders for displaying content like images, videos, or any other HTML elements on your website. It's named "OWL" because it was inspired by the behavior of an owl rotating its head to look around.

CSS Properties
CSS Grid:
CSS Grid is a two-dimensional layout system in CSS that enables the creation of complex grid-based layouts with rows and columns. It's used to structure content in a grid format and allows for precise control over the placement and alignment of items within the grid.

Flexbox (Flexible Box Layout):
Flexbox is a one-dimensional layout system in CSS designed for aligning and distributing items within a container along a single axis (either horizontally or vertically). It simplifies the arrangement of content in a linear fashion and is particularly useful for building responsive and evenly spaced layouts.

MediaQuery:
A media query in CSS is a conditional statement that allows you to apply specific styles to HTML elements based on the characteristics of the user's device, such as screen width, height, device type, or orientation. It enables the creation of responsive web designs by tailoring the presentation of content to different viewing conditions, ensuring a better user experience across various devices and screen sizes.

Hover Effect:
A hover effect is a visual change or animation applied to an element (typically a link or a button) when a user hovers their cursor over it. This effect provides feedback to the user, indicating that the element is interactive. Common hover effects include color changes, underlines, and animations, enhancing the interactivity and user experience of a website or application.

---

Mayank Gupta

Task:- 1 Stream Page

Stream UI

Web Page Summary

Description

-This web page is designed using HTML and CSS, with a focus on semantic HTML5 tags for optimal accessibility and structure. It incorporates various features and techniques to enhance user experience and interactivity.

Key Features

1. Semantic Tags: -Utilizes semantic HTML tags such as header, main, footer, and multiple section (Approx 30 sections) elements for improved code readability and accessibility.

2. Owl Carousel Library: -Integrates the Owl Carousel library to create dynamic and responsive image carousels for showcasing content.

3. Anchor Tags: -Implements anchor tags to enable smooth navigation between different sections of the same page and to external pages.

4. Horizontal Scrolling: -Utilizes the overflow-x property to enable horizontal scrolling, allowing users to view content beyond the viewport.

5. Scrollbar Customization: -Hides the scrollbar using the webkit-scrollbar CSS property for a cleaner and more visually appealing design.

6. Responsive Design: -Ensures the web page's layout and content adapt seamlessly to various screen sizes and devices, enhancing user experience.

7. CSS Grid Layout: -Utilizes CSS Grid for structuring and arranging content within sections, offering precise control over the layout and alignment.

Task:- 2 Login Page

Login UI

Login Page Summary

Description

-The login page is an integral part of the website, providing users with secure access to their accounts. It is designed with a focus on usability and security, using HTML and CSS for a seamless and visually appealing login experience.

Key Features

User-Friendly Interface:

-Offers an intuitive and user-friendly login form, making it easy for users to input their credentials.

Validation:

-Implements client-side validation to ensure that users provide the required information and adhere to specified input formats.

Responsive Design:

-The login page is fully responsive, ensuring that it functions flawlessly on various devices and screen sizes.

Secure Authentication:

-Utilizes best practices for handling user authentication, keeping user data secure during the login process.

Password Recovery:

-Includes an option for users to reset their passwords in case they forget them, enhancing account recovery options.

Stylish Design:

-The login page features an attractive design with a background image and animation, creating a visually appealing login experience.

---

Ayush bansal

Task assig :- 1 Event page :- 2 Sports page

Event UI

Sports UI

Explaining Enent and Sport UI

**{

1. Container Styles:

   • .container styles set a maximum width, margin, and flex display for containers. It creates a layout with a maximum width of 1230px and horizontal spacing between elements.

2. Header Styles:

   • header styles add a margin at the bottom of the header element.

3. Aside and Main Styles:

   • aside styles define the width for an aside element (25% of the parent container).
   • main styles define the width for the main content area (74% of the parent container).

4. Button Styles:

   • .buttons button styles define the appearance of buttons. They have specific styles like color, background color, border-radius, and padding.
   • 5. Gallery Styles:
   • .gallery styles format a grid layout for a gallery section with specified column and row gaps.

5. Box Styles:

   • .box1 styles define the appearance of boxes within the gallery section, including cursor style, image width, and text styles.

6. Full Styles:

   • .full and related styles format a full-width content section with specified text and background colors.

7. Container2 Styles:

   • .cont2 and .container2 styles provide styling for a specific container element.

8. Text Styles:

   • Styles like .cont2 h4, .cont2 p, and .ps1 define font styles, sizes, and colors for text elements.

9. Filter Styles:

   • Styles like .main_containerr, .containerr, and .bbutton create a filterable content section with expandable containers.

10. Button Group Styles:

    • .bbuttons, .bbuttons2, and .bbuttons4 styles format groups of buttons with specific layouts.

11. Browse Button Styles:

    • .browse styles format a browse button with specific colors and dimensions.

In this CSS code, there are several media queries that apply different styles based on the screen width:

1. Mobile and Small Screens (320px to 768px):

   • Elements like .nav_1, .nav_2, and footer are hidden.
   • A fixed navigation bar with the class .navbar_event is introduced at the top of the screen.
   • Various elements within .event_nav and .event_nav2 are styled differently.
   • Header margin is adjusted for spacing.
   • Some elements within aside and main h2 are hidden.
   • Special styling is applied to buttons and containers for this screen size.

2. Medium Screens (769px to 1022px):

   • Similar to the mobile/small screen styles but with some adjustments.
   • The header's margin is reduced.
   • Elements within .event_nav2 are adjusted.
   • A pair of buttons (left and right) are introduced and styled.

3. Large Screens (1022px and above):

   • Elements like .navbar_event and .two_buttons are hidden.
   • Styles for larger screens, including adjustments to .nav_1, .nav_2, and .container.
   • .gallery layout is adjusted for larger screens.
   • Adjustments to .container2, .cont2, and other elements.

These media queries help in creating responsive design for different screen sizes, ensuring that the layout and styling adapt appropriately to provide the best user experience.

}

---

Rupesh Mandal - MOVIES + PLAYS

Movies UI

Plays UI

Description

1. We have used semantic tags such as header, footer, main, article.
   
2. Main- First of all i created this main container inside body and after that divided it into three parts navbar, section and article.
   
3. Section- I have divided section part into two parts section 1 and section 2
   
4. Hover- I have applied HOVER property on divs that are below filter to make it as similar as possible and for better representation.
   
5. Grid- I have applied grid on section 2 div card where all the images are stored ,to give them a proper styling.
   
6. Flexbox- I have also used flex on various divs to make the UI as similar as possible.
   
7. Anchor Tags- I have also used anchor tags to give path to various words and buttons.
8. Scroll- I have also used scroll in navbar images to make them similar to the original UI.

Media Query

In this UI i have also used media query to make it as responsive as possible.
I have taken 3 break points one for mobile screen , second for tablet screen and third for laptop screens.

---

Dibya Shakti Panda - ICC MEN WORLD CUP + Footer

UI Part

Description

For ICC MEN I have taken two sections the first section contain the all image of the pages. The second section contain the path of the page.The third section contain the despription. And finally the third section is the footer part. I also tried to make it responsive as possible. In the first section I make it display as flex and change the flex direction to column. In side it some img tag and h tag are used. The Flag part and State part is made of grid property. The are divide in 3-columns and 4-rows. By grid-templetes-rows/columns properties. The footer part is contain of svg tag and many of a tag to complete with some hover property when hover change its color to white. At last I have taken some Icon from Aswomefonts and also given some hover property. To make it responsive i use 3-4 break point with apply @media only screen and (-----) properties.