mary-rose/index.html at master · nnunn/mary-rose · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <title>Star</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
    <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
   <link href="https://fonts.googleapis.com/css?family=Open+Sans|Lobster" rel="stylesheet">

    <!-- Custom CSS -->
     <link rel="stylesheet" href="css/custom.css">
    <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-112667190-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-112667190-1');
</script>

  </head>
  <body id="home"><a name="top"></a>
    <div id="size-warning"><p>This story is not available on mobile devices and this story requires your browser window to be at least 1000px wide and 700px high. Please increase your browser size or use another device.</p></div>
   <section id="one">
    <section class="pulser">
      </section>
    <div class="title">
      <h1>Mary Rose</h1>
      <h2>A Scrolling Story by Natasha Nunn</h2>
        <p class="dir">Scroll down, slowly.</p>
      <div class="arrow-container">
        <div class="chevron"></div>
        <div class="chevron"></div>
        <div class="chevron"></div>
      </div>
</div>


  </section>
  <section id="two">
    <div id="cloud">

    <div class="inner">


      <p id="p-one">There is a sweetness on my tongue. A sweetness and a feeling of relief. This is soft, a longed for afternoon nap with nothing to push you out of bed. No sense of need, no need. </p>

      <p id="p-two"> But something is calling. Muffled, like a voice through dark lake water. I want to drift away, but instead I break through the surface to a cold grey sky laced with branches. </p>

      <p id="p-three">And suddenly, I am once again obsessed with what's happening on your side, just like you are. Most of the others here are the same way, peering into living rooms, hiding behind bushes to watch their lovers, their parents, their children.</p>

       </div>
    </div>

  </section>
  <section id="three">


    <section id="three-fade">

    <div class="inner" id="dots">


  <a href="fool.html" class="dots" id="dot2"></a>
  <a name="return"></a>
  <a href="emperor.html" class="dots" id="dot3"></a>
  <a href="tower.html" class="dots" id="dot4"></a>
  <a href="wheel.html" class="dots" id="dot4-2"></a>
  <a href="moon.html" class="dots" id="dot5-2"></a>
  <!--<a href="four-two.html" class="dots" id="dot5"></a>-->
  <a href="world.html" class="dots" id="dot6"></a>
  <div class="wrap-div">
     <p class="dir2">Explore the dots.</p>
  </div>
</div>

</section>
</section>

   <section id="four">
    <div class="end3"><p>I'm not sure what help I can be, but maybe you are right<br/>maybe they do need me to remind them with<br/>gentle pushes<br/>that bonds can break<br/>that love is staying.</p></div>
    <div class="end2"><h2 class="h2-end">- End -</h2><br/><a href="#top" id="reloader">Click here</a> or scroll up and refresh to re-read.<br/>
      <a href="credits.html"><em>Credits</em></a></div>

    <div class="inner end">

      <p>Tell me.</p>


       <p><a id="stay" class="final">Am I still needed?</a></p>
       <p><a id="go" class="final">Or is it time to go?</a></p>
        </div>
</section>
<a href="credits.html" class="credits-link">CREDITS</a>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.0/TweenMax.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
    <script src="js/custom.js"></script>

  </body>
</html>