PART -A
6. Write code in HTML to develop a webpage having two frames that divide the webpage
into two equal rows and then divide the row into equal columns fill each frame with a
different background color.
<!DOCTYPE html>
<html>
<head>
<title>Two Frames with Equal Columns</title>
<style>
/* Container for the entire webpage */
.container
{
display: flex;
flex-direction: column; /* Stack the frames vertically */
height: 100vh; /* Full height of the viewport */
}
/* Each row (frame) inside the container */
.frame
{
display: flex;
flex: 1; /* Equal height for each frame */
}
/* Columns inside each frame */
.column
{
flex: 1; /* Equal width for each column */
padding: 20px;
box-sizing: border-box;
text-align: center;
font-size: 20px;
font-weight: bold;
}
/* Background colors for each frame */
.frame1
{
background-color: lightblue;
}
.frame2
{
background-color: lightgreen;
}
/* Border styling for better visibility */
.column
{
border: 2px solid white;
}
</style>
</head>
<body>
<!-- Container to hold the two frames -->
<div class="container">
<!-- First frame (row 1) with two columns -->
<div class="frame frame1">
<div class="column">Column 1 (Frame 1)</div>
<div class="column">Column 2 (Frame 1)</div>
</div>
<!-- Second frame (row 2) with two columns -->
<div class="frame frame2">
<div class="column">Column 1 (Frame 2)</div>
<div class="column">Column 2 (Frame 2)</div>
</div>
</div>
</body>
</html>
7.Write CSS code to Use Inline CSS to format your ID Card.
<!DOCTYPE html>
<html>
<head>
<title>Student ID Card</title>
<style>
*{
padding: 0;
margin: 0;
}
.card
{
width: 300px;
background-color: lightyellow;
margin: 20px auto;
padding: 50px;
border-radius: 10px;
box-shadow: 10px 10px 10px rgba(177, 12, 12, 0.1);
text-align: center; /* Center content instead of using <center> */
}
.passs
{
border: solid black;
border-radius: 15px;
}
</style>
</head>
<body>
<div class="card">
<img class="pass" style="height: 90px; width: 90px;"
src="C:\Users\vijay\OneDrive\Desktop\kle-logo.gif" alt="logo">
<h2 style="color: red;">K.L.E. SOCIETY'S</h2>
<h3 style="color: darkblue;">Shri Kadasiddeshwar Arts College & H.S. Kotambari
Science Institute</h3>
<img class="passs" style="height: 140px; width: 100px;"
src="C:\Users\Admin\Desktop\andrew.jpg" alt="passport">
<h1 style="color: blue;">Tarunkumar</h1>
<p style="color: red;">Course: B.Sc | I / II / III Year</p>
<h3 style="color: blue;">Validity: November 2022 to 2025</h3>
</div>
</body>
</html>
8.Using HTML, CSS create display a text called—Hello India! On top of an image of
India map using overlay.
<html>
<head>
<title>overlap</title>
<style>
*{
margin:0; padding:0;
}
.overlap{
text-align:center;
margin-top:50px;
}
.overlap h1{
position:absolute;
font-size:120px;
color:blue;
top:20%;
left:22%;
}
</style>
<body>
<div class="overlap">
<img src="C:\Users\vijay\OneDrive\Desktop\indiamap.jpg" alt="map">
<h1>
Hello India!
</h1>
</div>
</body>
</html>
