ads_header

Create Form Login Transparent HTML CSS




Hello guys, this tutorial I will create a login form with transparent style with the background, which consists of entering an email and password and the Sign In button. The login form is the initial display of an application that allows users to fill in a username and password to identify the validity of a user in a system.





Now, create a project folder and create the index.html and style.css files in it and include the user logo and image for the background. When finished, open index.html and enter the following code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Transparent Login Form</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="loginBox">
        <img src="user.png" class="user">
        <h2>Login</h2>
        <form>
            <p>Email</p>
            <input type="text" name="" placeholder="Enter Email">
            <p>Password</p>
            <input type="password" name="" placeholder="******">
            <input type="submit" name="" value="Sign In">
            <a href="#">Forget Password</a>
        </form>
    </div>
</body>
</html>

Next, open style.css and enter the following code

body{
    margin: 0;
    padding: 0;
    background: url(bg.jpg);
    background-size: cover;
    font-family: sans-serif;
}

.loginBox{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 350px;
    height: 420px;
    padding: 50px;
    border-radius: 10px;
    box-sizing: border-box;
    background: rgba(0,0,0,.5);
}

.user{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    top: calc(-100px/2);
    left: calc(50% - 50px);
}

h2{
    margin: 0;
    padding: 10px 0 20px;
    color: #efed40;
    text-align: center;
}

.loginBox p{
    margin: 0;
    padding: 0;
    font-weight: bold;
    color: #fff;
}

.loginBox input{
    width: 100%;
    margin-bottom: 20px;
}

.loginBox input[type="text"],
.loginBox input[type="password"]{
    border: none;
    border-bottom: 1px solid #fff;
    background: transparent;
    outline: none;
    height: 40px;
    color: #fff;
    font-size: 16px;
}

::placeholder{
    color: rgba(255,255,255,.5);
}

.loginBox input[type="submit"]{
    border: none;
    outline: none;
    height: 40px;
    color: #fff;
    font-size: 16px;
    background: #ff267e;
    cursor: pointer;
    border-radius: 20px;
}

.loginBox input[type="submit"]:hover{
    background: #efed40;
    color: #262626;
}

.loginBox a{
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
}

Save all files and run index.html

62 comments:

  1. I really like your writing style, great information, thankyou for posting. therap sign in

    ReplyDelete
  2. Your work is truly appreciated round the clock and the globe. It is incredibly a comprehensive and helpful blog. here

    ReplyDelete
  3. Wonderful blog! I found it while surfing around on Yahoo News. Do you have any suggestions on how to get listed in Yahoo News? I’ve been trying for a while but I never seem to get there! Appreciate it. 토토커뮤니티

    ReplyDelete
  4. I found that site very usefull and this survey is very cirious, I ' ve never seen a blog that demand a survey for this actions, very curious... 토토사이트

    ReplyDelete
  5. RSJ is at the top of our game when it comes to tax-minimization strategies for asset growth, protection and transfer. We have always known that something was missing from traditional estate planning for high-net-worth families. find more

    ReplyDelete
  6. Thanks For sharing this Superb article.I use this Article to show my assignment in college.it is useful For me Great Work. togel hongkong

    ReplyDelete
  7. Good artcile, but it would be better if in future you can share more about this subject. Keep posting. 대전건마

    ReplyDelete
  8. You have outdone yourself this time. It is probably the best, most short step by step guide that I have ever seen. 대전건마

    ReplyDelete
  9. This article is an appealing wealth of useful informative that is interesting and well-written. I commend your hard work on this and thank you for this information. I know it very well that if anyone visits your blog, then he/she will surely revisit it again. ฉีดฟิลเลอร์แก้มตอบ ที่ไหนดี

    ReplyDelete
  10. nice post, keep up with this interesting work. It really is good to know that this topic is being covered also on this web site so cheers for taking time to discuss this! 토토사이트

    ReplyDelete
  11. Excellent to be visiting your blog again, it has been months for me. Rightly, this article that I've been served for therefore long. I want this article to finish my assignment within the faculty, and it has the same topic together with your article. Thanks for the ton of valuable help, nice share. 온라인바둑이

    ReplyDelete
  12. Merely a smiling visitant here to share the love (:, btw outstanding style. test bank nursing

    ReplyDelete
  13. It proved to be Very helpful to me and I am sure to all the commentators here! 토토커뮤니티

    ReplyDelete
  14. Great articles and great layout. Your blog post deserves all of the positive feedback it’s been getting. 먹튀검증

    ReplyDelete
  15. Nice post. I was checking constantly this blog and I’m impressed! Extremely useful info specially the last part I care for such information a lot. I was seeking this certain info for a long time. Thank you and good luck. 먹튀폴리스

    ReplyDelete
  16. I just couldn't leave your website before telling you that I truly enjoyed the top quality info you present to your visitors? Will be back again frequently to check up on new posts. 먹튀검증

    ReplyDelete
  17. An interesting dialogue is price comment. I feel that it is best to write more on this matter, it may not be a taboo topic however usually individuals are not enough to talk on such topics. To the next. Cheers. 대전1인샵

    ReplyDelete
  18. This article gives the light in which we can observe the reality. This is very nice one and gives indepth information. Thanks for this nice article. 바둑이

    ReplyDelete
  19. This article gives the light in which we can observe the reality. This is very nice one and gives indepth information. Thanks for this nice article. 바둑이게임

    ReplyDelete
  20. I propose merely very good along with reputable data, consequently visualize it: 토토사이트

    ReplyDelete
  21. Thank you again for all the knowledge you distribute,Good post. I was very interested in the article, it's quite inspiring I should admit. I like visiting you site since I always come across interesting articles like this one.Great Job, I greatly appreciate that.Do Keep sharing! Regards, 토토사이트 인디벳

    ReplyDelete
  22. This article gives the light in which we can observe the reality. This is very nice one and gives indepth information. Thanks for this nice article. dnp forum

    ReplyDelete
  23. I wanted to thank you for this great read!! I definitely enjoying every little bit of it I have you bookmarked to check out new stuff you post. java assignment help

    ReplyDelete
  24. What a fantabulous post this has been. Never seen this kind of useful post. I am grateful to you and expect more number of posts like these. Thank you very much. https://densipaper.com/jeff-lerner-reviews-the-greatest-training-ever/

    ReplyDelete
  25. Took me time to read all the comments, but I really enjoyed the article. It proved to be Very helpful to me and I am sure to all the commenters here! It’s always nice when you can not only be informed, but also entertained! detective privado madrid

    ReplyDelete
  26. Thanks For sharing this Superb article.I use this Article to show my assignment in college.it is useful For me Great Work. detectives privados en barcelona

    ReplyDelete
  27. Great job for publishing such a beneficial web site. Your web log isn’t only useful but it is additionally really creative too. There tend to be not many people who can certainly write not so simple posts that artistically. Continue the nice writing 우리카지노

    ReplyDelete
  28. Took me time to read all the comments, but I really enjoyed the article. It proved to be Very helpful to me and I am sure to all the commenters here! It’s always nice when you can not only be informed, but also entertained! 토토사이트

    ReplyDelete
  29. Great article Lot's of information to Read...Great Man Keep Posting and update to People..Thanks Kennisvragen sport

    ReplyDelete
  30. It was wondering if I could use this write-up on my other website, I will link it back to your website though.Great Thanks. 토토사이트

    ReplyDelete
  31. Attractive, post. I just stumbled upon your weblog and wanted to say that I have liked browsing your blog posts. After all, I will surely subscribe to your feed, and I hope you will write again soon! 토토사이트

    ReplyDelete
  32. Interesting post. I Have Been wondering about this issue, so thanks for posting. Pretty cool post.It 's really very nice and Useful post.Thanks 토토사이트

    ReplyDelete
  33. Thankyou for this wondrous post, I am glad I observed this website on yahoo. 토토사이트

    ReplyDelete
  34. Your content is nothing short of bright in many forms. I think this is friendly and eye-opening material. I have gotten so many ideas from your blog. Thank you so much. Nagaland State Lottery

    ReplyDelete
  35. What a thrilling post. It is extremely chock-full of useful information. Thanks for such a great info. 먹튀검증

    ReplyDelete
  36. I think this is a really good article. You make this information interesting and engaging. You give readers a lot to think about and I appreciate that kind of writing. 오피아트

    ReplyDelete
  37. Nice to be visiting your blog again, it has been months for me. Well this article that i've been waited for so long. I need this article to complete my assignment in the college, and it has same topic with your article. Thanks, great share. 먹튀검증사이트

    ReplyDelete
  38. I read a article under the same title some time ago, but this articles quality is much, much better. How you do this.. 먹튀폴리스

    ReplyDelete
  39. Tahir termite service – TTS® is the largest independently owned pest control company in Lahore, Pakistan.Termite Control Lahore

    ReplyDelete
  40. Uk49s Results today teatime results in 2021. Latest 49s lunchtime and UK teatime results, previous UK49 results and UK 49s teatime result for South Africa. View today's UK49s Result, as well as the 2021 historical results from all draws that have taken place in the last 30 days.

    ReplyDelete
  41. We have the best and premium service portfolio that makes us the right and best choice for you.Pest control Service in Lahore

    ReplyDelete
  42. Sex Videos - Bad credit loans no guarantor no credit check - Bad Credit History offers guaranteed loans for people with very bad credit from £500 up to £75000 with no guarantor, credit check, broker and no fees.

    ReplyDelete
  43. Check Latest Teatime Results Which announced Recently - check 49s Lunchtime Results 2022 - Draws for South Africa

    ReplyDelete
  44. Kbc winner list 2022 As you mindful, all Sims could be now enlisted inside the KBC Lottery Winner Game showcase in 2022. So the significant obstruction for the clients is to find their lottery range inside the rundown of champs.Kbc lottery winner 2022

    ReplyDelete
  45. If you are looking for a unique scotland couriers services in uk delivery, we can do it for you. You dont need to sign up for a long-term agreement. ​​we understand that emergencies dont happen every day. Simply request a free quote and well get back to you within minutes. scotland couriers services in uk

    ReplyDelete
  46. Medical Products Simplibuy is your online one-stop resource for buying medical supplies, diagnostic equipment and accessories.Medical Equipment

    ReplyDelete
  47. BubzyRecruitment consultants have unparalleled recruiting expertise and an in-depth knowledge of the UK construction jobs market.construction recruitment agencies Carmarthenshire

    ReplyDelete
  48. At BubzyPainting, we've qualified painters and decorators with over 30 years of experience to provide quality painting and decoration services.Painting Services in North Somerset

    ReplyDelete
  49. Ultimately, that decision is down to you. Based on the information above, you can look at your goods and deliveries.delivery near abbotts ann

    ReplyDelete
  50. Water Heater Installation In Dubai Alternatively, learn more about how simple annual maintenance contracts can save you time, stress and money on your Home Maintenance Services Company in Dubai.Tiling Work In Dubai

    ReplyDelete
  51. Thanks for sharing your blog. In this Blog you have given an Informative Information which are very important for users.

    Shared Hosting Providers

    Dedicated Servers Unmanagedr

    Unmanaged Dedicated Server Hosting

    Game Server Rental

    ReplyDelete
  52. I am really enjoying reading your well written articles. It looks like you spend a lot of effort and time on your blog. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work. att net login yahoo

    ReplyDelete
  53. Thanks for sharing your blog. In this Blog you have given an Informative Information which are very important for users.

    Shared Hosting Plans

    Managed Server Hosting

    Unmanaged Dedicated Server Hosting

    Minecraft Server Hosting

    ReplyDelete
  54. Actually,there are many more responsibilities that a web hosting company needs to play on a day to day basis.https://onohosting.com/

    ReplyDelete
  55. Thanks for sharing your blog. In this Blog you have given an Informative Information which are very important for users.

    Shared server hosting services

    Best Managed Server Hosting

    Unmanaged Servers Companies

    Game server rental

    ReplyDelete


  56. Thanks for sharing your blog. In this Blog you have given an Informative Information which are very important for users.

    Best Shared Server Hosting

    Managed Server Hosting

    Unmanaged Dedicated Server Hosting

    Minecraft Server Hosting

    ReplyDelete
  57. I have read your article couple of times because your views are on my own for the most part. It is great content for every reader. 4 letter domains for sale

    ReplyDelete
  58. Daily Lotto You have selected to view Daily Lotto results. Historical Results. Daily Lotto Results for draw id 1198. Daily Lotto Winning Numbers.

    ReplyDelete

Powered by Blogger.