Skip to content

Commit 84cb465

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1765 from gauravsingh1281/Issue-Number-#1744
Issue No. #1744 [ New Project Added ] Instagram Login Page Clone.
2 parents 231ff27 + 2925660 commit 84cb465

3 files changed

Lines changed: 311 additions & 0 deletions

File tree

‎Projects/Instagram-Login-Page-Clone/Index.html‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Instagram Login Page</title>
9+
<!-- font awesome-->
10+
<script src="https://kit.fontawesome.com/e2bfc5138f.js" crossorigin="anonymous"></script>
11+
<!--style sheets-->
12+
<link rel="stylesheet" href="styles.css">
13+
14+
</head>
15+
16+
<body>
17+
<section class="wrapper">
18+
<div class="left">
19+
<img src="https://64b448dcbebe496a150a8945--joyful-peony-566b51.netlify.app/phone.png" height="581.15px"
20+
alt="phone">
21+
<img class="screen" id="rotator" height="538.84px"
22+
src="https://64b448dcbebe496a150a8945--joyful-peony-566b51.netlify.app/screen1.png" alt="phone-screen">
23+
</div>
24+
<div class="right">
25+
<div class="panel login">
26+
<img id="logo" src="https://64b448dcbebe496a150a8945--joyful-peony-566b51.netlify.app/logo.png"
27+
alt="logo">
28+
29+
<form action="/" method="post">
30+
<input class="input-box" type="text" name="username" placeholder="Phone number, username or email"
31+
required>
32+
<input class="input-box" type="password" name="password" placeholder="Password" required>
33+
<input class="button" type="submit" name="login" value="Log In">
34+
<div class="divider">
35+
<div class="line"></div>
36+
<p>OR</p>
37+
<div class="line"></div>
38+
</div>
39+
<a class="fb" href="#"> Log In with Facebook</a>
40+
<a class="forgot" href="#">Forgot password?</a>
41+
</form>
42+
</div>
43+
<div class="panel signup">
44+
<p>Don't have an account? <a href="#"> Sign up</a></p>
45+
</div>
46+
<div class="apps">
47+
<p>Get the app.</p>
48+
<div class="app-stores">
49+
<img src="https://64b448dcbebe496a150a8945--joyful-peony-566b51.netlify.app/appstore.png"
50+
alt="appstore">
51+
<img src="https://64b448dcbebe496a150a8945--joyful-peony-566b51.netlify.app/playstore.png"
52+
alt="playstore">
53+
</div>
54+
</div>
55+
</div>
56+
</section>
57+
<footer>
58+
<ul>
59+
<li><a href="https://about.facebook.com/meta">Meta</a></li>
60+
<li><a href="https://about.instagram.com/">About</a></li>
61+
<li><a href=#>Blog</a></li>
62+
<li><a href=#>Jobs</a></li>
63+
<li><a href=#>Help</a></li>
64+
<li><a href=#>API</a></li>
65+
<li><a href=#>Privacy</a></li>
66+
<li><a href=#>Terms</a></li>
67+
<li><a href=#>Top Accounts</a></li>
68+
<li><a href=#>Hashtags</a></li>
69+
<li><a href=#>Locations</a></li>
70+
<li><a href=#>Instagram Lite</a></li>
71+
<li><a href=#>Beauty</a></li>
72+
<li><a href=#>Dance</a></li>
73+
<li><a href=#>Fitness</a></li>
74+
<li><a href=#>Food & Drink</a></li>
75+
<li><a href=#>Home & Garden</a></li>
76+
<li><a href=#>Music</a></li>
77+
<li><a href=#>Visual Arts</a></li>
78+
</ul>
79+
<ul>
80+
<li>English</li>
81+
<li>&copy;
82+
<span id="copyright-year"></span>
83+
Instagram from Meta
84+
</li>
85+
</ul>
86+
</footer>
87+
88+
<script src="script.js"></script>
89+
</body>
90+
91+
</html>

‎Projects/Instagram-Login-Page-Clone/script.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
(function () {
2+
var rotator = document.getElementById("rotator");
3+
4+
var delayInSeconds = 1;
5+
6+
var images = [
7+
"https://64b448dcbebe496a150a8945--joyful-peony-566b51.netlify.app/1.png",
8+
"https://64b448dcbebe496a150a8945--joyful-peony-566b51.netlify.app/2.png",
9+
"https://64b448dcbebe496a150a8945--joyful-peony-566b51.netlify.app/3.png",
10+
"https://64b448dcbebe496a150a8945--joyful-peony-566b51.netlify.app/4.png",
11+
];
12+
13+
var num = 0;
14+
var changeImage = function () {
15+
var len = images.length;
16+
rotator.src = images[num++];
17+
if (num == len) {
18+
num = 0;
19+
}
20+
};
21+
setInterval(changeImage, delayInSeconds * 6000);
22+
})();
23+
24+
25+
// copyright year
26+
27+
let copyRightYear = document.getElementById("copyright-year");
28+
let currentDate = new Date();
29+
let currentYear = currentDate.getFullYear();
30+
copyRightYear.innerText = currentYear;

‎Projects/Instagram-Login-Page-Clone/styles.css‎

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-color: #fafafa;
9+
font-family: Helvetica, sans-serif;
10+
min-height: 100vh;
11+
display: flex;
12+
flex-direction: column;
13+
align-items: center;
14+
}
15+
16+
.wrapper {
17+
display: flex;
18+
flex-grow: 1;
19+
align-items: center;
20+
justify-content: center;
21+
}
22+
23+
.left {
24+
position: relative;
25+
}
26+
27+
.screen {
28+
height: 496.84px;
29+
position: absolute;
30+
left: 141px;
31+
top: 23px;
32+
}
33+
34+
.panel {
35+
width: 350px;
36+
background-color: #ffff;
37+
border: 1px solid #dedede;
38+
border-radius: 2px;
39+
padding: 20px 40px;
40+
margin: 5px 0;
41+
display: flex;
42+
}
43+
44+
.login {
45+
flex-direction: column;
46+
align-items: center;
47+
}
48+
49+
#logo {
50+
width: 65%;
51+
margin-top: 20px;
52+
margin-bottom: 30px;
53+
}
54+
55+
form {
56+
width: 100%;
57+
display: flex;
58+
flex-direction: column;
59+
align-items: center;
60+
}
61+
62+
.input-box {
63+
width: 100%;
64+
padding: 10px;
65+
margin-bottom: 10px;
66+
background-color: #fafafa;
67+
border: 1px solid #dedede;
68+
border-radius: 2px;
69+
}
70+
71+
.input-box::placeholder {
72+
color: #8a8a8a;
73+
font-size: 12px;
74+
}
75+
76+
.input-box:focus {
77+
outline: none;
78+
border: 1px solid #8a8a8a;
79+
}
80+
81+
.button {
82+
width: 100%;
83+
margin: 10px 0;
84+
padding: 7px 0;
85+
background-color: #b2dffc;
86+
color: #ffff;
87+
border-radius: 5px;
88+
border: none;
89+
font-size: 14px;
90+
}
91+
92+
.divider {
93+
display: flex;
94+
width: 100%;
95+
font-size: 12px;
96+
color: #8a8a8a;
97+
font-weight: bold;
98+
gap: 10px;
99+
align-items: center;
100+
margin: 6px 40px 18px;
101+
}
102+
103+
.line {
104+
opacity: 0.3;
105+
flex: 1;
106+
height: 1px;
107+
background-color: #8a8a8a;
108+
margin: 10px;
109+
}
110+
111+
.fb {
112+
margin-top: 10px;
113+
margin-bottom: 20px;
114+
color: #385185;
115+
text-decoration: none;
116+
font-size: 14px;
117+
font-weight: 600;
118+
}
119+
120+
.fb::before {
121+
font-family: "Font Awesome 5 Brands";
122+
content: "\f082";
123+
margin-right: 5px;
124+
font-size: 18px;
125+
}
126+
127+
.forgot {
128+
color: #000;
129+
text-decoration: none;
130+
font-size: 12px;
131+
}
132+
133+
.signup {
134+
justify-content: center;
135+
gap: 5px;
136+
font-size: 14px;
137+
}
138+
139+
.signup a {
140+
text-decoration: none;
141+
color: #0095f6;
142+
font-weight: 600;
143+
}
144+
145+
.apps {
146+
display: flex;
147+
flex-direction: column;
148+
align-items: center;
149+
font-size: 14px;
150+
margin: 20px 0;
151+
}
152+
153+
.app-stores {
154+
display: flex;
155+
gap: 10px;
156+
margin-top: 20px;
157+
}
158+
159+
.app-stores img {
160+
width: 140px;
161+
height: auto;
162+
}
163+
164+
footer {
165+
max-width: 48em;
166+
margin: 40px;
167+
}
168+
169+
ul {
170+
display: flex;
171+
flex-wrap: wrap;
172+
justify-content: center;
173+
font-size: 12px;
174+
list-style: none;
175+
gap: 10px;
176+
margin: 20px 0;
177+
}
178+
179+
li,
180+
a {
181+
margin-right: 5px;
182+
color: #8a8a8a;
183+
text-decoration: none;
184+
}
185+
186+
@media (max-width: 860px) {
187+
.left {
188+
display: none;
189+
}
190+
}

0 commit comments

Comments
 (0)