├── design
    ├── active-states.jpg
    ├── mobile-design.jpg
    ├── desktop-design.jpg
    └── desktop-preview.jpg
├── images
    ├── favicon-32x32.png
    ├── bg-intro-mobile.png
    ├── bg-intro-desktop.png
    └── icon-error.svg
├── .gitignore
├── style-guide.md
├── LICENSE
├── script.js
├── index.html
├── README.md
└── style.css


/design/active-states.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/all-my-frontend-mini-projects/Intro-component-signup-form_frontend_project/HEAD/design/active-states.jpg


--------------------------------------------------------------------------------
/design/mobile-design.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/all-my-frontend-mini-projects/Intro-component-signup-form_frontend_project/HEAD/design/mobile-design.jpg


--------------------------------------------------------------------------------
/images/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/all-my-frontend-mini-projects/Intro-component-signup-form_frontend_project/HEAD/images/favicon-32x32.png


--------------------------------------------------------------------------------
/design/desktop-design.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/all-my-frontend-mini-projects/Intro-component-signup-form_frontend_project/HEAD/design/desktop-design.jpg


--------------------------------------------------------------------------------
/design/desktop-preview.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/all-my-frontend-mini-projects/Intro-component-signup-form_frontend_project/HEAD/design/desktop-preview.jpg


--------------------------------------------------------------------------------
/images/bg-intro-mobile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/all-my-frontend-mini-projects/Intro-component-signup-form_frontend_project/HEAD/images/bg-intro-mobile.png


--------------------------------------------------------------------------------
/images/bg-intro-desktop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/all-my-frontend-mini-projects/Intro-component-signup-form_frontend_project/HEAD/images/bg-intro-desktop.png


--------------------------------------------------------------------------------
/images/icon-error.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle fill="#FF7979" cx="12" cy="12" r="12"/><rect fill="#FFF" x="11" y="6" width="2" height="9" rx="1"/><rect fill="#FFF" x="11" y="17" width="2" height="2" rx="1"/></g></svg>


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Avoid accidental Sketch file upload 
 2 | ###############################################
 3 | ## Please do not remove line 5 - thanks! 🙂 ##
 4 | ###############################################
 5 | *.sketch
 6 | 
 7 | # Avoid accidental XD or Figma upload if you convert the design file
 8 | #######################################################
 9 | ## Please do not remove lines 11 and 12 - thanks! 🙂 ##
10 | #######################################################
11 | *.xd
12 | *.fig
13 | 
14 | # Avoid your project being littered with annoying .DS_Store files!
15 | .DS_Store
16 | 


--------------------------------------------------------------------------------
/style-guide.md:
--------------------------------------------------------------------------------
 1 | # Front-end Style Guide
 2 | 
 3 | ## Layout
 4 | 
 5 | The designs were created to the following widths:
 6 | 
 7 | - Mobile: 375px
 8 | - Desktop: 1440px
 9 | 
10 | ## Colors
11 | 
12 | ### Primary
13 | 
14 | - Red: hsl(0, 100%, 74%) 
15 | - Green: hsl(154, 59%, 51%)
16 | 
17 | ### Accent
18 | 
19 | - Blue: hsl(248, 32%, 49%)
20 | 
21 | ### Neutral
22 | 
23 | - Dark Blue: hsl(249, 10%, 26%) 
24 | - Grayish Blue: hsl(246, 25%, 77%)
25 | 
26 | ## Typography
27 | 
28 | ### Body Copy
29 | 
30 | - Font size: 16px
31 | 
32 | ### Font
33 | 
34 | - Family: [Poppins](https://fonts.google.com/specimen/Poppins)
35 | - Weights: 400, 500, 600, 700
36 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 Sarthak Sachdev
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
 1 | let inputFirstName = document.getElementById("firstname");
 2 | let inputLastName = document.getElementById("lastname");
 3 | let inputEmail = document.getElementById("email");
 4 | let inputPassword = document.getElementById("password");
 5 | 
 6 | let button = document.getElementById("button");
 7 | 
 8 | let nameerror = document.getElementById("nameerror");
 9 | let lastnameerror = document.getElementById("lastnameerror");
10 | let emailerror = document.getElementById("emailerror");
11 | let passerror = document.getElementById("passerror");
12 | 
13 | let erroricon1 = document.getElementById("erroricon1");
14 | let erroricon2 = document.getElementById("erroricon2");
15 | let erroricon3 = document.getElementById("erroricon3");
16 | let erroricon4 = document.getElementById("erroricon4");
17 | 
18 | button.addEventListener("click", (Event) => {
19 |   validateFirstName(inputFirstName.value);
20 |   validateLasttName(inputLastName.value);
21 |   validateEmail(inputEmail.value);
22 |   validatePassword(inputPassword.value);
23 | });
24 | 
25 | function validateFirstName(firstname) {
26 |   let regex = /^[\w'\-,.][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*(){}|~<>;:[\]]{2,}$/;
27 | 
28 |   if (regex.test(firstname) === true) {
29 |     nameerror.style.visibility = "hidden";
30 |     erroricon1.style.visibility = "hidden";
31 |   } else {
32 |     nameerror.style.visibility = "visible";
33 |     erroricon1.style.visibility = "visible";
34 |     inputFirstName.style.border = "1px solid Red";
35 |   }
36 | }
37 | 
38 | function validateLasttName(lastname) {
39 |   let regex = /^[\w'\-,.][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*(){}|~<>;:[\]]{2,}$/;
40 | 
41 |   if (regex.test(lastname) === true) {
42 |     lastnameerror.style.visibility = "hidden";
43 |     erroricon2.style.visibility = "hidden";
44 |   } else {
45 |     lastnameerror.style.visibility = "visible";
46 |     erroricon2.style.visibility = "visible";
47 |     inputLastName.style.border = "1px solid Red";
48 |   }
49 | }
50 | 
51 | function validateEmail(email) {
52 |   let regex =
53 |     /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
54 | 
55 |   if (regex.test(email) === true) {
56 |     emailerror.style.visibility = "hidden";
57 |     erroricon3.style.visibility = "hidden";
58 |   } else {
59 |     emailerror.style.visibility = "visible";
60 |     erroricon3.style.visibility = "visible";
61 |     inputEmail.style.border = "1px solid Red";
62 |   }
63 | }
64 | 
65 | function validatePassword(password) {
66 |   let regex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/gm;
67 | 
68 |   if (regex.test(password) === true) {
69 |     passerror.style.visibility = "hidden";
70 |     erroricon4.style.visibility = "hidden";
71 |   } else {
72 |     passerror.style.visibility = "visible";
73 |     erroricon4.style.visibility = "visible";
74 |     inputPassword.style.border = "1px solid Red";
75 |   }
76 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 
 7 |   <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
 8 |   <link rel="stylesheet" href="style.css">
 9 |   
10 |   <title>Sign-up form</title>
11 | 
12 |   <link rel="preconnect" href="https://fonts.googleapis.com">
13 | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14 | <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
15 |   
16 | </head>
17 | <body>
18 |   <main class="main-container">
19 | 
20 |     <div class="text-container">
21 |       <h1 class="title">Learn to code by watching others</h1>
22 |       <p class="description">
23 |         See how experienced developers solve problems in real-time. Watching scripted tutorials is great,
24 |         but understanding how developers think is invaluable.
25 |       </p>
26 |     </div>
27 | 
28 |     <div class="right-main-container">
29 |       <div class="purple-button"><strong>Try it free 7 days</strong> then $20/mo. thereafter</div>
30 |       <div class="form-container">
31 |         <form id="form" action="#" class="form">
32 |           <div class="input-wrapper"><input id="firstname" type="text" placeholder="FirstName" title="form-input"><svg id="erroricon1" class="error-icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle fill="#FF7979" cx="12" cy="12" r="12"/><rect fill="#FFF" x="11" y="6" width="2" height="9" rx="1"/><rect fill="#FFF" x="11" y="17" width="2" height="2" rx="1"/></g></svg></input></div>
33 |           <p id="nameerror">First Name cannot be empty</p>
34 |           <div class="input-wrapper"><input id="lastname" type="text" placeholder="LastName" title="form-input"><svg id="erroricon2" class="error-icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle fill="#FF7979" cx="12" cy="12" r="12"/><rect fill="#FFF" x="11" y="6" width="2" height="9" rx="1"/><rect fill="#FFF" x="11" y="17" width="2" height="2" rx="1"/></g></svg></input></div>
35 |           <p id="lastnameerror">Last Name cannot be empty</p>
36 |           <div class="input-wrapper"><input id="email" type="email" placeholder="Email" title="form-input"><svg id="erroricon3" class="error-icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle fill="#FF7979" cx="12" cy="12" r="12"/><rect fill="#FFF" x="11" y="6" width="2" height="9" rx="1"/><rect fill="#FFF" x="11" y="17" width="2" height="2" rx="1"/></g></svg></input></div>
37 |           <p id="emailerror">Looks like this is not an email</p>
38 |           <div class="input-wrapper"><input id="password" type="password" placeholder="Password" title="form-input"></input><svg id="erroricon4" class="error-icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle fill="#FF7979" cx="12" cy="12" r="12"/><rect fill="#FFF" x="11" y="6" width="2" height="9" rx="1"/><rect fill="#FFF" x="11" y="17" width="2" height="2" rx="1"/></g></svg></input></div>
39 |           <p id="passerror">Password cannot be empty</p>
40 |           <button id="button" type="submit">CLAIM YOUR FREE TRIAL</button>
41 |         </form>
42 |         <p class="disclaimer">By clicking the button, you are agreeing to our <span>Terms and Services</span></p>
43 |       </div>
44 |     </div>
45 |     <footer>
46 |       <p class="attribution">
47 |         Coded by <a href="https://github.com/SartHak-0-Sach">Sarthak Sachdev</a>.
48 |       </p>
49 |     </footer>
50 |   </main>
51 | 
52 | <script src="script.js"></script>
53 | </body>
54 | </html>
55 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Intro Component Signup Form
  2 | 
  3 | ## Welcome! 👋
  4 | 
  5 | ## Table of contents
  6 | 
  7 | - [Overview](#overview)
  8 |   - [The challenge](#the-challenge)
  9 |   - [How to setup the project](#how-to-setup-the-project)
 10 |   - [Screenshot](#screenshot)
 11 |   - [Links](#links)
 12 | - [My process](#my-process)
 13 |   - [Built with](#built-with)
 14 |   - [What I learned](#what-i-learned)
 15 |   - [Continued development](#continued-development)
 16 |   - [Useful resources](#useful-resources)
 17 | - [Author](#author)
 18 | - [Acknowledgments](#acknowledgments)
 19 | 
 20 | ## Overview
 21 | 
 22 | ### The challenge
 23 | 
 24 | Enroll in our coding course with ease using the Intro Component Signup Form! 
 25 | 
 26 | This signup component allows users to-
 27 | - View the optimal layout for the site depending on their device's screen size 
 28 | - See hover states for all interactive elements on the page 
 29 | - Receive error messages when the form is submitted if any input field is empty or if the email address is not formatted correctly.
 30 | 
 31 | ### How to setup the project
 32 | 
 33 | To set up the project locally, follow these steps:
 34 | 
 35 | 1. Clone the repository using GitHub Desktop or Git Bash:
 36 |     ```bash
 37 |     git clone https://github.com/SartHak-0-Sach/Intro-component-signup-form_frontend_project.git
 38 |     ```
 39 | 2. Open the project folder in your code editor.
 40 | 3. Run the project using a live server extension or deploy it using Netlify, Vercel, or another web hosting and deployment service.
 41 | 
 42 | ### Screenshot
 43 | 
 44 | ![Design Preview](./design/active-states.jpg)
 45 | 
 46 | ### Links
 47 | 
 48 | - Solution URL: [GitHub Repository](https://github.com/SartHak-0-Sach/Intro-component-signup-form_frontend_project)
 49 | - Live Site URL: [Live Site](https://signup-form-intro-component.netlify.app/)
 50 | 
 51 | ## My process
 52 | 
 53 | ### Built with
 54 | 
 55 | - HTML5
 56 | - CSS3
 57 | - JavaScript
 58 | 
 59 | You will find all the required assets in the `/design` folder. The assets are already optimized.
 60 | 
 61 | There is also a `style-guide.md` file containing the information you'll need, such as color palette and fonts.
 62 | 
 63 | ### What I learned
 64 | 
 65 | This project taught me how to use input validation using JavaScript which was implemented to validate first name, last name and email. Following snippet is one good example of the same-
 66 | 
 67 | ```js
 68 | function validateFirstName(firstname) {
 69 |   let regex = /^[\w'\-,.][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*(){}|~<>;:[\]]{2,}$/;
 70 | 
 71 |   if (regex.test(firstname) === true) {
 72 |     nameerror.style.visibility = "hidden";
 73 |     erroricon1.style.visibility = "hidden";
 74 |   } else {
 75 |     nameerror.style.visibility = "visible";
 76 |     erroricon1.style.visibility = "visible";
 77 |     inputFirstName.style.border = "1px solid Red";
 78 |   }
 79 | }
 80 | 
 81 | function validateLasttName(lastname) {
 82 |   let regex = /^[\w'\-,.][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*(){}|~<>;:[\]]{2,}$/;
 83 | 
 84 |   if (regex.test(lastname) === true) {
 85 |     lastnameerror.style.visibility = "hidden";
 86 |     erroricon2.style.visibility = "hidden";
 87 |   } else {
 88 |     lastnameerror.style.visibility = "visible";
 89 |     erroricon2.style.visibility = "visible";
 90 |     inputLastName.style.border = "1px solid Red";
 91 |   }
 92 | }
 93 | ```
 94 | 
 95 | ### Continued development
 96 | 
 97 | The continuously learning journey of a programmer never ends. This project made me realize that there are many concepts that I need to work upon including fundamentals like flex-box and its properties, to more complex concepts like working with fetch and async await in javascript. These areas are some that I think I need to work more upon in the upcoming future as they highlight some of the most significant regions of web development that are important for every developer to know of. 
 98 | 
 99 | These key points mentioned here will help me grow accountable and consistent towards improving at writing good quality code and be a successful full stack developer one day.
100 | 
101 | ### Useful resources
102 | 
103 | - [Harkirat Singh course notes](https://github.com/SartHak-0-Sach/harkirat-singh-course_code_and_notes) - I have added notes of all lectures along with code and lecture insights of all weeks along with bonus lectures to help you all as much as I can.
104 | - [My development code and notes](https://github.com/SartHak-0-Sach/cwh-web-dev-playlist_code_and_notes) - These are my notes that I made while working on my development skills in initial days and did these courses. Make sure to star the repository if you like it.✨💫
105 | - [MDN documentation hover state for CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover) - This is an amazing article which helped me finally understand hover states. I'd recommend it to anyone still learning this concept.
106 | 
107 | ## Author
108 | 
109 | <b><strong>Sarthak Sachdev</strong></b>
110 | - Website - [Sarthak Sachdev](https://itsmesarthak.netlify.app/)
111 | - LeetCode - [@sarthak_sachdev](https://leetcode.com/u/sarthak_sachdev/)
112 | - Twitter - [@sarthak_sach69](https://www.twitter.com/sarthak_sach69)
113 | 
114 | ## Acknowledgments
115 | 
116 | I feel like the solutions provided on the website and the continuous doubt solving by industry experts on discord for free is something that is unmatched by anyone else and need to be acknowledged for their efforts in improving me as a developer by suggesting the best practices in your respective tech stack.
117 | 
118 | ## Got feedback for me?
119 | 
120 | I love receiving feedback! I am always looking to improve my code and take up new innovative ideas to work upon. So if you have anything you'd like to mention, please email 'hi' at saarsaach30[at]gmail[dot]com.
121 | 
122 | If you liked this project make sure to spread the word and share it with all your friends.
123 | 
124 | **Happy coding!** ☺️🚀
125 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     box-sizing: border-box;
  3 |     margin: 0;
  4 |     padding: 0;
  5 |   }
  6 |   
  7 |   .attribution { font-size: 0.5rem; text-align: center; }
  8 |   .attribution a { color: hsl(228, 45%, 44%); }
  9 |   
 10 |   
 11 |   :root{
 12 |       /* ### Primary */
 13 |   
 14 |    --primary-Red: hsl(0, 100%, 74%); 
 15 |    --primary-Green: hsl(154, 59%, 51%);
 16 |   
 17 |   /* ### Accent */
 18 |   
 19 |   --accent-Blue: hsl(248, 32%, 49%);
 20 |   
 21 |   /* ### Neutral */
 22 |   
 23 | --neutral-DarkBlue: hsl(249, 10%, 26%); 
 24 | --neutral-Grayish-Blue: hsl(246, 25%, 77%);
 25 |   
 26 |   }
 27 |   
 28 |   body{
 29 |       font-family: "Poppins", sans-serif;
 30 |       min-height: 100vh;
 31 |       margin-top: -25px
 32 |   }
 33 |   
 34 |   .main-container {
 35 |       width: 100%;
 36 |       height: 100%;
 37 |       display: flex;
 38 |       flex-direction: column;
 39 |       align-items: center;
 40 |       background-image: url(images/bg-intro-mobile.png);
 41 |       background-color: var(--primary-Red);
 42 |       padding: 100px 20px 20px 20px;
 43 |   }
 44 |   
 45 |   .text-container{
 46 |       display: flex;
 47 |       flex-direction: column;
 48 |       text-align: center;
 49 |       align-items: center;
 50 |       justify-content: center;
 51 |       color: white;
 52 |       gap: 20px;
 53 |       margin-bottom: 50px;
 54 |       line-height: 1.5;
 55 |   }
 56 |   
 57 |   .title{
 58 |       font-size: 1.5rem;
 59 |       width: 90%;
 60 |       font-weight: 700;
 61 |   }
 62 |   
 63 |   .description{
 64 |       font-size: 1rem;
 65 |       width: 90%;
 66 |       text-align: center;
 67 |       opacity: 80%;
 68 |       font-weight: 600;
 69 |   }
 70 |   
 71 |   .purple-button{
 72 |       background-color: var(--accent-Blue);
 73 |       color: white;
 74 |       padding: 20px 60px;
 75 |       border-radius: 10px;
 76 |       text-align: center;
 77 |       font-weight: 200;
 78 |       font-size: 1rem;
 79 |       box-shadow: 0px 5px 5px hsl(0, 36%, 50%);;
 80 |       margin-bottom: 20px;
 81 |   }
 82 |   
 83 |   .form-container{
 84 |       display: flex;
 85 |       flex-direction: column;
 86 |       background-color: white;
 87 |       padding: 20px;
 88 |       min-height: 400px;
 89 |       border-radius: 10px;
 90 |       margin-bottom: 50px;
 91 |       position: relative;
 92 |   }
 93 |   
 94 |   form{
 95 |       display: flex;
 96 |       flex-direction: column;
 97 |       justify-content: space-evenly;
 98 |   }
 99 |   
100 |   input{
101 |       width: 100%;
102 |       height: 50px;
103 |       padding-left: 20px;
104 |       border-radius: 5px;
105 |       border:1px solid rgb(197, 197, 197);  
106 |       outline: none;  
107 |       font-size: 1rem;
108 |   }
109 |   
110 |   input:focus{
111 |       border: 1px solid;
112 |   }
113 |   
114 |   .input-wrapper{
115 |       position: relative;
116 |   }
117 |   
118 |   #erroricon1, #erroricon2, #erroricon3, #erroricon4{
119 |       color: #191919;
120 |       position: absolute;
121 |       right: 12px;
122 |       top: 50%;
123 |       transform: translateY(-50%);
124 |       visibility: hidden;
125 |   }
126 |      
127 |   
128 |   #nameerror, #lastnameerror, #emailerror, #passerror{
129 |       color: var(--primary-Red);
130 |       font-size: 0.7rem;
131 |       font-style: italic;
132 |       margin: 5px 0px;
133 |       text-align: right;
134 |       visibility: hidden;
135 |   }
136 |   
137 |   
138 |   
139 |   #button{
140 |       background-color: var(--primary-Green);
141 |       padding: 15px 10px;
142 |       font-size: 0.8rem;
143 |       color: white;
144 |       margin-bottom: 15px;
145 |       border-radius: 5px;
146 |       cursor: pointer;
147 |   }
148 |   
149 |   .disclaimer{
150 |       font-size: 0.6rem;
151 |       color: rgb(197, 184, 184);
152 |       text-align: center;
153 |       padding: 0 30px
154 |   }
155 |   
156 |   span{
157 |       color: var(--primary-Red);
158 |       font-weight: 600;
159 |   }
160 |   
161 |   #button:hover{
162 |       background-color: hsl(154, 66%, 69%);
163 |   }
164 |   
165 |   .attribution{
166 |       position: absolute;
167 |       transform: translate(-50%, -50%);
168 |   
169 |   }
170 |   
171 |   /* ------------------------------MEDIA QUERIES-------------------------- */
172 |   
173 |   @media screen and (min-width:900px) {
174 |       .main-container {
175 |           width: 100%;
176 |           min-height: 100vh;
177 |           display: flex;
178 |           flex-direction: row;
179 |           align-items: center;
180 |           justify-content: center;
181 |           gap: 60px;
182 |           background-image: url(images/bg-intro-desktop.png);
183 |           background-color: var(--primary-Red);
184 |           position: relative;
185 |       }
186 |       
187 |       .text-container{
188 |           display: flex;
189 |           flex-direction: column;
190 |           align-items: flex-start;
191 |           justify-content: left;
192 |           text-align: left;
193 |           width: 40%;
194 |           color: white;
195 |           gap: 20px;
196 |           margin-bottom: 50px;
197 |           line-height: 1.5;
198 |           
199 |       }
200 |       
201 |       .title{
202 |           font-size: 2.5rem;
203 |           text-align: left;
204 |           font-weight: 700;
205 |           line-height: 1.2;
206 |       }
207 |       
208 |       .description{
209 |           font-size: 1rem;
210 |           text-align: left;
211 |           opacity: 80%;
212 |           font-weight: 600;
213 |       }
214 |   
215 |       .right-main-container{
216 |           width: 40%;
217 |           height: auto;
218 |       }
219 |       
220 |       .purple-button{
221 |           background-color: var(--accent-Blue);
222 |           color: white;
223 |           padding: 20px 60px;
224 |           border-radius: 10px;
225 |           text-align: center;
226 |           font-weight: 200;
227 |           font-size: 1rem;
228 |           box-shadow: 0px 5px 5px hsl(0, 36%, 50%);
229 |           margin-bottom: 20px;
230 |       }
231 |       
232 |       .form-container{
233 |           display: flex;
234 |           flex-direction: column;
235 |           background-color: white;
236 |           min-height: 500px;
237 |           border-radius: 10px;
238 |           padding: 30px;
239 |           box-shadow: 0px 5px 5px hsl(0, 36%, 50%);
240 |       
241 |       }
242 |   
243 |       form{
244 |           display: flex;
245 |           flex-direction: column;
246 |           justify-content: space-between;   
247 |       }
248 |       
249 |       input{
250 |           padding: 30px 20px;
251 |           border-radius: 5px;
252 |           outline: none;
253 |       }
254 |       
255 |       button{
256 |           background-color: var(--primary-Green);
257 |           padding: 15px 10px;
258 |           font-size: 0.8rem;
259 |           color: white;
260 |           margin-bottom: 15px;
261 |           border-radius: 5px;
262 |       }
263 |       
264 |       .disclaimer{
265 |           font-size: 0.6rem;
266 |           color: rgb(197, 184, 184);
267 |           text-align: center;
268 |           padding: 0 30px
269 |       }
270 |       
271 |       span{
272 |           color: var(--primary-Red);
273 |           font-weight: 600;
274 |       }
275 |   
276 |       .attribution{
277 |           position: absolute;
278 |           bottom: 0;
279 |           left: 50%;
280 |           transform: translate(-50%, -50%);
281 |       }
282 |   }  
283 | 


--------------------------------------------------------------------------------