/
paycrave.html
128 lines (99 loc) · 3.23 KB
/
paycrave.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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- META -->
<meta charset="utf-8">
<title>Chelsea Arita</title>
<meta name="author" content="Chelsea Arita">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/skeleton.css">
<!-- Favion -->
<link rel="icon" type="img/png" href="img/favicon.ico">
<!-- Google Web Fonts -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Cantarell:400,700,400italic,700italic|Montserrat:400,700|Crimson+Text:400,400italic">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<!-- Primary Page Layout -->
<nav class="fixed-nav-bar">
<div class="container">
<div class="twelve columns">
<center>
<a href="index.html">CHELSEA ARITA</a> <a href="hokulani.html">BACK</a> <a href="ipad.html">NEXT</a>
</center>
</div>
</div>
</nav>
<div class="navwork">
<div class="container">
<center>
<img src="img/paycrave.png" class="u-max-full-width">
</center>
</div>
</div>
<div class="container">
<section class="casetext">
<div class="row">
<div class="one-half column">
<img src="img/login.png">
</div>
<div class="one-half column">
<p>
Paycrave is a mobile app for food trucks located in your city. I was given the logo and color scheme so my task was to create the UI for the login, map, truck details, recent transactions, purchases, and ratings. My first step was to make the app as user-friendly as possible, while still maintaining a clean design that was easy to please and follow.<br><br>
The first thing you see when you click on the app is the login page (shown left). I made it straight forward and easy for customers to login with their social media accounts if they didn't want to log in directly into the app.
</p>
</div>
</div>
<div class="uihoku">
<div class="row">
<div class="one-half column">
<center>
<img src="img/navigation.png">
</center>
</div>
<div class="one-half column">
<center>
<img src="img/map.png">
</center>
</div>
</div>
</div>
<div class="uihoku">
<div class="row">
<center>
<img src="img/reviews.png">
</center>
</div>
</div>
<div class="uihoku">
<div class="row">
<div class="one-half column">
<center>
<img src="img/details.png">
</center>
</div>
<div class="one-half column">
<center>
<img src="img/payment.png">
</center>
</div>
</div>
</div>
</section>
</div>
<!-- footer -->
<div class="copyright">
<div class="container">
<p>
<a href="mailto:chelseaarita@gmail.com"><i class="fa fa-envelope-o fa-lg"></i></a>
<a href="http://www.github.com/chelseaarita" target="_blank"><i class="fa fa-github fa-lg"></i></a>
<a href="https://www.linkedin.com/in/chelseaarita" target="_blank"><i class="fa fa-linkedin fa-lg"></i></a>
<div class="allrights">
<p>Portfolio coded by Chelsea Arita / Website © 2015–2017</p>
</div>
</div>
</div>
</body>
</html>