Scribd
Upload
5 views7 pages

Web Quiz2

The document contains two HTML and CSS coding examples. The first example creates a styled table displaying student marks, while the second example showcases three attractive boxes in a row, each with a gradient background and hover effects. Both examples emphasize responsive design and modern styling techniques.

Uploaded by

sairaaltaf106
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
5 views7 pages

Web Quiz2

The document contains two HTML and CSS coding examples. The first example creates a styled table displaying student marks, while the second example showcases three attractive boxes in a row, each with a gradient background and hover effects. Both examples emphasize responsive design and modern styling techniques.

Uploaded by

sairaaltaf106
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/ 7

Question#1.

Create a table in html and style this table in CSS

CODING
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Student Marks Table</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #f0f4f8;
margin: 0;
padding: 40px;
display: flex;
justify-content: center;
}

table {
border-collapse: collapse;
width: 90%;
max-width: 800px;
background-color: #ffffff;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
border-radius: 12px;
overflow: hidden;
}

caption {
padding: 15px;
font-size: 1.8rem;
font-weight: bold;
background-color: #0077b6;
color: white;
text-align: center;
}

th, td {
padding: 14px 20px;
text-align: center;
border-bottom: 1px solid #e0e0e0;
}

th {
background-color: #90e0ef;
color: #03045e;
font-size: 1.1rem;
}

tr:nth-child(even) {
background-color: #f6fafd;
}

tr:hover {
background-color: #caf0f8;
cursor: pointer;
}

td {
font-size: 1rem;
color: #333;
}
</style>
</head>
<body>

<table>
<caption>📚 BS Student Marks Sheet</caption>
<thead>
<tr>
<th>Roll No</th>
<th>Student Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
</thead>
<tbody>
<tr>
<td>BS001</td>
<td>Ali Raza</td>
<td>Data Structures</td>
<td>89</td>
</tr>
<tr>
<td>BS002</td>
<td>Sana Malik</td>
<td>Operating Systems</td>
<td>93</td>
</tr>
<tr>
<td>BS003</td>
<td>Ahmed Khan</td>
<td>Web Development</td>
<td>88</td>
</tr>
<tr>
<td>BS004</td>
<td>Hira Fatima</td>
<td>Database Systems</td>
<td>91</td>
</tr>
</tbody>
</table>

</body>
</html>

OUTPUT
Question#2.
Create a three boxes in one row in html and css

CODING
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Attractive Three Boxes</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: 'Poppins', sans-serif;
background: #e9f5ff;
padding: 50px 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

.container {
display: flex;
gap: 30px;
flex-wrap: wrap;
max-width: 1000px;
justify-content: center;
}

.box {
flex: 1 1 250px;
background: linear-gradient(135deg, #48c6ef, #6f86d6);
color: white;
padding: 30px;
border-radius: 15px;
text-align: center;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.box:hover {
transform: scale(1.05);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.icon {
font-size: 40px;
margin-bottom: 15px;
}

.box h2 {
font-size: 24px;
margin-bottom: 10px;
}

.box p {
font-size: 16px;
line-height: 1.5;
}

@media (max-width: 768px) {


.container {
flex-direction: column;
align-items: center;
}

.box {
width: 90%;
}
}
</style>
</head>
<body>

<div class="container">
<div class="box" style="background: linear-gradient(135deg, #00c9ff,
#92fe9d);">
<div class="icon">📘</div>
<h2>Web Development</h2>
<p>Learn how to build modern, responsive websites using HTML, CSS,
and JavaScript.</p>
</div>
<div class="box" style="background: linear-gradient(135deg, #f77062,
#fe5196);">
<div class="icon">💻</div>
<h2>Programming</h2>
<p>Master programming languages like Python, C++, and Java for
real-world projects.</p>
</div>

<div class="box" style="background: linear-gradient(135deg, #667eea,


#764ba2);">
<div class="icon">📊</div>
<h2>Data Science</h2>
<p>Analyze data, create visualizations, and understand machine
learning basics.</p>
</div>
</div>

</body>
</html>

OUTPUT

You might also like