[html4strict] sign in
Viewer
*** This page was generated with the meta tag "noindex, nofollow". This happened because you selected this option before saving or the system detected it as spam. This means that this page will never get into the search engines and the search bot will not crawl it. There is nothing to worry about, you can still share it with anyone.
- <?php
- echo '<style>';
- echo '* {';
- echo 'box-sizing: border-box;';
- echo '}';
- echo '';
- echo '/* Style the body */';
- echo 'body {';
- echo 'margin: 0;';
- echo '}';
- echo '';
- echo '/* Header/logo Title */';
- echo '.header {';
- echo 'padding: 50px;';
- echo 'text-align: left;';
- echo 'background: #02F5F9;';
- echo 'color: black;';
- echo 'font-family: Garamond;';
- echo '}';
- echo '';
- echo '/* Increase the font size of the heading */';
- echo '.header h1 {';
- echo 'font-size: 50px;';
- echo '}';
- echo '';
- echo '/* Sticky navbar - toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). The sticky value is not supported in IE or Edge 15 and earlier versions. However, for these versions the navbar will inherit default position */';
- echo '.navbar {';
- echo 'overflow: hidden;';
- echo 'background-color: #FFF779;';
- echo 'position: fixed;';
- echo 'top: 0;';
- echo '}';
- echo '';
- echo '/* Style the navigation bar links */';
- echo '.navbar a {';
- echo 'float: left;';
- echo 'display: block;';
- echo 'color: black;';
- echo 'text-align: center;';
- echo 'padding: 15px 23px;';
- echo 'text-decoration: none;';
- echo '}';
- echo '';
- echo '';
- echo '/* Right-aligned link */';
- echo '.navbar a.right {';
- echo 'float: right;';
- echo '}';
- echo '';
- echo '/* Change color on hover */';
- echo '.navbar a:hover {';
- echo 'background-color: #B4FF79;';
- echo 'color: black;';
- echo '}';
- echo '';
- echo '/* Active/current link */';
- echo '.navbar a.active {';
- echo 'background-color: #666;';
- echo 'color: white;';
- echo '}';
- echo '';
- echo '/* Column container */';
- echo '.row {';
- echo 'display: -ms-flexbox; /* IE10 */';
- echo 'display: flex;';
- echo '-ms-flex-wrap: wrap; /* IE10 */';
- echo 'flex-wrap: wrap;';
- echo '}';
- echo '';
- echo '/* Create two unequal columns that sits next to each other */';
- echo '/* Sidebar/left column */';
- echo '.side {';
- echo '-ms-flex: 30%; /* IE10 */';
- echo 'flex: 30%;';
- echo 'background-color: #f1f1f1;';
- echo 'padding: 20px;';
- echo '}';
- echo '';
- echo '/* Main column */';
- echo '.main {';
- echo '-ms-flex: 70%; /* IE10 */';
- echo 'flex: 70%;';
- echo 'background-color: white;';
- echo 'padding: 20px;';
- echo '}';
- echo '';
- echo '/* Fake image, just for this example */';
- echo '.fakeimg {';
- echo 'background-color: #aaa;';
- echo 'width: 100%;';
- echo 'padding: 20px;';
- echo '}';
- echo '';
- echo '/* Footer */';
- echo '.footer {';
- echo 'padding: 20px;';
- echo 'text-align: center;';
- echo 'background: #ddd;';
- echo '}';
- echo '';
- echo '/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */';
- echo '@media screen and (max-width: 700px) {';
- echo '.row {';
- echo 'flex-direction: column;';
- echo '}';
- echo '}';
- echo '';
- echo '/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */';
- echo '@media screen and (max-width: 400px) {';
- echo '.navbar a {';
- echo 'float: none;';
- echo 'width: 100%;';
- echo '}';
- echo '}';
- echo '{';
- echo 'box-sizing: border-box;';
- echo '}';
- echo '';
- echo '/* Create four equal columns that floats next to each other */';
- echo '.column {';
- echo 'float: left;';
- echo 'width: 50%;';
- echo 'padding: 10px;';
- echo 'height: 300px; /* Should be removed. Only for demonstration */';
- echo '}';
- echo '';
- echo '/* Clear floats after the columns */';
- echo '.row:after {';
- echo 'content: "";';
- echo 'display: table;';
- echo 'clear: both;';
- echo '}';
- echo '</style>';
- echo '<body>';
- echo '';
- echo '<div class="header">';
- echo '<h1>IzzaNews</h1>';
- echo '<p>Get Your Daily News Updates</p>';
- echo '</div>';
- echo '';
- echo '<div class="navbar">';
- echo '<a href="#" class="active">Home</a>';
- echo '<a href="#">Register</a>';
- echo '<a href="#">Sign In</a>';
- echo '<a href="New_Listing.php">News Listing</a>';
- echo '<a href="#">Contact Us</a>';
- echo '</div>';
- echo '';
- echo '<center>';
- echo '<form action>';
- echo '<label for="Uname">Username:</label><br>';
- echo '<input type="text" value=""><br>';
- echo '';
- echo '<label for="pwd">Password:</label><br>';
- echo '<input type="password" id="pwd" name="pwd"><br><br>';
- echo '';
- echo '<br>';
- echo '<input type="submit" value="Submit">';
- echo '<input type="reset" value="Reset">';
- echo '</form>';
- echo '</center>';
- ?>
Editor
You can edit this paste and save as new: