UI/index.html at master · build-week-foodie-fun/UI · GitHub

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
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Foodie Fun</title>
  <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Nunito&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/reset.css">
  <link href="index.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
  <script>
    function openSlideMenu() {
      document.getElementById('menu').style.width = '250px';
      document.getElementById('content').style.marginLeft = '250px';
    }
  </script>

  <script>
    function closeSlideMenu() {
      document.getElementById('menu').style.width = '0';
      document.getElementById('content').style.marginLeft = '0';
    }
  </script>

  <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
  <![endif]-->
</head>

<body>

  <header>
    <!-- Regular Nav -->
    <section class="navigation">
      <div class="nav-logo">
        <a href="index.html"><img src="images/Foodie_Icon.png" /></a>

        <p>Foodie Fun</p>
      </div>
      <div class="web-nav">
        <ul>
          <a href="index.html">Home</a>
          <a href="about.html">About</a>
          <a href="team.html">Team</a>
          <a href="http://foodiefunapp.netlify.com/">Login</a>
        </ul>
      </div>
    </section>

    <!-- Mobile Slide Menu  -->
    <section class=slide-menu">
      <div id="slide-content">
        <span class="slide">
          <a href="#" onClick="openSlideMenu()">
            <i class="fas fa-bars"></i>
          </a>
        </span>

        <span id="menu" class="nav-slide">
          <a href="#" onClick="closeSlideMenu()">
            <i class="fas fa-times"></i>
          </a>
          <a href="index.html" class="model-list">Home</a>
          <a href="about.html" class="model-list">About</a>
          <a href="team.html" class="model-list">Team</a>
          <a href="https://foodiefunapp.netlify.com/login" class="model-list">Login</a>
        </span>
      </div>
    </section>

  </header>

  <section class="banner">
    <div class="banner-heading">
      <h1>SHARE YOUR BEST MEALS AND RESTAURANTS. CHECK OUT LOCAL FAVES.</h1>
    </div>

    <div class="buttons">
           <a href="about.html"><button>About</button></a>
           <a href="https://foodiefunapp.netlify.com" class="aboutBtn"><button>Sign Up</button></a>
        </div>
    </div>
  </section>

  <!--content -->
  <section class="content">

    <section class="explore">
      <div class="div-1">
        <h2>Explore and Eat</h2>
        <p>The perfect app for avid foodies, Foodie Fun is built for those who love going out to explore new eats. It's
          designed for you to find new adventures and to share them with others. Did I like the burrito or enchilada
          better? The spicy version or normal?
        </p>
      </div>
      <div class="div-2">
        <img src="images/phoneAndFood.jpg" />
      </div>
    </section>
    <!--closes explore-->

    <section class="how-it-works">
      <div class="div-3">
        <h2>How It Works</h2>
        <p>Download the app and use the easy-to-use filters and actins to log where you've eaten, what you ordered, what
          you liked and didn’t like, what the wait time was at certain times of day, etc.
        </p>
      </div>
      <div class="div-4">
        <img src="images/Foodie App Prototype/Home Page.png" class="screen-shot-1" />
        <img src="images/Foodie App Prototype/Filter Dropdown.png" class="screen-shot-2" />
        <img src="images/Foodie App Prototype/Price Input.png" class="screen-shot-3" />
      </div>
    </section>
    <!--closes howItWorks-->

    <section class="about-us">
      <div class="div-5">
        <h2>Get To Know Us</h2>
        <p>Meet the team that developed this amazing product!<a href="team.html"><i class="fas fa-arrow-right"></i></a>
        </p>
      </div>
    </section>
    <!--closes aboutUs-->

  </section>
  <!--closes content-->

</body>
<footer>
  <p>© Foodie Fun App 2019</p>
</footer>

</html>