Scribd
Upload
82 views

Web Lab Report 2

Uploaded by

Hasnat Zamil
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
82 views

Web Lab Report 2

Uploaded by

Hasnat Zamil
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/ 6

Green University of Bangladesh

Department of Computer Science and Engineering (CSE)


Faculty of Sciences and Engineering

Semester: (Spring, Year:2024), B.Sc. in CSE (Day)

Lab Report-02
Course Title: Web programming Lab
Course Code: CSE 302. Section: 213- D16.

Student Details

Student Name ID
Hasnat Zamil 221902001

Submission Date : 29/03/2024


Course Teacher’s Name : Sakhaouth Hossan

Lab Report Status


Marks: ………………………………… Signature:.....................
Comments:.............................................. Date:..............................
Lab report name
Make a simple webpage design using HTML and CSS.

Objectives
• To define styles for your web pages, including the design.
• To gather knowledge about CSS and it’s uses.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="zamil.css">
</head>
<body>
<div class="container">
<nav>
<img src="images/logo.png" class="logo">
<ul>
<li><a href="#">Travel Guide</a></li>
<li><a href="#">Famous Places</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<button class="btn"><img src="images/icon.png">Bookings</button>
</nav>
<div class="content">
<h1>Beautiful<br>places to explore</h1>
<p>Ensuring that the world Heritage sites sustain their outstanding universal value is an
increasingly challenging mission</p>
<form>
<input type="text" placeholder="Country name">
<button type="submit" class="btn">Search</button>
</form>

</div>
</div>
</body>
</html>

CSS
*{
margin: 0;
padding: 0;
font-family: 'poppins',sans-serif;
box-sizing: border-box;
}
.container{
width: 100%;
min-height: 100vh;
background-image: linear-
gradient(rgba(9,0,77,0.65),rgba(9,0,77,0.65)),url(images/background.png);
background-size: cover;
background-position: center;
padding: 10px 8%;
}
nav{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
}
.logo{
width: 180px;
cursor: pointer ;
}
nav ul{
list-style: none;
width: 100%;
text-align: right;
padding-right: 60px;
}
nav ul li{
display: inline-block;
margin: 10px 20px;
}
nav ul li a{
color: #fff;
text-decoration: none;
}
.btn{
display: flex;
align-items: center;
padding: 10px 20px;
border: 0;
outline: 0;
border-radius: 5px;
background: #f5168d;
color: #fff;
font-weight: 500;
cursor: pointer;
}
.btn img{
width: 20px;
margin-right: 10px;
}
.content{
margin-top: 14%;
color: #fff;
max-width: 620px;
}
.content h1{
font-size: 70px;
font-weight: 600;
line-height: 85px;
margin-bottom: 25px;
}
.content form{
display: flex;
align-items: center;
background: #fff;
border-radius: 5px;
padding: 10px;
margin-top: 30px;
}
.content form input{
border: 0;
outline: 0;
width: 100%;
font-size: 16px;
padding: 10px;
}
.content form .btn{
font-size: 15px;
padding: 10px 30px;
}

Output

You might also like