LJHSSailing/funstuff.html at main · JuniperMar/LJHSSailing · 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
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="theme-color" content="hsl(355, 74%, 49%)">
  <title>LJHS Sailing - Random Fun Stuff</title>
  <link rel="shortcut icon" type="image/x-icon" href="images/other/logo.png"/>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <link href="funstuff.css" rel="stylesheet" type="text/css" />
  <!-- Unicons -->
  <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css" />
  <!-- Font Awesome -->
  <script src="https://kit.fontawesome.com/1b399f9bf4.js" crossorigin="anonymous"></script>
</head>

<body>

  <script src="header/loadHeader.js"></script>

  <main>
    <div class="hero">
      <div class="funstuffHeroImage" role="img" aria-label="LJHS sailboat with a beautiful sunset on the horizon."></div>
      <div class="heroText halfHeroText">
        <h1>(Extra) Fun Stuff</h1>
        <div class="arrow animated bounce"></div>
      </div>
    </div>

    <div class="container">

      <div class="evenColumns">

        <div>
          <h2 class="heading topMargin bottomMargin">Educational Sailing Games</h2>
          <p>Linked here are some fun sailing-related games that will hopefully prove helpful for learning about the sport from sailing rules to boat designs.</p>

          <p class="topPadding" ><b>Disclaimer:</b> The advice and information given through these games is mostly for entertainment, and is not endorsed by LJHS or MBYC. While the information is intended to be as accurate as possible, please take it with a grain of salt since it was written by a current high school sailor, not a coach. Thanks! Enjoy the games!</p>
        </div>
        <div>
          <img class="radiusImg bottomMargin" src="images/onLand/gbbreakdown.jpeg" alt="Trevor and Maggie ready to head out sailing at Golden Bear. In the background, Coach Josh and Doc deliberating about filing for redress because of a broken forestay.">
        </div>
      </div>

      <div>
        <div>
          <h3 class="topMargin"><a class="link" href="twentyfourtyeight.html">Sailboat "2048"</a></h3>
          <p>Inspired by the classic game 2048, this version uses sailboats instead. Learn about different one-design fleets while playing this addictive game.</p>
        </div>

        <div>
          <h3 class="topMargin">Parts of Sailboat Memory Game</h3>
          <p>Can you remember all the common parts of a sailboat? Sailing requires a lot of specific vocabulary to name different parts of the boat. Test your memory and how well you know your boat with this game.</p>
          <p class="red bold">Coming soon</p>
        </div>

        <div>
          <h3 class="topMargin"><a class="link" href="rules.html">Right-of-Way Sailing Quiz</a></h3>
          <p>Try determining who has the right-of-way through a series of quizzes that put your knowledge of the racing rules of sailing to the test.</p>
        </div>

        <div>
          <h3 class="topMargin"><a class="link" href="trivia.html">Sailing Trivia</a></h3>
          <p>Learn some fun random sailing trivia with this quiz!</p>
        </div>

        <div>
          <h3 class="topMargin">Navigate the Bay Game</h3>
          <p>Explore Mission Bay and encounter obstacles while sailing. Make sure to be a respectful sailor, don't crash into anyone else, and share the bay in this fun game.</p>
          <p class="red bold">Coming soon</p>
        </div>
      </div>

    </div>

  </main>

  <script src="footer/loadFooter.js"></script>

  <script type="module" src="script.js"></script>

</body>

</html>