[html4strict] sign in

Viewer

  1. <?php
  2. echo '<style>';
  3. echo '* {';
  4. echo 'box-sizing: border-box;';
  5. echo '}';
  6. echo '';
  7. echo '/* Style the body */';
  8. echo 'body {';
  9. echo 'margin: 0;';
  10. echo '}';
  11. echo '';
  12. echo '/* Header/logo Title */';
  13. echo '.header {';
  14. echo 'padding: 50px;';
  15. echo 'text-align: left;';
  16. echo 'background: #02F5F9;';
  17. echo 'color: black;';
  18. echo 'font-family: Garamond;';
  19. echo '}';
  20. echo '';
  21. echo '/* Increase the font size of the heading */';
  22. echo '.header h1 {';
  23. echo 'font-size: 50px;';
  24. echo '}';
  25. echo '';
  26. 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 */';
  27. echo '.navbar {';
  28. echo 'overflow: hidden;';
  29. echo 'background-color: #FFF779;';
  30. echo 'position: fixed;';
  31. echo 'top: 0;';
  32. echo '}';
  33. echo '';
  34. echo '/* Style the navigation bar links */';
  35. echo '.navbar a {';
  36. echo 'float: left;';
  37. echo 'display: block;';
  38. echo 'color: black;';
  39. echo 'text-align: center;';
  40. echo 'padding: 15px 23px;';
  41. echo 'text-decoration: none;';
  42. echo '}';
  43. echo '';
  44. echo '';
  45. echo '/* Right-aligned link */';
  46. echo '.navbar a.right {';
  47. echo 'float: right;';
  48. echo '}';
  49. echo '';
  50. echo '/* Change color on hover */';
  51. echo '.navbar a:hover {';
  52. echo 'background-color: #B4FF79;';
  53. echo 'color: black;';
  54. echo '}';
  55. echo '';
  56. echo '/* Active/current link */';
  57. echo '.navbar a.active {';
  58. echo 'background-color: #666;';
  59. echo 'color: white;';
  60. echo '}';
  61. echo '';
  62. echo '/* Column container */';
  63. echo '.row {';
  64. echo 'display: -ms-flexbox; /* IE10 */';
  65. echo 'display: flex;';
  66. echo '-ms-flex-wrap: wrap; /* IE10 */';
  67. echo 'flex-wrap: wrap;';
  68. echo '}';
  69. echo '';
  70. echo '/* Create two unequal columns that sits next to each other */';
  71. echo '/* Sidebar/left column */';
  72. echo '.side {';
  73. echo '-ms-flex: 30%; /* IE10 */';
  74. echo 'flex: 30%;';
  75. echo 'background-color: #f1f1f1;';
  76. echo 'padding: 20px;';
  77. echo '}';
  78. echo '';
  79. echo '/* Main column */';
  80. echo '.main {';
  81. echo '-ms-flex: 70%; /* IE10 */';
  82. echo 'flex: 70%;';
  83. echo 'background-color: white;';
  84. echo 'padding: 20px;';
  85. echo '}';
  86. echo '';
  87. echo '/* Fake image, just for this example */';
  88. echo '.fakeimg {';
  89. echo 'background-color: #aaa;';
  90. echo 'width: 100%;';
  91. echo 'padding: 20px;';
  92. echo '}';
  93. echo '';
  94. echo '/* Footer */';
  95. echo '.footer {';
  96. echo 'padding: 20px;';
  97. echo 'text-align: center;';
  98. echo 'background: #ddd;';
  99. echo '}';
  100. echo '';
  101. 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 */';
  102. echo '@media screen and (max-width: 700px) {';
  103. echo '.row {';
  104. echo 'flex-direction: column;';
  105. echo '}';
  106. echo '}';
  107. echo '';
  108. 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 */';
  109. echo '@media screen and (max-width: 400px) {';
  110. echo '.navbar a {';
  111. echo 'float: none;';
  112. echo 'width: 100%;';
  113. echo '}';
  114. echo '}';
  115. echo '{';
  116. echo 'box-sizing: border-box;';
  117. echo '}';
  118. echo '';
  119. echo '/* Create four equal columns that floats next to each other */';
  120. echo '.column {';
  121. echo 'float: left;';
  122. echo 'width: 50%;';
  123. echo 'padding: 10px;';
  124. echo 'height: 300px; /* Should be removed. Only for demonstration */';
  125. echo '}';
  126. echo '';
  127. echo '/* Clear floats after the columns */';
  128. echo '.row:after {';
  129. echo 'content: "";';
  130. echo 'display: table;';
  131. echo 'clear: both;';
  132. echo '}';
  133. echo '</style>';
  134.  
  135. echo '<body>';
  136. echo '';
  137. echo '<div class="header">';
  138. echo '<h1>IzzaNews</h1>';
  139. echo '<p>Get Your Daily News Updates</p>';
  140. echo '</div>';
  141. echo '';
  142. echo '<div class="navbar">';
  143. echo '<a href="#" class="active">Home</a>';
  144. echo '<a href="#">Register</a>';
  145. echo '<a href="#">Sign In</a>';
  146. echo '<a href="New_Listing.php">News Listing</a>';
  147. echo '<a href="#">Contact Us</a>';
  148. echo '</div>';
  149. echo '';
  150. echo '<center>';
  151. echo '<form action>';
  152. echo '<label for="Uname">Username:</label><br>';
  153. echo '<input type="text" value=""><br>';
  154. echo '';
  155. echo '<label for="pwd">Password:</label><br>';
  156. echo '<input type="password" id="pwd" name="pwd"><br><br>';
  157. echo '';
  158. echo '<br>';
  159. echo '<input type="submit" value="Submit">';
  160. echo '<input type="reset" value="Reset">';
  161. echo '</form>';
  162. echo '</center>';
  163. ?>

Editor

You can edit this paste and save as new: