├── .gitignore ├── favicon.ico ├── img ├── mock.jpg ├── apple-logo.png ├── background.png ├── background1.png ├── google-logo.png ├── twitter-symbol.png └── Twitter-logo-png.png ├── fonts ├── chirp-bold-web.woff ├── chirp-regular-web.woff └── chirp-extended-heavy-web.woff ├── README.md ├── js └── index.js ├── CODE_OF_CONDUCT.md ├── index.html └── css └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zack-Dx/Twitter-Landing-Page/HEAD/favicon.ico -------------------------------------------------------------------------------- /img/mock.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zack-Dx/Twitter-Landing-Page/HEAD/img/mock.jpg -------------------------------------------------------------------------------- /img/apple-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zack-Dx/Twitter-Landing-Page/HEAD/img/apple-logo.png -------------------------------------------------------------------------------- /img/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zack-Dx/Twitter-Landing-Page/HEAD/img/background.png -------------------------------------------------------------------------------- /img/background1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zack-Dx/Twitter-Landing-Page/HEAD/img/background1.png -------------------------------------------------------------------------------- /img/google-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zack-Dx/Twitter-Landing-Page/HEAD/img/google-logo.png -------------------------------------------------------------------------------- /img/twitter-symbol.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zack-Dx/Twitter-Landing-Page/HEAD/img/twitter-symbol.png -------------------------------------------------------------------------------- /img/Twitter-logo-png.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zack-Dx/Twitter-Landing-Page/HEAD/img/Twitter-logo-png.png -------------------------------------------------------------------------------- /fonts/chirp-bold-web.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zack-Dx/Twitter-Landing-Page/HEAD/fonts/chirp-bold-web.woff -------------------------------------------------------------------------------- /fonts/chirp-regular-web.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zack-Dx/Twitter-Landing-Page/HEAD/fonts/chirp-regular-web.woff -------------------------------------------------------------------------------- /fonts/chirp-extended-heavy-web.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zack-Dx/Twitter-Landing-Page/HEAD/fonts/chirp-extended-heavy-web.woff -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | Twitter-Landing-Page 3 |

4 | 5 |
6 | Desktop 7 |
8 | 9 | ## Introduction 10 | What is landing page in HTML? 11 | Landing pages are designed to capture specific streams of traffic — a subset of your website visitors targeted by your marketing campaign. For example, if you've created a full-featured mobile fitness application that includes a monthly fee, your landing page might offer a free trial period for interested users. 12 | 13 | A responsive Twitter Landing Page design using: 14 | - HTML; 15 | - CSS; 16 | 17 |
18 |
19 | 20 | ## Screenshots 21 | 22 |
23 | 24 | 1) PC/Desktop portview 25 | 26 | ![s1](https://user-images.githubusercontent.com/96445392/194000177-9f72ef4e-ac9e-416c-ada1-306ff21a853a.png) 27 | 28 | ![s2](https://user-images.githubusercontent.com/96445392/194000186-43983347-339a-4f6b-834f-c7de2c290b3b.png) 29 | 30 | 2) Mobile portview 31 | 32 | ![s4](https://user-images.githubusercontent.com/96445392/194000297-43134f26-878a-4d26-81bb-ae35fe897791.png) 33 | 34 |
35 |
36 | 37 | ## Project Contributors 🏆🏆 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /js/index.js: -------------------------------------------------------------------------------- 1 | function colorToggle() { 2 | const element = document.body; 3 | element.classList.toggle("dark-mode"); 4 | 5 | if (window.matchMedia("(min-width: 1030px)").matches) { 6 | document.querySelectorAll('.auth-window').forEach((elem) => elem.classList.toggle("blue-mode")); 7 | document.querySelectorAll(".auth-window .change").forEach((elem) => elem.src = "./img/Twitter-logo-png.png"); 8 | } 9 | else document.querySelectorAll('.auth-window').forEach((elem) => elem.classList.toggle("dark-mode")); 10 | 11 | document.querySelector(".fa-solid").classList.toggle("fa-moon"); 12 | document.querySelector(".account").classList.toggle("black"); 13 | document.querySelector(".heading1").classList.toggle("black"); 14 | document.querySelector(".heading2").classList.toggle("black"); 15 | document.querySelectorAll('.close i').forEach((elem) => elem.classList.toggle("black")); 16 | document.querySelector(".logo").classList.toggle("invert"); 17 | 18 | document.querySelectorAll(".change").forEach(function (elem) { 19 | if (elem.src.match("./img/twitter-symbol.png")) elem.src = "./img/Twitter-logo-png.png"; 20 | else elem.src = "./img/twitter-symbol.png"; 21 | }); 22 | 23 | document.querySelectorAll('.form h2').forEach((elem) => elem.classList.add('black')); 24 | } 25 | 26 | var flag = 0; 27 | document.querySelector('.toggle__button').addEventListener('click', function () { 28 | if (window.matchMedia("(min-width: 1030px)").matches) { 29 | document.querySelectorAll('.close i').forEach((elem) => elem.classList.toggle("black")); 30 | document.querySelectorAll('.form h2').forEach((elem) => elem.style.color = 'white'); 31 | if (flag === 0) { 32 | document.querySelectorAll('.to-be-toggled').forEach((elem) => { 33 | elem.style.backgroundColor = 'black'; 34 | elem.style.color = 'white'; 35 | elem.style.border = '1px solid white'; 36 | }) 37 | document.querySelector('.user-input input').style.backgroundColor = 'white'; 38 | document.querySelectorAll('.auth-window h3').forEach((elem) => elem.style.color = 'white'); 39 | document.querySelectorAll('.auth-window h3 a').forEach((elem) => elem.style.color = 'black'); 40 | flag = 1; 41 | } 42 | else { 43 | document.querySelectorAll('.to-be-toggled').forEach((elem) => { 44 | elem.style.backgroundColor = 'white'; 45 | elem.style.color = 'black'; 46 | }) 47 | document.querySelectorAll('.auth-window h3').forEach((elem) => elem.style.color = '#72767b'); 48 | document.querySelectorAll('.auth-window h3 a').forEach((elem) => elem.style.color = '#449eef'); 49 | flag = 0; 50 | } 51 | } 52 | else { 53 | if (flag === 0) { 54 | document.querySelectorAll('.form h2').forEach((elem) => elem.style.color = 'black'); 55 | flag = 1; 56 | } 57 | else { 58 | document.querySelectorAll('.form h2').forEach((elem) => elem.style.color = 'white'); 59 | flag = 0; 60 | } 61 | } 62 | }) 63 | 64 | let signin = document.querySelector('.signin'); 65 | let signInWindow = document.querySelector('.signin-window'); 66 | let body = document.querySelector('body'); 67 | signin.addEventListener('click', function () { 68 | signInWindow.style.display = 'initial'; 69 | body.style.overflow = 'hidden'; 70 | }); 71 | 72 | let signupBtn = document.querySelector('#signup-btn'); 73 | let signIn = document.querySelector('.sign-in'); 74 | let signUp = document.querySelector('.sign-up'); 75 | signupBtn.addEventListener('click', function () { 76 | signUp.style.display = 'initial'; 77 | signIn.style.display = 'none'; 78 | }) 79 | 80 | let logIn = document.querySelector('#log-in'); 81 | logIn.addEventListener('click', function () { 82 | signIn.style.display = 'initial'; 83 | signUp.style.display = 'none'; 84 | }) 85 | 86 | let close = document.querySelectorAll('.close'); 87 | close.forEach(function (elem) { 88 | elem.addEventListener('click', function () { 89 | signInWindow.style.display = 'none'; 90 | body.style.overflow = 'initial'; 91 | }); 92 | }); -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | * Demonstrating empathy and kindness toward other people 21 | * Being respectful of differing opinions, viewpoints, and experiences 22 | * Giving and gracefully accepting constructive feedback 23 | * Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | * Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | * The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | * Trolling, insulting or derogatory comments, and personal or political attacks 33 | * Public or private harassment 34 | * Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | * Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | sahil bisht. 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 122 | enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. 129 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Twitter. It's what's happening / Twitter 11 | 12 | 13 | 16 | 17 | 18 | 19 | 20 | 21 |
22 |
23 | 24 |
25 |
26 |
27 |
28 | 29 | Logo Twitter 30 |
31 |
32 |
33 | 34 | 35 |

Happening now

36 |

Join Twitter today.

37 |
38 |
39 | 42 | 46 |
47 | 48 |
49 |
50 |
or
51 |
52 |
53 | 54 |
55 | 56 |

57 | By signing up, you agree to the Terms of Service and 58 | Privacy Policy , including Cookie Use. 59 |

60 | 61 | 65 |
66 |
67 |
68 | 108 | 145 |
146 |
147 | 148 |