-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.html
171 lines (150 loc) · 6.14 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
<!DOCTYPE html>
<html>
<head>
<title>Campus Eats</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body {
height: 100%;
margin: 0;
}
body {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
background-color: #fbebeb;
margin: 0;
padding: 0px;
display: flex;
flex-direction: column;
}
#header {
background-color: #b6b7e5;
color: black;
text-align: center;
padding: 10px;
}
#nav {
background-color: #884e7d;
color: #FBEBEB;
text-align: center;
padding: 10px;
}
#content {
flex: 1;
max-width: 1000px;
margin: 0 auto;
text-align: center;
}
#footer {
background-color: #b6b7e5;
color: #FBEBEB;
text-align: center;
padding: 10px;
flex-shrink: 0;
}
#box {
border: 1px solid black;
padding: 20px;
margin: 20px;
background-color: #847979;
text-align: center;
width: 300px;
height: 500px;
}
#boxcontainer {
display: flex;
justify-content: center;
}
a {
color: #FBEBEB;
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 20px;
text-align: center;
}
img {
width: 100%;
height: 200px;
justify-content: center;
}
/* //commenting out the code for the circles, can be implemented later it just isnt completely important right now
#circle1, #circle2 {
position: fixed;
top: 0;
bottom: 0;
width: 300px; // Adjust the size of the circle
height: 300px; // Adjust the size of the circle
border-radius: 50%; // Set the border radius to 50% to create a circle
background-color: #884e7d; // Set the color of the circle
opacity: 0.5; // Adjust the opacity of the circle
}
#circle1 {
left: 150px; //Position the first circle to the left of the page
top: 150px;
}
#circle2 {
right: -150px; // Position the second circle to the right of the page
}
*/
</style>
</head>
<body>
<!-- Display the header with the title of the app-->
<div id="header">
<h1>Campus Eats</h1>
</div>
<!-- This code will display a navigation bar in the header of our website -->
<div id="nav">
<a href="index.html">Home</a> |
<a href="#">About</a> |
<a href="demo.html">Final Demo</a>
</div>
<!-- I wanted to put in the circles like we have on the screen of our application, but am gonna need longer to work on it -->
<!-- <div id="circle1"></div>
<div id="circle2"></div> -->
<!-- Below is the code for the content of the about page on our website, which starts with a breif intro of the team and then goes into specific boxes allotted for each one of us -->
<div id="content">
<h2>About Us</h2>
<p>The members of this team who created this app are Nick Garofalo, Kylie Gore, Jack Hempstead, Vidhee Patel, and Siona Ravi. Below is some information about each of them.</p>
</div>
<div id="boxcontainer">
<div id="box">
<h2>Nick Garofalo</h2>
<img src="images/website/NicksHeadshot.jpg" alt="Image">
<p>Nick is a current senior at the University of South Carolina. He is working towards getting his Bachelor's degree in Computer Science. After graduating, Nick will be working part time remote and pursuing a full time position.</p>
<p>LinkedIn URL: <a href="https://www.linkedin.com/in/nicholas-garofalo-b60235227">Nick Garofalo</a></p>
</div>
<div id="box">
<!-- Below is the format we are using for the boxes. Starts off with the name of who is being showcased, then a headshot of them, then a bio, then the URL of their LinkedIn -->
<h2>Kylie Gore</h2>
<img src="images/website/kylie_headshot.JPG" alt="Image">
<p>Kylie is a current senior at the University of South Carolina. She is studying Computer Science with a minor in Business Administration. After graduating in May, Kylie will be working as a Software Engineer at Bank of America in their Finance Technology Department.</p>
<p>LinkedIn URL: <a href="https://www.linkedin.com/in/kylie-gore/">Kylie Gore</a></p>
</div>
<div id="box">
<h2>Jack Hempstead</h2>
<img src="images/website/Jack_HeadShot.jpg" alt="Image">
<p>Jack is a current senior at the Universtiy of South Carolina studying Computer Information Systems. Following graduation, Jack will be working as a Business Development Represenative for OneSpan. </p>
<p>LinkedIn URL: <a href="https://www.linkedin.com/in/jack-hempstead-9a957121a/">Jack Hempstead</a></p>
</div>
</div>
<div id="boxcontainer">
<div id="box">
<h2>Vidhee Patel</h2>
<img src="images/website/Vidhee_headshot.jpg" alt="Image">
<p>Vidhee is currently a senior studying Computer Science at the University of South Carolina. After graduating in May, she plans to work as a Research Assistant at UofSC while she seeks out the right career opportunity. </p>
<p>LinkedIn URL: <a href="https://www.linkedin.com/in/vidhee-patel/">Vidhee Patel</a></p>
</div>
<div id="box">
<h2>Siona Ravi</h2>
<img src="images/website/siona_headshot.jpeg" alt="Image">
<p>Siona is a senior studying Computer Science at University of South Carolina and works part-time at UofSC Admissions IT department. After graduating, she plans to pursue a career in IT Project Management and obtain a PMP certification. </p>
<p>LinkedIn URL: <a href="https://www.linkedin.com/in/sionaravi">Siona Ravi</a></p>
</div>
</div>
<!--Displays the footer which SHOULD be stagnant on the bottom of the page-->
<div id="footer">
<p>© 2023 Campus Eats. All rights reserved.</p>
</div>
</body>
</html>