Scribd Logo
Upload

Welcome to Scribd!

  • DOCTYPE HTML

    Uploaded by

    mh9273702
    2 views1 page

    Original Title

    DOCTYPE html

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    2 views1 page

    DOCTYPE HTML

    Uploaded by

    mh9273702

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 1

    <!

    DOCTYPE html>
    <html lang="en">
    <head>
    <meta c harset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1. 0">
    <link href='https://unpkg. com/boxicons@2.1. 4/css/boxicons. min.c ss' rel='stylesheet'>
    <link rel="stylesheet" href="style. css">
    <title>L udiflex | L ogin & Registration</title>
    </head>
    <body>
    <div c lass="wrapper">
    <nav c lass="nav">
    <div c lass="nav-logo">
    <p>LOGO .</p>
    </div>
    <div c lass="nav-menu" id="navMenu">
    <ul>
    <li><a href="#" c lass="link ac tive">Home</a></li>
    <li><a href="#" c lass="link">Blog</a></li>
    <li><a href="#" c lass="link">Servic es</a></li>
    <li><a href="#" c lass="link">About</a></li>
    </ul>
    </div>
    <div c lass="nav-button">
    <button c lass="btn white-btn" id="loginBtn" onc lic k="login()">Sign In</button>
    <button c lass="btn" id="registerBtn" onc lic k="register()">Sign Up</button>
    </div>
    <div c lass="nav-menu-btn">
    <i c lass="bx bx-menu" onc lic k="myMenuFunction()"></i>
    </div>
    </nav>
    <!----------------------------- Form box ----------------------------------->
    <div c lass="form-box">
    <!------------------- login form -------------------------->
    <div c lass="login-container" id="login">
    <div c lass="top">
    <span>Don't have an account? <a href="#" onc lic k="register()">Sign Up</a></span>
    <header>L ogin</header>
    </div>
    <div c lass="input-box">
    <input type="text" c lass="input-field" plac eholder="Username or Email">
    <i c lass="bx bx-user"></i>
    </div>
    <div c lass="input-box">
    <input type="password"c lass="input-field" plac eholder="Password">
    <i c lass="bx bx-loc k-alt"></i>
    </div>
    <div c lass="input-box">
    <input type="submit"c lass="submit" value="Sign I n">
    </div>
    <div c lass="two-col">
    <div c lass="one">
    <input type="chec kbox" id="login-c hec k">
    <label for="login-c hec k"> Remember Me</label>
    </div>
    <div c lass="two">
    <label><a href="#">Forgot password?</a></label>
    </div>
    </div>
    </div>
    <!------------------- registration form -------------------------->
    <div c lass="register-container" id="register">
    <div c lass="top">
    <span>Have an account? <a href="#" onc lic k="login()">L ogin</a></span>
    <header>Sign Up</header>
    </div>
    <div c lass="two-forms">
    <div c lass="input-box">
    <input type="text" c lass="input-field" plac eholder="Firstname">
    <i c lass="bx bx-user"></i>
    </div>
    <div c lass="input-box">
    <input type="text" c lass="input-field" plac eholder="L astname">
    <i c lass="bx bx-user"></i>
    </div>
    </div>
    <div c lass="input-box">
    <input type="text" c lass="input-field" plac eholder="Email">
    <i c lass="bx bx-envelope"></i>
    </div>
    <div c lass="input-box">
    <input type="password"c lass="input-field" plac eholder="Password">
    <i c lass="bx bx-loc k-alt"></i>
    </div>
    <div c lass="input-box">
    <input type="submit"c lass="submit" value="Register">
    </div>
    <div c lass="two-col">
    <div c lass="one">
    <input type="chec kbox" id="register-c hec k">
    <label for="register-c hec k"> Remember Me</label>
    </div>
    <div c lass="two">
    <label><a href="#">Terms & conditions</a></label>
    </div>
    </div>
    </div>
    </div>
    </div>
    <sc ript>
    func ti on myMenuFunc tion() {
    var i = doc ument. getElementById("navMenu");
    if(i. className === "nav-menu") {
    i. className += " responsive";
    } else {
    i. className = "nav-menu";
    }
    }
    </sc ript>
    <sc ript>
    var a = doc ument.getElementByI d("loginBtn");
    var b = doc ument.getElementByI d("registerBtn");
    var x = doc ument.getElementByI d("login");
    var y = doc ument.getElementByI d("register");
    func ti on login() {
    x.style.left = "4px";
    y. style.right = "-520px";
    a.c lassName += " white-btn";
    b.c lassName = "btn";
    x.style.opac ity = 1;
    y. style.opac ity = 0;
    }
    func ti on register() {
    x.style.left = "-510px";
    y. style.right = "5px";
    a.c lassName = "btn";
    b.c lassName += " white-btn";
    x.style.opac ity = 0;
    y. style.opac ity = 1;
    }
    </sc ript>
    </body>
    </html>
    CSS Codes

    You might also like