0% found this document useful (0 votes)
56 views51 pages

WEB Design File 1234

Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
56 views51 pages

WEB Design File 1234

Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 51

PRACTICAL FILE

NAME : Yashaswi Sharma


ROLL NO. : 2200681540118
BRANCH : DS(B)
SUBJECT NAME : WEB DESIGNING
rd
YEAR/SEMESTER : II/3
SESSION : 2023-24

SUBMITTED TO SUBMITTED BY

_ _Yashaswi Sharma

pg. 1 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


INDEX
S.NO NAME OF EXPERMIENT PAGE NO
1. Design the static home page required for an 1
online bookstore website using html.
2. Design the static login page required for an 6
online bookstore website using html.
3. Design the catalogue page contains the 8
details of all the books available in the
website in a table.
4. Design the catalogue page contains the 11
details of all the books available in the
website in a table.
5. Create a “registration form “with Name, 14
Password, Address, Email-id and Phone
number.
6. Write JavaScript to validate the Name, 18
Password, Email-id, and Phone Number of
the above registration page.
7. Write JavaScript to validate the Name, 21
Password, Email-id, and Phone Number of
the above registration page.
8. Design the static webpage” Your Own 25
Portfolio” using html, CSS, Js.
9. Design the static webpage “Survey Form “ 44
using html, CSS, Js.

10. Design the static webpage” A Questionnaire 48


“using html, CSS,Js.

pg. 2 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


EXPERIMENT 1: Design the static home page required for an online
bookstorewebsite using html.
FRAME.HTML: LOGO.HTML
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<title>Your Page Title</title> <meta charset="UTF-8">
</head> <meta name="viewport"
content="width=device-width, initial-
<frameset rows="15%,9%,76%"
scale=1.0">
bordercolor="pink"> <title>Document</title>
<frameset cols="20%,80%" bordercolor="red"> </head>
<frame src="logo.html" scrolling="no"> <body>
<frame src="title.html"> <img src="logo.png" alt="logo
</frameset> image" height="150px"
<frame src="menu.html" name="f2" weight="auto" >
scrolling="no"> <style>
<frameset cols="15%,85%" bordercolor="red"> body{
<frame src="branches.html" name="f31"> display: flex;
<frame src="homedes.html" name="f32"> align-items: center;
</frameset> justify-content: center;
margin-top: 0;
</frameset>
}
</html> </style>
</body>
</html>
TITLE.HTML:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
text-align: center;
}
h1 {
font-style: italic;
}
</style>
</head>

<body>
<h1>ONLINE BOOK SHOP</h1>
</body>
</html>

pg. 3 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


MENU.HTML: BRANCHES.HTML:
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Your Page Title</title> <title>Your Page Title</title>
</head> </head>
<body> <body>
<table width="100%"> <table cellspacing="15">
<tr> <tr>
<td><a href="homedes.html" <td><a href="csechecktest.html"
target="f32">Home</a></td> target="f32">CSE</a></td>
<td><a href="login.html" </tr>
target="f32">Login</a></td> <tr>
<td><a href="registration.html" <td><a href="ecechecktest.html"
target="f32">Registration</a></td> target="f32">ECE</a></td>
<td><a href="catalogue.html" </tr>
target="f32">Catalogue</a></td> <tr>
<td><a href="cart.html" <td><a href="eeechecktest.html"
target="f32">Cart</a></td> target="f32">EEE</a></td>
</tr> </tr>
</table> <tr>
</body> <td><a href="civilchecktest.html"
</html> target="f32">Civil</a></td>
</tr>
</table>
</body>
</html>
HOMEDES.HTML:
<!DOCTYPE html>
<html>
<head>
<title>Your Page Title</title>
</head>
<body>
<center><u>ONLINE BOOK SHOP</u></center>
<center> <p>This website contains various books.</p> </center>
</body>
</html>

pg. 4 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


OUTPUT:

pg. 5 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


EXPERIMENT 2: Design the static login page required for an online
bookstorewebsite using html.

Logo.html:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF- 8">

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

<style>

body {

display: flex;

justify-content: center;
align-items: center;

height: 100vh;

margin: 0; }

form {

text-align: center; }

input[type="submit"], input[type="reset"] {

width: 150px; /* Adjust the width as needed */

display: inline-block; }

</style>

<title>Login Page</title> </head>

<body> <form name="login" action="your_action_url_here" method="post">

<h3><u>Login Page</u></h3>
Username: <input type="text" name="uname" required><br>

Password: <input type="password" name="pwd" required><br>

<input type="submit" value="Submit"><input type="reset" value="Reset">

</form> </body>

</html>

pg. 6 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


OUTPUT:

pg. 7 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


EXPERIMENT 3: Design the catalogue page contains the details of all the
books available in the website in a table.
CATALOGUE.HTML:
<!DOCTYPE html>

<html>

<head>

<title>Loading XML Document</title>


<script language="JavaScript">

function addToCart() {

window.alert("You have selected the book"); }

</script>

</head>

<body>

<script language="JavaScript">

var xmldoc;

xmldoc = new ActiveXObject("Microsoft.XMLDOM");

xmldoc.load("book.xml");
arr = xmldoc.getElementsByTagName("ITEM");

for (i = 0; i < arr.length; i++) {

document.write("<div align='left'><img src='Sunset.jpg' width='50'


height='50'></div>");

document.write("<div align='center'><b>NAME:</b>" +
xmldoc.getElementsByTagName("NAME")[i].childNodes[ 0].nodeValue + "<BR></div>");

document.write("<div align='center'><b>AUTHOR:</b>" +
xmldoc.getElementsByTagName("AUTHOR")[i].childNodes[ 0].nodeValue + "<BR></div>");

document.write("<div align='center'><b>PRICE:</b>" +
xmldoc.getElementsByTagName("PRICE")[i].childNodes[ 0].nodeValue + "<BR></div>");

document.write("<div align='center'><b>PUBLISHER:</b>" +
xmldoc.getElementsByTagName("PUBLISHER")[i].childNodes[ 0].nodeValue + "<BR></div>");

document.write("<div align='center'><b>ISBN:</b>" +
xmldoc.getElementsByTagName("ISBN")[i].childNodes[ 0].nodeValue + "<BR></div>");

pg. 8 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


document.write("<div align='right'><input type='button' value='Add To Cart'
onclick='addToCart()'></div>");

document.write("<BR>"); }

</script>

</body>

</html>

Book.xml :
<?xml version="1.0"?>

<BOOK>

<ITEM>

<NAME>JAVA</NAME>

<AUTHOR>SCHIELD</AUTHOR>

<PRICE>500</PRICE>

<PUBLISHER>TATA</PUBLISHER>

<ISBN>12345</ISBN>

</ITEM>

<ITEM>

<NAME>C++</NAME>

<AUTHOR>HERBERT</AUTHOR>

<PRICE>499.99</PRICE>

<PUBLISHER>TATA</PUBLISHER>

<ISBN>12346</ISBN>

</ITEM> <ITEM>

<NAME>Digital Electronics</NAME>

<AUTHOR>SCHIELD</AUTHOR>

<PRICE>500</PRICE>

<PUBLISHER>TATA</PUBLISHER>

<ISBN>12345</ISBN>

</ITEM>

pg. 9 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


OUTPUT

pg. 10 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


EXPERIMENT 4: Design the cart page contains the details about the
books which are added to the cart.
CSECHECKTEST.HTML:
<!DOCTYPE html>

<html>

<head>

<title>Loading XML Document</title>


<script language="JavaScript">

function fun() {

window.alert("You have selected the book");

</script>

</head>

<body>
<script language="JavaScript">

var xmldoc;

xmldoc = new ActiveXObject("Microsoft.XMLDOM");

xmldoc.load("csebook.xml");

var arr = xmldoc.getElementsByTagName("ITEM");

for (var i = 0; i < arr.length; i++) {

document.write("<div align='left'><img src='Sunset.jpg' width='50'


height='50'></div>");

document.write("<div align='center'><b>NAME:</b>" +
xmldoc.getElementsByTagName("NAME")[i].childNodes[ 0].nodeValue + "<BR></div>");

document.write("<div align='center'><b>AUTHOR:</b>" +
xmldoc.getElementsByTagName("AUTHOR")[i].childNodes[ 0].nodeValue + "<BR></div>");

document.write("<div align='center'><b>PRICE:</b>" +
xmldoc.getElementsByTagName("PRICE")[i].childNodes[ 0].nodeValue + "<BR></div>");

pg. 11 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


document.write("<div align='center'><b>PUBLISHER:</b>" +
xmldoc.getElementsByTagName("PUBLISHER")[i].childNodes[ 0].nodeValue + "<BR></div>");

document.write("<div align='center'><b>ISBN:</b>" +
xmldoc.getElementsByTagName("ISBN")[i].childNodes[ 0].nodeValue + "<BR></div>");

document.write("<div align='right'><input type='button' value='Add To Cart'


onclick='fun()'></div>");

document.write("<BR>");

</script>

</body>

</html>

CSE.XML
<?xmlversion="1.0"? >

<CSEBOOK>
<ITEM>

<NAME>JAVA</NAME>
<AUTHOR>SCHIELD</AUTHOR>
<PRICE>500</PRICE>
<PUBLISHER>TATA</PUBLISHER>
<ISBN>12345</ISBN>
</ITEM>

<ITEM>

<NAME>C++</NAME>
<AUTHOR>HERBERT</AUTHOR>
<PRICE>499.99</PRICE>
<PUBLISHER> TATA</PUBLISHER><ISBN>12346
</ISBN></ITEM></CSEBOOK>

pg. 12 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


OUTPUT:

pg. 13 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


EXPERIMENT 5: Create a “registration form “with
Name, Password, Address, Email-id and Phone number.
with attractive theme
REG.HTML:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF- 8">

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

<title>Registration Form</title>

<style>

body {
font-family: Arial, sans-serif;

background-color: #f4f4f4;

margin: 0;

padding: 0;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

form {

background-color: #fff;

padding: 20px;

border-radius: 8px;

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

width: 300px;

pg. 14 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


h2 {

text-align: center; color: #333;

label {

display: block;
margin-bottom: 8px;

color: #555;

input {

width: 100%;

padding: 8px;

margin-bottom: 16px;

border: 1px solid #ccc;

border-radius: 4px;

box-sizing: border-box;

button {
background-color: #4caf50;

color: #fff;

padding: 10px;

border: none;

border-radius: 4px;

cursor: pointer;

width: 100%;

button:hover {

background-color: #45a049;

</style>

pg. 15 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


</head>

<body>

<form>

<h2>Registration Form</h2>

<label for="name">Name:</label>

<input type="text" id="name" name="name" required>

<label for="password">Password:</label>

<input type="password" id="password" name="password" required>

<label for="address">Address:</label>

<input type="text" id="address" name="address" required>

<label for="email">Email:</label>

<input type="email" id="email" name="email" required>

<label for="phone">Phone Number:</label>

<input type="tel" id="phone" name="phone" required>

<button type="submit">Register</button>

</form>

</body>

</html>

pg. 16 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


OUTPUT

pg. 17 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


EXPERIMENT 6: Write JavaScript to validate the Name, Password,
Email-id, and Phone Number of the above registration page.

Reg.html
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF- 8">

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

<title>Registration Form</title>

<style>

/* Styles go here as in the previous example */

</style>

</head>

<body>

<form onsubmit="return validateForm()">

<h2>Registration Form</h2>

<label for="name">Name:</label>

<input type="text" id="name" name="name" required>

<label for="password">Password:</label>

<input type="password" id="password" name="password" required>

<label for="address">Address:</label>

<input type="text" id="address" name="address" required>

<label for="email">Email:</label>

<input type="email" id="email" name="email" required>

<label for="phone">Phone Number:</label>

<input type="tel" id="phone" name="phone" required>

<button type="submit">Register</button>

</form> <script>

pg. 18 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


function validateForm() {

var name = document.getElementById('name').value;

var password = document.getElementById('password').value;

var address = document.getElementById('address').value;

var email = document.getElementById('email').value;

var phone = document.getElementById('phone').value;

// Simple validation, you can add more complex checks as needed


if (name === '' || password === '' || address === '' || email === '' || phone === '') {

alert('Please fill in all fields');

return false;

// Validate email format


var emailRegex = /^\S+@\S+\.\S+$/;

if (!emailRegex.test(email)) {

alert('Please enter a valid email address');

return false;

}
// Validate phone number format

var phoneRegex = /^\d{10}$/;

if (!phoneRegex.test(phone)) {
alert('Please enter a valid 10-digit phone number');

return false;

return true; // Submit the form if all checks pass

</script>

</body>

pg. 19 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


</html >

Output:

pg. 20 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


EXPERIMENT 7: Design a web page using CSS (Cascading Style Sheets)
which includes different font, styles.
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF- 8">

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

<title>CSS Font , Styles</title>

<style>

body {

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

line-height: 1.6;

color: #333;

background-color: #f8f8f8;

margin: 0;

padding: 0; }

header {
text-align: center;

padding: 20px; background-

color: #007bff;color: #fff;

h1 {
font-family: 'Verdana', sans-serif;

font-size: 2.5em;

color: #333; }

p{

font-family: 'Georgia', serif;

font-size: 1.2em;

line-height: 1.5; margin-bottom: 20px;

pg. 21 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


.styled-text {
font-family: 'Courier New', monospace;

font-size: 1.5em;

font-weight: bold;

color: #555;

background-color: #f0f0f0;

padding: 10px;

border-radius: 5px; }

.italic-text {

font-style: italic; }

.underline-text {

text-decoration: underline; }

.highlight-text {

background-color: yellow; }

.code {
font-family: 'Consolas', monospace;

font-size: 1.2em;

color: #333;

background-color: #f5f5f5;

padding: 10px;

border-radius: 5px; }

footer {
text-align: center;

padding: 10px; background-

color: #007bff;color: #fff;

position: fixed;

bottom: 0;

width: 100%; }

pg. 22 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


</style>

</head>

<body>

<header>

<h1>CSS Font Styles</h1>

</header>

<div class="content">

<p>This is a simple web page demonstrating different font styles using CSS.</p>

<p class="styled-text">This text has a special styling.</p>

<p class="italic-text">This text is italicized.</p>

<p class="underline- text">This text is underlined.</p>

<p class="highlight-text">This text is highlighted.</p>

<p class="code">body {"{ font-family: 'Arial', sans-serif; }"}</p>

</div>

<footer>

&copy; 2023 CSS Font Styles

</footer>

</body>

</html>

pg. 23 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


Output

pg. 24 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


EXPERIMENT 8: Design the static webpage” Your Own Portfolio”
using html, CSS, JS.

INDEX.HTML
<!DOCTYPE html>

<html lang="en" dir="ltr">

<head>

<meta charset="utf-8">

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

<title>Dushyant’s Portfolio</title>

<link rel="icon" href="Image/engineer.ico">

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-
9aIt2nRpC12Uk9gS9baDl411N QApFmC26EwAOH8WgZl 5MYYxFfc+NcPb1dKGj 7Sk"
crossorigin="anonymous">

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

<link
href="https://fonts.googleapis.com/css2?family=Arizonia&family=Montserrat:wght@400;80
0&display=swap" rel="stylesheet">

<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap "
rel="stylesheet">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-


awesome/5.13.1/css/all.min.css">

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-


DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-

pg. 25 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV 9zzTtmI3UksdQRVvox MfooAo"
crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-
OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j 7Bh/kR0JKI"
crossorigin="anonymous"></script>

</head>

<body class="container-fluid body_section">

<header>

<nav class="navbar navbar-expand-lg navbar-light ">

<a class="navbar-brand brand-name" href ="#"> Dushyant </a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-


target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<ul class="navbar-nav ml-auto">

<li class="nav-item">

<a class="nav-link headerachor" href="index.html">Home</a>

</li>

<li class="nav-item">

<a class="nav-link headerachor" href="Education.html">Education</a>

</li>

<li class="nav-item">

<a class="nav-link headerachor" href="skill.html">Skills</a>

</li>

<li class="nav-item">

<a class="nav-link headerachor" href="Project.html">Projects</a>

</li>

pg. 26 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


<li class="nav-item">

<a class="nav-link headerachor" href="contact.html">Contact Me</a>

</li>

</ul>

</nav>

</header>

<section id = "Home">

<div class="row column1">

<div class="col-lg-6 col-md-6 first-image">

<img class = "boyimage" src="Image/20200630_162659.gif" alt="">

</div>

<div class="col-lg-6 section-1">

<h1 class = "Hello">Hello All ! I'm Dushyant <span


class="wave"> </span></h1>

<p>A passionate Developer having an experience in Data Analystics,

Machine Learning and Web Development and want to develop sustainable


and

scalable social and technical systems to create impact</p>

<div class=social_media_icon>

<a class="btn" href="https://www.instagram.com/ajit.verma_/"


target=_blank>

<i class="fab fa-instagram"></i>

</a>

<a class="btn" href="https://www.linkedin.com/in/ajit-verma-70b9b0196/"


target=_blank>

<i class="fab fa-linkedin" aria-hidden="true"></i>

</a>

<a class="btn" href="https://github.com/AjitVerma15" target=_blank>

<i class="fab fa-github"></i>

</a>

pg. 27 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


<a class="btn" href="mailto:[email protected]" target=_blank>

<i class="fab fa-google"></i>

</a>

</div>

</div>

<div class="Image-boy col-lg-6"><img class="boy" src="Image/Boy-image.png"


alt=""></div>

</div>

</section>

<section id=Whatido>

<h1>What I Do ?</h1>

<div class = "row feature-1">

<div class="col-lg-6 col-md-6 Feature-first-image ">

<img class = "Feature-svg-image" src="Image/Data_Analysis.svg" alt="">

</div>

<div class="col-lg-6 col-md-6">

<h1 class= "Feature-Heading" >Data Analytics & ML</h1>

<ul class = "dev-icon">

<li><i class="fab fa-python fa-5x" style="color:#3776ab"></i></li>

<li><img class="numpy" src="Image/numpy- ar21.svg" alt=""></li>

<li><img class = "pandas" src="Image/kindpng_5747046.png" alt=""></li>

</ul>

<div class = "Data-Analytic">

<p class ="Features-paragraph">

Developing Models that cleaning, tranforming and analyse Raw data to


discover useful informations,

in order to make conclusions about the informations.</p>

<p class ="Features-paragraph">

pg. 28 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


Experience of working with different python Libraries like
Numpy,Pandas,Matplotlib,Seaborn etc and have knowlege of

Data analyitical algorithm and techniques.</p>

</div>

</div>

</div>

<div class="row feature-2">

<div class="col-lg-6 col-md-6 feature-web">

<h1 class="Feature-Heading">Web Development</h1>

<ul class = "dev-icon">

<li><i class="fab fa-html5 fa-5x" style="color:#e34f26"></i></li>

<li><i class="fab fa-css3-alt fa-5x" style="color:#1572b6"></i></li>

<li><i class="fab fa-bootstrap fa-5x" style="color:#543b79"></i></li>

<li><i class="fab fa-js-square fa-5x" style="color:#f 7df 1e"></i></li>

<li><i class="fab fa-react fa-5x" style="color:#61dafb"></i></li>

<li><i class="fab fa-node fa-5x" style="color:#679e 63"></i></li>

<li><i class="fab fa-figma fa-5x" style="color:#f 24e 1e"></i></li>

</ul>

<div class = "Data-Analytic">

<p class ="Features-paragraph">

Building Fully responsive website front end using HTML, CSS, Bootstrap and
Javascript.</p>

<p class ="Features-paragraph">

As of now I have knowledge only of front end but in near future I will add
more features to myself and excited to explore React , NodeJS, Django , Flask and many
more.</p>

<p class ="Features-paragraph">

I have also used Abode Photoshop, Illustrator and Figma to design User
interface of websites and mobile application and design of logos.</p>

</div>

pg. 29 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


</div>

<div class="col-lg-6 col-md-6 Feature-second-image ">

<img class = "Feature-svg-image" src="Image/website.svg" alt="">

</div>

</div>

<div class="row feature-3">

<div class = "col-lg-6 col-md-6 Feature-third-image">

<img class = "Feature-svg-image-3" src="Image/Coding.svg" alt="">

</div>

<div class="col-lg-6 col-md-6 feature-coding">

<h1 class="Feature-Heading">Data Structure and Algorithms</h1>

<ul class = "dev-icon">

<li></li>

<li><i class="fas fa-laptop-code fa-4x"></i></li>

<li><i class="fas fa-file-code fa-4x" style="color: #a8afcb;"></i></li>

</ul>

<div class = "Data-Analytic">

<p class ="Features-paragraph">

I have knowledge of Data Structure like Hash Tables, Trees, Tries, Graphs,
and various algorithms for solving various problems efficiently.</p>

<p class ="Features-paragraph">

As I know Data Structure and Algorithms are the heart of programming, So


I loves to solve programming question in different competitive website like
codeforce,codechef,hackerrank and many more.</p>

</div>

</div>

</div>

pg. 30 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


</section>

<footer class=footer>Made with by Dushyant </footer>

</body>

</html>

CONTACT.HTML:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

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

<title> Dushyant’s Portfolio</title>

<link rel="icon" href="Image/engineer.ico">

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"

integrity="sha384-
9aIt2nRpC12Uk9gS9baDl411N QApFmC26EwAOH8WgZl 5MYYxFfc+NcPb1dKGj 7Sk"
crossorigin="anonymous">

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

<script src="https://code.iconify.design/ 1/1.0.7/iconify.min.js"></script>

<link
href="https://fonts.googleapis.com/css2?family=Arizonia&family=Montserrat:wght@400;80
0&display=swap"

rel="stylesheet">

<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=s
wap" rel="stylesheet">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-


awesome/5.13.1/css/all.min.css">

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"

pg. 31 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous">

</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"

integrity="sha384-
Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV 9zzTtmI3UksdQRVvox MfooAo"
crossorigin="anonymous">

</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"

integrity="sha384-
OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j 7Bh/kR0JKI"
crossorigin="anonymous">

</script>

</head>

<body class="container-fluid body_section">

<header>

<nav class="navbar navbar-expand-lg navbar-light ">

<a class="navbar-brand brand-name" href="#">Ankit Bansal</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-


target="#navbarSupportedContent"

aria-controls="navbarSupportedConte nt" aria-expanded="false" aria-label="Toggle


navigation">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<ul class="navbar-nav ml-auto">

<li class="nav-item">

<a class="nav-link headerachor" href="index.html">Home</a>

</li>

pg. 32 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


<li class="nav-item">

<a class="nav-link headerachor" href="Education.html">Education</a>

</li>

<li class="nav-item">

<a class="nav-link headerachor" href="skill.html">Skills</a>

</li>

<li class="nav-item">

<a class="nav-link headerachor" href="Project.html">Projects</a>

</li>

<li class="nav-item">

<a class="nav-link headerachor" href="contact.html">Contact Me</a>

</li>

</ul>

</nav>

</header>

<section id="contact">

<div class="row first-section">

<div class="col-lg-6 col-md-6">

<img class = "Profilepic" src="Image/dushyant.jpg" alt="">

</div>

<div class="col-lg-6 col-md-6 context">

<h1>Reach out to me !</h1>

<p>I am avalible in almost every social platform.<br>

Discuss a project or just want to say hi ? My Inbox is always open for all.</p>

<ul class="ico">

<li class="icon"><a href="#" target=_blank><span class="iconify github" data-


icon="ant-design:github-filled" data-inline="false" data-width="50" data-
height="50"></span></li></a>

pg. 33 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


<li class="icon"><a href="#" target=_blank><span class="iconify instagram" data-
icon="entypo-social:instagram-with- circle" data-inline="false" data-width="50" data-
height="50"></span></li ></a>

<li class="icon"><a href="#" target=_blank><span class="iconify linkedin" data-


icon="entypo-social:linkedin-with-circle" data-inline="false" data-width="50" data-
height="50"></span></li ></a>

<li class="icon"><a href="#" target=_blank><span class="iconify google" data-


icon="ant-design:google-plus-circle-filled" data-inline="false" data-width="50" data-
height="50"></span></li ></a>

</ul>

<a href="#" target=_blank><button type="button" class="btn btn-primary btn-lg


Resume">See my Resume</button></a>

</div>

</div>

</section>

<section>

<div class="second-section">

<h1 class="connect">Let's connect and build something together</h1>

<a class="sayhello" href="#contact">Say Hello <span class="wave"> </span></a>

<div class="col-lg-6 connect-image">

<img class= "connection" src="Image/connection.svg" alt="">

</div>

</div>

</section>

<footer class=footer>Made with by Dushyant</footer>

</body>

</html>

STYLE.CSS:

body{

font-family: 'Open Sans', sans-serif;

pg. 34 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


margin: 0; }

.body_section{

padding : 3% 5% 1%; }

p{

font-size: 18px; }

a{

text-decoration: none; }

@font-face{
font-family: "Lovely Home";

src:local('Lovely Home'),

url("Image/LovelyHome-9aBZ.ttf") format('truetype'); }

.brand-name ,.navbar-light .navbar-brand{

/* font-family: "Brush Script MT"; */

/* margin-bottom: 3px; */

font-family: "Lovely Home";

font-size: 50px;

font-weight: bold;

color: #351458; }

.headerachor {
color: black;

margin: 0 7px 0 7px;

font-size: 25px; }

.headerachor:hover {

background-color: #f1f1f1; }

/* Section 1 */

.column1{
background-image: linear-gradient(#fefcfe,#ffffff);

padding : 8px 16px; }

.section-1{

pg. 35 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


margin-top: 6%;
text-align: left;

position: relative; }

span.wave {

animation-name: wave-animation;
animation-duration: 2.5s; animation-

iteration-count: infinite;transform-

origin: 70% 70%; display: inline-

block; }

.first-image{

position: absolute;

right:0; }

.boyimage{

height: 400px; }

@media only screen and (max-width : 1183px){


.first-image{

right:160px; }

.boy{

width: 100%;
height: 100%;

animation: bounce 1.2s;

animation-direction: alternate;

animation-iteration-count: infinite;}

@keyframes bounce{

from{
transform: translate3d(0,0,0); }

to{

transform: translate3d(0,20px,0); }

pg. 36 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


}

.Image-boy{

text-align: center;

align-items: center; }

@media only screen and (min-width:951px){


.Image-boy{

display:none; }

.Hello{

margin-bottom: 20px; }

p{

line-height: 2;

color: #868e96; }

.btn {
display: inline-block;

width: 4.37rem;

height: 4.37rem;

background: #e9e9e9;

padding: 0px 0px;

margin: 10px;

border-radius: 30%;

box-shadow: 0 5px 15px -5px #00000070;

color: #3498db;

overflow: hidden;
position: relative; }

btn i {

line-height: 70px;

font-size: 1.625rem;

transition: 0.2s linear;

pg. 37 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


}

.btn:hover i {

transform: scale(1.3);

color: #f1f1f1;

.btn::before {

content: "";
position: absolute;

width: 120%;

height: 120%;

background: #3498db;

transform: rotate(45deg);

left: -110%;

top: 90%;

}
.btn:hover::before {

animation: aaa 0.7s 1;

top: -10%;

left: -10%;

@media only screen and (max-width:470px){

.btn{
width: 2.5rem;

height: 2.5rem;

margin: 7px;

.btn i {
line-height: 40px;

font-size: 1em; }

pg. 38 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


}

#Whatido{

text-align: center;

padding-top: 7%;

/* Section 2 */

.feature-1{
padding-top: 5%;

text-align: center;

}
.feature-2{

padding-top: 5%;

text-align: center;

}
.feature-3{

padding-top: 5%;

padding-bottom: 20px;

text-align: center;

.Feature-Heading{
font-family: "Montserrat";

font-weight: 300;

.Feature-first-image{

padding : 0 2% 10%;

}
.Feature-second-image{

padding : 5% 2% 0;

pg. 39 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


.Feature-svg-image{
width: 100%;

height:100%; }

.Feature-svg-image-3{

width: 84%;

height: 84%;

.dev-icon{
list-style: none;

display: inline;

padding: 0%;

.numpy{

max-width: 100%;

width : 30%;

height: 30%;

padding-bottom: 7%;

.pandas{

max-width: 100%;

max-height: 100%;

width : 23%;

height: 15%;

padding-bottom: 7%

padding-left :0;

li{

display: inline; }

.Data-Analytic{

pg. 40 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


text-align: left;

}
.Features-paragraph{

margin-top : 8px;

margin-bottom: 8px;

@media only screen and (max-width : 764px){


.feature-2{

display: flex;

flex-direction: column; }
.feature-web{

order:2; }

.brand-name ,.navbar-light .navbar-brand{

/* font-family: "Brush Script MT"; */


/* margin-bottom: 3px; */

font-family: "Lovely Home";

font-size: 40px;

font-weight: bold;

color: #351458; }

@media only screen and (max-width : 991px) and (min-width: 951px){

.section-1{
margin-top: auto;

padding-right: 400px; }

@media only screen and (max-width : 950px){

body,html{

text-align: center;

font-size: 16px;

pg. 41 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


line-height: normal;

.Hello{

margin-bottom: 10px;

h1{

font-size: 25px;

p{

font-size: 15px;

line-height: normal;

.section-1{

text-align: center;

}
.first-image{

display: none;

.pandas{

width: 23%;

height: 15%;

footer{

padding-top: 2%;

color: #868e96;

text-align: center;

pg. 42 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


OUTPUT

pg. 43 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


EXPERIMENT 9: Design the static webpage “Survey Form “ using
html, CSS, Js.

INDEX.HTML
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF- 8">

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

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

<title>Survey Form</title>

</head>

<body>

<div class="container">

<form id="surveyForm">

<label for="name">Name:</label>

<input type="text" id="name" name="name" required>

<label for="email">Email ID:</label>

<input type="email" id="email" name="email" required>

<label for="contact">Contact No:</label>

<input type="tel" id="contact" name="contact" required>

<label for="satisfaction">How satisfied are you?</label>

<select id="satisfaction" name="satisfaction" required>

<option value="verySatisfied">Very Satisfied</option>

<option value="satisfied">Satisfied</option>

<option value="neutral">Neutral</option>

pg. 44 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


<option value="dissatisfied">Dissatisfied</option>

<option value="veryDissatisfied">Very Dissatisfied</option>

</select>

<label for="feedback">Feedback:</label>

<textarea id="feedback" name="feedback" rows="4" required></textarea>

<label for="opinion">Opinion:</label>

<input type="text" id="opinion" name="opinion" required>

<button type="button" onclick="submitForm()">Submit</button>

</form>

</div>

<script src="script.js"></script>

</body>

</html>

Style.css
body {
font-family: Arial, sans-serif;

background-color: #f4f4f4;

margin: 0;

padding: 0;

display: flex;

justify-content: center;
align-items: center;

height: 100vh;}

.container {
background-color: rgb(152, 230, 230);

padding: 20px;

pg. 45 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

width: 500px;}

form {

display: flex;
flex-direction: column; }

label {

margin-bottom: 8px;

}
input, select, textarea {

margin-bottom: 16px;

padding: 8px;

border: 1px solid #ccc;

border-radius: 4px;

}
button {

padding: 10px;

background-color: #4caf50;

color: #fff;

border: none;

border-radius: 4px;

cursor: pointer;

button:hover {

background-color: #45a049;

Script.js
function submitForm() {

alert('Form submitted successfully!'); }

pg. 46 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


OUTPUT

pg. 47 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


EXPERIMENT 10: Design the static webpage” A Questionnaire
“using html, CSS,Js.

INDEX.HTML
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF- 8">

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

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

<title>College Student Questionnaire</title>

</head>

<body>

<div class="container">

<form id="questionnaireForm">

<label for="name">Name:</label>

<input type="text" id="name" name="name" required>

<label for="qualification">Qualification:</label>

<input type="text" id="qualification" name="qualification" required>

<label for="gender">Gender:</label>

<select id="gender" name="gender" required>

<option value="male">Male</option>

<option value="female">Female</option>

<option value="other">Other</option>

</select>

<label for="department">Department:</label>

<input type="text" id="department" name="department" required>

pg. 48 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


<label for="year">Year of Study:</label>

<input type="number" id="year" name="year" required>

<label for="interests">Interests:</label>

<textarea id="interests" name="interests" rows="4" required></textarea>

<label for="feedback">Feedback on College Experience:</label>

<textarea id="feedback" name="feedback" rows="4" required></textarea>

<label for="recommendation">Would you recommend the college to others?</label>

<select id="recommendation" name="recommendation" required>

<option value="yes">Yes</option>

<option value="no">No</option>

</select>

<button type="button" onclick="submitForm()">Submit</button>

</form>

</div>

<script src="script.js"></script>

</body>

</html>

Style.css:
body {
font-family: Arial, sans-serif;

background-color: #f4f4f4;

margin: 0;

padding: 0;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;}

.container {

pg. 49 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


background-color: #fff;
padding: 20px;

border-radius: 8px;

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

width:800px; }

form {

display: flex;
flex-direction: column; }

label {

margin-bottom: 8px; }

input, select, textarea {

margin-bottom: 16px;

padding: 8px;

border: 1px solid #ccc;

border-radius: 4px; }

button {

padding: 10px;
background-color: #4caf50;

color: #fff;

border: none;

border-radius: 4px;

cursor: pointer; }

button:hover {

background-color: #45a049; }

script.js
function submitForm() {

alert('Questionnaire submitted successfully!');

pg. 50 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT


OUTPUT

pg. 51 MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT

You might also like