Skip to content

Commit

Permalink
day26/30JS
Browse files Browse the repository at this point in the history
  • Loading branch information
@archeana
archeana committed Feb 2, 2024
1 parent 02b7ced commit df28f94
Show file tree
Hide file tree
Showing 3 changed files with 292 additions and 0 deletions.
66 changes: 66 additions & 0 deletions Day_26/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Follow Along Nav</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navigation">
<a class="card previous-card" href="https://archeana.github.io/JS30/Day_24/index.html"
onclick="goToPreviousProject()">
<span>Previous</span>
</a>
<a class="card home-card" href="https://archeana.github.io/JS30/" onclick="goToHomepage()">
<span>Home</span>
</a>
<a class="card next-card" href="#" onclick="goToNextProject()">
<span>Next</span>
</a>
</div>
<br>
<h2></h2>
<nav class="top">
<div class="dropdownBackground">
<span class="arrow"></span>
</div>

<ul class="cool">
<li>
<a href="#">About Me</a>
<div class="dropdown dropdown1">
<div class="bio">
<img src="https://anajesus.netlify.app/ana_foto.png" width="50%">
<p>Hello👋, I'm Ana Jesus! I like to code, read and cook delicious vegan food!</p>
</div>
</div>
</li>
<li>
<a href="#">Projects</a>
<ul class="dropdown courses">
<li>
<span class="code">Challenge</span>
<a href="https://archeana.github.io/JS30/">30 days of JS</a>
</li>
<li>
<span class="code">Group project</span>
<a href="https://archeana.github.io/group-6-health/fitness-tracker/index.html">Fitness App</a>
</li>
</ul>
</li>
<li>
<a href="#">Other Links</a>
<ul class="dropdown dropdown3">
<li><a class="button" href="https://www.linkedin.com/in/ana-jesus-1644374a/">LinkedIn</a></li>
<li><a class="button" href="https://github.com/archeana">GitHub</a></li>
</ul>
</li>
</ul>
</nav>



<script src="script.js"></script>

</body>
</html>
37 changes: 37 additions & 0 deletions Day_26/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
const triggers = document.querySelectorAll('.cool >li');
const background = document.querySelector('.dropdownBackground');
const nav = document.querySelector('.top');

function handleEnter() {
// console.log('Enter');
this.classList.add('trigger-enter');
setTimeout(() => this.classList.contains('trigger-enter') && this.classList.add('trigger-enter-active'), 150);
background.classList.add('open');
// box for teh background
const dropdown = this.querySelector('.dropdown');
// console.log(dropdown);
// Here with dropdowncoords in the console there will be a part with the courdinates that we can use
const dropdownCoords = dropdown.getBoundingClientRect();
// console.log(dropdownCoords);
const navCoords = nav.getBoundingClientRect();

const coords = {
height: dropdownCoords.height,
width: dropdownCoords.width,
top: dropdownCoords.top - navCoords.top,
left: dropdownCoords.left - navCoords.left
};

background.style.setProperty('width', `${coords.width}px`);
background.style.setProperty('height', `${coords.height}px`);
background.style.setProperty('transform', `translate(${coords.left}px, ${coords.top}px)`);
}

function handleLeave() {
console.log('Leave');
this.classList.remove('trigger-enter', 'trigger-enter-active');
background.classList.remove('open');
}

triggers.forEach(trigger => trigger.addEventListener('mouseenter', handleEnter));
triggers.forEach(trigger => trigger.addEventListener('mouseleave', handleLeave));
189 changes: 189 additions & 0 deletions Day_26/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,189 @@
html {
box-sizing: border-box;
font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
}

*,
*:before,
*:after {
box-sizing: inherit;
}

body {
margin: 0;
min-height: 100vh;
background:#193549;

}

h2 {
margin-top: 0;
padding-top: .8em;
}

nav {
position: relative;
perspective: 600px;
}
.navigation {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}

.card-back {
left: auto;
}

.card {
width: 100px;
height: 50px;
margin: 5px;
font-size: 20px;
background-color: #A2748B;
color: #ffffff;
border: none;
border-radius: 5px;
cursor: pointer;
overflow: hidden;
transition: 1s ease;
text-align: center;
align-items: center;
justify-content: space-between;
line-height: 16px;
display: flex;
justify-content: center;
position: relative;
}

.cool>li>a {
color: rgb(251, 251, 251);
text-decoration: none;
font-size: 20px;
background: rgba(2, 109, 155, 0.2);
padding: 10px 20px;
display: inline-block;
margin: 20px;
border-radius: 5px;
}

nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}

.cool>li {
position: relative;
display: flex;
justify-content: center;
}

.dropdown {
opacity: 0;
position: absolute;
overflow: hidden;
padding: 20px;
top: -20px;
border-radius: 2px;
transition: all 0.5s;
transform: translateY(100px);
will-change: opacity;
display: none;
}

.trigger-enter .dropdown,
.trigger-enter-active .dropdown {
display: block;
opacity: 1;
}


.trigger-enter .dropdown {
display: block;
}

.trigger-enter-active .dropdown {
opacity: 1;
}

.dropdownBackground {
width: 100px;
height: 100px;
position: absolute;
background: #fff;
border-radius: 4px;
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);
transition: all 0.5s, opacity 0.1s, transform 0.2s;
transform-origin: 50% 0;
display: flex;
justify-content: center;
opacity: 0;
}

.dropdownBackground.open {
opacity: 1;
}

.arrow {
position: absolute;
width: 20px;
height: 20px;
display: block;
background: white;
transform: translateY(-50%) rotate(45deg);
}

.bio {
min-width: 500px;
display: flex;
justify-content: center;
align-items: center;
line-height: 1.7;
}

.bio img {
float: left;
margin-right: 20px;
}

.courses {
min-width: 300px;
}

.courses li {
padding: 10px 0;
display: block;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.dropdown a {
text-decoration: none;
color: #65067a;
font-weight: bolder;
}

a.button {
background: black;
display: block;
padding: 10px;
color: white;
margin-bottom: 10px;
}

/* Matches Twitter, TWITTER, twitter, tWitter, TWiTTeR... */
.button[href*=twitter] {
background: #019FE9;
}

.button[href*=facebook] {
background: #3B5998;
}

0 comments on commit df28f94

Please sign in to comment.