reference/index.html at master · togglab/reference · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="cont">
      <h2>Container</h2>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit
        consequatur libero quidem? Officiis explicabo veniam aut assumenda
        recusandae itaque dignissimos nisi incidunt, est quod, eligendi eum
        commodi ad, vel corrupti? Lorem ipsum dolor sit amet consectetur
        adipisicing elit. Velit asperiores laborum at, facere possimus voluptate
        dicta numquam rem animi recusandae. Iusto et blanditiis non incidunt
        aliquam nobis suscipit, doloremque exercitationem.
      </p>
    </div>
    <div class="forms">
      <input
        type="text"
        name=""
        id=""
        class="form-ctrl"
        placeholder="Input Text"
      />
      <input type="date" name="" id="" class="form-ctrl" />
      <div class="form-area">
        <p class="form-label">Toogle Switch</p>
        <label class="switch">
          <input type="checkbox" />
          <span class="slider"></span>
        </label>
      </div>
      <input type="file" name="" id="" class="form-ctrl" />
      <input
        type="search"
        name=""
        id=""
        class="form-ctrl"
        placeholder="Search here"
      />
      <div class="form-area">
        <label for="" class="form-label">Radio buttons</label>
        <input type="radio" name="" id="" class="form-ctrl" />
      </div>
      <select name="" id="" class="form-ctrl">
        <option value="Option value 1">Value one</option>
        <option value="Option value 2">Value two</option>
      </select>
      <a href="#">A hyperlink</a>
      <button class="btn">Button Full</button>
    </div>
    <div class="cont-fluid">
      <div class="card">
        <img
          src="https://wallpaperaccess.com/full/815341.jpg"
          alt=""
          class="card-img"
        />
        <h1 class="card-header">Card title</h1>
        <div class="card-content">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi omnis
          laboriosam perferendis, facere recusandae voluptatibus deleniti?
          Repellendus nulla sint nobis, quia temporibus necessitatibus dolores
          adipisci totam odit? Fuga, odit omnis! Lorem ipsum dolor sit amet
          consectetur adipisicing elit. Sunt at quidem numquam nihil cum ab
          eveniet ratione rem, optio aspernatur dolores non vel fugiat dolorem
          harum beatae maiores sapiente unde?
        </div>
      </div>
      <div class="card">
        <img
          src="https://wallpaperaccess.com/full/815341.jpg"
          alt=""
          class="card-img"
        />
        <h1 class="card-header">Card title</h1>
        <div class="card-content">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi omnis
          laboriosam perferendis, facere recusandae voluptatibus deleniti?
          Repellendus nulla sint nobis, quia temporibus necessitatibus dolores
          adipisci totam odit? Fuga, odit omnis! Lorem ipsum dolor sit amet
          consectetur adipisicing elit. Sunt at quidem numquam nihil cum ab
          eveniet ratione rem, optio aspernatur dolores non vel fugiat dolorem
          harum beatae maiores sapiente unde?
        </div>
      </div>
    </div>
  </body>
</html>