-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
64 lines (63 loc) · 2.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
<!DOCTYPE html>
<html lang="en">
<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/reset.css" />
<link rel="stylesheet" href="./css/style.css" />
<title>Test</title>
</head>
<body>
<section class="order section">
<div class="order-container container">
<div class="order-content-wrap">
<h2 class="order-title">Fresh Harvest Box has got you covered</h2>
<p class="order-text">
Our boxes are packed with delicious, nutritious vegetables, perfect
for anyone looking to eat healthier or support local farmers. Order
your box today and start enjoying the best that nature has to offer!
</p>
<form class="order-form">
<label for="order-phone">
<input
id="order-phone"
class="order-input"
type="tel"
pattern="(\s*)?(\+)?([- _():=+]?\d[- _():=+]?){10,14}(\s*)?"
title="Phone number in format +38 XXX XXX XX XX"
placeholder="+380 ()"
required
/>
</label>
<button type="submit" class="order-submit-btn">Recall</button>
</form>
</div>
<div class="order-image-wrap">
<picture>
<source
srcset="./img/order-img-mob.jpg 1x, ./img/order-img-mob-2x.jpg 2x"
media="(max-width:767.98px)"
type="image/jpeg"
/>
<source
srcset="./img/order-img-tab.jpg 1x, ./img/order-img-tab-2x.jpg 2x"
media="(max-width:1279.98px)"
type="image/jpeg"
/>
<source
srcset="
./img/order-img-desc.jpg 1x,
./img/order-img-desc-2x.jpg 2x
"
media="(min-width:1280px)"
type="image/jpeg"
/>
<img src="./img/order-img-mob.jpg" alt="Model" />
</picture>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>