EXPERIMENT 8:
CSS:
8 Design a web page using CSS (Cascading Style Sheets) which includes the following:
1. Use different font, styles: In the style definition you define how each selector should
work (font, color etc.). Then, in the body of your pages, you refer to these selectors to
activate the styles
2. Set a background image for both the page and single elements on the page.
WebpageDesign.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Professional Developer Portfolio</title>
<style>
body, h1, h2, h3, p, ul, li {
margin: 0;
padding: 0;
box-sizing: border-box;
} body {
font-family: 'Arial', sans-serif;
color: #333;
background-image: url('https://source.unsplash.com/1600x900/?
technology,code');
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.9);
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
header {
text-align: center;
padding: 40px 20px;
background-image: url('https://source.unsplash.com/1200x400/?
developer,programming');
background-size: cover;
color: white;
}
header h1 {
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 10px;
}
header p {
font-size: 1.2rem;
font-style: italic;
}
main {
Roll No.2301920100085 Name: Ashutosh Mishra
padding: 20px;
}
section {
margin-bottom: 20px;
}
h2 {
font-size: 1.8rem;
margin-bottom: 10px;
color: #0056b3;
border-bottom: 2px solid #0056b3;
display: inline-block;
}
p{
font-size: 1rem;
line-height: 1.6;
margin-bottom: 10px;
}
.skills {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.skills li {
background: #0056b3;
color: white;
Roll No.2301920100085 Name: Ashutosh Mishra
padding: 10px 20px;
border-radius: 20px;
font-size: 0.9rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
footer {
text-align: center;
padding: 20px;
background-color: #333;
color: white;
}
footer p {
font-size: 0.9rem;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Professional Developer Portfolio</h1>
<p>Crafting clean code and creative solutions</p>
</header>
<main>
<section>
<h2>About Me</h2>
<p>I am Ashutosh Mishra . A full-stack developer passionate about building
user-friendly websites and applications. With expertise in both front-end and back-end
technologies, I create seamless digital experiences .</p>
</section>
Roll No.2301920100085 Name: Ashutosh Mishra
<section>
<h2>Skills</h2>
<ul class="skills">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>React</li>
<li>Node.js</li>
<li>Python</li>
<li>Database Management</li>
<li>Git & GitHub</li>
</ul>
</section>
<section>
<h2>Contact</h2>
<p>If you'd like to collaborate or have any questions, feel free to reach out!
</p>
<p>Email: [email protected]</p>
<p>Phone: +918604510578 </p>
</section>
</main>
<footer>
<p>© 2025 Professional Developer. All Rights Reserved.</p>
</footer>
</div>
</body>
</html>
Roll No.2301920100085 Name: Ashutosh Mishra
Output :
Roll No.2301920100085 Name: Ashutosh Mishra
CSS:
9 1) Control the repetition of the image with the background repeat property.
2) Define styles for links as
A: link
A: visited
A: active
A: hover
EXPERIMENT 9:
Background.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stylish Background and Links</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
background-image: url('https://source.unsplash.com/1600x900/?nature,water');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
color: #fff;
display: flex;
justify-content: center;
Roll No.2301920100085 Name: Ashutosh Mishra
align-items: center;
min-height: 100vh;
}
.container {
background: rgba(0, 0, 0, 0.7);
padding: 2rem 3rem;
border-radius: 15px;
text-align: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}
h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
color: #f1c40f;
}
p{
margin-bottom: 2rem;
color: #ddd;
}
a{
display: inline-block;
margin: 0 1rem;
padding: 0.8rem 1.5rem;
font-size: 1rem;
font-weight: bold;
color: #fff;
text-decoration: none;
border: 2px solid transparent;
border-radius: 30px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
Roll No.2301920100085 Name: Ashutosh Mishra
a:link, a:visited {
background: linear-gradient(45deg, #3498db, #9b59b6);
}
a:hover {
color: #000;
background: #f1c40f;
border-color: #fff;
transform: scale(1.1);
}
a:active {
background: #e74c3c;
}
a:hover::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.3);
z-index: -1;
filter: blur(5px);
transition: opacity 0.3s ease;
}
footer {
margin-top: 2rem;
font-size: 0.9rem;
color: #999;
}
</style>
</head>
<body>
Roll No.2301920100085 Name: Ashutosh Mishra
<div class="container">
<h1>Background & Links</h1>
<p>Hover, click, and explore the interactive styles of these links below:</p>
<a href="https://www.google.com" target="_blank">Visit Google</a>
<a href="https://www.github.com" target="_blank">Visit GitHub</a>
<footer>
Made with ❤️by a future pro coder.
</footer>
</div>
</body>
</html>
Output :
Roll No.2301920100085 Name: Ashutosh Mishra
EXPERIMENT 10:
Consider a small topic of your choice on which you can develop static Webpages and try to
10 implement all topics of html, CSS and JS within the topic. Choose any one topic.
1.Your Own Portfolio
2. To-Do List
3. Survey Form
4. A Tribute Page
5. A Questionnaire
Portfolio.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Portfolio of Ashutosh Mishra, a Software
Engineer, Full Stack Developer, and Data Structure Analyst.">
<title>Ashutosh Mishra | Portfolio</title>
<link href="https://fonts.googleapis.com/css2?
family=Inter:wght@400;600&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
color: #e0e0e0;
line-height: 1.6;
overflow-x: hidden;
}
a{
color: #50c878;
text-decoration: none;
}
a:hover {
color: #ffcc00;
}
header {
text-align: center;
padding: 4rem 1rem;
font-size: 3rem;
font-weight: 700;
color: #ffffff;
text-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
}
.profile {
Roll No.2301920100085 Name: Ashutosh Mishra
text-align: center;
margin: 3rem 0;
}
.profile img {
border-radius: 50%;
width: 140px;
height: 140px;
margin-bottom: 1rem;
border: 4px solid #50c878;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}
.profile h1 {
margin: 0.5rem 0 0.2rem;
font-size: 2.2rem;
color: #ffffff;
}
.profile p {
font-size: 1.2rem;
color: #cccccc;
}
nav {
display: flex;
justify-content: center;
gap: 2rem;
margin: 2rem 0;
}
nav a {
font-size: 1rem;
color: #e0e0e0;
padding: 0.7rem 1.5rem;
background: rgba(255, 255, 255, 0.1);
border: 2px solid #50c878;
border-radius: 50px;
transition: all 0.3s ease;
}
nav a:hover {
background: #50c878;
color: #ffffff;
}
section {
margin: 4rem auto;
padding: 3rem;
max-width: 900px;
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
Roll No.2301920100085 Name: Ashutosh Mishra
}
section h2 {
text-align: center;
margin-bottom: 1.5rem;
font-size: 2rem;
color: #ffffff;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
section p, section ul {
font-size: 1.1rem;
color: #cccccc;
}
section ul {
list-style: none;
padding: 0;
}
section li {
margin: 0.8rem 0;
padding: 1rem;
background: rgba(0, 0, 0, 0.3);
border-radius: 10px;
transition: transform 0.3s;
}
section li:hover {
transform: scale(1.05);
}
footer {
text-align: center;
padding: 2rem;
background: #1c2833;
color: #cccccc;
font-size: 0.9rem;
}
footer a {
color: #50c878;
margin: 0 0.5rem;
transition: color 0.3s;
}
footer a:hover {
color: #ffcc00;
}
@media (max-width: 768px) {
header {
font-size: 2.5rem;
Roll No.2301920100085 Name: Ashutosh Mishra
}
.profile img {
width: 100px;
height: 100px;
}
nav {
flex-direction: column;
gap: 1rem;
}
nav a {
font-size: 0.9rem;
}
section {
margin: 2rem;
padding: 2rem;
}
}
</style>
</head>
<body>
<header>
Welcome to My Portfolio
</header>
<div class="profile">
<img src="Profile.jpg" alt="Profile Picture">
<h1>Ashutosh Mishra</h1>
<p>Software Engineer | Full Stack Developer | Data Structure Analyst</p>
</div>
<nav>
<a href="#about">About</a>
<a href="#projects">Projects</a>
<a href="#skills">Skills</a>
<a href="#contact">Contact</a>
</nav>
<section id="about">
<h2>About Me</h2>
<p>I am a dedicated Software Engineer and Full Stack Developer with a
strong foundation in data structures and algorithms. I thrive in collaborative
environments, building innovative and scalable solutions to address complex
challenges.</p>
</section>
<section id="projects">
<h2>Projects</h2>
<ul>
Roll No.2301920100085 Name: Ashutosh Mishra
<li><strong>EventEase:</strong> A platform simplifying event planning
with customizable templates and vendor recommendations.</li>
<li><strong>Public Sentiment Analyzer:</strong> An NLP-powered tool to
analyze public sentiment trends and provide actionable insights.</li>
<li><strong>Notes Maker:</strong> A platform for converting typed
notes into personalized handwritten documents.</li>
</ul>
</section>
<section id="skills">
<h2>Skills</h2>
<ul>
<li><strong>Programming Languages:</strong> Python, JavaScript, C+
+</li>
<li><strong>Web Development:</strong> HTML, CSS, React</li>
<li><strong>Tools:</strong> Git, Docker, VS Code</li>
</ul>
</section>
<section id="contact">
<h2>Contact Me</h2>
<p>If you would like to get in touch, feel free to reach out through the links
below:</p>
<ul>
<li>Email: <a
href="mailto:[email protected]">[email protected]</a></li>
<li>LinkedIn: <a href="https://www.linkedin.com/in/ashutoshmishra45"
target="_blank">linkedin.com/in/ashutosh-mishra</a></li>
<li>GitHub: <a href="https://github.com/ashutosh340"
target="_blank">github.com/ashutosh-mishra</a></li>
</ul>
</section>
<footer>
<p>© 2024 Ashutosh Mishra. All rights reserved.</p>
<div>
<a href="https://www.linkedin.com/in/ashutoshmishra45"
target="_blank">LinkedIn</a>
<a href="https://github.com/ashutosh340" target="_blank">GitHub</a>
<a href="mailto:[email protected]">Email</a>
</div>
</footer>
</body>
</html>
Output :
Roll No.2301920100085 Name: Ashutosh Mishra
Roll No.2301920100085 Name: Ashutosh Mishra
Roll No:2301920100085 Name: Ashutosh Mishra
