Assignment 2
Html.index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Priya Sharma | Creative Web Designer</title>
<link href="https://fonts.googleapis.com/css2?
family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<div class="container">
<h1 class="logo">Priya<span>Sharma</span></h1>
<nav class="navbar">
<ul>
<li><a href="#home" class="active">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#work">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
>
<section id="home" class="hero">
<div class="hero-text">
<h2>Hi, I'm <span>Priya Sharma</span></h2>
<p>I’m a freelance web designer who transforms ideas into interactive digital
experiences.</p>
<a href="#contact" class="btn">Let’s Collaborate</a>
</div>
</section>
<section id="about" class="about">
<div class="about-container">
<div class="about-text">
<h2>About Me</h2>
<p>
I am a creative and detail-oriented designer with a passion for crafting
visually appealing and user-friendly websites. My focus is on clean design,
efficient code, and responsive layouts that perform beautifully across all
devices.
</p>
</div>
<aside class="skills">
<h3>Skills</h3>
<ul>
<li>HTML5 / CSS3</li>
<li>JavaScript (Basic)</li>
<li>Responsive Design</li>
<li>UI/UX Wireframing</li>
</ul>
</aside>
</div>
</section>
<section id="work" class="portfolio">
<h2>My Recent Projects</h2>
<div class="grid-gallery">
<div class="grid-item">Landing Page</div>
<div class="grid-item">E-Commerce UI</div>
<div class="grid-item">Portfolio Design</div>
<div class="grid-item">Blog Layout</div>
<div class="grid-item">Travel Website</div>
<div class="grid-item">Restaurant UI</div>
</div>
</section>
<section class="testimonial">
<div class="photo"></div>
<div class="quote">
<h3>What My Clients Say</h3>
<p>"Priya’s creativity and attention to detail gave our business website a fresh,
professional look. Highly recommended!"</p>
<p><strong>– Ananya Gupta, Startup Founder</strong></p>
</div>
</section>
<section id="contact" class="contact">
<h2>Get In Touch</h2>
<form>
<label for="name">Name</label>
<input type="text" id="name" placeholder="Enter your name" required>
<label for="email">Email</label>
<input type="email" id="email" placeholder="Enter your email" required>
<label for="message">Message</label>
<textarea id="message" rows="5" placeholder="Your message here..."></textarea>
<button type="submit" class="btn">Send Message</button>
</form>
</section>
<footer>
<p>© 2025 Priya Sharma | Designed with by Priya</p>
</footer>
</body>
</html>
Style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #2b2e4a;
--accent: #e84545;
--light: #f9f9f9;
--text: #333;
}
body {
font-family: 'Montserrat', sans-serif;
background-color: var(--light);
color: var(--text);
line-height: 1.6;
}
.header {
background: var(--primary);
color: #fff;
padding: 1rem 5%;
position: sticky;
top: 0;
}
.logo {
font-size: 1.6rem;
font-weight: 700;
}
.logo span {
color: var(--accent);
}
.navbar ul {
display: flex;
gap: 1.5rem;
list-style: none;
}
.navbar a {
color: #fff;
text-decoration: none;
font-weight: 500;
transition: 0.3s;
}
.navbar a:hover,
.navbar .active {
color: var(--accent);
}
.hero {
background: linear-gradient(135deg, var(--primary), var(--accent));
color: #fff;
text-align: center;
padding: 6rem 2rem;
}
.hero-text h2 {
font-size: 2.5rem;
}
.hero-text span {
color: #ffe66d;
}
.hero-text p {
margin: 1rem auto;
max-width: 600px;
}
.btn {
background: #fff;
color: var(--primary);
padding: 10px 25px;
border-radius: 5px;
font-weight: 600;
transition: 0.3s;
}
.btn:hover {
background: var(--accent);
color: #fff;
}
.about {
padding: 3rem 5%;
background: #fff;
}
.about-container {
display: flex;
justify-content: space-between;
gap: 2rem;
flex-wrap: wrap;
}
.about-text {
flex: 2;
}
.skills {
flex: 1;
background: var(--light);
padding: 1rem;
border-left: 4px solid var(--accent);
border-radius: 8px;
}
.skills h3 {
margin-bottom: 0.5rem;
}
.skills ul {
list-style-type: square;
padding-left: 1.2rem;
}
.portfolio {
padding: 3rem 5%;
text-align: center;
}
.grid-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 1rem;
margin-top: 2rem;
}
.grid-item {
background: var(--primary);
color: #fff;
padding: 2rem;
border-radius: 10px;
transition: transform 0.3s ease;
}
.grid-item:hover {
transform: scale(1.05);
background: var(--accent);
}
.testimonial {
display: flex;
align-items: center;
background: #fff;
padding: 2rem 5%;
border-top: 5px solid var(--accent);
border-radius: 8px;
margin: 3rem 5%;
}
.photo {
width: 100px;
height: 100px;
background: #ccc;
border-radius: 50%;
margin-right: 1.5rem;
}
.quote h3 {
color: var(--primary);
margin-bottom: 0.5rem;
}
.contact {
background: #f4f7ff;
padding: 3rem 5%;
text-align: center;
}
form {
max-width: 500px;
margin: 1rem auto;
display: flex;
flex-direction: column;
text-align: left;
}
label {
margin-top: 1rem;
font-weight: 600;
}
input, textarea {
width: 100%;
padding: 10px;
border: 1px solid #bbb;
border-radius: 6px;
margin-top: 5px;
font-size: 1rem;
}
input:focus, textarea:focus {
border-color: var(--accent);
outline: none;
}
footer {
background: var(--primary);
color: #fff;
text-align: center;
padding: 1rem;
}
@media (max-width: 768px) {
.about-container, .testimonial {
flex-direction: column;
text-align: center;
}
.photo {
margin: 0 auto 1rem;
}
.navbar ul {
flex-wrap: wrap;
justify-content: center;
}
}
Output:
