raku/test.html at main · linkalls/raku · 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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html>

  <head>
    <title>CSS Test Page</title>
    <link rel="stylesheet" href="raku.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    <script src="sns-share.js"></script>
  </head>

  <body class="fade-in">

    <header>
      <h1>CSS Test Page</h1>
      <p>様々なCSS要素のテスト</p>
    </header>

    <nav>
      <ul>
        <li><a href="./index.html">Home</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

    <main>
      <section>
        <h2>見出し (h2)</h2>
        <p>通常の段落テキスト。
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Nulla vitae elit libero, a pharetra augue.
          Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
        </p>
        <blockquote>
          引用文の例です。他のテキストとは異なるスタイルで表示されます。
        </blockquote>
      </section>

      <section class="features">
        <h2>機能</h2>
        <div>
          <h3>機能1</h3>
          <p>機能1の説明</p>
        </div>
        <div>
          <h3>機能2</h3>
          <p>機能2の説明</p>
        </div>
        <div>
          <h3>機能3</h3>
          <p>機能3の説明</p>
        </div>
      </section>

      <section>
        <h2>フォーム</h2>
        <div class="form-group">
          <label for="name">名前:</label>
          <input type="text" id="name" name="name">
        </div>
        <div class="form-group">
          <label for="email">メールアドレス:</label>
          <input type="email" id="email" name="email">
        </div>
        <button type="submit" class="primary">送信</button>
        <button type="button" class="secondary">キャンセル</button>
        <button type="button" class="secondary" disabled>無効化されたボタン</button>
      </section>

      <section>
        <h2>テーブル</h2>
        <table>
          <thead>
            <tr>
              <th>項目1</th>
              <th>項目2</th>
              <th>項目3</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>データ1</td>
              <td>データ2</td>
              <td>データ3</td>
            </tr>
            <tr>
              <td>データ4</td>
              <td>データ5</td>
              <td>データ6</td>
            </tr>
          </tbody>
        </table>
      </section>

      <section>
        <h2>アラート</h2>
        <div alert-type="primary">プライマリーアラート</div>
        <div alert-type="secondary">セカンダリーアラート</div>
        <div alert-type="error">エラーアラート</div>
        <div alert-type="warning">警告アラート</div>
        <div alert-type="info">情報アラート</div>
      </section>

      <section>
        <h2>コード</h2>
        <pre>
          <code>
            function greet(name) {
            console.log("Hello, " + name + "!");
            }
          </code>
        </pre>
      </section>
    </main>

    <section>
      <div class="dropdown">
        <button class="primary">snsで共有</button>
        <div class="dropdown-menu">
          <div class="social-icons">
            <x-share></x-share>
            <f-share></f-share>
            <th-share></th-share>
            <normal-share></normal-share>
            <!-- <a href="https://twitter.com/" target="_blank"><span class="fab fa-twitter" aria-hidden="true"></span></a> -->
            <!-- <a href="https://www.facebook.com/" target="_blank"><span class="fab fa-facebook"　aria-hidden="true"></span></a> -->
            <!-- <a href="https://www.instagram.com/" target="_blank"><span class="fab fa-instagram"　aria-hidden="true"></span></a> -->
          </div>
        </div>
      </div>
    </section>

    <footer>
      <p>&copy; 2024 Your Company</p>
    </footer>

  </body>

</html>