Scribd
Upload
2 views

Web Database Assignment

This document is an assignment submission for a web database programming course at Bangladesh University of Business and Technology. It includes a brief description of CSS properties, a sample HTML code demonstrating these properties, and a final page output layout. The assignment is submitted by Shifat Hasan Nahid to Assistant Professor Sadah Anjum Shanto, with a due date of March 5, 2024.

Uploaded by

Abir Shah
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

Web Database Assignment

This document is an assignment submission for a web database programming course at Bangladesh University of Business and Technology. It includes a brief description of CSS properties, a sample HTML code demonstrating these properties, and a final page output layout. The assignment is submitted by Shifat Hasan Nahid to Assistant Professor Sadah Anjum Shanto, with a due date of March 5, 2024.

Uploaded by

Abir Shah
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

Bangladesh University of Business and Technology

Department of CSE
CSE -457
Web database Programming

Assignment : 01
Submission Date : 05 Mar 2024

Submitted By Submitted To
Name:Shifat Hasan Nahid Sadah Anjum Shanto
ID: 21225103393 Assistant professor
Intake: 49 Department of CSE
Section: 09

_______________
Signature

Short Descripton of CSS Propertes:


foat: Positons elements to the lef or right.
height: Defnes the vertcal size of an element.

width: Defnes the horizontal size of an element.

positon: Specifes how an element is positoned.


statc
relatve
absolute
fxed
padding: Space between the content and the border of an element.

margin: Space outside the border of an element.

background: Sets the background color, image, gradient, etc., of an element.

transform: Applies 2D/3D transformatons.


scale
transform: scale(0.5);

rotate
transform: rotate(5deg):

display: Controls the display behavior

block
inline
flex
grid
none etc.

color: Changes the text color of an element.

list-style-type: Defines the style of list item markers

disc

circle

square

none
Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>CSS Properties Example</title>
<style>
body {
margin: 0;
padding: 0;
background: #89b9d4;
}
header {
background: #3fa5a5;
width: 100%;
color: white;
padding: 20px;
text-align: center;
}
nav {
background: aquamarine;
width: 100%;
color: white;
padding: 15px;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: circle;
display: flex;
justify-content: center;
}
nav ul li {
margin: 0 15px;
}
nav ul li a {
color: red;
text-decoration: none;
}
.container {
width: 80%;
height: 220px;
margin: 20px auto;
padding: 20px;
background: white;
position: static;
}

.Info1 {
float: left;
width: 40%;
height: 100px;
margin: 3%;
padding: 20px;
background: #abd8f0;
color: #333;
transform: rotate(5deg);
}
.Info2 {
float: right;
width: 40%;
height: 100px;
margin: 3%;
padding: 20px;
background: #b9e8f3;
color: #333;
transform: skewY(10deg);
}

.footer {
clear: both;
padding: 10px;
position: static;
left: 0;
bottom: 0;
width: 100%;
background-color: rgb(44, 97, 95);
color: white;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>Shifat Hasan Nahid Protfolio Design</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">Contact me</a></li>
</ul>
</nav>
<div class="container">
<div class="Info1">
<h2>Info1</h2>
<p>This is an example of a floating box with padding and
margin.</p>
</div>

<div class="Info2">
<h2>Info2</h2>
<p>This is another floating box with different
styling.</p>
</div>
</div>
</body>
</html>
Final page Output:

You might also like