Scribd
Upload
1 views

Shaina Lab Task

This document is an HTML code for a web page titled 'Bake Heaven' created by Shaina Chanana, a BCA student. It features various styled containers with images and text related to cakes, including a profile section with personal information. The layout incorporates multiple color-coded sections and images to enhance visual appeal.

Uploaded by

shaina chanana
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
1 views

Shaina Lab Task

This document is an HTML code for a web page titled 'Bake Heaven' created by Shaina Chanana, a BCA student. It features various styled containers with images and text related to cakes, including a profile section with personal information. The layout incorporates multiple color-coded sections and images to enhance visual appeal.

Uploaded by

shaina chanana
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, 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