Skip to content

Commit ab685ca

Browse files
Fukusan64Fukusan64
authored
Merge pull request #2 from coderdojo-japan/kp54/add-contact
add contact banner
2 parents ae4c1fb + c0a2b76 commit ab685ca

File tree

1 file changed

+104
-35
lines changed

1 file changed

+104
-35
lines changed

‎index.html‎

Lines changed: 104 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -8,68 +8,137 @@
88

99
<!-- Settings for social web services (as minimum as possible) -->
1010
<title>DojoCon Japan - 年１回の CoderDojo カンファレンス</title>
11-
<meta name="description" content="DojoCon Japan とは、日本の CoderDojo コミュニティメンバーが全国から集まる年に１度のカンファレンスです。">
12-
<meta property="og:type" content="website" />
13-
<meta property="og:image" content="https://dojocon2025.coderdojo.jp/img/cover.jpg">
14-
<meta name="twitter:card" content="summary_large_image" />
11+
<meta name="description" content="DojoCon Japan とは、日本の CoderDojo コミュニティメンバーが全国から集まる年に１度のカンファレンスです。">
12+
<meta property="og:type" content="website" />
13+
<meta property="og:image" content="https://dojocon2025.coderdojo.jp/img/cover.jpg">
14+
<meta name="twitter:card" content="summary_large_image" />
1515

1616
<!-- Settings for web browsers (as minimum as possible) -->
17-
<link rel='canonical' href='https://dojocon2025.coderdojo.jp/' />
18-
<link rel='shortlink' href='https://dojocon2025.coderdojo.jp/' />
19-
<link rel="manifest" href="/site.webmanifest">
20-
<link rel="icon" href="/favicon.ico"> <!-- 32×3 -->
21-
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
17+
<link rel='canonical' href='https://dojocon2025.coderdojo.jp/' />
18+
<link rel='shortlink' href='https://dojocon2025.coderdojo.jp/' />
19+
<link rel="manifest" href="/site.webmanifest">
20+
<link rel="icon" href="/img/favicon.ico"> <!-- 32×32 -->
21+
<link rel="apple-touch-icon" href="/img/apple-touch-icon.png"> <!-- 180×180 -->
2222

2323
<style type="text/css">
2424
@import"https://fonts.googleapis.com/css2?family=Space+Mono&display=swap";
25-
html { scroll-behavior:smooth }
25+
26+
html {
27+
scroll-behavior: smooth
28+
}
29+
2630
body {
27-
font-family:"Roboto","Noto Sans JP",sans-serif;
28-
margin:0;
29-
text-align:center;
30-
color:#046;
31-
padding-top:60px;
31+
font-family: "Roboto", "Noto Sans JP", sans-serif;
32+
margin: 0;
33+
text-align: center;
34+
color: #046;
35+
padding-top: 60px;
3236
}
37+
3338
.container {
34-
text-align: center;
35-
font-size: 4vw;
36-
font-family: 'Space Mono';
39+
text-align: center;
40+
font-size: 4vw;
41+
font-family: 'Space Mono';
3742
}
3843

39-
.cursor::after{
40-
content:"_";
41-
animation: blink 1s infinite
44+
.cursor::after {
45+
content: "_";
46+
animation: blink 1s infinite
4247
}
43-
@keyframes blink{
44-
0% { opacity:0 }
45-
50% { opacity:0 }
46-
51% { opacity:1 }
47-
100% { opacity:1 }
48+
49+
@keyframes blink {
50+
0% {
51+
opacity: 0
52+
}
53+
54+
50% {
55+
opacity: 0
56+
}
57+
58+
51% {
59+
opacity: 1
60+
}
61+
62+
100% {
63+
opacity: 1
64+
}
65+
}
66+
67+
.contact {
68+
font-size: min(24px, 3vw);
69+
background-color: #2275ca;
70+
color: #f7f7f7;
71+
padding-top: 0.5em;
72+
padding-bottom: 0.5em;
73+
}
74+
75+
.button {
76+
background-color: #2275ca;
77+
color: #f7f7f7;
78+
border-radius: 0.5em;
79+
border: 1px solid;
80+
padding-left: 1em;
81+
padding-right: 1em;
82+
padding-bottom: 0.5em;
83+
padding-top: 0.5em;
84+
text-decoration: none;
85+
display: inline-block;
86+
}
87+
88+
.button:hover {
89+
background-color: #f7f7f7;
90+
color: #333;
91+
}
92+
93+
.my-0 {
94+
margin-top: 0px;
95+
margin-bottom: 0px;
96+
}
97+
98+
.my-1em {
99+
margin-top: 1em;
100+
margin-bottom: 1em;
101+
}
102+
103+
.px-1em {
104+
padding-left: 1em;
105+
padding-right: 1em;
106+
}
107+
108+
.py-1em {
109+
padding-top: 1em;
110+
padding-bottom: 1em;
48111
}
49112
</style>
50113
</head>
51114

52115
<body>
53116
<div class='container'>
54117
<div style='margin-top: 1.0em;'>
55-
<img src="/img/logo.webp" loading="lazy" width='50%'
56-
alt="CoderDojo Logo"
57-
title="CoderDojo Logo" />
118+
<img src="/img/logo.webp" loading="lazy" width='50%' alt="CoderDojo Logo" title="CoderDojo Logo" />
58119
</div>
59120
<div style="margin-top: 1.0em;">DojoCon Japan 2025</div>
60121
<div style="margin-top: 0.0em;">"Inspire Next 〜好奇心に火をつけよう〜"</div>
61122
<div style="margin-top: 0.5em;">2025年10月25日（土曜）開催決定!</div>
62123
<div style="margin-top: 0.5em;">【開催場所 福岡県久留米市 久留米シティプラザ】</div>
63124
<div style="margin-top: 0.5em;" class="cursor">SAVE THE DATE</div>
125+
126+
<section class="contact px-1em py-1em" style="margin-top: 2em;">
127+
<p class="my-0"><strong>CONTACT</strong></p>
128+
<h2 class="my-0">お問い合わせ</h2>
129+
<p class="my-1em">DojoCon Japan 2025 についてのお問い合わせは以下のリンク先（Googleフォーム）よりお願いいたします。</p>
130+
<a class="button" href="https://forms.gle/t9ctDcuZZ8cqqFtR6" target="_blank" rel="noopener noreferrer">お問い合わせする</a>
131+
</section>
132+
64133
<div style='margin-top: 2.0em;'>
65-
<img src="/img/cover-photo.webp" loading="lazy" width='100%'
66-
alt="DojoCon Japan Cover Photo"
67-
title="DojoCon Japan Cover Photo" />
134+
<img src="/img/cover-photo.webp" loading="lazy" width='100%' alt="DojoCon Japan Cover Photo"
135+
title="DojoCon Japan Cover Photo" />
68136
</div>
137+
69138
<div style='margin-top: 2.0em; margin-bottom: 0.5em; font-size: 55%;'>
70-
<a href='https://dojocon.coderdojo.jp/' style='text-decoration: none;'>
71-
&raquo; 過去の開催事例を見る
72-
</a>
139+
<a href='https://dojocon.coderdojo.jp/' style='text-decoration: none;'>
140+
&raquo; 過去の開催事例を見る
141+
</a>
73142
</div>
74143
</div>
75144
</body>

0 commit comments

Comments
 (0)