bar38.github.io/index.html at main · bar38/bar38.github.io · 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
<html>
  <head>
    <title>Bar38</title>
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Merriweather:wght@700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="main.css" />
    <meta name="description" content="「Bar38」は、Webエンジニアがご提供するオンラインコミュニティです。プログラミングやWebデザインなど、様々な領域でご利用いただけます。">
  </head>
  <body>
    <header>

      <span id="aboutUs" class="changeFingerMark">私たちについて</span>
      <span id="menu" class="changeFingerMark">お品書き</span>
      <span id="join" class="changeFingerMark">参加方法</span>
    </header>

    <article class="top"><h1>Bar38</h1></article>
    <article class="summary">
      <h2>私たちについて</h2>
      bar38はWebエンジニアのマスターによる、バーをイメージしたオンラインコミュニティです。<br />
      ふらっと立ち寄って、眺めてるだけもよし、喋ってもよしをコンセプトに、<br />
      IT初心者から上級者まで、すべての方をおもてなしいたします。
    </article>
    <article class="menuImages">
      <div class="menuList">
        <img class="menuimg" src="imgs/drink1.jpeg" alt="" />
        <img class="menuimg" src="imgs/drink2.jpeg" alt="" />
        <img class="menuimg" src="imgs/drink3.jpeg" alt="" />
      </div>
    </article>
    <article class="menu">
      <p>
        エンジニアからデザイナー、趣味プログラマー、学生、初心者など、<br />
        ITに関わるあらゆる層のお客様にご利用いただいています。
      </p>
      <h2>メニュー</h2>
      <div class="menuRow">
      <span class="menuData">
        <span class="menuName">プログラミング</span>
      </span>
      <span class="menuData">
        <span class="menuName">Webデザイン</span>
      </span>
    </div>
    <div class="menuRow">
      <span class="menuData">
        <span class="menuName">Webコーディング</span>
      </span>
      <span class="menuData">
        <span class="menuName">Webマーケティング</span>
        </span>
      </div>
    <div class="menuRow">
      <span class="menuData">
        <span class="menuName">学習相談</span>
      </span>
      <span class="menuData">
        <span class="menuName">転職相談</span>
        </span>
      </div>
      <div class="menuRow">
        <span class="menuData">
          <span class="menuName">ゲーム</span>
        </span>
        <span class="menuData">
          <span class="menuName">言語交換</span>
          </span>
        </div>
    </article>
    <article class="join">
      <h2>参加方法</h2>
      ※参加にはDiscordアカウントが必要です。<br />
      デスクトップ、またはスマートフォン用のDiscordアプリケーションインストールをお願いいたします。<br />

      <a href="https://discord.gg/zwrbrVXNVg" target="_blank" class="button">参加する</a>
    </article>
    <script src="js/main.js"></script>
  </body>
</html>