ProjectGroup6/about.html at main · LilyMatilde/ProjectGroup6 · 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
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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>About</title>
  <link href="./style.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
  <!-- BOOTSTRAP -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" />
</head>

<body>

  <nav>

    <div class='container-nav'>
      <a class="navBar-logo" href="./index.html"><img src="./Imgs/logo.jpg" alt="Green Modern style leaf" width="60px"
          height="60px" />XPLORA</a>
      <button class="nav-button" id="my-button">
        <span class="material-symbols-outlined"> Menu
        </span>
      </button>
      <div class='navLinks'>
        <ul class="navBar_nav" id="myLinks">
          <li class="nav-item"><a href='./index.html'> Home </a></li>
          <li class='nav-item'>
            <a href='./parks.html'> Parks </a>
          </li>
          <li class='nav-item'>
            <a href='./about.html'> About </a>
          </li>
          <li class='nav-item'>
            <a href='./contact.html'> Contact </a>
          </li>
        </ul>
      </div>


      <div class="search-container">
        <form action="/action_page.php">
          <input type="search" id='site-search' placeholder="Search in site.." name="search">
          <button type="submit"> Search </button>
        </form>
      </div>
    </div>

    <header class='header'>
      <div class="header-aboutUs">
        <h1 class="header-title">About us</h1>
      </div>
    </header>

    <main>
      <h2 class="display-5">About the Website</h2>
      <p class="fs-2">Welcome to our website featuring five of the world's most renowned parks: Yosemite National Park in America,
        Serengeti National Park in Africa, Khao Sok National Park in Asia, Los Glaciares National Park in South America,
        and Plitvice Lakes National Park in Europe. Each park offers a unique landscape and ecosystem, from Yosemite's
        granite cliffs to the Serengeti's savannas, Khao Sok's rainforests, Los Glaciares' icy expanses, and Plitvice
        Lakes' cascading waterfalls. Explore stunning photographs, informative articles, interactive maps, and travel
        tips for planning your visit. Whether you're an adventurer or nature enthusiast, find inspiration for your next
        vacation right here. Welcome to a world of natural splendor and adventure!</p>
<div class='aboutUs' id="arisha">
  <div class="imgAligned">
      <img src="./Imgs/about/arisha.jpg" alt="picture of Arisha" class="about-img">
    </div>
     <p class="person-title">Arisha</p>
      <p class="fs-2">Arisha- currently doing volunteer service in a international preschool. Discovered my passion for coding about
        2
        years ago.
        Soon I am going to start my education in the tech field and I am looking forward to it. I love to travel and
        discover the beautiful places.
        I also love to see and experience different culture.</p>
</div>
<div class='aboutUs' id="lily">
   <div class="imgAligned">
      <img src="./Imgs/about/lily.png" alt="picture of Lily" class="about-img">
    </div>
      <p class="person-title">Lily Martin</p>
      <p class="fs-2">Lily Martin - Video gamer, adept artist and coding enthusiast. Lily graduated as a Biomedical scientist
        but ended up loving the computer side of research rather the science side of it. Currently making her way
        to be a front-end developer whilst trying to get her cat to love her. So far Earl (said cat) tolerates her
        extreme amount of affection. Favourite drink: A good cup of English tea.
        Favourite game: Currently Helldivers 2 and Stardew Valley. Favourite language: JavaScript.</p>
</div>
<div class='aboutUs' id="marta">
   <div class="imgAligned">
      <img src="./Imgs/about/Marta.jpg" alt="picture of Marta" class="about-img">
    </div>
      <p class="person-title">Marta</p>
      <p class="fs-2">I am Marta, born and bred in Colombia but Spain was in my radar. It all happened in London after I took a break from Civil Engineering back home to improve my English skills, little did I know a Spaniard would be on my way, so not much English was spoken those years! We started travelling the world, settling in Singapore for over 3 years.
        Now, we're in Valencia, bringing up a 5-year-old girl and in my spare time I am fully dedicated to learning all things related to coding, looking forward to absorbing more knowledge as time goes by.</p>
</div>
<div class='aboutUs' id="wendy">
  <div class="imgAligned">
      <img src="./Imgs/about/Wendy.jpg" alt="picture of Wendy" class="about-img">
    </div>
      <p class="person-title">Wendy Davies</p>
      <p class="fs-2"> Wendy Davies - is always looking for a new challenge which is currently coding in html, css and JavaScript and loves the creativity involved. Has worked a secondary school teacher for the past 25 years, teaching a variety of subjects. Loves a glass of wine and tapas as she lives in sunny Spain, and activities with her family. An animal lover who has two cats and volunteers for a cat charity.</p>
    </main>
</div>

<!-- FOOTER -->

    <!-- FOOTER -->
    <div class="footerLogo">
      <p class="fs-1 fw-bold">
        <img src="./Imgs/logoPs.jpg" alt="logo" />XPLORA
      </p>
    </div>


    <footer>
      <div class="container">
        <section class="footer">
          <div class="footer-column">

            <div class="footer-headings">
              <a href="./index.html" class="footer-links">
               home
              </a>
              </div>
            </div>
   <div class="footer-column">
            <div class="footer-headings">
              <a href="./about.html" class="footer-links">
                about
              </a>
              </div>
            </div>
   <div class="footer-column">
            <div class="footer-headings">
              <a href="./contact.html" class="footer-links">
                contact
              </a>
            </div>
            </div>
          </div>

          <!-- ICONS -->

           <div class="footer-column">
            <div class="icons">
              <a href="https://www.facebook.com/">
            <i class="bi bi-facebook btn"></i></a>
           <a href="https://www.instagram.com/">
            <i class="bi bi-instagram btn"></i></a>
          </div>
        </div>
        </section>
      </div>
    </footer>

    <!-- JAVASCRIPT -->


    <script src="./script.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
      crossorigin="anonymous"></script>
</body>

</html>