-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
81 lines (75 loc) · 4.05 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Restaurants-Calories-API_Capstone</title>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Caveat|Shadows+Into+Light" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDMWaj7Yz5rBfbSVCCT6MxcU--ILIZT4iM&libraries=places"></script>
</head>
<body>
<div class="white1"></div>
<div class="parallax">
<header>
<h1> Love to explore new restaurants<br> but also love to keep track of your calorie intake?</h1>
<h2> Scroll down and let's do it together </h2>
<a type="button" role="button" id="button" href="#parallax2" class="fill">Scroll</a>
</header>
</div>
<main>
<div class="white"></div>
<div class="parallax2" id="parallax2">
<form class="listFood">
<div class='restaurants-before' role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
<h3 id='slogan'>Let's find a place to dine out</h3>
<fieldset>
<legend>Where do you want to eat?</legend>
<input for="City or Zipcode" aria-labelledby="PlaceInfo" aria-describedby="Adress" type="text" placeholder="Enter city or zipcode" id='search-loc' required>
<input for="Search Radius" type="text" aria-labelledby="Search-Rdius" aria-describedby="Radius" placeholder="Search radius (miles)" id='max-distance' required>
</fieldset>
<input role="button" type="submit" class="styleButton">
</div>
<div class="restaurants-after">
<div class=" display-map clearfix">
<div id="map" class="map hidden"></div>
<div class='restaurant-results'>
<ul class='js-restaurant-results'> </ul>
</div>
</div>
</div>
</form>
</div>
<div class="white"></div>
<div class="parallax3">
<div class="input-before">
<div class="calculator">
<form class="calories">
<h4> Now let's calculate those calories </h4>
<p> Enter Food here: </p>
<input for=" Food type" type="text" required class="js-search-term">
<br> <input role="button" type="submit" class="styleButton">
</form>
</div>
</div>
<section id="results" class="hiddenCal">
<h4>Calories count</h4>
<ul id="results-list">
</ul>
<button for="Page Reload" class="styleButton" onClick="window.location.reload()">Try Again</button>
</section>
</div>
</main>
<footer class="contact">
<div class="logos">
<a href="https://www.linkedin.com/in/julia-yulia-krimerman-4a368a12a/" title="LinkedIn Profile"> <img src="https://image.flaticon.com/icons/png/512/61/61109.png" alt="Linked in Logo" style="width:48px;height:48px;"></a>
<a href="mailto:[email protected]" title="Email me"><img src="https://i.ibb.co/HKkgD24/iconfinder-web-ui-by-juliia-osadcha-70990.png" alt="Email Logo" style="width:50px;height:48px;"></a>
<a href="https://github.com/Juliakrimerman" title="Github Progile"><img src="https://image.flaticon.com/icons/svg/25/25231.svg" alt="GitHub Logo" style="width:48px;height:48px;"></a>
</div>
</footer>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="script.js"></script>
</body>
</html>