Skip to content

Commit 865ee1a

Browse files
reymon359reymon359
committed
26 finished
1 parent c4ab0c5 commit 865ee1a

File tree

1 file changed

+55
-39
lines changed

1 file changed

+55
-39
lines changed

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

Lines changed: 55 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<title>Follow Along Nav</title>
66
</head>
77
<body>
8-
<h2>Cool</h2>
8+
<h2>Follow Along Nav</h2>
99
<nav class="top">
1010
<div class="dropdownBackground">
1111
<span class="arrow"></span>
@@ -16,49 +16,37 @@ <h2>Cool</h2>
1616
<a href="#">About Me</a>
1717
<div class="dropdown dropdown1">
1818
<div class="bio">
19-
<img src="https://logo.clearbit.com/wesbos.com">
20-
<p>Ramon Morcillo 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>
19+
<img width="150" height="150" src="https://www.ramonmorcillo.com/images/me.png">
20+
<p>Full Stack Engineer by the University of Alicante. Right now studying a Master on Software and Web engineering. I consider myself a technology enthusiast, very active and willing to learn and work on new things. I am always open to new challenges and opportunities so do not hesitate on contacting me</p>
2121
</div>
2222
</div>
2323
</li>
2424
<li>
25-
<a href="#">Courses</a>
25+
<a href="#">Projects</a>
2626
<ul class="dropdown courses">
2727
<li>
28-
<span class="code">RFB</span>
29-
<a href="https://ReactForBeginners.com">React For Beginners</a>
28+
<span class="code">Fitbot</span>
29+
<a href="https://www.youtube.com/watch?v=3aYygh8xItA">App demo video</a>
3030
</li>
3131
<li>
32-
<span class="code">ES6</span>
33-
<a href="https://ES6.io">ES6 For Everyone</a>
32+
<span class="code">More</span>
33+
<a href="https://www.ramonmorcillo.com/#portfolio">more projects</a>
3434
</li>
3535
<li>
36-
<span class="code">NODE</span>
37-
<a href="https://LearnNode.com">Learn Node</a>
36+
<span class="code">More</span>
37+
<a href="https://www.ramonmorcillo.com/#portfolio">more projects</a>
3838
</li>
3939
<li>
40-
<span class="code">STPU</span>
41-
<a href="https://SublimeTextBook.com">Sublime Text Power User</a>
40+
<span class="code">More</span>
41+
<a href="https://www.ramonmorcillo.com/#portfolio">more projects</a>
4242
</li>
4343
<li>
44-
<span class="code">WTF</span>
45-
<a href="http://Flexbox.io">What The Flexbox?!</a>
44+
<span class="code">More</span>
45+
<a href="https://www.ramonmorcillo.com/#portfolio">more projects</a>
4646
</li>
4747
<li>
48-
<span class="code">GRID</span>
49-
<a href="https://CSSGrid.io">CSS Grid</a>
50-
</li>
51-
<li>
52-
<span class="code">LRX</span>
53-
<a href="http://LearnRedux.com">Learn Redux</a>
54-
</li>
55-
<li>
56-
<span class="code">CLPU</span>
57-
<a href="http://CommandLinePowerUser.com">Command Line Power User</a>
58-
</li>
59-
<li>
60-
<span class="code">MMD</span>
61-
<a href="http://MasteringMarkdown.com">Mastering Markdown</a>
48+
<span class="code">More</span>
49+
<a href="https://www.ramonmorcillo.com/#portfolio">more projects</a>
6250
</li>
6351
</ul>
6452
</li>
@@ -87,16 +75,13 @@ <h2>Cool</h2>
8775
body {
8876
margin: 0;
8977
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-
}
78+
background:linear-gradient(45deg, rgba(13, 0, 61,0.2) 0%, rgba(13, 0, 61,0.2) 16.667%,rgba(14, 79, 102,0.2) 16.667%, rgba(14, 79, 102,0.2) 33.334%,rgba(15, 158, 143,0.2) 33.334%, rgba(15, 158, 143,0.2) 50.001%,rgba(16, 198, 163,0.2) 50.001%, rgba(16, 198, 163,0.2) 66.668%,rgba(15, 119, 122,0.2) 66.668%, rgba(15, 119, 122,0.2) 83.335%,rgba(14, 40, 81,0.2) 83.335%, rgba(14, 40, 81,0.2) 100.002%),linear-gradient(22.5deg, rgba(13, 0, 61,0.2) 0%, rgba(13, 0, 61,0.2) 16.667%,rgba(14, 79, 102,0.2) 16.667%, rgba(14, 79, 102,0.2) 33.334%,rgba(15, 158, 143,0.2) 33.334%, rgba(15, 158, 143,0.2) 50.001%,rgba(16, 198, 163,0.2) 50.001%, rgba(16, 198, 163,0.2) 66.668%,rgba(15, 119, 122,0.2) 66.668%, rgba(15, 119, 122,0.2) 83.335%,rgba(14, 40, 81,0.2) 83.335%, rgba(14, 40, 81,0.2) 100.002%),linear-gradient(0deg, rgba(13, 0, 61,0.2) 0%, rgba(13, 0, 61,0.2) 16.667%,rgba(14, 79, 102,0.2) 16.667%, rgba(14, 79, 102,0.2) 33.334%,rgba(15, 158, 143,0.2) 33.334%, rgba(15, 158, 143,0.2) 50.001%,rgba(16, 198, 163,0.2) 50.001%, rgba(16, 198, 163,0.2) 66.668%,rgba(15, 119, 122,0.2) 66.668%, rgba(15, 119, 122,0.2) 83.335%,rgba(14, 40, 81,0.2) 83.335%, rgba(14, 40, 81,0.2) 100.002%),linear-gradient(90deg, rgb(73, 73, 73),rgb(94, 94, 94));}
9679

9780
h2 {
9881
margin-top: 0;
9982
padding-top: .8em;
83+
text-align: center;
84+
color: white;
10085
}
10186

10287
nav {
@@ -105,7 +90,7 @@ <h2>Cool</h2>
10590
}
10691

10792
.cool > li > a {
108-
color: yellow;
93+
color: white;
10994
text-decoration: none;
11095
font-size: 20px;
11196
background: rgba(0,0,0,0.2);
@@ -161,7 +146,7 @@ <h2>Cool</h2>
161146
transform-origin: 50% 0;
162147
display: flex;
163148
justify-content: center;
164-
opacity:0;
149+
opacity: 0;
165150
}
166151

167152
.dropdownBackground.open {
@@ -202,7 +187,7 @@ <h2>Cool</h2>
202187

203188
.dropdown a {
204189
text-decoration: none;
205-
color: #ffc600;
190+
color: #348d7c;
206191
}
207192

208193
a.button {
@@ -215,11 +200,42 @@ <h2>Cool</h2>
215200

216201
/* Matches Twitter, TWITTER, twitter, tWitter, TWiTTeR... */
217202
.button[href*=twitter] { background: #019FE9; }
218-
.button[href*=facebook] { background: #3B5998; }
219-
.button[href*=courses] { background: #ffc600; }
203+
.button[href*=ramonmorcillo] { background: #019FE9; }
220204
</style>
221205

222206
<script>
207+
const triggers = document.querySelectorAll('.cool > li');
208+
const background = document.querySelector('.dropdownBackground');
209+
const nav = document.querySelector('.top');
210+
211+
function handleEnter() {
212+
this.classList.add('trigger-enter');
213+
setTimeout(() => this.classList.contains('trigger-enter') && this.classList.add('trigger-enter-active'), 150);
214+
background.classList.add('open');
215+
216+
const dropdown = this.querySelector('.dropdown');
217+
const dropdownCoords = dropdown.getBoundingClientRect();
218+
const navCoords = nav.getBoundingClientRect();
219+
220+
const coords = {
221+
height: dropdownCoords.height,
222+
width: dropdownCoords.width,
223+
top: dropdownCoords.top - navCoords.top,
224+
left: dropdownCoords.left - navCoords.left
225+
};
226+
227+
background.style.setProperty('width', `${coords.width}px`);
228+
background.style.setProperty('height', `${coords.height}px`);
229+
background.style.setProperty('transform', `translate(${coords.left}px, ${coords.top}px)`);
230+
}
231+
232+
function handleLeave() {
233+
this.classList.remove('trigger-enter', 'trigger-enter-active');
234+
background.classList.remove('open');
235+
}
236+
237+
triggers.forEach(trigger => trigger.addEventListener('mouseenter', handleEnter));
238+
triggers.forEach(trigger => trigger.addEventListener('mouseleave', handleLeave));
223239
</script>
224240

225241
</body>

0 commit comments

Comments
 (0)