WEB Design File 1234
WEB Design File 1234
SUBMITTED TO SUBMITTED BY
_ _Yashaswi Sharma
<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>
Logo.html:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0; }
form {
text-align: center; }
input[type="submit"], input[type="reset"] {
display: inline-block; }
</style>
<h3><u>Login Page</u></h3>
Username: <input type="text" name="uname" required><br>
</form> </body>
</html>
<html>
<head>
function addToCart() {
</script>
</head>
<body>
<script language="JavaScript">
var xmldoc;
xmldoc.load("book.xml");
arr = xmldoc.getElementsByTagName("ITEM");
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>");
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>
<html>
<head>
function fun() {
</script>
</head>
<body>
<script language="JavaScript">
var xmldoc;
xmldoc.load("csebook.xml");
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>ISBN:</b>" +
xmldoc.getElementsByTagName("ISBN")[i].childNodes[ 0].nodeValue + "<BR></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>
<html lang="en">
<head>
<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;
width: 300px;
label {
display: block;
margin-bottom: 8px;
color: #555;
input {
width: 100%;
padding: 8px;
margin-bottom: 16px;
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>
<body>
<form>
<h2>Registration Form</h2>
<label for="name">Name:</label>
<label for="password">Password:</label>
<label for="address">Address:</label>
<label for="email">Email:</label>
<button type="submit">Register</button>
</form>
</body>
</html>
Reg.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Registration Form</title>
<style>
</style>
</head>
<body>
<h2>Registration Form</h2>
<label for="name">Name:</label>
<label for="password">Password:</label>
<label for="address">Address:</label>
<label for="email">Email:</label>
<button type="submit">Register</button>
</form> <script>
return false;
if (!emailRegex.test(email)) {
return false;
}
// Validate phone number format
if (!phoneRegex.test(phone)) {
alert('Please enter a valid 10-digit phone number');
return false;
</script>
</body>
Output:
<html lang="en">
<head>
<style>
body {
line-height: 1.6;
color: #333;
background-color: #f8f8f8;
margin: 0;
padding: 0; }
header {
text-align: center;
h1 {
font-family: 'Verdana', sans-serif;
font-size: 2.5em;
color: #333; }
p{
font-size: 1.2em;
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;
position: fixed;
bottom: 0;
width: 100%; }
</head>
<body>
<header>
</header>
<div class="content">
<p>This is a simple web page demonstrating different font styles using CSS.</p>
</div>
<footer>
</footer>
</body>
</html>
INDEX.HTML
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Dushyant’s Portfolio</title>
<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
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">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-
<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>
<header>
<span class="navbar-toggler-icon"></span>
</button>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
</li>
</ul>
</nav>
</header>
<section id = "Home">
</div>
<div class=social_media_icon>
</a>
</a>
</a>
</a>
</div>
</div>
</div>
</section>
<section id=Whatido>
<h1>What I Do ?</h1>
</div>
</ul>
</div>
</div>
</div>
</ul>
Building Fully responsive website front end using HTML, CSS, Bootstrap and
Javascript.</p>
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>
I have also used Abode Photoshop, Illustrator and Figma to design User
interface of websites and mobile application and design of logos.</p>
</div>
</div>
</div>
</div>
<li></li>
</ul>
I have knowledge of Data Structure like Hash Tables, Trees, Tries, Graphs,
and various algorithms for solving various problems efficiently.</p>
</div>
</div>
</div>
</body>
</html>
CONTACT.HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<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
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">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
</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>
<header>
<span class="navbar-toggler-icon"></span>
</button>
<li class="nav-item">
</li>
</li>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
</ul>
</nav>
</header>
<section id="contact">
</div>
Discuss a project or just want to say hi ? My Inbox is always open for all.</p>
<ul class="ico">
</ul>
</div>
</div>
</section>
<section>
<div class="second-section">
</div>
</div>
</section>
</body>
</html>
STYLE.CSS:
body{
.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'); }
/* margin-bottom: 3px; */
font-size: 50px;
font-weight: bold;
color: #351458; }
.headerachor {
color: black;
font-size: 25px; }
.headerachor:hover {
background-color: #f1f1f1; }
/* Section 1 */
.column1{
background-image: linear-gradient(#fefcfe,#ffffff);
.section-1{
position: relative; }
span.wave {
animation-name: wave-animation;
animation-duration: 2.5s; animation-
iteration-count: infinite;transform-
block; }
.first-image{
position: absolute;
right:0; }
.boyimage{
height: 400px; }
right:160px; }
.boy{
width: 100%;
height: 100%;
animation-direction: alternate;
animation-iteration-count: infinite;}
@keyframes bounce{
from{
transform: translate3d(0,0,0); }
to{
transform: translate3d(0,20px,0); }
.Image-boy{
text-align: center;
align-items: center; }
display:none; }
.Hello{
margin-bottom: 20px; }
p{
line-height: 2;
color: #868e96; }
.btn {
display: inline-block;
width: 4.37rem;
height: 4.37rem;
background: #e9e9e9;
margin: 10px;
border-radius: 30%;
color: #3498db;
overflow: hidden;
position: relative; }
btn i {
line-height: 70px;
font-size: 1.625rem;
.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 {
top: -10%;
left: -10%;
.btn{
width: 2.5rem;
height: 2.5rem;
margin: 7px;
.btn i {
line-height: 40px;
font-size: 1em; }
#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;
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{
}
.Features-paragraph{
margin-top : 8px;
margin-bottom: 8px;
display: flex;
flex-direction: column; }
.feature-web{
order:2; }
font-size: 40px;
font-weight: bold;
color: #351458; }
.section-1{
margin-top: auto;
padding-right: 400px; }
body,html{
text-align: center;
font-size: 16px;
.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;
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Survey Form</title>
</head>
<body>
<div class="container">
<form id="surveyForm">
<label for="name">Name:</label>
<option value="satisfied">Satisfied</option>
<option value="neutral">Neutral</option>
</select>
<label for="feedback">Feedback:</label>
<label for="opinion">Opinion:</label>
</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;
width: 500px;}
form {
display: flex;
flex-direction: column; }
label {
margin-bottom: 8px;
}
input, select, textarea {
margin-bottom: 16px;
padding: 8px;
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() {
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<form id="questionnaireForm">
<label for="name">Name:</label>
<label for="qualification">Qualification:</label>
<label for="gender">Gender:</label>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<label for="department">Department:</label>
<label for="interests">Interests:</label>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</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 {
border-radius: 8px;
width:800px; }
form {
display: flex;
flex-direction: column; }
label {
margin-bottom: 8px; }
margin-bottom: 16px;
padding: 8px;
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() {