Introduction:
Creating a basic Instagram login page using HTML and CSS can be a great way to practice your web development skills. Here's a brief overview of Instagram and the login page, followed by steps to create a simple login page:
About Instagram:
Instagram is a popular social media platform that allows users to share photos and videos, connect with friends, and discover content from others. Its login page is the gateway for users to access their accounts, and it typically features a clean and user-friendly design.
Creating an Instagram-Inspired Login Page:
Preview
Step 1: Set Up Your HTML Structure:
Begin by creating a new HTML file. You can use any code editor, such as Visual Studio Code or Sublime Text, to write your code. Here's a basic HTML structure to start with:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Instagram Login Form </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<section>
<div class="main-top">
<div class="logo">
<img src="./logo.png" />
</div>
<div>
<input type="text" placeholder="username" class="username" />
<div>
<input type="password" placeholder="password" class="password" />
</div>
<input type="button" value="Log in" class="login-btn" />
</div>
<span class="or"> OR </span>
<div class="main-bottom">
<a href="" class="logInFB"><i class="fa-brands fa-facebook-f"></i> Log in with Facebook </a><br>
<a href="" class="forget"> Forgot password </a>
</div>
</div>
<div class="bottom">
<div class="signUp">
Don't have an account? <a href="#">Sign up</a>
</div>
</div>
<div class="app-section">
<span> Get the app </span>
<div class="images">
<img src="./googlePlay.png" alt="googlePlay Image">
<img src="./microsoft.png" alt="Microsoft Image">
</div>
</div>
</section> <!-- Footer Section Starts from Here -->
<footer>
<a href="">Meta</a>
<a href="">About</a>
<a href="">Blog</a>
<a href="">Jobs</a>
<a href="">Help</a>
<a href="">API</a>
<a href="">Privacy</a>
<a href="">Terms</a>
<a href="">Top Accounts</a>
<a href="">Locations</a>
<a href="">Instagram Lite</a>
<a href="">Instagram Contact</a>
<a href="">Uploading & Non-Users</a>
<div class="bottom-footer">
<select name="" id="">
<option value="English">English</option>
<option value="Hindi">Hindi</option>
<option value="Punjabi">Punjabi</option>
<option value="Urdu">Urdu</option>
<option value="Francais">Francais</option>
</select>
<span> © 2023 Instagram from Meta</span>
</div>
</footer>
</div>
</body>
</html>
Step 2: Create a Stylesheet (CSS):
Now, create a CSS file (style.css) to style your login page. You can customize it to match Instagram's visual aesthetics. Below are some basic CSS styles to get you started:
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
body {
background-color: #eee;
}
#container {
display: flex;
align-items: center;
margin: 50px auto;
flex-direction: column;
}
section {
margin: 20px 5;
}
.main-top {
width: 350px;
text-align: center;
margin-bottom: 5px;
padding: 50px 50px;
background-color: #fff;
}
.logo {
margin-bottom: 5px;
}
.logo img {
height: 50px;
margin: 0 auto;
}
.username,
.password {
width: 100%;
margin-bottom: 5px;
padding: 8px 12px;
border: 1px solid #dbdbdb;
font-size: 15px;
border-radius: 3px;
}
input:focus {
outline: none;
}
.login-btn {
width: 100%;
background-color: #3897f0;
border: 1px solid #3897f0;
padding: 6px 0;
color: #fff;
cursor: pointer;
border-radius: 3px;
}
.or {
line-height: 50px;
}
.main-bottom a {
margin: 20px 0;
text-decoration: none;
font-size: 15px;
line-height: 30px;
}
.fa-facebook-f {
color: #fff;
border-radius: 2px;
font-size: 12px;
background-color: rgb(15, 15, 168);
width: 20px;
text-align: center;
height: 20px;
padding: 5px;
}
.bottom {
width: 350px;
text-align: center;
padding: 20px 0;
background-color: #fff;
}
.signUp a {
text-decoration: none;
cursor: pointer;
color: #3897f0;
}
.app-section {
text-align: center;
padding: 10px 0;
}
.app-section span {
font-size: 16px;
}
.images {
margin: 10px 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.images img {
margin: 0 5px;
height: 35px;
}
footer {
width: 70%;
text-align: center;
margin-top: 2rem;
}
footer a,
footer span,
footer select {
font-size: 13px;
color: #8e8e8e;
text-decoration: none;
margin: 5px;
}
footer select {
outline: none;
border: none;
background-color: #eee;
}
Conclusion:
In conclusion, creating an Instagram-inspired login page using HTML and CSS is a great way to practice your web development skills. Instagram is a popular social media platform known for its user-friendly design, and you can replicate its login page with a basic structure and styles. By following the steps outlined in the previous response, you can create a visually appealing and functional login page that resembles Instagram's design.
Remember that the provided example is a simplified version, and Instagram's actual login page is more complex, often involving JavaScript for user authentication and other dynamic features. However, this project serves as a valuable starting point for those looking to learn web development, and it can be expanded upon to add more advanced features and functionality in the future.
.png)
.png)
Comments
Post a Comment