Scribd
Upload
54 views15 pages

Home Works

Uploaded by

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

Home Works

Uploaded by

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

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Advanced Responsive Web Page</title>
</head>
<body>
<!-- Header Section with Navigation -->
<header class="sticky-header">
<nav class="navbar">
<div class="brand-logo">MyWebsite</div>
<div class="hamburger" onclick="toggleMenu()">&#9776;</div>
<ul id="navMenu" class="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

<!-- Main Content -->


<main>
<!-- Hero Section -->
<section class="hero">
<div class="hero-overlay">
<h1>Discover Amazing Things</h1>
<button class="cta-button">Get Started</button>
</div>
</section>

<!-- Grid Layout with Cards -->


<section class="card-grid">
<div class="card">
<img src="www.homework.jpg" alt="Card Image 1">
<h2>Card Title 1</h2>
<p>Short description of card content. Learn more about this by clicking below.</p>
<a href="#readmore" class="read-more">Read More</a>
</div>
<div class="card">
<img src="https://www.homework.jpg" alt="Card Image 2">
<h2>Card Title 2</h2>
<p>Short description of card content. Learn more about this by clicking below.</p>
<a href="#readmore" class="read-more">Read More</a>
</div>
<div class="card">
<img src="https://www.homework.jpg" alt="Card Image 3">
<h2>Card Title 3</h2>
<p>Short description of card content. Learn more about this by clicking below.</p>
<a href="#readmore" class="read-more">Read More</a>
</div>
</section>

<!-- Testimonial Section -->


<section class="testimonials">
<h2>What Our Users Say</h2>
<div class="testimonial-slider">
<div class="testimonial">
<p>"This website is fantastic. It has helped me a lot!" - User A</p>
</div>
<div class="testimonial">
<p>"Amazing services, highly recommended!" - User B</p>
</div>
<div class="testimonial">
<p>"I love the design and the ease of use!" - User C</p>
</div>
</div>
</section>
</main>

<!-- Footer Section -->


<footer>
<div class="social-media">
<a href="#facebook">Facebook</a>
<a href="#twitter">Twitter</a>
<a href="#instagram">Instagram</a>
</div>
<p>&copy; 2024 MyOwnWebsite. All rights reserved.</p>
</footer>

<script src="script.js"></script>
</body>
</html>

Homework css
/* Basic Reset */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}

/* Header Section */
.sticky-header {
position: sticky;
top: 0;
background-color: #333;
color: white;
z-index: 1000;
}

.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
}

.brand-logo {
font-size: 1.5em;
font-weight: bold;
}

.nav-links {
list-style-type: none;
display: flex;
}

.nav-links li {
margin: 0 15px;
}

.nav-links a {
color: white;
text-decoration: none;
transition: color 0.3s ease;
}

.nav-links a:hover {
color: #f00;
}

.hamburger {
font-size: 2em;
display: none;
cursor: pointer;
}

/* Hero Section */
.hero {
background: url('https://via.placeholder.com/1200x500') no-repeat center
center/cover;
height: 500px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
color: white;
}

.hero-overlay {
background-color: rgba(0, 0, 0, 0.6);
padding: 20px;
text-align: center;
}

.cta-button {
padding: 10px 20px;
margin-top: 20px;
border: none;
background-color: #ff6347;
color: white;
cursor: pointer;
transition: background-color 0.3s ease;
}

.cta-button:hover {
background-color: #f00;
}

/* Card Grid Section */


.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
padding: 20px;
}

.card {
background: white;
padding: 20px;
border: 1px solid #ddd;
text-align: center;
transition: transform 0.3s ease;
}

.card:hover {
transform: scale(1.05);
}

.card img {
width: 100%;
height: auto;
}

.read-more {
display: block;
margin-top: 10px;
color: #007bff;
text-decoration: none;
transition: color 0.3s ease;
}

.read-more:hover {
color: #f00;
}

/* Testimonial Section */
.testimonials {
padding: 40px;
background-color: #f5f5f5;
text-align: center;
}

.testimonial-slider {
display: flex;
gap: 20px;
overflow-x: auto;
}

.testimonial {
background: #fff;
padding: 20px;
border: 1px solid #ddd;
min-width: 300px;
}

/* Footer Section */
footer {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}

.social-media {
margin-bottom: 10px;
}

.social-media a {
margin: 0 10px;
color: white;
text-decoration: none;
transition: color 0.3s ease;
}

.social-media a:hover {
color: #f00;
}

/* Responsive Styles */
@media (max-width: 768px) {
.nav-links {
display: none;
flex-direction: column;
background: #333;
position: absolute;
top: 50px;
right: 20px;
width: 150px;
padding: 20px;
}

.nav-links.nav-expanded {
display: flex;
}

.hamburger {
display: block;
}
}

JavaScript
function toggleMenu() {
const nav = document.getElementById("navMenu");
nav.classList.toggle("nav-expanded");
}
Question 2
HTML ( registration form)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Enhanced Registration Form</title>
</head>
<body>
<!-- Registration Form -->
<form id="registrationForm">
<h2>User Registration</h2>

<label for="fullName">Full Name:</label>


<input type="text" id="fullName" name="fullName" placeholder="Enter your full
name" required>

<label for="email">Email Address:</label>


<input type="email" id="email" name="email" placeholder="Enter your email
address" required>

<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your
password" required>

<label for="confirmPassword">Confirm Password:</label>


<input type="password" id="confirmPassword" name="confirmPassword"
placeholder="Confirm your password" required>

<label>Gender:</label>
<input type="radio" name="gender" value="Male" required> Male
<input type="radio" name="gender" value="Female"> Female
<input type="radio" name="gender" value="Other"> Other

<label>Interests:</label>
<input type="checkbox" name="interest" value="Coding"> Coding
<input type="checkbox" name="interest" value="Music"> Music
<input type="checkbox" name="interest" value="Sports"> Sports
<input type="checkbox" name="interest" value="Reading"> Reading
<input type="checkbox" name="interest" value="Traveling"> Traveling

<label for="country">Country:</label>
<select id="country" name="country" required>
<option value="">Select your country</option>
<option value="USA">USA</option>
<option value="UK">UK</option>
<option value="Canada">Canada</option>
<option value="Australia">Australia</option>
<option value="India">India</option>
</select>

<label for="comments">Additional Comments:</label>


<textarea id="comments" name="comments" placeholder="Enter additional
comments here..."></textarea>

<button type="submit">Submit</button>
</form>

<!-- Modal for Submission -->


<div id="modal" class="modal">
<div class="modal-content">
<span class="close-button" onclick="closeModal()">&times;</span>
<h3>Registration Successful!</h3>
<p id="userDetails"></p>
</div>
</div>

<script src="script.js"></script>
</body>
</html>

CSS ( modal and form styling)


/* Basic Reset */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}

/* Form Styling */
form {
width: 50%;
margin: 20px auto;
padding: 20px;
border: 1px solid #ddd;
background: #f9f9f9;
border-radius: 10px;
}

label {
display: block;
margin-top: 10px;
font-weight: bold;
}

input, select, textarea, button {


width: 100%;
margin-top: 5px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}

button {
margin-top: 20px;
background: #007bff;
color: white;
cursor: pointer;
transition: background 0.3s ease;
}

button:hover {
background: #0056b3;
}
/* Modal Styling */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
}

.modal-content {
background: white;
padding: 20px;
border-radius: 10px;
width: 80%;
max-width: 500px;
text-align: center;
}

.close-button {
float: right;
cursor: pointer;
font-size: 1.5em;
}

JavaScript
document.addEventListener("DOMContentLoaded", () => {
// Load data from local storage
const fields = ["fullName", "email", "country", "comments"];
fields.forEach(field => {
if (localStorage.getItem(field)) {
document.getElementById(field).value = localStorage.getItem(field);
}
});
document.getElementById("registrationForm").addEventListener("submit", function
(event) {
event.preventDefault();

const password = document.getElementById("password").value;


const confirmPassword = document.getElementById("confirmPassword").value;

if (password !== confirmPassword) {


alert("Passwords do not match!");
return;
}

// Save data to local storage


fields.forEach(field => {
localStorage.setItem(field, document.getElementById(field).value);
});

// Show the modal with user details


showModal();
});
});

function showModal() {
const userDetails = `
Full Name: ${document.getElementById("fullName").value}<br>
Email: ${document.getElementById("email").value}<br>
Gender: ${document.querySelector('input[name="gender"]:checked').value}<br>
Country: ${document.getElementById("country").value}<br>
Comments: ${document.getElementById("comments").value}
`;
document.getElementById("userDetails").innerHTML = userDetails;

document.getElementById("modal").style.display = "flex";
}

function closeModal() {
document.getElementById("modal").style.display = "none";
}
HTML grid layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="grid-styles.css">
<title>CSS Grid Layout</title>
</head>
<body>
<div class="container">
<!-- Header Section -->
<header class="header">
<div class="logo">Logo</div>
<nav class="nav">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

<!-- Sidebar Section -->


<aside class="sidebar">Sidebar Navigation</aside>

<!-- Main Content Section -->


<main class="content">
<article class="article">Article 1</article>
<article class="article">Article 2</article>
</main>

<!-- Extra Sidebar Section -->


<aside class="extra-sidebar">Advertisements / Links</aside>

<!-- Footer Section -->


<footer class="footer">Footer Links & Contact Information</footer>
</div>
</body>
</html>

Css grid layout


/* Basic Reset */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}

/* Container Grid Layout */


.container {
display: grid;
grid-template-areas:
"header header"
"sidebar content"
"sidebar extra-sidebar"
"footer footer";
grid-template-columns: 1fr 3fr;
gap: 20px;
padding: 20px;
}

.header {
grid-area: header;
background: #333;
color: white;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}

.nav ul {
list-style-type: none;
display: flex;
}
.nav li {
margin-left: 20px;
}

.nav a {
color: white;
text-decoration: none;
}

.sidebar {
grid-area: sidebar;
background: #f4f4f4;
padding: 20px;
}

.content {
grid-area: content;
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}

.article {
background: #fff;
padding:

You might also like