WEB Design File 1234
Uploaded by
yashaswisharma246WEB Design File 1234
Uploaded by
yashaswisharma246PRACTICAL 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>
© 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
- AJWT LAB MANUAL FOR 3-2 Students of IT & CSENo ratings yetAJWT LAB MANUAL FOR 3-2 Students of IT & CSE58 pages
- Web Technologies Lab Manual R09 BY BHAVSINGH MALOTHNo ratings yetWeb Technologies Lab Manual R09 BY BHAVSINGH MALOTH47 pages
- Design The Following Static Web Pages Required For An Online Book Store Web SiteNo ratings yetDesign The Following Static Web Pages Required For An Online Book Store Web Site24 pages
- WT Lab Manual: Overview Object Web TechnologiesNo ratings yetWT Lab Manual: Overview Object Web Technologies83 pages
- Week 01 Task - Interactive Web Design AssignmentNo ratings yetWeek 01 Task - Interactive Web Design Assignment2 pages
- Usability Test: Ling's Cars vs. All Car LeasingNo ratings yetUsability Test: Ling's Cars vs. All Car Leasing3 pages
- Front-End Web Development Internship ReportNo ratings yetFront-End Web Development Internship Report27 pages
- Backlinks Subdomains Live 13 Nov 2019 - 14 49 07No ratings yetBacklinks Subdomains Live 13 Nov 2019 - 14 49 072,956 pages
- Design Portfolio Rishab Pillai Unit2 ReviewNo ratings yetDesign Portfolio Rishab Pillai Unit2 Review22 pages
- Elective-II - IDE - Practical - Introduction To Web Designing (HTML & CSS) - TNo ratings yetElective-II - IDE - Practical - Introduction To Web Designing (HTML & CSS) - T4 pages
- Every Font Awesome 4.0.3 Icon, CSS Class, & UnicodeNo ratings yetEvery Font Awesome 4.0.3 Icon, CSS Class, & Unicode5 pages
- What Is The Difference Between A Web Designer and A Web Developer?No ratings yetWhat Is The Difference Between A Web Designer and A Web Developer?3 pages
- Day 5. Bootstrap 5 & Bootstrap ComponentNo ratings yetDay 5. Bootstrap 5 & Bootstrap Component4 pages
- Diploma in UI/UX Design: (It's Live & Advanced !!)No ratings yetDiploma in UI/UX Design: (It's Live & Advanced !!)24 pages
