rioforce.com/index.html at master · rioforce/rioforce.com · 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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="google-site-verification" content="kxGXyzR3On-jclHw7NmitN8ydHhYlaCKoFb_wDOFh_s">
  <title>rioforce</title>
  <link rel="shortcut icon" type="image/png" href="favicon.png">

  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400&family=Ubuntu:wght@300;400;700&family=Cinzel:wght@400;700&display=swap">
  <link rel="stylesheet" href="css/style.css">
</head>

<body id="home">
  <div class="container">
    <div class="content">
    <nav id="site-nav">
      <a href="/">rioforce</a>
  </nav>

    <header id="header-home">
      <div id="header-content-image">
        <video class="fullscreen" poster="images/mobile-bg.jpg" autoplay loop muted>
          <source src="images/site-reel.mp4" type="video/mp4">
          <source src="images/site-reel.ogv" type="video/ogg">
          <source src="images/site-reel.webm" type="video/webm">
        </video>

        <div id="header-text">
          <img id="rioforce-logo-home" alt="" width="150" height="150" src="images/Rioforce-logo-round-white.png">
          <h1>rioforce</h1>
          <h2>stop-motion animation</h2>
        </div>
        <button><a href="https://www.youtube.com/watch?v=8DuhilbW6RY" target="blank">Watch <em>Life of the Christ</em> Teaser</a></button>
      </div>
      <a href="#lifeofchrist"><img id="down" src="/images/chevron-down-solid.svg" width="100px"></a>
    </header>

    <main class="content">

      <!-- <div class="upper-about-reel-banner">
        <a href="https://www.youtube.com/watch?v=j1Oon8n2h5M" target="_blank">Check out my animation reel!</a>
      </div> -->

      <span id="lifeofchrist"></span>
      <!-- <div id="loc-ad-top-transition-2"></div> -->
      <div class="LoCAd">
        <!-- <div id="loc-ad-top-transition"></div> -->
        <h1 id="LoCHeader">Life of the Christ</h1>
        <h2 id="LoCSubHeader">Currently in production</h2>
        <div id="LoCGallery">
          <img class="LoCGalleryImg" src="images/loc1.jpg" width="400px">
          <img id="slightly-bigger" class="LoCGalleryImg" src="images/loc3.jpg" width="400px">
          <img class="LoCGalleryImg" src="images/loc2.jpg" width="400px">
       </div>
        <div id="LoCContentWrapper">
           <!-- <img id="LoCHeroImg" src="images/LoCJesusPray2.png" width="500px"> -->
            <div class="LoCAd-p">
              <p><em>Life of the Christ</em> is an in-production stop-motion short films focusing on the sufferings, death, and resurrection of Jesus Christ with a focus on his ministry, relationships, and humanity.</p>
              <p>As I work on this project, some chapters will go up on YouTube independently, while others will be part of the final short film. It'll all be free on YouTube! The first episode, <em>The Nativity of the Christ</em> is live now and can be watched on my channel.</p>
              <a id="Nativity-Thumb" href="https://www.youtube.com/watch?v=yeVHg6TuJQg" target="_blank"><img src="images/nativity-play.jpg" width="300px"></a>
              <p>If you're interested in supporting this project or following its production, click the link below to go to my Ko-Fi blog. You can join for free for updates or support monetarily. Either way, YOUR support makes this project come to life!</p>
            <!-- <button><a href="/lifeofchrist">Learn More about <em>Life of the Christ</em></a></button> -->
            <button><a href="https://www.ko-fi.com/rioforce" target="_blank">View The Production Blog</a></button>

            </div>
            <div id="LoCDonate">
              <iframe id='kofiframe' src='https://ko-fi.com/rioforce/?hidefeed=true&widget=true&embed=true&preview=true' style='border:none;width:auto;padding:4px;background:#000000;border-radius:20px;margin-left:auto;margin-right:auto;display:block;' height='712' title='rioforce'></iframe>
              <p>Donate using the widget above, or visit <a href="https://ko-fi.com/rioforce">ko-fi.com/rioforce</a> to support, read my blog, and access exclusive content!</p>
            </div>
          </div>
        <div id="film-lib-top-transition"></div>
      </div>

      <span id="portfolio"></span>

      <div class="film-library">
        <div class="btn-row" id="video-lib-buttons">
          <div class="btn btn-playlist-toggle" id="btn-client" data-id="PLtkOA2qyrbHLzqgaTHO5b3Q-470XT8ZTy">
            <h3 class="sliding-middle-out title "><i class="fas fa-briefcase"></i> Client Work</h3>
          </div>

          <div class="btn btn-playlist-toggle" id="btn-shortfilms" data-id="PLtkOA2qyrbHI0h4gHzOUP3DssE4cue4D3">
            <h3 class="sliding-middle-out title"><i class="fas fa-film"></i> Short Films</h3>
          </div>

          <!-- Duplicate this and a thing in the Javascript to add another section -->
          <div class="btn btn-playlist-toggle" id="btn-tut-bts" data-id="PLtkOA2qyrbHLfvrI1dAtwcmL4FH5-EJFs">
            <h3 class="sliding-middle-out title"><i class="fas fa-graduation-cap"></i> Tutorials</h3>
          </div>
        </div>

        <div class="film-row-wrapper"></div>
        <div class="lower-film-library-banner">
          <a href="https://www.youtube.com/rioforce" target="_blank">See more on YouTube</a>
        </div>
      </div>

      <span id="clients"></span>
      <div class="featuredon">
        <div id="film-lib-bottom-transition"></div>
        <h1 class="clients-header">Client Highlights</h1>
        <h2>Click logos for more information</h2>


        <div id="featured-row">
          <a class="film" id="envision" data-title="Envision Healthcare" href="envision/index.html">
            <div>
              <img width="320" height="137" src="images/Envision.png" class="featuredlogo" alt="Envision Healthcare">
              <img width="80" src="/images/chevron-down-solid.svg">
            </div>
          </a>
          <a class="film" id="monitogo" data-title="Monitogo Studios" href="monitogo/index.html">
            <div>
              <img width="200" height="182" src="images/Monitogo.png" class="featuredlogo" alt="Monitogo Studios"><br>
              <img width="80" src="/images/chevron-down-solid.svg">
            </div>
          </a>
          <a class="film" id="stikbot" data-title="Stikbot" href="stikbot/index.html">
            <div>
              <img width="320" height="137" src="images/Stikbot.png" class="featuredlogo" alt="Stikbot">
              <img width="80" src="/images/chevron-down-solid.svg">
            </div>
          </a>
          <a class="film" id="stopmotionstudio" data-title="Stopmotion Studio" href="stopmotionstudio/index.html">
            <div>
              <img width="150" height="137" src="images/stopmotionstudio.png" class="featuredlogo"
                alt="Stopmotionstudio"><br>
              <img width="80" src="/images/chevron-down-solid.svg">
            </div>
          </a>
          <br>
          <a class="film" id="lan" data-title="LEGO Ambassador Network" href="lan/index.html">
            <div>
              <img width="320" height="137" src="images/lan.png" class="featuredlogo" alt="LEGO Ambassador Network">
              <img width="80" src="/images/chevron-down-solid.svg">
            </div>
          </a>
          <a class="film" id="tubeheroes" data-title="Tube Heroes" href="tubeheroes/index.html">
            <div>
              <img width="200" height="137" src="images/TubeHeroes.png" class="featuredlogo" alt="Tube Heros"><br>
              <img width="80" src="/images/chevron-down-solid.svg">
            </div>
          </a>
          <a class="film" id="artifex" data-title="Artifex Creation" href="artifex/index.html">
            <div>
              <img width="137" height="137" src="images/artifex.png" class="featuredlogo" alt="ArtiFex Creations"><br>
              <img width="80" src="/images/chevron-down-solid.svg">
            </div>
          </a>
        </div>

        <div id="featured-row">
          <h3>_________________</h3>
          <h1 class="clients-header">Featured on</h1>
          <a href="http://www.brickcan.com/" target="_blank">
            <img width="320" height="137" src="images/brickcan.png" class="featuredlogo">
          </a>

          <a href="https://cinebrick.wordpress.com/" target="_blank">
            <img width="320" height="137" src="images/cinebrick%20logo.png" id="cinebrick" class="featuredlogo">
          </a>

          <a href="https://brickworld.com/brickfilm-festival/" target="_blank">
            <img width="320" height="137" src="images/BrickWorld.png" class="featuredlogo">
          </a>

          <a class="film" id="rebrick" data-title="LEGO Ambassador Network" href="lan/index.html">
            <div>
              <img width="320" height="137" src="images/ReBrick.png" class="featuredlogo" alt="ReBrick">
              <img width="80" src="/images/chevron-down-solid.svg">
            </div>
          </a>
        </div>
      </div>

      <div class="contact">
        <h1 class="large-headers">About</h1>
        <img id="lil-rio" src="images/lil-rio.png" alt="rioforce photo">
        <div id="about">
          <p>My name is <span class="emphasis">Benjamin Ely</span>, and I run the animation studio <em>rioforce</em>.
            <br><br>I've been an animator for over <span class="emphasis" id="years-since">17</span> years.
            Telling stories is what I was made to do, and stop-motion animation is the perfect medium to make my ideas a reality.
            <br><br>
            I post most of my animations on my YouTube channel, where I also I upload stop-motion tutorials to help teach and inspire
            others about filmmaking.
          </p>
        </div>

        <h2 id="quote"><em>"Whatever you do, do all to the glory of God."<br>~ 1 Corinthians 10:31b</em></h2>
      </div>
    </main>
  </div>

  <footer id="site-footer"></footer>
  </div>

  <!-- <script src="https://apis.google.com/js/platform.js"></script> -->
  <script type="module" src="js/featured-films.js"></script>
  <script type="module" src="js/injection.js"></script>
  <script type="module" src="js/index.js"></script>
</body>
</html>