Animated Login Form Using HTML & CSS | web-Development tutorial for beginners.

September 18, 2020
Read
Animated Login Form Using HTML and CSS | Web-Development tutorial for beginners.

 Project Preview:



Images Required.

Wave.png:

Other are SVG images so download it from the below link:

avatar.svg





mobile.svg






Code:

index.html

The Styling(CSS) for our Webpage is done in the HTML file itself instead of creating an extra CSS file. 

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

<head>
    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" 
   rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" 
    rel="stylesheet">
    <link href="path/to/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Kufam
    :wght@800&display=swap" rel="stylesheet">


    <title>Login Form- Shubham Sagar Portfolio.</title>
    <style>
        body {
            background: url(wave.png);
            background-repeat: no-repeat;
            background-size: 600px 600px;
        }

        .bg {
            width: 600px;
            height: 500px;
        }

        .avatar {
            width: 110px;
            height: 110px;
            position: absolute;
            top: 10%;
            left: 68%;
        }

        h2 {
            position: absolute;
            top: 25%;
            left: 65.2%;
            font-family: 'Fredoka One', cursive;
            font-size: 35px;

        }

        input {
            font-family: 'Fredoka One', cursive;
            font-family: 'Kufam', cursive;
            font-size: 13px;
        }

        .user {
            position: absolute;
            top: 44%;
            left: 64%;
            border: none;
            border-bottom: solid #645959;
            padding: 10px;
            width: 200px;
        }

        .pass {
            position: absolute;
            top: 54%;
            left: 64%;
            border: none;
            border-bottom: solid #645959;
            padding: 10px;
            width: 200px;
        }

        .for {
            position: absolute;
            top: 60%;
            left: 74.2%;
            font-size: 12px;
            font-family: 'Fredoka One', cursive;
            font-family: 'Kufam', cursive;

        }

        button {
            position: absolute;
            top: 70%;
            left: 64%;
            border: solid #71db16;
            border-radius: 30px;
            padding: 6px;
            width: 220px;
            background: #71db16;
            color: aliceblue;
            cursor: pointer;
            transition: .5s;
        }

        button:hover {
            -webkit-box-shadow: 0px 3px 10px 5px rgba(0, 0, 0, 0.86);
            -moz-box-shadow: 0px 3px 10px 5px rgba(0, 0, 0, 0.86);
            box-shadow: 0px 3px 10px 5px rgba(35, 116, 227, 0.86);
            font-weight: bold;
        }

        .for:hover {
            cursor: pointer;
            color: #1527b4;
        }
    </style>
</head>

<body>
    <div class="main">
        <img class="bg" src="bg.svg" alt="">
    </div>
    <div class="formup">
        <img class="avatar" src="avatar.svg">
        <h2>WELCOME</h2>


        <input class="user" type="" placeholder="Username">
        <input class="pass" type="password" placeholder="Password">

        <p class="for">Forgot Password?</p>
        <button>
            LOGIN
        </button>
    </div>

</body>
</html>



______________________________________________

THANK YOU.....

Article By:
Shubham Sagar
www.youtube.com/c/coveringtheworld
https://www.instagram.com/shubham.__.sagar
For Business Queries: sk0374391@gmail.com

Code Star, India        




Tags :

14 comments:

  1. Shubham SagarNovember 25, 2020 at 11:11 AM

    Wow amazing post

    ReplyDelete
  2. MindestJune 15, 2021 at 12:55 AM

    Thankyou for this wondrous post, I am glad I observed this website on yahoo. therap login

    ReplyDelete
    Replies
    1. Shubham SagarJune 18, 2021 at 8:19 AM

      Thanks for your review!
      Your appreciation inspires us to add more articles.

      Delete
  3. spark riderAugust 14, 2021 at 3:15 AM

    Thankyou for this wondrous post, I am glad I observed this website on yahoo. 토토커뮤니티

    ReplyDelete
  4. GORILLASeptember 16, 2021 at 4:53 PM

    I really like your writing style, great information, thankyou for posting. test bank nursing

    ReplyDelete
  5. Digital Marketing AgencyOctober 25, 2021 at 2:50 PM

    Thanks for a great post one sharing with us. Visit for digital marketing services from the best Digital Marketing Agency.

    ReplyDelete
  6. Dubai Website DesignMarch 3, 2022 at 3:50 PM

    I read your blog. I really appreciate your thoughts. Thanks for sharing this article with us. Looing forward for reading more... Web Design Companies Dubai

    ReplyDelete
  7. abdullahApril 7, 2022 at 2:53 PM

    We are truly thankful for your blog entry. You will discover a great deal of methodologies in the wake of going to your post. I was precisely scanning for. A debt of gratitude is in order for such post and please keep it up.  yonatan

    ReplyDelete
  8. muhammadaliMay 29, 2022 at 12:04 PM

    aol com login mail 2

    ReplyDelete
  9. June 17, 2022 at 3:15 PM

    Wow !! This is one of the best blog and also get best Web Design Sharjah at very affordable prices in Shatjah

    ReplyDelete
  10. stone cabinetJune 30, 2022 at 10:59 PM

    Our expert designers are dedicated to producing layouts that ensure your design is distinctive to our clients' liking as well as functional. We warmly invite you to browse our website or visit our freshly remodeled showroom to witness for yourself how Cabinet & Stone City can provide luxury without the cost!

    ReplyDelete
  11. trucking transportationJune 30, 2022 at 10:59 PM

    Maintaining the safest driving records on the road, our drivers are the company's most valuable assets and the reason for our growth and success.

    ReplyDelete
  12. joker purple jacketJune 30, 2022 at 11:00 PM

    Fame Jackets have so far served many of customers and thus we can claim to have customers wearing our jackets throughout the world. To make sure smooth and efficient shipping and delivery solutions Fame Jackets collaborate with the premium courier services working internationally.

    ReplyDelete
  13. callmebbAugust 13, 2022 at 3:22 PM

    guaranteed hosting plans are more qualified for specific sorts of sites. https://onohosting.com/

    ReplyDelete

Subscribe to: Post Comments ( Atom )
Powered by Blogger.