Scribd
Upload
13 views4 pages

Lab 5 (sp-21281)

The document is a HTML page with CSS styling. It contains four div sections each with an image and paragraph of text describing different topics and using relative positioning.

Uploaded by

shagufta yaseen
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
13 views4 pages

Lab 5 (sp-21281)

The document is a HTML page with CSS styling. It contains four div sections each with an image and paragraph of text describing different topics and using relative positioning.

Uploaded by

shagufta yaseen
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/ 4

Software construction and Development

Lab #05

Submitted To

Mam Marriam Daud

Submitted By

Waleed Javed

SP-21281

BSSE-VA (m)

Date
March 18, 2024
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
position: relative;
text-align: center;
}
*{
padding: 0px;
margin: 0px;
}
body{
background-color: #ffd500;
}
header{
background-color: aqua;

}
#one{
position: relative;
left: 42%;
width: 300px;
height: 300px;
border: 2px solid;

}
#two{
height: 300px;
width: 300px;
position: relative;
bottom: 300px;
left:20px;
border: 2px solid;

}
#three{
height: 300px;
width: 300px;
position: relative;
left: 80%;
bottom: 595px;
border: 2px solid;

}
#four{
height: 300px;
width: 300px;
position: relative;
left: 42%;
bottom: 400px;
border: 2px solid;
}

</style>
</head>
<body>
<header>
<h1><b>Position</b></h1>
</header>
<br>
<div id="one">
<img src="car.webp" alt="" height="300px", width="300px">
<br>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum fugit
sequi nemo dolores consectetur unde, quisquam facere alias quod corrupti error
excepturi delectus perferendis rem nulla quidem. Reiciendis, sed aperiam.</p>
</div>
<div id="two">
<img src="merce.jpg" alt="" height="300px", width="300px">
<br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure sapiente
nesciunt quisquam fuga necessitatibus consectetur praesentium, quis voluptatem
eos, tempora optio placeat numquam architecto voluptatibus, beatae aut corporis
error deserunt.</p>

</div>
<div id="three">
<img src="tes.jpg" alt="" width="300px", height="300px">
<br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nemo
quibusdam iure voluptatum ut necessitatibus accusantium minus? Odit ad esse
blanditiis quibusdam dolor in, aperiam ut voluptatum? Autem, reiciendis ut.</p>
</div>
<div id="four">
<img src="buga.jpg" alt="" width="300px", height="300px">
<br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nemo
quibusdam iure voluptatum ut necessitatibus accusantium minus? Odit ad esse
blanditiis quibusdam dolor in, aperiam ut voluptatum? Autem, reiciendis ut.</p>
</div>

</body>
</html>

Output:

You might also like