Name : Nannuri TharunSai
REG No : RA2311003050135
Class : CSE-A
Exercise 1: Basic HTML Page
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>My First Web Page</h1>
<p>I am learning HTML and CSS!</p>
<b>John Doe</b>
<hr>
</body>
</html>
Exercise 2: Add Basic CSS Styling
<!DOCTYPE html>
<html>
<head>
<title>Styled Web Page</title>
<style>
body {
background-color: lightblue;
}
h1 {
color: darkgreen;
text-align: center;
}
p{
margin-left: 50px;
}
</style>
</head>
<body>
<h1>My First Web Page</h1>
<p>I am learning HTML and CSS!</p>
<b>John Doe</b>
<hr>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Styled Web Page</title>
<style>
body {
background-color: lightblue;
}
h1 {
color: darkgreen;
text-align: center;
}
p{
margin-left: 50px;
}
</style>
</head>
<body>
<h1>My First Web Page</h1>
<p>I am learning HTML and CSS!</p>
<b>John Doe</b>
<hr>
</body>
</html>
Exercise 3: Create a Mini Bio Card
<!DOCTYPE html>
<html>
<head>
<title>Mini Bio Card</title>
<style>
.bio-card {
background-color: beige;
color: navy;
border: 2px solid navy;
padding: 20px;
width: 300px;
margin: 30px auto;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="bio-card">
<h2>John Doe</h2>
<p>A passionate computer science student exploring web development!</p>
</div>
</body>
</html>
Exercise 4: Design a Simple Web Banner
<!DOCTYPE html>
<html>
<head>
<title>Web Banner</title>
<style>
.banner {
background: black;
color: white;
padding: 15px;
font-family: Arial, sans-serif;
text-align: center;
font-size: 1.5em;
}
</style>
</head>
<body>
<div class="banner">Welcome to My Website</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Web Banner</title>
<style>
.banner {
background: black;
color: white;
padding: 15px;
font-family: Arial, sans-serif;
text-align: center;
font-size: 1.5em;
}
</style>
</head>
<body>
<div class="banner">Welcome to My Website</div>
</body>
</html>
Exercise 5: Basic CSS Selector Exercises
<!DOCTYPE html>
<html>
<head>
<title>CSS Selectors</title>
<style>
/* Universal Selector */
*{
background-color: #f0f8ff;
}
/* Element Selector */
p{
font-size: 18px;
}
h1 {
color: red;
}
/* Class Selector */
.important {
font-weight: bold;
background-color: yellow;
}
/* ID Selector */
#main-heading {
text-align: center;
border: 2px solid #333;
padding: 8px;
}
</style>
</head>
<body>
<h1 id="main-heading">Main Heading</h1>
<p>This is a paragraph.</p>
<div class="important">Important div content</div>
<span class="important">Important span content</span>
</body>
</html>
Exercise 6: Basic Grid Layout for a Portfolio
<!DOCTYPE html>
<html>
<head>
<title>Portfolio Grid</title>
<style>
.portfolio-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 30px;
}
.project-card {
background: #e3f2fd;
padding: 20px;
border-radius: 8px;
transition: transform 0.3s;
}
.project-card:hover {
transform: scale(1.05);
}
</style>
</head>
<body>
<div class="portfolio-grid">
<div class="project-card">Project 1</div>
<div class="project-card">Project 2</div>
<div class="project-card">Project 3</div>
<div class="project-card">Project 4</div>
<div class="project-card">Project 5</div>
<div class="project-card">Project 6</div>
</div>
</body>
</html>
Exercise 7: Animated Grid Item Expansion
<!DOCTYPE html>
<html>
<head>
<title>Animated Grid Expansion</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 200px);
gap: 15px;
margin: 40px;
}
.grid-item {
background: #b2ebf2;
border-radius: 8px;
transition: all 0.4s;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2em;
cursor: pointer;
}
.expanded {
grid-column: span 2;
grid-row: span 2;
font-size: 2em;
background: #0097a7;
color: white;
z-index: 1;
}
</style>
<script>
function expandItem(element) {
// Remove any previously expanded class
[Link]('.grid-item').forEach(item => [Link]('expanded'));
[Link]('expanded');
}
</script>
</head>
<body>
<div class="grid-container">
<div class="grid-item" onclick="expandItem(this)">Item 1</div>
<div class="grid-item" onclick="expandItem(this)">Item 2</div>
<div class="grid-item" onclick="expandItem(this)">Item 3</div>
<div class="grid-item" onclick="expandItem(this)">Item 4</div>
</div>
</body>
</html>