Skip to content

Commit 8c2a50d

Browse files
solygambassolygambas
committed
add verify account UI
1 parent 685e80d commit 8c2a50d

File tree

7 files changed

+184
-14
lines changed

7 files changed

+184
-14
lines changed

‎38-mobile tab navigation/index.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -15,22 +15,22 @@
1515
<body>
1616
<div class="phone">
1717
<img
18-
src="https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1053&q=80"
18+
src="https://images.unsplash.com/photo-1610652492500-ded49ceeb378?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
1919
alt="home"
2020
class="content show"
2121
/>
2222
<img
23-
src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
23+
src="https://images.unsplash.com/photo-1611038917003-9227e16e0d9f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
2424
alt="work"
2525
class="content"
2626
/>
2727
<img
28-
src="https://images.unsplash.com/photo-1471107340929-a87cd0f5b5f3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1266&q=80"
28+
src="https://images.unsplash.com/photo-1611038916975-f6b3ded00212?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=554&q=80"
2929
alt="blog"
3030
class="content"
3131
/>
3232
<img
33-
src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80"
33+
src="https://images.unsplash.com/photo-1611038917094-02aea0f65649?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
3434
alt="about"
3535
class="content"
3636
/>

‎38-mobile tab navigation/style.css

+3-3
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
}
66

77
body {
8-
background-color: rgba(155, 89, 182, 0.7);
8+
background-color: #222457;
99
font-family: "Open Sans", sans-serif;
1010
display: flex;
1111
align-items: center;
@@ -56,7 +56,7 @@ nav ul {
5656
}
5757

5858
nav li {
59-
color: #777;
59+
color: #6461a2;
6060
cursor: pointer;
6161
flex: 1;
6262
padding: 10px;
@@ -70,5 +70,5 @@ nav ul li p {
7070

7171
nav ul li:hover,
7272
nav ul li.active {
73-
color: #8e44ad;
73+
color: #222457;
7474
}

‎39-password strength background/index.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@
1616
<div class="background" id="background"></div>
1717
<div class="bg-white rounded p-10 text-center shadow-md">
1818
<h1 class="text-3xl">Image Password Strength</h1>
19-
<p class="text-sm text-gray-700">Change the password to see the effect</p>
19+
<p class="text-sm pt-1 text-gray-700">
20+
Change the password to see the effect
21+
</p>
2022
<div class="my-4 text-left">
2123
<label for="email" class="text-gray-900">Email:</label>
2224
<input

‎41-verify account UI/index.html

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
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+
<link rel="stylesheet" href="style.css" />
7+
<title>Verify Account</title>
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h2>Verify Your Account</h2>
12+
<p>
13+
We emailed you the six digit code to cool_guy@email.com <br />
14+
Enter the code below to confirm your email address.
15+
</p>
16+
<div class="code-container">
17+
<input
18+
type="number"
19+
class="code"
20+
placeholder="0"
21+
min="0"
22+
max="9"
23+
required
24+
/>
25+
<input
26+
type="number"
27+
class="code"
28+
placeholder="0"
29+
min="0"
30+
max="9"
31+
required
32+
/>
33+
<input
34+
type="number"
35+
class="code"
36+
placeholder="0"
37+
min="0"
38+
max="9"
39+
required
40+
/>
41+
<input
42+
type="number"
43+
class="code"
44+
placeholder="0"
45+
min="0"
46+
max="9"
47+
required
48+
/>
49+
<input
50+
type="number"
51+
class="code"
52+
placeholder="0"
53+
min="0"
54+
max="9"
55+
required
56+
/>
57+
<input
58+
type="number"
59+
class="code"
60+
placeholder="0"
61+
min="0"
62+
max="9"
63+
required
64+
/>
65+
</div>
66+
<small class="info">
67+
This is design only. We didn't actually send you an email as we don't
68+
have your email, right?
69+
</small>
70+
</div>
71+
<script src="script.js"></script>
72+
</body>
73+
</html>

‎41-verify account UI/script.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
const codes = document.querySelectorAll(".code");
2+
3+
codes[0].focus();
4+
5+
codes.forEach((code, index) => {
6+
code.addEventListener("keydown", (e) => {
7+
if (e.key >= 0 && e.key < 9) {
8+
codes[index].value = "";
9+
setTimeout(() => {
10+
codes[index + 1].focus();
11+
}, 10);
12+
} else if (e.key === "Backspace") {
13+
setTimeout(() => {
14+
codes[index - 1].focus();
15+
}, 10);
16+
}
17+
});
18+
});

‎41-verify account UI/style.css

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Muli:wght@300;700&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-color: #fbfcfe;
9+
font-family: "Muli", sans-serif;
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
height: 100vh;
14+
overflow: hidden;
15+
margin: 0;
16+
}
17+
18+
.container {
19+
background-color: #fff;
20+
border: 3px #000 solid;
21+
border-radius: 10px;
22+
padding: 30px;
23+
max-width: 1000px;
24+
text-align: center;
25+
}
26+
27+
.code-container {
28+
display: flex;
29+
align-items: center;
30+
justify-content: center;
31+
margin: 40px 0;
32+
}
33+
34+
.code {
35+
border-radius: 5px;
36+
font-size: 75px;
37+
height: 120px;
38+
width: 100px;
39+
border: 1px solid #eee;
40+
margin: 1%;
41+
text-align: center;
42+
font-weight: 300;
43+
-moz-appearance: textfield;
44+
}
45+
46+
.code::-webkit-inner-spin-button,
47+
.code::-webkit-outer-spin-button {
48+
-webkit-appearance: none;
49+
margin: 0;
50+
}
51+
52+
.code:valid {
53+
border-color: #3498db;
54+
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.25);
55+
}
56+
57+
.info {
58+
background-color: #eaeaea;
59+
display: inline-block;
60+
padding: 10px;
61+
line-height: 20px;
62+
max-width: 400px;
63+
color: #777;
64+
border-radius: 5px;
65+
}
66+
67+
@media (max-width: 800px) {
68+
.code-container {
69+
flex-wrap: wrap;
70+
}
71+
72+
.code {
73+
font-size: 50px;
74+
height: 70px;
75+
max-width: 60px;
76+
}
77+
}

‎README.md

+6-6
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,12 @@
4343
| 35 | [Image Carousel](https://github.com/solygambas/html-css-fifty-projects/tree/master/35-image%20carousel) | [Live Demo](https://codepen.io/solygambas/full/zYKbQZK) |
4444
| 36 | [Hoverboard](https://github.com/solygambas/html-css-fifty-projects/tree/master/36-hoverboard) | [Live Demo](https://codepen.io/solygambas/full/OJRqYKK) |
4545
| 37 | [Pokedex](https://github.com/solygambas/html-css-fifty-projects/tree/master/37-pokedex) | [Live Demo](https://codepen.io/solygambas/full/gOwygyP) |
46-
| 38 | [Mobile Tab Navigation](https://github.com/solygambas/html-css-fifty-projects/tree/master/38-mobile%20tab%20navigation) | [Live Demo](/mobile-tab-navigation/) |
47-
| 39 | [Password Strength Background](https://github.com/solygambas/html-css-fifty-projects/tree/master/39-password%20strength%20background) | [Live Demo](/password-strength-background/) |
48-
| 40 | [3D Background Boxes](https://github.com/solygambas/html-css-fifty-projects/tree/master/40-3D%20boxes%20background) | [Live Demo](/3d-background-boxes/) |
49-
| 41 | [Verify Account UI](https://github.com/solygambas/html-css-fifty-projects/tree/master/41-verify%20account%20UI) | [Live Demo](/verify-account-ui/) |
50-
| 42 | [Live User Filter](https://github.com/solygambas/html-css-fifty-projects/tree/master/42-live%20user%20filter) | [Live Demo](/live-user-filter/) |
51-
| 43 | [Feedback UI Design](https://github.com/solygambas/html-css-fifty-projects/tree/master/43-feedback%20UI%20design) | [Live Demo](/feedback-ui-design/) |
46+
| 38 | [Mobile Tab Navigation](https://github.com/solygambas/html-css-fifty-projects/tree/master/38-mobile%20tab%20navigation) | [Live Demo](https://codepen.io/solygambas/full/eYdoexM) |
47+
| 39 | [Password Strength Background](https://github.com/solygambas/html-css-fifty-projects/tree/master/39-password%20strength%20background) | [Live Demo](https://codepen.io/solygambas/full/YzGMYzz) |
48+
| 40 | [3D Background Boxes](https://github.com/solygambas/html-css-fifty-projects/tree/master/40-3D%20boxes%20background) | [Live Demo](https://codepen.io/solygambas/full/zYKXpBe) |
49+
| 41 | [Verify Account UI](https://github.com/solygambas/html-css-fifty-projects/tree/master/41-verify%20account%20UI) | [Live Demo](https://codepen.io/solygambas/full/KKgYZWR) |
50+
| 42 | [Live User Filter](https://github.com/solygambas/html-css-fifty-projects/tree/master/42-live%20user%20filter) | [Live Demo](https://codepen.io/solygambas/full/OJRGzjg) |
51+
| 43 | [Feedback UI Design](https://github.com/solygambas/html-css-fifty-projects/tree/master/43-feedback%20UI%20design) | [Live Demo](https://codepen.io/solygambas/full/PoGgEOm) |
5252
| 44 | [Custom Range Slider](https://github.com/solygambas/html-css-fifty-projects/tree/master/44-custom%20range%20slider) | [Live Demo](/custom-range-slider/) |
5353
| 45 | [Netflix Mobile Navigation](https://github.com/solygambas/html-css-fifty-projects/tree/master/45-netflix%20mobile%20navigation) | [Live Demo](/netflix-mobile-navigation/) |
5454
| 46 | [Quiz App](https://github.com/solygambas/html-css-fifty-projects/tree/master/46-quiz%20app) | [Live Demo](/quiz-app/) |

0 commit comments

Comments
 (0)