Webpage test

This tool allows you to quickly test the appearance and functionality of webpage source, and to temporarily save it for others to see. Please be respectful of our bandwidth.

Highlighted source

If you see something with a dashed underline, hover your mouse over it to see an explanation.

Although this highlighter attempts to detect some errors, it isn't meant to be a full validator. It is possible that some errors are overlooked, and it is possible that some valid content is incorrectly marked as an error.

HTML

<!DOCTYPE html>
<html lang="eng"><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Common Bytes</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Common Bytes Custom CSS -->
    <link href="css/style-custom.css" rel="stylesheet">
    <!-- Google Fonts -->
    <link href="http://fonts.googleapis.com/css?family=Cabin:400,500,600,700|Slackey|Ranchers" rel="stylesheet" type="text/css">
    <!-- Font Awesome Icons -->
    <link href="fonts/font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">

  </head>

  <body class="cb-signin-body">
    <div class="col-sm-12 ">
        <div class="col-sm-12 text-center cb-signin-topText">
            <h1>Welcome to</h1>
            <h2>Commonbytes!</h2>
        </div>
        <div class="col-sm-12 text-center">
            <div class="form-group has-error has-feedback">
                <label for="element-2" class="cb-signin-control-label">Username</label>
                <input type="text" placeholder="Student ID" class="cb-signin-form-control">
                <p class="cb-signin-control-label">Hint: Your password is the same as your student ID</p>
            </div>
        </div>
        <div class="col-sm-12 text-center"> 
            <div class="form-group has-error has-feedback">
                <label for="element-2" class="cb-signin-control-label">Password</label>
                <input type="text" placeholder="Password" class="cb-signin-form-control">
                <p class="cb-signin-control-label">Hint: Your password is the same as your student ID</p>
            </div>
        </div>
        <div class="col-sm-12 text-center ">
            <span class="cb-forgot">Help I forgot <span class="cb-password">My password!</span></span>
        </div>
        <div class="col-sm-12 text-center  "> <!-- Radio Btn -->
            <div class="wrapper">
                <div class="radio">
                    <input type="radio" name="atschool" value="atschool" id="atschool">
                    <label for="atschool">I'm at School</label>
                    <input type="radio" name="notatschool" value="notatschool" id="notatschool">
                    <label for="notatschool">I'm NOT at School</label>
                </div>           
            </div>
        </div>

    </div>


    </body>
</html>

CSS

.cb-signin-body {
	background-color: #7eab14;
}
.cb-signin-topText {
	font-family: "slackey",cursive;
	color: white;
}
.cb-signin-control-label {
	color: white;
}
.cb-forgot {
	font-family: "cabin";
	color: white;
	font-size: 18px;
}
.cb-password{
	font-family: "slackey",cursive;
	margin-left: 0.5%
}
.circle {
	border: 3px solid white;
	height: 20px;
	width: 20px;
	border-radius: 25px;
}
.cb-signin-form-control {
	width: 325px;
	margin: 0 auto;
}
*::-webkit-input-placeholder {
    color: #7eab14;
    text-align: center;
    font-weight: bold;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: #7eab14;
    text-align: center;
    font-family: "cabin", cursive;
    font-weight: bold;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: #7eab14;
    text-align: center;
    font-weight: bold;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: #7eab14;
    text-align: center;
    font-weight: bold;
}
input[type="radio"] {
    display: none;
}
input[type="radio"] + label:before {
    /*background-color: white;*/
    border: 3px solid white;
    content: "";
    display: inline-block;
    font-size: 12px;
    height: 16px;
    width: 16px;
    border-radius: 16px;
}
input[type="radio"]:checked + label:before{
    /*content: "\2713"*/
    background-color: white;
}

Input

HTML
CSS
ECMAScript
  • Validate:

Output