-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.html
155 lines (149 loc) · 7.74 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
name="viewport">
<meta content="ie=edge" http-equiv="X-UA-Compatible">
<link href="assets/fontawesome/css/solid.css" rel="stylesheet">
<link href="assets/fontawesome/css/fontawesome.css" rel="stylesheet">
<title>About</title>
<link href="about-design.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="about.js"></script>
</head>
<body>
<section class="navigation-bar">
<nav class=navbar>
<div class="brand-div">
<p class="brand-name"><a href="index.html">MindLoom</a></p>
</div>
<div class="nav-options">
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="test.html">Test</a></li>
<li><a href="FAQ.html">FAQ</a></li>
</ul>
</div>
</nav>
</section>
<section class="introduction">
<div class="introduction-container">
<div class="introduction-text-container">
<div class="introduction-text-wrapper">
<h1 id="introduction-title">Our Story</h1>
<p class="introduction-text">
Our website's journey started with a shared vision and a passion for making a positive impact.
Through collaborative brainstorming, meticulous planning, and creative development, we brought our
ideas to life. Challenges became learning opportunities, and teamwork ensured the website's seamless
functionality. Rigorous testing and careful deployment marked the final steps, and now our website
stands as a testament to our dedication to creating something meaningful. It's more than a website;
it's a story of collaboration, creativity, and overcoming challenges to make a positive impact.</p>
</div>
</div>
</div>
</section>
<section class="team">
<div class="team-container">
<div class="team-introduction">
<h1 id="team-introduction">TEAM</h1>
<p class="team-description">The persons who contributed in creating this project</p>
</div>
<div class="team-members-container">
<div class="team-row1">
<div class="team-item">
<div class="container">
<img alt="Avatar" class="image" src="res/team-pics/allysa.png">
<div class="overlay">
<a class="icon" onclick="openModal('Allysa Bernabe', 'Im Allysa Marie Bernabe, a 20-year-old pursuing a Bachelor of Science in Information Technology, guided by the motto: \nIn faith, I find strength; through challenges and triumphs, my unwavering belief guidesme.', 'res/team-pics/allysa-casual-1.jpg')"
title="User Profile">
<i class="fa-solid fa-user"></i>
</a>
</div>
</div>
<h1>Allysa Bernabe</h1>
<p>"unseen, unheard, yet collectively powerful"</p>
</div>
<!-- Similar updates for other team members -->
<div class="team-item">
<div class="container">
<img alt="Avatar" class="image" src="res/team-pics/ricky.jpg">
<div class="overlay">
<a class="icon" onclick="openModal('Ricky Dela Cruz', 'Introducing, Ricky Dela Cruz, a student currently taking his bachelor degree in Information Technology. \n \n '+'We must bear the responsibility of our action, whilst still knowing that if we choose another option it can lead to another result. In short, it doesnt matter.', 'res/team-pics/ricky-casual.jpeg')"
title="User Profile">
<i class="fa fa-user"></i>
</a>
</div>
</div>
<h1>Ricky Dela Cruz</h1>
<p>"Do what you must do"</p>
</div>
<div class="team-item">
<div class="container">
<img alt="Avatar" class="image" src="res/team-pics/bernadeth.jpg">
<div class="overlay">
<a class="icon" onclick="openModal('Bernadeth Catusalem', 'I am Bernadeth Caltusalem. A 20 years old taking the Bachelor of Science in Information technology, believing in the saying that, Faith it until you make it just believe it ', 'res/team-pics/bernadeth-casual.jpg')"
title="User Profile">
<i class="fa fa-user"></i>
</a>
</div>
</div>
<h1>Bernadeth Catusalem</h1>
<p> "Faith it until you make it just believe it"</p>
</div>
</div>
<div class="team-row2">
<div class="team-item">
<div class="container">
<img alt="Avatar" class="image" src="res/team-pics/jerome.jpeg">
<div class="overlay">
<a class="icon" onclick="openModal('Jerome Dizon', 'Hi, I\'m Jerome Dizon 19 years old, taking the Bachelor in Information Technology. My motto is \n'+
'“When you have a dream, you\'ve got to grab it and never let go.”', 'res/team-pics/jerome-casual.jpg')" title="User Profile">
<i class="fa fa-user"></i>
</a>
</div>
</div>
<h1>Jerome Dizon</h1>
<p> “When you have a dream, you've got to grab it and never let go.”</p>
</div>
<div class="team-item">
<div class="container">
<img alt="Avatar" class="image" src="res/team-pics/justine.jpg">
<div class="overlay">
<a class="icon" onclick="openModal('Justine Sagum', 'Im Justine Ray R. Sagum, a 19-year-old voyager on the intellectual odyssey of a Bachelor of Science in Information Technology. Enthusiastically navigating the intricate realms of code and innovation, I am on a quest to unravel the enigma of technology, poised to sculpt the future of the digital realm with ingenuity and precision.', 'res/team-pics/justine-casual.jpg')"
title="User Profile">
<i class="fa fa-user"></i>
</a>
</div>
</div>
<h1>Justine Sagum</h1>
<p>"Look at this man so inspiratonal"</p>
</div>
</div>
</div>
</div>
</section>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-content">
<span class="close" onclick="closeModal()">×</span>
<img alt="" class="modal-picture" id="modal-picture" src="">
<div class="modal-container">
<div class="modal-text-content">
<div class="modal-title">
<h1 id="modal-title"></h1>
</div>
<div class="modal-description">
<p id="modal-description"></p>
</div>
</div>
</div>
</div>
</div>
<section class="footer">
<div class="footer-container">
<p>MindLoom Copyright 2023</p>
</div>
</section>
</body>
</html>