Remember to include: A consistent design and color scheme An external CSS document to control these...

Question

Question

Remember to include: A consistent design and color scheme An external CSS document to control these...

Remember to include:

A consistent design and color scheme
- An external CSS document to control these aspects
- CSS applied to a single page
- Use of inline styles
A consistent navigation between parts of your site
A minimum of 5-8 pages
At least three external hyperlinks
An email link with the subject filled in
A form (it does NOT have to connect to a database because that is beyond the scope of this class)
Properly placed images on at least three pages
The use of alert message on one page
JavaScript that adds value to your page. This could be mouseover events for navigation, a photo gallery, form field validation, performing a calculation in a form (such as adding tax or shipping), etc.
JavaScript additions
The preparation of the desktop and mobile versions of your site.

engineering Computer-Science

Add a comment Improve this question Transcribed image text

Answer 1

Answer #1

---------------------------index.html-----------------------------------

</!DOCTYPE html>
<html lang="eng">
<head>

</head>
<body id="bodyStarts">

<script type="text/javascript">
   alert("Welcome to our project....");
</script>
<header>
   <div class="navbar navbar-default navbar-fixed-top">
       <center>
       <div class="menu-bar-container" onclick="openMenuBar()">
<div class="menu-bar1"></div>
<div class="menu-bar2"></div>
<div class="menu-bar3" style="margin-bottom: 1px;"></div>
</div>
</center>

</div>

   <div id="sideMenuItems" class="sideMenuBar">
<span class="closeMenuBtn" onclick="closeMenuBar()" style="color:red;">×</span><hr>
<a href="index.html">Home</a><hr>
<a href="login.html">Login</a><hr>
<a href="down.html">Downloads</a><hr>
<a href="about.html">About Us</a><hr>
<a href="contact.html">Contact Us</a><hr>
   </div>   <br><br><br><br>

</header>
<div class="container">
   <div class="row">
<div class="card-view">
   <center style="font-size: 50px"><p >Welcome to our page</p>
       <a href="#dvcal" style="text-decoration: none;font-size: 20px;">Basic Calculator</a><br><br>
       <a href="#dv1" style="text-decoration: none;font-size: 20px;">Goto Div1</a><br><br>
       <a href="#dv2" style="text-decoration: none;font-size: 20px;">Goto Div2</a><br><br>
       <a href="#dv3" style="text-decoration: none;font-size: 20px;">Goto Div3</a><br><br>
       <a href="#dv4" style="text-decoration: none;font-size: 20px;">Goto Div4</a><br><br>
       <a href="#dv5" style="text-decoration: none;font-size: 20px;">Goto Div5</a><br><br>
       </center>
</div><br><br>
<div class="card-view" id="dv1">
   <center style="font-size: 50px"><p >This Is Division 1</p>
.<br>.<br>.<br>
       </center>

</div><br><br>
<div class="card-view" id="dv2">
<center style="font-size: 50px"><p >This Is Division 2</p>
.<br>.<br>.<br></center>

</div><br>
<div class="card-view" id="dv3">
<center style="font-size: 50px"><p >This Is Division 3</p>
.<br>.<br>.<br></center>

</div><br>
<div class="card-view" id="dvcal">
   <center style="font-size: 50px"><p >Basic Calculator</p>
<br>
<label style="color: black;">Input a number : </label><input style="color:black;" class="inp" type="number" name="" id="num1"><br><br>
<label style="color: black;">Input a number : </label><input style="color:black;" class="inp" type="number" name="" id="num2"><br><br>
<label style="color: black;">Sum : </label><input style="color:black;" class="inp" type="number" name="" id="res" disabled=""><br><br>
<button onclick="result()" >Check Sum</button>
       </center>
       <script type="text/javascript">
           function result(){
               document.getElementById('res').value=Number(document.getElementById('num1').value)+Number(document.getElementById('num2').value);
           }
       </script>
</div><br>
<div class="card-view" id="dv4">
<center style="font-size: 50px"><p >This Is Division 4</p>
       .<br>.<br>.<br></center>

</div><br>
<div class="card-view" id="dv5">
<center style="font-size: 50px"><p >This Is Division 5</p>
.<br>.<br>.<br></center>

</div>
</div>
</div>
<button class="backToTop" id="scrollTopId" onClick="BackToTop()">
<center><i>goto top</i></center>
</button>
<script type="text/javascript" src="main.js"></script>

</body>
</html>

-----------------------------------login.html---------------------------------

</!DOCTYPE html>
<html lang="eng">
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
   <meta name="keywords" content="">
   <meta name="author" content="">
   <meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>Main Page</title>
   <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body id="bodyStarts">

</div>

   <div id="sideMenuItems" class="sideMenuBar">
<span class="closeMenuBtn" onclick="closeMenuBar()" style="color:red;">×</span><hr>
<a href="index.html">Home</a><hr>
<a href="login.html">Login</a><hr>
<a href="down.html">Downloads</a><hr>
<a href="about.html">About Us</a><hr>
<a href="contact.html">Contact Us</a><hr>
   </div>   <br><br><br><br>

</header>
<center>
<form action="" method="">
<label style="color: white;font-size: 15px;">Enter Your email:</label><br><br>
<input type="email" placeholder="[email protected]" name="" class="inp"><br><br>
<label style="color: white;font-size: 15px;">Enter your password</label><br><br>
<input type="password" placeholder="********" name="" class="inp"><br><br>
<button>Login</button>
</form>
</center>
<button class="backToTop" id="scrollTopId" onClick="BackToTop()">
<center><i>goto top</i></center>
</button>
<script type="text/javascript" src="main.js"></script>

</body>
</html>

---------------------------------------------down.html-------------------------------------------

</!DOCTYPE html>
<html lang="eng">
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
   <meta name="keywords" content="">
   <meta name="author" content="">
   <meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>Downloads</title>
   <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body id="bodyStarts">

</div>

   <div id="sideMenuItems" class="sideMenuBar">
<span class="closeMenuBtn" onclick="closeMenuBar()" style="color:red;">×</span><hr>
<a href="index.html">Home</a><hr>
<a href="login.html">Login</a><hr>
<a href="down.html">Downloads</a><hr>
<a href="about.html">About Us</a><hr>
<a href="contact.html">Contact Us</a><hr>
   </div>   <br><br><br><br>

</header>
<center>
<a href="/file.jpg" download><button >Click me to download</button>
</center>
<button class="backToTop" id="scrollTopId" onClick="BackToTop()">
<center><i>goto top</i></center>
</button>
<script type="text/javascript" src="main.js"></script>

</body>

</html>

---------------------------------about.html------------------------------------

</!DOCTYPE html>
<html lang="eng">
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
   <meta name="keywords" content="">
   <meta name="author" content="">
   <meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>About Us</title>
   <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body id="bodyStarts">

</div>

   <div id="sideMenuItems" class="sideMenuBar">
<span class="closeMenuBtn" onclick="closeMenuBar()" style="color:red;">×</span><hr>
<a href="index.html">Home</a><hr>
<a href="login.html">Login</a><hr>
<a href="down.html">Downloads</a><hr>
<a href="about.html">About Us</a><hr>
<a href="contact.html">Contact Us</a><hr>
   </div>   <br><br><br><br>

</header>
<center>
<p style="font-size: 60px;color: green;">This is our new project</p>
</center>
<script type="text/javascript" src="main.js"></script>

</body>

</html>

--------------------------contact.html-------------------------

</!DOCTYPE html>
<html lang="eng">
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
   <meta name="keywords" content="">
   <meta name="author" content="">
   <meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>Contact Us</title>
   <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body id="bodyStarts">

</div>

   <div id="sideMenuItems" class="sideMenuBar">
<span class="closeMenuBtn" onclick="closeMenuBar()" style="color:red;">×</span><hr>
<a href="index.html">Home</a><hr>
<a href="login.html">Login</a><hr>
<a href="down.html">Downloads</a><hr>
<a href="about.html">About Us</a><hr>
<a href="contact.html">Contact Us</a><hr>
   </div>   <br><br><br><br>

</header>
<center>
   <p style="font-size: 30px;color: green;">Mob : 1234567890</p>
   <br>
   <p style="font-size: 60px;color: green;">email : [email protected]</p>
   <br>
   Or<br>

   <--mailto with sublect-->

   <a href="mailto:[email protected]?subject=This is the subject" style="color: black;"><button >Mail Me</button></a>

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

</body>
</html>

------------------------------------------main.js---------------------------------------

/*Menu buttton togglers */
//ToTop Scroll Button
window.onscroll=function(){scrollToTopBtn();}
function scrollToTopBtn()
{
if(document.body.scrollTop>500||document.documentElement>500)
{
document.getElementById("scrollTopId").style.display="block";
}
else{
document.getElementById("scrollTopId").style.display="none";
}
}
function BackToTop()
{
document.body.scrollTop=0;
documentElement.body.scrollTop=0;
}
var menuFlag=0;
function openMenuBar()
{
if(menuFlag==0)
{
document.getElementById("sideMenuItems").style.width="300px";
document.getElementById("bodyStarts").style.marginLeft="300px";
document.body.style.backgroundColor="rgba(0,0,0,0.4)";

menuFlag=1;
}
else
{
document.getElementById("sideMenuItems").style.width="0";
document.getElementById("bodyStarts").style.marginLeft="0"
document.body.style.backgroundColor="black";
menuFlag=0;
}

}

function closeMenuBar()
{
document.getElementById("sideMenuItems").style.width="0";
document.getElementById("bodyStarts").style.marginLeft="0"
document.body.style.backgroundColor="black";
menuFlag=0;
}

-------------------------------style.css---------------------------------------

body{

background:black;

}

/*Menu Styles*/
.menu-bar1,.menu-bar2,.menu-bar3 {

width: 35px;
height: 5px;
background-color: green;/*black*/
margin: 6px 0;

}

.menu-bar-container
{

display: inline-block;
cursor: pointer;
width: 35px;
height: 33px;
margin-top: 5px;

}
/*Menu with items*/
.sideMenuBar{

z-index:10000;
height: 100%;
width:0;/*change with js*/
position: fixed;
top: 0;
left: 0;
background-color: white;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;

}
.sideMenuBar a{

padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: red;
display: block;
transition: 0.3s;

}

.sideMenuBar a:hover{

color: #f1f1f1;
background-color: green;
text-align: center;
border:2px solid green;
border-radius: 10px;
font-size: 20px;
transition: 0.4s ease-in;

}
.sideMenuBar .closeMenuBtn{

position: relative;
top:0
right:25px;
font-size: 50px;
margin-left: 200px;
cursor: pointer;

}

#bodyStarts{

transition: margin-left .5s;
padding: 16px;

}
@media screen and (max-height:450px){

.sideMenuBar{padding-top: 15px;}
.sideMenuBar a{font-size: 15px;}

}
.backToTop{

color:red;
opacity: 0.8;
padding: 6px;
position: fixed;
font-size: 20px;
border:4px solid white;
border-radius:50%;
bottom: 10px;
right: 20px;
background-color: blue;

}
.card-view{

padding: 10px;
background-color: white;
color: green;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
min-width: 50%;
min-height: 200px;

}
.card-view:hover{

padding: 10px;
background-color: white;
color: green;
box-shadow: 0 3px 3px 0 white;
min-width: 50%;
min-height: 200px;

}

.inp{

background-color: red;
color: green;
font-size: 15px;
padding: 10px;
border:2px solid red;
border-radius: 6px;

}
button{

background-color: green;
color: red;
font-size: 15px;
padding: 10px;
border:2px solid green;
border-radius: 6px;

}

Add a comment

Answer 2

Answer #2