-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.html
More file actions
130 lines (126 loc) · 10.3 KB
/
index.html
File metadata and controls
130 lines (126 loc) · 10.3 KB
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
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ride This</title>
<link rel="stylesheet" href="style.css" />
<script src="lib/vanillaTilt.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="rideThis.js" defer></script>
</head>
<body>
<section class="container">
<!-- main -->
<div class="main">
<div id="text" data-text="Ride This">Ride This</div>
<div class="scroll">
<svg
width="30"
height="30"
viewBox="0 0 66 50"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<line
x1="1.76777"
y1="2.23223"
x2="34.7678"
y2="35.2322"
stroke="black"
stroke-width="5"
/>
<line
y1="-2.5"
x2="46.669"
y2="-2.5"
transform="matrix(-0.707107 0.707107 0.707107 0.707107 66 4)"
stroke="black"
stroke-width="5"
/>
<line
x1="1.76777"
y1="15.2322"
x2="34.7678"
y2="48.2322"
stroke="black"
stroke-width="5"
/>
<line
y1="-2.5"
x2="46.669"
y2="-2.5"
transform="matrix(-0.707107 0.707107 0.707107 0.707107 66 17)"
stroke="black"
stroke-width="5"
/>
</svg>
<p>Scroll</p>
</div>
</div>
<!-- Block -->
<div class="blocks">
<div class="block block-left"></div>
<div class="block block-right"></div>
</div>
<div class="letters">
<div class="row">
<div class="letter top-left">타</div>
<div class="letter top-right">이</div>
</div>
<div class="row">
<div class="letter bottom-right">거</div>
</div>
</div>
<!-- Description -->
<div class="description">
<div class="logo">
<svg
width="80"
height="80"
viewBox="0 0 200 237"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect y="25" width="200" height="200" fill="#F5F1EB" />
<path
d="M33.7795 157.624C82.7972 112.345 148.266 21.7871 18 21.7871V10H181.403V29.2966C181.403 29.2966 80.7376 124.607 48.8935 170.456L33.7795 157.624Z"
fill="#FB4800"
stroke="#FB4800"
stroke-width="20"
/>
<path
d="M33 236L37.7969 213.453H47.4062C48.9479 213.453 50.2604 213.74 51.3438 214.312C52.4271 214.875 53.25 215.646 53.8125 216.625C54.3854 217.604 54.6719 218.729 54.6719 220C54.6719 221.094 54.4583 222.141 54.0312 223.141C53.6042 224.13 52.9844 225.01 52.1719 225.781C51.3594 226.552 50.3646 227.141 49.1875 227.547L51.8438 236H45.8594L43.5469 228.109H43.6719H40.4219L38.75 236H33ZM42.625 217.781L41.2656 224.062H44.8125C45.6354 224.062 46.3542 223.911 46.9688 223.609C47.5833 223.307 48.0573 222.885 48.3906 222.344C48.724 221.802 48.8906 221.182 48.8906 220.484C48.8906 219.599 48.625 218.927 48.0938 218.469C47.5625 218.01 46.8073 217.781 45.8281 217.781H42.625ZM54.8906 236L58.5156 218.984H63.9062L60.2812 236H54.8906ZM62.2031 217.031C61.4427 217.031 60.7969 216.771 60.2656 216.25C59.7344 215.719 59.4688 215.089 59.4688 214.359C59.4688 213.62 59.7344 212.99 60.2656 212.469C60.7969 211.938 61.4427 211.672 62.2031 211.672C62.974 211.672 63.6198 211.938 64.1406 212.469C64.6719 212.99 64.9375 213.62 64.9375 214.359C64.9375 215.089 64.6719 215.719 64.1406 216.25C63.6198 216.771 62.974 217.031 62.2031 217.031ZM70.7969 236.25C69.6094 236.25 68.5781 235.979 67.7031 235.438C66.8385 234.896 66.1667 234.13 65.6875 233.141C65.2188 232.141 64.9844 230.964 64.9844 229.609C64.9844 228.047 65.1979 226.604 65.625 225.281C66.0625 223.958 66.6615 222.807 67.4219 221.828C68.1927 220.849 69.0938 220.089 70.125 219.547C71.1562 219.005 72.2812 218.734 73.5 218.734C74.3438 218.734 75.1042 218.865 75.7812 219.125C76.4583 219.385 77.026 219.75 77.4844 220.219C77.9427 220.688 78.2656 221.245 78.4531 221.891H78.5625L80.3594 213.453H85.75L80.9375 236H75.6875L76.2031 233.531H76.0938C75.4896 234.417 74.7396 235.094 73.8438 235.562C72.9583 236.021 71.9427 236.25 70.7969 236.25ZM73.2969 232.094C73.8698 232.094 74.4062 231.943 74.9062 231.641C75.4167 231.339 75.8594 230.922 76.2344 230.391C76.6198 229.849 76.9219 229.229 77.1406 228.531C77.3594 227.833 77.4688 227.089 77.4688 226.297C77.4688 225.318 77.2135 224.526 76.7031 223.922C76.1927 223.318 75.5104 223.016 74.6562 223.016C74.0833 223.016 73.5469 223.161 73.0469 223.453C72.5469 223.734 72.1094 224.141 71.7344 224.672C71.3594 225.193 71.0625 225.802 70.8438 226.5C70.6354 227.188 70.5312 227.943 70.5312 228.766C70.5312 229.766 70.7812 230.573 71.2812 231.188C71.7812 231.792 72.4531 232.094 73.2969 232.094ZM90.5625 225.578H97.0781C97.099 225.526 97.1094 225.453 97.1094 225.359C97.1094 225.266 97.1094 225.177 97.1094 225.094C97.1094 224.594 96.9948 224.146 96.7656 223.75C96.5469 223.344 96.2292 223.021 95.8125 222.781C95.3958 222.542 94.8854 222.422 94.2812 222.422C93.6771 222.422 93.1198 222.557 92.6094 222.828C92.1094 223.089 91.6771 223.458 91.3125 223.938C90.9583 224.406 90.7083 224.953 90.5625 225.578ZM92.9531 236.391C91.349 236.391 89.9583 236.083 88.7812 235.469C87.6146 234.844 86.7135 233.953 86.0781 232.797C85.4531 231.641 85.1406 230.266 85.1406 228.672C85.1406 227.234 85.3646 225.901 85.8125 224.672C86.2604 223.443 86.8958 222.375 87.7188 221.469C88.5521 220.552 89.5417 219.844 90.6875 219.344C91.8333 218.833 93.1094 218.578 94.5156 218.578C96.0052 218.578 97.3125 218.88 98.4375 219.484C99.5729 220.089 100.458 220.938 101.094 222.031C101.729 223.125 102.047 224.411 102.047 225.891C102.047 226.328 102.026 226.797 101.984 227.297C101.953 227.797 101.885 228.255 101.781 228.672H90.0469C90.0365 228.755 90.026 228.844 90.0156 228.938C90.0052 229.021 90 229.104 90 229.188C90 229.823 90.125 230.396 90.375 230.906C90.6354 231.406 91.0052 231.797 91.4844 232.078C91.9635 232.359 92.5312 232.5 93.1875 232.5C93.9688 232.5 94.6354 232.318 95.1875 231.953C95.7396 231.589 96.1146 231.109 96.3125 230.516H101.344C101.052 231.682 100.516 232.708 99.7344 233.594C98.9635 234.469 98 235.156 96.8438 235.656C95.6875 236.146 94.3906 236.391 92.9531 236.391ZM110.219 236H104.484L108.281 218.062H101.797L102.781 213.453H121.5L120.516 218.062H114.031L110.219 236ZM118.891 236L123.688 213.453H129.031L127.281 221.578H127.391C127.995 220.682 128.76 219.974 129.688 219.453C130.625 218.922 131.703 218.656 132.922 218.656C133.974 218.656 134.891 218.865 135.672 219.281C136.464 219.698 137.073 220.266 137.5 220.984C137.938 221.703 138.156 222.526 138.156 223.453C138.156 223.776 138.135 224.109 138.094 224.453C138.062 224.797 138.005 225.151 137.922 225.516L135.703 236H130.375L132.422 226.359C132.464 226.13 132.495 225.922 132.516 225.734C132.536 225.536 132.547 225.349 132.547 225.172C132.547 224.495 132.302 223.938 131.812 223.5C131.333 223.052 130.703 222.828 129.922 222.828C129.349 222.828 128.818 222.964 128.328 223.234C127.839 223.495 127.422 223.859 127.078 224.328C126.734 224.797 126.5 225.344 126.375 225.969L124.25 236H118.891ZM139.391 236L143.016 218.984H148.406L144.781 236H139.391ZM146.703 217.031C145.943 217.031 145.297 216.771 144.766 216.25C144.234 215.719 143.969 215.089 143.969 214.359C143.969 213.62 144.234 212.99 144.766 212.469C145.297 211.938 145.943 211.672 146.703 211.672C147.474 211.672 148.12 211.938 148.641 212.469C149.172 212.99 149.438 213.62 149.438 214.359C149.438 215.089 149.172 215.719 148.641 216.25C148.12 216.771 147.474 217.031 146.703 217.031ZM150.797 224.172C150.797 223.047 151.104 222.068 151.719 221.234C152.333 220.401 153.198 219.755 154.312 219.297C155.427 218.828 156.74 218.594 158.25 218.594C159.667 218.594 160.917 218.833 162 219.312C163.094 219.781 163.953 220.438 164.578 221.281C165.214 222.125 165.547 223.099 165.578 224.203H160.734C160.714 223.807 160.589 223.464 160.359 223.172C160.141 222.87 159.844 222.635 159.469 222.469C159.094 222.302 158.661 222.219 158.172 222.219C157.703 222.219 157.297 222.281 156.953 222.406C156.62 222.531 156.359 222.703 156.172 222.922C155.995 223.141 155.906 223.401 155.906 223.703C155.906 224.078 156.062 224.385 156.375 224.625C156.688 224.865 157.276 225.13 158.141 225.422L159.953 226.016C161.568 226.557 162.714 227.188 163.391 227.906C164.068 228.615 164.406 229.536 164.406 230.672C164.406 231.807 164.083 232.807 163.438 233.672C162.802 234.536 161.906 235.208 160.75 235.688C159.594 236.167 158.24 236.406 156.688 236.406C155.115 236.406 153.74 236.167 152.562 235.688C151.396 235.208 150.479 234.531 149.812 233.656C149.156 232.781 148.807 231.766 148.766 230.609H153.875C153.927 231.234 154.214 231.75 154.734 232.156C155.266 232.552 155.969 232.75 156.844 232.75C157.312 232.75 157.714 232.693 158.047 232.578C158.38 232.453 158.635 232.276 158.812 232.047C159 231.818 159.094 231.552 159.094 231.25C159.094 230.896 158.938 230.604 158.625 230.375C158.323 230.146 157.755 229.896 156.922 229.625L155.391 229.109C153.818 228.589 152.656 227.927 151.906 227.125C151.167 226.323 150.797 225.339 150.797 224.172Z"
fill="black"
/>
</svg>
</div>
<div class="card">
<div class="content">
<h2>01</h2>
<h3>기록해요</h3>
<p>매일매일 자전거로 기록을 재보아요.</p>
<a href="#">Read More</a>
</div>
</div>
<div class="card">
<div class="content">
<h2>02</h2>
<h3>경쟁해요</h3>
<p>친구들 또는 모든 라이더분들과 기록게임을 해보아요~</p>
<a href="#">Read More</a>
</div>
</div>
<div class="card">
<div class="content">
<h2>03</h2>
<h3>쉽고 간편한 설정</h3>
<p>케이던스 기기를 블루투스 연결만 하면 끝!</p>
<a href="#">Read More</a>
</div>
</div>
<div class="app">앱 다운로드</div>
</div>
</section>
</body>
</html>