Skip to content

Commit 11eb190

Browse files
wwags33wwags33
committed
Project 26 complete
1 parent de57810 commit 11eb190

File tree

3 files changed

+234
-153
lines changed

3 files changed

+234
-153
lines changed

‎26 - Stripe Follow Along Nav/index-START.html

Lines changed: 162 additions & 149 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<title>Follow Along Nav</title>
67
</head>
8+
79
<body>
810
<h2>Cool</h2>
911
<nav class="top">
@@ -17,7 +19,8 @@ <h2>Cool</h2>
1719
<div class="dropdown dropdown1">
1820
<div class="bio">
1921
<img src="https://logo.clearbit.com/wesbos.com">
20-
<p>Wes Bos sure does love web development. He teaches things like JavaScript, CSS and BBQ. Wait. BBQ isn't part of web development. It should be though!</p>
22+
<p>Wes Bos sure does love web development. He teaches things like JavaScript, CSS and BBQ. Wait. BBQ isn't
23+
part of web development. It should be though!</p>
2124
</div>
2225
</div>
2326
</li>
@@ -74,153 +77,163 @@ <h2>Cool</h2>
7477
</ul>
7578
</nav>
7679

77-
<style>
78-
html {
79-
box-sizing: border-box;
80-
font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
81-
}
82-
83-
*, *:before, *:after {
84-
box-sizing: inherit;
85-
}
86-
87-
body {
88-
margin: 0;
89-
min-height: 100vh;
90-
background:
91-
linear-gradient(45deg, hsla(340, 100%, 55%, 1) 0%, hsla(340, 100%, 55%, 0) 70%),
92-
linear-gradient(135deg, hsla(225, 95%, 50%, 1) 10%, hsla(225, 95%, 50%, 0) 80%),
93-
linear-gradient(225deg, hsla(140, 90%, 50%, 1) 10%, hsla(140, 90%, 50%, 0) 80%),
94-
linear-gradient(315deg, hsla(35, 95%, 55%, 1) 100%, hsla(35, 95%, 55%, 0) 70%);
95-
}
96-
97-
h2 {
98-
margin-top: 0;
99-
padding-top: .8em;
100-
}
101-
102-
nav {
103-
position: relative;
104-
perspective: 600px;
105-
}
106-
107-
.cool > li > a {
108-
color: yellow;
109-
text-decoration: none;
110-
font-size: 20px;
111-
background: rgba(0,0,0,0.2);
112-
padding: 10px 20px;
113-
display: inline-block;
114-
margin: 20px;
115-
border-radius: 5px;
116-
}
117-
118-
nav ul {
119-
list-style: none;
120-
margin: 0;
121-
padding: 0;
122-
display: flex;
123-
justify-content: center;
124-
}
125-
126-
.cool > li {
127-
position: relative;
128-
display: flex;
129-
justify-content: center;
130-
}
131-
132-
.dropdown {
133-
opacity: 0;
134-
position: absolute;
135-
overflow: hidden;
136-
padding: 20px;
137-
top: -20px;
138-
border-radius: 2px;
139-
transition: all 0.5s;
140-
transform: translateY(100px);
141-
will-change: opacity;
142-
display: none;
143-
}
144-
145-
.trigger-enter .dropdown {
146-
display: block;
147-
}
148-
149-
.trigger-enter-active .dropdown {
150-
opacity: 1;
151-
}
152-
153-
.dropdownBackground {
154-
width: 100px;
155-
height: 100px;
156-
position: absolute;
157-
background: #fff;
158-
border-radius: 4px;
159-
box-shadow: 0 50px 100px rgba(50,50,93,.1), 0 15px 35px rgba(50,50,93,.15), 0 5px 15px rgba(0,0,0,.1);
160-
transition: all 0.3s, opacity 0.1s, transform 0.2s;
161-
transform-origin: 50% 0;
162-
display: flex;
163-
justify-content: center;
164-
opacity:0;
165-
}
166-
167-
.dropdownBackground.open {
168-
opacity: 1;
169-
}
170-
171-
.arrow {
172-
position: absolute;
173-
width: 20px;
174-
height: 20px;
175-
display: block;
176-
background: white;
177-
transform: translateY(-50%) rotate(45deg);
178-
}
179-
180-
.bio {
181-
min-width: 500px;
182-
display: flex;
183-
justify-content: center;
184-
align-items: center;
185-
line-height: 1.7;
186-
}
187-
188-
.bio img {
189-
float: left;
190-
margin-right: 20px;
191-
}
192-
193-
.courses {
194-
min-width: 300px;
195-
}
196-
197-
.courses li {
198-
padding: 10px 0;
199-
display: block;
200-
border-bottom: 1px solid rgba(0,0,0,0.2);
201-
}
202-
203-
.dropdown a {
204-
text-decoration: none;
205-
color: #ffc600;
206-
}
207-
208-
a.button {
209-
background: black;
210-
display: block;
211-
padding: 10px;
212-
color: white;
213-
margin-bottom: 10px;
214-
}
215-
216-
/* Matches Twitter, TWITTER, twitter, tWitter, TWiTTeR... */
217-
.button[href*=twitter] { background: #019FE9; }
218-
.button[href*=facebook] { background: #3B5998; }
219-
.button[href*=courses] { background: #ffc600; }
220-
</style>
221-
222-
<script>
223-
</script>
80+
<style>
81+
html {
82+
box-sizing: border-box;
83+
font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
84+
}
85+
86+
*,
87+
*:before,
88+
*:after {
89+
box-sizing: inherit;
90+
}
91+
92+
body {
93+
margin: 0;
94+
min-height: 100vh;
95+
background:
96+
linear-gradient(45deg, hsla(340, 100%, 55%, 1) 0%, hsla(340, 100%, 55%, 0) 70%),
97+
linear-gradient(135deg, hsla(225, 95%, 50%, 1) 10%, hsla(225, 95%, 50%, 0) 80%),
98+
linear-gradient(225deg, hsla(140, 90%, 50%, 1) 10%, hsla(140, 90%, 50%, 0) 80%),
99+
linear-gradient(315deg, hsla(35, 95%, 55%, 1) 100%, hsla(35, 95%, 55%, 0) 70%);
100+
}
101+
102+
h2 {
103+
margin-top: 0;
104+
padding-top: .8em;
105+
}
106+
107+
nav {
108+
position: relative;
109+
perspective: 600px;
110+
}
111+
112+
.cool>li>a {
113+
color: yellow;
114+
text-decoration: none;
115+
font-size: 20px;
116+
background: rgba(0, 0, 0, 0.2);
117+
padding: 10px 20px;
118+
display: inline-block;
119+
margin: 20px;
120+
border-radius: 5px;
121+
}
122+
123+
nav ul {
124+
list-style: none;
125+
margin: 0;
126+
padding: 0;
127+
display: flex;
128+
justify-content: center;
129+
}
130+
131+
.cool>li {
132+
position: relative;
133+
display: flex;
134+
justify-content: center;
135+
}
136+
137+
.dropdown {
138+
opacity: 0;
139+
position: absolute;
140+
overflow: hidden;
141+
padding: 20px;
142+
top: -20px;
143+
border-radius: 2px;
144+
transition: all 0.5s;
145+
transform: translateY(100px);
146+
will-change: opacity;
147+
display: none;
148+
}
149+
150+
.trigger-enter .dropdown {
151+
display: block;
152+
}
153+
154+
.trigger-enter-active .dropdown {
155+
opacity: 1;
156+
}
157+
158+
.dropdownBackground {
159+
width: 100px;
160+
height: 100px;
161+
position: absolute;
162+
background: #fff;
163+
border-radius: 4px;
164+
box-shadow: 0 50px 100px rgba(50, 50, 93, .1), 0 15px 35px rgba(50, 50, 93, .15), 0 5px 15px rgba(0, 0, 0, .1);
165+
transition: all 0.3s, opacity 0.1s, transform 0.2s;
166+
transform-origin: 50% 0;
167+
display: flex;
168+
justify-content: center;
169+
opacity: 0;
170+
}
171+
172+
.dropdownBackground.open {
173+
opacity: 1;
174+
}
175+
176+
.arrow {
177+
position: absolute;
178+
width: 20px;
179+
height: 20px;
180+
display: block;
181+
background: white;
182+
transform: translateY(-50%) rotate(45deg);
183+
}
184+
185+
.bio {
186+
min-width: 500px;
187+
display: flex;
188+
justify-content: center;
189+
align-items: center;
190+
line-height: 1.7;
191+
}
192+
193+
.bio img {
194+
float: left;
195+
margin-right: 20px;
196+
}
197+
198+
.courses {
199+
min-width: 300px;
200+
}
201+
202+
.courses li {
203+
padding: 10px 0;
204+
display: block;
205+
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
206+
}
207+
208+
.dropdown a {
209+
text-decoration: none;
210+
color: #ffc600;
211+
}
212+
213+
a.button {
214+
background: black;
215+
display: block;
216+
padding: 10px;
217+
color: white;
218+
margin-bottom: 10px;
219+
}
220+
221+
/* Matches Twitter, TWITTER, twitter, tWitter, TWiTTeR... */
222+
.button[href*=twitter] {
223+
background: #019FE9;
224+
}
225+
226+
.button[href*=facebook] {
227+
background: #3B5998;
228+
}
229+
230+
.button[href*=courses] {
231+
background: #ffc600;
232+
}
233+
</style>
234+
235+
<script src="typescripts.js"></script>
224236

225237
</body>
226-
</html>
238+
239+
</html>

‎26 - Stripe Follow Along Nav/typescripts.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
var triggers = document.querySelectorAll('.cool > li');
2+
var background = document.querySelector('.dropdownBackground');
3+
var nav = document.querySelector('.top');
4+
function handleEnter() {
5+
var _this = this;
6+
this.classList.add('trigger-enter');
7+
setTimeout(function () {
8+
return _this.classList.contains('trigger-enter') && _this.classList.add('trigger-enter-active');
9+
}, 150);
10+
background.classList.add('open');
11+
var dropdown = this.querySelector('.dropdown');
12+
var dropdownCoords = dropdown.getBoundingClientRect();
13+
var navCoords = nav.getBoundingClientRect();
14+
var coords = {
15+
width: dropdownCoords.width,
16+
height: dropdownCoords.height,
17+
top: dropdownCoords.top - navCoords.top,
18+
left: dropdownCoords.left - navCoords.left,
19+
};
20+
background.style.setProperty('width', coords.width + "px");
21+
background.style.setProperty('height', coords.height + "px");
22+
background.style.setProperty('transform', "translate(" + coords.left + "px, " + coords.top + "px)");
23+
}
24+
function handleLeave() {
25+
this.classList.remove('trigger-enter', 'trigger-enter-active');
26+
background.classList.remove('open');
27+
}
28+
triggers.forEach(function (trigger) { return trigger.addEventListener('mouseenter', handleEnter); });
29+
triggers.forEach(function (trigger) { return trigger.addEventListener('mouseleave', handleLeave); });

0 commit comments

Comments
 (0)