Scribd
Upload
16 views10 pages

Visheshlab Task

This document is an HTML code for a web page created by Vishesh Sharma as a lab task. It includes various styled containers and sections displaying images and information about unique cars, along with a profile table containing personal details. The page features a colorful layout with multiple sections including headings, images, and a table.

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
16 views10 pages

Visheshlab Task

This document is an HTML code for a web page created by Vishesh Sharma as a lab task. It includes various styled containers and sections displaying images and information about unique cars, along with a profile table containing personal details. The page features a colorful layout with multiple sections including headings, images, and a table.

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

LAB TASK – 1

SUBMITTED BY: VISHESH SHARMA


CLASS: BCA2023C (2C)
ROLL NO: 2322250
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\RACING CAR 1.png" width="7%"
align="left">
<img src="c:\Users\admin\Downloads\RACING CAR 1.png" width="7%"
align="right">
<div class="yellow-container">
<h1>UNIQUE CARS</h1>
</div>
</div>
<div class="black-container">
<div class="purple-container">
Formula One
</div>

<div class="green-container">
Open wheel
</div>

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

<div class="red-container">
Stock car
</div>

</div>

<div class="main">
<img src="c:\Users\admin\Downloads\RC 2.jpg" width="15%">
<img src="c:\Users\admin\Downloads\RC 2.jpg" width="15%">
<img src="c:\Users\admin\Downloads\RC 2.jpg" width="15%">
<img src="c:\Users\admin\Downloads\RC 2.jpg" width="15%">
<img src="c:\Users\admin\Downloads\RC 2.jpg" width="15%">
<img src="c:\Users\admin\Downloads\RC 2.jpg" width="15%">
<img src="c:\Users\admin\Downloads\RC 2.jpg" width="15%">
<img src="c:\Users\admin\Downloads\RC 2.jpg" width="15%">

</div>
<div class="row">
<p>What we drive says a lot about who we are. </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\C1.jpg" alt="cake"
height="100%" width="100%">
</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\C2.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\C3.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>VISHESH SHARMA</td>
</tr>
<tr>
<th>DATE OF BIRTH</th>
<td>20-05-2005</td>
</tr>
<tr>
<th>CLASS</th>
<td>BCA2023C</td>
</tr>
<tr>
<th>ADDRESS</th>
<td>SAMRALA CHOWNK,UDHIANA</td>
</tr>
</table>
</div>

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

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

<div class="last-container">
<img src="c:\Users\admin\Downloads\THANKYOU CAR.jpg" width="50%">
</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