html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title> Mobile Nav Bar </title>
<link rel="stylesheet" href="Mobile_Nav_Bar.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="keywords" content="newsover.com, news, sports, politics, education, entertainment, celebrity, gists, leaders, headlines, world">
<meta charset="UTF-8">
<link rel="stylesheet" href="font_awesome_icons/css/font-awesome.min.css">
<script type="text/javascript" src="jQuery.min.js"></script>
<!-- Uncomment the following links, if need be, to load data from external sources/servers/storages -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Sans|Ubuntu|Damion|Audiowide">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body id="body">
<header id="header">
<!-- Log in page - Start -->
<div id="logInDiv">
<div id="logInDivOrangeDiv">
<div id="logInDivOrange">
<div>
<div id="forLogIn">
<input type="text" placeholder="Input Name or Nick to log in" id="logInInput">
<br>
<button id="logInButton">Log In <i class="fa fa-sign-in"></i></button>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
::;; html {
overflow-x:hidden;
background: rgb(230, 230, 230);
max-width:1200px;
margin:auto;
}
body {
margin:auto;
font-family: Ubuntu, "PT Sans", "Trebuchet MS", Sans;
background: rgb(240,240,240);
overflow-x:hidden;
}
* {
box-sizing:border-box;
}
.row::after {
content:"";
clear:both;
display:table;
}
[class*="col-"] {
float:left;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
this.onload = function() {
//declaring variables to be used as identifiers throughout code -->
var $id, $cls, $tag;
$id = document.getElementById.bind(document);
$cls = document.getElementsByClassName.bind(document);
$tag = document.getElementsByTagName.bind(document);
alert("Hi, there! You are now logged on to newsover.com...the world at your finger tip." +
"\n\nLog in with a name or nick to personalize your experience.\n\nHave a nice time surfing--the world. :)");
//Log in input script -->
$("#logInButton").click(function() {
var username = $("#logInInput").val();
if (username != null) {
if ($.trim(username) == "") {
alert("No name.\n\nYou have to input your name to log in");
$("#logInInput").val("");
}
if ($.trim(username).length < 2 && $.trim(username) != "") {
alert("Your real name is not a character long.");
}
if ($.isNumeric($.trim(username)) && $.trim(username) != "") {
alert("Let your nick contain at least an alphabet.");
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run