WPP 155

Project
Course Code: CSI344

Course Title: WPP Sessional
Course Teachers:
Tamjid Rahman
Assistant Professor, Department of CSE
Stamford University Bangladesh
SUBMITTED BY:
Md. Masud Rana
CSE 071 08155
BSc in CSE
Stamford University Bangladesh
Date Of Submission: 29-11-2022

Home Page
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>CovidSafe</title>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

</head>
<body>
<div class="main">
<nav class="navbar">
<a href="#" class="logo">
<img src="covidsafe.png">
</a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Registration</a></li>
<li><a href="#">Registration(Passport)</a></li>
<li><a href="#">Status</a></li>
<li><a href="#">Card</a></li>
<li><a href="#">Certificate</a></li>
<li><a href="#">verification</a></li>
<li><a href="#">Manual</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</nav>


<div class="bg">
<div class="bg1">
<div class="bg1-sub">
<img src="1.png">
<div class="bg-text">
<h2>VACCINE</h2>
<h2>REGISTRATION</h2>
</div>
</div>
<div class="bg1-subs">
<p>During Registration You Need</p>
<img src="10.png">
</div>
</div>
<div class="bg2">
<div class="bg2-sub">
<div class="bgs">
<img src="7.png">
<h3>CHECK STATUS</h3>
</div>
<div class="bgs">
<img src="17.png">
<h3>VACCINE CARD</h3>
</div>
<div class="bgs">
<img src="9.png">
<h3>CERTIFICATE</h3>
</div>
<div class="bgs">
<img src="8.png">
<h3>FAQ</h3>
</div>
</div>
</div>
</div>
<div class="number">
<div class="num">
<div class="num-1">
<img src="7.png">
<p>Hotline</p>
</div>
<div class="num-2">
<h2>333</h2>
<p>National Call Center</p>
</div>
<div class="num-3">
<h2>16263</h2>
<p>Health Portal</p>
</div>
<div class="num-4">
<h2>10655</h2>
<p>IEDCR</p>
</div>
<div class="num-5">
<h2>09666777222</h2>
<p>Covid-19 Telehealth</p>
</div>
<div class="num-1">
<img src="7.png">
<p>All Call Centers</p>
</div>
</div>
</div>
</div>


<div class="process">
<div class="pro">
<p>| The Process of receiving the Covid-19 corona vaccine</p>
</div>
<div class="pro1">
<div class="online">
<img src="5.png">
<h4>Online Registration</h4>
<p>First, you have to complete the online registration by verifying your national identity card and correct mobile
number through this portal.</p>
</div>
<img src="4.png">
<h4>SMS Notification</h4>
<p>After registering online, you will receive a text message on your mobile phone mentioning the date of vaccination
and the name of the vaccination center.</p>
</div>
<img src="6.png">
<h4>Vaccination</h4>
<p>Subject to receiving a text message on the mobile phone, you have to appear in person at the vaccination center on
the specified date with the vaccine card, national identity card and signed consent form to receive the Covid-19 vaccine.</p>
</div>
</div>
</div>
<div class="download">
<div class="down">
<h3>Download App</h3>
<img src="Google Play logo.png">
</div>
</div>
<div class="mujib">
<p>| Mujib 100</p>
<div class="mujib-main">
<div class="mujib2">
<img src="download.png">
<h3>Mujib 100 Portal</h3>
</div>
<img src="Google Play logo.png">
<h3>Mujib 100 Android App</h3>
</div>
<img src="app-store.png">
<h3>Mujib 100 iOS App</h3>
</div>
</div>
</div>
<div class="footer">
<div class="footer1">
<div class="foot-img">
</div>
<div class="foot-text">
<p>Privacy Policy</p>
<p>Terms of service</p>
<p>Other Affiliates</p>
</div>
</div>
<p>Developed by - Department of CSE</p>
<img src="sdt2.png">
</div>
<p>Affiliates - </p>
<img src="Stamford.png">
</div>

</div>
</body>
</html>
CSS Code
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
body{
font-family: 'Poppins', sans-serif;
ul{
list-style: none;
a{
text-decoration: none;
.main{
width: 100%;
height: 85vh;
position: relative;
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.1)), url("13.jpg");
background-size: cover;
background-position: center;
.navbar{
display: flex;
justify-content: space-around;
align-items: center;
width: 105%;
top: 0;
left: 0;
position: fixed;
box-shadow: 5px 10px 22px rgba(84, 62, 62, 0.05);
background: #1c1f1d;
z-index: 1;
.logo img{
margin-left:auto;
.navbar ul{
display: flex;
margin-right: 200px;
.navbar ul li a{
padding: 0 22px;
line-height: 100px;
height: 40px;
font-size: 1.3rem;
text-transform: uppercase;
color: #585b5b;
font-weight: 500;
transition: 1s;
.navbar ul li a:hover{
background: coral;
padding: 7px 12px;
font-size: .9rem;
border-radius: 10px;
letter-spacing: 2px;
.bg{
display: flex;
.bg1{
background: white;
height: 390px;
width: 400px;
border-radius: 5px;
margin-left: 550px;
margin-top: 250px;
.bg1-sub{
display: flex;
margin: 10px;
margin-top: 20px;
.bg1-sub img{
height: 140px;
width: auto;
margin-left: 15px;
margin-top: 15px;
}
.bg1-subs{
margin: 5px 50px;
margin-top: 50px;
.bg1-subs p{
font-size: 0.9rem;
font-family: "Poppins",sans-serif;
font-weight: 600;
text-align: center;
margin-bottom: 20px;
.bg-text{
font-size: 1.2rem;
margin-right: 40px;
.bg2{
margin-top: 250px;
.bgs{
display: flex;
background: white;
margin: 10px;
padding: 25px 50px;
border-radius: 5px;
.bgs img{
height: 40px;
width: auto;
margin-right: 15px;
}
.bgs h3{
font: 0.9rem;
font-family: "Ubuntu",sans-serif;
.number{
margin-top: 95px;
.num{
display: flex;
background: white;
width: 60%;
height: auto;
margin-left: 20%;
border-radius: 5px;
text-align: center;
padding: 5px 10px;
box-shadow: 5px 5px 5px rgba(0,0,0,0.1);
.num-1 img{
height: 50px;
width: auto;
.num h2{
font-size: 1rem;
font-weight: 600;
color: darkgreen;
margin-top: 0px;
margin-bottom: 7px;
.num p{
font-size: 1rem;
font-weight: 400;
.process{
background: white;
width: 60%;
height: 63vh;
margin-left: 20%;
margin-top: 50px;
padding: 25px;
border-radius: 5px;
.pro p{
padding-top: 55px;
padding-left: 55px;
font-size: 1.6rem;
padding-bottom: 10px;
.pro1{
display: flex;
.online{
display: flex;
flex-direction: column;
justify-content: center;
width: 30%;
.online h4{
margin-top: 15px;
}
.online p{
font-size: 1rem;
font-weight: 300;
text-align: center;
.down{
display: flex;
width: 60%;
margin-left: 20%;
margin-top: 70px;
.down img{
height: 70px;
width: 220px;
.mujib{
width: 60%;
margin-left: 20%;
margin-top: 80px;
background: white;
padding: 50px;
.mujib p{
font-size: 2rem;
margin-bottom: 5%;
.mujib-main{
display: flex;
}
.mujib1 img{
height: 70px;
width: 220px;
margin-top: 110px;
.mujib2, .mujib1{
display: flex;
flex-direction: column;
.mujib2, .mujib1 h3{
.mujib2 img{
.footer{
display: flex;
margin-top: 3%;
background: rgb(253, 109, 56);
height: 25vh;
.footer1{
display: flex;
margin-left: 12%;
.foot-img img{
height: 70px;
width: auto;
margin-right: 40px;
.foot-text{
font-size: 1rem;
font-weight: 700;
line-height: 40px;
color: white;
.footer2 p, .footer3 p{
font-size: 0.9rem;
font-weight: 700;
color: white;
.footer2 img, .footer3 img{
width: 300px;
height: auto;
.footer3{
margin-right: 15%;
Vaccine Registration
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vaccine Registration</title>
<link rel="stylesheet" href="index1.css">
</head>
<body>
</a>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Registration.html">Registration</a></li>
<li><a href="Registration(Passport).html">Registration(Passport)</a></li>
<li><a href="#">Verify</a></li>
</ul>
</nav>
<div class="main">
<div class="main1">
<h3>Vaccine Registration</h3>
<img src="1.png">
</div>
</div>
<div class="p-text">
<p>Complete the registration by verifying your national identity card and mobile number in the form below. The place and
date of delivery of the vaccine will be informed in due course through SMS message on the mobile phone.</p>
</div>
<div class="forms">
<h3>| Identity verification</h3>
<form>
<label>Select type:</label>
<br>
<select class="info">
<option value="select">--Select--</option>
<option value="select">Citizen Registration(18 years & above)</option>
<option value="select">Educational Institute</option>
<option value="select">Farmers</option>
<option value="select">Worker</option>
<option value="select">Government Officer</option>
<option value="select">National Player</option>
<option value="select">All Officers and employees of Government Health and Family Planning Department</option>
<option value="select">Military and paramilitary defence force</option>

<option value="select">Student in medical education related subjects</option>
<option value="select">Heroic Freedom fighters and Heroines</option>
<option value="select">Civilian Aircraft</option>
<option value="select">University Student</option>
</select>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS Code
*{
margin: 0;
padding: 0;
body{
ul{
list-style: none;
a{
.navbar{
display: flex;
height: 10%;
width: 100%;
top: 0;
left: 0;
position: fixed;
z-index: 1;
.logo img{
margin-left:auto;
.navbar ul{
display: flex;
.navbar ul li a{
padding: 0 22px;
line-height: 100px;
height: 40px;
font-size: 1.3rem;
color: #585b5b;
font-weight: 500;
transition: 0.5s;
background: coral;
padding: 7px 12px;
font-size: 0.9rem;
.main{
height: 35vh;
.main1{
display: flex;
padding-top: 135px;
.main1 h3{
margin-left: 350px;
font-size: 1.5rem;
.main1 img{
height: 150px;
width: auto;
.p-text{
width: 60%;
margin-left: 20%;
margin-top: 2%;
margin-bottom: 3%;
.p-text p{
font-size: 1rem;
font-weight: 300;
.forms{
height: 60vh;
padding-left: 20%;
padding-top: 3%;
.forms h3{
.info{
width: 350px;
height: 40px;
font-size: 1rem;
font-weight: 500;
padding: 5px 15px;
outline: none;
margin-top: 8px;
.forms form{
margin-top: 10px;
font-weight: 300;
.footer{
display: flex;
height: 25vh;
.footer1{
display: flex;
margin-left: 12%;
.foot-img img{
height: 70px;
width: auto;
margin-right: 40px;
.foot-text{
font-size: 1rem;
font-weight: 700;
line-height: 40px;
color: white;
font-size: 0.9rem;
font-weight: 700;
color: white;
width: 300px;
height: auto;
.footer3{
margin-right: 15%;
}
Registration(Passport)
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Registration(Passport)</title>
<link rel="stylesheet" href="index2.css">
</head>
<body>
<div class="main">
</a>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Registration.html">Registration</a></li>
<li><a href="Registration(Passport).html">Registration(Passport)</a></li>
<li><a href="#">Verify</a></li>
</ul>
</nav>
<div class="main1">
<h3>Registration(Passport)</h3>
<img src="1.png">
</div>
</div>
<div class="p-text">
<p>Complete the registration by verifying your passport number and mobile number in the form below. The place and date of delivery of
the vaccine will be informed in due course through SMS message on the mobile phone.</p>
</div>
<div class="forms">
<h3>| Identity verification</h3>
<form>
<label>Select type:</label>
<br>
<select class="info">
<option value="select">--Select--</option>
<option value="select">Foreign Nationals</option>
<option value="select">Bangladeshi Workers</option>
<option value="select">Bangladeshi Student</option>
</select>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS Code
*{
margin: 0;
padding: 0;
body{

}
ul{
list-style: none;
a{
.navbar{
display: flex;
height: 10%;
width: 100%;
top: 0;
left: 0;
position: fixed;
z-index: 1;
.logo img{
margin-left:auto;
.navbar ul{
display: flex;
.navbar ul li a{
padding: 0 22px;
line-height: 100px;
height: 40px;
font-size: 1.3rem;
color: #585b5b;
font-weight: 500;
transition: 0.5s;
}
background: coral;
padding: 7px 12px;
font-size: 0.9rem;
.main{
height: 35vh;
.main1{
display: flex;
padding-top: 135px;
.main1 h3{
margin-left: 350px;
font-size: 1.5rem;
.main1 img{
height: 150px;
width: auto;
.p-text{
width: 60%;
margin-left: 20%;
margin-top: 2%;
margin-bottom: 3%;
.p-text p{
font-size: 1rem;
font-weight: 300;
}
.forms{
height: 60vh;
padding-left: 20%;
padding-top: 3%;
.forms h3{
.info{
width: 350px;
height: 40px;
font-size: 1rem;
font-weight: 500;
padding: 5px 15px;
outline: none;
margin-top: 8px;
.forms form{
margin-top: 10px;
font-weight: 300;
.footer{
display: flex;
height: 25vh;
.footer1{
display: flex;
margin-left: 12%;
.foot-img img{
height: 70px;
width: auto;
margin-right: 40px;
.foot-text{
font-size: 1rem;
font-weight: 700;
line-height: 40px;
color: white;
font-size: 0.9rem;
font-weight: 700;
color: white;
width: 300px;
height: auto;
.footer3{
margin-right: 15%;

WPP 155

Uploaded by

Document Information

Original Description:

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

WPP 155

Uploaded by

Copyright:

Available Formats

Project

Course Code: CSI344

Date Of Submission: 29-11-2022

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="index.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<a href="#" class="logo">

<p>During Registration You Need</p>

<p>National Call Center</p>

<p>All Call Centers</p>

<p>| The Process of receiving the Covid-19 corona vaccine</p>

<img src="Google Play logo.png">

<p>| Mujib 100</p>

<h3>Mujib 100 Portal</h3>

<img src="Google Play logo.png">

<h3>Mujib 100 Android App</h3>

<h3>Mujib 100 iOS App</h3>

<p>Developed by - Department of CSE</p>

font-family: 'Poppins', sans-serif;

background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.1)), url("13.jpg");

box-shadow: 5px 10px 22px rgba(84, 62, 62, 0.05);

padding: 7px 12px;

margin: 5px 50px;

padding: 25px 50px;

padding: 5px 10px;

box-shadow: 5px 5px 5px rgba(0,0,0,0.1);

box-shadow: 5px 5px 15px rgba(0,0,0,0.1);

box-shadow: 5px 5px 15px rgba(0,0,0,0.1);

.mujib2, .mujib1 h3{

background: rgb(253, 109, 56);

.footer2 img, .footer3 img{

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="index1.css">

<a href="#" class="logo">

<h3>| Identity verification</h3>

<option value="select">Citizen Registration(18 years & above)</option>

<option value="select">Educational Institute</option>

<option value="select">Government Officer</option>

<option value="select">National Player</option>

<option value="select">Military and paramilitary defence force</option>

<option value="select">Heroic Freedom fighters and Heroines</option>

<option value="select">Civilian Aircraft</option>

<option value="select">University Student</option>

<p>Developed by - Department of CSE</p>

font-family: 'Poppins', sans-serif;

box-shadow: 5px 10px 22px rgba(84, 62, 62, 0.05);

padding: 7px 12px;

background: rgb(232, 240, 255);

background: rgb(244, 250, 250);

box-shadow: 5px 10px 22px rgba(0, 0, 0, 0.05);

padding: 5px 15px;

background: rgb(253, 109, 56);

.footer2 img, .footer3 img{

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">