Assignment 4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My CV</title>
<style>
body {
font-family: Arial, sans-serif;margin: 0;padding: 0;background-color: #f4f4f9;color: #333;}
header {
background-color: #4CAF50;color: white;padding: 20px;text-align: center;}
.container {
width: 80%;margin: 20px auto;}
.section {
background-color: white;padding: 15px;margin-bottom: 20px;border-radius: 5px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}
h2 {
color: #4CAF50;}
.contact-info p, .education p, .skills ul {
margin: 5px 0;}
.skills ul {
list-style-type: none;padding: 0;}
.skills ul li {
background-color: #e0e0e0;margin: 5px 0;padding: 5px;border-radius: 5px;}
</style>
</head>
<body>
<header>
<h1>Anjali Sachan - Curriculum Vitae</h1>
</header>
<div class="container">
<section class="section contact-info">
<h2>Contact Information</h2>
<p><strong>Email:</strong> [email protected]</p>
<p><strong>Phone:</strong> +123 456 7890</p>
<p><strong>LinkedIn:</strong> linkedin.com/in/johndoe</p>
</section>
<section class="section experience">
<h2>Work Experience</h2>
<p><strong>Software Developer</strong> - ABC Corp. (Jan 2020 - Present)</p>
<ul>
<li>Developed web applications using HTML, CSS, JavaScript, and PHP.</li>
<li>Collaborated with teams to design and implement new features.</li>
<li>Maintained and optimized existing codebase.</li>
</ul>
<p><strong>Web Developer</strong> - XYZ Ltd. (Jun 2018 - Dec 2019)</p>
<ul>
<li>Designed and built websites for clients using HTML, CSS, and JavaScript.</li>
<li>Ensured website performance and user experience were top-notch.</li>
</ul>
</section>
<section class="section education">
<h2>Education</h2>
<p><strong>Bachelor of Science in Computer Science</strong> - University of Tech (2014 - 2018)</p>
</section>
<section class="section skills">
<h2>Skills</h2>
<ul>
<li>HTML5</li><li>CSS3</li><li>JavaScript</li><li>PHP</li><li>React</li><li>Node.js</li>
</ul>
</section>
</div>
</body>
</html>
<!DOCTYPE html>
Assignment 5
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ABC Computer Shop</title>
<style>
body {
font-family: Arial, sans-serif;margin: 20px;background-color: #f9f9f9;}
header {
text-align: center;background-color: #4CAF50;color: white;padding: 10px 0;border-radius: 8px;}
table {
width: 80%;margin: 20px auto;border-collapse: collapse;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}
th, td {
border: 1px solid #ddd;text-align: center;padding: 12px;}
th {
background-color: #4CAF50;color: white;}
tr:nth-child(even) {
background-color: #f2f2f2;}
tr:hover {
background-color: #d1f1d3;}
</style>
</head>
<body>
<header>
<h1>Welcome to ABC Computer Shop</h1>
<p>Your one-stop destination for computer peripherals!</p>
</header>
<table>
<caption><strong>Available Products</strong></caption>
<thead>
<tr>
<th>Product Name</th>
<th>Description</th>
<th>Price (₹)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Wireless Keyboard</td>
<td>Ergonomic design with long battery life</td>
<td>₹1,500</td>
</tr><tr>
<td>Gaming Mouse</td>
<td>RGB lighting with adjustable DPI</td>
<td>₹1,200</td>
</tr><tr>
<td>27-inch Monitor</td>
<td>Full HD display with slim bezel design</td>
<td>₹12,000</td>
</tr><tr>
<td>External Hard Drive</td>
<td>1TB storage with fast USB 3.0 support</td>
<td>₹5,000</td>
</tr><tr>
<td>Webcam</td>
<td>1080p resolution with noise-canceling mic</td>
<td>₹2,000</td>
</tr>
</tbody>
</table>
</body>
</html>
Assignment 6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="font-family: 'Arial, sans-serif'; font-size: 24px; font-weight: bold; color: white; background-color:
navy; padding: 10px;">
Styled Text with Inline CSS
</h1>
<p style="font-family: 'Times New Roman, serif'; font-size: 18px; font-style: italic; color: black; background-
color: lightyellow; padding: 5px;">
This is an example of text styled with inline CSS. It uses specific font, foreground color, and background
color to enhance appearance.
</p>
</body>
</html>
Assignment 7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RealPro Estate | Your Dream, Our Mission</title>
<style>
body {
font-family: Arial, sans-serif;margin: 0;padding: 0;background-color: #f4f4f4;color: #333;}
header {
background-color: #0056b3;color: white;padding: 20px 0;text-align: center;}
header h1 {
margin: 0;font-size: 2.5em;}
header p {
font-size: 1.2em;margin: 5px 0;}
nav {
background-color: #003d82;display: flex;justify-content: center;padding: 10px 0;}
nav a {
color: white;text-decoration: none;margin: 0 15px;font-size: 1.1em;}
nav a:hover {
text-decoration: underline;}
section {
max-width: 1200px;margin: 20px auto;padding: 20px;background-color: white;border-radius: 8px;box-shadow: 0 4px 8px
rgba(0, 0, 0, 0.1);}
section h2 {
text-align: center;color: #0056b3;}
.card-container {
display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 20px;margin-top: 20px;}
.card {
border: 1px solid #ddd;border-radius: 8px;overflow: hidden;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
.card img {
width: 100%;height: 200px;object-fit: cover;}
.card h3 {
margin: 0;padding: 15px;background-color: #0056b3;color: white;text-align: center;}
.card p {
padding: 15px;color: #555;font-size: 1em;}
</style>
</head>
<body>
<header>
<h1>RealPro Estate</h1>
<p>Your Dream, Our Mission</p>
</header>
<nav>
<a href="#about">About Us</a>
<a href="#assets">Our Assets</a>
<a href="#contact">Contact Us</a>
</nav>
<section id="about">
<h2>About Us</h2>
<p>
RealPro Estate is a leading real estate company specializing in creating affordable and luxurious properties in emerging
markets.
With a focus on innovation, sustainability, and community building, we are dedicated to providing homes and commercial
spaces
that meet your needs and aspirations.
</p>
</section>
<section id="assets">
<h2>Our Assets</h2>
<div class="card-container">
<div class="card">
<img src="file:///C:/Users/dell/Downloads/row%20houses.png" alt="Row Houses">
<h3>Row Houses</h3>
<p>Elegant and modern row houses designed for comfort and convenience. Perfect for families looking for a serene
environment
with ample space and privacy.</p>
</div>
<div class="card">
<img src="file:///C:/Users/dell/Downloads/apartment.png" alt="Apartments">
<h3>Apartments</h3>
<p>Affordable and luxurious apartments in prime locations. Enjoy a balanced lifestyle with state-of-the-art amenities
and community-centric designs.</p>
</div>
<div class="card">
<img src="file:///C:/Users/dell/Downloads/high-tech%20cities.png" alt="Hi-Tech Cities">
<h3>Hi-Tech Cities</h3>
<p>Futuristic smart cities with advanced infrastructure, eco-friendly systems, and modern facilities. A perfect blend
of technology and luxury.</p>
</div>
</div>
</section>
</body>
</html>
Assignment 8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wildlife Photography | Capturing Nature's Beauty</title>
<style>
body {
font-family: 'Arial', sans-serif;margin: 0;padding: 0;background-color: #f8f9fa;color: #333;}
header {
background-image: url('file:///C:/Users/dell/Downloads/Designer%20(57).jpeg');background-size: cover;background-position:
center;color: white;text-align: center;padding: 40px 20px;}
header h1 {
font-size: 3em;margin: 0;}
header p {
font-size: 1.5em;margin-top: 10px;}
nav {
background-color: #222;display: flex;justify-content: center;padding: 10px 0;}
nav a {
color: white;text-decoration: none;margin: 0 15px;font-size: 1.1em;}
nav a:hover {
text-decoration: underline;}
section {
max-width: 1200px;margin: 20px auto;padding: 20px;background-color: white;border-radius: 8px;box-shadow: 0 4px 8px
rgba(0, 0, 0, 0.1);}
section h2 {
text-align: center;color: #0056b3;margin-bottom: 20px;}
.gallery {
display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 20px;}
.gallery img {
width: 100%;height: 200px;object-fit: cover;border-radius: 8px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
.about {
text-align: center;}
.about img {
width: 150px;height: 150px;border-radius: 50%;margin: 10px 0;}
</style>
</head>
<body>
<header>
<h1>Wildlife Photography</h1>
<p>Capturing Nature's Beauty Through My Lens</p>
</header>
<nav>
<a href="#portfolio">Portfolio</a>
<a href="#about">About Me</a>
</nav>
<section id="portfolio">
<h2>My Portfolio</h2>
<div class="gallery">
<img src="file:///C:/Users/dell/Downloads/a8.jpeg">
<img src="file:///C:/Users/dell/Downloads/a3.jpeg">
<img src="file:///C:/Users/dell/Downloads/a7.jpeg">
</div>
</section>
<section id="about">
<h2>About Me</h2>
<div class="about">
<p>Hi, I'm [Photographer's Name], a passionate wildlife photographer who loves exploring the wilderness and capturing
its untamed beauty. My goal is to inspire people to appreciate and protect the natural world through my work.</p>
</div>
</section>
</html>
Assignment 9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotate Text</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.rotated-text {
transform: rotate(270deg);
font-size: 2em;
color: #333;
font-weight: bold;
}
</style>
</head>
<body>
<div class="rotated-text">This is Rotated Text</div>
</body>
</html>
<!DOCTYPE html>
Assignment 10
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PAN Card Application Form</title>
<style>
body {
font-family: Arial, sans-serif;background-color: #f4f4f9;margin: 0;padding: 0;}
.container {
max-width: 600px;margin: 30px auto;padding: 20px;background: white;border-radius: 8px;box-shadow: 0 4px 8px
rgba(0, 0, 0, 0.1);}
h1 {
text-align: center;color: #0056b3;}
form {
display: flex;flex-direction: column;}
label {
margin: 10px 0 5px;font-weight: bold;}
input, select, textarea, button {
padding: 10px;margin-bottom: 15px;border: 1px solid #ddd;border-radius: 4px;font-size: 1em;}
input:focus, select:focus, textarea:focus {
outline: none;border-color: #0056b3;}
button {
background-color: #0056b3;color: white;border: none;cursor: pointer;}
button:hover {
background-color: #003d82;}
.note {
font-size: 0.9em;color: #555;}
</style>
</head>
<body>
<div class="container">
<h1>PAN Card Application</h1>
<form action="#" method="post">
<label for="full-name">Full Name:</label>
<input type="text" id="full-name" name="full-name" placeholder="Enter your full name" required>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required>
<label for="fathers-name">Father's Name:</label>
<input type="text" id="fathers-name" name="fathers-name" placeholder="Enter your father's name" required>
<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
<option value="" disabled selected>Select your gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<label for="address">Address:</label>
<textarea id="address" name="address" rows="3" placeholder="Enter your address" required></textarea>
<label for="mobile">Mobile Number:</label>
<input type="tel" id="mobile" name="mobile" placeholder="Enter your mobile number" pattern="[0-9]{10}" required>
<span class="note">Format: 10 digits only</span>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email address" required>
<label for="aadhaar">Aadhaar Number:</label>
<input type="text" id="aadhaar" name="aadhaar" placeholder="Enter Aadhaar number" pattern="[0-9]{12}" required>
<button type="submit">Submit Application</button>
</form>
</div>
</body>
</html>
Assignment 11
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Button</title>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* Full height of the viewport */
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}
.button {
background-color: #4CAF50; /* Initial background color */
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
font-size: 16px;
border-radius: 5px;
border: none;
cursor: pointer;
transition: background-color 0.3s ease; /* Smooth hover transition */
}
.button:hover {
background-color: #125D0D; /* New hover background color */
}
</style>
</head>
<body>
<button class="button">Hover Over Me</button>
</body>
</html>
