exampletheme/index.html at master · ivanzaiatc/exampletheme · 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
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="css/theme.css">
<link rel="stylesheet" href="css/demo.css">
<meta charset="UTF-8">

<head>
    <title>vananos theme example</title>
</head>

<body>
    <h1>vananos theme example</h1>
    <section class="preview">
        <h2>Button</h2>
        <button class="button" data-text="Click me">Click me</button>
    </section>
    <section class="preview">
        <h2>Input</h2>
        <div class="input-container">
            <input type="text" id="text-input" class="text-input" required>
            <div class="label-box"><label for="text-input">Name</label></div>
        </div>
    </section>
    <section class="preview">
        <h2>Checkbox</h2>
        <div class="input-container">
            <input type="checkbox" name="someCheckbox" id="someCheckbox" class="checkbox">
            <label for="someCheckbox">Нужен автомобиль</label>
        </div>
    </section>
    <section class="preview">
        <h2>Radio button</h2>
        <div class="radio-group">
            <div class="radio-container">
                <input type="radio" id="radio1" name="radio" checked>
                <label for="radio1">Самолетом</label>
            </div>
            <div class="radio-container">
                <input type="radio" id="radio2" name="radio">
                <label for="radio2">Машиной</label>
            </div>
            <div class="radio-container">
                <input type="radio" id="radio3" name="radio">
                <label for="radio3">Кораблем</label>
            </div>
        </div>
    </section>
    <section class="preview">
        <h2>Simple form example</h2>
        <div class="form-wrapper">
            <form action="#" method="POST" class="form-example">
                <div class="input-container">
                    <input type="text" id="name" class="text-input" required>
                    <div class="label-box"><label for="name">Name</label></div>
                </div>
                <div class="input-container">
                    <input type="text" id="surname" class="text-input" required>
                    <div class="label-box"><label for="surname">Surname</label></div>
                </div>
                <div class="input-container">
                    <input type="text" id="useremail" class="text-input" required>
                    <div class="label-box"><label for="useremail">Email</label></div>
                </div>
                <div class="input-container">
                    <label class="label">I'm: </label>
                    <div class="radio-group">
                        <div class="radio-container">
                            <input type="radio" id="male" name="radio" checked>
                            <label for="male">Male</label>
                        </div>
                        <div class="radio-container">
                            <input type="radio" id="female" name="radio">
                            <label for="female">Female</label>
                        </div>
                    </div>
                </div>
                <div class="input-container">
                    <input type="checkbox" id="accept" class="checkbox" required>
                    <label for="accept">I accept the user agreement</label>
                </div>
                <div>
                    <button type="reset" data-text="Reset" class="button">Reset</button>
                    <button type="submit" data-text="Submit" class="button">Submit</button>
                </div>
            </form>
        </div>
    </section>
</body>

</html>