Modello HTML della pagina di accesso Liquid Drop

60 alejandrokundrah

Apri nell'Editor Pubblica il Tuo Codice

Modello HTML della pagina di accesso Liquid Drop

Consigliato

10 December 2024

Un codice di staticbug455

21 July 2025

Esempio HTML CSS della carta UNO

30 June 2025

Produzione di acciaio, industria metallurgica | Iron and Steel Inc.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Liquid Drop Login Page</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <link rel="stylesheet" href="style.css">
</head>

</div>
        </div>

<a href="#" class="btn">Forget Password</a>
        <a href="#" class="btn signup">Signup</a>
    </div>

</body>

</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "poppins", sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #eff0f4;
}

.container {
    position: relative;
    left: -80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container .drop {
    position: relative;
    width: 350px;
    height: 350px;
    box-shadow: inset 20px 20px 20px rgba(0, 0, 0, 0.05),
    25px 35px 20px rgba(0, 0, 0, 0.05), 25px 30px 30px rgba(0, 0, 0, 0.05),
    inset -20px -20px 25px rgba(255, 255, 255, 0.9);
    transition: 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 62% 38% 24% 76% / 59% 60% 40% 41%;
}

.container .drop:hover {
    border-radius: 50%;
}

.container .drop::before{
    content: '';
    position: absolute;
    top: 50px;
    left: 85px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #fff;
    opacity: 0.9;
}

.container .drop::after{
    content: '';
    position: absolute;
    top: 85px;
    left: 110px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    opacity: 0.9;
}

.container .drop .content {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 40px;
    gap: 15px;
}

.container .drop .content h2 {
    position: relative;
    color: #f80404;
    font-size: 1.5em;
}

.container .drop .content form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

.container .drop .content form .input {
    position: relative;
    width: 225px;
    box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.1),
    inset -2px -5px 10px rgba(255, 255, 255, 1),
    15px 15px 10px rgba(0, 0, 0, 0.05),
    15px 10px 15px rgba(0, 0, 0, 0.025);
    border-radius: 25px;
}

.container .drop .content form .input::before{
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 65%;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px 15px;
}

.container .drop .content form .input input{
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-size: 1em;
    padding: 10px 15px;
}

.container .drop .content form .input input[type="submit"] {
    color: #fff;
    text-transform: uppercase;
    font-size: 1em;
    cursor: pointer;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.container .drop .content form .input:last-child{
    width: 120px;
    background: #3a86ff;
    box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.1),
    15px 15px 10px rgba(0, 0, 0, 0.05),
    15px 10px 15px rgba(0, 0, 0, 0.025);
    transition: 0.5s;
}

.container .drop .content form .input:last-child:hover {
    width: 150px;
}

.btn {
    position: absolute;
    right: -120px;
    bottom: 0;
    width: 120px;
    height: 120px;
    background: #00b4d8;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    line-height: 2.2em;
    letter-spacing: 0.01em;
    font-size: 0.8em;
    transition: 0.25s;
    text-align: center;
    box-shadow: inset 10px 10px 10px rgba(0, 180, 216, 0.05),
    15px 25px 10px rgba(0, 180, 216, 0.1),
    15px 20px 20px rgba(0, 180, 216, 0.1),
    inset -10px -10px 15px rgba(255, 255, 255, 0.5);
    border-radius: 44% 56% 65% 35% / 57% 58% 42% 43%;
}

.btn::before{
    content: '';
    position: absolute;
    top: 15px;
    left: 30px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    opacity: 0.45;
}

.btn.signup {
    bottom: 150px;
    right: -140px;
    width: 80px;
    height: 80px;
    border-radius: 49% 51% 52% 48% / 63% 59% 41% 37%;
    background: #f77f01;
    box-shadow: inset 10px 10px 10px rgba(247, 127, 0, 0.05),
    15px 25px 10px rgba(247, 127, 0, 0.1),
    15px 20px 20px rgba(247, 127, 0, 0.1),
    inset -10px -10px 15px rgba(255, 255, 255, 0.5);
}

.btn.signup::before{
    left: 20px;
    width: 15px;
    height: 15px;
}

.btn:hover {
    border-radius: 50%;
}

Consigliato

Un codice di staticbug455

Esempio HTML CSS della carta UNO

Produzione di acciaio, industria metallurgica | Iron and Steel Inc.

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS