-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
142 lines (127 loc) · 5.81 KB
/
index.html
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
141
142
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="説明文">
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css" />
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Sawarabi+Gothic" rel="stylesheet">
<title>MySchool i</title>
</head>
<body>
<!-- Header -->
<header id="header" class="header">
<h1 class="site-title">
<a href="index.html"> MySchool <span class="i">i</span> </a>
</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#service">Service</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li>
<a href="https://www.twitter.com" target="_blank"><img src="./img/twitter.png" rel="noopener noreferrer" alt="Twitter" class="icon"></a>
</li>
</ul>
</nav>
</header>
<!-- Main -->
<div id="main" class="main">
<picture>
<source media="(max-width: 600px)" srcset="./img/main-sp.jpg">
<img src="./img/main-pc.jpg" alt="">
</picture>
</div>
<!-- about -->
<section id="about" class="wrapper">
<h2 class="sec-title sec-title-about">About</h2>
<div class="sec-main">
<ul>
<li class="msi"><b>MySchool <span class="i">i</span></b></li>
<li><b id="bold">学生向けの情報共有サイト</b></li>
<li>課題や試験範囲を友人と共有してまとめられる</li>
<li>誰でも<b id="bold">無料</b>で始められる</li>
</ul>
<p>みんなが少しずつ持っている情報を集めて学校についての情報を網羅し、忘れ物や提出物の期限超過を防ぎます。<br>簡単に登録できて誰でも無料で利用できます。また、期限などをLINEで通知するように設定もできます。</p>
</div>
</section>
<!-- service -->
<div class="works9"></div>
<section id="service" class="wrapper">
<h2 class="sec-title">Service</h2>
<ul>
<li><a href="https://kanetyengineer.github.io/ToDo-List-App-main/"><img src="./img/works1.jpg" alt="ToDoList"></li></a>
<li><a href="https://kanetyengineer.github.io/calendar/"><img src="./img/works2.jpg" alt="Calendar"></li></a>
<li><a href="https://kanetyengineer.github.io/HomeworkMEMO/"><img src="./img/works3.jpg" alt="Homework＆MEMO"></li></a>
<li><a href="https://kanetyengineer.github.io/Stopwatch/"><img src="./img/works4.jpg" alt="Stopwatch"></li></a>
<li><a href=""><img src="./img/works5.jpg" alt="works5"></li></a>
<li><a href=""><img src="./img/works6.jpg" alt="works6"></li></a>
<li><a href=""><img src="./img/works3.jpg" alt="works3"></li></a>
<li><a href=""><img src="./img/works4.jpg" alt="works4"></li></a>
<li><a href=""><img src="./img/works1.jpg" alt="works1"></li></a>
</ul>
</section>
</div>
<!-- news -->
<section id="news" class="wrapper">
<h2 class="sec-title">News</h2>
<div class="sec-news">
<dl>
<dt>2023/08/04</dt>
<dd>Sample1</dd>
<dt>2023/08/04</dt>
<dd>Sample2</dd>
<dt>2023/08/04</dt>
<dd>Sample3</dd>
<dt>2023/08/04</dt>
<dd>Sample4</dd>
</dl>
</div>
</section>
<!-- contact -->
<section id="contact" class="wrapper">
<h2 class="sec-title">Contact</h2>
<p>お問い合わせは以下のフォームから</p>
<form action="https://api.staticforms.xyz/submit" method="post">
<input type="hidden" name="accessKey" value="ddeab6b7-a528-450c-9a4e-95f0cb6cdfcf">
<dl>
<dt><label for="name">お名前</label></dt>
<dd><input type="text" name="name" id="name" required></dd>
<dt><label for="email">メールアドレス</label></dt>
<dd><input type="text" name="email" id="email" required></dd>
<dt><label for="text">件名</label></dt>
<dd><input type="text" name="subject" id="subject" required></dd>
<dt><label for="content">内容</label></dt>
<dd><textarea name="message" id="content" cols="30" rows="10" required></textarea></dd>
</dl>
<p class="submit-p">送信に成功すると「{"message":"Email Sent","success":true}」が表示されます。表示されたらブラウザバックしてください。
<br>この文が表示されない場合はもう一度送信してください。</p>
<div class="button"><input type="submit" value="送信"></div>
</form>
</section>
<script src="https://unpkg.com/scrollreveal"></script>
<script>
//共通のオプション設定
ScrollReveal({
reset: false,
distance: "60px",
duration: 2000, //2sかけてアニメーション
delay: 200 /* 0.2s後に発動 */,
});
ScrollReveal().reveal(".main", {
delay: 200,
origin: "bottom",
});
ScrollReveal().reveal(".sec-title, .sec-main, works9, sec-news", {
delay: 100,
origin: "bottom",
});
// ScrollReveal().reveal(".main", {
// delay: 200,
// origin: "bottom",
// });
</script>
</body>
</html>