Scribd
Upload
5 views9 pages

Shaina Lab Task

This document is an HTML code for a web page titled 'Bake Heaven,' created by Shaina Chanana, a BCA student. It includes various styled containers for displaying images, text, and a profile table with personal information. The layout features colorful sections, images of cakes, and a structured format for presenting content.

Uploaded by

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

Shaina Lab Task

This document is an HTML code for a web page titled 'Bake Heaven,' created by Shaina Chanana, a BCA student. It includes various styled containers for displaying images, text, and a profile table with personal information. The layout features colorful sections, images of cakes, and a structured format for presenting content.

Uploaded by

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

LAB TASK – 1

SUBMITTED BY: SHAINA CHANANA


CLASS: BCA2023C (2C)
ROLL NO: 2322215
CODE:

<!DOCTYPE html>
<html lang="en">
<head>
<title>lab task</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.pink-container{
background-color: rgb(188, 127, 141);
border: 10PX solid rgb(188, 127, 141);
text-align: center;
COLOR: rgb(224, 199, 199);
font-weight: 5PX;
font-style: italic;
height: 50%;

}
.yellow-container{
background-color: rgb(176, 65, 65);
border: 10px solid rgb(176, 65, 65);
text-align: center;
justify-content: center;
max-width: 50%;
color: black;
padding:30px;
height: 100px;
margin-top: 20PX;
margin-bottom: 20PX;
margin-left: 500PX;
margin-right: 50PX;
border-radius: 10px;
font-weight:bolder;
font-family: Geneva;
}
.black-container, a{
color:black;
text-decoration: none;
font-style: italic;
display: flex;
text-align: center;
}
.purple-container{
background-color: rgb(137, 130, 205);
border: 10px solid rgb(137, 130, 205);
text-align: center;
width:25%;
text-decoration: none;
color: black;
font-size: 25px;
font-weight: bolder;
display: inline-block;
text-align: center;
min-height: 100px;
justify-content: center;
align-items: center;
display: flex;
}
.green-container {
background-color: rgb(128, 225, 115);
border: 10px solid rgb(128, 225, 115);
text-align: center;
width:25%;
text-decoration: none;
color: black;
font-size: 25px;
font-weight: bolder;
display: inline-block;
text-align: center;
min-height: 100px;
justify-content: center;
align-items: center;
display: flex;
}
.blue-container{
background-color: rgb(126, 207, 216);
border: 10px solid rgb(126, 207, 216);
text-align: center;
width:25%;
text-decoration: none;
color: black;
font-size: 25px;
font-weight: bolder;
display: inline-block;
min-height: 100px;
justify-content: center;
align-items: center;
display: flex;
}
.red-container{
background-color: rgb(126, 50, 56);
border: 10px solid rgb(126, 50, 56);
text-align: center;
width:25%;
text-decoration: none;
color: black;
font-size: 25px;
font-weight: bolder;
display: inline-block;
text-align: center;
min-height: 100px;
justify-content: center;
align-items: center;
display: flex;
}
.main{
background: rgb(91, 127, 135);
border: 8px solid rgb(91, 127, 135);
width: 100%;
height: 200px;
text-decoration: none;
color: black;
font-size: 36px;
font-weight: bolder;
display: inline-block;
font-style: italic;
display: flex;
justify-content: center;
align-items: center;
text-align: center;

}
.row {
background: rgb(63, 213, 206);
flex: 1;
border: 4px solid rgb(63, 213, 206);
width: 100%;
height: 100px;
color: black;
font-size: 30px;
font-weight: bolder;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 40px;

}
.orange-container{
width: 100%;
background-color: rgb(218, 172, 31);
padding: 50px;
justify-content: center;
display:flex;
align-items: center;
}
.content{
display: flex;
justify-content: center;
align-items: center;
gap: 40px;

}
.box {
display: flex;
justify-content: center;
align-items: center;
height: 280px;
width: 250px;
border: 5px solid rgb(0, 0, 0);
background-color: lightgray;
position: relative;
}

.inner-box {
width: 80%;
height: 80%;
background-color: lightblue;
}

.heading {
width: 100%;
background-color: white;
text-align: center;
font-weight: bold;
padding: 5px;
}
.container {
display: flex;
width: 100%;
}

.group-container {
background-color: red;
flex: 1; /* Takes available space */
display: flex;
flex-direction: column;
}

.profile-container {
background-color: rgb(190, 190, 65);
text-align: center;
color: black;
font-size: 25px;
font-weight: bolder;
border: 3px solid black;
width: 100%;
min-height: 100px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bolder;
}

.info-container {
background-color: rgb(77, 130, 136);
text-align: center;
color: black;
font-size: 25px;
width: 100%;
min-height: 300px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
table{
height: 100%;
width: 100%;
}
th{
background-color: rgb(211, 20, 74);
border-color: rgb(211, 20, 74);
font-weight: bolder;
}

.one-container {
background-color: rgb(136, 97, 127);
text-align: center;
color: black;
font-size: 25px;
width: 100%;
min-height: 300px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.new-container {
background-color: rgb(71, 87, 128);
flex: 1; /* Takes up available space */
min-height: 700px;
border: 2px solid rgb(46, 50, 174);
color: rgb(19, 7, 7);
font-weight: bold;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}

.last-container {
background-color: darkturquoise;
border: 25px solid rgb(12, 103, 133);
min-height: 200px; /* Ensures visibility */
max-height: 600px;
max-width: 100%;
box-sizing: border-box;
text-align: center;
justify-content: center;
font-size: 45px;
font-weight: bold;
display: flex;
padding:60px;
}

</style>
</head>
<body>
<div class="pink-container">
<img src="c:\Users\admin\Downloads\cake animated.png" width="7%" align="left">
<img src="c:\Users\admin\Downloads\cake animated.png" width="7%" align="right">
<div class="yellow-container">
<h1>🍦BAKE HEAVEN🍩</h1>
</div>
</div>
<div class="black-container">
<div class="purple-container">
A
</div>

<div class="green-container">
B
</div>

<div class="blue-container">
C
</div>

<div class="red-container">
D
</div>

</div>

<div class="main">
<img src="c:\Users\admin\Downloads\cake animated.png" width="10%">
<img src="c:\Users\admin\Downloads\cake animated.png" width="10%">
<img src="c:\Users\admin\Downloads\cake animated.png" width="10%">
<img src="c:\Users\admin\Downloads\cake animated.png" width="10%">
<img src="c:\Users\admin\Downloads\cake animated.png" width="10%">
<img src="c:\Users\admin\Downloads\cake animated.png" width="10%">
<img src="c:\Users\admin\Downloads\cake animated.png" width="10%">
<img src="c:\Users\admin\Downloads\cake animated.png" width="10%">
</div>

<div class="row">
<p>Where there's cake, there's hope. 🍭</p>
</div>

<div class="orange-container">
<div class="content">

<div class="box-container" >


<div class="heading">HEADING</div>
<div class="box" style="border-color: rgb(14, 6, 6);">
<div class="inner-box" style="background-color: lightblue;"></div>
<img src="c:\Users\admin\Downloads\cake 1.jpg" alt="cake" height="100%"
width="120%">
</div>
</div>

<div class="box-container">
<div class="heading">HEADING</div>
<div class="box" style="border-color: rgb(8, 8, 8);">
<div class="inner-box" style="background-color: lightblue;">
<img src="c:\Users\admin\Downloads\cake 2.jpg" alt="cake"
height="100%" width="100%">
</div>
</div>
</div>

<div class="box-container">
<div class="heading">HEADING</div>
<div class="box" style="border-color: rgb(8, 8, 8);">
<div class="inner-box" style="background-color: lightblue;">
<img src="c:\Users\admin\Downloads\cake 3.jpg" alt="cake"
height="100%" width="100%">
</div>
</div>
</div>

</div>
</div>
<div class="container">
<div class="group-container">
<div class="profile-container">
PROFILE
</div>

<div class="info-container">
<table border="2px">
<tr>
<th>NAME</th>
<td>SHAINA CHANANA</td>
</tr>
<tr>
<th>DATE OF BIRTH</th>
<td>02-10-2005</td>
</tr>
<tr>
<th>CLASS</th>
<td>BCA2023C</td>
</tr>
<tr>
<th>ADDRESS</th>
<td>JAMALPUR,LUDHIANA</td>
</tr>
</table>
</div>

<div class="one-container">
<img src="c:\Users\admin\Downloads\info cake.jpg" alt="cake" width="50%">
</div>
</div>

<div class="new-container">
<img src="c:\Users\admin\Downloads\MANYCAKESS.webp" width="100%" height="100%"
alt="many cakes">
</div>
</div>

<div class="last-container">
<img src="c:\Users\admin\Downloads\thankyou cake'.avif" width="100%">
</div>
</body>
</html>

You might also like