Web Development Lab: HTML & CSS Guide
Uploaded by
pratyay.entWeb Development Lab: HTML & CSS Guide
Uploaded by
pratyay.entBSC.
SEM(II) (HONS) (PRACTICAL) EXAMINATION – 2025
SUBJECT : CMSM
PAPER : SEC-2-(PR)
PAPER NAME : WEB DEVELOPMENT LAB
REGISTRATION NO. : 012-1111-1550-24
ROLL NO. : 243012-21-0275
INDEX
Topic: Page No.:
Introduction to HTML & CSS 3-5
And Website Implementation
Home Page Designing 6-17
Science Page Designing 18-26
Arts Page Designing 27-35
Commerce Page Designing 36-44
About Page Designing 45-59
HTML & CSS Tags Reference 60-63
Page | 2
Introduction to HTML & CSS and Website Implementation
HTML (HyperText Markup Language)
What is HTML?
HTML is the standard markup language used to create web pages. It provides the basic structure and
content of a website, using various tags and elements to define different parts of a webpage.
Key Characteristics:
Structure-oriented: Defines headings, paragraphs, links, images, etc.
Tag-based: Uses angle brackets < > to create elements
Hierarchical: Elements are nested within each other
Content-focused: Primarily handles the content and structure
CSS (Cascading Style Sheets)
What is CSS?
CSS is a style sheet language used to describe the presentation and visual appearance of HTML
documents. It controls layout, colors, fonts, and responsive behavior.
Key Characteristics:
Presentation-focused: Handles how content looks
Rule-based: Uses selectors and declarations
Separation of concerns: Keeps style separate from content
Cascading nature: Multiple style rules can apply to same element
Implementation in Asutosh College Website
1. HTML Structure Used
Basic Page Structure:
<!DOCTYPE html>
<html>
<head>
<!-- Metadata & title -->
</head>
<body>
<header><!-- Logo & navigation --></header>
<main>
<!-- Main content sections -->
</main>
<footer><!-- Contact & links --></footer>
</body>
</html>
Page | 3
Content Organization:
Semantic HTML5 tags (<header>, <nav>, <main>, <section>, <footer>) for better structure
Hierarchical headings (<h1> to <h3>) for content organization
Lists (<ul>, <li>) for navigation menus
Anchor tags (<a>) for internal page linking
Image tags (<img>) for visual content
2. CSS Styling Implementation
Layout Techniques:
/* Flexbox for header navigation */
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
}
/* CSS Grid for course cards */
.courses-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
}
Visual Design Elements:
Color schemes using CSS variables and gradient backgrounds
Typography with font families, sizes, and weights
Box model with margins, padding, and borders
Shadow effects for depth and dimension
Hover states for interactive feedback
3. Key Design Features Implemented
A. Responsive Design
@media (max-width: 768px) {
/* Mobile-specific styles */
.header-content { flex-direction: column; }
.courses-grid { grid-template-columns: 1fr; }
}
B. Visual Hierarchy
Color coding: Different color schemes for each department
Typography: Clear heading structure and readable text
Spacing: Consistent margins and padding for visual comfort
Page | 4
C. User Experience
Navigation: Consistent menu across all pages
Breadcrumbs: Easy navigation path indication
Card design: Consistent course presentation
Interactive elements: Hover effects and transitions
4. Website Architecture
Asutosh College Website
├── Consistent Header (Logo + Navigation)
├── Department-specific Content
│ ├── Science (Green theme)
│ ├── Arts (Brown theme)
│ ├── Commerce (Blue theme)
│ └── About (Purple theme)
├── Unified Footer
└── Responsive Layout
5. Technical Achievements
HTML Achievements:
Semantic markup for better accessibility
Proper document structure
Efficient content organization
Cross-page navigation system
CSS Achievements:
Responsive design for all devices
Consistent design language
Visual appeal with modern UI elements
Performance-optimized styling
Maintainable and scalable code structure
Conclusion:
The Asutosh College website demonstrates how HTML provides the foundation by structuring
content into logical sections, while CSS enhances the presentation through sophisticated styling,
layout techniques, and responsive design. This separation allows for:
Maintainability: Easy updates to style without touching content
Scalability: Adding new pages while maintaining consistency
Performance: Efficient loading and rendering
Accessibility: Clean structure that works across devices and browsers
The website successfully combines technical functionality with aesthetic appeal, creating an
engaging digital presence for the educational institution using fundamental web technologies.
Page | 5
Procedure for Creating Asutosh College Website
Step-by-Step Process for Each Page
1. Homepage ([Link])
1. Create basic HTML structure with doctype, html, head, and body tags
2. Add metadata in head section (title, viewport, charset)
3. Create header with college logo and navigation menu
4. Design hero section with background image and welcome message
5. Build course cards grid with images and descriptions
6. Add about section with college information
7. Create highlights section with key features
8. Add contact information section
9. Design footer with links and copyright
10. Apply CSS styling for colors, layout, and responsiveness
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Asutosh College - Home</title>
<style>
/* Reset and Base Styles */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f5f5f5;
color: #333;
line-height: 1.6;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
/* Header Styles */
Page | 6
header {
background: linear-gradient(135deg, #1a237e, #283593);
color: white;
padding: 1rem 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
}
.logo-img {
height: 60px;
width: auto;
margin-right: 15px;
}
.logo h1 {
font-size: 1.8rem;
}
nav ul {
display: flex;
list-style: none;
}
nav ul li {
margin-left: 1.5rem;
}
nav ul li a {
color: white;
text-decoration: none;
font-weight: 500;
padding: 0.5rem 0.8rem;
border-radius: 4px;
transition: background-color 0.3s;
}
nav ul li a:hover,
nav ul li [Link] {
background-color: rgba(255, 255, 255, 0.2);
}
Page | 7
/* Hero Section */
.hero {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('images/college-
[Link]') no-repeat center center/cover;
height: 500px;
display: flex;
align-items: center;
color: white;
text-align: center;
position: relative;
}
.hero-content {
width: 100%;
}
.hero h2 {
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.hero p {
font-size: 1.3rem;
max-width: 700px;
margin: 0 auto;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
/* Main Content */
main {
padding: 3rem 0;
}
.section-title {
text-align: center;
margin-bottom: 2rem;
color: #1a237e;
position: relative;
padding-bottom: 10px;
}
.section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 3px;
background-color: #283593;
Page | 8
}
/* Course Cards */
.courses-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
}
.course-card {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
}
.course-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.course-img {
height: 200px;
overflow: hidden;
}
.course-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.course-card:hover .course-img img {
transform: scale(1.05);
}
.course-content {
padding: 1.5rem;
}
.course-content h3 {
color: #1a237e;
margin-bottom: 0.5rem;
}
.course-content p {
color: #666;
margin-bottom: 1rem;
font-size: 0.9rem;
Page | 9
}
.btn {
display: inline-block;
background-color: #283593;
color: white;
padding: 0.6rem 1.2rem;
border-radius: 4px;
text-decoration: none;
font-weight: 500;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #1a237e;
}
/* About Section */
.about {
background-color: white;
padding: 3rem 0;
margin: 3rem 0;
}
.about-content {
display: flex;
align-items: center;
gap: 3rem;
}
.about-text {
flex: 1;
}
.about-image {
flex: 1;
height: 350px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.about-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Highlights Section */
.highlights-grid {
display: grid;
Page | 10
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.highlight-card {
text-align: center;
padding: 2rem 1rem;
background: white;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
}
.highlight-card:hover {
transform: translateY(-5px);
}
.highlight-icon {
font-size: 3rem;
margin-bottom: 1rem;
color: #283593;
}
/* Contact Section */
.contact-info {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.contact-card {
background: white;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
.contact-card i {
font-size: 2rem;
color: #283593;
margin-bottom: 1rem;
}
/* Footer */
footer {
background-color: #1a237e;
color: white;
padding: 2rem 0;
Page | 11
text-align: center;
}
.footer-content {
display: flex;
flex-direction: column;
align-items: center;
}
.footer-logo {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.footer-logo-img {
height: 40px;
width: auto;
margin-right: 10px;
}
.footer-links {
display: flex;
margin: 1.5rem 0;
}
.footer-links a {
color: white;
margin: 0 1rem;
text-decoration: none;
}
.footer-links a:hover {
text-decoration: underline;
}
.copyright {
margin-top: 1rem;
font-size: 0.9rem;
color: #b0b0b0;
}
/* Responsive Design */
@media (max-width: 768px) {
.header-content {
flex-direction: column;
text-align: center;
}
nav ul {
margin-top: 1rem;
Page | 12
flex-wrap: wrap;
justify-content: center;
}
nav ul li {
margin: 0.5rem;
}
.hero h2 {
font-size: 2rem;
}
.about-content {
flex-direction: column;
}
.about-image {
width: 100%;
}
}
</style>
</head>
<body>
<!-- Header -->
<header>
<div class="container header-content">
<div class="logo">
<img src="images/[Link]" alt="Asutosh College Logo" class="logo-img">
<h1>Asutosh College</h1>
</div>
<nav>
<ul>
<li><a href="[Link]" class="active">Home</a></li>
<li><a href="[Link]">Science</a></li>
<li><a href="[Link]">Arts</a></li>
<li><a href="[Link]">Commerce</a></li>
<li><a href="[Link]">About</a></li>
</ul>
</nav>
</div>
</header>
<!-- Hero Section -->
<section class="hero">
<div class="container hero-content">
<h2>Welcome to Asutosh College</h2>
<p>Excellence in Education Since 1916</p>
</div>
</section>
<!-- Main Content -->
Page | 13
<main class="container">
<h2 class="section-title">Our Courses</h2>
<div class="courses-grid">
<!-- Science Courses -->
<div class="course-card">
<div class="course-img">
<img src="images/[Link]" alt="Science Laboratory">
</div>
<div class="course-content">
<h3>Science Programs</h3>
<p>Explore our diverse range of science programs including Physics, Chemistry,
Mathematics, Computer Science and more with state-of-the-art laboratories.</p>
<a href="[Link]" class="btn">View Courses</a>
</div>
</div>
<!-- Arts Courses -->
<div class="course-card">
<div class="course-img">
<img src="images/[Link]" alt="Arts Department">
</div>
<div class="course-content">
<h3>Arts Programs</h3>
<p>Discover our comprehensive arts programs in subjects like History, Political Science,
English, Bengali and more with rich cultural activities.</p>
<a href="[Link]" class="btn">View Courses</a>
</div>
</div>
<!-- Commerce Courses -->
<div class="course-card">
<div class="course-img">
<img src="images/[Link]" alt="Commerce Department">
</div>
<div class="course-content">
<h3>Commerce Programs</h3>
<p>Learn about our commerce programs including Accounting, Business Studies,
Economics and other related subjects with industry exposure.</p>
<a href="[Link]" class="btn">View Courses</a>
</div>
</div>
</div>
<!-- About Section -->
<section class="about">
<div class="container">
<h2 class="section-title">About Asutosh College</h2>
<div class="about-content">
<div class="about-text">
Page | 14
<p>Asutosh College, established in 1916, is one of the premier institutions of higher
education in Kolkata, West Bengal. Named after Sir Asutosh Mukherjee, the college has a rich legacy
of academic excellence and has produced numerous distinguished alumni.</p>
<p>Located in the heart of Kolkata, the college offers a wide range of undergraduate
and postgraduate courses in Science, Arts, and Commerce streams. Our dedicated faculty and state-
of-the-art facilities provide students with an enriching learning environment.</p>
<a href="[Link]" class="btn" style="margin-top: 1rem;">Learn More About Us</a>
</div>
<div class="about-image">
<img src="images/[Link]" alt="Asutosh College Campus">
</div>
</div>
</div>
</section>
<!-- Highlights Section -->
<section>
<h2 class="section-title">Why Choose Asutosh College?</h2>
<div class="highlights-grid">
<div class="highlight-card">
<div class="highlight-icon">🎓</div>
<h3>Experienced Faculty</h3>
<p>Learn from highly qualified and experienced professors dedicated to student
success.</p>
</div>
<div class="highlight-card">
<div class="highlight-icon">🏛️</div>
<h3>Rich Heritage</h3>
<p>Over 100 years of academic excellence and contribution to education.</p>
</div>
<div class="highlight-card">
<div class="highlight-icon">🔬</div>
<h3>Modern Facilities</h3>
<p>State-of-the-art laboratories, library, and infrastructure for optimal learning.</p>
</div>
<div class="highlight-card">
<div class="highlight-icon">🌍</div>
<h3>Global Opportunities</h3>
<p>Partnerships with international universities and global exposure programs.</p>
</div>
</div>
</section>
<!-- Contact Section -->
<section style="margin-top: 4rem;">
<h2 class="section-title">Contact Us</h2>
<div class="contact-info">
<div class="contact-card">
<div>📍</div>
<h3>Address</h3>
<p>92, S.P. Mukherjee Road, Kolkata - 700026, West Bengal, India</p>
Page | 15
</div>
<div class="contact-card">
<div>📞</div>
<h3>Phone</h3>
<p>+91 33 2455 1778</p>
</div>
<div class="contact-card">
<div>✉️</div>
<h3>Email</h3>
<p>info@[Link]</p>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer>
<div class="container footer-content">
<div class="footer-logo">
<img src="images/[Link]" alt="Asutosh College Logo" class="footer-logo-img">
<h2>Asutosh College</h2>
</div>
<div class="footer-links">
<a href="[Link]">Home</a>
<a href="[Link]">Science</a>
<a href="[Link]">Arts</a>
<a href="[Link]">Commerce</a>
<a href="[Link]">About</a>
</div>
<div class="copyright">
© 2023 Asutosh College, Kolkata. All rights reserved.
</div>
</div>
</footer>
</body>
</html>
Page | 16
Page | 17
2. Science Courses Page ([Link])
1. Use same header and footer as homepage for consistency
2. Create page header with science-specific background color
3. Add breadcrumb navigation
4. Build science courses grid with 6 course cards
5. Include course details like duration and eligibility
6. Add facilities section highlighting labs and equipment
7. Apply science-themed colors (green shades)
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Science Courses - Asutosh College</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f5f5f5;
color: #333;
line-height: 1.6;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
header {
background: linear-gradient(135deg, #1a237e, #283593);
color: white;
padding: 1rem 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.header-content {
display: flex;
justify-content: space-between;
Page | 18
align-items: center;
}
.logo {
display: flex;
align-items: center;
}
.logo h1 {
font-size: 1.8rem;
margin-left: 10px;
}
.logo-icon {
font-size: 2rem;
}
nav ul {
display: flex;
list-style: none;
}
nav ul li {
margin-left: 1.5rem;
}
nav ul li a {
color: white;
text-decoration: none;
font-weight: 500;
padding: 0.5rem 0.8rem;
border-radius: 4px;
transition: background-color 0.3s;
}
nav ul li a:hover,
nav ul li [Link] {
background-color: rgba(255, 255, 255, 0.2);
}
.page-header {
background: linear-gradient(135deg, #00695c, #004d40);
color: white;
padding: 3rem 0;
text-align: center;
}
.page-header h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
Page | 19
.breadcrumb {
background-color: #e0f2f1;
padding: 1rem 0;
}
.breadcrumb a {
color: #00695c;
text-decoration: none;
}
.breadcrumb a:hover {
text-decoration: underline;
}
main {
padding: 3rem 0;
}
.section-title {
text-align: center;
margin-bottom: 2rem;
color: #00695c;
position: relative;
padding-bottom: 10px;
}
.section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 3px;
background-color: #004d40;
}
.courses-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
}
.course-card {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
}
Page | 20
.course-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.course-img {
height: 180px;
background: linear-gradient(135deg, #00695c, #004d40);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 3rem;
}
.course-content {
padding: 1.5rem;
}
.course-content h3 {
color: #00695c;
margin-bottom: 0.5rem;
}
.course-content p {
color: #666;
margin-bottom: 1rem;
font-size: 0.9rem;
}
.btn {
display: inline-block;
background-color: #004d40;
color: white;
padding: 0.6rem 1.2rem;
border-radius: 4px;
text-decoration: none;
font-weight: 500;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #00695c;
}
footer {
background-color: #1a237e;
color: white;
padding: 2rem 0;
text-align: center;
Page | 21
}
.footer-content {
display: flex;
flex-direction: column;
align-items: center;
}
.footer-links {
display: flex;
margin: 1.5rem 0;
}
.footer-links a {
color: white;
margin: 0 1rem;
text-decoration: none;
}
.footer-links a:hover {
text-decoration: underline;
}
.copyright {
margin-top: 1rem;
font-size: 0.9rem;
color: #b0b0b0;
}
@media (max-width: 768px) {
.header-content {
flex-direction: column;
text-align: center;
}
nav ul {
margin-top: 1rem;
flex-wrap: wrap;
justify-content: center;
}
nav ul li {
margin: 0.5rem;
}
}
</style>
</head>
<body>
<header>
<div class="container header-content">
<div class="logo">
Page | 22
<div class="logo-icon">🎓</div>
<h1>Asutosh College</h1>
</div>
<nav>
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]" class="active">Science</a></li>
<li><a href="[Link]">Arts</a></li>
<li><a href="[Link]">Commerce</a></li>
<li><a href="[Link]">About</a></li>
</ul>
</nav>
</div>
</header>
<div class="page-header">
<div class="container">
<h1>Science Courses</h1>
<p>Explore our cutting-edge science programs and research opportunities</p>
</div>
</div>
<div class="breadcrumb">
<div class="container">
<a href="[Link]">Home</a> > Science Courses
</div>
</div>
<main class="container">
<h2 class="section-title">Undergraduate Programs</h2>
<div class="courses-grid">
<div class="course-card">
<div class="course-img"> </div>
<div class="course-content">
<h3>[Link]. Chemistry</h3>
<p>Comprehensive program covering organic, inorganic, physical, and analytical
chemistry with modern laboratory facilities.</p>
<p><strong>Duration:</strong> 3 Years</p>
<p><strong>Eligibility:</strong> 10+2 with Science</p>
</div>
</div>
<div class="course-card">
<div class="course-img">⚛️</div>
<div class="course-content">
<h3>[Link]. Physics</h3>
<p>In-depth study of classical and modern physics with emphasis on practical
applications and research methodology.</p>
<p><strong>Duration:</strong> 3 Years</p>
<p><strong>Eligibility:</strong> 10+2 with Science</p>
Page | 23
</div>
</div>
<div class="course-card">
<div class="course-img">∫</div>
<div class="course-content">
<h3>[Link]. Mathematics</h3>
<p>Advanced mathematical theories, applications, and problem-solving techniques
across various mathematical disciplines.</p>
<p><strong>Duration:</strong> 3 Years</p>
<p><strong>Eligibility:</strong> 10+2 with Mathematics</p>
</div>
</div>
<div class="course-card">
<div class="course-img">💻</div>
<div class="course-content">
<h3>[Link]. Computer Science</h3>
<p>Comprehensive computer science education covering programming, algorithms,
databases, and software development.</p>
<p><strong>Duration:</strong> 3 Years</p>
<p><strong>Eligibility:</strong> 10+2 with Science</p>
</div>
</div>
<div class="course-card">
<div class="course-img"> </div>
<div class="course-content">
<h3>[Link]. Microbiology</h3>
<p>Study of microorganisms, their roles in environment, industry, and medicine with
hands-on laboratory training.</p>
<p><strong>Duration:</strong> 3 Years</p>
<p><strong>Eligibility:</strong> 10+2 with Biology</p>
</div>
</div>
<div class="course-card">
<div class="course-img">🌿</div>
<div class="course-content">
<h3>[Link]. Botany</h3>
<p>Comprehensive study of plant life, from molecular biology to ecosystem dynamics
and conservation.</p>
<p><strong>Duration:</strong> 3 Years</p>
<p><strong>Eligibility:</strong> 10+2 with Biology</p>
</div>
</div>
</div>
<div style="margin-top: 3rem;">
<h2 class="section-title">Facilities</h2>
<div style="background: white; padding: 2rem; border-radius: 8px; margin-top: 1rem;">
Page | 24
<h3 style="color: #00695c; margin-bottom: 1rem;">State-of-the-Art Laboratories</h3>
<p>Our science department features modern laboratories equipped with the latest
instruments and technology:</p>
<ul style="margin: 1rem 0; padding-left: 2rem;">
<li>Advanced Chemistry Lab with Spectroscopy Equipment</li>
<li>Physics Research Laboratory</li>
<li>Computer Science Lab with High-Performance Systems</li>
<li>Microbiology and Biotechnology Labs</li>
<li>Botany and Zoology Research Facilities</li>
</ul>
</div>
</div>
</main>
<footer>
<div class="container footer-content">
<div class="logo">
<div class="logo-icon">🎓</div>
<h2>Asutosh College</h2>
</div>
<div class="footer-links">
<a href="[Link]">Home</a>
<a href="[Link]">Science</a>
<a href="[Link]">Arts</a>
<a href="[Link]">Commerce</a>
<a href="[Link]">About</a>
</div>
<div class="copyright">
© 2023 Asutosh College, Kolkata. All rights reserved.
</div>
</div>
</footer>
</body>
</html>
Page | 25
Page | 26
3. Arts Courses Page ([Link])
1. Copy basic structure from science page
2. Change page header color to brown shades for arts theme
3. Replace course content with arts subjects (English, Bengali, History, etc.)
4. Update course descriptions for humanities focus
5. Add cultural activities section
6. Modify color scheme to brown palette
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arts Courses - Asutosh College</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f5f5f5;
color: #333;
line-height: 1.6;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
header {
background: linear-gradient(135deg, #1a237e, #283593);
color: white;
padding: 1rem 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
}
Page | 27
.logo {
display: flex;
align-items: center;
}
.logo h1 {
font-size: 1.8rem;
margin-left: 10px;
}
.logo-icon {
font-size: 2rem;
}
nav ul {
display: flex;
list-style: none;
}
nav ul li {
margin-left: 1.5rem;
}
nav ul li a {
color: white;
text-decoration: none;
font-weight: 500;
padding: 0.5rem 0.8rem;
border-radius: 4px;
transition: background-color 0.3s;
}
nav ul li a:hover,
nav ul li [Link] {
background-color: rgba(255, 255, 255, 0.2);
}
.page-header {
background: linear-gradient(135deg, #5d4037, #3e2723);
color: white;
padding: 3rem 0;
text-align: center;
}
.page-header h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.breadcrumb {
Page | 28
background-color: #efebe9;
padding: 1rem 0;
}
.breadcrumb a {
color: #5d4037;
text-decoration: none;
}
.breadcrumb a:hover {
text-decoration: underline;
}
main {
padding: 3rem 0;
}
.section-title {
text-align: center;
margin-bottom: 2rem;
color: #5d4037;
position: relative;
padding-bottom: 10px;
}
.section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 3px;
background-color: #3e2723;
}
.courses-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
}
.course-card {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
}
.course-card:hover {
Page | 29
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.course-img {
height: 180px;
background: linear-gradient(135deg, #5d4037, #3e2723);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 3rem;
}
.course-content {
padding: 1.5rem;
}
.course-content h3 {
color: #5d4037;
margin-bottom: 0.5rem;
}
.course-content p {
color: #666;
margin-bottom: 1rem;
font-size: 0.9rem;
}
.btn {
display: inline-block;
background-color: #3e2723;
color: white;
padding: 0.6rem 1.2rem;
border-radius: 4px;
text-decoration: none;
font-weight: 500;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #5d4037;
}
footer {
background-color: #1a237e;
color: white;
padding: 2rem 0;
text-align: center;
}
Page | 30
.footer-content {
display: flex;
flex-direction: column;
align-items: center;
}
.footer-links {
display: flex;
margin: 1.5rem 0;
}
.footer-links a {
color: white;
margin: 0 1rem;
text-decoration: none;
}
.footer-links a:hover {
text-decoration: underline;
}
.copyright {
margin-top: 1rem;
font-size: 0.9rem;
color: #b0b0b0;
}
@media (max-width: 768px) {
.header-content {
flex-direction: column;
text-align: center;
}
nav ul {
margin-top: 1rem;
flex-wrap: wrap;
justify-content: center;
}
nav ul li {
margin: 0.5rem;
}
}
</style>
</head>
<body>
<header>
<div class="container header-content">
<div class="logo">
<div class="logo-icon">🎓</div>
<h1>Asutosh College</h1>
Page | 31
</div>
<nav>
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">Science</a></li>
<li><a href="[Link]" class="active">Arts</a></li>
<li><a href="[Link]">Commerce</a></li>
<li><a href="[Link]">About</a></li>
</ul>
</nav>
</div>
</header>
<div class="page-header">
<div class="container">
<h1>Arts & Humanities Courses</h1>
<p>Explore the richness of human expression, culture, and society</p>
</div>
</div>
<div class="breadcrumb">
<div class="container">
<a href="[Link]">Home</a> > Arts Courses
</div>
</div>
<main class="container">
<h2 class="section-title">Undergraduate Programs</h2>
<div class="courses-grid">
<div class="course-card">
<div class="course-img">📚</div>
<div class="course-content">
<h3>B.A. English</h3>
<p>Comprehensive study of English literature, language, and critical theory from classical
to contemporary works.</p>
<p><strong>Duration:</strong> 3 Years</p>
<p><strong>Eligibility:</strong> 10+2 in any stream</p>
</div>
</div>
<div class="course-card">
<div class="course-img">🇧🇩</div>
<div class="course-content">
<h3>B.A. Bengali</h3>
<p>In-depth exploration of Bengali language, literature, and cultural heritage with focus
on major literary works.</p>
<p><strong>Duration:</strong> 3 Years</p>
<p><strong>Eligibility:</strong> 10+2 in any stream</p>
</div>
</div>
Page | 32
<div class="course-card">
<div class="course-img">🏛️</div>
<div class="course-content">
<h3>B.A. History</h3>
<p>Study of historical events, civilizations, and methodologies with emphasis on Indian
and world history.</p>
<p><strong>Duration:</strong> 3 Years</p>
<p><strong>Eligibility:</strong> 10+2 in any stream</p>
</div>
</div>
<div class="course-card">
<div class="course-img">⚖️</div>
<div class="course-content">
<h3>B.A. Political Science</h3>
<p>Comprehensive understanding of political systems, theories, and international
relations.</p>
<p><strong>Duration:</strong> 3 Years</p>
<p><strong>Eligibility:</strong> 10+2 in any stream</p>
</div>
</div>
<div class="course-card">
<div class="course-img">🧠</div>
<div class="course-content">
<h3>B.A. Philosophy</h3>
<p>Critical study of fundamental questions about existence, knowledge, values, and
human nature.</p>
<p><strong>Duration:</strong> 3 Years</p>
<p><strong>Eligibility:</strong> 10+2 in any stream</p>
</div>
</div>
<div class="course-card">
<div class="course-img">📊</div>
<div class="course-content">
<h3>B.A. Economics</h3>
<p>Study of economic theories, policies, and their applications in real-world
scenarios.</p>
<p><strong>Duration:</strong> 3 Years</p>
<p><strong>Eligibility:</strong> 10+2 in any stream</p>
</div>
</div>
</div>
<div style="margin-top: 3rem;">
<h2 class="section-title">Department Highlights</h2>
<div style="background: white; padding: 2rem; border-radius: 8px; margin-top: 1rem;">
<h3 style="color: #5d4037; margin-bottom: 1rem;">Cultural & Academic Activities</h3>
<p>The Arts department organizes various activities to enhance learning:</p>
Page | 33
<ul style="margin: 1rem 0; padding-left: 2rem;">
<li>Annual Literary Fest and Poetry Recitations</li>
<li>Historical and Cultural Study Tours</li>
<li>Guest Lectures by Eminent Scholars</li>
<li>Debate and Elocution Competitions</li>
<li>Research Publication Opportunities</li>
</ul>
</div>
</div>
</main>
<footer>
<div class="container footer-content">
<div class="logo">
<div class="logo-icon">🎓</div>
<h2>Asutosh College</h2>
</div>
<div class="footer-links">
<a href="[Link]">Home</a>
<a href="[Link]">Science</a>
<a href="[Link]">Arts</a>
<a href="[Link]">Commerce</a>
<a href="[Link]">About</a>
</div>
<div class="copyright">
© 2023 Asutosh College, Kolkata. All rights reserved.
</div>
</div>
</footer>
</body>
</html>
Page | 34
Page | 35
4. Commerce Courses Page ([Link])
1. Use same template as previous pages
2. Apply blue color scheme for commerce theme
3. Add commerce-specific courses (Accounting, Business, Banking, etc.)
4. Include professional development section
5. Highlight industry interface and placement support
6. Update all content for commerce focus
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Commerce Courses - Asutosh College</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f5f5f5;
color: #333;
line-height: 1.6;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
header {
background: linear-gradient(135deg, #1a237e, #283593);
color: white;
padding: 1rem 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
}
Page | 36
.logo {
display: flex;
align-items: center;
}
.logo h1 {
font-size: 1.8rem;
margin-left: 10px;
}
.logo-icon {
font-size: 2rem;
}
nav ul {
display: flex;
list-style: none;
}
nav ul li {
margin-left: 1.5rem;
}
nav ul li a {
color: white;
text-decoration: none;
font-weight: 500;
padding: 0.5rem 0.8rem;
border-radius: 4px;
transition: background-color 0.3s;
}
nav ul li a:hover,
nav ul li [Link] {
background-color: rgba(255, 255, 255, 0.2);
}
.page-header {
background: linear-gradient(135deg, #0277bd, #01579b);
color: white;
padding: 3rem 0;
text-align: center;
}
.page-header h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.breadcrumb {
Page | 37
background-color: #e1f5fe;
padding: 1rem 0;
}
.breadcrumb a {
color: #0277bd;
text-decoration: none;
}
.breadcrumb a:hover {
text-decoration: underline;
}
main {
padding: 3rem 0;
}
.section-title {
text-align: center;
margin-bottom: 2rem;
color: #0277bd;
position: relative;
padding-bottom: 10px;
}
.section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 3px;
background-color: #01579b;
}
.courses-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
}
.course-card {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
}
.course-card:hover {
Page | 38
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.course-img {
height: 180px;
background: linear-gradient(135deg, #0277bd, #01579b);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 3rem;
}
.course-content {
padding: 1.5rem;
}
.course-content h3 {
color: #0277bd;
margin-bottom: 0.5rem;
}
.course-content p {
color: #666;
margin-bottom: 1rem;
font-size: 0.9rem;
}
.btn {
display: inline-block;
background-color: #01579b;
color: white;
padding: 0.6rem 1.2rem;
border-radius: 4px;
text-decoration: none;
font-weight: 500;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #0277bd;
}
footer {
background-color: #1a237e;
color: white;
padding: 2rem 0;
text-align: center;
}
Page | 39
.footer-content {
display: flex;
flex-direction: column;
align-items: center;
}
.footer-links {
display: flex;
margin: 1.5rem 0;
}
.footer-links a {
color: white;
margin: 0 1rem;
text-decoration: none;
}
.footer-links a:hover {
text-decoration: underline;
}
.copyright {
margin-top: 1rem;
font-size: 0.9rem;
color: #b0b0b0;
}
@media (max-width: 768px) {
.header-content {
flex-direction: column;
text-align: center;
}
nav ul {
margin-top: 1rem;
flex-wrap: wrap;
justify-content: center;
}
nav ul li {
margin: 0.5rem;
}
}
</style>
</head>
<body>
<header>
<div class="container header-content">
<div class="logo">
<div class="logo-icon">🎓</div>
<h1>Asutosh College</h1>
Page | 40
</div>
<nav>
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">Science</a></li>
<li><a href="[Link]">Arts</a></li>
<li><a href="[Link]" class="active">Commerce</a></li>
<li><a href="[Link]">About</a></li>
</ul>
</nav>
</div>
</header>
<div class="page-header">
<div class="container">
<h1>Commerce & Business Courses</h1>
<p>Building future business leaders and financial experts</p>
</div>
</div>
<div class="breadcrumb">
<div class="container">
<a href="[Link]">Home</a> > Commerce Courses
</div>
</div>
<main class="container">
<h2 class="section-title">Undergraduate Programs</h2>
<div class="courses-grid">
<div class="course-card">
<div class="course-img">📈</div>
<div class="course-content">
<h3>[Link]. General</h3>
<p>Comprehensive commerce education covering accounting, business laws, economics,
and business management.</p>
<p><strong>Duration:</strong> 3 Years</p>
<p><strong>Eligibility:</strong> 10+2 in Commerce/Science</p>
</div>
</div>
<div class="course-card">
<div class="course-img">💰</div>
<div class="course-content">
<h3>[Link]. Accounting</h3>
<p>Specialized program focusing on advanced accounting principles, taxation, and
financial reporting.</p>
<p><strong>Duration:</strong> 3 Years</p>
<p><strong>Eligibility:</strong> 10+2 in Commerce</p>
</div>
</div>
Page | 41
<div class="course-card">
<div class="course-img">🏢</div>
<div class="course-content">
<h3>[Link]. Business Studies</h3>
<p>Focus on business management, entrepreneurship, marketing, and organizational
behavior.</p>
<p><strong>Duration:</strong> 3 Years</p>
<p><strong>Eligibility:</strong> 10+2 in any stream</p>
</div>
</div>
<div class="course-card">
<div class="course-img">💳</div>
<div class="course-content">
<h3>[Link]. Banking & Finance</h3>
<p>Specialized knowledge in banking operations, financial markets, and investment
management.</p>
<p><strong>Duration:</strong> 3 Years</p>
<p><strong>Eligibility:</strong> 10+2 in Commerce/Science</p>
</div>
</div>
<div class="course-card">
<div class="course-img">📊</div>
<div class="course-content">
<h3>[Link]. Economics</h3>
<p>Integration of commerce education with economic theories and their business
applications.</p>
<p><strong>Duration:</strong> 3 Years</p>
<p><strong>Eligibility:</strong> 10+2 in Commerce/Science</p>
</div>
</div>
<div class="course-card">
<div class="course-img">🌐</div>
<div class="course-content">
<h3>[Link]. International Business</h3>
<p>Focus on global trade, international marketing, and cross-cultural business
management.</p>
<p><strong>Duration:</strong> 3 Years</p>
<p><strong>Eligibility:</strong> 10+2 in any stream</p>
</div>
</div>
</div>
<div style="margin-top: 3rem;">
<h2 class="section-title">Professional Development</h2>
<div style="background: white; padding: 2rem; border-radius: 8px; margin-top: 1rem;">
<h3 style="color: #0277bd; margin-bottom: 1rem;">Industry Interface & Placement
Support</h3>
Page | 42
<p>The Commerce department provides excellent industry exposure and placement
opportunities:</p>
<ul style="margin: 1rem 0; padding-left: 2rem;">
<li>Regular Industry Visits and Corporate Interactions</li>
<li>CA, CS, and CMA Foundation Coaching Support</li>
<li>Internship Opportunities with Leading Companies</li>
<li>Annual Business Conclave and Entrepreneurship Summit</li>
<li>Dedicated Placement Cell for Commerce Students</li>
</ul>
</div>
</div>
</main>
<footer>
<div class="container footer-content">
<div class="logo">
<div class="logo-icon">🎓</div>
<h2>Asutosh College</h2>
</div>
<div class="footer-links">
<a href="[Link]">Home</a>
<a href="[Link]">Science</a>
<a href="[Link]">Arts</a>
<a href="[Link]">Commerce</a>
<a href="[Link]">About</a>
</div>
<div class="copyright">
© 2023 Asutosh College, Kolkata. All rights reserved.
</div>
</div>
</footer>
</body>
</html>
Page | 43
Page | 44
5. About Page ([Link])
1. Create comprehensive about page with college history
2. Add leadership section with staff photos and bios
3. Include vision and mission statements
4. Build facilities showcase with images
5. Add statistics section with key numbers
6. Use purple color scheme for distinction
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us - Asutosh College</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f5f5f5;
color: #333;
line-height: 1.6;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
header {
background: linear-gradient(135deg, #1a237e, #283593);
color: white;
padding: 1rem 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
}
Page | 45
.logo {
display: flex;
align-items: center;
}
.logo-img {
height: 60px;
width: auto;
margin-right: 15px;
}
.logo h1 {
font-size: 1.8rem;
}
nav ul {
display: flex;
list-style: none;
}
nav ul li {
margin-left: 1.5rem;
}
nav ul li a {
color: white;
text-decoration: none;
font-weight: 500;
padding: 0.5rem 0.8rem;
border-radius: 4px;
transition: background-color 0.3s;
}
nav ul li a:hover,
nav ul li [Link] {
background-color: rgba(255, 255, 255, 0.2);
}
.page-header {
background: linear-gradient(135deg, #7b1fa2, #4a148c);
color: white;
padding: 4rem 0;
text-align: center;
}
.page-header h1 {
font-size: 2.8rem;
margin-bottom: 1rem;
}
Page | 46
.breadcrumb {
background-color: #f3e5f5;
padding: 1rem 0;
font-size: 0.9rem;
}
.breadcrumb a {
color: #7b1fa2;
text-decoration: none;
}
.breadcrumb a:hover {
text-decoration: underline;
}
main {
padding: 3rem 0;
}
.section-title {
text-align: center;
margin-bottom: 2rem;
color: #7b1fa2;
position: relative;
padding-bottom: 10px;
}
.section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 3px;
background-color: #4a148c;
}
.about-content {
background: white;
padding: 2.5rem;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
margin-bottom: 3rem;
}
.history-section {
display: flex;
align-items: center;
gap: 3rem;
margin-bottom: 2rem;
Page | 47
}
.history-text {
flex: 1;
}
.history-image {
flex: 1;
height: 300px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.history-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin: 2rem 0;
}
.stat-card {
background: linear-gradient(135deg, #7b1fa2, #4a148c);
color: white;
padding: 2rem 1.5rem;
border-radius: 8px;
text-align: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
}
.stat-card:hover {
transform: translateY(-5px);
}
.stat-number {
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 0.5rem;
}
.stat-label {
font-size: 0.9rem;
opacity: 0.9;
}
Page | 48
.leadership-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.leader-card {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
}
.leader-card:hover {
transform: translateY(-5px);
}
.leader-img {
height: 250px;
overflow: hidden;
}
.leader-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.leader-card:hover .leader-img img {
transform: scale(1.05);
}
.leader-info {
padding: 1.5rem;
text-align: center;
}
.leader-info h3 {
color: #7b1fa2;
margin-bottom: 0.5rem;
}
.leader-position {
color: #4a148c;
font-weight: 500;
margin-bottom: 0.5rem;
font-size: 0.9rem;
Page | 49
}
.facilities-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.facility-card {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
}
.facility-card:hover {
transform: translateY(-5px);
}
.facility-img {
height: 200px;
overflow: hidden;
}
.facility-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.facility-card:hover .facility-img img {
transform: scale(1.05);
}
.facility-info {
padding: 1.5rem;
text-align: center;
}
.facility-info h4 {
color: #4a148c;
margin-bottom: 0.5rem;
}
.btn {
display: inline-block;
background-color: #4a148c;
color: white;
Page | 50
padding: 0.8rem 1.5rem;
border-radius: 4px;
text-decoration: none;
font-weight: 500;
transition: background-color 0.3s;
margin-top: 1rem;
}
.btn:hover {
background-color: #7b1fa2;
}
.mission-vision {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin: 2rem 0;
}
.mission-box, .vision-box {
background: #f8f9fa;
padding: 2rem;
border-radius: 8px;
border-left: 4px solid #7b1fa2;
}
footer {
background-color: #1a237e;
color: white;
padding: 2rem 0;
text-align: center;
}
.footer-content {
display: flex;
flex-direction: column;
align-items: center;
}
.footer-logo {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.footer-logo-img {
height: 40px;
width: auto;
margin-right: 10px;
}
Page | 51
.footer-links {
display: flex;
margin: 1.5rem 0;
}
.footer-links a {
color: white;
margin: 0 1rem;
text-decoration: none;
}
.footer-links a:hover {
text-decoration: underline;
}
.copyright {
margin-top: 1rem;
font-size: 0.9rem;
color: #b0b0b0;
}
/* Image placeholder fallback */
.image-placeholder {
background: linear-gradient(135deg, #7b1fa2, #4a148c);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1rem;
height: 100%;
}
@media (max-width: 768px) {
.header-content {
flex-direction: column;
text-align: center;
}
nav ul {
margin-top: 1rem;
flex-wrap: wrap;
justify-content: center;
}
nav ul li {
margin: 0.5rem;
}
.history-section {
flex-direction: column;
}
Page | 52
.history-image {
width: 100%;
}
.mission-vision {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<header>
<div class="container header-content">
<div class="logo">
<img src="images/[Link]" alt="Asutosh College Logo" class="logo-img">
<h1>Asutosh College</h1>
</div>
<nav>
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">Science</a></li>
<li><a href="[Link]">Arts</a></li>
<li><a href="[Link]">Commerce</a></li>
<li><a href="[Link]" class="active">About</a></li>
</ul>
</nav>
</div>
</header>
<div class="page-header">
<div class="container">
<h1>About Asutosh College</h1>
<p>Excellence in Education Since 1916</p>
</div>
</div>
<div class="breadcrumb">
<div class="container">
<a href="[Link]">Home</a> > About Us
</div>
</div>
<main class="container">
<section class="about-content">
<h2 class="section-title">Our Legacy</h2>
<div class="history-section">
<div class="history-text">
<h3>Founded in 1916</h3>
Page | 53
<p>Asutosh College, established in 1916, is one of the premier institutions of higher
education in Kolkata, West Bengal. Named after Sir Asutosh Mukherjee, the eminent educationist
and former Vice-Chancellor of Calcutta University, the college has a rich legacy of academic
excellence spanning over a century.</p>
<p>Located in the heart of Kolkata at 92, S.P. Mukherjee Road, the college has been
instrumental in shaping the minds of generations of students and contributing to the intellectual and
cultural landscape of the city. Our institution has stood as a beacon of knowledge, adapting to
changing times while maintaining our core values of excellence, integrity, and service to society.</p>
</div>
<div class="history-image">
<img src="images/[Link]" alt="Asutosh College Heritage Building">
</div>
</div>
<div class="stats-grid">
<div class="stat-card">
<div class="stat-number">10,000+</div>
<div class="stat-label">Students Enrolled</div>
</div>
<div class="stat-card">
<div class="stat-number">200+</div>
<div class="stat-label">Faculty Members</div>
</div>
<div class="stat-card">
<div class="stat-number">50+</div>
<div class="stat-label">Courses Offered</div>
</div>
<div class="stat-card">
<div class="stat-number">100+</div>
<div class="stat-label">Years of Excellence</div>
</div>
</div>
</section>
<section class="about-content">
<h2 class="section-title">Our Vision & Mission</h2>
<div class="mission-vision">
<div class="mission-box">
<h3 style="color: #7b1fa2; margin-bottom: 1rem;">Our Vision</h3>
<p>To be a center of academic excellence that nurtures intellectual curiosity, promotes
critical thinking, and prepares students to become responsible global citizens and leaders in their
chosen fields. We envision an institution that bridges traditional knowledge with contemporary
innovation.</p>
</div>
<div class="vision-box">
<h3 style="color: #7b1fa2; margin-bottom: 1rem;">Our Mission</h3>
<p>To provide quality education through innovative teaching methods, research
opportunities, and holistic development programs that empower students to achieve their full
potential and contribute meaningfully to society. We are committed to creating an inclusive
environment that fosters creativity, ethical values, and lifelong learning.</p>
Page | 54
</div>
</div>
</section>
<section class="about-content">
<h2 class="section-title">College Leadership</h2>
<div class="leadership-grid">
<div class="leader-card">
<div class="leader-img">
<img src="images/[Link]" alt="Dr. S. K. Bhattacharya - Principal">
</div>
<div class="leader-info">
<h3>Dr. S. K. Bhattacharya</h3>
<div class="leader-position">Principal</div>
<p>Leading the institution with vision and dedication since 2018, with over 25 years of
academic experience. PhD in Physics from University of Calcutta.</p>
</div>
</div>
<div class="leader-card">
<div class="leader-img">
<img src="images/[Link]" alt="Dr. M. S. Chatterjee - Vice Principal">
</div>
<div class="leader-info">
<h3>Dr. M. S. Chatterjee</h3>
<div class="leader-position">Vice Principal</div>
<p>Specializing in academic administration and student welfare programs with 20+
years of service. PhD in Chemistry with numerous publications.</p>
</div>
</div>
<div class="leader-card">
<div class="leader-img">
<img src="images/[Link]" alt="Mr. R. N. Ghosh - Registrar">
</div>
<div class="leader-info">
<h3>Mr. R. N. Ghosh</h3>
<div class="leader-position">Registrar</div>
<p>Managing college administration and operations with efficiency and dedication for
over 15 years. Masters in Business Administration.</p>
</div>
</div>
</div>
</section>
<section class="about-content">
<h2 class="section-title">Campus & Facilities</h2>
<div class="facilities-grid">
<div class="facility-card">
Page | 55
<div class="facility-img">
<img src="images/[Link]" alt="College Library">
</div>
<div class="facility-info">
<h4>Central Library</h4>
<p>50,000+ books, digital resources, and reading rooms with latest publications and
research materials.</p>
</div>
</div>
<div class="facility-card">
<div class="facility-img">
<img src="images/[Link]" alt="Science Laboratory">
</div>
<div class="facility-info">
<h4>Science Laboratories</h4>
<p>Modern equipment and research facilities for Physics, Chemistry, Biology, and
Computer Science.</p>
</div>
</div>
<div class="facility-card">
<div class="facility-img">
<img src="images/[Link]" alt="Sports Complex">
</div>
<div class="facility-info">
<h4>Sports Complex</h4>
<p>Indoor and outdoor sports facilities including basketball, volleyball, and badminton
courts.</p>
</div>
</div>
<div class="facility-card">
<div class="facility-img">
<img src="images/[Link]" alt="College Auditorium">
</div>
<div class="facility-info">
<h4>Auditorium</h4>
<p>800-seat capacity auditorium for seminars, conferences, and cultural events with
modern audio-visual systems.</p>
</div>
</div>
</div>
<div style="text-align: center; margin-top: 2rem;">
<a href="[Link]" class="btn">Back to Home</a>
</div>
</section>
</main>
<footer>
Page | 56
<div class="container footer-content">
<div class="footer-logo">
<img src="images/[Link]" alt="Asutosh College Logo" class="footer-logo-img">
<h2>Asutosh College</h2>
</div>
<div class="footer-links">
<a href="[Link]">Home</a>
<a href="[Link]">Science</a>
<a href="[Link]">Arts</a>
<a href="[Link]">Commerce</a>
<a href="[Link]">About</a>
</div>
<div class="copyright">
© 2023 Asutosh College, Kolkata. All rights reserved.
</div>
</div>
</footer>
</body>
</html>
Page | 57
Page | 58
Page | 59
HTML and CSS Tags Reference
HTML Tags Used
Tag Definition & Use-Case
<!DOCTYPE html> Defines document type as HTML5
<html> Root element of HTML page
<head> Contains metadata and page information
<title> Sets the page title shown in browser tab
<meta> Provides metadata like character set and viewport
<link> Links external resources like CSS files
<style> Contains internal CSS styles
<body> Contains all visible page content
<header> Defines header section with logo and navigation
<nav> Contains navigation links
<ul> <li> Creates unordered list and list items for menus
<main> Wraps main content of the page
<section> Defines sections of related content
<div> Generic container for layout and styling
<h1>-<h6> Headings of different levels for hierarchy
<p> Defines paragraphs of text
Page | 60
Tag Definition & Use-Case
<a> Creates hyperlinks to other pages
<img> Embeds images in the page
<footer> Defines footer section with contact info
CSS Properties Used
Property Definition & Use-Case
* Universal selector to apply styles to all elements
margin, padding Controls spacing around and inside elements
box-sizing: border-box Includes padding and border in element's total width
font-family Specifies font type for text
background-color Sets background color of elements
background: linear-gradient() Creates gradient color backgrounds
color Sets text color
display: flex Creates flexible box layout for alignment
display: grid Creates grid layout for complex designs
grid-template-columns Defines columns in grid layout
justify-content Aligns flex/grid items horizontally
Page | 61
Property Definition & Use-Case
align-items Aligns flex/grid items vertically
text-align Aligns text content (left, center, right)
text-decoration Controls text formatting like underlines
font-size Sets size of text
font-weight Controls text thickness (bold, normal)
line-height Sets spacing between lines of text
width, height Controls dimensions of elements
max-width Sets maximum width element can have
border-radius Creates rounded corners
box-shadow Adds shadow effects to elements
transition Creates smooth animation between state changes
transform Applies 2D/3D transformations like scaling
position: relative/absolute Controls element positioning
z-index Controls stacking order of elements
overflow: hidden Hides content that overflows container
object-fit: cover Makes images fill containers while maintaining ratio
@media queries Applies styles based on screen size (responsive)
Page | 62
Key CSS Concepts Used
1. Flexbox Layout - For header navigation and simple alignments
2. CSS Grid - For course cards and facilities grid layouts
3. Responsive Design - Using media queries for mobile compatibility
4. Color Schemes - Different color palettes for each department
5. Hover Effects - Interactive elements that respond to mouse hover
6. Background Images - Hero sections with overlay effects
7. Box Shadows - Creating depth and card-like elements
8. Transitions - Smooth animations for interactive elements
File Structure Created:
asutosh-college-website/
├── [Link] (Homepage)
├── [Link] (Science Courses)
├── [Link] (Arts Courses)
├── [Link] (Commerce Courses)
├── [Link] (About College)
└── images/ (All image files)
├── [Link]
├── [Link]
├── [Link]
├── [Link]
├── [Link]
└── [other images...]
This assignment demonstrates the complete process of creating a multi-page college website using
only HTML and CSS, with proper structure, styling, and navigation between pages.
Page | 63
You might also like
- Bootstrap Framework Overview and FeaturesNo ratings yetBootstrap Framework Overview and Features1 page
- Creative Design and Customization ServicesNo ratings yetCreative Design and Customization Services2 pages
- Bootstrap 3 Guide for Responsive DesignNo ratings yetBootstrap 3 Guide for Responsive Design68 pages
- Bootstrap 5 Responsive Web Design GuideNo ratings yetBootstrap 5 Responsive Web Design Guide12 pages
- Bootstrap Framework Guide for DevelopersNo ratings yetBootstrap Framework Guide for Developers52 pages
- Packet Switching and Cyber Crime OverviewNo ratings yetPacket Switching and Cyber Crime Overview8 pages
- C Programming Problem Solving AssignmentNo ratings yetC Programming Problem Solving Assignment6 pages
- PNMSJ On Windows Virtual Server Installation ManualNo ratings yetPNMSJ On Windows Virtual Server Installation Manual27 pages
- Deep Learning Fusion of Landsat-8 and Sentinel-2No ratings yetDeep Learning Fusion of Landsat-8 and Sentinel-258 pages
- Arduino-Based Window Annunciator SystemNo ratings yetArduino-Based Window Annunciator System65 pages
- Myocardial Viability in Ischemic Heart DiseaseNo ratings yetMyocardial Viability in Ischemic Heart Disease8 pages
- Floating Point Binary: Mantissa & ExponentNo ratings yetFloating Point Binary: Mantissa & Exponent12 pages
- Accident Avoidance System with GSM & GPSNo ratings yetAccident Avoidance System with GSM & GPS12 pages
- RFID Middleware and Applications OverviewNo ratings yetRFID Middleware and Applications Overview44 pages
- Configuring Automatic Payment Program in SAPNo ratings yetConfiguring Automatic Payment Program in SAP27 pages
- Understanding Gödel's Incompleteness TheoremsNo ratings yetUnderstanding Gödel's Incompleteness Theorems6 pages
- Understanding Ethernet LAN TechnologiesNo ratings yetUnderstanding Ethernet LAN Technologies88 pages