Skip to content

Commit

Permalink
Merge pull request #2 from nexoscreator/day-003
Browse files Browse the repository at this point in the history 
update
  • Loading branch information
@nexoscreator
nexoscreator authored Oct 17, 2024
2 parents ee98fe1 + fa4207d commit e0d2b1b
Show file tree
Hide file tree
Showing 3 changed files with 71 additions and 65 deletions.
53 changes: 28 additions & 25 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,46 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>365 Days of Web Development</title>
<link rel="stylesheet" href="./style.css">
</head>

<body>
<header>
<nav>
<div class="logo">365 Days of Web Dev</div>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/resources">Resources</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#">Home</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#resources">Resources</a></li>
<li><a href="#extra">More</a></li>
</ul>
</nav>
</header>

<main>
<section id="home">
<h1>Welcome to My 365 Days of Web Development Journey</h1>
<h1>Welcome to the 365 Days of Web Development Journey</h1>
<p>Join me as I create a new web project every day for a year!</p>
</section>

<section id="about">
<h2>About This Challenge</h2>
<p>I've committed to building a new web development project every day for 365 days. This challenge is designed to improve my skills, explore new technologies, and create a diverse portfolio of web applications.</p>
</section>

<section id="projects">
<h2>My Projects</h2>
<h2>Our Projects</h2>
<div id="project-grid">
<!-- Project cards will be dynamically inserted here by JavaScript -->
</div>
</section>

<section id="contact">
<h2>Get in Touch</h2>
<form id="contact-form">
<input type="text" id="name" name="name" placeholder="Your Name" required>
<input type="email" id="email" name="email" placeholder="Your Email" required>
<textarea id="message" name="message" placeholder="Your Message" required></textarea>
<button type="submit">Send Message</button>
</form>
<section id="Resources">
<h2>About This Challenge</h2>
<p>I've committed to building a new web development project every day for 365 days. This challenge is designed to improve my skills, explore new technologies, and create a diverse portfolio of web applications.</p>
</section>

<section id="extra">
<h2>More Coming Soon! </h2>
</section>
</main>

Expand All @@ -53,14 +49,21 @@ <h2>Get in Touch</h2>
</footer>

<!-- Popup container -->
<div id="popup-container" class="popup-container">
<div class="popup-content">
<span class="close-popup">&times;</span>
<h2 id="popup-title"></h2>
<iframe id="project-iframe" src="" frameborder="0"></iframe>
<aside id="popup-container" class="popup-container">
<div class="popup-fix">
<div class="popup-header">
<span class="close-popup">&times;</span>
<h2 id="popup-title"></h2>
</div>
<div class="popup-content">
<iframe id="project-iframe" src="" frameborder="0"></iframe>
</div>
<div class="popup-footer"></div>

</div>
</div>
</aside>

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

</html>
22 changes: 2 additions & 20 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
document.addEventListener('DOMContentLoaded', function() {
// Sample project data (you'll need to update this as you complete projects)
const projects = [
{ id: 1, title: "Responsive Navbar", description: "A mobile-friendly navigation bar", link: "./projects/day-001-syntax-code-box/index.html" },
{ id: 2, title: "To-Do List App", description: "A simple to-do list application", link: "./projects/day-002-toast-notification/index.html" },
{ id: 1, title: "Syntax Code Box", description: "A mobile-friendly navigation bar", link: "./projects/day-001-syntax-code-box/index.html" },
{ id: 2, title: "Toast Notification", description: "A simple to-do list application", link: "./projects/day-002-toast-notification/index.html" },
// Add more projects here as you complete them
];

Expand All @@ -24,24 +24,6 @@ document.addEventListener('DOMContentLoaded', function() {
projectGrid.appendChild(createProjectCard(project));
});

// Handle form submission
const contactForm = document.getElementById('contact-form');
contactForm.addEventListener('submit', function(e) {
e.preventDefault();
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const message = document.getElementById('message').value;

// Here you would typically send this data to a server
console.log('Form submitted:', { name, email, message });

// Clear the form
contactForm.reset();

// Show a success message (you might want to improve this)
alert('Thank you for your message! We\'ll get back to you soon.');
});

// Smooth scrolling for navigation
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
Expand Down
61 changes: 41 additions & 20 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,10 +56,12 @@ main {
}

section {
margin-bottom: 40px;
margin-top: 20px;
margin-bottom: 20px;
}

h1, h2 {
h1,
h2 {
margin-bottom: 20px;
}

Expand All @@ -72,7 +74,7 @@ h1, h2 {
.project-card {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
padding: 20px;
transition: transform 0.3s ease;
cursor: pointer;
Expand All @@ -99,7 +101,8 @@ form {
flex-direction: column;
}

input, textarea {
input,
textarea {
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ddd;
Expand Down Expand Up @@ -131,41 +134,59 @@ footer {
.popup-container {
display: none;
position: fixed;
top: 0;
left: 0;
inset: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 2000;
}

.popup-content {
.popup-fix {
display: flex;
flex-direction: column;
position: relative;
background-color: #fff;
margin: 5% auto;
padding: 20px;
width: 90%;
margin: 0px;
padding: 10px 20px;
overflow: hidden;
max-width: 1000px;
height: 80%;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
width: 100vw;
height: 100vh;
box-shadow: 0 -4px -8px rgba(0, 0, 0, 0.2);
}

.popup-header, {
display: flex;
position: relative;
border-bottom: 0.1rem solid #DCDFF1;
}

.popup-header .popup-title {
font-size: 16px;
font-weight: bold;
color: #333;
}

.close-popup {
.popup-header .close-popup {
position: absolute;
top: 10px;
top: 0px;
right: 20px;
font-size: 28px;
font-weight: bold;
color: #333;
cursor: pointer;
}

.popup-content {
display: block;
height: 100%;
}

#project-iframe {
width: 100%;
height: calc(100% - 40px);
border: none;
margin-top: 20px;
margin-bottom: 20px;
}

@media (max-width: 768px) {
Expand All @@ -182,9 +203,9 @@ footer {
margin-right: 20px;
}

.popup-content {
width: 95%;
height: 90%;
margin: 5% auto;
.popup-fix {
width: 100vw;
height: 100vh;
margin: 0px;
}
}

0 comments on commit e0d2b1b

Please sign in to comment.