-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
80 lines (76 loc) · 5.87 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Carousel Hero</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="icon" href="./assets/images/favicon.png" type="image/png">
<script src="./assets/js/scripts.js" defer></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap&family=Poppins&display=swap rel="
stylesheet">
</head>
<!--
* data-word-index - will display the order of the animation
* data-word-index needs to directly display the children of the text or svg elements you want to animate
-->
<body>
<section class="section-one">
<div class="container">
<div class="Word__Reveal">
<div class="Word__Reveal-container">
<img data-word-index="1" src="assets/images/woodenwick.png" alt="woodenwick logo"
class="original-logo">
<svg data-word-index="2" class="makesy-logo header__text" viewBox="0 0 173 45.84">
<path id="y" class="st0-logo-letter"
d="M159.73,37.38c-1.28,2.58-4.18,7.48-9.04,7.48c-4.86,0-6.9-3.38-6.9-3.38l6.9-4.99
c0,0,4.93,3.86,7.82-0.03L147.87,17l-3.18-2.26h16.4L157.96,17l5.18,12.17l4.39-12.16l-3.6-2.26H173l-3.13,2.26L159.73,37.38z" />
<path id="s" class="st0-logo-letter"
d="M123.29,36.77l1.45-7.53h0.05l5.79,7.67c0.5,0.16,1.02,0.24,1.54,0.23c2.06,0,3.46-1.06,3.46-2.96
c0-1.39-0.84-2.17-2.8-3.19l-3.08-1.62c-3.88-2.03-5.75-4.21-5.75-7.72c0-4.67,3.83-7.72,10.05-7.72c2.65-0.02,5.27,0.43,7.75,1.34
l-1.82,7.3h-0.05l-5.42-7.63c-0.26-0.09-0.52-0.14-0.79-0.14c-2.06,0-3.08,1.16-3.08,2.45c0,1.62,0.75,2.77,3.5,4.2l3.5,1.85
c3.22,1.71,4.91,4.02,4.91,6.89c0,4.81-4.91,7.77-10.65,7.77C128.95,37.97,126.07,37.57,123.29,36.77z" />
<path id="e" class="st0-logo-letter" d="M121.65,33.35c-1.96,2.96-5.09,4.62-9.44,4.62c-6.59,0-12.01-4.53-12.01-11.69
c0-6.75,4.58-12.34,12.05-12.34c4.39,0,7.43,2.54,7.43,5.91c0,3.84-2.99,7.21-8.6,9.29c2.66,2.59,6.03,4.3,9.16,4.3
c0.46,0,0.91-0.04,1.36-0.14L121.65,33.35z M106,18.28c0,3.83,2.01,7.72,4.81,10.58c1.31-1.66,1.82-3.51,1.82-5.87
c0-4.02-2.71-7.44-4.72-7.44C106.71,15.55,106,16.57,106,18.28z" />
<path id="k" class="st0-logo-letter" d="M89.19,22.02l2.85-1.25c2.59-1.12,4.54-2.25,5.11-3.68c0.01-0.01,0.01-0.01,0.01-0.02
c0.61-1.39-0.23-3.14-0.23-3.14h-9.34v0.92c1.5,0.74,2.01,2.54,2.01,3.74c0,2.08-1.12,3.19-3.41,4.85L82.63,26V2.84L70.62,7
l2.66,2.26v28.24h9.34V26.74l6.96,10.77h10.22L89.19,22.02z" />
<path id="a" class="st0-logo-letter" d="M57.56,37.51v-2.63c-2.2,1.85-4.67,3.1-7.24,3.1c-3.04,0-5.09-1.71-5.09-4.62
c0-4.25,4.58-7.07,12.33-7.9c0-5.08-2.06-7.63-5.61-7.63c-2.1,0-3.55,0.55-5.14,1.76l-0.23-0.23c3.18-3.51,6.63-5.41,11.31-5.41
c5.89,0,9.02,3.33,9.02,10.03V37.5L57.56,37.51z M57.56,34.22v-8.18c-2.8,0.79-3.88,2.54-3.88,4.99c0,2.17,0.93,3.33,2.8,3.33
C56.84,34.35,57.2,34.31,57.56,34.22z" />
<path id="m" class="st0-logo-letter" d="M32,37.51V22.85c0-3.61-0.56-4.8-2.57-4.8c-1.01,0-2,0.24-2.9,0.69c0.1,0.7,0.14,1.41,0.14,2.12v16.64
h-9.34V22.85c0-3.61-0.56-4.8-2.57-4.8c-0.95-0.01-1.89,0.2-2.76,0.6v18.86H2.66V19.9L0,17.63l12.01-4.16v4.62
c3.78-3,6.26-4.39,8.88-4.39c3.18,0,4.95,1.57,5.56,4.58c3.92-3.14,6.45-4.58,9.11-4.58c3.97,0,5.79,2.45,5.79,7.16v16.64L32,37.51z
" />
</svg>
<h1 data-word-index="2" class="header__text">ANOTHER NEAT SLOGAN</h1>
<h1 data-word-index="2" class="header__text">WE LOVE SLOGANS</h1>
<svg data-word-index="3" class="dodads" viewBox="0 0 173 43">
<circle class="st1-bottom-left" cx="4.2" cy="15.82" r="2.42" />
<circle id="left-middle-inner" class="st2-middle-inner" cx="12.57" cy="11.96" r="0.69" />
<circle id="left-middle-outter" class="st2-middle-outter" cx="12.57" cy="11.96" r="2.24" />
<circle id="top-left-outter" class="st3-top-left-outter" cx="7.23" cy="4.35" r="2.62" />
<circle id="top-left-inner" class="st3-top-left-inner" cx="7.23" cy="4.35" r="1.11" />
<line class="cross-left" x1="18.47" y1="3.33" x2="18.47" y2="6.45" />
<line class="cross-left" x1="16.91" y1="4.89" x2="20.03" y2="4.89" />
<circle class="st4-bottom-right" cx="165.32" cy="24.31" r="1.59" />
<circle class="st5-middle-right-inner" cx="169.08" cy="17.39" r="0.78" />
<circle id="middle-right" class="st5-middle-right" cx="169.08" cy="17.39" r="2.55" />
<line class="cross-right" x1="160.43" y1="9.3" x2="160.43" y2="13.32" />
<line class="cross-right" x1="158.42" y1="11.31" x2="162.45" y2="11.31" />
<circle id="top-right" class="st8-top-right" cx="167.66" cy="5.08" r="3.41" />
</svg>
</div>
<!-- <button class="btn btn-primary c-button-count">click me</button> -->
</div>
</div>
</section>
</body>
</html>