Scribd Logo
Upload

Welcome to Scribd!

  • Sign Up

    Uploaded by

    Ali Mo
    34 views7 pages
    The document is a sign up form with fields for a user to enter their first name, last name, email, password, and re-enter password. It includes styling to layout the form and style input fields. There are also social media login options and a submit button to sign up.

    Original Description:

    Original Title

    sign up.txt

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document is a sign up form with fields for a user to enter their first name, last name, email, password, and re-enter password. It includes styling to layout the form and style input fields. There are also social media login options and a submit button to sign up.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    34 views7 pages

    Sign Up

    Uploaded by

    Ali Mo
    The document is a sign up form with fields for a user to enter their first name, last name, email, password, and re-enter password. It includes styling to layout the form and style input fields. There are also social media login options and a submit button to sign up.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    of 7

    <!

    DOCTYPE html>
    <html >

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-


    awesome/4.7.0/css/font-awesome.min.css">
    <head>
    <title>Sign up</title>
    <style >

    body{

    background-image: url(file:///E:/picc/18.png) ;

    background-repeat : no-repeat;
    background-position: right;
    background-attachment:fixed;
    background-size: 100%;
    background-color: black;

    * {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    }

    h1,h2,h3,h4,h5,h6 {
    margin: 0px;
    }

    input {
    outline: none;
    border:transparent;
    }

    button {
    outline: none !important;
    border: none;
    background: transparent;
    }
    .container-login100 {
    width: 100%;
    min-height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 15px;

    .wrap-login100 {
    width: 500px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;

    .login100-form {
    width: 100%;

    .login100-form-title {
    display: block;
    font-family: Poppins-Bold;
    font-size: 39px;
    color: #333333;
    line-height: 1.2;
    text-align: center;
    }

    .wrap-input100 {
    width: 100%;
    position: relative;
    border-bottom: solid #d9d9d9;

    .label-input100 {
    font-family:cursive;
    font-size: 14px;
    color: #333333;
    line-height: 1.5;
    padding-left: 7px;

    .input100 {
    color: #333333;
    line-height: 1.2;
    display: inline-grid;
    width: 100%;
    height: 55px;
    background: transparent;
    padding: 0 7px 0 43px;
    }

    .focus-input100::before {
    content: "";
    display: block;
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #7f7f7f;

    -moz-transition: all 0.4s;


    transition: all 0.4s;
    }

    .input100:focus + .focus-input100::before {
    width: 100%;
    }

    .has-val.input100 + .focus-input100::before {
    width: 100%;
    }

    .input100:focus + .focus-input100::after {
    color: #a64bf4;
    }

    .has-val.input100 + .focus-input100::after {
    color: #a64bf4;
    }

    .wrap-login100-form-btn {
    width: 55%;
    display: block;
    position: relative;
    z-index: 1;
    border-radius: 25px;
    overflow: hidden;
    margin: 0 auto;
    box-shadow: 0 5px 30px 0px rgba(3, 216, 222, 0.2);
    -moz-box-shadow: 0 5px 30px 0px rgba(3, 216, 222, 0.2);
    -webkit-box-shadow: 0 5px 30px 0px rgba(3, 216, 222, 0.2);
    -o-box-shadow: 0 5px 30px 0px rgba(3, 216, 222, 0.2);
    -ms-box-shadow: 0 5px 30px 0px rgba(3, 216, 222, 0.2);
    }

    .login100-form-bgbtn {
    position: absolute;
    z-index: -1;
    width: 300%;
    height: 100%;
    background: #a64bf4;
    background: -webkit-linear-gradient(right, #00dbde, #fc00ff, #00dbde, #fc00ff);
    background: -o-linear-gradient(right, #00dbde, #fc00ff, #00dbde, #fc00ff);
    background: -moz-linear-gradient(right, #00dbde, #fc00ff, #00dbde, #fc00ff);
    background: linear-gradient(right, #00dbde, #fc00ff, #00dbde, #fc00ff);
    top: 0;
    left: -100%;

    -webkit-transition: all 0.4s;


    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
    }

    .login100-form-btn {
    font-family: Poppins-Medium;
    font-size: 16px;
    color: #fff;
    line-height: 1.2;
    text-transform: uppercase;

    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    width: 100%;
    height: 50px;
    }

    .wrap-login100-form-btn:hover .login100-form-bgbtn {
    left: 0;
    }

    .login100-social-item {
    font-size: 25px;
    color: #fff;

    text-align: center;
    display:ruby-base;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 40px;
    border-radius: 50%;
    margin: 5px;
    }

    .login100-social-item:hover {
    color: #fff;
    background-color: #333333;
    }

    .wrap-login100 {
    padding-left: 15px;
    padding-right: 15px;
    }

    .flex-c-m {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    -ms-align-items: center;
    align-items: center;
    }

    .flex-c-t {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    -ms-align-items: flex-start;
    align-items: flex-start;
    }

    .flex-c-b {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    -ms-align-items: flex-end;
    align-items: flex-end;
    }

    </style>
    </head>
    <body>

    <div class="container-login100" style="background-image:


    url('images/bg-01.jpg');">
    <div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-54">
    <form class="login100-form validate-form">
    <span class="login100-form-title p-b-49">
    Sign Up
    </span>

    <div class="wrap-input100 validate-input m-b-23"


    data-validate = "First name is reauired">
    <span class="label-input100">First name</span>
    <input class="input100" type="text" name="First
    name" placeholder="Type your First name">
    <span class="focus-input100" data-
    symbol="&#xf206;"></span>
    </div>

    <div class="wrap-input100 validate-input" data-


    validate="Last name is required">
    <span class="label-input100">Last name</span>
    <input class="input100" type="text" name="pass"
    placeholder="Type your Last name">
    <span class="focus-input100" data-
    symbol="&#xf190;"></span>
    </div>

    <div class="wrap-input100 validate-input m-b-23"


    data-validate = "Email is reauired">
    <span class="label-input100">Email</span>
    <input class="input100" type="text"
    name="username" placeholder="Type your Email">
    <span class="focus-input100" data-
    symbol="&#xf206;"></span>
    </div>

    <div class="wrap-input100 validate-input" data-


    validate="Password is required">
    <span class="label-input100">Password</span>
    <input class="input100" type="password"
    name="pass" placeholder="Type your password">
    <span class="focus-input100" data-
    symbol="&#xf190;"></span>
    </div>
    <div class="wrap-input100 validate-input" data-
    validate="Password is required">
    <span class="label-input100">Re-Password</span>
    <input class="input100" type="password"
    name="pass" placeholder="Type your password">
    <span class="focus-input100" data-
    symbol="&#xf190;"></span>
    </div>
    <br>

    <div class="container-login100-form-btn">
    <div class="wrap-login100-form-btn">
    <div class="login100-form-bgbtn"></div>
    <button class="login100-form-btn">
    Sign Up

    </button>
    </div>
    </div>

    <div class="flex-c-m">
    <a href="#" class="login100-social-item bg1">
    <i class="fa fa-facebook"></i>
    </a>

    <a href="#" class="login100-social-item bg2">


    <i class="fa fa-twitter"></i>
    </a>

    <a href="#" class="login100-social-item bg3">


    <i class="fa fa-google"></i>
    </a>
    </div>

    </body>
    </html>

    You might also like