Skip to content

Commit

Permalink
last commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@AbdWebDeveloper14
AbdWebDeveloper14 committed Apr 22, 2024
0 parents commit 2186e29
Show file tree
Hide file tree
Showing 4 changed files with 335 additions and 0 deletions.
99 changes: 99 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Instagram</title>
<body style="background-color: rgb(255, 255, 255);">
<style>
body{

}
#maincontainer{
background-color: white;
height: 500px;
width: 400px;
border-radius: 20px ;
margin: 50%;
background-color: rgb(182, 137, 224);
}
h1{
background-color: light rgb(192, 32, 192);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
input{
width: 250px;
height: 40px;
border: none;
outline: 10px;
}
::placeholder{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-weight: 600px;
font-size: 15px;
}
button{
height: 30px;
width: 300px;
font-size: 20px;
font-weight: 400px;
background-color: rgb(45, 45, 201);
color: white;
border-radius: 5px;
border: none;
outline: none;
}
#OR{
color: rgb(112, 110, 110);
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
#Log{
color:rgb(53, 53, 201) ;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 20px;
}
h3{
color: rgb(50, 176, 218);
}
#Dont{
font-size: 20px;
font-weight: 200;
font-weight: 400;
}
#sing{
color: aqua;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: 600px
;
}


</style>
</body>
</head>
<body>
<div id="maincontainer">
<br>
<center><h1>Instagram</h1> </center>
<br>
<center><form action="" id="form">
<input type="text" placeholder="Phone number,username, or email"><br>
<br>
<input type="password" placeholder="password">
<br>
<br>
<button id="Login">Login</button>
</form>
<h2 id="OR">OR</h2>

<h2 id="Log"> Log in with Face book</h2>
<h3>Forget password?</h3>
<br>
<span id="Dont">Don't have an Account?</span><span id="sing">Sing up</span>
</center>

</div>


</body>
</html>
16 changes: 16 additions & 0 deletions instagram 1/.vscode/launch.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [

{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}
80 changes: 80 additions & 0 deletions instagram 1/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<!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> &copy; 2023 Instagram from Meta</span>
</div>
</footer>
</div>

</body>
</html>
140 changes: 140 additions & 0 deletions instagram 1/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
* {
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;
}

0 comments on commit 2186e29

Please sign in to comment.