GenderGaps-FinalProject/scroll_test.html at main · CMU-Vis-2021/GenderGaps-FinalProject · 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
<!DOCTYPE html>
<html>
  <head>
    <title>Scrolling Sections</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" type="text/css" href="scroll_test_style.css" />
  </head>
  <body>
    <div class="container">
      <div id="graphic">
        <div id="sections">
          <section class="step">
            <div class="title">
              Childhood Environment and Gender Gaps in Adulthood
            </div>
            <br />
            By Tammy Zhou, Priya Jain, Alana Mittleman, and Rob Lambeth
            <br />
            <br />
            Data Visualization Final Project @CMU 2021
          </section>
          <section class="step">
            <div class="title">Story chunk #1</div>
            <br />
            <br />
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </section>
          <section class="step">
            <div class="title">Story chunk #2</div>
            <br />
            <br />
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </section>
          <section class="step">
            <div class="title">Story chunk #3</div>
            <br />
            <br />
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </section>
          <section class="step">
            <div class="title">Story chunk #4</div>
            <br />
            <br />
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </section>
        </div>
        <div id="vis"></div>
        <div id="extra-space"></div>
      </div>
    </div>

    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="scroller.js"></script>
    <script src="sections.js"></script>
  </body>
</html>