Awp Practicals2

6IT:B1 Enrollment no:-200160116522
Government Engineering
College Modasa
Name:- prajapati pratik dineshbhai
Enrollment No:- 200160116522
Subject:- Advanced Web Programming(3161611)
Batch:- 6IT-B1
Department:- Information and Technology
1 Adavance web programming

• Refreshing Java Script and CSS

Practical:-1
Aim: Design a web pages of your department with an
a rac ve background color, text color , an Image , font
etc. (use external CSS).
prac cal1.html:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>I.T Department of GEC modasa</title>
<meta name="viewport" content="width=device-width, initial-
scale=1" />
<meta name="description" content="Website of IT Department of
GEC modasa" />
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<meta name="theme-color" content="#346fef">
<link rel="stylesheet" type="text/css" media="screen" href="css/
main.css" />
</head>
<body>
<div class="infobar" id="home">
<div class="phonenumber">Phone : 011-2222-3333</div>
<div class="mail">Mail: <a
href="mailto:admin@example.com">admin@example.com</a></div>
</div>
<nav>
<div class="handler" onclick="navbar()">
<div class="navicon">
<div class="bar"></div>
</div>
</div>
<ul id="myNav" class="def">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#faculty">Faculty</a></li>
<li><a href="#contact">Contact</a></li>
<li id="searchbox"><a href="#">Search</a></li>
</ul>

tt
ti

ti

</nav>
<div id="popup" class="popupWindow">

<div class="popup-content">
<span class="close">×</span>
<form action="search" name="input" method="get"

class="customSearch">
<input value="" name="q" size="20" type="text"/>
<input value="Search" type="submit"/>
</form>
</div>
</div>
<div class="slideshow-container">
<div class="mySlides fade">
<img src="img/gallery/2.jpeg">
</div>
<div class="text">Caption Two</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div class="about col-12" id="about">
<p class="dHeader">About Department</p>
<div class="underline"></div>
<div class="dContent">
Lorem ipsum dolor sit amet consectetur, adipisicing
elit. Consectetur veniam dignissimos rem deleniti quod aut nisi
modi placeat repudiandae deserunt alias sint possimus ad, in dicta
maxime assumenda enim vitae molestiae repellendus, aliquid facere
accusamus. Error sint necessitatibus vitae laboriosam soluta eos
commodi dolorem, obcaecati neque quisquam. Ad, reprehenderit nisi.
</div>
</div>
<div class="staff col-12" id="faculty">
<p class="sHeader">Faculty & Staff</p>
<div class="sInfo">
<div class="card col-2">
<img src="img/avatar.png" />
<h4>
M B Chaudhari</h4>
<p>Head Of The Department</p>
</div>
<h4>
Dr. Mahesh M. Goyani</h4>

<p>PROFESSOR</p>
</div>

<h4>
DODIYA ANIRUDDHSINH KARSHANBHAI</h4>
<p>PROFESSOR</p>
</div>
<div class="card">
<h4>Prof.Rinkalben J. Prajapati</h4>
<p>PROFESSOR</p>
</div>
<div class="card">
<h4>Upendra Bhoi</h4>
<p>PROFESSOR</p>
</div>
<div class="card">
<h4>Prof. Minal chauhan</h4>
<p>PROFESSOR</p>
</div>
<div class="card ">
<h4>Rahul Nareshbhai Vaza</h4>
<p>PROFESSOR</p>
</div>
<div class="card ">
<p>PROFESSOR</p>
</div>
<div class="card ">
<p>PROFESSOR</p>
</div>
<div class="card ">
<p>PROFESSOR</p>
</div>
</div>
<div class="col-12 about-footer">
<div class="social"><a href="https://www.facebook.com/"><i

class="fa fa-facebook-official fa-size" aria-hidden="true"></i></
a></div>
<div class="footer-info">
<div class="info">
<h2>I.T Department</h2>
<div class="logo-underline"></div>
<h3>GEC modasa</h3>
</div>
<div class="info" id="contact">
<h2>Contact Us</h2>
<h3><i class="fa fa-envelope" aria-hidden="true"></i> <a

href="mailto:mailto:admin@example.com">admin@example.com</a></h3>
<h3><i class="fa fa-phone-square" aria-
hidden="true"></i> Phone : 011-2222-3333</h3>
<h3><i class="fa fa-address-card" aria-
hidden="true"></i> gec,modasa, Gujarat 364000</h3>
</div>
<div class="info"><h2>Active Hours</h2>

<h3>Monday-Friday:- 8 AM To 6PM</h3>
<h3>Satuday:- 10AM To 6PM</h3>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/main.js" async></script>
</body>
</html>
main.css:-
@import url('fontawesome/css/font-awesome.min.css');
*{
box-sizing: border-box;
body{
margin: 0;
padding: 0;
font-family: Georgia, 'Times New Roman', Times, serif;
html
scroll-behavior: smooth;
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
a{
text-decoration: none;
color: white;
.infobar{
width: 100%;
display: inline-block;
padding-top:16px;
padding-bottom: 16px;
background-color: rgb(0, 0, 0);
margin-bottom: -5px;
color: white;
.phonenumber{
oat: left;
margin-left: 15px;
line-height: 25px;
cursor: pointer;
.mail{
oat: right;
margin-right: 15px;
padding: 5px;
cursor: pointer;
table {
border-color: black;
border-spacing: 0px;
border-width: 0px 0px 0px 0px;
nav ul li a{
color: white;
nav ul {
list-style-type: none;
over ow: hidden;
text-align: center;
margin: 0;

fl
fl
fl

padding: 0;
transition: max-height 0.5s;
nav ul li{
padding: 20px;
font-size: 1em;
. xed-nav{
position: xed;
width: 100%;
top:0;
z-index: 100;
. xed-nav ul{
background-color: rgba(4, 36, 77, 0.582);
li:hover{
background-color:rgb(0, 153, 255);
.handler{
display: none;
width: 100%;
padding: 15px 10px;
color: white;
cursor: pointer;
.navicon{
padding: 0 45%;
.bar{
width: 35px;
height: 5px;
margin: 6px 0;
background-color: white;
.mySlides {display: none;}
img {vertical-align: middle;}
.slideshow-container {
max-width: 100%;
position: relative;
margin: auto;
.mySlides.fade{
margin-bottom: -5%;
.slideshow-container > .mySlides.fade > img{
width: 100%;
background-size: cover;

fi
fi
fi

height: auto;
max-height: 100%;
object- t: cover;
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
.next {
right: 0;
border-radius: 3px 0 0 3px;
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
.text {
color: #000000a6;
text-shadow: 1px 1px rgb(255, 255, 255);
font-size: 2em;
padding: 8px 12px;
position: absolute;
top: 50%;
width: 100%;
text-align: center;
font-weight: bolder;
.active:hover {
background-color: #717171;
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
@keyframes fade {
from {opacity: .4}

fi

to {opacity: 1}
.popupWindow {
display: none;
position: xed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
over ow: auto;
background-color: rgb(0,0,0);
.popup-content {
background-color: # 00;
margin: auto;
padding: 20px;
border: 1px solid #8880;
width: 80%;
.close {
color: #aaaaaa;
oat: right;
font-size: 28px;
font-weight: bold;
.close:hover,
.close:focus {
color: #000;
cursor: pointer;
.customSearch{
padding-top: 15px;
margin: auto;
width: 65%;
input[type=text]{
margin: auto;
border: 2px solid rgb(0, 110, 255) !important;
border-radius: 4px;
outline: none;
padding: 12px 20px !important;
width: 65% !important;
input[type="submit"]{

fl
fl
fi
ff
ff
ff

border: none;
border-radius: 6px;
color: white;
padding: 16px 32px;
margin: 4px 2px;
cursor: pointer;
.col-12.document > .header{
font-size: 2em;
text-align: center;
margin-bottom: -0.1px;
.underline{
margin: auto;
padding: 0;
width: 10em;
height: 5px;
.about{
margin-top: 5%;
padding-top: 0.5%;
padding-bottom: 6em;
.dHeader{
text-align: center;
color: black;
font-size: 2em;
margin-bottom: 0px;
.dHeader > .underline {
.dContent{
padding-top: 3em;
margin:auto;
width: 75%;
font-size: 1.5em;
font-style: italic;
color: rgba(0, 0, 0, 0.637);
transition: 0.3s;
.dContent:hover{
color: black;
.sta {

ff

padding-top: 0.5%;
.sHeader{
text-align: center;
color: black;
font-size: 2em;
margin-bottom: 0;
.sHeader > .underline {
.sInfo{
padding-left: 10%;
padding-right: 10%;
.card {
height: auto;
margin: 2em 1em;
width: 16.66%;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.637);
transition: 0.3s;
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.637);
.card > img {
padding-top: 4px;
max-width: 50%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
.card > h4{
text-align: center;
.card >p {
text-align: center;
.document{
padding-top: 0.5%;
.content{
width: 75%;
text-align: center;


padding-top: 5px;
margin:auto;
.downloads {
background-color: rgb(0, 125, 255, 0.73);
padding-top: 0.5%;
margin-top: 50px;
.col-12.downloads > .header{
font-size: 2em;
text-align: center;
.about-footer{
margin-top:50px;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
.social{
text-align: center;
color: white;
padding-top: 5px;
.fa-size{
font-size: 3em;
a{
color: inherit;
.footer-info{
display: grid;
grid-template-columns: repeat(auto- t,minmax(200px,1fr));
grid-gap: 10px;
margin:0 5px;
.info{
display: block;
oat: left;
padding: 10px 10px;
color: white;
.info > h2{

fl
fi
text-align: center;
.info > h3 {
text-align: center;
.logo-underline{
margin: auto;
padding: 0;
width: 70%;
height: 5px;
.copyright{
padding-top: 100px;
text-align: center;
font-size: 1em;
color: white;
font-weight: bold;
.form{
margin: auto;
padding: 0;
width:50%;
.displayinfo{
text-align: center;
font-size: 1.5em;
font-weight: bold;
.loginTag{
text-align: center;
font-size: 1.2em;
input[type=text]{
padding: 15px 20px;
width: 100%;
border: none;
border-bottom: 2px solid rgb(0, 153, 255);
margin-top: 5%;
text-align: center;
font-size: 0.8em;
input[type=password]{
padding: 15px 20px;
width: 100%;
border: none;
margin-top: 5%;


text-align: center;
font-size: 0.8em;
.loginButton{
right: 50%;
margin-top:5%;
margin-right: 1em;
border: none;
border-radius: 4px;
color: white;
padding: 15px 32px;
text-align: center;
font-size:1em;
transition-duration: 0.4s;
cursor: pointer;
.loginButton:hover{
@media screen and (max-width: 600px) {
.infobar{
padding-top:16px;
.mail{
oat:left;
margin-left: auto;
padding: 2px;
.phonenumber{
margin-left:0;
padding-left: 25px;
padding: 2px;
line-height: normal;
nav ul{
max-height: 0;
.showing {
max-height: 22em;
nav ul li{
width: 100%;
padding: 15px;
text-align: center;

fl

.handler{
display: block;
font-size: 1.5em;
.text{
font-size: 1em;
font-size: 1.5em;
font-size: 1.5em;
.fa-size{
font-size: 2em;
.dHeader{
font-size: 1.5em;
.dContent{
font-size: 1em;
.sHeader{
font-size: 1.5em;
.card{
width: 100%;
.sInfo {
padding-left: 10%;
padding-right: 15%;
.form{
width: 70%;
input[type=text]{
width: 100%;
.loginButton{
padding: 5px 15px;
font-size: 1em;
input[type=text] {

.mail{
oat:right;
.phonenumber{
margin-left: 5px;
padding-left: 5px;
padding-right: 4px;
.fa-size{
font-size: 1em;
.sInfo {
padding-left: 10%;
padding-right: 20%;
.loginButton{
padding: 5px 15px;
font-size: 1em;
padding: 10px 39px;
input[type=text] {

fl
Output:-

Practical:-2
Aim: Create HTML Page with javascript which takes
Integer number as input and tells whether the number is
ODD or EVEN.
prac cal2.html:-
<!doctype html>
<html>
<head>
<script>
var num, temp;
function fun()
num = parseInt(document.getElementById("num").value);
if(num)
temp = document.getElementById("resPara");
temp.style.display = "block";
if(num%2==0)
document.getElementById("res").innerHTML = "Even";
else
document.getElementById("res").innerHTML = "Odd";
</script>
</head>
<body>
<p>Enter the Number: <input id="num"><button onclick="fun()">Check</

button></p>
<p id="resPara" style="display:none;">It is an <span id="res"></span> Number</

p>
</body>
</html>

ti

Output:-
 

Practical:-3
Aim: Write a JavaScript program to check if number is
prime or not.
prac cal3.html:-
<!doctype html>
<html>
<head>
<script>
var num, i, chk, temp;
function checkPrime()
num = parseInt(document.getElementById("num").value);
if(num)
chk=0;
temp = document.getElementById("resPara");
temp.style.display = "block";
for(i=2; i<num; i++)
if(num%2==0)
chk++;
break;
if(chk==0)
document.getElementById("res").innerHTML = "a Prime";
else
document.getElementById("res").innerHTML = "not a Prime";
</script>
</head>
<body>
<p>Enter the Number: <input id="num"><button onclick="checkPrime()">Check</

button></p>
<p id="resPara" style="display:none;">It is <span id="res"></span> Number</p>
</body>
</html>

ti

Output:- 

Practical:-4
Aim: Write a program to create a simple calculator using
JavaScript.
prac cal4.html:-
<html>
<head>
<script>
function dis(val) {
document.getElementById("result").value += val
function solve() {
let x = document.getElementById("result").value
let y = eval(x)
document.getElementById("result").value = y
function clr() {
document.getElementById("result").value = ""
</script>
<style>
.cal {
width: 100px;
height: 100px;
position: absolute;
left: 40%;
top: 30%;
margin: auto;
input[type="button"] {
color: rgb(255, 255, 255);
border: solid black 2px;
width: 100%;
padding: 20px;

ti

input[type="text"] {
border: solid black 2px;
width: 100%;
padding: 20px;
</style>
</head>
<body>
<div class="cal">
<table border="1">
<tr>
<td colspan="3"><input type="text" id="result" /></td>
<td><input type="button" value="c" onclick="clr()" /> </td>
</tr>
<tr>
<td><input type="button" value="1" onclick="dis('1')" /> </td>
<td><input type="button" value="/" onclick="dis('/')" /> </td>
</tr>
<tr>
<td><input type="button" value="-" onclick="dis('-')" /> </td>
</tr>
<tr>
<td><input type="button" value="+" onclick="dis('+')" /> </td>
</tr>
<tr>
<td><input type="button" value="." onclick="dis('.')" /> </td>
<td><input type="button" value="=" onclick="solve()" /> </td>
<td><input type="button" value="*" onclick="dis('*')" /> </td>
</tr>
</table>
</div>

</body>
</html>
Output:-

Practical:-5
Aim: Create HTML Page that contains form with elds
Name , Email, MobileNo , Gender , Favorite Color and a
bu on. write a JavaScript code to combine and display
the informa on in textbox when the bu on is clicked.
prac cal5.html:-
<!doctype html>
<html ng-app='myApp'>
<head>
<title>Sort the table on header click using AngularJS</title>
<link href="abhi.css" rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/
angular.min.js"></script>
<script src='controller.js' type='text/javascript'></script>
</head>
<body ng-controller="myController">
<table border='1'>
<tr>
<th ng-click='sortColumn("p_name")' ng-

class='sortClass("p_name")'>Product name</th>
<th ng-click='sortColumn("p_quality")' ng-

class='sortClass("p_quality")'>Product Quality</th>
<th ng-click='sortColumn("p_price")' ng-

class='sortClass("p_price")'>Product Price</th>
</tr>
<tr ng-repeat='friend in friends|orderBy:column:reverse'>
<td width='35%' align='center'>{{friend.p_name}}</td>
<td width='20%' align='center'>{{friend.p_quality}}</td>
<td width='25%' align='center'>{{friend.p_price}}</td>
</tr>
</table>
</body>
</html>

tt
ti
ti

tt
fi

Output:-

Practical:-6
Aim: write a javascript program to create user de ned
object Car with carModelName, carColor, carPrice, carSpeed
proper es and with displaySpeed(s),increaseSpeed(s) and
DescreaseSpeed(s) as methods.
prac cal6.html:-
<!DOCTYPE html>
<html lang="en">
<head>
<title>practical 6</title>
</head>
<body>
<p id="display"></p>
<div id="div">
</div>
<h3 id="speed"></h3>
<script>
class car {
constructor(carModelName, carColor, carPrice, carSpeed) {
this.carModelName = carModelName;
this.carColor = carColor;
this.carPrice = carPrice;
this.carSpeed = carSpeed;
displaySpeed() {
document.getElementById("speed").innerText = this.carSpeed;
increaseSpeed(s) {
this.carSpeed = this.carSpeed + s;
descreaseSpeed(s){
this.carSpeed = this.carSpeed - s;
var display = document.getElementById("display");
var div = document.getElementById("div");

ti
ti

fi
mycar = new car("honda", "white", 75000, 150)
display.innerText = `Car Name : ${mycar.carModelName}\nCar color : $

{mycar.carColor}\nCar price :${mycar.carPrice}\nCar speed : ${mycar.carSpeed}`
div.innerHTML = `<button onclick="mycar.displaySpeed()">display Speed</

button>
<button onclick="mycar.increaseSpeed(10)">increase Speed</button>
<button onclick="mycar.descreaseSpeed(10)">descrease Speed</button>`;
</script>
</body>
</html>
Output:-

Practical:-7
Aim: Write a JavaScript to loads and display HTML le on
webpage using Asynchronous Programming.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Callbacks</h2>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
function getFile(myCallback) {
let req = new XMLHttpRequest();
req.open('GET', "info.html");
req.onload = function() {
if (req.status == 200) {
myCallback(this.responseText);
} else {
myCallback("Error: " + req.status);
req.send();
getFile(myDisplayer);
</script>
</body>
</html>

fi
Output:-

Practical:-8
Aim: Use Bootstrap in Prac cal No.1 to make webpage
Responsive.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>I.T Department of GEC modasa</title>
<meta name="viewport" content="width=device-width, initial-
scale=1" />
<meta name="description" content="Website of IT Department of
GEC modasa" />
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<meta name="theme-color" content="#346fef">
<link rel="stylesheet" type="text/css" media="screen" href="css/
main.css" />
</head>
<body>
<div class="infobar" id="home">
<div class="phonenumber">Phone : 011-2222-3333</div>
<div class="mail">Mail: <a
href="mailto:admin@example.com">admin@example.com</a></div>
</div>
<nav>
<div class="handler" onclick="navbar()">
<div class="navicon">
</div>
</div>
<ul id="myNav" class="def">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#faculty">Faculty</a></li>
<li><a href="#contact">Contact</a></li>
<li id="searchbox"><a href="#">Search</a></li>
</ul>
</nav>
<div id="popup" class="popupWindow">

<div class="popup-content">
<span class="close">×</span>
ti

<form action="search" name="input" method="get"

class="customSearch">
<input value="" name="q" size="20" type="text"/>
<input value="Search" type="submit"/>
</form>
</div>
</div>
<div class="slideshow-container">
</div>
<div class="text">Caption Two</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div class="about col-12" id="about">
<p class="dHeader">About Department</p>
<div class="dContent">
Lorem ipsum dolor sit amet consectetur, adipisicing
elit. Consectetur veniam dignissimos rem deleniti quod aut nisi
modi placeat repudiandae deserunt alias sint possimus ad, in dicta
maxime assumenda enim vitae molestiae repellendus, aliquid facere
accusamus. Error sint necessitatibus vitae laboriosam soluta eos
commodi dolorem, obcaecati neque quisquam. Ad, reprehenderit nisi.
</div>
</div>
<div class="staff col-12" id="faculty">
<p class="sHeader">Faculty & Staff</p>
<div class="sInfo">
<h4>
M B Chaudhari</h4>
<p>Head Of The Department</p>
</div>
<h4>
Dr. Mahesh M. Goyani</h4>
<p>PROFESSOR</p>
</div>

<h4>
DODIYA ANIRUDDHSINH KARSHANBHAI</h4>
<p>PROFESSOR</p>
</div>
<div class="card">
<h4>Prof.Rinkalben J. Prajapati</h4>
<p>PROFESSOR</p>
</div>
<div class="card">
<h4>Upendra Bhoi</h4>
<p>PROFESSOR</p>
</div>
<div class="card">
<h4>Prof. Minal chauhan</h4>
<p>PROFESSOR</p>
</div>
<div class="card ">
<p>PROFESSOR</p>
</div>
<div class="card ">
<p>PROFESSOR</p>
</div>
<div class="card ">
<p>PROFESSOR</p>
</div>
<div class="card ">
<p>PROFESSOR</p>
</div>
</div>
<div class="col-12 about-footer">
<div class="social"><a href="https://www.facebook.com/"><i
class="fa fa-facebook-official fa-size" aria-hidden="true"></i></
a></div>
<div class="footer-info">
<div class="info">
<h2>I.T Department</h2>
<div class="logo-underline"></div>
<h3>GEC modasa</h3>
</div>
<div class="info" id="contact">
<h2>Contact Us</h2>
<h3><i class="fa fa-envelope" aria-hidden="true"></i> <a

href="mailto:mailto:admin@example.com">admin@example.com</a></h3>
<h3><i class="fa fa-phone-square" aria-
hidden="true"></i> Phone : 011-2222-3333</h3>
<h3><i class="fa fa-address-card" aria-
hidden="true"></i> gec,modasa, Gujarat 364000</h3>
</div>
<div class="info"><h2>Active Hours</h2>

<h3>Monday-Friday:- 8 AM To 6PM</h3>
<h3>Satuday:- 10AM To 6PM</h3>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/main.js" async></script>
</body>
</html>
main.css:-
@import url('fontawesome/css/font-awesome.min.css');
*{
box-sizing: border-box;
body{
margin: 0;
padding: 0;
font-family: Georgia, 'Times New Roman', Times, serif;
html
scroll-behavior: smooth;
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}

.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
a{
color: white;
.infobar{
width: 100%;
padding-top:16px;
color: white;
.phonenumber{
oat: left;
margin-left: 15px;
line-height: 25px;
cursor: pointer;
.mail{
oat: right;
margin-right: 15px;
padding: 5px;
cursor: pointer;
table {
border-color: black;
border-spacing: 0px;
border-width: 0px 0px 0px 0px;
nav ul li a{
color: white;
nav ul {
list-style-type: none;
over ow: hidden;
text-align: center;
margin: 0;
padding: 0;
transition: max-height 0.5s;
nav ul li{
padding: 20px;
font-size: 1em;

fl
fl
fl
. xed-nav{
position: xed;
width: 100%;
top:0;
z-index: 100;
. xed-nav ul{
li:hover{
background-color:rgb(0, 153, 255);
.handler{
display: none;
width: 100%;
padding: 15px 10px;
color: white;
cursor: pointer;
.navicon{
padding: 0 45%;
.bar{
width: 35px;
height: 5px;
margin: 6px 0;
.mySlides {display: none;}
img {vertical-align: middle;}
.slideshow-container {
max-width: 100%;
position: relative;
margin: auto;
.mySlides.fade{
margin-bottom: -5%;
.slideshow-container > .mySlides.fade > img{
width: 100%;
background-size: cover;
height: auto;
max-height: 100%;
object- t: cover;
.prev, .next {
cursor: pointer;
position: absolute;

fi
fi
fi
fi

top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
.next {
right: 0;
border-radius: 3px 0 0 3px;
.prev:hover, .next:hover {
.text {
color: #000000a6;
text-shadow: 1px 1px rgb(255, 255, 255);
font-size: 2em;
padding: 8px 12px;
position: absolute;
top: 50%;
width: 100%;
text-align: center;
font-weight: bolder;
.active:hover {
background-color: #717171;
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
.popupWindow {
display: none;
position: xed;
z-index: 1;

fi

padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
over ow: auto;
background-color: rgb(0,0,0);
.popup-content {
background-color: # 00;
margin: auto;
padding: 20px;
border: 1px solid #8880;
width: 80%;
.close {
color: #aaaaaa;
oat: right;
font-size: 28px;
font-weight: bold;
.close:hover,
.close:focus {
color: #000;
cursor: pointer;
.customSearch{
padding-top: 15px;
margin: auto;
width: 65%;
input[type=text]{
margin: auto;
border: 2px solid rgb(0, 110, 255) !important;
border-radius: 4px;
outline: none;
padding: 12px 20px !important;
border: none;
border-radius: 6px;
color: white;
padding: 16px 32px;

fl
fl
ff
ff
ff

margin: 4px 2px;
cursor: pointer;
font-size: 2em;
text-align: center;
.underline{
margin: auto;
padding: 0;
width: 10em;
height: 5px;
.about{
margin-top: 5%;
padding-top: 0.5%;
.dHeader{
text-align: center;
color: black;
font-size: 2em;
margin-bottom: 0px;
.dHeader > .underline {
.dContent{
padding-top: 3em;
margin:auto;
width: 75%;
font-size: 1.5em;
font-style: italic;
color: rgba(0, 0, 0, 0.637);
transition: 0.3s;
.dContent:hover{
color: black;
.sta {
padding-top: 0.5%;
.sHeader{
text-align: center;

ff

color: black;
font-size: 2em;
margin-bottom: 0;
.sHeader > .underline {
.sInfo{
padding-left: 10%;
padding-right: 10%;
.card {
height: auto;
margin: 2em 1em;
width: 16.66%;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.637);
transition: 0.3s;
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.637);
.card > img {
padding-top: 4px;
max-width: 50%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
.card > h4{
text-align: center;
.card >p {
text-align: center;
.document{
padding-top: 0.5%;
.content{
width: 75%;
text-align: center;
padding-top: 5px;
margin:auto;
.downloads {
background-color: rgb(0, 125, 255, 0.73);


padding-top: 0.5%;
margin-top: 50px;
font-size: 2em;
text-align: center;
.about-footer{
margin-top:50px;
padding-top: 20px;
padding-left: 20px;
.social{
text-align: center;
color: white;
padding-top: 5px;
.fa-size{
font-size: 3em;
a{
color: inherit;
.footer-info{
display: grid;
grid-template-columns: repeat(auto- t,minmax(200px,1fr));
grid-gap: 10px;
margin:0 5px;
.info{
display: block;
oat: left;
padding: 10px 10px;
color: white;
.info > h2{
text-align: center;
.info > h3 {
text-align: center;

fl
fi
.logo-underline{
margin: auto;
padding: 0;
width: 70%;
height: 5px;
.copyright{
padding-top: 100px;
text-align: center;
font-size: 1em;
color: white;
font-weight: bold;
.form{
margin: auto;
padding: 0;
width:50%;
.displayinfo{
text-align: center;
font-size: 1.5em;
font-weight: bold;
.loginTag{
text-align: center;
font-size: 1.2em;
input[type=text]{
padding: 15px 20px;
width: 100%;
border: none;
margin-top: 5%;
text-align: center;
font-size: 0.8em;
input[type=password]{
padding: 15px 20px;
width: 100%;
border: none;
margin-top: 5%;
text-align: center;
font-size: 0.8em;
.loginButton{

right: 50%;
margin-top:5%;
margin-right: 1em;
border: none;
border-radius: 4px;
color: white;
padding: 15px 32px;
text-align: center;
font-size:1em;
transition-duration: 0.4s;
cursor: pointer;
.loginButton:hover{
.infobar{
padding-top:16px;
.mail{
oat:left;
margin-left: auto;
padding: 2px;
.phonenumber{
margin-left:0;
padding-left: 25px;
padding: 2px;
nav ul{
max-height: 0;
.showing {
max-height: 22em;
nav ul li{
width: 100%;
padding: 15px;
text-align: center;
.handler{
display: block;
font-size: 1.5em;

fl
.text{
font-size: 1em;
font-size: 1.5em;
font-size: 1.5em;
.fa-size{
font-size: 2em;
.dHeader{
font-size: 1.5em;
.dContent{
font-size: 1em;
.sHeader{
font-size: 1.5em;
.card{
width: 100%;
.sInfo {
padding-left: 10%;
padding-right: 15%;
.form{
width: 70%;
input[type=text]{
width: 100%;
.loginButton{
padding: 5px 15px;
font-size: 1em;
input[type=text] {
.mail{
oat:right;

fl

.phonenumber{
margin-left: 5px;
padding-left: 5px;
padding-right: 4px;
.fa-size{
font-size: 1em;
.sInfo {
padding-left: 10%;
padding-right: 20%;
.loginButton{
padding: 5px 15px;
font-size: 1em;
padding: 10px 39px;
input[type=text] {

Output:-

• Angular JS Program
Practical:-1
Aim:Design Order Form with a total price updated in real
me, which contains name of ve products and their
prices. Create a bill amount for all the products and
calculate GST on the billing amount and display total
amount.
prac cal1.html:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2
QvZ6jIW3" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></
script>
<title>Practical 1</title>
<style>
body{
margin-top: 20px;
background-color: # ;
color: rgb(0, 0, 0);
font-weight: 400;
input
border: 1px solid rgb(0, 0, 0);
padding-left: 5px;
text-align: center;
width: 80px;
input:focus

ti
ti

ff
ff

ff
ff
ff
ff

fi

outline: none;
.col-8{
margin-top: 50px;
h4{
text-align: center;
</style>
</head>
<body ng-app="">
<div class="container">
<div class="row">
<div class="col-6" >
<div class="row">
<div class="col-2">Sr no.</div>
<div class="col-3">Product name</div>
<div class="col-2">price</div>
<div class="col-3">Quantity</div>
</div>
<br>
<div class="row">
<div class="col-2">1</div>
<div class="col-3">bites</div>
<div class="col-3"><input type="text" ng-model="p1"></div>
</div>
<div class="row">
<div class="col-3">sev</div>
</div>
<div class="row">
<div class="col-3">Sing</div>
</div>
<div class="row">
<div class="col-3">fulwadi </div>
</div>
<div class="row">


<div class="col-3">Gopal </div>
</div>
<hr>
</div>
<div class="col-14">
<div class="card text-black bg-white mb-3" style="max-width: 35rem;">
<div class="card-header"><h4>Bill</h4></div>
<div class="card-body">
<div class="row">
<div class="col-2">Total</div>
</div>
<hr>
<div class="row">
<div class="col-2">{{p1}}</div>
<div class="col-2" >{{p1*10}}</div>
</div>
<div class="row">
<div class="col-2">{{p2*12}}</div>
</div>
<div class="row">
</div>
<div class="row">
<div class="col-6">fulwadi</div>
</div>
<div class="row">
<div class="col-6">Gopal</div>
</div>


<br>
<P>Total :{{(p1*10)+(p2*12)+(p3*30)+(p4*10)+(p5*5)}}</P>
<P>GST(10%) :{{((p1*10)+(p2*12)+(p3*30)+(p4*10)+(p5*5))*0.10}}</P>
<P>Total With GST :{{(((p1*10)+(p2*12)+(p3*30)+(p4*10)+(p5*5))*0.10)+

((p1*10)+(p2*12)+(p3*30)+(p4*10)+(p5*5))}}</P>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:-

Practical:-2
Aim:Implement AngularJs to create your Resume.
prac cal2.html:-
<!DOCTYPE html>
<html>
<head pro le="http://dublincore.org/documents/dcmi-terms/">
<meta http-equiv="Content-Type" content="application/xhtml+xml;

charset=utf-8" />
<title>Resume</title>
<script>
var cv = {
"document": "Resume",
"name": "pratik",
"surname": "prajapati",
"phones": {
"home": "05555 55 55 55",
"mobile": "05555 55 55 55"
},
"email": [
"xyz@gmail.com",
],
"objetives": [
"Looking for a challenging role in a reputable organization to utilize my

technical, database, and management skills for the growth of the organization as
well as to enhance my knowledge about new and emerging trends in the IT
sector.",
],
"skills": {
"languages": [
"c",
"c++",
"python",
"java",
"javascript",
],
"web": [
"http",

ti
fi


"html",
"json",
"php",
"node.js",
"apache",
"tomcat"
],
"frameworks": [
"angular.js",
"django"
],
"DB": [
"MONGO DB",
"MySQL"
],
"IDE": [
"Eclipse",
"Netbeans"
],
"version control": [
"GIT"
},
"experience": [{
"place": "Sugam Technology",
"position": "Web Developer",
"technology": [
"PHP",
"Javascript",
"MY SQL",
"Apache"
}],
"education": [{
"title": "B.E",
"especiality": "IT Engineer",
"place": "GTU",
"period": "2020 to 2023"
}, {
"title": "D.E",
"especiality": "IT Engineer",
"place": "GTU",
"period": "2017 to 2020"
}],


"interests": [
"Cricket",
"Coding"
</script>
<style>
table {
border: 2px solid black;
td {
border: 2px solid black;
</style>
</head>
<body dir="ltr" style="max-width:21.001cm; writing-mode:lr-tb; ">
<div id="cv_document" ng-controller="MyController">
<p class="P2">{{cv.document}}</p>
<br />
<p class="P1" style="display:inline">Name: </p>
<p class="personal_information"> {{cv.name | capitalize}} {{cv.surname |
capitalize}}</p>
<br />
<p class="P1" style="display:inline">Contact Details: </p>
<p class="personal_information_title"> phone:</p>
<p class="personal_information"> {{cv.phones.home}}</p>
<p class="personal_information_title"> email:</p>
<p class="personal_information"> {{cv.email[0]}}</p>
<br />
<br />
<table border="0" cellspacing="0" cellpadding="0" class="Table1">
<colgroup>
<col width="15" />
<col span="2" width="586" />
</colgroup>
<tr>
<td style="text-align:left;width:3.598cm; " class="Table1_A1">
<p class="P4">Objetive</p>
<p class="P4"> </p>
</td>
<td style="text-align:left;width:13.414cm; " class="Table1_B1" colspan="2">
<p class="P3" ng-repeat="objetive in cv.objetives">{{objetive}}</p>


</td>
</tr>
<tr ng-repeat="parte in partes">
<td ng-if="$index === 0" style="text-align:left;width:3.598cm; "

class="Table1_A2"
rowspan="{{size(cv.skills)}}">
<p class="P4">Skill <br />Summary</p>
</td>
<td style="text-align:left;width:13.414cm; " class="Table1_B2">
<p class="P3">{{partes[$index] | uppercase}}</p>
</td>
<td style="text-align:left" class="Table1_B2">
<p class="P3" ng-repeat="skill in cv.skills[parte]">{{skill | capitalize}}</

p>
</td>
</tr>
<tr ng-repeat="experience in cv.experience">
<td ng-if="$index === 0" style="text-align:left;width:3.598cm; "

class="Table1_A2"
rowspan="{{size(cv.experience)}}">
<p class="P4">Experience</p>
</td>
<td style="text-align:left;width:13.414cm; " class="Table1_B2"

colspan="2">
<p class="Table_Experience_Place">{{cv.experience[$index].place}}</
p>
<p
class="Table_Experience_Period">({{cv.experience[$index].period}})</p>
<p
class="Table_Experience_Position">{{cv.experience[$index].position}}</p>
<p class="P3">Role:</p>
<ul class="Table_Experience_Role">
<li ng-repeat="role in cv.experience[0].role">{{role}}</li>
</ul>
<p class="P3">Technology Used:</p>
<span style="margin-left:1em"></span>
<p class="Table_Experience_Technology" ng-repeat="technology in
cv.experience[$index].technology">{{print($index)}}{{technology}}</p>
</td>
</tr>
<tr>
<p class="P4">Education</p>
</td>


<td style="text-align:left;width:13.414cm; " class="Table1_B2" colspan="2">
<ul class="Table_Education">
<li ng-repeat="education in cv.education">
<p class="Table_Education_Title">{{education.title}}</p>
<p class="Table_Education_Especiality">({{education.especiality}})</p>
<p class="Table_Education_Place">{{education.place}},</p>
<p class="Table_Education_Period">{{education.period}}</p>
</li>
</ul>
</td>
</tr>
<tr>
<p class="P4">Interests</p>
</td>
<td style="text-align:left;width:13.414cm; " class="Table1_B2"

colspan="2">
<p class="Table_Interests" ng-repeat="interest in

cv.interests">{{print($index)}}{{interest}}</p>
</td>
</tr>
</table>
</div>
<script>
angular.module('myApp', [])
.controller('MyController', ['$scope', function ($scope) {
$scope.cv = angular.copy(cv);
$scope.partes = Object.keys($scope.cv.skills);
$scope.size = function (Obj) {
return Object.keys(Obj).length;
};
$scope.print = function (index) {
if (index > 0) {
return ", ";
} else {
return "";
};
}])
. lter('capitalize', function () {
return function (input, scope) {
if (input != null)
input = input.toLowerCase();

fi

return input.substring(0, 1).toUpperCase() + input.substring(1);
});
angular.element(document).ready(function () {
angular.bootstrap(document, ['myApp']);
});
</script>
</body>
</html>

Output:-

Practical:-3
Aim:Use Prac cal No.01 and ini alize prices to 0 ( zero)
when form loads. (use module,controller & direc ve).
prac cal3.html:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/
bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1o
Boqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Practical 3</title>
<style>
body{
margin-top: 20px;
font-weight: 400;
input
border: none;
border: 2px solid rgb(0, 0, 0);
padding-left: 5px;
text-align: center;
width: 80px;
input:focus
outline: none;
</style>
</head>

ti
ti

ff
ff
ff
ff
ff
ff
ti
ti

<body ng-app="module">
<div class="container" ng-controller="ctr" >
<div class="row">
<div class="col-6 col-sm-12" >
<div class="row">
<div class="col-2">Sr no.</div>
</div>
<br>
<div class="row">
<div class="col-3">parle-G</div>
</div>
<div class="row">
<div class="col-3">Maggi</div>
</div>
<div class="row">
<div class="col-3">Salted Wafers</div>
</div>
<div class="row">
<div class="col-3">Chataka Pataka </div>
</div>
<div class="row">
<div class="col-3">Gopal Chowkadi </div>
</div>


</div>
<div class="col-14">
<div class="card text-black bg-white mb-3" style="max-width: 35rem;">
<div class="card-header"><h4>Bill</h4></div>
<div class="card-body">
<div class="row">
<div class="col-2">Total</div>
</div>
<hr>
<div class="row">
</div>
<div class="row">
<div class="col-2">{{p2*12}}</div>
</div>
<div class="row">
</div>
<div class="row">
<div class="col-6">fulwadi</div>
</div>
<div class="row">
<div class="col-6">Gopal</div>
</div>
<br>


<P>Total :{{(p1*10)+(p2*12)+(p3*30)+(p4*10)+(p5*5)}}</P>
<P>GST(10%) :{{((p1*10)+(p2*12)+(p3*30)+(p4*10)+(p5*5))*0.10}}</P>
<P>Total With GST :{{(((p1*10)+(p2*12)+(p3*30)+(p4*10)+(p5*5))*0.10)+

((p1*10)+(p2*12)+(p3*30)+(p4*10)+(p5*5))}}</P>
</div>
</div>
</div>
</div>
</div>
<script>
var mymodule=angular.module("module",[]);
mymodule.controller("ctr",function($scope){
$scope.p1=1;
$scope.p2=1;
$scope.p3=1;
$scope.p4=1;
$scope.p5=1;
});
</script>
</body>
</html>

Output:-

Practical:-4
Aim:Design a webpage which takes one number as an
input and generate its factorial number (use module,
controller)
prac cal4.html:-
<html>
<head>
<title>Angular JS Services</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/
1.3.14/angular.min.js">
</script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "myModule" ng-controller = "findFactorial"> <p>Enter
a number: <input type = "number" ng-model = "a" /></p> <button ng-
click = "calculateFactorial()">X!</button> <p>{{"Factorial of
Number is :"+result}}</p>
</div>
<script>
var myApp = angular.module("myModule", []);
myApp.controller('findFactorial', function($scope)
{ $scope.calculateFactorial = function()
{
var num = $scope.a;
var i,factorial=1;
for( i = num; i >= 1; i-- )
{
factorial = factorial * i;
}
$scope.result = factorial;
}
});
</script>
</body>
</html>
ti

Output:-
Practical:-5
Aim:Design a webpage which takes inputs product name,
product quan ty and price. Generate table of entered
values. When user clicks on table column tle , it should
sort that column values. (use lter, array)
prac cal5.html:-
<!doctype html>
<head>
<script src='controller.js' type='text/javascript'></script>
</head>
<table border='1'>
<tr>



</tr>
<tr ng-repeat='friend in friends|orderBy:column:reverse'>
</tr>
</table>
</body>
</html>

ti
ti

fi
ti

Output:-
 
Practical:-6
Aim:Design a webpage which display product name and
product price using AngularJS $h p Service from
database. Display the content in tabular format.
prac cal6.html:-
<!doctype html>
<head>
<script src='controller1.js' type='text/javascript'></script>
</head>
<table border='1'>
<tr>



</tr>
<tr ng-repeat='friend in friends'>
</tr>
</table>
</body>
</html>
controller.js:-
var app = angular.module('myApp',[]);
app.controller('myController',function($scope,$http){
var successCallBack = function $http({

ti

tt


method: 'GET',
url: 'ProductService.asmx/GetAllProductdetail'
$scope.friends= $http.get('ProductService.asmx/
GetAllProductdetail').then(function (response)
( $scope.friends =response.data;),
function (reason){
$scope.error= reason.data;
slog.info(reason);
});
Output:-

 
• Node JS Program
Practical:-1
Aim:Design a webpage which display product name and
product price using AngularJS $h p Service from
database. Display the content in tabular format.
prac cal1.js:-
const {add,mul,sub,div} =require('../practicalmodule1')
var a=2,b=4;
console.log( `add of ${a} + ${b} = ${add(a,b)}`);
console.log( `mul of ${a} * ${b} = ${mul(a,b)}`);
console.log( `sub of ${a} - ${b} = ${sub(a,b)}`);
console.log( `div of ${a} / ${b} = ${div(a,b)}`);
practicalmodule1.js:-
function add(a,b){
return a+b;
function mul(a,b){
return a*b;
function sub(a,b){
return a-b;
function div(a,b){
return a/b;
module.exports={add,mul,sub,div}
Output:- 

ti

tt

Practical:-2
Aim:Create a program to override function.
prac cal2.js:-
var {add}=require(`../practicalmodule1`);
add=(a,b)=>{
return `add of ${a} + ${b} = ${a+b}`;
console.log(add(20,30));
practicalmodule1.js:-
function add(a,b){
return a+b;
function mul(a,b){
return a*b;
function sub(a,b){
return a-b;
function div(a,b){
return a/b;
module.exports={add,mul,sub,div}
Output:-


ti

Practical:-3
Aim:Create a node js program to perform le
operations like create a le,read a le,write to le
and delete a le.
create.js:-
var fs = require('fs');
fs.open('mynew le2.txt', 'w', function (err, le) {
if (err) throw err;
console.log('Saved!');
});
Output:-
read.js:-
var http = require('http');
fs.readFile('angular practicals/practical6.html','utf-8', function (err, data) {
if(err) throw err
console.log(data);
});

fi
fi
fi
fi
fi
fi
fi
Output:-
write.js:-
fs.appendFile('mynew le1.txt', 'Hello content!', function (err) {
if (err) throw err;
console.log('done!');
});
Output:-
delete.js:-
fs.unlink('mynew le2.txt', function (err) {
//node console.log(err)
if (err) throw err;
console.log('File deleted!');
});

fi
fi
Output:-

Awp Practicals2

Uploaded by

Copyright:

Available Formats

Awp Practicals2

Uploaded by

Document Information

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

Awp Practicals2

Uploaded by

Copyright:

Available Formats

6IT:B1 Enrollment no:-200160116522

1 Adavance web programming

• Refreshing Java Script and CSS

2 Adavance web programming

6IT:B1 Enrollment no:-200160116522

<div id="popup" class="popupWindow">

<form action="search" name="input" method="get"

6IT:B1 Enrollment no:-200160116522

Dr. Mahesh M. Goyani</h4>

<img src="img/avatar.png" />

4 Adavance web programming

6IT:B1 Enrollment no:-200160116522

<div class="social"><a href="https://www.facebook.com/"><i

<h3><i class="fa fa-envelope" aria-hidden="true"></i>&nbsp;<a

<div class="info"><h2>Active Hours</h2>

font-family: Georgia, 'Times New Roman', Times, serif;

.col-1 {width: 8.33%;}

5 Adavance web programming

6IT:B1 Enrollment no:-200160116522

.col-2 {width: 16.66%;}

.col-3 {width: 25%;}

.col-4 {width: 33.33%;}

.col-5 {width: 41.66%;}

.col-6 {width: 50%;}

.col-7 {width: 58.33%;}

.col-8 {width: 66.66%;}

.col-9 {width: 75%;}

.col-10 {width: 83.33%;}

.col-11 {width: 91.66%;}

.col-12 {width: 100%;}

background-color: rgb(0, 0, 0);

border-width: 0px 0px 0px 0px;

over ow: hidden;

background-color: rgb(0, 161, 108);

6 Adavance web programming

transition: max-height 0.5s;

background-color: rgba(4, 36, 77, 0.582);

background-color:rgb(0, 153, 255);

padding: 15px 10px;

background-color: rgb(4, 36, 77);

.mySlides {display: none;}

img {vertical-align: middle;}

.slideshow-container > .mySlides.fade > img{

7 Adavance web programming

transition: 0.6s ease;

border-radius: 0 3px 3px 0;

border-radius: 3px 0 0 3px;

text-shadow: 1px 1px rgb(255, 255, 255);

padding: 8px 12px;

from {opacity: .4}

from {opacity: .4}

8 Adavance web programming

over ow: auto;

border: 1px solid #8880;

border: 2px solid rgb(0, 110, 255) !important;

padding: 12px 20px !important;

width: 65% !important;

background-color: rgb(0, 110, 255);

9 Adavance web programming

padding: 16px 32px;

<h3><i class="fa fa-envelope" aria-hidden="true"></i> <a