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
nice
ReplyDeleteI really like your writing style, great information, thankyou for posting. therap sign in
ReplyDeleteYour work is truly appreciated round the clock and the globe. It is incredibly a comprehensive and helpful blog. here
ReplyDeleteWonderful 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. 토토커뮤니티
ReplyDeleteI 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... 토토사이트
ReplyDeleteRSJ 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
ReplyDeleteThanks For sharing this Superb article.I use this Article to show my assignment in college.it is useful For me Great Work. togel hongkong
ReplyDeleteGood artcile, but it would be better if in future you can share more about this subject. Keep posting. 대전건마
ReplyDeleteYou have outdone yourself this time. It is probably the best, most short step by step guide that I have ever seen. 대전건마
ReplyDeleteThis 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. ฉีดฟิลเลอร์แก้มตอบ ที่ไหนดี
ReplyDeletenice 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! 토토사이트
ReplyDeleteExcellent 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. 온라인바둑이
ReplyDeleteMerely a smiling visitant here to share the love (:, btw outstanding style. test bank nursing
ReplyDeleteIt proved to be Very helpful to me and I am sure to all the commentators here! 토토커뮤니티
ReplyDeleteGreat articles and great layout. Your blog post deserves all of the positive feedback it’s been getting. 먹튀검증
ReplyDeleteNice 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. 먹튀폴리스
ReplyDeleteI 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. 먹튀검증
ReplyDeleteAn 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인샵
ReplyDeleteThis 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. 바둑이
ReplyDeleteThis 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. 바둑이게임
ReplyDeleteI propose merely very good along with reputable data, consequently visualize it: 토토사이트
ReplyDeleteThank 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, 토토사이트 인디벳
ReplyDeleteThis 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
ReplyDeleteI 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
ReplyDeleteWhat 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/
ReplyDeleteTook 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
ReplyDeleteThanks 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
ReplyDeleteGreat 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 우리카지노
ReplyDeleteTook 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! 토토사이트
ReplyDeleteGreat article Lot's of information to Read...Great Man Keep Posting and update to People..Thanks Kennisvragen sport
ReplyDeleteIt was wondering if I could use this write-up on my other website, I will link it back to your website though.Great Thanks. 토토사이트
ReplyDeleteAttractive, 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! 토토사이트
ReplyDeleteInteresting post. I Have Been wondering about this issue, so thanks for posting. Pretty cool post.It 's really very nice and Useful post.Thanks 토토사이트
ReplyDeleteThankyou for this wondrous post, I am glad I observed this website on yahoo. 토토사이트
ReplyDeleteYour 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
ReplyDeleteWhat a thrilling post. It is extremely chock-full of useful information. Thanks for such a great info. 먹튀검증
ReplyDeleteI 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. 오피아트
ReplyDeleteNice 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. 먹튀검증사이트
ReplyDeleteI read a article under the same title some time ago, but this articles quality is much, much better. How you do this.. 먹튀폴리스
ReplyDeleteTahir termite service – TTS® is the largest independently owned pest control company in Lahore, Pakistan.Termite Control Lahore
ReplyDeleteUk49s 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.
ReplyDeleteWe have the best and premium service portfolio that makes us the right and best choice for you.Pest control Service in Lahore
ReplyDeleteSex 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.
ReplyDeleteLahore sex
ReplyDeleteCheck Latest Teatime Results Which announced Recently - check 49s Lunchtime Results 2022 - Draws for South Africa
ReplyDeleteKbc 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
ReplyDeleteIf 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
ReplyDeleteMedical Products Simplibuy is your online one-stop resource for buying medical supplies, diagnostic equipment and accessories.Medical Equipment
ReplyDeleteBubzyRecruitment consultants have unparalleled recruiting expertise and an in-depth knowledge of the UK construction jobs market.construction recruitment agencies Carmarthenshire
ReplyDeleteAt 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
ReplyDeleteUltimately, that decision is down to you. Based on the information above, you can look at your goods and deliveries.delivery near abbotts ann
ReplyDeleteWater 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
ReplyDeletecom samsung android app galaxyfinder
ReplyDeleteDaily Lotto You have selected to view Daily Lotto results. Historical Results. Daily Lotto Results for draw id 1198. Daily Lotto Winning Numbers.
ReplyDeleteHello, If you want to know about the spacebar clicker and how to boost your Spacebar click Speed then you can go with Spacebar Clicker or Spacebar Counter.here you will get the same successful techniques to improve your spacebar clicking speed.
ReplyDelete