form/index.html at main · konradkam/form · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>10clouds Form</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./style/main.scss">
</head>

<body>
    <div class="background">
        <div class="background__blob"></div>
    </div>
    <article class="form">
        <header class="form__header">
            <h1 class="text-inverse">Your account</h1>
        </header>
        <section class="form__main">
            <div class="form__image"></div>
            <div class="form__block">
                <nav class="form__navigation">
                    <ul>
                        <li data-target="1">01</li>
                        <li data-target="2">02<br>Personal</li>
                        <li data-target="3">03</li>
                    </ul>
                </nav>
                <form class="form__content">
                    <fieldset class="step-container" data-step="1">
                    </fieldset>
                    <fieldset class="step-container" data-step="2">
                        <legend class="form__intro">Provide personal information so that we can create a new account for you.</legend>

                        <div class="form__row form__name-container mb-25">
                            <label for="input-name" class="form__label">Your name</label>
                            <input type="text" id="input-name" class="form__name field">
                        </div>

                        <fieldset class="form__row form__phone-container phone mb-25">
                            <legend class="form__label">Mobile</legend>
                            <div class="flex">
                                <select name="prefix" class="phone__prefix field">
                                    <option selected="" disabled="" hidden="" style="display: none" value=""></option>
                                    <option value="+48">+48 (PL)</option>
                                    <option value="+44">+44 (UK)</option>
                                    <option value="+1">+1 (US)</option>
                                </select>
                                <input type="tel" name="phone" class="phone__number" maxlength="9">
                            </div>
                        </fieldset>
                        <fieldset class="form__row mb-25">
                            <legend class="form__label mb-10">Can you play chess?</legend>
                            <div class="form__chess square-radios">
                                <label for="radio1">
                                    <input type="radio" id="radio1" class="field" name="chess">
                                    <div class="square-radios__box">
                                        <span class="square-radios__copy">Yes</span>
                                    </div>
                                </label>
                                <label for="radio2">
                                    <input type="radio" id="radio2" name="chess">
                                    <div class="square-radios__box">
                                        <span class="square-radios__copy">No</span>
                                    </div>
                                </label>
                            </div>

                        </fieldset>
                        <fieldset class="form__row date">
                            <legend class="form__label mb-10">Date of birth</legend>
                            <div class="form__date flex align-items-center">
                                <input type="text" name="day" class="date__day field field--all-borders" maxlength="2">
                                <span class="line"></span>
                                <select name="month" class="date__month field field--all-borders">
                                    <option selected="" disabled="" hidden="" style="display: none" value=""></option>
                                </select>
                                <span class="line"></span>
                                <select name="year" class="date__year field field--all-borders">
                                    <option selected="" disabled="" hidden="" style="display: none" value=""></option>
                                </select>
                            </div>
                        </fieldset>
                    </fieldset>
                    <fieldset class="step-container" data-step="3">
                    </fieldset>
                </form>
                <button class="btn btn--arrow form-button">continue</button>
            </div>
        </section>
    </article>
    <script src="./js/main.js"></script>
</body>

</html>