-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathabout.html
200 lines (191 loc) · 8.28 KB
/
about.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
<!doctype html>
<html lang="en">
<head>
<!-- meta tags -->
<meta charset="utf-8">
<meta name="author" content="Vivian Nguyen & Areeta Wong">
<meta name="description" content="A responsive web application that analyzes and displays instant
ramen statistics to help college students find the best ramen for them.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="RAWMENT, ramen, ramen review, ramen information,
inf 133, inf 133 final project, inf 133 project, about page">
<!-- style -->
<link href="https://fonts.googleapis.com/css2?family=Muli:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/about.css">
<!-- reem kufi font -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Reem+Kufi&display=swap" rel="stylesheet">
<!-- js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous">
</script>
<title>RAWMENT: About</title>
<link rel="icon" href="assets/favicon.svg">
</head>
<body>
<!-- navigation bar -->
<nav class="navbar navbar-fixed-top navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand js-scroll-trigger" href="index.html">
<img src="assets/favicon.svg" alt="Bowl of ramen">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="data.html">Data</a>
</li>
</ul>
</div>
</nav>
<!-- description section -->
<section id="description">
<img src="assets/eating-ramen.svg" alt="Two people sharing a bowl of ramen" id="eating-ramen">
<div class="col">
<div id="title">About</div>
<div id="detail">
A responsive web application that analyzes and displays instant ramen statistics to
help college students find the best ramen for them
</div>
</div>
</section>
<!-- inspiration section -->
<section id="inspiration">
<div class="section-title">Our Inspiration</div>
<div class="row">
<img src="assets/instant-ramen.svg" alt="Cup of instant ramen" id="instant-ramen">
<div class="col">
<div class="text">
All over the world, college students pay tens of thousands for tuition, dorming, and daily
expenses. One staple item that keeps our stomaches full, energy boosted, and wallets safe
is instant ramen.When we saw that our final INF 133 project allowed us to create anything,
we instantly thought about creating a website for college students to see the variety of
instant ramen in the world.
</div>
<div class="text">
Using a large ramen review dataset from <a href="https://www.theramenrater.com/" target="_blank">
The Ramen Rater</a>, we plan to give meaning to the data by including what
each graph means and what are the recommendations of that information. This will help
college students pick what their next meal and provide insightful knowledge to the
different cultures, brands, and flavors!
</div>
</div>
</div>
</section>
<!-- accessbility section -->
<section id="accessbility">
<div class="section-title">Our Dedication to Accessbility</div>
<div class="row">
<div class="col">
<div class="text">
In efforts to make our website accessible, inclusive, and helpful to all users, we have incorporated:
<ul>
<li>The A11y Project Content Style Guide</li>
<li>The Web Content Accessibility Guidelines (WCAG)</li>
</ul>
</div>
<div class="text">
Additionally, our site passes:
<ul>
<li>W3C Markup Validation Service</li>
<li>AChecker Web Accessibility Checker </li>
</ul>
</div>
</div>
<img src="assets/fancy-ramen.svg" alt="Fancy bowl of steaming ramen" id="fancy-ramen">
</div>
</section>
<!-- team section -->
<section id="team">
<div class="section-title">Our Team</div>
<div class="row">
<div class="col-sm">
<img src="assets/vivian.svg" alt="Vivan smiling in a forest" class="vivian">
<div class="text">Vivian Nguyen</div>
<div class="text">4th year at UC Irvine</div>
</div>
<div class="col-sm">
<img src="assets/areeta.svg" alt="Areeta smiling on a roof top building" class="areeta">
<div class="text">Areeta Wong</div>
<div class="text">3rd year at UC Irvine</div>
</div>
</div>
</section>
<!-- technology section -->
<section id="technology">
<div class="section-title">Our Technologies</div>
<div class="technologies">
<div class="technology-card">
<h5 class="card-title">Design</h5>
<div class="logos">
<div class="col">
<img src="assets/company-logos/figma.svg" alt="Figma logo" class="logo">
<div class="text">Figma</div>
</div>
<div class="col">
<img src="assets/company-logos/icon8.svg" alt="Icon8 logo" class="logo">
<div class="text">Icon8</div>
</div>
</div>
</div>
<div class="technology-card">
<h5 class="card-title">Design</h5>
<div class="logos">
<div class="col">
<img src="assets/company-logos/kaggle.svg" alt="Kaggle logo" class="logo">
<div class="text">Kaggle</div>
</div>
<div class="col">
<img src="assets/company-logos/vegalite.svg" alt="VegaLite logo" class="logo">
<div class="text">VegaLite</div>
</div>
</div>
</div>
<div class="technology-card">
<h5 class="card-title">Languages / Frameworks</h5>
<div class="logos">
<div class="col">
<img src="assets/company-logos/html.svg" alt="HTML logo" class="logo">
<div class="text">HTML</div>
</div>
<div class="col">
<img src="assets/company-logos/css.svg" alt="CSS logo" class="logo">
<div class="text">CSS</div>
</div>
<div class="col">
<img src="assets/company-logos/javascript.svg" alt="JavaScript logo" class="logo">
<div class="text">JavaScript</div>
</div>
</div>
<div class="logos">
<div class="col">
<img src="assets/company-logos/typescript.svg" alt="TypeScript logo" class="logo">
<div class="text">TypeScript</div>
</div>
<div class="col">
<img src="assets/company-logos/bootstrap.svg" alt="BootStrap logo" class="logo">
<div class="text">BootStrap</div>
</div>
<div class="col">
<img src="assets/company-logos/git.svg" alt="Git logo" class="logo">
<div class="text">Git</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>