-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
162 lines (134 loc) · 12.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css" />
<title>Rock Nog</title>
</head>
<body>
<div class="flex-container">
<div class="brand-wrapper">
<img class="brand-name" src="name-crop.png"></img>
</div>
<div class="secondary-branding">
<div class="small-brand-name">ROCK NOG</div>
<a href="https://minimalistbaker.com/easy-vegan-eggnog/" target="blank">
<div class="menu-circle-wrapper">
<svg id="menu-circle" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 433.5 433.5">
<style>.regular { font: bold 60px sans-serif; }</style>
<circle cx="216.75" cy="216.75" r="216.75" fill="#fff"/>
<text x="50%" y="50%" text-anchor="middle" fill="#a49472" stroke="#a49472" stroke-width="2px" dy=".3em" class="regular">NUT NOGS</text>
</svg>
</div></a>
</div>
<div class="flex-container-2">
<div class="character">
<div class="svg_wrapper">
<svg id="carton" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 416.53 503.66">
<g id="Layer_1" data-name="Layer 1"><rect x="76.87" y="135.45" width="18.42" height="358.61" fill="#fff"/><rect x="-287.95" y="294.76" width="55.95" height="21.46" transform="translate(503.8 -136.49) rotate(17.92)" fill="#fff"/><rect x="116.23" y="32.12" width="24.29" height="57.97" fill="#fff"/><rect x="2.56" y="75.59" width="191.02" height="64.45" fill="#fff"/><path d="M-229.32,307.4v63.46h-190V307.4h190m1-1h-192v65.46h192V306.4Z" transform="translate(422.4 -231.32)" fill="#fff"/><polygon points="86.92 121.17 198.43 69.72 198.43 448.97 85.64 502.87 86.92 121.17" fill="#ffecb8"/><path d="M-224.47,301.82V680l-111.79,53.42L-335,352.81l110.52-51m1-1.56L-336,352.17-337.26,735l113.79-54.38V300.26Z" transform="translate(422.4 -231.32)" fill="#fff"/><polygon points="0.5 446.26 1.93 75.28 84.64 121.42 84.64 502.72 0.5 446.26" fill="#a59472"/><path d="M-420,307.45-338.26,353V733.11l-83.14-55.79L-420,307.45m-1-1.7-1.43,372.1L-337.26,735V352.45L-421,305.75Z" transform="translate(422.4 -231.32)" fill="#fff"/><polygon points="2.14 74.48 54.35 27 130.21 59.5 82.9 118.14 2.14 74.48" fill="#ffecb8"/><path d="M-367.95,258.9-293,291l-46.63,57.8-79.78-43.12,51.46-46.8m-.2-1.17-53,48.17,81.75,44.19,48-59.47-76.76-32.89Z" transform="translate(422.4 -231.32)" fill="#fff"/><polygon points="54.84 26.22 52.65 1.37 135.13 32.37 130.82 59.14 54.84 26.22" fill="#ccbd96"/><path d="M-369.18,233.44-287.84,264-292,289.75l-75.12-32.55-2.09-23.76m-1.14-1.5,2.28,25.94,76.85,33.3,4.47-27.81-83.6-31.43Z" transform="translate(422.4 -231.32)" fill="#fff"/><polygon points="142.05 50.73 198.73 68.94 194.39 75.24 138.27 57.04 142.05 50.73" fill="#ffecb8"/><polygon points="138.27 57.04 144.21 57.22 142.47 32.39 136.53 32.21 138.27 57.04" fill="#ffecb8"/><polygon points="52.08 0.64 137.86 33.17 142.52 32.53 56.74 0 52.08 0.64" fill="#ffecb8"/><ellipse cx="-287.22" cy="446.97" rx="29.3" ry="20.09" transform="translate(212.91 -309.93) rotate(-24.31)" fill="#3b4163"/><ellipse cx="-227.78" cy="421" rx="25.6" ry="17.56" transform="translate(198.46 -288.97) rotate(-27.96)" fill="#3b4163"/><rect x="-270.29" y="431.21" width="26.02" height="4.88" transform="translate(221.05 -298.79) rotate(-24.31)" fill="#3b4163"/><rect x="-348.48" y="404.06" width="4.88" height="67.25" transform="translate(-229.86 -260.04) rotate(-71.62)" fill="#3b4163"/><ellipse cx="35.92" cy="197.73" rx="12.06" ry="7.04" fill="#3b4163"/><polygon points="83.22 456.82 3.98 394.68 3.98 287.21 83.22 349.35 83.22 456.82" fill="#822830"/><path d="M-348,400.16c-11.91,19.34-46.84.81-59.18-15.89-6.17-8.35-6.9-16.43-4-21.2s10.59-7.93,21-6.52C-369.19,359.37-336.06,380.83-348,400.16Z" transform="translate(422.4 -231.32)" fill="#822830"/><polygon points="88.54 457.8 196.62 395.65 196.62 288.18 88.54 350.32 88.54 457.8" fill="#f72d4a"/><ellipse cx="-284.61" cy="447.75" rx="20.96" ry="14.37" transform="translate(212.82 -308.79) rotate(-24.31)" fill="#8b94e8"/><ellipse cx="-226.66" cy="421.94" rx="18.61" ry="12.76" transform="translate(198.14 -288.34) rotate(-27.96)" fill="#8b94e8"/></g>
<g id="guitar"><ellipse cx="-196.3" cy="628.52" rx="74.03" ry="103.38" transform="translate(-295.12 -5.17) rotate(-69.68)" fill="#3b4163"/><ellipse cx="-162.68" cy="554.61" rx="56.91" ry="85.69" transform="matrix(0.35, -0.94, 0.94, 0.35, -203.86, -21.88)" fill="#3b4163"/><ellipse cx="-193.24" cy="618.78" rx="60.82" ry="103.38" transform="translate(-283.99 -8.65) rotate(-69.68)" fill="#8b94e8"/><ellipse cx="-160.58" cy="548.45" rx="50.41" ry="85.69" transform="translate(-196.72 -23.93) rotate(-69.68)" fill="#8b94e8"/><polygon points="376.86 146.92 226.06 402.94 251.19 415.31 387.67 151.39 376.86 146.92" fill="#95b0f9"/><polygon points="340.71 131.37 186.26 382.52 210.77 396.67 351.05 137.34 340.71 131.37" fill="#95b0f9"/><polygon points="209.05 398.88 186.27 385.57 187.26 381.87 211.95 396.12 209.05 398.88" fill="#3b4163"/><polygon points="248.69 418.05 225.43 406.42 226.19 402.67 251.39 415.09 248.69 418.05" fill="#3b4163"/><circle cx="273.12" cy="420.37" r="8.66" fill="#3b4163"/><circle cx="281.02" cy="404.35" r="5.48" fill="#3b4163"/><circle cx="287.43" cy="391.58" r="5.48" fill="#3b4163"/><circle cx="274.21" cy="420.37" r="4.39" fill="#95b0f9"/><polygon points="378.42 102.16 359.94 90.49 332.58 122.36 363.53 139.99 378.42 102.16" fill="#8b94e8"/><polygon points="359.89 142.72 331.93 126.38 333.14 121.84 363.45 139.33 359.89 142.72" fill="#3b4163"/><polygon points="396.94 155.6 370.24 143.86 370.86 139.67 399.77 152.19 396.94 155.6" fill="#3b4163"/><polygon points="409.64 117.5 391.94 108.89 370.62 140.12 400.06 152.84 409.64 117.5" fill="#8b94e8"/><polygon points="388.15 145.3 383.66 142.7 393.38 114.43 404.22 121.67 388.15 145.3" fill="#95b0f9"/><polygon points="349.15 125.67 353.43 128.11 372.87 105.43 361.72 100.05 349.15 125.67" fill="#95b0f9"/><circle cx="349.23" cy="93.92" r="4.39" fill="#95b0f9"/><circle cx="343.58" cy="101.93" r="4.39" fill="#95b0f9"/><circle cx="337.13" cy="109.55" r="4.39" fill="#95b0f9"/><circle cx="412.14" cy="125.42" r="4.39" fill="#95b0f9"/><circle cx="409.38" cy="137.35" r="4.39" fill="#95b0f9"/><circle cx="406.73" cy="146.28" r="4.39" fill="#95b0f9"/><circle cx="195.69" cy="451.16" r="4.39" fill="#95b0f9"/><circle cx="297.51" cy="270.65" r="8.66" fill="#ffecb8"/><ellipse cx="-98.5" cy="509.67" rx="17.87" ry="8.07" transform="translate(240.15 -233.95) rotate(-20.22)" fill="#ffecb8"/><ellipse cx="-74.34" cy="547.96" rx="12.74" ry="8.66" transform="translate(301.1 -234.34) rotate(-12.6)" fill="#ffecb8"/><rect x="-128.56" y="499.77" width="10.23" height="9.27" rx="3.57" transform="translate(708.34 -46.39) rotate(38.28)" fill="#fff"/><ellipse cx="-86.47" cy="516.53" rx="22.32" ry="8.07" transform="translate(238.52 -229.37) rotate(-20.22)" fill="#e6d5a7"/><ellipse cx="-102.23" cy="529.96" rx="22.65" ry="8.07" transform="translate(391.01 -236.42) rotate(-3.38)" fill="#ffecb8"/><rect x="-113.93" y="508.94" width="10.23" height="9.27" rx="3.57" transform="translate(255.05 -239.45) rotate(-18.36)" fill="#fff"/><rect x="-123.2" y="527.06" width="10.23" height="8.59" rx="3.44" transform="translate(382.19 -238.68) rotate(-4.3)" fill="#fff"/></g>
<g id="upper-arm"><ellipse id="shoulder" cx="-364.21" cy="517.1" rx="30.9" ry="38.81" transform="translate(-3.9 -343.65) rotate(-40.79)" fill="#e6d5a7"/></g>
<g id="elbow-hand"><polygon points="204.5 366.81 111.72 359.86 107.7 322.52 207.05 338.68 204.5 366.81" fill="#ffecb8"/></g>
<rect id="shoulder-to-elbow" x="-351.2" y="503.31" width="42.54" height="100.4" rx="21.27" transform="translate(-141.58 -278.18) rotate(-52.1)" fill="#e6d5a7"/></g>
<g id="forearm">
<ellipse id="elbow" cx="-308.92" cy="572.24" rx="13.19" ry="15.01" transform="translate(-434.54 -9.15) rotate(-85.79)" fill="#fff3d2"/>
<ellipse id="back-of-hand" cx="-205.3" cy="580.3" rx="26.71" ry="23.47" transform="translate(330.48 -256.03) rotate(-8.87)" fill="#ffecb8"/>
<ellipse id="ring-finger" cx="-173.49" cy="584.96" rx="7.17" ry="19.82" transform="translate(-313.49 117.04) rotate(-83.7)" fill="#ffecb8"/>
<ellipse id="first-finger" cx="234.73" cy="327.91" rx="19.82" ry="7.17" fill="#ffecb8"/>
<ellipse id="pinky" cx="227.28" cy="365.77" rx="19.82" ry="7.17" fill="#ffecb8"/>
<ellipse id="middle-finger" cx="-178.46" cy="568.85" rx="7.17" ry="19.82" transform="translate(-253.4 8.75) rotate(-73.95)" fill="#ffecb8"/>
<ellipse id="thumb" cx="-189.7" cy="569.31" rx="4.68" ry="5.33" transform="translate(-321.15 107.02) rotate(-85.79)" fill="#fff3d2"/>
<ellipse id="knuckle" cx="-189.67" cy="582.8" rx="4.68" ry="5.33" transform="translate(-334.58 119.55) rotate(-85.79)" fill="#fffaee"/>
</g>
<ellipse id="knuckle" cx="-80.75" cy="551.08" rx="4.68" ry="5.33" transform="translate(-202.02 198.79) rotate(-85.79)" fill="#fffaee"/>
</svg>
</div> <!--wrapper-->
</div><!--SVG character-->
<div class="words">
<p class="lyrics">Nog nog noggin' on heaven's door</p>
<p class="info">NOW AVAILABLE YEAR-ROUND.<br>
IT'S JUST THAT GOOD.</p><br><br><br>
</div>
</div> <!--flex container 2-->
<div class="part-2">
<div class="slide-right"><p>NUTMEG</p></div>
<div class="slide-up"><p>AND MILK OF THE CASHEW</p></div>
</div>
<div class="part-3">
<div class="founder-wrapper">
<img src="pexels-wendy-wei-1916821.jpg" width="100%" height="auto">
<p>photo Wendy Wei via Pexels, site 2021 Sara Harvey-Patrick</p>
</div>
<div class="founder-info">
<h1>I WAS A NOG ROCK GOD</h1><BR>
<p>A note from the founder:
<p>I used to drink a lot of eggnog as a rock star. A lot. You can imagine!</p>
<p>So much so, that I decided to launch my own line of vegan nut nogs, to help save the earth, my arteries and yours. Enjoy.</p>
</div>
</div>
<div class="footer">AVAILABLE ANYWHERE FINE NOGS ARE SOLD</div>
</div> <!--flex container -->
<script>
function debounce(func, wait = 10, immediate = true) {
let timeout;
return function() {
let context = this, args = arguments;
let later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
let callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
let scrollPos = 0;
const smallName = document.querySelector('.small-brand-name');
const bigName = document.querySelector('.brand-wrapper');
const menuCircle = document.querySelector('.menu-circle-wrapper');
function checkPosition() {
let windowY = window.scrollY;
if (windowY < scrollPos) {
// Scrolling UP -- small disappears, big appears
smallName.classList.remove('is-visible');
menuCircle.classList.remove('is-visible')
bigName.classList.remove('is-hidden');
} else {
// Scrolling DOWN -- big disappears, small appears
smallName.classList.add('is-visible');
menuCircle.classList.add('is-visible');
bigName.classList.add('is-hidden');
}
scrollPos = windowY;
}
const bg = document.querySelector('.part-2');
const nutmeg = document.querySelector('.slide-right p');
const cashew = document.querySelector('.slide-up p');
var isInViewport = function (elem) {
var bounding = elem.getBoundingClientRect();
return (
bounding.top >= 0 &&
bounding.left >= 0 &&
bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};
var handleScrollAnimation = () => {
if (isInViewport(bg)) {
bg.classList.add("scrolled");
nutmeg.classList.add("scrolled");
cashew.classList.add("scrolled");
//}
//else {
//bg.classList.remove("scrolled");
//nutmeg.classList.remove("scrolled");
//cashew.classList.remove("scrolled");
}
};
window.addEventListener('scroll', debounce(checkPosition));
window.addEventListener('scroll', debounce(handleScrollAnimation));
</script>
</body>
</html>