2
\$\begingroup\$

I'm working on a responsive login page (open source). Could you try to review a bit the code on Github ?

body{
    font-family: "Montserrat", sans-serif;
    margin: 0;
    background-image: linear-gradient(to right bottom, #ff0000, #ff5600, #ff8000, #ffa200, #ffc200);

}

#title {
    font-size: 60px;
    margin: 0;
    text-align: center;
    position: absolute;
    width: 100%;
}

#subtitle {
    margin: 0;
    margin-bottom: 10px;
    text-align: center;
    font-weight: 200;
    color: #fff;

}


#title a {
    text-decoration: none;
    color: #fff;
}
.body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.page {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.box {
    background-color: #F7F7F7;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 368px;
    height: 350px;
    padding: 48px 40px;
    border-radius: 5px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}



.top-box {
    height: 30%;
}
.box form {
    width: 100%;
    height: 70%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
}

#user-icon {
    width: 100px;
    height: 100px;
}

#email, #password{
    height: 48px;
    padding-left: 10px;
    font-size: 15px;
    border-style: solid;
    border-color: #c0c0c0;
    border-width: thin;
    -moz-box-shadow:    inset 0 0 1px #000000;
    -webkit-box-shadow: inset 0 0 1px #000000;
    box-shadow:         inset 0 0 1px #000000;
    width: 100%;

}

#email {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    border-bottom-style: hidden;
    
}

#password {
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
}


#email::placeholder, #password::placeholder {
    color: rgb(179, 179, 179);
}

#submit {
    height: 44px;
    background: rgb(68, 112, 255);
    color: white;
    margin-top: 15px;
    border-radius: 5px;
    font-size: 15px;
    border: 0;
}

@media screen and (max-width: 600px) {
body {
    background: #F7F7F7;
}


.box{
    border-radius: 0;
    width: 85%;
    height: 100%;
    border: none;
    -webkit-box-shadow: none;
	-moz-box-shadow: none;
    box-shadow: none;
    padding: 0;
    height: 400px;


}
.body  {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    }


#user-icon {
    display: none;

}
#title a{
    color: black;
}

#title {
    margin-top: 10px;
    font-size: 35px;


}
#subtitle {
    font-size: 15px;
    color: black;
    position: fixed;
    top: 50px;

}

}

@media screen and (max-height: 320px) {
    #title {
        font-size: 0;
    }

    #subtitle {
        position: fixed;
        top: 15px;
    }
}

@media screen and (max-height: 300px) {
    #title {
        font-size: 0;
    }

    #subtitle {
        font-size: 0;
    }
}

@media screen and (min-width: 600px) and (max-height: 600px) {
    #title {
        font-size: 0;
    }
}

@media screen and (min-width: 600px) and (max-height: 475px) {
    #subtitle {
        font-size: 0;
    }
}
<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="styles.css">
	<link href="https://fonts.googleapis.com/css?family=Montserrat:200,400,500&display=swap" rel="stylesheet">
	<title>Sign in</title>
</head>
<body>
	<span id="title-span"><h1 id="title"><a href="https://github.com/eloisb">Eloi SB</a></h1></span>
	<div class="page">	
		<h2 id="subtitle">Sign in to continue</h2>
		<div class="body">
		<div class="box">
			<img src="https://cdn1.imggmi.com/uploads/2019/6/6/7e0f9ccff2b62a855e5d611467ce65c9-full.png" alt="" id="user-icon">
			<form class="form">
				<input type="text" placeholder="Email" id="email">
				<input type="password" placeholder="Password" id="password">
				<input type="submit" value="Sign in" id="submit">
			</form>
		</div>
		</div>
	</div>
</body>
</html>

https://github.com/eloisb/login_page/

Thanks you

\$\endgroup\$

closed as off-topic by esote, Daniel, Mast, IEatBagels, t3chb0t Jun 13 at 7:35

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Lacks concrete context: Code Review requires concrete code from a project, with sufficient context for reviewers to understand how that code is used. Pseudocode, stub code, hypothetical code, obfuscated code, and generic best practices are outside the scope of this site." – esote, Daniel, Mast
If this question can be reworded to fit the rules in the help center, please edit the question.

1
\$\begingroup\$

It's invalid HTML to have h1 inside span.

Don't use IDs for general styling use classes instead (see for example https://dev.to/claireparkerjones/reasons-not-to-use-ids-in-css-4ni4).

Regarding the HTML structure it seems to make sense to have the title inside the .page element.

Many of the used id and class names are very generic. Considering this is a login page I would at the very least expect the word "login" to be used somewhere. Have a look at some CSS naming schemes, for example BEM.

It seems to me to be a bad idea to use font-size: 0 to hide elements. Why not use display: none?

The layout breaks for small browser windows heights.

\$\endgroup\$
  • \$\begingroup\$ Thanks, I published a new version on github. But aren't id better for unique elements ? \$\endgroup\$ – eloisb Jun 7 at 11:53
0
\$\begingroup\$

Your style is that of Google. It's simple and consice. However, I have a few remarks.

  1. The color classes are in conflict. You have a mix of warm (red) and cold (blue) colors.
  2. There is no warning when the user has Caps Lock on when typing in the password.
  3. You are missing support functions as 'Need help logging in' and 'Stay logged in'.
\$\endgroup\$

Not the answer you're looking for? Browse other questions tagged or ask your own question.