01-SimpleForm

homework task for HTML Forms

by Polina Petrova

HTML

<section>
        <h1>Enter the system</h1>
        <p>
            It is nessesary to login to your account in order to sign in for a course.
        </p>

        <div class="box register">
            <h2>Are you new? Register</h2>
            <form>
                <input type="text" id="user-name" name="user-name" placeholder="User name" required="required">
                <input type="email" id="email" name="email" placeholder="Email" required="required">
                <input type="password" id="password" name="password" placeholder="Password" required="required">
                <input type="password" id="confirm-password" name="confirm-password" placeholder="Confirm Password" required="required">
                <p>
                    <button type="submit" id="reg-button" name="reg-button">Register</button>
                </p>
            </form>
        </div>
        <div class="box login">
            <h2>Already a student? Login</h2>
            <input type="text" id="user-name" name="user-name" placeholder="User name" required="required" tabindex="1">
            <input type="password" id="password" name="password" placeholder="Password" required="required" tabindex="2">
            <p>
                <input type="checkbox" name="remember-pass" id="remember-pass" />
                <label for="remember-pass"> Remember me?</label>
                <button type="submit" id="login-button" name="login-button" tabindex="5">Login</button>
            </p>
            <p>
                <a href="#" target="_blank">Forgotten Password</a>
            </p>
        </div>
    </section>

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*RESET end*/

html{
    background-color:#eee;
    font-family:Tahoma, Arial,sans-serif;
    color:#444;
    font-size:14px;        
}
section{
     margin-left:1rem;
}

/*Mobile portrait (320x480)*/
/*Mobile landscape (480x320)*/
@media screen (min-width:300px) and (max-width:600px) {
    section{
        width:90%;
        margin:0 auto;
    }
}

/*Small tablet portrait (600x800)*/
/*Small tablet landscape (800x600)*/
@media screen (min-width:600px) and (max-width:800px) {
    section{
        width:80%;
        margin:0 auto;
    }
} 

/*Tablet portrait (768x1024)*/
/*Tablet landscape (1024x768)*/
@media screen (min-width:800px) and (max-width:1024px) {
    section{
        width:50%;
        margin:0 auto;
    }
} 

/*Desktop*/
/*@media screen and (min-width:1024px){
    section{
        width:50%;
        margin:0 auto;
    }
}*/

h1{
    color:#234465;
    font-size:1.6rem;
    line-height: 1.6rem;
    font-weight:bold;
    padding:1rem 0 0.5rem 0;
}
.box{    
    width:280px;    
    display:inline-block;
    vertical-align:top;    ...