Skip to content

Commit ee56558

Browse files
jeremyjacobjeremyjacob
committed
init
0 parents  commit ee56558

9 files changed

+1605
-0
lines changed

‎.DS_Store

6 KB
Binary file not shown.

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎assets/Coca Cola ii.ttf

56.6 KB
Binary file not shown.

‎index.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>Coke</title>
6+
<script type="module">
7+
import './styles.scss'
8+
</script>
9+
</head>
10+
11+
<body>
12+
<div class="center">
13+
<h1><span>Coca</span><span>Cola</span></h1>
14+
</div>
15+
<!-- <button id="get-started">Meet with your endocrinologist now</button> -->
16+
<span id="scroll-message">Scroll down to see all the flavors of Coke</span>
17+
18+
19+
<div id='render-container'>
20+
<canvas id="canvas3d"></canvas>
21+
</div>
22+
23+
24+
<script src="https://unpkg.com/three@^0.131.0/build/three.min.js"></script>
25+
<script src="runtime.js"></script>
26+
<script>
27+
const app = new SpeRuntime.Application();
28+
app.start('https://my.spline.design/untitled-5de93901e296441681798c1dd9f1085a/scene.json');
29+
</script>
30+
</body>
31+
32+
</html>

‎package.json

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"scripts": {
3+
"dev": "vite",
4+
"build": "vite build"
5+
},
6+
"devDependencies": {
7+
"sass": "^1.42.1",
8+
"vite": "^2.6.3"
9+
}
10+
}

‎reset.css

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
*,
2+
*:before,
3+
*:after {
4+
box-sizing: border-box;
5+
}
6+
7+
html,
8+
body,
9+
div,
10+
span,
11+
object,
12+
iframe,
13+
figure,
14+
h1,
15+
h2,
16+
h3,
17+
h4,
18+
h5,
19+
h6,
20+
p,
21+
blockquote,
22+
pre,
23+
a,
24+
code,
25+
em,
26+
img,
27+
small,
28+
strike,
29+
strong,
30+
sub,
31+
sup,
32+
tt,
33+
b,
34+
u,
35+
i,
36+
ol,
37+
ul,
38+
li,
39+
fieldset,
40+
form,
41+
label,
42+
table,
43+
caption,
44+
tbody,
45+
tfoot,
46+
thead,
47+
tr,
48+
th,
49+
td,
50+
main,
51+
canvas,
52+
embed,
53+
footer,
54+
header,
55+
nav,
56+
section,
57+
video {
58+
margin: 0;
59+
padding: 0;
60+
border: 0;
61+
font-size: 100%;
62+
font: inherit;
63+
vertical-align: baseline;
64+
text-rendering: optimizeLegibility;
65+
-webkit-font-smoothing: antialiased;
66+
text-size-adjust: none;
67+
}
68+
69+
footer,
70+
header,
71+
nav,
72+
section,
73+
main {
74+
display: block;
75+
}
76+
77+
body {
78+
line-height: 1;
79+
}
80+
81+
ol,
82+
ul {
83+
list-style: none;
84+
}
85+
86+
blockquote,
87+
q {
88+
quotes: none;
89+
}
90+
91+
blockquote:before,
92+
blockquote:after,
93+
q:before,
94+
q:after {
95+
content: '';
96+
content: none;
97+
}
98+
99+
table {
100+
border-collapse: collapse;
101+
border-spacing: 0;
102+
}
103+
104+
input {
105+
-webkit-appearance: none;
106+
border-radius: 0;
107+
}

‎runtime.js

+1,089
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎styles.scss

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
@import 'reset.css';
2+
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
3+
4+
@font-face {
5+
font-family: Coca Cola;
6+
src: url(assets/Coca\ Cola\ ii.ttf);
7+
}
8+
9+
html,
10+
body {
11+
background: #ec1f26;
12+
// background: #242424;
13+
color: white;
14+
height: 100%;
15+
background-size: 100%;
16+
}
17+
18+
.center {
19+
display: flex;
20+
flex-direction: column;
21+
align-content: center;
22+
align-items: center;
23+
text-align: center;
24+
height: 100%;
25+
26+
h1 {
27+
margin-top: 5rem;
28+
font-size: 10em;
29+
font-family: 'Coca Cola';
30+
color: white;
31+
text-shadow: 0px 1px 0px hsla(0, 0%, 60%), 0px 2px 0px hsla(0, 0%, 53%),
32+
0px 3px 0px hsla(0, 0%, 47%), 0px 4px 0px hsla(0, 0%, 40%),
33+
0px 5px 0px hsla(0, 0%, 33%), 0px 6px 0px hsla(0, 0%, 27%),
34+
0px 7px 0px hsla(0, 0%, 20%), 0px 8px 7px #6e1f1f;
35+
36+
span:nth-child(1) {
37+
margin-right: 1.5em;
38+
}
39+
}
40+
}
41+
#get-started {
42+
position: relative;
43+
top: 40%;
44+
width: clamp(10em, 15%, 25em);
45+
background-color: white;
46+
border: none;
47+
border-radius: 15px;
48+
font-size: 1.1em;
49+
padding: 0.1em;
50+
}
51+
52+
#scroll-message {
53+
position: absolute;
54+
top: 48%;
55+
left: 4em;
56+
}
57+
58+
#render-container {
59+
width: 100%;
60+
height: 100%;
61+
position: absolute;
62+
top: 0;
63+
// top: 5em;
64+
65+
display: flex;
66+
flex-direction: column;
67+
justify-content: center;
68+
align-content: center;
69+
70+
canvas {
71+
width: 100%;
72+
height: 100%;
73+
outline: none;
74+
margin: auto;
75+
transform: scale(1.15);
76+
}
77+
}

0 commit comments

Comments
 (0)