How to create a login page with the intro for your website and blog with simple HTML, CSS, and javascript .
To create a login page for your website and blog using simple HTML, CSS, and JavaScript, follow these steps:
1. Create a new HTML file and name it "login.html".
2. In the head section, include a title for your page and any relevant meta tags.
3. Create a container to hold your login form. You can use HTML forms for this purpose.
4. Within the form, create input fields for the user's email or username and password. You can use HTML input tags for this purpose.
5. Add a submit button to the form, which will be used to submit the login information. You can use an HTML button tag for this purpose.
6. Use CSS to style the form and its elements, making sure to use consistent colors, fonts, and spacing throughout the page.
7. Add JavaScript code to validate the user's login credentials. This can be done using event listeners and if/else statements.
8. If the login credentials are valid, redirect the user to the intro page for your website and blog. You can use JavaScript window.location.href to achieve this.
To create an intro page for your website and blog, follow these additional steps:
9. Create a new HTML file and name it "intro.html".
10. In the head section, include a title for your page and any relevant meta tags.
11. Create a header section to display the name and logo of your website or blog.
12. Add navigation links to your header section to make it easy for users to move around your site.
13. Create a main section to display the main content of your intro page. You can use HTML headings, paragraphs, and images for this purpose.
14. Use CSS to style your header and main sections, making sure to use consistent colors, fonts, and spacing throughout the page.
15. Finally, test your pages to make sure they look and function as expected on different devices and browsers.
By following these steps, you can create a login page and intro page for your website and blog using simple HTML, CSS, and JavaScript. Remember to focus on the user experience and make sure the pages are visually appealing and easy to use.
HTML CODE
<section class="main">
<div class="box-container">
<div class="box">
<div class="back_div">
</div>
<div class="content">
<h1 class="animate__animated animate__backInLeft">Welcome<span>To</span></h1>
<h2 class="animate__animated animate__backInLeft">Creative Networks</h2>
<p class="animate__animated animate__backInRight">Creative Networks Is A Computer
Institute In Tohana, Which Is Established In 2018. Creative Networks Provides
You Different Types Of Best Computer Courses And Web Design Service.</p>
<h3 class="animate__animated animate__zoomIn">
most popular programming<br> languages
</h3>
<div class="img">
<img src="html-5.png" class="animate__animated animate__backInLeft">
<img src="css-3.png" class="animate__animated animate__backInLeft">
<img src="java.png" class="animate__animated animate__backInLeft">
<img src="python.png" class="animate__animated animate__backInLeft"><br>
<img src="php.png" class="animate__animated animate__backInLeft">
<img src="wordpress.png" class="animate__animated animate__backInLeft">
<img src="sql-server.png" class="animate__animated animate__backInLeft">
</div>
</div>
<div class="form">
<h1>Log In</h1>
<center>
<form>
<ion-icon name="person-add"></ion-icon><input type="e-mail"
placeholder="Enter Your E-mail.."><br>
<hr>
<ion-icon name="lock-closed" class="lock"></ion-icon><input id="pass_log_id"
type="password" name="pass" placeholder="Enter Your password..">
<span toggle="#password-field"
class="fa fa-fw fa-eye field_icon toggle-password"></span>
<hr class="line">
</form>
<button><b>SUBMIT</b></button>
<div class="icon_div">
<ul>
<li><a href=""class="facebook"><ion-icon name="logo-facebook"></ion-icon></a></li>
<li><a href=""class="instagram"><ion-icon name="logo-instagram"></ion-icon></a></li>
<li><a href=""class="twitter"><ion-icon name="logo-twitter"></ion-icon></a></li>
<li><a href=""class="youtube"><ion-icon name="logo-youtube"></ion-icon></a></li>
</ul>
</div>
<hr class="icon_line">
<p><i>Copyright © 2022 Creative Networks Tohana - Authorized From NIELIT.</i></p>
</center>
</div>
</div>
</div>
</section>
</body>
</html>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<script>
$(document).on('click', '.toggle-password', function () {
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $("#pass_log_id");
input.attr('type') === 'password' ? input.attr('type', 'text') : input.attr('type', 'password')
});
</script>
CSS CODE
* {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
text-decoration: none;
text-transform: capitalize;
transition: .3s linear;
}
html {
font-size: 62.5%;
overflow-x: hidden;
scroll-behavior: smooth;
scroll-padding-top: 9rem;
}
html::-webkit-scrollbar {
width: .8rem;
}
html::-webkit-scrollbar {
background: transparent;
}
html::-webkit-scrollbar-thumb {
background: #eee;
border-radius: 4rem;
}
section {
padding: 4rem 2%;
}
.main .box-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
/*background: yellow;*/
}
.box-container .box {
width: 1000px;
height: 500px;
margin: auto;
display: inline-block;
border: 1px solid white;
overflow: hidden;
background: black;
}
.box-container .box .back_div {
width: 100%;
height: 100%;
background: url(img11.jpg);
background-size: cover;
animation: myfirst 5s linear 5s infinite;
opacity: .3;
transition: 5s;
}
@keyframes myfirst {
50% {
transform: scale(1.1);
}
}
.box-container .box .content {
width: 600px;
height: 100%;
/*background: hotpink;*/
float: left;
}
.box-container .box .form {
width: 395px;
height: 495px;
/*background: green;*/
float: left;
position: absolute;
top: 43px;
left: 780px;
backdrop-filter: blur(10px);
/*border: 1px solid white;*/
border-radius: 20px;
}
.box-container .box .content h1 {
color: white;
font-size: 45px;
text-align: left;
padding-top: 4rem;
padding-left: 6rem;
position: absolute;
top: 20px;
}
.box-container .box .content h1 span {
color: yellow;
font-size: 20px;
padding-left: 10px;
}
.box-container .box .content h2 {
color: white;
font-size: 45px;
text-align: left;
padding-left: 6rem;
position: absolute;
top: 105px;
}
.box-container .box .content p {
width: 600px;
font-size: 15px;
color: white;
text-align: justify;
padding: 20px 6rem 0 6rem;
line-height: 25px;
position: absolute;
top: 150px;
/*letter-spacing: -2px;*/
}
.box-container .box .content h3 {
width: 600px;
color: yellow;
font-size: 20px;
text-align: left;
padding-left: 6rem;
position: absolute;
top: 280px;
}
.box-container .box .content .img {
width: 400px;
height: 400px;
/*background: red;*/
position: absolute;
top: 330px;
left: 230px;
overflow: hidden;
}
.box-container .box .content .img img {
width: 50px;
height: 50px;
margin: 10px;
}
.form h1 {
font-size: 20px;
color: white;
text-align: center;
padding: 20px 0 0 0;
}
.form form {
margin-top: 50px;
}
.form form ion-icon {
font-size: 30px;
color: white;
position: relative;
top: 13px;
}
.form form .lock {
position: relative;
left: 30px;
top: 30px;
padding-right: 30px;
}
.form form span {
font-size: 20px;
color: white;
position: relative;
left: -30px;
top: 25px;
}
#pass_log_id {
position: relative;
top: 25px;
}
.form form input {
width: 250px;
height: 50px;
background: transparent;
border: none;
margin-left: 20px;
color: white;
}
::placeholder {
color: white;
}
.form form hr {
width: 300px;
}
.line {
margin-top: 25px;
}
.form button {
width: 200px;
height: 40px;
margin-top: 40px;
/*color: white;*/
background: yellow;
border: none;
border-radius: 10px;
transition: 1s;
cursor: pointer;
}
.form button:hover {
background: black;
color: white;
}
.icon_div ul li {
display: inline-block;
margin-top: 40px;
}
.icon_div ul li a {
font-size: 15px;
color: #fff;
margin: 0px 10px;
display: inline-block;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
background: #222;
transition: all .6s;
}
.icon_div ul li:hover a {
border-radius: 50%;
background: white;
color: black;
transform: rotate(360deg);
}
.icon_div ul li .facebook {
background: #3B5998;
}
.icon_div ul li .instagram {
background: #ce4188;
}
.icon_div ul li .twitter {
background: #55ACEE;
}
.icon_div ul li .youtube {
background: #bb0000;
}
.icon_div ul li .google {
background: #3f7ee8;
}
.icon_line {
width: 250px;
margin: 20px;
height: 1px;
}
.form p {
font-size: 13px;
color: yellow;
padding-left: 30px;
padding-right: 30px;
}
Comments
Post a Comment