TASK 1A
(i) Create a Responsive Landing Page: The provided HTML document is designed to present a comprehensive and visually appealing website for "Rajiv Gandhi University Of Knowledge Technologies, Ongole." The webpage leverages Bootstrap for responsive design and includes several sections detailed below:
Webpage Structure and Content: Header and Navigation Bar: Utilizes a dark-themed navbar that is responsive and includes links to various pages like Home, About Institute, Administration, Academics, Nexus, Careers, Notifications, Grievance, RTI, Consultancy, and Information. This allows easy navigation across the site.
Hero Section: Features a large, eye-catching hero image of a college campus, set against a soft green background to highlight the main title and subtitle, which promote the college’s mission of serving gifted rural youth. A "Learn More" button is prominently displayed, inviting further engagement.
About Section: This section provides a detailed description of the college, emphasizing its commitment to integrating teaching and research, and the unique offerings of a six-year integrated B.Tech program. It pairs this description with a relevant image to visually support the text.
Programs Section: Showcases three main educational programs offered by the college: Science and Technology, Business Administration, and Arts and Humanities. Each program is represented in a card format with a specific image, brief description, and an "Explore" button, encouraging users to learn more.
Footer: Contains copyright information and maintains a simple, clean look with a dark background and white text, ensuring readability and a professional appearance.
Styling and Visual Design: The webpage uses a soft color palette with a mix of greens and blues that convey a calm and educational environment. The use of Bootstrap ensures that the layout is responsive, meaning it adapits to various screen sizes from desktops to mobile devices. Custom CSS is utilized for typography, spacing, and specific component styling (e.g., buttons and images), ensuring a cohesive and branded look.
Functionality: The site is enhanced with Bootstrap's JavaScript bundle, enabling interactive components like the collapsible navbar. The responsive design ensures that all parts of the website are accessible and visually appealing on different devices and resolutions. Overall, the webpage serves as a welcoming and informative platform for prospective students, educators, and visitors to learn about Rajiv Gandhi University Of Knowledge Technologies, Ongole, its programs, and its values. The structured layout and intuitive navigation facilitate a user-friendly experience while maintaining a focus on educational excellence.
(ii) Build a Pricing Table:
The webpage described is designed as a visually engaging and informative pricing page for a college's subscription plans, built with HTML and styled using CSS and Bootstrap frameworks. The page features a list of different pricing plans tailored for various user needs, displayed in an organized table format. Here’s a detailed breakdown of the webpage's components and design elements:
Structure and Content:
Background: The webpage uses a high-resolution image of a college campus as a full-screen background. The image is fixed and spans the entire view, creating a dynamic and immersive visual experience.
Content Container: A semi-transparent white container holds the content, providing a contrast that ensures the text and table are legible against the busy background. This container has rounded corners and a subtle shadow, contributing to a modern, clean aesthetic.
Title: Positioned centrally at the top of the container, the title "College Pricing Plans" is styled in a bold color that matches the table headers, creating a cohesive color scheme.
Pricing Table: The table is responsive and designed to be user-friendly, featuring hover effects for better interactivity. It lists various subscription plans such as Basic, Standard, Premium, and more, each with associated costs and a brief description of the benefits. This format allows users to easily compare options. The table headers are colored in a semi-transparent tomato red, providing a striking contrast against the white text. Each row highlights upon hovering, improving readability and focus on the selected plan.
Styling Details: Table cells have slightly transparent white backgrounds with colored borders, enhancing readability while maintaining the airy, open feel of the design. The hover effect on table rows uses a lighter blue shade, adding to the interactive nature of the table.
Technical Implementation:
Bootstrap 4.5.2: Utilized for responsive design elements and interactive components such as the hover effects in the table.
Custom CSS: Enhances background, typography, and table aesthetics, tailoring the site’s visual appeal and user experience.
Functionality:
JavaScript and jQuery: Included via external scripts to support Bootstrap functionalities such as the responsive design and interactive components. This webpage serves as a central platform where students and other users can easily access and evaluate various subscription-based educational offerings. The design prioritizes clarity and ease of navigation while using aesthetic elements that align with the educational context. The use of fixed background imagery, combined with interactive table elements and a clear, attractive layout, makes the webpage both functional and appealing.
TASK 1B
(i) Design a Photo Gallery:
The HTML document provided is designed as a web-based photo gallery titled "College Memories Gallery," featuring images that capture various moments and aspects of college life. The webpage is structured using Bootstrap 5 for responsive design, making it adaptable across different devices and screen sizes. Below is an in-depth description of the webpage's key components and functionalities:
Visual Design and Styling:
Background and Text: The body of the webpage has a soft green background, which provides a calming visual contrast to the white text used for titles and other elements. This choice enhances readability and focus on the content.
Gallery Layout: Images are displayed within a grid layout, creating a clean and organized presentation. Each image is housed in a white, slightly rounded container with a hover effect that changes the background to light gray, highlighting the image on mouseover.
Image Styling: The images have a fixed height with width adjusted to maintain the aspect ratio, ensuring that all images appear uniform regardless of their original size. A subtle zoom effect and shadow are applied when hovering over an image, adding a dynamic feel to the interaction.
Interactivity and Functional Elements:
Modal Popup: Clicking on an image triggers a modal popup, displaying the image in full size. This feature allows users to view details of each photo without leaving the page. The modal has a customized dark blue background, which serves to focus the viewer's attention on the image.
JavaScript Functionality: JavaScript is used to dynamically populate the gallery grid with images and handle the click event that triggers the modal. The script iterates over an array of image URLs, creating HTML content for each and appending it to the gallery container. Responsive Navigation: The use of Bootstrap's responsive features ensures that the gallery adjusts gracefully across different devices, providing an optimal viewing experience whether on a desktop, tablet, or mobile phone.
HTML Structure:
Container: The main container class from Bootstrap centers the content and provides padding, creating a visually appealing layout.
Row and Columns: The Bootstrap grid system is utilized with different column settings for small, medium, and large devices (col-sm-6, col-md-4, col-lg-3), ensuring that the number of images per row adjusts based on the screen width.
Modal Component: Bootstrap’s modal component is used for displaying the full-size images. This includes elements like a modal header with a close button and a modal body where the selected image is displayed.
Overall User Experience: The gallery is designed to be intuitive and user-friendly. The clean layout, combined with responsive design and interactive elements like hover effects and modals, makes the webpage not only visually appealing but also engaging. Users can reminisce and explore various college memories through a series of curated images, enhanced by the ability to view each in greater detail within a modal window.
This webpage serves as an effective digital showcase of college life, ideal for prospective students, alumni, or any visitor interested in the visual story of the institution.
(ii) Develop a Contact Form:
The HTML document outlines a fully functional, interactive contact form specifically designed for a college. Styled using Bootstrap and custom CSS, the form is visually appealing and offers a user-friendly interface suitable for students, faculty, or visitors wishing to communicate with various college departments. Here are the detailed elements and functionalities of the webpage:
Design and Aesthetics: Background: The webpage features a vibrant gradient background that spans from deep purple to bright blue, providing a dynamic and modern look.
Form Container: The form is encapsulated within a light green container that offers good visual contrast against the background. This container includes rounded corners and a box shadow, enhancing its appearance with a subtle 3D effect, which is accentuated on hover with a slight upward transformation and deeper shadow.
Typography and Colors: Text within the form is primarily in shades of blue, maintaining a coherent color scheme that matches the button and header elements, ensuring readability and visual harmony.
Form Structure and Fields:
Header: A centered form header "Contact Us" clearly indicates the purpose of the form.
Input Fields: The form includes various fields necessary for collecting user data:
Full Name: Validates that the input contains only letters and spaces.
Gender: Radio buttons offer options for Male, Female, or Other, ensuring inclusivity.
Email and Phone: Fields are validated for proper formatting to ensure that the input matches typical email addresses and a 10-digit phone number format.
Date of Birth: Includes a date picker with validations to prevent selection of future dates.
Department: A dropdown menu provides options for different college departments, aiding in directing the query appropriately.
Message: A text area for detailed messages with a validation requiring a minimum of 10 words to ensure informative communication. Interactivity and Validation:
Client-side Validation: Utilizes Bootstrap’s validation style cues to provide instant feedback on the input validity. Fields display green or red borders based on correctness, enhancing user interaction by immediately indicating field status.
JavaScript Enhancements: The form prevents submission unless all validation criteria are met. It includes custom scripts to enforce the minimum word count in the message field and to set the maximum allowable date of birth.
Submission Behavior: The form uses JavaScript to handle the submit event, displaying an alert if successfully validated, followed by refreshing the page to reset the form.
Responsiveness and Accessibility:
Bootstrap Framework: Ensures that the form is responsive, making it accessible and functional across various devices and screen sizes.
Accessibility Features: Includes labels, placeholders, and feedback elements which aid in usability for all users, including those with disabilities.
Overall Functionality: The webpage is designed to facilitate easy communication between college community members and the administration by providing a direct and detailed method for submitting inquiries and messages. The combination of aesthetic design, user-centric functionality, and robust form validation mechanics makes it a practical and attractive component of any educational institution's website.