Scribd
Upload
4 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 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
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
4 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 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
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/ 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

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy