-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
139 lines (131 loc) · 6.25 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
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/ress.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<title>思い出記録アプリ/ぷれめも</title>
</head>
<body>
<img class="button__text" src="./images/text.png" alt="">
<a href="#"><img class="button__img" src="./images/appbutton.png" alt=""></a>
<header class="header">
<div class="gnav ">
<div class="header__flex inner">
<img class src="./images/icon.png" alt="">
<h1 class="header__title">ぷれめも</h1>
</div>
<ul class="gnav__list">
<li class="gnav__item"><a class="gnav__link" href="#"> ぷれめもとは</a></li>
<li class="gnav__item"><a class="gnav__link" href="#"> 3つのメリット</a></li>
<li class="gnav__item"><a class="gnav__link" href="#"> 使える機能</a></li>
<li class="gnav__item"><a class="gnav__link" href="#"> サービス</a></li>
</ul>
</div>
<ul class="slider">
<li class="slider-item slider-item01"></li>
<li class="slider-item slider-item02"></li>
<li class="slider-item slider-item03"></li>
</ul>
<div class="inner">
<p class="header__text">思い出を地図上に記録する<br>
子供の成長記録にも!</p>
</div>
</header>
<main class="main">
<div class="about">
<h2 class="title">ぷれめもとは</h2>
<div class="about__list">
<div class="about__item">
<img class="about__img" src="./images/about_1.png" alt="">
<p class="about__text">「ぷれめも」で旅先の思い出を<br>
地図上で記録することができます。</p>
</div>
<div class="about__item">
<img class="about__img" src="./images/about_2.png" alt="">
<p class="about__text">カレンダーでその日の思い出を<br>
記録できます。</p>
</div>
<div class="about__item">
<img class="about__img" src="./images/about_3.png" alt="">
<p class="about__text">投稿を残すことで家族と<br>
思い出話ができます。</p>
</div>
</div>
</div>
<div class="merit">
<h2 class="title">3つのメリット</h2>
<div class="merit__box">
<div class="merit__item">
<img src="./images/merit_1.png" alt="">
<h3 class="merit__subtitle">1.遠く離れてても
家族の情報が知れる</h3>
<p class="merit__text">
出張などで帰れない時でも「共有機能」があるから家族の情報が知れる!
</p>
</div>
<div class="merit__item">
<img src="./images/merit_2.png" alt="">
<h3 class="merit__subtitle">2.昔の写真も
カレンダーで把握できる</h3>
<p class="merit__text">
カレンダーで情報が見れるから一目でわかる!
</p>
</div>
<div class="merit__item">
<img src="./images/merit_3.png" alt="">
<h3 class="merit__subtitle">3.すぐに写真を撮って
保存できる</h3>
<p class="merit__text">
アプリにある写真機能ですぐに記録ができる!!
</p>
</div>
</div>
</div>
<div class="function">
<h2 class="title">使える機能</h2>
<div class="function__box">
<div class="function__item">
<img class="function__img" src="./images/Album.png" alt="">
<p class="function__text">アルバム</p>
</div>
<div class="function__item">
<img class="function__img" src="./images/map.png" alt="">
<p class="function__text">マップ</p>
</div>
<div class="function__item">
<img class="function__img" src="./images/Share.png" alt="">
<p class="function__text">共有</p>
</div>
<div class="function__item">
<img class="function__img" src="./images/camera.png" alt="">
<p class="function__text">カメラ</p>
</div>
</div>
</div>
<div class="service">
<h2 class="title">サービス</h2>
<div class="service__box">
<img class="service__img" src="./images/service__albumbox.png" alt="">
<img class="service__img" src="./images/service_mapbox.png" alt="">
<img class="service__img" src="./images/service_sharebox.png" alt="">
<img class="service__img" src="./images/service_camerabox.png" alt="">
</div>
</div>
</main>
<footer class="footer">
<small class="footer__copy">© 2022 Prememo Corporation.</small>
</footer>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<!--自作のJS-->
<script src="./js/goudu.js"></script>
</body>
</html>