Showing posts with label css. Show all posts
Showing posts with label css. Show all posts

Saturday, January 23, 2021

Login Form Eaglesoft Web development class.

 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome to Eaglesoft</title>
    <style>
        *{
            margin0px;
            padding0px;
        }
        #main
        {
            background-imageurl("https://wallpapercave.com/wp/u9AVLry.jpg");
            background-imageurl("https://i.pinimg.com/originals/20/c4/ed/20c4ed904c96d955c7baed21e22d47e0.jpg");
            background-sizecover;
            width100vw;
            height100vh;
            position:absolute;
        }
        #login
        {
            background-colorblanchedalmond;
            border-radius20px;
            width20vw;
            height50vh;
            margin-top200px;
            margin-left:530px;
        }
        #h1
        {
            background-colorwhite;
            background-imageurl("https://c2.staticflickr.com/2/1544/24128500842_485dea1a4c_o.png");
            background-size:cover;
            border-radius90px;
            width100px;
            height100px;
            position:absolute;
            margin-top5px;
            margin-left85px;
        }
        #username
        {
            margin-top120px;
            margin-left45px;
            margincenter;
            padding5px;
            border-radius30px;
        }
        #password
        {
            margin-top20px;
            margin-left45px;
            margincenter;
            padding5px;
            border-radius30px;
        }
        #submit
        {
            background-color:blue;
            color:white;
            font-weightbolder;
            margin-top10px;
            margin-left90px;
            margincenter;
            padding5px;
            border-radius30px;
            width90px;
        }
        #forget
        {
            position:absolute;
            margin-left50px;
            margin-top20px;
            color:blue;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="login">
            <div id="h1"></div>
            <form>
            <input type="text" id="username" name="username" placeholder="Username" aligin="center">
            <input type="password" id="password" name="password" placeholder="password">
            <input type="submit" id="submit" name="submit" value="Login">
            <br>
            <i id="forget">Forget Password? Regiser</i>
          </form>
        </div>
    </div>
</body>
</html>

Friday, January 15, 2021

Login Form with Eaglesoft Programmers


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *
        {
            margin0px;
            padding0px;
        }
        body
        {
            background-image
            url("https://cutt.ly/7jRFJGq");
            background-repeatno-repeat;
            background-size:cover;        }

        #main
        {
            background-colorrgb(249224);
            border-radius50px 5px 50px 5px;
            box-shadow:4px 4px 8px rgb(978181);
            width20vw;
            height50vh;
            marginauto;
            margin-top100px;
            margin-left650px;
            position:absolute;
        }
        #main:hover
        {
            box-shadow:6px 6px 10px rgb(978181);
        }
        #loginnow
        {
            color:rgb(23822654);
            font-weightbold;
            font-size28px;
            text-shadowgreenyellow;
            text-aligncenter;
            margin-top60px;
            text-shadow2px 2px rgb(2365757);
        }
        .input
        {
            margin-left80px;
            margin-top:4px;
            width180px;
            height20px;
            colorwhite;
        }
        #button
        {
            background-color:yellow;
            margin-left135px;
            margin-top10px;
            width60px;
            height30px;
            color:brown;
            font-weightbold;
            border-radius5px;
        }
        #button:hover
        {
            box-shadow1px 1px 1px 2px white;
            width62px;
            height32px;
        }
    </style>
</head>
<body>
    <div id="main">
        <H3 id="loginnow">Login Now</H3>
        <b class="input">User Name</b>
        <input type="text" placeholder="Username" class="input">
        <b class="input">Password</b>
        <input type="password" placeholder="Password" class="input">
        <br>
        <button id="button">Login</button>
    </div>
</body>
</html>

Thursday, January 14, 2021

Signup form for restaurant management system

 To run this from on your system perform the following steps carefully:

1.Copy CSS code and save in a file with the name of eaglesoft.css  ;

2.Copy HTML code and save in a file with the name of index.html ;

3.For view open your index file in you favourite web browser ;


CSS CODE:

body

{

    margin0;

    padding0;

    background#efefef;

    font-size16px;

    color#777;

    font-familysans-serif;

    font-weight300;

}



#login-box

{

    positionrelative;

    margin5% auto;

    height400px;

    width600px;

    background#fff;

    box-shadow0 2px 4px rgba(0000.6);

}



footer {

    background-color#555;

    color#fff;

    font-size14px;

    bottom0;

    positionfixed;

    left0;

    right0;

    text-aligncenter;

    z-index999;

}

footer p {

    margin10px 0;

    font-family'Lucida Sans''Lucida Sans Regular''Lucida  Grande''Lucida Sans Unicode', Geneva, Verdanasans-serif;

}

footer a {

    color#ff6f61;

    text-decorationnone;

  margin-right:5px;



}



.left-box

{

    positionabsolute;

    top0;

    left0;

    box-sizingborder-box;

    padding40px;

    width300px;

    height400px;    

}



h1

{

    margin0 0 20px 0;

    font-weight300;

    font-size28px;

}



input[type="text"],

input[type="password"]

{

    displayblock;

    box-sizingborder-box;

    margin-bottom20px;

    padding4px;

    width220px;

    height32px;

    bordernone;

    outlinenone;

    border-bottom1px solid #aaa;

    font-familysans-serif;

    font-weight400;

    font-size15px;

    transition0.2s ease;

}



input[type="submit"]

{

    margin-bottom28px;

    width120px;

    height32px;

    background#ff0080;

    bordernone;

    border-radius2px;

    color#fff;

    font-familysans-serif;

    font-weight500;

    text-transformuppercase;

    transition0.2s ease;

    cursorpointer;

    

}



input[type="submit"]:hover,

input[type="submit"]:focus

{

    background#ff0000;

    transition0.2s ease;

}



.right-box

{

    positionabsolute;

    top0;

    right0;

    box-sizingborder-box;

    padding40px;

    width300px;

    height400px;

    background-imageurl(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf9rU1c1b16h1kGfop1zYDGgE6KPiSVGG9rAzDBwcnOTMbQ_kN9n0_VrmpPee9hy7jLFUJvNO0HnSnQ_EJEN4f-ogcuDUvDvRrtdKB88pu4L-6Pd9SWnmDmTZaLHOkkjx0wCHN35MuNSCO/s2048/image1.jpeg);


    background-sizecover;

    background-positioncenter;

}



.or

{

    positionabsolute;

    top180px;

    left280px;

    width40px;

    height40px;

    background#efefef;

    border-radius50%;

    box-shadow0 2px 4px rgba(0000.6);

    line-height40px;

    text-aligncenter;

}



.right-box .signinwith

{

    displayblock;

    margin-bottom40px;

    font-size28px;

    color#fff;

    text-aligncenter;

    text-shadow0 2px 4px rgba(0000.6);

}





button.social

{

    margin-bottom20px;

    width220px;

    height36px;

    bordernone;

    border-radius2px;

    color#fff;

    font-familysans-serif;

    font-weight500;

    transition0.2s ease;

    cursorpointer;

}



.facebook

{

    background#32508e;

}

.twitter

{

    background#55acee;

}

.google

{

    background#dd4b39;

}

HTML CODE:




 

<html>

<head>

<title>Signup Now</title>   

    <link rel="stylesheet" type="text/css" href="eaglesoft.css">

</head>

<body style="background-image: url(https://www.discoverlosangeles.com/sites/default/files/styles/hero/public/images/2019-01/lower-patio.jpg?itok=KGYP49fO)">

 



    <div id="login-box">

      <div class="left-box">

        <h1> Sign Up</h1>

          

          <input type="text" name="username" placeholder="Username"/>

          <input type="text" name="email" placeholder="Email"/>

          <input type="password" name="password" placeholder="Password"/>

        

          <input type="password" name="password2" placeholder="Retype password"/>

        

          <input type="submit" name="signup-button" value="Sign Up"/>

        

        </div>

        <div class="right-box">

          <span class="signinwith">Sign in with<br/>Social Network     </span>

        

        <button class="social facebook">Log in with Facebook</button>    

        <button class="social twitter">Log in with Twitter</button> 

        <button class="social google">Log in with Google+</button> 

            

        

        </div>

        <div class="or">OR</div>

    </div>

    <footer>

    <p>

    Developed by

    <a target="_blank" href="http://eaglesoft.com.pk/">Eaglesoft</a>

      </p>



</footer>

</body>    

</html>