-
Question 1: Build a Simple Web Page Layout
Task:
Create a simple webpage using HTML and CSS that includes the following elements:- A header with the title of the page centered.
- A navigation bar with three links: Home, About, and Contact.
- A main content section with a paragraph and an image.
- A footer with the text "© 2024 Your Name."
Requirements:The header should have a background color of #333 and white text. The navigation links should be displayed horizontally and centered in the navbar. The main section should have some padding and the image should be aligned to the left of the paragraph. The footer should be fixed at the bottom of the page and have a light gray background color. -
Question 2: Create a Responsive Grid Layout
Task:
Using CSS Grid Layout, create a responsive grid layout for a gallery of 6 images. The layout should:- Display the images in two columns on screens larger than 600px.
- Stack the images in one column on screens smaller than 600px.
- Ensure the images have equal spacing between them.
Requirements:Use grid-template-columns for the layout. Add a border around each image. Ensure that the images are responsive and adjust to different screen sizes. -
Question 3: Design a Form with Validation
Task:
Create a simple registration form using HTML and CSS. The form should include:- Input fields for the user's name, email, and password.
- A submit button.
- Basic form validation using HTML attributes.
Requirements:The email input should validate that the input is in email format. The password input should have a minimum length of 8 characters. Style the form so that: All input fields are aligned vertically. The form has a light gray background with padding. The submit button is centered and changes color when hovered. -
Question 4: Styling with Flexbox
Task:
Create a flexbox-based layout with three sections: a header, a main content area, and a sidebar. The layout should:- Have the main content take up 70% of the width.
- Have the sidebar take up 30% of the width.
- Both the content and sidebar should be placed next to each other horizontally.
Requirements:Use Flexbox to achieve the layout. On smaller screens (less than 768px), the sidebar should stack below the main content. Style the sections with different background colors and some padding for clarity. -
Question 5: Create a CSS Button Animation
Task:
Design a button using HTML and CSS with the following properties:- The button should change color when hovered over.
- The button should have a smooth transition effect that makes it "grow" slightly when hovered.
- When clicked, the button should briefly show a "pressed" state where it looks slightly indented.
Requirements:Use :hover and :active pseudo-classes for the animation. The button should have rounded corners and a shadow effect.
Section -B (50%) marks
Select two (2) qquestions out the five (5) presented and answer them accordingly.
Each Question carries equal marks