Scribd
Upload
18 views

HTML-CSS Practical File 1

The document outlines a project involving the design of responsive websites using HTML and CSS, focusing on creating adaptable layouts, improving user experience, and styling interactive forms. It includes specific tasks such as redesigning an existing website, creating a product landing page, and implementing various form elements with CSS styling. Acknowledgments are made to the professor and others who supported the project, along with source code examples for the websites discussed.

Uploaded by

Piyush Kumar Dugar
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
18 views

HTML-CSS Practical File 1

The document outlines a project involving the design of responsive websites using HTML and CSS, focusing on creating adaptable layouts, improving user experience, and styling interactive forms. It includes specific tasks such as redesigning an existing website, creating a product landing page, and implementing various form elements with CSS styling. Acknowledgments are made to the professor and others who supported the project, along with source code examples for the websites discussed.

Uploaded by

Piyush Kumar Dugar
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/ 42

INDEX

Serial DATE TOPIC SIGNATURE


Number

To design a responsive website that adapts to


1. different screen sizes. They should create a
layout that adjusts fluidly using CSS media
queries and responsive design techniques.
Redesign an existing website using HTML and
2. CSS. Analyze the original design and propose
improvement to the layout, typography, color
scheme, and overall user experience.
To design and style an interactive form using
3. HTML and CSS. They should incorporate
various form elements such as text inputs,
check boxes, radio buttons, and select
dropdowns. Apply CSS for styling to improve
the form’s visual appearance and user
experience.
To create a product landing page for a fictional
4. product.HTML to be used to structure the
page and CSS to style the layout, typography,
buttons, and images. Main focus to be on
creating an engaging page that effectively
showcases the chosen product.
ACKNOWLEDGEMENT

I would like to express my special thanks and gratitude


to our Professor, Mr. Kumarjit Mondal, for his guidance
and support in completing this assignment.
I would also like to extend my gratitude to the Principal
Madam for giving me the opportunity to explore and
work on this project.
Additionally, I would like to thank my friends and family
for their support and encouragement during the
completion of this file.
1) To design a responsive website that adapts to
different screen sizes. They should create a
layout that adjusts fluidly using CSS media
queries and responsive design techniques.
a) Statement-
This HTML code constructs a responsive webpage for Shree Agrasain College featuring a
header with the college’s name, a top navigation bar with links to key sections, two main
content columns with information about the college and a message from the Chairman, a
sidebar with the college logo and details, and a footer with a contact link. The design ensures
adaptability to smaller screens through responsive styling, allowing the layout to adjust for
optimal viewing on various devices.
b) Source Code-
<html>
<head>
<title>Responsive Webpage</title>
<style>
a:link {
color: black;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: black;
}
a:active {
color: white;
text-decoration: none;
}
*{
box-sizing: border-box;
}
body {
margin: 0px;
}
.header {
background-color: #91ddcf;
color: black;
padding: 30px;
text-align: center;
border: 2px black;
font-size: xx-large;
}
.topnav {
overflow: hidden;
font-family: Cascadia Code;
padding: 15px;
background-color: #9cdba6;
float: left;
width: 100%;
height: 77px;
border: 2px black;
}
.topnav a {
display: block;
color: black;
text-align: center;
text-decoration: bold;
float: left;
font-style: bold;
padding: 15px;
}
.topnav a:hover {
padding: 15px;
background-color: #def9c4;
float: left;
color: black;
text-decoration: none;
border-radius: 20px;
}
.column {
float: left;
width: 40%;
padding: 5px;
border: 2px black;
background-color: #f7f9f2;
color: black;
}

.row::after {
content: "";
display: table;
}
@media screen and (max-width: 650px) {
.column {
width: 100%;
}
}
.side {
font-size: small;
padding: 10px;
background-color: #f8ede3;
color: black;
text-align: left;
border-radius: 0px;
border: 2px black;
float: right;
width: 20%;
height: 510px;
}

@media screen and (max-width: 650px) {


.side {
width: 100%;
}
}
img {
width: 81px;
height: 121px;
border-radius: 100%;
}
.footer {
width: 100%;
height: 15%;
align-items: center;
color: black;
background-color: #5db88a7a;
border: 2px black;
border-radius: 20px;
float: inline-end;
padding: 30px;
text-align: center;
font-size: x-large;
margin-bottom: 10px;
margin-left: 10px;
}
@media screen and (max-width: 650px) {
.footer {
font-size: large;
}
}
</style>
</head>
<body>
<div class="header">
<a href="https://shreeagrasaincollege.net/site/">SHREE AGRASAIN COLLEGE</a>
</div>

<div class="topnav">
<a href="https://shreeagrasaincollege.net/site/" target="_blank">Home</a>
<a href="https://shreeagrasaincollege.net/site/rule-regulations/"
target="_blank">Rules & Regulations</a>
<a href="https://shreeagrasaincollege.net/site/admission/"
target="_blank">Admission</a>
<a href= "https://shreeagrasaincollege.net/site/faculty-and-staff/"
target="_blank">Faculty</a>
<a href= "https://shreeagrasaincollege.net/site/gallary/"
target="_blank">Gallery</a>
</div>
<div class="column">
<br >
<h2>From the Desk of Chairman</h2>
<p>
..........
..........
</p>
</div>
<div class="column">
<br />
<h2>Column 2</h2>
<p>
..........
..........
</div>
<div class="side">
<center>
<img src="https://shreeagrasaincollege.net/site/wp-
content/uploads/2024/05/cropped-cropped-logo1.png" />
<h2>ABOUT</h2>
<br />
</center>
<p>
Shree Agrasain College is situated at 5/2A, Height Road, Liluah, Howrah, 711204
amidst a green environment. It is adjacent to the Liluah Railway station on the eastern
side and a five-minute-walking distance away from Grand Trunk Road. Ours is a self-
financing college. It has been established to fulfil the need of professional and
emerging area of higher learning for the state of West Bengal in general and Howrah
district and adjoining areas in particular.
The college is a unit of Shri Radhe Krishna Charitable Trust. The objective of the college
is to promote value based higher education and to inculcate truthfulness, self-reliance
and strong characters in the young minds and imbibe in them the virtues of integrity
and moral values.
</p>
</div>
<div class="footer">Contact us <a
href="https://shreeagrasaincollege.net/site/contact/" target="_blank">here</a></div>
</body>
</html>
c) Output-
2) Redesign an existing website using HTML and
CSS. Analyze the original design and propose
improvement to the layout, typography, color
scheme, and overall user experience.
a) Definition-
The provided code consists of an HTML document and accompanying CSS styles for a
web page. The HTML defines a basic structure with a navigation bar featuring
dropdown menus for categories such as "Catalog" and "Resources," as well as buttons
for "Sign In," "Get Started," and "Pricing." It includes a login form with social media
sign-in options for Twitter and Facebook. The CSS styles enhance the page's
appearance with a dark background and contrasting text colors, while defining the
layout, button styles, and hover effects. The use of `translate` for positioning
elements is notable, although it is not standard practice and could be replaced with
more conventional CSS properties like `margin` or `padding`. Additionally, the code
imports Google Fonts and utilizes gradients for visual effects, aiming for a modern and
engaging design.

b) Source Code-
HTML-
<html>
<head>
<title> Project 2 </title>
<link rel="stylesheet" type="text/css" href="style1.css">
<link
rel="website icon"
type="png"
href="https://play-lh.googleusercontent.com/zIO-uuTBjFigUIswv_h9S0-
wVIkno_obwannvzr7NrXbh_MXL_khqV7gEqBly6KXEi4"
;
/>
</head>
<body>
<div class = "style1">
datacamp
</div>
<img
src="C:\Users\piyush\Downloads\unnamed.png"
alt="logo"
width="50px"
height="50px"
/>
<div class="dropdown">
<button class="dropbtn">Catalog</button>
<div class = "dropdown-content">
<a href="#">HTML</a><br>
<a href="#">CSS</a><br>
<a href="#">JavaScript</a><br>
<a href="#">Python</a><br>
<a href="#">SQL</a><br>
<a href="#">Data Science</a><br>
<a href="#">Machine Learning</a><br>
<a href="#">Data Science Career Path</a><br>
<a href="#">Machine Learning Career Path</a><br>
</div>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Resourses</button>
<div class = "dropdown-content">
<a href="#">Courses</a><br>
<a href="#">Workshops</a><br>
<a href="#">Online Courses</a><br>
<a href="#">Documentation</a><br>
<a href="#">Community</a><br>
<a href="#">FAQ</a><br>
<a href="#">Contact</a><br>
</div>
</div>
<div class="dropdown">
<button class="dropbtn"><a href="#">Pricing</a></button>
</div>
<div class="dropdown">
<button class="dropbtn"><a href="#">For Business</a></button>
</div>
<div class="dropdown">
<button class="dropbtn"><a href="#">For Universities</a></button>
</div>
<div class="style2">
Sign In &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
</div>
<div class="style2">
Get Started
</div>
<div class = "text1">
Learn to code, build projects, and get certified in just a few clicks.
</div>
<div class = "text2">
Unlock the power of data and AI by learning Python, ChatGPT, SQL, Power BI, and
more.
</div>
<button class = "btn">
<a href = "#">
Start Learning for Free
</a>
</button>
<button class = "btn1">
<a href = "#">
DataCamp for Business
</a>
</button>
<div class="container">
<form action="#">
<div class="title">Login</div>
<div class="input-box underline">
<input type="text" placeholder="Enter Your Email" required>
<div class="underline"></div>
</div>
<div class="input-box">
<input type="password" placeholder="Enter Your Password" required>
<div class="underline"></div>
</div>
<div class="input-box button">
<input type="submit" name="" value="Continue">
</div>
</form>
<div class="option">or Connect With Social Media</div>
<div class="twitter">
<a href="#"><i class="fab fa-twitter"></i>Sign in With Twitter</a>
</div> <div class="facebook">
<a href="#"><i class="fab fa-facebook-f"></i>Sign in With Facebook</a>
</div>
</div>
</body>
</html>
CSS-
a :visited{
color:white;
}
body{
background-color:#05192D;
}
img{
translate: 40px -17px;
}
.style1{
color:white;
font-family: MV Boli;
font-size:30px;
translate: 50px 29px;
text-align:left;
margin-left: 50px;
margin-top: 20px;
}
.dropdown{
position:relative;
translate: 270px -38px;
display: inline-block;
}
.dropdown :hover{
background-color: rgba(255, 245, 245, 0.2);
}
.dropdown-content{
display: none;
color:rgba(250, 235, 215, 0);
position: absolute;
min-width: 150px;
max-width: 170px;
background-color: rgba(223, 217, 217, 0.233);
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
border: 1px white;
border-radius:30px;
padding:12px 16px;
}
.dropdown-content a:hover{
color: white;
background-color: rgba(255, 245, 245, 0.2);
padding: 5px;
border-radius:20px;
}
.dropdown-content a{
color:white;
text-decoration: none;
display: block;
padding: 5px;
}
.dropdown:hover .dropdown-content{
display: block;
background-color: rgba(240, 248, 255, 0.774);
}
.dropbtn {
color: white;
background-color: rgba(255, 250, 250, 0);
padding: 12px 16px;
font-size: 16px;
border: 2px grey;
cursor: pointer;
border-radius: 30px;
}
.dropbtn a{
text-decoration: none;
color: white;
background-color: rgba(255, 250, 250, 0);
padding: 12px 16px;
font-size: 16px;
border: 2px grey;
cursor: pointer;
border-radius: 30px;
}
.dropbtn a:hover{
background-color: rgba(255, 250, 250, 0.2);
}
.style2{
position: relative;
translate:330px -38px;
display: inline-block;
color:white;
padding:5px;
border-left: 2px solid green;
height:20px;
font-size: 16px;
text-align: left;
}
.style2:hover{
background-color: rgba(3, 128, 3, 0.411);
transition: background-color 0.2s ease-in-out;
transition: text-align center;
border-radius:10px;
width:100px;
}
.text1{
font-size: 30px;
font-family: Playwrite MX;
font-style: bold;
width:33%;
margin-left:70px;
translate:0px 25px;
color:white;
}
.text2{
font-size: 15px;
font-family: Roboto Thin;
font-style: bold;
width:28%;
margin-left:70px;
translate:0px 30px;
color:white;
}
.btn{
position: relative;
translate:70px 100px;
text-align: center;
padding: 12px;
font-size: 25px;
color:#05192D;
background-color:#16EF63;
height:60px;
font-family: Roboto;
font-weight: bold;
width:33%;
border: none;
border-radius:5px;
}
.btn1{
position: absolute;
font-family: Roboto;
font-weight: bold;
translate:-360px 190px;
text-align: center;
padding: 12px;
font-size: 25px;
color:#05192D;
background-color:#ffffffd3;
height:60px;
width:33%;
border: 2px white;
border-radius:5px;
}
.btn a{
position: relative;
text-decoration: none;
translate:10px 10px;
text-align: center;
padding: 12px;
font-size: 25px;
color:#05192D;
background-color:#16EF63;
height:60px;
font-family: Roboto;
font-weight: bold;
width:33%;
border-radius:5px;
}
.btn1 a{
position: relative;
text-decoration: none;
font-family: Roboto;
font-weight: bold;
translate:-390px 0px;
text-align: center;
padding: 12px;
font-size: 25px;
color:#05192D;
background-color:#ffffff00;
height:60px;
width:33%;
border-radius:5px;
}
@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&d
isplay=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
::selection{
background: #ff80bf;
}
.container{
background: #fff;
max-width: 350px;
width: 40%;
translate: 850px -230px;
padding: 25px 30px;
border-radius: 5px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15);
}
.container form .title{
font-size: 30px;
font-weight: 600;
margin: 20px 0 10px 0;
position: relative;
}
.container form .title:before{
content: '';
position: absolute;
height: 4px;
width: 33px;
left: 0px;
bottom: 3px;
border-radius: 5px;
background: linear-gradient(to right, #99004d 0%, #ff0080 100%);
}
.container form .input-box{
width: 100%;
height: 45px;
margin-top: 25px;
position: relative;
}
.container form .input-box input{
width: 100%;
height: 100%;
outline: none;
font-size: 16px;
border: none;
}
.container form .underline::before{
content: '';
position: absolute;
height: 2px;
width: 100%;
background: #ccc;
left: 0;
bottom: 0;
}
.container form .underline::after{
content: '';
position: absolute;
height: 2px;
width: 100%;
background: linear-gradient(to right, #99004d 0%, #ff0080 100%);
left: 0;
bottom: 0;
transform: scaleX(0);
transform-origin: left;
transition: all 0.3s ease;
}
.container form .input-box input:focus ~ .underline::after,
.container form .input-box input:valid ~ .underline::after{
transform: scaleX(1);
transform-origin: left;
}
.container form .button{
margin: 40px 0 20px 0;
}
.container .input-box input[type="submit"]{
background: linear-gradient(to right, #99004d 0%, #ff0080 100%);
font-size: 17px;
color: #fff;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}
.container .input-box input[type="submit"]:hover{
letter-spacing: 1px;
background: linear-gradient(to left, #99004d 0%, #ff0080 100%);
}
.container .option{
font-size: 14px;
text-align: center;
}
.container .facebook a,
.container .twitter a{
display: block;
height: 45px;
width: 100%;
font-size: 15px;
text-decoration: none;
padding-left: 20px;
line-height: 45px;
color: #fff;
border-radius: 5px;
transition: all 0.3s ease;
}
.container .facebook i,
.container .twitter i{
padding-right: 12px;
font-size: 20px;
}
.container .twitter a{
background: linear-gradient(to right, #00acee 0%, #1abeff 100%);
margin: 20px 0 15px 0;
}
.container .twitter a:hover{
background: linear-gradient(to left, #00acee 0%, #1abeff 100%);
margin: 20px 0 15px 0;
}
.container .facebook a{
background: linear-gradient( to right, #3b5998 0%, #476bb8 100%);
margin: 20px 0 50px 0;
}
.container .facebook a:hover{
background: linear-gradient( to left, #3b5998 0%, #476bb8 100%);
margin: 20px 0 50px 0;
}
c) Output-
3) To design and style an interactive form using
HTML and CSS. They should incorporate various
form elements such as text inputs, check boxes,
radio buttons, and select dropdowns. Apply CSS
for styling to improve the form’s visual
appearance and user experience.
a) Definition-
This HTML code creates a visually appealing and user-friendly form designed for
collecting basic user information. The form is centered on the page with a clean,
modern design that features a white background, rounded corners, and a subtle
shadow for a floating effect. The layout includes input fields for name and email, a
group of radio buttons for gender selection, checkboxes for selecting interests, and a
dropdown menu for choosing a country. The form is styled with consistent spacing,
font sizes, and colors to ensure readability and ease of use. Button interactions are
enhanced with a hover effect, providing visual feedback for user actions.
b) Source Code-
<html>
<head>
<title>Styled Form</title>
<style>
/* Basic Reset */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.form-container {
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
max-width: 500px;
width: 100%;
}

h1 {
margin-bottom: 20px;
color: #333;
text-align: center;
}

.form-group {
margin-bottom: 15px;
}

label {
display: block;
margin-bottom: 5px;
color: #555;
}
input[type="text"],
input[type="email"],
select {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}

input[type="text"]:focus,
input[type="email"]:focus,
select:focus {
border-color: #007bff;
outline: none;
}

.radio-group,
.checkbox-group {
display: flex;
gap: 10px;
}

.radio-group label,
.checkbox-group label {
display: flex;
align-items: center;
font-size: 16px;
color: #555;
}

input[type="radio"],
input[type="checkbox"] {
margin-right: 8px;
}

button {
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
width: 100%;
transition: background-color 0.3s;
}

button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="form-container">
<h1>Interactive Form</h1>
<form>
<div class="form-group">
<label for="name">Name:</label>
<input
type="text"
id="name"
name="name"
placeholder="John Doe"
required
/>
</div>

<div class="form-group">
<label for="email">Email:</label>
<input
type="email"
id="email"
name="email"
placeholder="johndoe@example.com"
required
/>
</div>

<div class="form-group">
<label>Gender:</label>
<div class="radio-group">
<label
><input type="radio" name="gender" value="male" /> Male</label
>
<label
><input type="radio" name="gender" value="female" /> Female</label
>
<label
><input type="radio" name="gender" value="other" /> Other</label
>
</div>
</div>

<div class="form-group">
<label>Interests:</label>
<div class="checkbox-group">
<label
><input type="checkbox" name="interests" value="coding" />
Coding</label
>
<label
><input type="checkbox" name="interests" value="design" />
Design</label
>
<label
><input type="checkbox" name="interests" value="writing" />
Writing</label
>
</div>
</div>

<div class="form-group">
<label for="country">Country:</label>
<select id="country" name="country">
<option value="usa">United States</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
<option value="australia">Australia</option>
</select>
</div>

<div class="form-group">
<button type="submit">Submit</button>
</div>
</form>
</div>
</body>
</html>
c) Output-
4) To create a product landing page for a
fictional product.HTML to be used to structure
the page and CSS to style the layout, typography,
buttons, and images. Main focus to be on creating
an engaging page that effectively showcases the
chosen product.
a) Definition-
This HTML code sets up a product landing page designed to attract potential
customers with a clean, modern layout. The page features a header with a navigation
bar that includes links to key sections like Features, Pricing, and Contact. The hero
section showcases a high-quality background image with a compelling headline and
call-to-action button.

The main content area is divided into three sections: Features, Pricing, and Contact.
Each section is designed to be visually distinct, with the Features section highlighting
key product attributes using images and descriptions, the Pricing section presenting
different subscription plans, and the Contact section offering an email link for
inquiries. The design uses a consistent color scheme, with prominent buttons and
clear typography to enhance user experience. The footer provides a simple copyright
notice, rounding out the professional look of the landing page.
b) Source Code-
<html>
<head>
<title>Product Landing Page</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
}
.container {
width: 80%;
margin: 0 auto;
max-width: 1200px;
}
.header {
background: #f4f4f4;
padding: 20px 0;
border-bottom: 1px solid #ddd;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav .logo {
font-size: 24px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.nav-links {
list-style: none;
display: flex;
}
.nav-links li {
margin-left: 20px;
}
.nav-links a {
text-decoration: none;
color: #333;
font-size: 16px;
}
.nav-links a:hover {
color: #007bff;
}
.hero {
background:
url("https://images.wallpaperscraft.com/image/single/pineapple_fruit_shade_113937
_1600x900.jpg")
no-repeat center center/cover;
color: #fff;
text-align: center;
padding: 80px 20px;
}
.hero h1 {
font-size: 36px;
margin-bottom: 20px;
}
.hero p {
font-size: 18px;
margin-bottom: 30px;
}
.btn-main {
display: inline-block;
padding: 10px 20px;
background: #007bff;
color: #fff;
text-decoration: none;
border-radius: 4px;
font-size: 18px;
}
.btn-main:hover {
background: #0056b3;
}
.features {
padding: 50px 20px;
background: #f9f9f9;
text-align: center;
}
.features h2 {
margin-bottom: 30px;
font-size: 28px;
}
.feature-item {
margin-bottom: 20px;
}
.feature-item img {
width: 100px;
height: auto;
margin-bottom: 10px;
}
.feature-item h3 {
font-size: 22px;
margin-bottom: 10px;
}
.feature-item p {
font-size: 16px;
}
.pricing {
padding: 50px 20px;
background: #fff;
text-align: center;
}
.pricing h2 {
margin-bottom: 30px;
font-size: 28px;
}
.pricing-plan {
margin-bottom: 20px;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
background: #f4f4f4;
}
.pricing-plan h3 {
font-size: 24px;
margin-bottom: 10px;
}
.pricing-plan p {
font-size: 22px;
margin-bottom: 20px;
}
.pricing-plan ul {
list-style: none;
margin-bottom: 20px;
}
.pricing-plan ul li {
margin-bottom: 10px;
}
.btn-secondary {
display: inline-block;
padding: 10px 20px;
background: #007bff;
color: #fff;
text-decoration: none;
border-radius: 4px;
font-size: 16px;
}
.btn-secondary:hover {
background: #0056b3;
}
.contact {
padding: 50px 20px;
background: #f9f9f9;
text-align: center;
}
.contact h2 {
margin-bottom: 20px;
font-size: 28px;
}
.contact p {
font-size: 18px;
margin-bottom: 20px;
}
.contact .btn-main {
padding: 10px 20px;
background: #007bff;
color: #fff;
text-decoration: none;
border-radius: 4px;
font-size: 18px;
}

.footer {
background: #333;
color: #fff;
text-align: center;
padding: 20px 0;
}
.footer p {
font-size: 14px;
}
</style>
</head>
<body>
<header class="header">
<nav class="nav">
<div class="container">
<a href="#" class="logo">PinEApplE</a>
<ul class="nav-links">
<li><a href="#features">Features</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
<section class="hero">
<div class="container">
<h1>Introducing the Ultimate Gadget</h1>
<p>
The most advanced gadget you'll ever need. Experience innovation
like never before.
</p>
<a href="#buy" class="btn-main">Buy Now</a>
</div>
</section>
</header>

<main>
<section id="features" class="features">
<div class="container">
<h2>Features</h2>
<div class="feature-item">
<img src="feature1.png" alt="Feature 1" />
<h3>Feature 1</h3>
<p>Description of feature 1.</p>
</div>
<div class="feature-item">
<img src="feature2.png" alt="Feature 2" />
<h3>Feature 2</h3>
<p>Description of feature 2.</p>
</div>
<div class="feature-item">
<img src="feature3.png" alt="Feature 3" />
<h3>Feature 3</h3>
<p>Description of feature 3.</p>
</div>
</div>
</section>

<section id="pricing" class="pricing">


<div class="container">
<h2>Pricing</h2>
<div class="pricing-plan">
<h3>Basic Plan</h3>
<p>$19.99/month</p>
<ul>
<li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li>
</ul>
<a href="#buy" class="btn-secondary">Choose Plan</a>
</div>
<div class="pricing-plan">
<h3>Pro Plan</h3>
<p>$39.99/month</p>
<ul>
<li>All features in Basic</li>
<li>Additional Feature</li>
<li>Priority Support</li>
</ul>
<a href="#buy" class="btn-secondary">Choose Plan</a>
</div>
</div>
</section>

<section id="contact" class="contact">


<div class="container">
<h2>Contact Us</h2>
<p>
If you have any questions or need more information, feel free to
reach out to us.
</p>
<a href="mailto:contact@pineapple.com" class="btn-main">Email Us</a>
</div>
</section>
</main>

<footer class="footer">
<div class="container">
<p>&copy; 2024 PinEApplE. All rights reserved.</p>
</div>
</footer>
</body>
</html>
c) Output-

You might also like