Modified the Navigation Bar and Comment Section
This commit is contained in:
Isy Cadaroski
parent
c65072cb6a
commit
9cc837f8b1
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="ntf-8" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="kazzoostyle.css"/>
|
||||
<link href="#Comment and buy section">
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 25%;
|
||||
background-color: #333;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
li a {
|
||||
display: block;
|
||||
color: #555;
|
||||
padding: 8px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
li a.active {
|
||||
background-color: #555;
|
||||
color: white;
|
||||
}
|
||||
|
||||
li a:hover:not(.active) {
|
||||
background-color: #555;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<li><a class="home" href="Kazoo">Home</a></li>
|
||||
<li><a href="Comment and buy section">Comment</a></li>
|
||||
<li><a href="contact">Contact</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
</ul>
|
||||
|
||||
<div style="margin-left:25%;padding:1px 16px;height:1000px;">
|
||||
<h2>Kazzoo, the Open Trade Portal</h2>
|
||||
<h3> Commtents and Requests </h3>
|
||||
<p>
|
||||
|
||||
<form action="demo_form.asp" id="usrform">
|
||||
Name: <input type="text" name="usrname">
|
||||
<input type="submit">
|
||||
</form>
|
||||
<br>
|
||||
<textarea rows="4" cols="50" name="comment" form="usrform">
|
||||
Enter text here...</textarea>
|
||||
|
||||
</p>
|
||||
<div class="wrapper">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="ntf-8" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="kazzoostyle.css"/>
|
||||
<link href="#Contact">
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 25%;
|
||||
background-color: #333;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
li a {
|
||||
display: block;
|
||||
color: #555;
|
||||
padding: 8px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
li a.active {
|
||||
background-color: #555;
|
||||
color: white;
|
||||
}
|
||||
|
||||
li a:hover:not(.active) {
|
||||
background-color: #555;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<li><a class="home" href="Kazoo">Home</a></li>
|
||||
<li><a href="Comment and buy section">Comment</a></li>
|
||||
<li><a href="Contact">Contact</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
</ul>
|
||||
|
||||
<div style="margin-left:25%;padding:1px 16px;height:1000px;">
|
||||
<h2>Kazzoo, the Open Trade Portal</h2>
|
||||
<h3> Contact </h3>
|
||||
<p>
|
||||
|
||||
|
||||
<div class="wrapper">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
|
||||
<head>
|
||||
<title> Kazzoo the Open-Webshop</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="kazzoostyle.css" type="text/css"/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1> Kazzoo, the Open Trade Portal </h1>
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<form method='post'>
|
||||
NAME: <input type='text' name='name' id='name' /><br />
|
||||
|
||||
Email: <input type='text' name='email' id='email' /><br />
|
||||
|
||||
Website: <input type='text' name='website' id='website' /><br />
|
||||
|
||||
Comment:<br />
|
||||
<textarea name='comment' id='comment'></textarea><br />
|
||||
|
||||
<input type='hidden' name='articleid' id='articleid' value='<? echo $_GET["id"]; ?>' />
|
||||
|
||||
<input type='submit' value='Submit' />
|
||||
</form>
|
||||
12
index.html
12
index.html
|
|
@ -4,7 +4,7 @@
|
|||
<head>
|
||||
<meta charset="ntf-8" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="kazzoostyle.css"/>
|
||||
|
||||
<link href="#Kazoo">
|
||||
|
||||
|
||||
<style>
|
||||
|
|
@ -45,9 +45,9 @@ li a:hover:not(.active) {
|
|||
<body>
|
||||
|
||||
<ul>
|
||||
<li><a class="active" href="#home">Home</a></li>
|
||||
<li><a href="#news">News</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
<li><a class="home" href="Kazoo">Home</a></li>
|
||||
<li><a href="Comment and buy section">Comment</a></li>
|
||||
<li><a href="Contact">Contact</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
</ul>
|
||||
|
||||
|
|
@ -58,9 +58,7 @@ li a:hover:not(.active) {
|
|||
</div>
|
||||
</h2>
|
||||
<h3>What is possible in Kazzoo???</h3>
|
||||
<p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
|
||||
<p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
body{
|
||||
|
||||
background-image: url(images.jpg);
|
||||
}
|
||||
h1{
|
||||
font-size: 25pt;
|
||||
font-family: fantasy;
|
||||
color: darkgrey;
|
||||
text-align: center;
|
||||
text-decoration: underline;
|
||||
background-color: rgba(2, 250,250, 0.8);
|
||||
}
|
||||
p{
|
||||
border-radius: 10px;
|
||||
border-style: solid;
|
||||
|
||||
}
|
||||
|
||||
.wrapper{
|
||||
|
||||
width:auto;;
|
||||
max-width: inherit;
|
||||
margin: 20px;
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue