Simple Login page with HTML and CSS
Add CSS to your css file
body {
padding-bottom: 1000;
background-color: #B2DFDB;
width: 600px;
}
.main-container {
flex-direction: column;
display: flex;
align-items: center;
justify-content: center;
}
.semi-container {
margin-top: 90px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-bottom: 30px;
width: 320px;
height: 500px;
background-color: white;
border-radius: 10px;
border: 1px solid #80CBC4;
}
.text1 {
display: flex;
flex-direction: column;
align-items: center;
background-color: #FF4081;
width: 320px;
height: 150px;
border-radius: 3px;
color: white;
padding-top: 50px;
padding-bottom: 30px;
}
.login-info {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 15px;
font-size: 12px;
margin-top: 20px;
}
.social-media {
display: flex;
margin-top: 10px;
}
.sm1 {
width: 40px;
height: 40px;
border-radius: 5px;
}
.user-pass {
margin-bottom: 15px;
width: 250px;
height: 45px;
border: 1px solid #E0F2F1;
font-family: Roboto, Arial;
font-size: 15px;
border-radius: 5px;
background-color: #FAFAFA;
}
.user-pass::placeholder {
font-size: 15px;
color: #80CBC4;
padding-left: 50px;
}
.button1 {
width: 250px;
height: 40px;
background-color: #80CBC4;
border: 0.5px solid #D7CCC8;
font-size: 15px;
font-family: Roboto, Arial;
color: white;
font-weight: bold;
border-radius: 5px;
}
.button2 {
margin-top: 10px;
width: 190px;
border-bottom-width: 2px;
border-top: none;
border-left: none;
border-right: none;
background-color: white;
color: #6A1B9A;
font-size: 14px;
border-bottom-color: black;
}
img {
height: 15px;
}
.user-login{
position: relative;
}
.user-icon1 {
position: absolute;
top: 15px;
left: 10px;
}
.keypass {
position: relative;
}
.key-icon {
position: absolute;
top: 15px;
left: 10px;
}
.media-pic {
height: 25px;
}
.pass-text {
color: red;
font-size: 12px;
}
.header{
width: 100%;
position: fixed;
top: 0;
left: 0;
display: flex;
flex-direction: rows;
height: 50px;
background-color: white;
align-items: center;
justify-content: space-between;
z-index: 99;
}
.navbar {
display: flex;
align-items: center;
justify-content: center;
color: #FF4081;
font-family: Roboto, Arial;
margin: 10px;
font-weight: bold;
font-size: 14px;
width: 80px;
height: 40px;
background-color: white;
}
.navbar:hover {
opacity: 0.5;
background-color: #B2DFDB;
color: white;
}
#content {
justify-content: center;
width: 600px;
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 350px;
background-color: white;
margin-top: 30px;
}
.icons2 {
margin-right: 30px;
height: 30px;
}
.preview-img {
height: 100%;
width: 100%;
}
.content1 {
margin-top: 30px;
width: 550px;
height: 350px;
margin-bottom: 50px;
}
.content2 {
width: 650px;
height: 350px;
margin-top: 200px;
}
.h1-text {
font-family: Roboto, Arial;
font-weight: bold;
font-size: 16px;
color: #00897B;
}
.post-title {
color: #00897B;
font-size: 24px;
font-family: Roboto, Arial;
font-weight: bold;
text-align: center;
}
.post-page {
color: black;
font-size: 20px;
font-family: Roboto, Arial;
}
.tech-text {
color: #FF4081;
font-style: 0;
}
.header2 {
display: flex;
flex-direction: rows;
align-items: center;
width: 100px;
margin-left: 20px;
}
.header3 {
margin-right: 50px;
display: flex;
flex-direction: rows;
align-items: center;
justify-content: center;
width: 150px;
}
.button3 {
width: 250px;
height: 40px;
font-size: 16px;
font-weight: bold;
border-radius: 5px;
border: 1px solid #F8BBD0;
color: #EC407A;
background-color: white;
margin-right: 20px;
}
.button4 {
width: 250px;
height: 40px;
font-size: 16px;
font-weight: bold;
border-radius: 5px;
border: 1px solid #F8BBD0;
color: white;
background-color: #EC407A;
}
.footer {
margin-top: 250px;
}
Add this to the HTML file
</style>
</head>
<body>
<div class="header">
<div class="header2"><img class="icons2" src="img/ham.png">
<h1 class="h1-text">SHOL<span class="tech-text">TECH</span></h1>
</div>
<div class="header3">
<div class="navbar">Courses</div>
<div class="navbar">Register</div>
<div class="navbar">Contact</div>
</div>
</div>
<div class="main-container">
<div class="semi-container">
<div class="text1">
<h2>Login</h2>
<p style="font-family: courier">Powered by Sholpay</p>
</div>
<div class="login-info">
<h2 style="color: #FF4081">Log In</h2>
<div class="user-login">
<input class="user-pass" type="username" placeholder="username">
<div class="user-icon1"><img src="img/user.png"></div>
<div class="keypass"><input class="user-pass" type="password" placeholder="password">
<div class="key-icon"><img src="img/key.png"></div>
</div>
</div>
<button class="button1">Log In</button>
</div>
<div class="social-media">
<div class="sm1"><img class="media-pic" src="smedia/facebook1.png"></div>
<div class="sm1"><img class="media-pic" src="smedia/Instagram1.png"></div>
<div class="sm1"><img class="media-pic" src="smedia/Linkin1.png"></div>
<div class="sm1"><img class="media-pic" src="smedia/gmail1.png"></div>
<div class="sm1"><img class="media-pic" src="smedia/WhatsApp1.png"></div>
</div>
<button class="button2">Forget Password...<span class="pass-text">Click Here</span></button>
</div>
</div>
<div id="content">
<div class="content1">
<p class="post-title">Become a Freelancer with our free toturial and learn basic HTML and CSS skills</p>
<img class="preview-img" src="preview/2005.png">
<p class="post-page">Become a Freelancer with our free toturial and learn basic skillsLogin to become a Freelancer with our free toturial and learn basic skillsLogin to become a Freelancer with our free toturial and learn basic skills</p>
<button class="button3">Read More</button><button class="button4">Subscribe</button>
</div>
<div class="footer">
<div>
<p>Contact Us</p>
</div>
</div>
Comments
Post a Comment