Merge pull request #431 from Saurav50/main

Add files via upload
Ayushparikh-code · Sep 17, 2024 · d2579a8 · d2579a8
2 parents 84cd71a + c0c2636
commit d2579a8
Show file tree

Hide file tree

Showing 13 changed files with 394 additions and 0 deletions.
diff --git a/Instagram_login_signup_page clone/appstore.png b/Instagram_login_signup_page clone/appstore.png
diff --git a/Instagram_login_signup_page clone/fb.jpg b/Instagram_login_signup_page clone/fb.jpg
diff --git a/Instagram_login_signup_page clone/img.png b/Instagram_login_signup_page clone/img.png
diff --git a/Instagram_login_signup_page clone/img2].png b/Instagram_login_signup_page clone/img2].png
diff --git a/Instagram_login_signup_page clone/img3.png b/Instagram_login_signup_page clone/img3.png
diff --git a/Instagram_login_signup_page clone/img4.png b/Instagram_login_signup_page clone/img4.png
diff --git a/Instagram_login_signup_page clone/img5.png b/Instagram_login_signup_page clone/img5.png
diff --git a/Instagram_login_signup_page clone/index.html b/Instagram_login_signup_page clone/index.html
@@ -0,0 +1,168 @@
+<!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</title>
+    <link rel="icon" href="logo.png" sizes="75x75" type="image/x-icon" />
+    <link rel="stylesheet" href="style.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Aboreto&family=Arima+Madurai:wght@800&family=Caveat:wght@600&family=Source+Serif+Pro:ital,wght@1,600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+  </head>
+  <body>
+   <main>
+    <section>
+        <div class="div1">
+            <div class="div2">
+                <img src="phone.png" alt="" class="img1" />
+            </div>
+        </div>
+        <div class="div3">
+            <div class="div4">
+                <h1>Instagram</h1>
+                <input
+                type="text"
+                name="abc"
+                id=""
+                placeholder="Phone number, username, or email"
+                />
+                <input type="password" name="" id="" placeholder="Password" />
+                <button type="submit">Log In</button>
+                <span id="break">
+                  <div class="div5"></div>
+                  <div class="div6">OR</div>
+                  <div class="div7"></div>
+                </span>
+                <span id="fb">
+                  <img src="fb.jpg" alt="" class="fb">
+                  <h4><a href="#" id="loginfb">Log in with Facebook</a></h2>
+                </span>
+
+                <a href="#reset" id="reset">Forgot password?</a>
+            </div>
+            <div class="div8">
+              Don't have an account? <span id="signup">Sign up</span>
+            </div>
+            <div class="div9">
+              <p>Get the app.</p>
+              <div class="div10">
+                <img src="appstore.png" alt="">
+                <img src="playstore.png" alt="">
+              </div>
+
+            </div>
+        </div>
+    </section>
+    <footer>
+      <div class="links">
+        <div class="firsthalf">
+          <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="">Hashtags</a>
+          <a href="">Locations</a>
+          <a href="">Instagram Lite</a>
+          <a href="">Contact Uploading & Non-Users</a>
+        </div>
+        <div class="secondhalf">
+
+          <a href="">Dance</a>
+          <a href="">Food & Drink</a>
+          <a href="">Home & Garden</a>
+          <a href="">Music</a>
+          <a href="">Visual Arts</a>
+        </div>
+
+      </div>
+      <div class="copyright">
+        <select data-placeholder="Choose a Language...">
+          <option value="AF">Afrikaans</option>
+          <option value="SQ">Albanian</option>
+          <option value="AR">Arabic</option>
+          <option value="HY">Armenian</option>
+          <option value="EU">Basque</option>
+          <option value="BN">Bengali</option>
+          <option value="BG">Bulgarian</option>
+          <option value="CA">Catalan</option>
+          <option value="KM">Cambodian</option>
+          <option value="ZH">Chinese (Mandarin)</option>
+          <option value="HR">Croatian</option>
+          <option value="CS">Czech</option>
+          <option value="DA">Danish</option>
+          <option value="NL">Dutch</option>
+          <option value="EN" selected>English</option>
+          <option value="ET">Estonian</option>
+          <option value="FJ">Fiji</option>
+          <option value="FI">Finnish</option>
+          <option value="FR">French</option>
+          <option value="KA">Georgian</option>
+          <option value="DE">German</option>
+          <option value="EL">Greek</option>
+          <option value="GU">Gujarati</option>
+          <option value="HE">Hebrew</option>
+          <option value="HI">Hindi</option>
+          <option value="HU">Hungarian</option>
+          <option value="IS">Icelandic</option>
+          <option value="ID">Indonesian</option>
+          <option value="GA">Irish</option>
+          <option value="IT">Italian</option>
+          <option value="JA">Japanese</option>
+          <option value="JW">Javanese</option>
+          <option value="KO">Korean</option>
+          <option value="LA">Latin</option>
+          <option value="LV">Latvian</option>
+          <option value="LT">Lithuanian</option>
+          <option value="MK">Macedonian</option>
+          <option value="MS">Malay</option>
+          <option value="ML">Malayalam</option>
+          <option value="MT">Maltese</option>
+          <option value="MI">Maori</option>
+          <option value="MR">Marathi</option>
+          <option value="MN">Mongolian</option>
+          <option value="NE">Nepali</option>
+          <option value="NO">Norwegian</option>
+          <option value="FA">Persian</option>
+          <option value="PL">Polish</option>
+          <option value="PT">Portuguese</option>
+          <option value="PA">Punjabi</option>
+          <option value="QU">Quechua</option>
+          <option value="RO">Romanian</option>
+          <option value="RU">Russian</option>
+          <option value="SM">Samoan</option>
+          <option value="SR">Serbian</option>
+          <option value="SK">Slovak</option>
+          <option value="SL">Slovenian</option>
+          <option value="ES">Spanish</option>
+          <option value="SW">Swahili</option>
+          <option value="SV">Swedish </option>
+          <option value="TA">Tamil</option>
+          <option value="TT">Tatar</option>
+          <option value="TE">Telugu</option>
+          <option value="TH">Thai</option>
+          <option value="BO">Tibetan</option>
+          <option value="TO">Tonga</option>
+          <option value="TR">Turkish</option>
+          <option value="UK">Ukrainian</option>
+          <option value="UR">Urdu</option>
+          <option value="UZ">Uzbek</option>
+          <option value="VI">Vietnamese</option>
+          <option value="CY">Welsh</option>
+          <option value="XH">Xhosa</option>
+        </select>
+        <div>
+          © 2022 Instagram from Meta
+        </div>
+      </div>
+    </footer>
+   </main>
+  </body>
+</html>
diff --git a/Instagram_login_signup_page clone/logo.jpg b/Instagram_login_signup_page clone/logo.jpg
diff --git a/Instagram_login_signup_page clone/logo.png b/Instagram_login_signup_page clone/logo.png
diff --git a/Instagram_login_signup_page clone/phone.png b/Instagram_login_signup_page clone/phone.png
diff --git a/Instagram_login_signup_page clone/playstore.png b/Instagram_login_signup_page clone/playstore.png
diff --git a/Instagram_login_signup_page clone/style.css b/Instagram_login_signup_page clone/style.css
@@ -0,0 +1,226 @@
+html {
+  background-color: rgba(250, 250, 250, 1);
+  margin: 0%;
+  padding: 0%;
+}
+main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+section {
+  display: flex;
+  justify-content: center;
+  position: relative;
+  margin: 32px auto 0;
+  max-width: 875px;
+  padding-bottom: 32px;
+  width: 100%;
+}
+.div1 {
+  background-image: url(img.png);
+  background-repeat: no-repeat;
+  height: 581.15px;
+  position: relative;
+  width: 465px;
+}
+.div2 {
+  position: relative;
+  height: 538.84px;
+  margin: 25px 0 0 156px;
+  left: 0%;
+  top: 0%;
+  padding: 0%;
+}
+ul,
+li {
+  padding: 0%;
+  margin: 0%;
+}
+.div3 {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+}
+button {
+  display: block;
+  width: 266px;
+  padding: 8px;
+  text-align: center;
+  background-color: #0095f6;
+  margin: 15px 0px;
+  border-color: rgba(219, 219, 219, 1);
+  border-radius: 6px;
+  color: white;
+  font-weight: bold;
+  outline: 0px;
+}
+.div4,
+.div8 {
+  border: 1px solid rgba(219, 219, 219, 1);
+  padding: 30px 40px;
+  background-color: rgba(255, 255, 255, 1);
+}
+input {
+  display: block;
+  padding: 6px;
+  font-size: small;
+  width: 250px;
+  height: 24px;
+  margin: 4px 0px;
+  border: 1px solid rgba(var(--ca6, 219, 219, 219), 1);
+  border-radius: 3px;
+  outline: 0px;
+}
+#break {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 266px;
+}
+.div5,
+.div7 {
+  border: 0.01px solid rgba(219, 219, 219, 1);
+  display: inline-block;
+  width: 50%;
+  align-items: center;
+  height: 0px;
+}
+.div6 {
+  margin: 0px 18px;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 15px;
+  color: rgba(142, 142, 142, 1);
+}
+h1 {
+  text-align: center;
+  font-family: "Arima Madurai", cursive;
+  font-size: xx-large;
+  font-weight: bold;
+  margin-top: 0%;
+  text-shadow: 2px 1px grey;
+}
+#fb {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.fb {
+  height: 16px;
+  width: 16px;
+  margin-right: 8px;
+}
+
+#loginfb {
+  text-decoration: none;
+  color: #385185;
+  font-weight: 550;
+}
+#reset {
+  display: flex;
+  justify-content: center;
+  color: #00376b;
+  font-size: 12px;
+  text-decoration: none;
+}
+.div8 {
+  padding: 20px;
+  margin: 0px 0px 10px;
+  text-align: center;
+  color: #262626;
+  font-size: 14px;
+}
+#signup {
+  color: #0095f6;
+  font-size: 14px;
+  font-weight: 600;
+}
+p {
+  text-align: center;
+}
+.div9 {
+  padding-bottom: 0px;
+}
+.div10 {
+  display: flex;
+  justify-content: center;
+  margin: 10px 0px;
+}
+.div10 img {
+  height: 40px;
+  margin-right: 10px;
+}
+footer {
+  background-color: rgba(250, 250, 250, 1);
+  padding-left: 16px;
+  padding-right: 16px;
+  margin: 28px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+footer a {
+  text-decoration: none;
+  font-size: 12px;
+  line-height: 16px;
+  margin: 0px 6px;
+  color: rgba(142, 142, 142, 1);
+}
+.firsthalf {
+  text-align: center;
+}
+.secondhalf {
+  text-align: center;
+}
+.copyright {
+  display: flex;
+  justify-content: center;
+  align-content: stretch;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  font-size: 12px;
+  color: rgba(142, 142, 142, 1);
+}
+select {
+  text-decoration: none;
+  border: 0;
+  color: rgba(142, 142, 142, 1);
+
+  width: 65px;
+}
+.copyright div {
+  padding-left: 10px;
+}
+@media screen and (max-width: 875px) {
+  section {
+    margin: 32px 0;
+  }
+  .div1 {
+    display: none;
+    width: 0%;
+    height: 0%;
+    margin: 0%;
+    padding: 0%;
+  }
+}
+@media screen and (max-width: 440px) {
+  .div3 {
+    width: 100%;
+    background-color: rgba(250, 250, 250, 1);
+    border: 0;
+    align-items: center;
+    text-align: center;
+  }
+  .div4,
+  .div8,
+  .div9 {
+    background-color: rgba(255, 255, 255, 1);
+    border: 0;
+    width: 60%;
+    align-items: center;
+  }
+}