Skip to content

Commit 4d5125d

Browse files
Made0fB1nariesMade0fB1naries
committed
Revision 2
1 parent 19fb2ef commit 4d5125d

File tree

4 files changed

+218
-192
lines changed

4 files changed

+218
-192
lines changed

‎assets/close-button.png‎

291 Bytes
Loading

‎index.html‎

Lines changed: 45 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,49 @@
11
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Pathfinder LLC</title>
2+
<html>
3+
<head>
4+
<title>Pathfinder</title>
85
<link rel="stylesheet" href="style.css">
9-
</head>
10-
<body>
11-
<header class="header">
12-
<h1 class="logo">Pathfinder</h1>
13-
<nav class="navigation">
14-
<ul>
15-
<li><a href="#">Home</a></li>
16-
<li><a href="#">About</a></li>
17-
<li><a href="#">Services</a></li>
18-
<li><a href="#">Contact (not yet)</a></li>
19-
</ul>
20-
</nav>
21-
</header>
22-
23-
<main class="main">
24-
<section class="hero">
25-
<h2>Welcome to our Website</h2>
26-
<p>At Pathfinder, we're a seasoned trio of web development freelancers dedicated to bringing your online vision to life. With a combined expertise in various aspects of web development, we offer a comprehensive service that encompasses design, functionality, and user experience. Whether you require a sleek website, a user-friendly e-commerce platform, or anything in between, we leverage our individual strengths and collaborative spirit to deliver exceptional results tailored to your specific needs.</p>
27-
<button>Learn More</button>
28-
</section>
29-
30-
<section class="cards">
31-
<div class="card">
32-
<h3>3 team proccess</h3>
33-
<p>Team A designs the product, Team B builds the product, and Team C tests the product..</p>
34-
</div>
35-
36-
<div class="card">
37-
<h3>Low Commission Pay</h3>
38-
<p>we only need low commissions rather than those who want higher pay.</p>
39-
</div>
40-
41-
<div class="card">
42-
<h3>still working</h3>
43-
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
44-
</div>
45-
</section>
46-
<fieldset>
47-
<legend class="legend"></legend>
48-
<!-- index.html -->
49-
50-
<section class="contact">
51-
52-
<h2>Contact Us</h2>
53-
54-
<form action="" method="post">
55-
<input type="text" placeholder="Name">
56-
<input type="email" placeholder="Email">
57-
<textarea placeholder="Message"></textarea>
58-
<button type="submit">Send Message</button>
59-
</form>
60-
61-
</section>
62-
63-
</main>
64-
65-
<footer class="footer">
66-
<p>&copy; 2024 Pathfinder LLC</p>
6+
</head>
7+
<body>
8+
<div class="container">
9+
<div class="top-right-button">
10+
<button id="aboutBtn">About Us</button>
11+
</div>
12+
<h1>Pathfinder</h1>
13+
<button class="contact-button" id="contactBtn">Contact Us</button>
14+
</div>
15+
<div class="about-page" id="aboutPage">
16+
<div class="about-content">
17+
<button class="close-btn" id="closeAboutBtn"><img src="assets/close-button.png" alt="Close"></button>
18+
<h2>About Us</h2>
19+
<p contenteditable="true">At Pathfinder, we're a seasoned trio of web development freelancers dedicated to bringing your online vision to life. With a combined expertise in various aspects of web development, we offer a comprehensive service that encompasses design, functionality, and user experience. Whether you require a sleek website, a user-friendly e-commerce platform, or anything in between, we leverage our individual strengths and collaborative spirit to deliver exceptional results tailored to your specific needs.</p>
20+
</div>
21+
</div>
22+
<section class="cards">
23+
<div class="card">
24+
<h3>3 team proccess</h3>
25+
<p>Team A designs the product, Team B builds the product, and Team C tests the product.</p>
26+
</div>
27+
<div class="card">
28+
<h3>Low Commission Pay</h3>
29+
<p>We only need low commissions rather than those who want higher pay.</p>
30+
</div>
31+
<div class="card">
32+
<h3>Still working</h3>
33+
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
34+
</div>
35+
</section>
36+
<div class="contact-page" id="contactPage">
37+
<div class="contact-content">
38+
<button class="close-btn" id="closeContactBtn"><img src="assets/close-button.png" alt="Close"></button>
39+
<h2>Contact Us</h2>
40+
<p>Email: info@pathfinder.com</p>
41+
<p>Phone: placeholder</p>
42+
</div>
43+
</div>
44+
<footer>
45+
<p>Copyright 2024 Pathfinder LLC.</p>
6746
</footer>
68-
</body>
47+
<script src="script.js"></script>
48+
</body>
6949
</html>

‎script.js‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
const aboutBtn = document.getElementById('aboutBtn');
2+
const aboutPage = document.getElementById('aboutPage');
3+
const closeAboutBtn = document.getElementById('closeAboutBtn');
4+
const contactBtn = document.getElementById('contactBtn');
5+
const contactPage = document.getElementById('contactPage');
6+
const closeContactBtn = document.getElementById('closeContactBtn');
7+
const cards = document.querySelector('.cards');
8+
const footer = document.querySelector('.footer');
9+
10+
function showPage(page) {
11+
page.style.display = 'flex';
12+
page.style.animation = 'fadeIn 0.5s ease-in-out';
13+
}
14+
15+
function hidePage(page) {
16+
page.style.animation = 'fadeOut 0.5s ease-in-out';
17+
setTimeout(() => {
18+
page.style.display = 'none';
19+
}, 500);
20+
}
21+
22+
aboutBtn.addEventListener('click', () => {
23+
showPage(aboutPage);
24+
hidePage(contactPage);
25+
});
26+
27+
contactBtn.addEventListener('click', () => {
28+
showPage(contactPage);
29+
hidePage(aboutPage);
30+
});
31+
32+
closeAboutBtn.addEventListener('click', () => {
33+
hidePage(aboutPage);
34+
});
35+
36+
closeContactBtn.addEventListener('click', () => {
37+
hidePage(contactPage);
38+
});
39+
40+
window.addEventListener('click', (event) => {
41+
if (event.target === aboutPage || event.target === aboutBtn) {
42+
return;
43+
}
44+
45+
if (event.target === contactPage || event.target === contactBtn) {
46+
return;
47+
}
48+
49+
if (aboutPage.style.display === 'flex') {
50+
hidePage(aboutPage);
51+
}
52+
53+
if (contactPage.style.display === 'flex') {
54+
hidePage(contactPage);
55+
}
56+
});
57+
58+
window.addEventListener('scroll', () => {
59+
const scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
60+
const windowHeight = window.innerHeight;
61+
62+
if (scrollPosition > windowHeight) {
63+
cards.style.display = 'grid';
64+
footer.style.display = 'block';
65+
document.body.style.overflow = 'hidden';
66+
} else {
67+
cards.style.display = 'none';
68+
footer.style.display = 'none';
69+
document.body.style.overflow = 'auto';
70+
}
71+
});

0 commit comments

Comments
 (0)