Green University of Bangladesh Department of Computer Science and Engineering (CSE)

Green University of Bangladesh
Department of Computer Science and Engineering (CSE)

Faculty of Sciences and Engineering
Semester: (Summer, Year: 2021), B.Sc. in CSE (Day)
LAB REPORT NO 02
Course Title: Web Programming Lab
Course Code: CSE 302 Section: D13
Lab Experiment Name: Create a Photo Gallery of the Faculty Profile of the
Green University of Bangladesh using HTML and CSS.
Student Details
Name ID
1. Mafuj Ahmed Bishal 201002158
Lab Date : 17 july,2022

Submission Date : 11 August 2022
Course Teacher’s Name : Tanpia Tasnim
[For Teachers use only: Don’t Write Anything inside this box]
Lab Report Status

Marks: ………………………………… Signature: .....................
Comments: .............................................. Date: ..............................
1.TITLE
Photo Gallery of the Faculty Profile of the Green University of Bangladesh using
HTML and CSS
2. OBJECTIVES
• To gain basic knowledge of HTML and CSS.

• To increase design knowledge like card design.
• To gain knowledge about page layout.
• To gain knowledge about CSS flex-box and it’s properties.
• To gain knowledge about CSS grid.
3. IMPLEMENTATION
• HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Teacher Profile</title>
<link rel="stylesheet" href="/Photo Gallary/CSS/style.css">
</head>
<body>
<div class="heading">
<h1>Green University of Bangladesh</h1>
<br>
<h2>Department of CSE</h2>
</div>
<div class="container">
<div class="box">
<div class="image">
<a href="/Photo Gallary/IMAGE/Montaser_Sir.png">
<img src="/Photo Gallary/IMAGE/Montaser_Sir.png" alt="Montaser_Sir"></a>
</div>
<div class="description">
MONTASER ABDUL QUADER <br><br>
Lecturer Lab Courses <br><br>
montaser@cse.green.edu.bd
</div>
<div class="button">
<a href="#"><button>View Profile</button></a>
</div>
</div>
<div class="box">
<div class="image">
<a href="/Photo Gallary/IMAGE/Amit_Sir.png">
<img src="/Photo Gallary/IMAGE/Amit_Sir.png" alt="Amit_Sir"></a>
</div>
Amit Mandal<br><br>
Lecturer <br><br>
amit@cse.green.edu.bd
</div>
</div>
</div>
<div class="box">
<div class="image">
<a href="/Photo Gallary/IMAGE/Sumaiya_Madam.png">
<img src="/Photo Gallary/IMAGE/Sumaiya_Madam.png" alt="Sumaiya_Madam"></a>
</div>
MS.SUMAIYA KABIR <br><br>
Assistant Professor<br><br>
sumaiya@cse.green.edu.bd
</div>
</div>
</div>
<div class="box">
<div class="image">
<a href="/Photo Gallary/IMAGE/Tanpia-Tasnim.png">
<img src="/Photo Gallary/IMAGE/Tanpia-Tasnim.png" alt="Tanpia Tanpia-
Tasnim_Madam"></a>
</div>
TANPIA TASNIM <br><br>
Lecturer <br><br>
tanpia@cse.green.edu.bd
</div>
<a href="#"><button>View Profile</button>
</a>
</div>
</div>
<div class="box">
<div class="image">
<a href="/Photo Gallary/IMAGE/Monirul_Sir.png">
<img src="/Photo Gallary/IMAGE/Monirul_Sir.png" alt="Monirul_Sir"></a>
</div>
MD.MONIRUL ISLAM <br><br>
Lecturer <br><br>
monirul@cse.green.edu.bd
</div>
</div>
</div>
<div class="box">
<div class="image">
<a href="/Photo Gallary/IMAGE/Pritam_Sir.png">
<img src="/Photo Gallary/IMAGE/Pritam_Sir.png" alt="Pritam_Sir"></a>
</div>
MD.AHMED IQBAL PRITAM<br><br>
Senior Lecturer<br><br>
iqbal@cse.green.edu.bd
</div>
</div>
</div>
<div class="box">
<div class="image">
<a href="/Photo Gallary/IMAGE/rabeya tus sadia.png">
<img src="/Photo Gallary/IMAGE/rabeya tus sadia.png" alt="Sadia_Madam"></a>
</div>
MS.RABEYA TUS SADIA <br><br>
Lecturer <br><br>
rabeya@cse.green.edu.bd
</div>
</div>
</div>
<div class="box">
<div class="image">
<a href="/Photo Gallary/IMAGE/Arnab_kanti_sir.png">
<img src="/Photo Gallary/IMAGE/Arnab_kanti_sir.png" alt="Arnab_Sir"></a>
</div>
ARNAB KANTI TAFEDAR <br><br>
Lecturer <br><br>
arnab@cse.green.edu.bd
</div>
</div>
</div>
<div class="box">
<div class="image">
<a href="/Photo Gallary/IMAGE/Babe_Sultana_Madam.png">
<img src="/Photo Gallary/IMAGE/Babe_Sultana_Madam.png"
alt="Babe_Sultana_Madam"></a>
</div>
MS.BABE SULTANA <br><br>
Lecturer <br><br>
babe@cse.green.edu.bd
</div>
</div>
</div>
<div class="box">
<div class="image">
<a href="/Photo Gallary/IMAGE/Sourav Candra.png">
<img src="/Photo Gallary/IMAGE/Sourav Candra.png" alt="Sourav_Sir"></a>
</div>
SOURAV CHANDRA DAS <br><br>
Lecturer<br><br>
sourav@cse.green.edu.bd
</div>
</div>
</div>
<div class="box">
<div class="image">
<a href="/Photo Gallary/IMAGE/Sultana-Umme-Habiba.png">
<img src="/Photo Gallary/IMAGE/Sultana-Umme-Habiba.png" alt="Sultana-Umme-
Habiba_Madam"></a>
</div>
MS.SULTANA UMME HABIBA <br><br>
Lecturer <br><br>
habiba@cse.green.edu.bd
</div>
</div>
</div>
<div class="box">
<div class="image">
<a href="/Photo Gallary/IMAGE/Humayun_sir.png"> <img src="/Photo
Gallary/IMAGE/Humayun_sir.png" alt="Humayun_Sir"></a>
</div>
MD.HUMAYUN KABIR <br><br>
Lecturer <br><br>
humayun@cse.green.edu.bd
</div>
<a href="#"><button>View Profile</button>
</a>
</div>
</div>
</div>
</body>
</html>
• CSS Code:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
text-transform: capitalize;
transition: all 2 linear;
}
.heading{
font-family: 'Courier New', Courier, monospace;
font-size: 15px;
text-transform: capitalize;
color: white;
text-align: center;
margin: 0;
padding: 0;
padding-bottom: 10px;
background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%);
}
.container{
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: left;
align-items: left;
background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
}
.box{
height: 350px;
width: 223px;
background-color: #fff;
border-radius: 15px;
text-align: center;
padding: 1px;
padding-top: 15px;
margin: 15px;
box-shadow: 0px 3px 5px rgba(0, 0, 0, .3);
position: relative;
z-index: 0;
overflow: hidden;
}
.box .description{
text-align: left;
font-size: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: #777;
}
.box img{
height: 150px;
width: auto;
}
.box button{
border: 2px solid #23ca8d;

background-color: powderblue;
color: black;
padding: 15px;
margin: 15px;
font-size: 15px;
cursor: pointer;
border-radius: 20px;
}
.box button:hover{
letter-spacing: 1px;
opacity: .8;
transform: scale(1.05);
background-color: #04AA6D;
color: white;
}
.box:hover{
transform: scale(1.04);
}
4. OUTPUT
5. ANALYSIS AND DISCUSSION
In this photo gallery design we have a ‘container’ div. In container we 12 box div.
Every box has 3 div image, description, button. In CSS we style one box div and
reuse for every other box that will save our time. In this I face problem in page layout
because we have to keep 6 photo in one row but we solve this problem using CSS
‘Flex-Box’.

Green University of Bangladesh Department of Computer Science and Engineering (CSE)

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Green University of Bangladesh Department of Computer Science and Engineering (CSE)

Uploaded by

Copyright:

Available Formats

Green University of Bangladesh

Department of Computer Science and Engineering (CSE)

1. Mafuj Ahmed Bishal 201002158

Lab Date : 17 july,2022

Lab Report Status

• To gain basic knowledge of HTML and CSS.

border: 2px solid #23ca8d;

You might also like