Dalam sebuat website hampir semua ada form login. Form ini biasanya meminta username dan password user sebelum masuk ke layanan online. Tampilan form login sendiri memang cukup sederhana. Tapi tahukah Anda kalau kita bisa membuat form login juga bisa terlihat menjadi luar biasa? dengan html dan css ok langsung saja kita mulai Buat file html
<body>
<div class="app">
<div class="bg"></div>
<form>
<header>
<img src="img/boneka.svg">
</header>
<div class="inputs">
<input type="text" name="" placeholder="username or email">
<input type="password" name="" placeholder="password">
<p class="light"><a href="#">Forgot password?</a></p>
</div>
</form>
<footer>
<button>Continue</button>
<p>Don't have an account? <a href="#">Sign Up</a></p>
</footer>
</div>
</body>
setelah seselai membuat file html sekarang buat file css untuk membentuk tampilan form login
* {
margin: 0;
padding: 0;
text-decoration: none;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-text-size-adjust: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
margin: 0;
padding: 0;
background: #f6f6f6;
font-family: "Poppins", sans-serif;
overflow-x: hidden;
height: 100vh;
margin: auto;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
flex-flow: row wrap;
-ms-flex-flow: row wrap;
}
img {
max-width: 100%;
}
.app {
background-color: #fff;
width: 330px;
height: 570px;
margin: 2em auto;
border-radius: 5px;
padding: 1em;
position: relative;
overflow: hidden;
box-shadow: 0 6px 31px -2px rgba(0, 0, 0, 0.3);
}
a {
text-decoration: none;
color: #257aa6;
}
p {
font-size: 13px;
color: #333;
line-height: 2;
}
.light {
text-align: right;
color: #fff;
}
.light a {
color: #fff;
}
.bg {
width: 400px;
height: 550px;
background: #257aa6;
position: absolute;
top: -5em;
left: 0;
right: 0;
margin: auto;
background-image: url("https://png.pngtree.com");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
-webkit-clip-path: ellipse(69% 46% at 48% 46%);
clip-path: ellipse(69% 46% at 48% 46%);
}
form {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
text-align: center;
padding: 2em;
}
header {
width: 220px;
height: 220px;
margin: 1em auto;
}
form input {
width: 100%;
padding: 13px 15px;
margin: 0.7em auto;
border-radius: 100px;
border: none;
background: rgb(255, 255, 255, 0.3);
font-family: "Poppins", sans-serif;
outline: none;
color: #fff;
}
input::placeholder {
color: #fff;
font-size: 13px;
}
.inputs {
margin-top: -4em;
}
footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 2em;
text-align: center;
}
button {
width: 100%;
padding: 13px 15px;
border-radius: 100px;
border: none;
background: #257aa6;
font-family: "Poppins", sans-serif;
outline: none;
color: #fff;
}
@media screen and (max-width: 640px) {
.app {
width: 100%;
height: 100vh;
border-radius: 0;
}
.bg {
top: -7em;
width: 450px;
height: 95vh;
}
header {
width: 90%;
height: 250px;
}
.inputs {
margin: 0;
}
input,
button {
padding: 18px 15px;
}
}
note:tambahkan gambar untuk menampilkan form login agar di lihat lebih profesional
0 Komentar