-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
228 lines (180 loc) · 7.11 KB
/
index.html
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
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Righteous&display=swap" rel="stylesheet">
<link href="images/favicon.ico" rel="shortcut icon">
<meta property="og:image" content="images/animato.png" />
<title>Animato</title>
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/animate.min.css">
<script src="js/baffle.min.js"></script>
<script src="js/wow.js"></script>
<script>
new WOW().init();
</script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
<a class="navbar-brand" href="#">
<img src="images/favicon.ico" width="30" height="30" alt=""> Animato
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Animations <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Charachters</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
FancyMode
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Animo</a>
<a class="dropdown-item" href="#">Chimo</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Omango</a>
</div>
</li>
</ul>
<hr>
<ul class="navbar-nav mr-right">
<li class="nav-item">
<a class="nav-link" href="#">Log In</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign Up</a>
</li>
</ul>
</div>
</nav>
<header>
<div class="overlay text-center">
<div class="content animated flipInX slow">
<h1>Animato</h1>
<h2 class="baffle">Get Animated !!</h2>
<h3>Animate 3D characters for games, film, and more.</h3>
<a href="#">Sign Up for free</a>
<a href="#">Log In</a>
</div>
</div>
</header>
<section id="some-text" class="text-center">
<h3>Empowering creativity with animated 3D characters.</h3>
<p>Bring your projects to life with 3D characters, skeletal rigs, and animations, ready for use in film, games,
interactive experiences and illustration.</p>
</section>
<section id="girly" class="text-center no-gutters wow zoomIn">
<div class="row">
<div class="col-12 col-md-6">
<img src="images/1.jpg" alt="A girl in a line">
</div>
<div class="col-12 col-md-6">
<div class="girly-text">
<h3>Ready to Use Characters</h3>
<p>Browse a collection of high-quality 3D characters. From realistic to cartoon, fantasy to sci-fi, there’s a
character for every purpose. Each character comes fully textured and rigged so you can use immediately in
your creative projects.</p>
</div>
</div>
</div>
</section>
<section id="spidey" class="text-center no-gutters wow zoomIn">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-2">
<div class="spidey-text">
<h3>Automatic Character Rigging</h3>
<p>Upload your custom character to Mixamo and get an automatically rigged full human skeleton, custom fit to
your model and ready to animate. Customize your rigging options with optimizations for mobile performance.
</p>
</div>
</div>
<div class="col-12 col-md-6 order-md-2 order-1">
<img src="images/2.jpg" alt="Spidey man">
</div>
</div>
</section>
<section id="nerdy" class="text-center no-gutters wow zoomIn">
<div class="row">
<div class="col-12 col-md-6">
<img src="images/3.jpg" alt="Nerdy Man with Lightened Fingers">
</div>
<div class="col-12 col-md-6">
<div class="nerdy-text">
<h3>Motion Captured Animations</h3>
<p>Explore a library of thousands of full-body character animations, captured from professional motion actors.
Each animation is transferred to your own character and can be previewed and edited directly with Mixamo, so
you can control the look and feel of each motion.</p>
</div>
</div>
</div>
</section>
<section id="cartoon" class="text-center no-gutters wow zoomIn">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-2">
<div class="cartoon-text">
<h3>Export for Any Project</h3>
<p>Download characters and animations in multiple formats, ready to use in motion graphics, video games, film,
or illustration. Whether you just need one animation or a hundred, export optimizations will keep your
projects light and efficient.</p>
</div>
</div>
<div class="col-12 col-md-6 order-md-2 order-1">
<img src="images/4.jpg" alt="Cartoon Charachter">
</div>
</div>
</section>
<section id="icons" class="text-center wow zoomInDown">
<div class="container">
<h3>Do more with 3D&AR tools from Adobe.</h3>
<div class="row">
<div class="col-12 col-md-4 icon">
<img src="images/icons/ar.png" alt="Aero icon">
<h4>Aero</h4>
<p>Design & share immersive augmented reality experiences, no coding required.</p>
<a href="#">Learn More >> </a>
</div>
<div class="col-12 col-md-4 icon">
<img src="images/icons/dn.png" alt="Dimension icon">
<h4>Dimension</h4>
<p>Design in 3D for branding, product shots, packaging design, and creative work.</p>
<a href="#">Learn More >> </a>
</div>
<div class="col-12 col-md-4 icon">
<img src="images/icons/s.png" alt="Substance icon">
<h4>Substance</h4>
<p>The industry standard for 3D painting and texturing, Give it a try immediatly.</p>
<a href="#">Learn More >> </a>
</div>
</div>
</div>
</section>
<footer class="text-center">
<h6>Omar Ashraf Codes</h6>
<p>Copyright © 2020 Omar Ashraf Codes. All rights reserved.</p>
</footer>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- BAFFLE JS CODE-->
<script>
let b = baffle(".baffle", {
characters: "#/<>*&ˆ%$#@!_--+=.,|\}{",
speed: 150
});
b.start();
b.reveal(4000);
</script>
</body>
</html>