Telerik Academy CSS Exam-Variant 2

task1

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Less1.css" rel="stylesheet" type="text/css" />
    <script src="jquery-1.9.0.js"></script>
    <script>
        $(function onDocumentReady() {
            $(".btn-login-form").on("click", function onShowRegisterBtnClick() {
                var btnId = $(this).attr("id");
                var formId = "form-" + btnId.substr("btn-show-".length);
                $("form").addClass("invisible");
                $("#" + formId).removeClass("invisible");
 
                $("a.current").removeClass("current");
                $(this).addClass("current");
            });
        });
    </script>
</head>
<body>
    <div id="wrapper">
        <a href="#" id="btn-show-register" class="btn-login-form current">Register</a>
        <a href="#" id="btn-show-login" class="btn-login-form">Login</a>
        <form id="form-register">
            <fieldset>
                <legend>Registration form</legend>
 
                <label for="tb-username">Username: </label>
                <input type="text" id="tb-username" placeholder="Enter username" /><br />
 
                <label for="tb-password">Password: </label>
                <input type="password" id="tb-password" placeholder="Enter password" /><br />
 
                <label for="tb-repeat-pass">Repeat password: </label>
                <input type="password" id="tb-repeat-pass" placeholder="Enter password" /><br />
                <button>Register</button>
            </fieldset>
        </form>
        <form id="form-login" class="invisible">
            <fieldset>
                <legend>Login form</legend>
 
                <label for="tb-username">Username: </label>
                <input type="text" id="Text1" placeholder="Enter username" /><br />
 
                <label for="tb-pass">Password: </label>
                <input type="text" id="Text2" placeholder="Enter password" /><br />
               ...

CSS

html,
body,
div,
a,
li,
ul,
fieldset,
input,
form,
button,
legend {
  margin: 0 10px 10px 10px;
  padding: 0px;
}
body {
  font-size: 16px;
  font-family: Verdana,Geneva;
}
body .invisible {
  display: none;
}
body #wrapper {
  width: 1024px;
}
body #wrapper a {
  color: black;
  text-decoration: none;
  font-weight: 200;
  margin-left: -10px;
  font-size: 1.2em;
}
body #wrapper a:first-of-type {
  margin-left: 20px;
}
body #wrapper a:hover {
  color: #666666;
}
body #form-register {
  width: 470px;
  background: #ffffff;
  /* Old browsers */
  background: -moz-linear-gradient(top, #ffffff 10%, #595959 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #ffffff), color-stop(100%, #595959));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #ffffff 10%, #595959 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #ffffff 10%, #595959 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #ffffff 10%, #595959 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #ffffff 10%, #595959 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#595959', GradientType=0);
  /* IE6-9 */
}
body #form-register fieldset {
  border-radius: 5px;
  border: 5px solid black;
  padding-right: 75px;
  padding-top: 0px;
  margin: 0 10px 0px 10px;
  text-align: right;
}
body #form-register fieldset legend {
  font-weight: bold;
  text-align: right;
  font-size: 1.7em;
  font-style: italic;
  padding: 0 10px;
  background-color: white;
}
body #form-register fieldset label {
  font-weight: bold;
}
body #form-register fieldset input {
  border-radius: 15px;
  height: 35px;
  width: 160px;
  margin: 5px 0 5px 0;
  background: #020202;
  /* Old browsers */
  background: -moz-linear-gradient(top, #020202 0%, #cacaca 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #020202),...