Scribd
Upload
6 views

Assignment 2

The document is an HTML code for a college education website designed by Naveen Shankar K. It includes various sections such as a top bar, header, hero section, services, and about section, with corresponding CSS styles for layout and design. The webpage features social media links, contact information, and various educational services offered by the college.

Uploaded by

naveenshankar571
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Assignment 2

The document is an HTML code for a college education website designed by Naveen Shankar K. It includes various sections such as a top bar, header, hero section, services, and about section, with corresponding CSS styles for layout and design. The webpage features social media links, contact information, and various educational services offered by the college.

Uploaded by

naveenshankar571
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

ASSIGNMENT -2

NAME: NAVEEN SHANKAR K


ROLL NO:CH.SC.U4AIE24048

QUESTION 2:

DESIGN THE FOLLOWING WEB PAGE AS IN THE IMAGE


CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>COLLEGE - Education Website</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}

/* Top Bar */
.top-bar {
background-color: #FF7043;
color: white;
padding: 8px 50px;
display: flex;
justify-content: space-between;
align-items: center;
}

.social-icons {
display: flex;
}

.social-icons a {
color: white;
margin-right: 15px;
text-decoration: none;
font-size: 14px;
}
.contact-container {
display: flex;
}

.contact-info, .email-info, .address-info {


display: flex;
align-items: center;
margin-left: 30px;
font-size: 14px;
}

.contact-info i, .email-info i, .address-info i {


margin-right: 8px;
}

/* Header */
header {
background-color: white;
padding: 15px 50px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #eee;
}

.logo {
display: flex;
align-items: center;
}

.logo i {
color: #FF7043;
font-size: 24px;
margin-right: 10px;
}

.logo span {
color: #333;
font-size: 22px;
font-weight: bold;
letter-spacing: 1px;
}

/* Navigation */
nav ul {
display: flex;
list-style: none;
}

nav ul li {
margin: 0 15px;
}

nav ul li a {
color: #333;
text-decoration: none;
font-size: 14px;
font-weight: 600;
padding: 10px 0;
}

nav ul li a i {
font-size: 10px;
margin-left: 4px;
}

.registration-btn {
background-color: #FF7043;
color: white;
padding: 10px 20px;
border: none;
border-radius: 3px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
}

/* Hero Section */
.hero {
background-image: linear-gradient(rgba(0,0,0,0.7),
rgba(0,0,0,0.7)), url('graduation-student.jpg');
background-size: cover;
background-position: center;
height: 500px;
color: white;
padding: 80px 50px;
position: relative;
}

.hero-content {
max-width: 600px;
}

.hero-content h5 {
font-size: 14px;
font-weight: 500;
margin-bottom: 15px;
position: relative;
padding-left: 30px;
}

.hero-content h5:before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 20px;
height: 2px;
background-color: #FF7043;
transform: translateY(-50%);
}

.hero-content h1 {
font-size: 36px;
font-weight: 700;
line-height: 1.3;
margin-bottom: 20px;
}
.hero-content p {
font-size: 14px;
line-height: 1.6;
margin-bottom: 30px;
opacity: 0.8;
}

.btn {
display: inline-block;
padding: 12px 25px;
border-radius: 3px;
font-size: 14px;
font-weight: bold;
text-decoration: none;
margin-right: 10px;
}

.btn-primary {
background-color: #FF7043;
color: white;
}

.btn-secondary {
background-color: #2980b9;
color: white;
}

/* Services Section */
.services {
display: flex;
justify-content: space-between;
padding: 0 50px;
margin-top: -70px;
position: relative;
z-index: 10;
}

.service-box {
width: 32%;
padding: 30px;
border-radius: 5px;
color: white;
}

.service-box i {
font-size: 24px;
margin-bottom: 15px;
}

.service-box h3 {
font-size: 18px;
margin-bottom: 15px;
}

.service-box p {
font-size: 14px;
line-height: 1.6;
margin-bottom: 15px;
opacity: 0.8;
}

.education-box {
background-color: #2980b9;
}

.international-box {
background-color: #FF7043;
}

.bachelor-box {
background-color: #3F51B5;
}

.read-more {
color: white;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}
/* About Section */
.about {
padding: 80px 50px;
background-color: #f8f9fa;
}

.about-heading {
text-align: center;
color: #FF7043;
font-size: 14px;
font-weight: 600;
margin-bottom: 40px;
}

.about-content {
display: flex;
align-items: flex-start;
gap: 40px;
}

.about-text {
flex: 1;
}

.about-text h2 {
font-size: 30px;
color: #333;
margin-bottom: 20px;
}

.about-text p {
font-size: 14px;
color: #666;
line-height: 1.6;
margin-bottom: 20px;
}

.about-images {
flex: 1;
display: flex;
flex-direction: column;
gap: 20px;
}

.about-image {
border-radius: 5px;
overflow: hidden;
height: 200px;
}

.about-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

/* Features */
.features {
display: flex;
margin-top: 30px;
margin-bottom: 30px;
}

.feature {
flex: 1;
display: flex;
align-items: flex-start;
margin-right: 30px;
}

.feature-icon {
background-color: #FF7043;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
}
.feature-icon i {
color: white;
font-size: 16px;
}

.feature-text h3 {
font-size: 16px;
color: #333;
margin-bottom: 8px;
}

.feature-text p {
font-size: 13px;
color: #666;
line-height: 1.5;
}
</style>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.m
in.css">
</head>
<body>
<!-- Top Bar -->
<div class="top-bar">
<div class="social-icons">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fab fa-pinterest-p"></i></a>
</div>
<div class="contact-container">
<div class="contact-info">
<i class="fas fa-phone"></i>
<span>Call Us: +123 456 789</span>
</div>
<div class="email-info">
<i class="fas fa-envelope"></i>
<span>Email: [email protected]</span>
</div>
<div class="address-info">
<i class="fas fa-map-marker-alt"></i>
<span>Address: Your Best World</span>
</div>
</div>
</div>

<!-- Header -->


<header>
<div class="logo">
<i class="fas fa-graduation-cap"></i>
<span>COLLEGE</span>
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Courses <i class="fas
fa-chevron-down"></i></a></li>
<li><a href="#">Blog <i class="fas
fa-chevron-down"></i></a></li>
<li><a href="#">Events <i class="fas
fa-chevron-down"></i></a></li>
<li><a href="#">Pages <i class="fas
fa-chevron-down"></i></a></li>
</ul>
</nav>
<button class="registration-btn">Registration Open</button>
</header>

<!-- Hero Section -->


<section class="hero">
<div class="hero-content">
<h5>WELCOME TO COLLEGE</h5>
<h1>EDUCATION IS THE BEST KEY SUCCESS IN LIFE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec aliquet diam ex, eleifero porta quam, vulputate sed nisi. Interdum
gravida arcu arcu eros.</p>
<a href="#" class="btn btn-primary">Discover More <i
class="fas fa-arrow-right"></i></a>
<a href="#" class="btn btn-secondary">Contact Us <i class="fas
fa-arrow-right"></i></a>
</div>
</section>

<!-- Services Section -->


<section class="services">
<div class="service-box education-box">
<i class="fas fa-mobile-alt"></i>
<h3>Education Services</h3>
<p>Suspendisse tincidunt egesty eleifend. Ipsum without
suspense consectetur and more during friendly.</p>
<a href="#" class="read-more">Read More <i class="fas
fa-arrow-right"></i></a>
</div>
<div class="service-box international-box">
<i class="fas fa-globe"></i>
<h3>International Fields</h3>
<p>Suspendisse tincidunt egesty eleifend. Ipsum without
suspense consectetur and more during friendly.</p>
<a href="#" class="read-more">Read More <i class="fas
fa-arrow-right"></i></a>
</div>
<div class="service-box bachelor-box">
<i class="fas fa-user-graduate"></i>
<h3>Bachelor's and Master's</h3>
<p>Suspendisse tincidunt egesty eleifend. Ipsum without
suspense consectetur and more during friendly.</p>
<a href="#" class="read-more">Read More <i class="fas
fa-arrow-right"></i></a>
</div>
</section>

<!-- About Section -->


<section class="about">
<div class="about-heading">ABOUT OUR UNIVERSITY</div>
<div class="about-content">
<div class="about-text">
<h2>A Few Words About the University</h2>
<p>Our community is being called to reimagine the future.
As the only university where a renowned design school comes together with
premier colleges, we are making learning more relevant and
transformational.</p>
<p>We are proud to offer top-range undergraduate services
such and post-payroll and direct human resources management and placement
with global business range placement strategies that integrate into
whatever and we also provide the compliance.</p>

<div class="features">
<div class="feature">
<div class="feature-icon">
<i class="fas fa-graduation-cap"></i>
</div>
<div class="feature-text">
<h3>Doctoral Degrees</h3>
<p>Consectetur adipiscing elit sed do eiusmod
tempor incididunt know more.</p>
</div>
</div>
<div class="feature">
<div class="feature-icon">
<i class="fas fa-globe"></i>
</div>
<div class="feature-text">
<h3>Global Students</h3>
<p>Consectetur adipiscing elit sed do eiusmod
tempor incididunt know more.</p>
</div>
</div>
</div>

<a href="#" class="btn btn-primary">Read More <i


class="fas fa-arrow-right"></i></a>
</div>
<div class="about-images">
<div class="about-image">
<img
src="https://media.istockphoto.com/id/1043809380/photo/campus-gates-to-uni
versity-of-arkansas.jpg?s=612x612&w=0&k=20&c=xm4sCU3Q_xxp9ctS0eMWQ6AIxmDkV
cvVDhh2lKxX-9o=" alt="University Gate">
</div>
<div class="about-image">
<img
src="https://t3.ftcdn.net/jpg/03/39/60/22/360_F_339602256_dBq6bYfHWzlnRQkX
gAMFXZfx2r1DPQns.jpg" alt="Student Girl">
</div>
</div>
</div>
</section>

OUTPUT:

You might also like