Internship File

A Summer Training Report
on
“WEB DEVELOPMENT”
Submitted for partial fulfillment for the award of the degree
Bachelor of Computer Application (BCA)

Department of Computer Application
College of Innovative Management and Science

Session 2021-24
Submitted to Submitted By
Dr. Manish Kumar ISHANT PANDEY
ROLL NO. - 2111730580034
A Summer Training Report
on
“WEB DEVELOPMENT”
Submitted for partial fulfillment for the award of the degree
Bachelor of Computer Application (BCA)

Department of Computer Application
Session 2021-24
College of Innovative Management and Science
Submitted to Submitted By
Dr. Manish Kumar ISHANT PANDEY
ROLL NO.- 2111730580034
ACKNOWLEDGEMENT
At the very beginning I would like to the Founders & developers of INTERNSHALA and also all
employees of INTERNSHALA by whom active response I was able to complete my great summer
training.
I will be highly grateful to INTERNSHALA for rending his valuable guidance and help to know more
about working of a website, and how a web-application or a website works and developed
and also providing internal guidance for preparing this report.
I am also very thankful to INTERNSHALA for providing their immense help and support.
NAME- ISHANT PANDEY

B C A (Sem- 5)
Roll No.: 2111730580034
CIMS, LUCKNOW (U.P.)
DECLERATION
This is certify that the work reported in the present project entitled “Hostel & PG (Just Relax)” is a
record of work done by us in Bachelor of Computer Application, Collage of Innovative Management
and science, Lucknow.
The reports are based on the project work done entirely by us and not copied from any other sources.
ISHANT PANDEY
BCA 5th semester
2111730580034
Content
S. No. Topic Page No.
1. Introduction of Internshala 1
2. Course conducted by internshala 2
3. Website on hostel & PG 3-4
 Role of HTML
 Role of CSS
 Role of Java Script
 Role of Php
 Role of React
4. Creating the home page using HTML & 5-11

CSS
5. Creating property list page using HTML & 12-19

CSS
6. Screen shot of signup &login page 20
7. Creating property detail page using HTML 21-30

& CSS
8. Use of java script in creating the pages 31-32
9. Conclusion 33
10. Bibliography 34
Website on Hostel& PG
How a website works:-
Client request for web-site
Server returns the response

HTML CSS JS
Role of HTML:-
 Hyper Text Markup Language.
 It is basically a standard markup language for giving a static
skeleton to web application and sites.
 It’s a well standardized system.
Role of CSS :-
 Cascading Style Sheets (CSS) use a separate language from
HTML. CSS allows you to apply consistent styling of elements across all pages on your site, so
that all headings, lists, and paragraphs look and act the same on every page of a site.
Role of JS (Java Script) :-
 High-level dynamic interpreted programing language.
 It allows client-side scripting to create completely dynamic web
application and websites.
Role of PHP :-
 Dynamic content: PHP is a more dynamic use of code. For example, when you enter
welcome/html you will always receive the response, ‘Welcome!’, however when you request
welcome.php, depending on the time of day, you may receive ‘Good Morning!’. This indicates
that PHP produces more dynamic coded content.
 Easy to learn: PHP is considered one of the easiest, most common web development
languages, compared to another popular one like Java.
 Open source and free: The components of the language are free, so all you have to do is hire
some Zen Cart web developers to have your projects completed cost-effectively.
 Easy to deploy: Many hosting companies are willing to offer a server for companies that run
using PHP.
 Reliable: The web language is rather efficient because it possesses a scalable code.
 Fast processing: PHP uses its own memory space, automatically reducing the loading time for
the server. This allows a faster processing capacity which is incredibly beneficial for websites
with high traffic.
 Secure: Known for its vast layers of security protection.
 User-friendly: Not only is PHP easy to learn but it’s also easy to use with a high level of
simplicity at the root of its function.
 Easy to integrate: There’s no need to re-code or re-develop because PHP is easy to coordinate
with all company software.
Role of React :-
 React is an excellent framework for web development in 2023. It’s
easy to learn, and it offers a lot of benefits over other JavaScript libraries, including those that
are more popular. With the growing popularity of React, it’s not hard to understand why a lot
of people are choosing to use the React framework for their web development processes.
 React offers an amazing ecosystem, tons of features and tools, and tremendous community
support, and also is SEO-friendly. However, more than knowing all these benefits, you must
know how they contribute to your web development process is required.
 The main reason why React is so popular is that it offers developers an easy way to create
applications with a lot of functionality at once. This means that your app doesn’t need to be as
complicated as other frameworks; instead, you can focus on building features in your app
rather than how to get those features up and running on the web. This can help make your
app easier for users to understand and use! There are multiple platforms based on React to
create web applications, mobile applications, and cross-hybrid platforms for desktops.
Creating the home page using HTML& CSS
<html lang="en"><head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Just Relax PG</title>
<link href="css/bootstrap.min.css" rel="stylesheet">

<link href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&a
mp;display=swap" rel="stylesheet">
<link href="css/common.css" rel="stylesheet"> <link href="css/home.css" rel="stylesheet">
</head>
<body>
<div class="header sticky-top">
<nav class="navbar navbar-expand-md navbar-light">
<a class="navbar-brand" href="index.php">
<imgsrc="img/logo.png">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#my-navbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="my-navbar">

<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="modal" data-target="#signup-modal">
<i class="fas fa-user"></i>Signup
</a>
</li>
<div class="nav-vl"></div>
<a class="nav-link" href="#" data-toggle="modal" data-target="#login-modal">
<i class="fas fa-sign-in-alt"></i>Login
</a>
</li>
</ul>
</div>
</nav>
</div>
<div id="loading">
</div>
<div class="banner-container">
<h2 class="white pb-3"><b>Just Relax PG</b> - Your Second Home</h2>
<form id="search-form" action="property_list.php" method="GET">

<div class="input-group city-search">
<input type="text" class="form-control input-city" id="city" name="city" placeholder="Enter your city to search for PGs">
<div class="input-group-append">
<button type="submit" class="btnbtn-secondary">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</form>
</div>
<div class="page-container">
<h1 class="city-heading">
Major Cities
</h1>
<div class="row">
<div class="city-card-container col-md">
<a href="property_list.php?city=Delhi">
<div class="city-card rounded-circle">
<imgsrc="img/delhi.png" class="city-img">
</div>
</a>
</div>

<a href="property_list.php?city=Mumbai">
<imgsrc="img/mumbai.png" class="city-img">
</div>
</a>
</div>

<a href="property_list.php?city=Bengaluru">
<imgsrc="img/bangalore.png" class="city-img">
</div>
</a>
</div>

<a href="property_list.php?city=Hyderabad">
<imgsrc="img/hyderabad.png" class="city-img">
</div>
</a>
</div>
</div>
</div>
<div class="modal fade" id="signup-modal" tabindex="-1" role="dialog" aria-labelledby="signup-heading" aria-hidden="true">

<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="signup-heading">Signup with <b>Just Relax PG</b></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="signup-form" class="form" role="form" method="post" action="api/signup_submit.php">
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-user"></i>
</span>
</div>
<input type="text" class="form-control" name="full_name" placeholder="Full Name" maxlength="30" required="">
</div>

<i class="fas fa-phone-alt"></i>
</span>
</div>
<input type="text" class="form-control" name="phone" placeholder="Phone Number" maxlength="10" minlength="10"
required="">
</div>

<i class="fas fa-envelope"></i>
</span>
</div>
<input type="email" class="form-control" name="email" placeholder="Email" required="">
</div>

<i class="fas fa-lock"></i>
</span>
</div>
<input type="password" class="form-control" name="password" placeholder="Password" minlength="6" required="">
</div>

<i class="fas fa-university"></i>
</span>
</div>
<input type="text" class="form-control" name="college_name" placeholder="College Name" maxlength="150" required="">
</div>
<div class="form-group">
<span>I'm a</span>
<input type="radio" class="ml-3" id="gender-male" name="gender" value="male"> Male
<label for="gender-male">
</label>
<input type="radio" class="ml-3" id="gender-female" name="gender" value="female">
<label for="gender-female">
Female
</label>
</div>
<button type="submit" class="btn btn-block btn-primary">Create Account</button>
</div>
</form>
</div>
<div class="modal-footer">
<span>Already have an account?
<a href="#" data-dismiss="modal" data-toggle="modal" data-target="#login-modal">Login</a>
</span>
</div>
</div>
</div>
</div>
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="login-heading" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<h5 class="modal-title" id="login-heading">Login with <b>Just Relax PG</b></h5>
<span aria-hidden="true">x</span>
</button>
</div>
<form id="login-form" class="form" role="form" method="post" action="api/login_submit.php">
</span>
</div>
<input type="email" class="form-control" name="email" placeholder="Email" required="">
</div>

</span>
</div>
<input type="password" class="form-control" name="password" placeholder="Password" minlength="6" required="">
</div>
<button type="submit" class="btn btn-block btn-primary">Login</button>
</div>
</form>
</div>
<span>
<a href="#" data-dismiss="modal" data-toggle="modal" data-target="#signup-modal">Click here</a>
to register a new account
</span>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="page-container footer-container">
<div class="footer-cities">
<div class="footer-city">
<a href="property_list.php?city=Delhi">PG in Delhi</a>
</div>
<a href="property_list.php?city=Mumbai">PG in Mumbai</a>
</div>
<a href="property_list.php?city=Bengaluru">PG in Bangalore</a>
</div>
<a href="property_list.php?city=Hyderabad">PG in Hyderabad</a>
</div>
</div>
<div class="footer-copyright">© 2023 Copyright <b>Just Relax PG</b><br> Made by
<a href="https://github.com/Ankit-saha-iiitbbsr" target="_blank"> ISHANT PANDEY<br></a>
<a href="index.html"> Home <br></a><a href="#"> Back to top </a></div>
</div>
</div>–––
<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
</body></html>
CSS :-
.banner-container {
background-image: url("../img/background.jpg");
background-attachment: fixed;
box-shadow: inset 0 0 0 2000px #1c1c1c7a;
text-align: center;
padding: 160px 15px;
}
@media (max-width: 768px) {
.banner-container {
padding: 100px 15px;
}
}
.city-search {
max-width: 530px;
margin: auto;
position: relative;
}
.city-heading {
text-align: center;
}
.city-card-container {
text-align: center;
margin-top: 20px;
}
.city-card {
background-color: #ffffff;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
display: inline-block;
padding: 20px;
}
.city-card:focus,
.city-card:hover {
}
.city-img {
height: 100px;
width: 100px;
}
Output:-
Creating property list page using HTML& CSS
<!DOCTYPE html>
<html lang="en">
<head>
<title>Best PG's in Mumbai | Just Relax PG</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />

<link href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&di
splay=swap" rel="stylesheet" />
<link href="css/common.css" rel="stylesheet" />
<link href="css/property_list.css" rel="stylesheet" />
</head>
<body>
<a class="navbar-brand" href="index.html">
<imgsrc="img/logo.png" />
</a>
</button>

</a>
</li>
</a>
</li>
</ul>
</div>
</nav>
</div>
<div id="loading">
</div>
<nav aria-label="breadcrumb">
<ol class="breadcrumb py-2">
<li class="breadcrumb-item">
<a href="index.html">Home</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
Mumbai
</li>
</ol>
</nav>
<div class="filter-bar row justify-content-around">
<div class="col-auto" data-toggle="modal" data-target="#filter-modal">
<imgsrc="img/filter.png" alt="filter" />
<span>Filter</span>
</div>
<div class="col-auto">
<imgsrc="img/desc.png" alt="sort-desc" />
<span>Highest rent first</span>
</div>
<div class="col-auto">
<imgsrc="img/asc.png" alt="sort-asc" />
<span>Lowest rent first</span>
</div>
</div>
<div class="property-card row">

<div class="image-container col-md-4">
<imgsrc="img/properties/1/1d4f0757fdb86d5f.jpg" />
</div>
<div class="content-container col-md-8">
<div class="row no-gutters justify-content-between">
<div class="star-container" title="4.5">
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<div class="interested-container">
<i class="far fa-heart"></i>
<div class="interested-text">3 interested</div>
</div>
</div>
<div class="detail-container">
<div class="property-name">Navkar Paying Guest</div>
<div class="property-address">44, Juhu Scheme, Juhu, Mumbai, Maharashtra 400058</div>
<div class="property-gender">
<imgsrc="img/male.png" />
</div>
</div>
<div class="row no-gutters">
<div class="rent-container col-6">
<div class="rent">Rs 9,500/-</div>
<div class="rent-unit">per month</div>
</div>
<div class="button-container col-6">
<a href="property_detail.html" class="btnbtn-primary">View</a>
</div>
</div>
</div>
</div>

<imgsrc="img/properties/1/eace7b9114fd6046.jpg" />
</div>
<div class="content-container col-md-8">
</div>
<div class="interested-container">
<i class="far fa-heart"></i>
<div class="interested-text">6 interested</div>
</div>
</div>
<div class="detail-container">
<div class="property-name">Ganpati Paying Guest</div>
<div class="property-address">Police Beat, Sainath Complex, Besides, SV Rd, Daulat Nagar, Borivali East, Mumbai -
400066</div>
<div class="property-gender">
<imgsrc="img/unisex.png" />
</div>
</div>
<div class="row no-gutters">
<div class="rent-container col-6">
<div class="rent">Rs 8,500/-</div>
<div class="rent-unit">per month</div>
</div>
<div class="button-container col-6">
<a href="property_detail.html" class="btnbtn-primary">View</a>
</div>
</div>
</div>
</div>

<imgsrc="img/properties/1/46ebbb537aa9fb0a.jpg" />
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="login-heading" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<h5 class="modal-title" id="login-heading">Login with PGLife</h5>
<span aria-hidden="true">×</span>
</button>
</div>
<form id="login-form" class="form" role="form">
</span>
</div>
<input type="email" class="form-control" name="email" placeholder="Email" required>
</div>

</span>
</div>
<input type="password" class="form-control" name="password" placeholder="Password" minlength="6" required>
</div>
<button type="submit" class="btnbtn-block btn-primary">Login</button>
</div>
</form>
</div>
<span>
</span>
</div>
</div>
</div>
</div>
<a href="property_list.html">PG in Delhi</a>
</div>
<a href="property_list.html">PG in Mumbai</a>
</div>
<a href="property_list.html">PG in Bangalore</a>
</div>
<a href="property_list.html">PG in Hyderabad</a>
</div>
</div>
<div class="footer-copyright">© 2020 Copyright PG Life </div>
</div>
</div>

</body>
</html>
CSS :-
.filter-bar > div {
cursor: pointer;
font-size: 13px;
text-align: center;
margin-bottom: 16px;
}
.filter-bar img {
width: 40px;
height: 40px;
border-radius: 40px;
border: 1px solid #646870;
padding: 6px;
margin-right: 8px;
}

.filter-bar img {
display: block;
margin: 0px auto 4px;
}
}
.property-card {
background-color: #ffffff;
border-radius: 2px;
padding: 15px 0px;
}
.property-card:focus,
.property-card:hover {
}
.image-container {
text-align: center;
}

.image-container {
padding-bottom: 12px;
}
}
.image-container img {
width: 100%;
max-width: 300px;
}
.star-container i {
color: #EA322E;
font-size: 10px;
margin-right: 6px;
}
.interested-container {
text-align: center;
}
.interested-container i {
color: #EA322E;
font-size: 20px;
cursor: pointer;
}
.interested-text {
font-size: 10px;
}
.detail-container {
}
.property-name {
font-size: 18px;
font-weight: 600;
}
.property-address {
color: #6f6f6f;
font-size: 13px;
}
.property-gender img {
width: 40px;
}
.rent-container {
display: flex;
align-items: center;
}
.rent {
font-size: 18px;
font-weight: bold;
padding-right: 10px;
}
.rent-unit {
color: #6f6f6f;
font-size: 12px;
}
.button-container .btn {
font-size: 14px;
border-radius: 0px;
width: 140px;
float: right;
}
/* No Property */
.no-property-container {
}
.no-property-container p {
font-size: 24px;
text-align: center;
}
/* Filter Modal */
#filter-modal .modal-dialog {
max-width: 600px;
}
#filter-modal .modal-body h5 {
color: #777777;
}
#filter-modal .modal-body hr {
margin: 4px 0px;
}
#filter-modal .modal-body button {

font-size: 14px;
width: 100px;
margin: 16px;
}
#filter-modal .modal-body .btn-active {

color: #fff;
background-color: #343a40;
}
#filter-modal .modal-body button i {

margin-right: 8px;
}
#filter-modal .modal-footer button {

width: 120px;
}
OUTPUT:-
Signup Page:-
Login Page :-
Creating property detail page using HTML& CSS
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ganpati Paying Guest | Ramu PG</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />

<link href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&di
splay=swap" rel="stylesheet" />
<link href="css/common.css" rel="stylesheet" />
<link href="css/property_detail.css" rel="stylesheet" />
</head>
<body>
<a class="navbar-brand" href="index.html">
<imgsrc="img/logo.png" />
</a>
</button>

</a>
</li>
</a>
</li>
</ul>
</div>
</nav>
</div>
<div id="loading">
</div>
<nav aria-label="breadcrumb">
<ol class="breadcrumb py-2">
<a href="index.html">Home</a>
</li>
<a href="property_list.html">Mumbai</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
Ganpati Paying Guest
</li>
</ol>
</nav>
<div id="property-images" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
<li data-target="#property-images" data-slide-to="0" class="active"></li>
<li data-target="#property-images" data-slide-to="1" class=""></li>
<li data-target="#property-images" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img/properties/1/1d4f0757fdb86d5f.jpg" alt="slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/properties/1/46ebbb537aa9fb0a.jpg" alt="slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/properties/1/eace7b9114fd6046.jpg" alt="slide">
</div>
</div>
<a class="carousel-control-prev" href="#property-images" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#property-images" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="property-summary page-container">

<imgsrc="img/amenities/rowater.svg">
<span>Water Purifier</span>
</div>
<div class="amenity-container">
<imgsrc="img/amenities/dining.svg">
<span>Dining</span>
</div>
<imgsrc="img/amenities/washingmachine.svg">
<span>Washing Machine</span>
</div>
</div>
<div class="col-md-auto">
<h5>Bedroom</h5>
<imgsrc="img/amenities/bed.svg">
<span>Bed with Matress</span>
</div>
<imgsrc="img/amenities/ac.svg">
<span>Air Conditioner</span>
</div>
</div>
<div class="col-md-auto">
<h5>Washroom</h5>
<imgsrc="img/amenities/geyser.svg">
<span>Geyser</span>
</div>
</div>
</div>
</div>
</div>
<div class="property-about page-container">

<h1>About the Property</h1>
<p>Furnished studio apartment - share it with close friends! Located in posh area of Bijwasan in Delhi, this house is available for
both boys and girls. Go for a private room or opt for a shared one and make it your own abode. Go out with your new friends - catch a
movie at the nearest cinema hall or just chill in a cafe which is not even 2 kms away. Unwind with your flatmates after a long day at
work/college. With a common living area and a shared kitchen, make your own FRIENDS moments. After all, there's always a Joey with
unlimited supply of food. Remember, all it needs is one crazy story to convert a roomie into a BFF. What's nearby/Your New
Neighborhood 4.0 Kms from Dwarka Sector- 21 Metro Station.</p>
</div>
<div class="property-rating">
<h1>Property Rating</h1>
<div class="row align-items-center justify-content-between">
<div class="col-md-6">
<div class="rating-criteria row">
<div class="col-6">
<i class="rating-criteria-icon fas fa-broom"></i>
<span class="rating-criteria-text">Cleanliness</span>
</div>
<div class="rating-criteria-star-container col-6" title="4.3">
</div>
</div>

<div class="col-6">
<i class="rating-criteria-icon fas fa-utensils"></i>
<span class="rating-criteria-text">Food Quality</span>
</div>
<i class="far fa-star"></i>
</div>
</div>

<div class="col-6">
<i class="rating-criteria-icon fa fa-lock"></i>
<span class="rating-criteria-text">Safety</span>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="rating-circle">
<div class="total-rating">4.2</div>
<div class="rating-circle-star-container">
<i class="far fa-star"></i>
</div>
</div>
</div>
</form>
</div>
<span>
</span>
</div>
</div>
</div>
</div>
<a href="property_list.html">PG in Delhi</a>
</div>
<a href="property_list.html">PG in Mumbai</a>
</div>
<a href="property_list.html">PG in Bangalore</a>
</div>
<a href="property_list.html">PG in Hyderabad</a>
</div>
</div>
<div class="footer-copyright">© 2023 Copyright Ramu PG </div>
</div>
</div>

</body>
</html>
CSS :-
.carousel img {
height: 300px;
object-fit: cover;
}
.property-summary {
padding: 24px;
}
.property-amenities,
.property-rating {
background-color: #fcfaf7;
}
.star-container i {
color: #EA322E;
font-size: 12px;
margin-right: 6px;
}
text-align: center;
}

padding-right: 0px;
}
}
.interested-container i {
color: #EA322E;
font-size: 20px;
cursor: pointer;
}
.interested-text {
font-size: 10px;
}
.detail-container {
}
.property-name {
font-size: 36px;
font-weight: 600;
}

.property-name {
font-size: 24px;
}
}
.property-address {
color: #6f6f6f;
font-size: 16px;
}
.property-gender img {
width: 40px;
}
.rent-container {
display: flex;
align-items: center;
}
.rent {
font-size: 24px;
font-weight: bold;
}
.rent {
font-size: 18px;
}
}
.rent-unit {
color: #6f6f6f;
font-size: 12px;
}
.button-container .btn {
font-size: 14px;
border-radius: 0px;
width: 140px;
float: right;
}

.property-amenities .row>div {
}
}
.amenity-container {
margin: 8px 0px;
}
.amenity-container img {
height: 20px;
margin-top: -4px;
margin-right: 4px;
}
.rating-criteria {
margin: 28px 0px;
}
.rating-criteria-icon {
width: 14px;
}
.rating-criteria-text {
margin-left: 8px;
}
.rating-criteria-star-container {
margin-top: -2px;
}
.rating-criteria-star-container i {
color: #66C2BD;
font-size: 12px;
}
.rating-circle {
background-color: #66C2BD;
color: white;
text-align: center;
height: 160px;
width: 160px;
border-radius: 50%;
padding-top: 32px;
margin: auto;
}
.total-rating {
font-size: 40px;
}
.rating-circle-star-container {
font-size: 12px;
}
.testimonial-block {
background-color: #fcfaf7;
padding: 0px 160px 24px;
margin-top: 80px;
}

.testimonial-block {
padding: 0px 24px 24px;
}
}
.testimonial-image-container {
text-align: center;
}
.testimonial-img {
width: 100px;
border-radius: 50%;
position: relative;
top: -40px;
}
.testimonial-text {
color: #777777;
text-align: center;
position: relative;
}
.testimonial-text i {
font-size: 20px;
position: absolute;
left: 0px;
top: 0px;
}
.testimonial-text p {
text-indent: 20px;
}
.testimonial-name {
color: #2F2E2E;
text-align: right;
font-weight: bold;
margin-top: 12px;
}
Use of JAVASCRIPT in creating the pages
File name:- common.js

window.addEventListener("load", function () {
var signup_form = document.getElementById("signup-form");
signup_form.addEventListener("submit", function (event) {
var XHR = new XMLHttpRequest();
var form_data = new FormData(signup_form);
// On success
XHR.addEventListener("load", signup_success);
// On error
XHR.addEventListener("error", on_error);
// Set up request
XHR.open("POST", "api/signup_submit.php");
// Form data is sent with request

XHR.send(form_data);
document.getElementById("loading").style.display = 'block';
event.preventDefault();
});
var login_form = document.getElementById("login-form");

login_form.addEventListener("submit", function (event) {
var XHR = new XMLHttpRequest();
var form_data = new FormData(login_form);
// On success
XHR.addEventListener("load", login_success);
// On error
XHR.addEventListener("error", on_error);
// Set up request
XHR.open("POST", "api/login_submit.php");
// Form data is sent with request

XHR.send(form_data);
document.getElementById("loading").style.display = 'block';
event.preventDefault();
});
});
var signup_success = function (event) {

document.getElementById("loading").style.display = 'none';
var response = JSON.parse(event.target.responseText);
if (response.success) {
alert(response.message);
window.location.href = "index.php";
} else {
}
};
var login_success = function (event) {

var response = JSON.parse(event.target.responseText);

if (response.success) {
location.reload();
} else {
}
};
var on_error = function (event) {

alert('Oops! Something went wrong.');

};
CONCLUSION
It is naive for an Extension professional to feel that if information is delivered during a learning activity,
the educational mission has been accomplished. The broader mandate that learning generate change
in behaviour, practice, or belief requires a much more sophisticated science and art. In today's
information-rich culture, Extension's store of information no longer makes the organization unique.
Rather, Extension's organizational strength and uniqueness lie in the experience and capability of its
professionals to motivate individuals and groups to action.
It is important for Extension educators to develop and field test useful models for program design and
delivery that include behaviour change. It is equally important for the models to be linked to sound
educational theory that will be valued by partnering agencies and understood by the targeted clientele.
The process described in this article accomplished these objectives and resulted in information that
now provides a framework for quality training in a broad range of programming. Further development of
the model has resulted in additional insights with practical application beyond the scope of this article.
BIBLIOGRAPHY
BOOKS:-
HTML AND CSS: Design and build Websites
Learning web design: - A Beginner’s Guide
REFERENCES:-
 www.javapoint.com
 http://www.w3school.com
 www.github.com

Internship File

Uploaded by

Document Information

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

Internship File

Uploaded by

Copyright:

Available Formats

A Summer Training Report

Bachelor of Computer Application (BCA)

College of Innovative Management and Science

Bachelor of Computer Application (BCA)

College of Innovative Management and Science

NAME- ISHANT PANDEY

4. Creating the home page using HTML & 5-11

5. Creating property list page using HTML & 12-19

7. Creating property detail page using HTML 21-30

Server returns the response

<link href="css/bootstrap.min.css" rel="stylesheet">

<div class="collapse navbar-collapse justify-content-end" id="my-navbar">

<form id="search-form" action="property_list.php" method="GET">

<div class="city-card-container col-md">

<div class="city-card-container col-md">

<div class="city-card-container col-md">

<div class="modal fade" id="signup-modal" tabindex="-1" role="dialog" aria-labelledby="signup-heading" aria-hidden="true">

<div class="input-group form-group">

<div class="input-group form-group">

<div class="input-group form-group">

<div class="input-group form-group">

<div class="input-group form-group">

<script type="text/javascript" src="js/jquery.js"></script>

<link href="css/bootstrap.min.css" rel="stylesheet" />

<div class="collapse navbar-collapse justify-content-end" id="my-navbar">

<div class="property-card row">

<div class="property-card row">

<div class="property-card row">

<div class="input-group form-group">

<script type="text/javascript" src="js/jquery.js"></script>

@media (max-width: 768px) {

@media (max-width: 768px) {

#filter-modal .modal-body button {

#filter-modal .modal-body .btn-active {

#filter-modal .modal-body button i {

#filter-modal .modal-footer button {

<link href="css/bootstrap.min.css" rel="stylesheet" />

<div class="collapse navbar-collapse justify-content-end" id="my-navbar">

<div id="property-images" class="carousel slide" data-ride="carousel">

<div class="property-summary page-container">

<div class="property-about page-container">

<div class="rating-criteria row">

<div class="rating-criteria row">

<script type="text/javascript" src="js/jquery.js"></script>

@media (max-width: 768px) {

@media (max-width: 768px) {

@media (max-width: 768px) {

@media (max-width: 768px) {

File name:- common.js

// Form data is sent with request

var login_form = document.getElementById("login-form");

// Form data is sent with request

var signup_success = function (event) {

var login_success = function (event) {

var response = JSON.parse(event.target.responseText);

var on_error = function (event) {

alert('Oops! Something went wrong.');

Learning web design: - A Beginner’s Guide

You might also like