Scribd
Upload
3 views

Assi 3 Merged

The document outlines an assignment for a web design course, where the student is tasked with creating a landing page for a fictional travel agency, 'Wanderlust Adventures,' using inline, internal, and external CSS. It includes a detailed HTML structure with sections for a header, hero, services, and footer, along with corresponding CSS styles. The assignment specifies the expected submission date and provides a sample code for both the HTML and external CSS files.

Uploaded by

SANSKRUTI PATIL
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
3 views

Assi 3 Merged

The document outlines an assignment for a web design course, where the student is tasked with creating a landing page for a fictional travel agency, 'Wanderlust Adventures,' using inline, internal, and external CSS. It includes a detailed HTML structure with sections for a header, hero, services, and footer, along with corresponding CSS styles. The assignment specifies the expected submission date and provides a sample code for both the HTML and external CSS files.

Uploaded by

SANSKRUTI PATIL
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/ 7

Department of Electronics and Telecommunication Engineering

Assignment No. 1
Subject: Web Design SEM-VIII A.Y.2024-25 5

Student Name Sanskruti Sandip Patil


Roll No. 21104B0047
Date of assignment given 29
29/01/2025
Date of expected submission 055/02/2025
Date of actual submission 055/02/2025

Title Web Design Using CSS Types – Inline, Internal, and Externa
External
Source VS Code Software
Concept Highlighted HTML
HTML, CSS

You have been hired as a junior web designer to create a landing


page for a fictional travel agency called "Wanderlust
Adventures." The landing page should use all three types of CSS
(Inline, Internal, and External) to style the webpage effectively.
The wewebpage should include the following:
Questions
1. A header with the company name and a navigation menu.
2. A hero section with a large image and a welcome message.
3. A services section listing the travel packages.
4. A footer with the company's contact information.
information

1) INDEX FILE

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
charset="UTF
<meta name="viewport" content="width=device
content="width=device--width, initial-
scale=1.0">
<title>Wanderlust Adventures</title>

<!
<!-- External CSS -->
<link rel="stylesheet" href="styles.css">

<!
<!-- Internal CSS -->
Code
<style>
/* Basic Styling */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f8f9fa;
}

/* Header Styling */
header {
background-color: #007bff;
color: white;
text-align: center;
padding: 15px;
}

nav a {
color: white;
margin: 10px;
text-decoration: none;
font-weight: bold;
}

/* Hero Section */
.hero {
text-align: center;
background: url('img/wp-2022-05-travel-featured-image.avif')
no-repeat center center/cover;
height: 60vh;
display: flex;
align-items: center;
justify-content: center;
color: black;
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0);
}

/* Services Section */
.services {
text-align: center;
padding: 20px;
background-color: white;
}

.package {
display: inline-block;
width: 30%;
margin: 10px;
padding: 10px;
background: #f4f4f4;
border-radius: 5px;
}

.package img {
width: 100%;
height: 200px;
border-radius: 5px;
}

/* Footer */
footer {
text-align: center;
background-color: #007bff;
color: white;
padding: 10px;
}
</style>
</head>
<body>

<!-- Header with Inline CSS -->


<header style="font-size: 24px;">
<h1> Wanderlust Adventures</h1>
<nav>
<a href="#"> Home</a>
<a href="#">✈ Destinations</a>
<a href="#"> Packages</a>
<a href="#"> Contact</a>
</nav>
</header>

<!-- Hero Section -->


<section class="hero">
<div>
<h2>Your Next Adventure Awaits! ✈</h2>
<p>Explore the world's most beautiful destinations with
us.</p>
</div>
</section>

<!-- Services Section -->


<section class="services">
<h2> Our Travel Packages</h2>
<div class="package">
<img src="img/photo-1506929562872-bb421503ef21.avif"
alt="Beach">
<h3>Beach Getaway</h3>
<p>Relax by the sea with stunning sunsets.</p>
</div>
<div class="package">
<img src="img/mountain-6741996_640.jpg" alt="Mountains">
<h3>Mountain Retreat</h3>
<p>Hike through breathtaking landscapes.</p>
</div>
<div class="package">
<img src="img/istockphoto-485614781-612x612.jpg"
alt="City">
<h3>City Exploration</h3>
<p>Discover the magic of bustling cities.</p>
</div>
</section>

<!-- Footer -->


<footer>
<p> Wanderlust Adventures | ✉ [email protected] | ☎ 123-
456-7890</p>
</footer>

</body>
</html>
2) EXTERNAL CSS FILE

/* External CSS - Basic Styling */

nav a:hover {
color: #ffcc00;
}

.package:hover {
background-color: #ddd;
transition: 0.3s;
}

OUTPUT :
2/5/25, 8:46 PM Wanderlust Adventures

🌍 Wanderlust Adventures
🏡 Home ✈️ Destinations 🎒 Packages 📞 Contact

Your Next Adventure Awaits! ✈️


Explore the world's most beautiful destinations with us.

🏝️ Our Travel Packages


127.0.0.1:5500/index.html 1/3
2/5/25, 8:46 PM Wanderlust Adventures

Beach Getaway Mountain Retreat


Relax by the sea with stunning sunsets. Hike through breathtaking landscapes.

City Exploration

Discover the magic of bustling cities.

127.0.0.1:5500/index.html 2/3
2/5/25, 8:46 PM Wanderlust Adventures

📍 Wanderlust Adventures | ✉ [email protected] | ☎ 123-456-7890

127.0.0.1:5500/index.html 3/3

You might also like