-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
dcaa679
commit ca5a734
Showing
1 changed file
with
319 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,319 @@ | ||
| <!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> | ||
| </head> | ||
| <style> | ||
|
|
||
| *{ | ||
| padding: 0; | ||
| margin: 0; | ||
| box-sizing: border-box; | ||
| } | ||
| body{ | ||
| background: rgba(0, 0, 0, 0.9); | ||
|
|
||
| } | ||
| .container{ | ||
| display: flex; | ||
| justify-content: center; | ||
| height: 84vh; | ||
| margin-top: 1.5rem; | ||
| } | ||
| #img-insta{ | ||
| width: 25rem; | ||
| } | ||
| #img-insta img{ | ||
| height: 100%; | ||
| width: 100%; | ||
| animation: fade-in 2s linear; | ||
| } | ||
| @keyframes fade-in { | ||
| 0%{ | ||
| opacity: 0; | ||
|
|
||
| } | ||
| 100%{ | ||
| opacity:1; | ||
| } | ||
| } | ||
| #log-box{ | ||
| margin-top: 1rem; | ||
| padding: 1rem; | ||
| width: 25rem; | ||
| animation: zoom-in 0.5s linear; | ||
| } | ||
| @keyframes zoom-in { | ||
| 0%{ | ||
| opacity: 0; | ||
| transform: scale(0.9); | ||
| } | ||
| 100%{ | ||
| transform: scale(1); | ||
|
|
||
| } | ||
|
|
||
|
|
||
| } | ||
| h1{ | ||
| background-image: url(./pngfind.com-logo-de-instagram-png-2171074.png); | ||
| height: 4rem; | ||
| background-size: contain; | ||
| background-repeat: no-repeat; | ||
| margin: 3rem 5rem 0 5rem; | ||
| animation: fade-in 1s linear; | ||
| } | ||
| @keyframes fade-in { | ||
| 0%{ | ||
| opacity: 0; | ||
| } | ||
| 100%{ | ||
| opacity:1; | ||
| } | ||
|
|
||
| } | ||
| #log-box1{ | ||
| border: 1px solid gray; | ||
| background: rgba(0, 0, 0, 0.98); | ||
|
|
||
| } | ||
| #log-box #form{ | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
| #form{ | ||
| padding: 1.5rem 2.8rem; | ||
| } | ||
| input{ | ||
| background: rgb(15, 15, 15); | ||
| border: 0.1px solid gray; | ||
| margin: 0.3rem; | ||
| height: 3em; | ||
| border-radius: 3px; | ||
| color: rgba(240, 248, 255, 0.9); | ||
| } | ||
|
|
||
| input::placeholder{ | ||
| color: rgba(230,230,230,0.6); | ||
| font-family:Arial, Helvetica, sans-serif; | ||
| font-size: 0.9em; | ||
| padding: 0 5px; | ||
| } | ||
|
|
||
| #form button{ | ||
| background: rgb(6, 50, 95); | ||
| color: white; | ||
| font-family: Arial, Helvetica, sans-serif; | ||
| font-weight: bold; | ||
| padding: 6px; | ||
| border: none; | ||
| border-radius: 6px; | ||
| margin: 0.5rem auto; | ||
| width: 15.2rem; | ||
| } | ||
| #form button:hover{ | ||
| background: rgb(12, 96, 180); | ||
| } | ||
|
|
||
| #form p{ | ||
| color: rgba(255,255,255,0.7); | ||
| font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; | ||
| position: relative; | ||
| text-align: center; | ||
| margin: 5px 0 30px 0; | ||
| } | ||
| #form p::before{ | ||
| content:""; | ||
| height: 0.7px; | ||
| width: 110px; | ||
| background: gray; | ||
| position: absolute; | ||
| left: 0; | ||
| top: 50%; | ||
| } | ||
| #form p::after{ | ||
| content:""; | ||
| height: 0.7px; | ||
| width: 110px; | ||
| background: gray; | ||
| position: absolute; | ||
| right: 0; | ||
| top: 50%; | ||
| } | ||
| #form a{ | ||
| text-decoration: none; | ||
| color: rgb(117, 177, 226); | ||
| text-align: center; | ||
| position: relative; | ||
| margin: 0 0 15px 0; | ||
| } | ||
| #form a:hover{ | ||
| color: rgb(12, 96, 180); | ||
| } | ||
| #form a:nth-child(6){ | ||
| font-size: 0.8em; | ||
| } | ||
| #log-box2{ | ||
| border: 1px solid gray; | ||
| background: rgba(0, 0, 0, 0.98); | ||
| /* height: 4rem; */ | ||
| margin: 0.8rem 0; | ||
| padding: 1.8rem; | ||
| } | ||
| #log-box2 p{ | ||
| font-family: Arial, Helvetica, sans-serif; | ||
| color: rgba(255,255,255,0.7); | ||
| text-align: center; | ||
| font-size: small; | ||
| } | ||
| #log-box2 p a{ | ||
| text-decoration: none; | ||
| font-weight:700; | ||
| color: rgb(55, 148, 224); | ||
|
|
||
| } | ||
| #log-box2 p a:hover{ | ||
| color: rgb(12, 96, 180); | ||
| } | ||
| .links img{ | ||
| width: 16rem; | ||
| height: 2.6rem; | ||
| display: block; | ||
| margin: 8px auto; | ||
|
|
||
| } | ||
| footer ul{ | ||
| display: flex; | ||
| justify-content: center; | ||
| } | ||
| footer ul li{ | ||
| list-style: none; | ||
| padding: 5px; | ||
| } | ||
| footer ul li a{ | ||
| text-decoration: none; | ||
| color: rgba(230, 228, 235, 0.3); | ||
| font-family: Arial, Helvetica, sans-serif; | ||
| font-size: 0.85em; | ||
| } | ||
| select{ | ||
| background: transparent; | ||
| border: none; | ||
| color: rgba(230, 228, 235, 0.3); | ||
| font-family: Arial, Helvetica, sans-serif; | ||
| font-size: 0.9em; | ||
| width: 6rem; | ||
| margin-left: 40%; | ||
| margin-top: 12px; | ||
| } | ||
| footer ul li a:hover{ | ||
| color: rgba(255,255,255,0.8); | ||
| } | ||
| /* $mobile : 576px; */ | ||
| /* $tablet : 768px; */ | ||
| /* $laptop : 992px; */ | ||
| /* $desktop : 1200px; */ | ||
|
|
||
| /* For mobile version */ | ||
| @media all and (max-width: 520px) { | ||
| #img-insta, #img-insta img{ | ||
| display: none; | ||
| } | ||
| .container, #log-box, #log-box1{ | ||
| margin-top: 0; | ||
|
|
||
| } | ||
| #log-box{ | ||
| padding: 0; | ||
| /* min-width: 355px; */ | ||
| } | ||
| #log-box button{ | ||
| width: 200px; | ||
| } | ||
|
|
||
| ul{ | ||
| margin-top: 3rem; | ||
| flex-wrap: wrap; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| /* For tablet versions */ | ||
| @media all and (max-width :800px ){ | ||
| #img-insta, #img-insta img{ | ||
| display: none; | ||
| } | ||
| ul{ | ||
| margin-top: 4rem; | ||
| } | ||
| } | ||
| /* For laptop version */ | ||
| @media all and (max-width :1490px ){ | ||
| ul{ | ||
| margin-top: 4rem; | ||
| } | ||
|
|
||
| </style> | ||
| <body> | ||
| <div class="container"> | ||
| <div id="img-insta"> | ||
| <img src="instamerged.png" alt="Connection error. Please try again later"> | ||
|
|
||
| </div> | ||
| <div id="log-box"> | ||
| <div id="log-box1"> | ||
| <h1></h1> | ||
| <div id="form"> | ||
| <input type="text" name="email" value="" placeholder="Phone number, username or email address"> | ||
| <input type="password" name="password" value="" placeholder="Password"> | ||
| <button>Log in</button> | ||
| <p>OR</p> | ||
| <a href="https://facebook.com"> | ||
| <img src="./facebook.png" alt="" style="height: 20px;width: 20px;position: relative; top:4px;"> Log in with Facebook | ||
| </a> | ||
| <a href="">Forgotten your password?</a> | ||
| </div> | ||
|
|
||
| </div> | ||
| <div id="log-box2"> | ||
| <p>Don't have an account? <a href="">Sign up</a></p> | ||
| </div> | ||
| <p style="text-align: center; color: rgba(240, 248, 255, 0.9); font-family: Arial, Helvetica, sans-serif; font-size: 0.9rem; margin: 15px;">Get the app.</p> | ||
| <div class="links"> | ||
| <img src="./20-202991_get-it-on-google-play-logo-png-vector.png" alt=""> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <footer> | ||
| <ul> | ||
| <li><a href="">Meta</a></li> | ||
| <li><a href="">About</a></li> | ||
| <li><a href="">Blog</a></li> | ||
| <li><a href="">Jobs</a></li> | ||
| <li><a href="">Help</a></li> | ||
| <li><a href="">Api</a></li> | ||
| <li><a href="">Privacy</a></li> | ||
| <li><a href="">Terms</a></li> | ||
| <li><a href="">Top accounts</a></li> | ||
| <li><a href="">Hashtags</a></li> | ||
| <li><a href="">Locations</a></li> | ||
| <li><a href="">Intagram Lite</a></li> | ||
| <li><a href="">Contact uploading and non-users</a></li> | ||
| </ul> | ||
| <select name="Language" id=""> | ||
| <option value="">Japanese</option> | ||
| <option value="">English(United Kingdom)</option> | ||
| <option value="">English(United States)</option> | ||
| <option value="">Nepali</option> | ||
| <option value="">Chinese</option> | ||
| <option value="">Espanol</option> | ||
| </select> | ||
| <p style="display: inline-block;color: rgba(230, 228, 235, 0.3); | ||
| font-family: Arial, Helvetica, sans-serif; | ||
| font-size: 0.9em;"> © 2022 Instagram from Meta</p> | ||
| </footer> | ||
| </body> | ||
| </html> |