├── README.md
├── index.html
├── script.js
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # HTML-CSS-JS-Contact-Page
2 |
3 | 
4 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Contact Page
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
42 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
2 |
3 | function switchTheme(e) {
4 | if (e.target.checked) {
5 | document.documentElement.setAttribute('data-theme', 'dark');
6 | }
7 | else {
8 | document.documentElement.setAttribute('data-theme', 'light');
9 | }
10 | }
11 |
12 | toggleSwitch.addEventListener('change', switchTheme, false);
13 |
14 |
15 | const name = document.getElementById('name');
16 | const email = document.getElementById('email');
17 | const message = document.getElementById('message');
18 | const contactForm = document.getElementById('contact-form');
19 | const errorElement = document.getElementById('error');
20 | const successMsg = document.getElementById('success-msg');
21 | const submitBtn = document.getElementById('submit');
22 |
23 | const validate = (e) => {
24 | e.preventDefault();
25 |
26 | if (name.value.length < 3) {
27 | errorElement.innerHTML = 'Your name should be at least 3 characters long.';
28 | return false;
29 | }
30 |
31 | if (!(email.value.includes('.') && (email.value.includes('@')))) {
32 | errorElement.innerHTML = 'Please enter a valid email address.';
33 | return false;
34 | }
35 |
36 | if (!emailIsValid(email.value)) {
37 | errorElement.innerHTML = 'Please enter a valid email address.';
38 | return false;
39 | }
40 |
41 | if (message.value.length < 15) {
42 | errorElement.innerHTML = 'Please write a longer message.';
43 | return false;
44 | }
45 |
46 | errorElement.innerHTML = '';
47 | successMsg.innerHTML = 'Thank you! I will get back to you as soon as possible.';
48 |
49 | e.preventDefault();
50 | setTimeout(function () {
51 | successMsg.innerHTML = '';
52 | document.getElementById('contact-form').reset();
53 | }, 6000);
54 |
55 | return true;
56 |
57 | }
58 |
59 | const emailIsValid = email => {
60 | return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
61 | }
62 |
63 | submitBtn.addEventListener('click', validate);
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --primary-color: #010712;
3 | --secondary-color: #818386;
4 | --bg-color: #FCFDFD;
5 | --button-color: #3B3636;
6 | --h1-color: #3F444C;
7 | }
8 |
9 | [data-theme="dark"] {
10 | --primary-color: #FCFDFD;
11 | --secondary-color: #818386;
12 | --bg-color: #010712;
13 | --button-color: #818386;
14 | --h1-color: #FCFDFD;
15 | }
16 |
17 | * {
18 | margin: 0;
19 | box-sizing: border-box;
20 | transition: all 0.3s ease-in-out;
21 | }
22 |
23 | .contact-container {
24 | display: flex;
25 | width: 100vw;
26 | height: 100vh;
27 | background: var(--bg-color);
28 | }
29 |
30 | .left-col {
31 | width: 45vw;
32 | height: 100%;
33 | background-image: url("https://www.history.com/.image/ar_1:1%2Cc_fill%2Ccs_srgb%2Cfl_progressive%2Cq_auto:good%2Cw_1200/MTYyNDg1MjE3MTI1Mjc5Mzk4/topic-london-gettyimages-760251843-promo.jpg");
34 | background-size: cover;
35 | background-repeat: no-repeat;
36 | }
37 |
38 | .right-col {
39 | background: var(--bg-color);
40 | width: 50vw;
41 | height: 100vh;
42 | padding: 5rem 3.5rem;
43 | }
44 |
45 | h1, label, button, .description {
46 | font-family: 'Jost', sans-serif;
47 | font-weight: 400;
48 | letter-spacing: 0.1rem;
49 | }
50 |
51 | h1 {
52 | color:var(--h1-color);
53 | text-transform: uppercase;
54 | font-size: 2.5rem;
55 | letter-spacing: 0.5rem;
56 | font-weight: 300;
57 | }
58 |
59 | p {
60 | color: var(--secondary-color);
61 | font-size: 0.9rem;
62 | letter-spacing: 0.01rem;
63 | width: 40vw;
64 | margin: 0.25rem 0;
65 | }
66 |
67 | label, .description {
68 | color: var(--secondary-color);
69 | text-transform: uppercase;
70 | font-size: 0.625rem;
71 | }
72 |
73 | form {
74 | width: 31.25rem;
75 | position: relative;
76 | margin-top: 2rem;
77 | padding: 1rem 0;
78 | }
79 |
80 | input, textarea, label {
81 | width: 40vw;
82 | display: block;
83 | }
84 |
85 | p, placeholder, input, textarea {
86 | font-family: 'Helvetica Neue', sans-serif;
87 | }
88 |
89 | input::placeholder, textarea::placeholder {
90 | color: var(--primary-color);
91 | }
92 |
93 | input, textarea {
94 | color: var(--primary-color);
95 | font-weight: 500;
96 | background: var(--bg-color);
97 | border: none;
98 | border-bottom: 1px solid var(--secondary-color);
99 | padding: 0.5rem 0;
100 | margin-bottom: 1rem;
101 | outline: none;
102 | }
103 |
104 | textarea {
105 | resize: none;
106 | }
107 |
108 | button {
109 | text-transform: uppercase;
110 | font-weight: 300;
111 | background: var(--button-color);
112 | color: var(--bg-color);
113 | width: 10rem;
114 | height: 2.25rem;
115 | border: none;
116 | border-radius: 2px;
117 | outline: none;
118 | cursor: pointer;
119 | }
120 |
121 | input:hover, textarea:hover, button:hover {
122 | opacity: 0.5;
123 | }
124 |
125 | button:active {
126 | opacity: 0.8;
127 | }
128 |
129 | /* Toggle Switch */
130 |
131 | .theme-switch-wrapper {
132 | display: flex;
133 | align-items: center;
134 | text-align: center;
135 | width: 160px;
136 | position: absolute;
137 | top: 0.5rem;
138 | right: 0;
139 | }
140 |
141 | .description {
142 | margin-left: 1.25rem;
143 | }
144 |
145 | .theme-switch {
146 | display: inline-block;
147 | height: 34px;
148 | position: relative;
149 | width: 60px;
150 | }
151 |
152 | .theme-switch input {
153 | display:none;
154 | }
155 |
156 | .slider {
157 | background-color: #ccc;
158 | bottom: 0;
159 | cursor: pointer;
160 | left: 0;
161 | position: absolute;
162 | right: 0;
163 | top: 0;
164 | transition: .4s;
165 | }
166 |
167 | .slider:before {
168 | background-color: #fff;
169 | bottom: 0.25rem;
170 | content: "";
171 | width: 26px;
172 | height: 26px;
173 | left: 0.25rem;
174 | position: absolute;
175 | transition: .4s;
176 | }
177 |
178 | input:checked + .slider {
179 | background-color: var(--button-color);
180 | }
181 |
182 | input:checked + .slider:before {
183 | transform: translateX(26px);
184 | }
185 |
186 | .slider.round {
187 | border-radius: 34px;
188 | }
189 |
190 | .slider.round:before {
191 | border-radius: 50%;
192 | }
193 |
194 | #error, #success-msg {
195 | width: 40vw;
196 | margin: 0.125rem 0;
197 | font-size: 0.75rem;
198 | text-transform: uppercase;
199 | font-family: 'Jost';
200 | color: var(--secondary-color);
201 | }
202 | }
203 |
204 | #success-msg {
205 | transition-delay: 3s;
206 | }
207 |
208 | @media only screen and (max-width: 950px) {
209 | .logo {
210 | width: 8rem;
211 | }
212 | h1 {
213 | font-size: 1.75rem;
214 | }
215 | p {
216 | font-size: 0.7rem;
217 | }
218 | input, textarea, button {
219 | font-size: 0.65rem;
220 | }
221 | .description {
222 | font-size: 0.3rem;
223 | margin-left: 0.4rem;
224 | }
225 | button {
226 | width: 7rem;
227 | }
228 | .theme-switch-wrapper {
229 | width: 120px;
230 | }
231 | .theme-switch {
232 | height: 28px;
233 | width: 50px;
234 | }
235 |
236 | .theme-switch input {
237 | display:none;
238 | }
239 |
240 | .slider:before {
241 | background-color: #fff;
242 | bottom: 0.25rem;
243 | content: "";
244 | width: 20px;
245 | height: 20px;
246 | left: 0.25rem;
247 | position: absolute;
248 | transition: .4s;
249 | }
250 | input:checked + .slider:before {
251 | transform: translateX(16px);
252 | }
253 |
254 | .slider.round {
255 | border-radius: 15px;
256 | }
257 |
258 | .slider.round:before {
259 | border-radius: 50%;
260 | }
261 |
262 | }
--------------------------------------------------------------------------------