Creating a Discussion Board help (Static Website) Client Side Experience of a Di
ID: 3823328 • Letter: C
Question
Creating a Discussion Board help (Static Website)
Client Side Experience of a Discussion Forum The layout is to be a 2 or 3-column layout with navigation links along the top. No styling frameworks are permitted as you are to develop the styling for the page using CSS. The page requires a masthead as well as a footer. The navigation links need to be available regardless of the where a user is viewing the page. Need help with...bullet Static design/style of required pages... Page for registering at site by providing their name, email and image Page for user login by providing username and password Page for user to view/edit their profile Page for password recover (via email) Pages for browsing/creating/commentating on discussions Hand-styled layout with contextual menus (i.e. when user has logged on to site, menus reflect change). Frameworks are not permitted. 2 or 3 column layout using appropriate design principles (i.e. highlighting nav links when hovered over, etc) Client-side validation Search bar (static)Explanation / Answer
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
input[name=search] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
</style>
</head>
<body>
<center>
<table>
<caption><h1>Discussion Forum</h1></caption>
<tr><th><a href="index.html">Home</a></th>
<th><a href="registration.html">registration</a></th>
<th><a href="login.html">Login</a></th>
<th><a href="edit.html">Edit Your Profile</a></th>
<th><a href="comment.html">Comment</a></th></tr>
</table>
<p>search form:</p>
<input type="text" name="search" placeholder="Search..">
</center>
</body>
</html>
registration.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
input[name=search] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
</style>
</head>
<body>
<center>
<form>
<center>
<table>
<caption><h1>Discussion Forum</h1></caption>
<tr><th><a href="index.html">Home</a></th>
<th><a href="registration.html">registration</a></th>
<th><a href="login.html">Login</a></th>
<th><a href="edit.html">Edit Your Profile</a></th>
<th><a href="comment.html">Comment</a></th></tr>
</table>
</center>
<table>
<caption><h1>Registration Form</h1></caption>
<tr><th>Name</th> <th><input type="Text" name="n1"></th><tr>
<tr><th>Email ID </th><th><input type="text" name="e1"></th></tr>
<tr><th><input type="button" value="Upload Image"></th><th><input type="text" name="img"></th></tr>
<tr><th><input type="button" value ="Submit"></th></tr>
</table>
<p>search form:</p>
<input type="text" name="search" placeholder="Search..">
</form></center>
</body>
</html>
login.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
input[name=search] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
</style>
</head>
<body>
<form>
<center>
<center>
<table>
<caption><h1>Discussion Forum</h1></caption>
<tr><th><a href="index.html">Home</a></th>
<th><a href="registration.html">registration</a></th>
<th><a href="login.html">Login</a></th>
<th><a href="edit.html">Edit Your Profile</a></th>
<th><a href="comment.html">Comment</a></th></tr>
</table>
</center>
<table>
<caption><h1>Login Form</caption>
<tr><th>Username </th><th><input type="text" name="t1"></th></tr>
<tr><th>Password </th><th><input type="text" name="t2"></th></tr>
<tr><th><input type="button" value="Login"></th></tr>
</table>
<p>search form:</p>
<input type="text" name="search" placeholder="Search..">
</center>
</form>
</body>
</html>
edit.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
input[name=search] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
</style>
</head>
<body>
<form><center>
<center>
<table>
<caption><h1>Discussion Forum</h1></caption>
<tr><th><a href="index.html">Home</a></th>
<th><a href="registration.html">registration</a></th>
<th><a href="login.html">Login</a></th>
<th><a href="edit.html">Edit Your Profile</a></th>
<th><a href="comment.html">Comment</a></th></tr>
</table>
</center>
<table>
<cation><h1>Edit Your Profile</h1></caption>
<tr><th>Name</th><th><input type="text" name="t11"></th></tr>
<tr><th>Email Id</th><th><input type="text" name="t12"></th></tr>
<tr><th><input type="button"value="upload Image"></th><th><input type="text"></th></tr>
<tr><th><input type="button" value="Save Profile">
</table>
<p>search form:</p>
<input type="text" name="search" placeholder="Search..">
</center>
</form>
</body>
</body>
</html>
comment.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
input[name=search] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
</style>
</head>
<body>
<form>
<center>
<center>
<table>
<caption><h1>Discussion Forum</h1></caption>
<tr><th><a href="index.html">Home</a></th>
<th><a href="registration.html">registration</a></th>
<th><a href="login.html">Login</a></th>
<th><a href="edit.html">Edit Your Profile</a></th>
<th><a href="comment.html">Comment</a></th></tr>
</table>
</center>
<h1>Comment</h1>
<table>
<tr><th>Name</th>
<th><input type="text"></th></tr>
<tr><th></th><th><textarea rows="4" cols="25"> </textarea></th></tr>
<tr><th><input type="button" value="Submit"></th></tr></table>
<p>search form:</p>
<input type="text" name="search" placeholder="Search..">
</center>
</form>
</body>
</html>
style.css
h1
{
color:white;
background-color:black;
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.