Web-Dev-Final-Project/main.html at master · Curtis-96/Web-Dev-Final-Project · 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <link href="style.css" type="text/css" rel="stylesheet"/>
  <meta charset="utf-8">
  <title>Home Page MBTA</title>
</head>

<body>
<header>
  <h1 style="color: white; font-size: 24px; text-align: center;"><span style="text-align: center;">Massachusetts Bay Transportation Authority</span>
  </h1>
</header>

<section style="width: 100%; text-align: center; display: flex">
  <div style="width: 10%">
    <nav style="color: green; float: left; background-color: grey; font-size: 12px; height: 600px; width: 100%;">
      <ul style="float: left; font-size: 12px; color: green; background-color: grey; list-style-type: none">
        <li>
          <form action="main.html" style="background-color: grey;">
            <input type="submit" value="Home"/>
          </form>
          <br>
          <form action="fares.html" style="background-color: grey;">
            <input type="submit" value="Fares"/>
          </form>
          <br>
          <form action="schedules.html" style="background-color: grey;">
            <input type="submit" value="Schedule"/>
          </form>
        </li>
      </ul>
    </nav>
  </div>
  <div style="width: 70%">
    <article class="flex: 1">
      <p style="color: black; text-align: left; float: right; margin: 2%">Welcome to the official page of the Massachusetts Bay Transport Authority (MBTA). We have established this website to ensure our loyal patrons
        receive the best service possible. We are fully committed to granting transparency for all of our commuters in the Greater Boston Area. This site provides
        all relevant information to customers, including both train schedules and location information. </p>
      <img src="https://i.imgur.com/FSubiYL.jpg" style="width:80%; height: 80%" alt="https://netflixroulette.files.wordpress.com/2013/01/image-not-found.gif">
    </article>
  </div>
  <div style="padding-top: 30px; text-align: right">
    <a class="twitter-timeline" data-width="300" data-height="780" data-theme="light" href="https://twitter.com/MBTA?ref_src=twsrc%5Etfw">Tweets by MBTA</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  </div>
</section>

<br>
<br>
<footer>
  <p>
    **Disclaimer: This page is exclusively configured for the purposes of academia. We are not in any way
    associated with the actual MBTA and are simply using its name to demonstrate a real world application of web
    development
  </p>
</footer>
</body>
</html>