scroll_animations/index.html at main · calebjoshuapaul/scroll_animations · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scroll Animations | CSS Only | Dragonball Z</title>
  <link rel="stylesheet" href="./style.css">
  <link rel="icon" type="image/png" href="./images/dragon_balls.png" />
</head>

<body>
  <main>
    <header>
      <div class="kamehameha-img-container">
        <img class="kamehameha-img" src="images/kamehameha.png" alt="">
      </div>
      <img class="dragonballz-img" src="images/dragonballz.png" alt="">
    </header>
    <section class="banner">
      <div class="content">
        <h1 class="left">CSS ONLY</h1>
        <div class="right">
          <h2>CALEB JOSHUA</h2>
          <p>Web Design</p>
          <p><a href="https://calebjoshua.me" target="_blank">website &#8599;</a></p>
        </div>
        <div class="image">
          <img src="images/goku_nimbus.png" alt="">
        </div>
      </div>
    </section>


    <section class="grid grid-1">
      <figure class="autoShow">
        <img src="images/shenron.png" alt="">
      </figure>
      <figure class="autoShow">
        <img src="images/dragon_balls.png" alt="" class="autoRotate">
      </figure>
      <h2 class="autoShow">Introduce</h2>
    </section>

    <section class="grid grid-2">
      <div class="autoShow">
        <figure>
          <img src="images/dragonballz.png" alt="">
        </figure>
        <p>

          Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur tempore aliquid culpa libero. <br> Quam
          voluptatum illum ipsa laborum voluptates doloremque officia non autem! Rerum cumque harum amet, temporibus
          porro quibusdam? Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores, adipisci eligendi pariatur
          cum magni incidunt fugit distinctio porro at aut repellendus. Voluptate eius eveniet ullam modi adipisci illum
          in laudantium?
        </p>
      </div>
      <div class="autoShow">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
        standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
        a type specimen b <br>
        ook. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
        essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem
        Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of
        Lorem Ipsum.
        printer took a galley of type and scrambled it to make a type specimen b <br>
        ook. It has survived not only five centuries, but also the leap into electronic typesetting, remai
      </div>

      <div class="autoShow">
        <figure>
          <img src="images/gohan.png" alt="">
        </figure>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur tempore aliquid culpa libero. <br> Quam
          voluptatum illum ipsa laborum voluptates doloremque officia non autem! Rerum cumque harum amet, temporibus
        </p>
      </div>
      <div class="autoShow">
        <figure>
          <img src="images/kid_goku_nimbus.png" alt="">
        </figure>
      </div>
    </section>

    <section class="grid grid-3">
      <div class="autoBLur">CALEB JOSHUA</div>
      <div class="autoBLur">DESIGNER</div>
      <div class="autoBLur">DEVELOPER</div>
      <div class="autoBLur"><a href="https://calebjoshua.me" target="_blank">ABOUT ME &#8599;</a></div>
      <div class="autoBLur"><a href="https://calebjoshua.me" target="_blank">CONTACT ME &#8599;</a></div>
    </section>
  </main>
  <footer>
    <div class="grid grid-5 content">
      <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero labore numquam explicabo itaque qui, assumenda
        temporibus aspernatur ex quae corrupti, ipsa quod esse hic debitis quidem obcaecati aperiam! Incidunt blanditiis
        facilis a et provident vel aspernatur deleniti sint debitis numquam ducimus recusandae assumenda eligendi
        explicabo id unde quasi dicta ut cumque, tempore accusamus ipsa similique repellat. Deserunt delectus sint
        debitis ad sequi laboriosam inventore consequatur nemo neque cum est nostrum eveniet aliquid unde distinctio,
        omnis sed vitae amet nobis atque.</div>
      <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero labore numquam explicabo itaque qui, assumenda
        temporibus aspernatur ex quae corrupti, ipsa quod esse hic debitis quidem obcaecati aperiam! Incidunt blanditiis
        facilis a et provident vel aspernatur deleniti sint debitis numquam ducimus recusandae assumenda eligendi
        explicabo id unde quasi dicta ut cumque, tempore accusamus ipsa similique repellat. Deserunt delectus sint
        debitis ad sequi laboriosam inveum est nostrum eveniet aliquid unde distinctio, omnis sed vitae amet nobis
        atque.</div>
      <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero labore numquam explicabo itaque qui, assumenda
        temporibus aspernatur ex quae corrupti, ipsa quod esse hic debitis quidem obcaecati aperiam! Incidunt blanditiis
        facilis a et provident vel aspernatur deleniti sint debitis numquam ducimus recusandae assumenda eligendi
        explicabo id unde quasi dicta ut cumque, tempore accusamus ipsa similique repellat. Deserunt delectus sint
        debitis ad sequi laboriosam inventore consequatur nemo neque cum est nos atque.</div>
      <div>
        <figure class="dropshadow">
          <img src="images/master_roshi.png" alt="">
        </figure>
      </div>
    </div>
    <br>
    <br>
    <hr>
    <div class="footer-contact">
      <p><a href="https://calebjoshua.me" target="_blank">Website &#8599;</a></p>
      <p><a href="https://calebjoshua.me" target="_blank">About &#8599;</a></p>
      <p><a href="https://calebjoshua.me" target="_blank">Contact &#8599;</a></p>
      <p><a href="https://www.linkedin.com/in/calebjoshuapaul/" target="_blank">LinkedIn &#8599;</a></p>
      <p><a href="https://github.com/calebjoshuapaul" target="_blank">Github &#8599;</a></p>
    </div>
  </footer>
</body>

</html>