-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·236 lines (224 loc) · 12.2 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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width =
device-width, initial-scale=1,user-zscalable=yes">
<meta name="description" content="こだわり農家の朝どりオーガニック野菜をご自宅で">
<!--https://ogp.me/ -->
<meta property="og:title" content="julie">
<meta property="og:site_name" content="DHW CAFE">
<meta property="og:type" content="website">
<meta property="og:locale" content="ja-JP">
<meta property="og:image" content="assets/images/common/ogp.jpg">
<!--1200*600px以上が良い-->
<meta property="og:description" content="こだわり農家の朝どりオーガニック野菜をご自宅で">
<meta name="twitter:card" content="summary">
<!--https://developer.twitter.com/ja/docs/tweets/optimize-with-cards/guides/getting-started-->
<title>Julie's page</title>
<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=Noto+Sans+JP:wght@100;400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="colors.css">
<link rel="stylesheet" href="common-sugutabe.css">
<link rel="stylesheet" href="top-sugutabe.css">
<link href="logo.ai" rel="icon" type="image/x-icon">
<link rel="apple-touch-icon" href="html.css/top/common/apple-touch-icon.png">
</head>
<body>
<header class="header">
<h1><img src="photos/logo.png" alt="logo" style="width:80px">
</h1>
<div id="nav-drawer">
<input id="nav-input" class="none" type="checkbox">
<label id="nav-open" for="nav-input"><span></span></label>
<label id="nav-close" class="none" for="nav-input"></label>
<nav id="nav-content" class="header__navigation">
<div class="nav-drawer__title none"></div>
<ul>
<li><a class="nav-drawer__link-top none" href="#top">TOP</a></li>
<li><a href="#reason">３つの理由</a></li>
<li><a href="#quality">品質保証</a></li>
<li><a href="#farmars">契約農家</a></li>
<li><a href="#set">お試しセット</a></li>
<li><a href="#question">よくある質問</a></li>
</ul>
</nav>
</div>
</header>
<main class="main">
<section class="section-top">
<div class="section-top__image">
<h2>こだわり農家の<br class="section-top__image__h2">朝どりオーガニック野菜を<br class="section-top__image__h2">ご自宅で</h2>
</div>
<div class="section-top__lead">
<p> 「スグ食べ」は、厳選したオーガニック農家さんの穫れたて野菜を販売しています。<br>
食材から選べるのはもちろん、生産者からも選べます。
生産方法や生産地、それぞれ異なるこだわりで、お気に入りの農家さんを見つけてください。最短で24時間以内に届く新鮮なオーガニック野菜宅配サービスです。 </p>
</div>
<div class="section-top__button">
<p>お試しセットを注文する</p>
<a href="#" class="section-top__triangle-right"></a>
</div>
</section>
<section class="section-reason">
<h2 id="reason">スグ食べが選ばれる3つの理由</h2>
<ul>
<li>
<div class="section-reason__image">
<h3 class="section-reason__item-title">farm-direct</h3>
<p class="section-reason__item-subtitle">本当の意味での産地直送</p>
<img class="section-reason__item-picture" src="photos/farmdirect.jpg" alt="sanchoku">
</div>
<p class="section-reason__item-discription">
「なるべく収穫したばかりの状態で、野菜を味わって欲しい。」スグ食べでは、既存の産地直送サービスのように箱詰め用の倉庫を介すことはありません。農家が収穫したその日に、お客様の元へ直送で野菜をお送りします。
</p>
</li>
<li>
<div class="section-reason__image">
<h3 class="section-reason__item-title">safe and secure</h3>
<p class="section-reason__item-subtitle">安心安全な無農薬野菜</p>
<img class="section-reason__item-picture" src="photos/safeandsecure.jpg" alt="ansin">
</div>
<p class="section-reason__item-discription">
出品している生産者は、有機栽培もしくは自然栽培の農家のみ。全ての商品が無農薬・無化学肥料など、安全にこだわって生産された「オーガニック農作物」です。そのため、どの商品も安心してお買い求めいただけます。 </p>
</li>
<li>
<div class="section-reason__image">
<h3 class="section-reason__item-title">seasonable-vegetables</h3>
<p class="section-reason__item-subtitle">たくさんの旬な野菜との出会い</p>
<img class="section-reason__item-picture" src="photos/seasonablevegetables.jpg" alt="shun">
</div>
<p class="section-reason__item-discription">
年間数十種の野菜を作る生産者から、今が旬の多様な野菜が届きます。スグ食べでは生産者ごとに商品が異なります。中には年間100種類もの多品種生産をしている生産者も。旬な野菜はもちろん、珍しい野菜とも出会えます。</p>
</li>
</ul>
<div class="section-quality">
<div class="section-quality__image">
<h2 id="quality">スグ食べの品質保証</h2>
<h3>
商品に不備があった際には、スグ食べが “全額” 返金対応します。</h3>
<div class="section-quality__visual">
<img class="section-quality__main-image" src="photos/quality.jpg" alt="quality">
</div>
<p class="section-quality__text__p">
スグ食べに出品している農家さんたちは、「大切に育てた自慢の農作物を、できるだけ美味しい状態で食べてもらいたい。」そんな想いを持った農家さんばかりです。
そのため、収穫から梱包・出荷にいたるまでしっかりと品質管理されています。
とはいえ、実物を見ずに野菜や果物を購入するのはちょっと不安…
そんな方にも安心してご購入いただけるよう、スグ食べでは品質保証をお約束しています。
万が一届いた商品に不備があった際には、スグ食べにて全額返金対応いたします。
</p>
</div>
</div>
</section>
<section class="section-farmars">
<div class="section-farmars__title">
<h2 id="farmars">こんな農家さんが登録しています
</h2>
</div>
<p class="section-farmars__sub-title">私たちの野菜、こんなにおいしいんです
</p>
<section class="section-farmars__1">
<div class="section-farmars__box">
<h3>安心安全なお野菜を、ご堪能ください <br>
ひだまり農場 （岡山県） 山田洋一
</h3>
<div class="section-farmars__visual">
<img class="section-farmars__main-image" src="photos/farmar1.jpg" alt="farmar1">
</div>
<div class="section-farmars__description">
<p>「ひだまり農場」では栽培期間中に農薬・化学肥料を一切使用せず、年間約100種類の野菜と米、卵を生産しています。
堆肥・肥料もすべて手作りし、有機質のものを使用しています。
</p>
</div>
</div>
</section>
<section class="section-farmars__2">
<div class="section-farmars__box">
<h3>旬なお野菜を存分に楽しんでください <br>
爽緑農園 太田紘一
</h3>
<div class="section-farmars__visual">
<img class="section-farmars__main-image" src="photos/farmar2.jpg" alt="farmar2">
</div>
<div class="section-farmars__description">
<p>「爽緑農園」では農薬や除草剤は一切使用せず、一つ一つのお野菜を丁寧に栽培しています。
お日様の光をたくさん浴びて育ったお野菜は、葉や皮まで余すことなく食べることができます。
</p>
</div>
</div>
</section>
<section class="section-set">
<h2 id="set">１回限り！少量お試しセット</h2>
<h3 class="section-set__sub-title">自信があるから、是非食べてもらいたい</h3>
<ul>
<li>
<img class="section-set__item-picture" src="photos/set1.jpg" alt="set1">
<div class="section-set__item">
<h3 class="section-set__item-title">【ベジックス】旬＊お試し野菜セット(6品目)</h3>
<p class="section-set__item-discription">￥1,280（税込 / 送料別）<br>
生産者：千葉県松戸市 ベジックス</p>
</div>
</li><!--
-->
<li> <img class="section-set__item-picture" src="photos/set2.jpg" alt="set2">
<div class="section-set__item">
<h3 class="section-set__item-title">【くちぶえ農園】旬＊お試し野菜セット(6品目)</h3>
<p class="section-set__item-discription"> ￥1,280（税込 / 送料別）<br>生産者：長野県 飯田市 くちぶえ農園</p>
</div>
</li><!--
-->
</ul>
</section>
<section class="section-button">
<div class="button">
<p>お試しセットを注文する</p>
<a href="#" class="triangle-right"></a>
</div>
</section>
<section class="section-question">
<div class="section-question__title">
<h2 id="question">よくある質問</h2>
</div>
<ol>
<li class="section-question__1">
<h3 class="section-question__Q">Q. 産地直送のサービスってよく見るけど何が違うの？</h3>
<h3 class="section-question__A">A. 鮮度が抜群に違います。</h3>
<p>
通常の産直サービスは、一度倉庫などに野菜を集め、そこで箱詰め作業をして配送しています。この仕組みでは、お客様が商品を受け取る時には収穫してから3,4日が経過しています。スグ食べでは、箱詰め作業を農家さんにお願いすることにより、最短で収穫当日に商品を受け取ることができます。
</p>
</li>
<li class="section-question__2">
<h3 class="section-question__Q">Q. どんな農家さんが登録してるの？</h3>
<h3 class="section-question__A">A. 無農薬にこだわる、オーガニック農家さんのみが登録しています。</h3>
<p>有機栽培や自然栽培などの環境に配慮した農法で生産するには、通常以上に費用も手間もかかります。そんな中でも、「安心な野菜を食べて欲しい」という強い思いを持って、こだわって野菜を作っている農家さんがいます。
そういった、厳選されたオーガニック農家さんのみが登録しているため、安心してお買い物を楽しんでいただけます。</p>
</li>
</ol>
</section>
<div class="button">
<p>お試しセットを注文する</p>
<a href="#" class="triangle-right"></a>
</div>
</main>
<footer class="footer">
<div class="footer__container">
<!--https://ogp.me/
<nav class="footer__site-map">
<ul>
<li><a href="#top">TOP</a></li>
<li><a href="#reason">３つの理由</a></li>
<li><a href="#quality">品質保証</a></li>
<li><a href="#farmars">契約農家</a></li>
<li><a href="#set">お試しセット</a></li>
<li><a href="#question">よくある質問</a></li>
</ul>
</nav>-->
<div class="footer__logo"> <img src="photos/logo.png" alt="logo" style="width:200px">
<small>©sugutabe.inc</small>
</div>
</div>
</footer>
</body>
</html>