From bd5e7ab516a145fe1e5fee5ef586e9823d9e4d04 Mon Sep 17 00:00:00 2001 From: ChikenduHillary Date: Sun, 2 Jun 2024 05:48:40 +0100 Subject: [PATCH 1/4] added the api route --- Blog Page/blog.html | 2 +- Blog Page/script.js | 91 ++++++++++++++++++++++++++++++++++++++------- 2 files changed, 78 insertions(+), 15 deletions(-) diff --git a/Blog Page/blog.html b/Blog Page/blog.html index a12c452..d192730 100644 --- a/Blog Page/blog.html +++ b/Blog Page/blog.html @@ -153,7 +153,7 @@

Written By: John Doe

-
+

Blog Posts

Gratitude For Diversity

diff --git a/Blog Page/script.js b/Blog Page/script.js index 6c57039..c52f46b 100644 --- a/Blog Page/script.js +++ b/Blog Page/script.js @@ -1,20 +1,83 @@ -const hambugerMenu = document.querySelector(".hambuger-menu") -const navMenu = document.querySelector(".nav-menu") -const closeBtn = document.querySelector(".close-button") +const hambugerMenu = document.querySelector(".hambuger-menu"); +const navMenu = document.querySelector(".nav-menu"); +const closeBtn = document.querySelector(".close-button"); -hambugerMenu.addEventListener("click", () =>{ - navMenu.classList.toggle("active") -}) +hambugerMenu.addEventListener("click", () => { + navMenu.classList.toggle("active"); +}); closeBtn.addEventListener("click", () => { - navMenu.classList.toggle("active") -}) + navMenu.classList.toggle("active"); +}); +const questions = document.querySelectorAll(".the-questions"); -const questions = document.querySelectorAll(".the-questions") +questions.forEach((questions) => { + questions.addEventListener("click", () => { + questions.classList.toggle("active"); + }); +}); - questions.forEach(questions => { - questions.addEventListener("click", () => { - questions.classList.toggle("active"); - }) -}) \ No newline at end of file +// Fetching of blog post +document.addEventListener("DOMContentLoaded", () => { + // Function to fetch posts from the API + async function fetchPosts() { + try { + // Send a GET request to the API endpoint + const response = await fetch( + "https://inclusive-talks.vercel.app/api/trpc/getAllPost" + ); + console.log(response); + + // Check if the request was successful + if (!response.ok) { + throw new Error(`HTTP error! Status: ${response.status}`); + } + + // Parse the JSON response + const res = await response.json(); + console.log({ res }); + const { data } = res.result; + console.log(data); + + const postsContainer = document.getElementById("posts-container"); + + // Clear the container + postsContainer.innerHTML = ""; + + // Iterate over the posts and create HTML for each post + data.forEach((post) => { + const postElement = document.createElement("div"); + postElement.className = "blog-post"; + postElement.innerHTML = ` +
+

Blog Posts

+

${post.title}

+ +
+
+

Written By: ${post.writtenBy}

+

+ ${post.text} + CONTINUE READING.... +

+
+ +
+ +
+
+
+ `; + postsContainer.appendChild(postElement); + }); + } catch (error) { + console.error("Error fetching posts:", error); + } + } + + // Call the fetchPosts function to load the posts when the page loads + fetchPosts(); +}); From 6f5f0ed915ad1734c728c96c843b0cc41c15f1fb Mon Sep 17 00:00:00 2001 From: ChikenduHillary Date: Sun, 2 Jun 2024 06:02:18 +0100 Subject: [PATCH 2/4] deployed to vercel --- About Page/about.html | 2 +- Blog Page/blog.html | 2 +- Contact Page/contact.html | 2 +- Program Page/Programs_Main Page/index.html | 2 +- index.html | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/About Page/about.html b/About Page/about.html index 0549060..0e325e7 100644 --- a/About Page/about.html +++ b/About Page/about.html @@ -56,7 +56,7 @@
-
  • Home
    •
  • Blog
    •  diff --git a/Blog Page/blog.html b/Blog Page/blog.html index d192730..ee23329 100644 --- a/Blog Page/blog.html +++ b/Blog Page/blog.html @@ -55,7 +55,7 @@
    -
  • Home
    •
  • Blog
    •  diff --git a/Contact Page/contact.html b/Contact Page/contact.html index abbb218..a5590d2 100644 --- a/Contact Page/contact.html +++ b/Contact Page/contact.html @@ -50,7 +50,7 @@
    -
  • Home
    •
  • Blog
    •  diff --git a/Program Page/Programs_Main Page/index.html b/Program Page/Programs_Main Page/index.html index 7ab2930..650c67c 100644 --- a/Program Page/Programs_Main Page/index.html +++ b/Program Page/Programs_Main Page/index.html @@ -50,7 +50,7 @@
    -
  • Home
    •
  • Blog
    •  diff --git a/index.html b/index.html index 00b2291..3086e47 100644 --- a/index.html +++ b/index.html @@ -55,7 +55,7 @@
    -
  • Home
    •
  • Blog
    •  From 79aa2afa6a2299fa58173448f38ef50ae782f54d Mon Sep 17 00:00:00 2001 From: ChikenduHillary Date: Mon, 3 Jun 2024 12:06:33 +0100 Subject: [PATCH 3/4] implimented slide --- index.html | 46 +- script.js | 59 ++- style.css | 1199 +++++++++++++++++++++++++++------------------------- 3 files changed, 695 insertions(+), 609 deletions(-) diff --git a/index.html b/index.html index 3086e47..54fa409 100644 --- a/index.html +++ b/index.html @@ -147,13 +147,6 @@

    About Us

    - -
    - - - -
    -
    @@ -164,26 +157,29 @@

    -
    -
    -

    2000+

    -

    reach across all platforms

    -
    +
    +
    +
    +

    2000+

    +

    reach across all platforms

    +
    - +
    +

    2500+

    +

    impact across the globe

    +
    +
    + +
    +
    +
    +
    +
    diff --git a/script.js b/script.js index 6c57039..42c0436 100644 --- a/script.js +++ b/script.js @@ -1,20 +1,51 @@ -const hambugerMenu = document.querySelector(".hambuger-menu") -const navMenu = document.querySelector(".nav-menu") -const closeBtn = document.querySelector(".close-button") +const hambugerMenu = document.querySelector(".hambuger-menu"); +const navMenu = document.querySelector(".nav-menu"); +const closeBtn = document.querySelector(".close-button"); -hambugerMenu.addEventListener("click", () =>{ - navMenu.classList.toggle("active") -}) +hambugerMenu.addEventListener("click", () => { + navMenu.classList.toggle("active"); +}); closeBtn.addEventListener("click", () => { - navMenu.classList.toggle("active") -}) + navMenu.classList.toggle("active"); +}); +const questions = document.querySelectorAll(".the-questions"); -const questions = document.querySelectorAll(".the-questions") +questions.forEach((questions) => { + questions.addEventListener("click", () => { + questions.classList.toggle("active"); + }); +}); - questions.forEach(questions => { - questions.addEventListener("click", () => { - questions.classList.toggle("active"); - }) -}) \ No newline at end of file +// slide show +const slides = document.querySelectorAll(".slides"); +const radioButtons = document.querySelectorAll(".radio-btn"); +let currentSlide = 2; + +function showSlide(index) { + slides.forEach((slide, i) => { + slide.classList.remove("active", "inactive"); + radioButtons[i].classList.remove("active"); + if (i === index) { + slide.classList.add("active"); + radioButtons[i].classList.add("active"); + } else if (i === (index + slides.length - 1) % slides.length) { + slide.classList.add("inactive"); + } + }); +} + +function nextSlide() { + currentSlide = (currentSlide + 1) % slides.length; + showSlide(currentSlide); +} + +setInterval(nextSlide, 5000); + +radioButtons.forEach((btn, i) => { + btn.addEventListener("click", () => { + currentSlide = i; + showSlide(currentSlide); + }); +}); diff --git a/style.css b/style.css index f60ceed..4dd57f4 100644 --- a/style.css +++ b/style.css @@ -1,300 +1,371 @@ * { -margin: 0; -padding: 0; -box-sizing: border-box; -font-family: 'Poppins', sans-serif; + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; } html { -scroll-behavior: smooth; + scroll-behavior: smooth; } body { -background-color: #FAE9DF; + background-color: #fae9df; } - nav { -display: flex; -justify-items: center; -align-items: center; -justify-content: space-between; -padding: 20px 40px; -border-bottom: 4px solid #FFF3EE; + display: flex; + justify-items: center; + align-items: center; + justify-content: space-between; + padding: 20px 40px; + border-bottom: 4px solid #fff3ee; } - .logo img { -width: 90%; -padding-left: 50px; + width: 90%; + padding-left: 50px; } .nav-menu { -display: flex; -justify-content: space-evenly; -justify-items: center; -list-style: none; -width: 600px; + display: flex; + justify-content: space-evenly; + justify-items: center; + list-style: none; + width: 600px; } - .hambuger-menu { -margin-top: -20px; -width: 35px; -height: 25px; -cursor: pointer; -display: none; + margin-top: -20px; + width: 35px; + height: 25px; + cursor: pointer; + display: none; } .hambuger-menu .bar { -width: 100%; -height: 4px; -margin: 5px auto; -background-color: #9E4021; -border-radius: 10px; + width: 100%; + height: 4px; + margin: 5px auto; + background-color: #9e4021; + border-radius: 10px; } .close-button { -display: none; -width: 45px; -height: 35px; -cursor: pointer; -margin-left: 80%; -margin-bottom: 30px; -margin-top: 20px; + display: none; + width: 45px; + height: 35px; + cursor: pointer; + margin-left: 80%; + margin-bottom: 30px; + margin-top: 20px; } .close-button .bar { -width: 100%; -height: 4px; -margin: 5px auto; -background-color: #9E4021; -border-radius: 10px; + width: 100%; + height: 4px; + margin: 5px auto; + background-color: #9e4021; + border-radius: 10px; } button:hover { -cursor: pointer; -box-shadow: 1px 2px 8px #b1693d; -transition: 1s; + cursor: pointer; + box-shadow: 1px 2px 8px #b1693d; + transition: 1s; } a { -text-decoration: none; + text-decoration: none; } li { -color: #9E4021; -font-size: 18px; -margin-top: 5px; -transition: 90ms; - + color: #9e4021; + font-size: 18px; + margin-top: 5px; + transition: 90ms; } -.navlink:hover, .active { -cursor: pointer; -padding-bottom: 1px; -border-bottom: 2px solid #9E4021; -text-decoration-color: #9E4021; +.navlink:hover, +.active { + cursor: pointer; + padding-bottom: 1px; + border-bottom: 2px solid #9e4021; + text-decoration-color: #9e4021; } li:hover { - cursor: pointer; - padding-bottom: 1px; - border-bottom: 2px solid #9E4021; - text-decoration-color: #9E4021; + cursor: pointer; + padding-bottom: 1px; + border-bottom: 2px solid #9e4021; + text-decoration-color: #9e4021; } .nav-menu { -border-bottom: none; + border-bottom: none; } .cta-btn { - padding: 7px; - font-size: 18px; - background-color: #9E4021; - border: none; - border-radius: 5px; - color: #FFF3EE; - letter-spacing: 1.5px; + padding: 7px; + font-size: 18px; + background-color: #9e4021; + border: none; + border-radius: 5px; + color: #fff3ee; + letter-spacing: 1.5px; } - .intro-heading { font-weight: 900; - color: #9E4021; + color: #9e4021; font-size: 50px; } .hero-text { - color: #9E4021; + color: #9e4021; font-size: 20px; } .hero { - display: flex; - justify-content: space-between; - align-items: center; - margin: 86px; - margin-top: 50px; + display: flex; + justify-content: space-between; + align-items: center; + margin: 86px; + margin-top: 50px; } .hero-intro { - width: 50%; + width: 50%; } .hero-intro h1 { - font-size: 70px; - font-weight: 800; - color: #833200; - width: 20%; + font-size: 70px; + font-weight: 800; + color: #833200; + width: 20%; } .hero-intro p { - color: #9E4021; - font-size: 20px; - font-weight: 400; - line-height: 40px; - letter-spacing: 0.2px; - width: 90%; - margin-bottom: 30px; + color: #9e4021; + font-size: 20px; + font-weight: 400; + line-height: 40px; + letter-spacing: 0.2px; + width: 90%; + margin-bottom: 30px; +} + +.header3 { + color: #9e4021; + padding: 1rem; + font-size: 1.6rem; + /* width: ; */ +} + +.slides-container { + display: flex; + flex-direction: column; + align-items: center; + position: relative; + width: 100%; + height: 200px; /* Adjust as needed */ + overflow: hidden; +} + +.slide { + display: flex; + align-items: start; + width: 100%; +} + +.our-reach { + color: white; + font-size: 3rem; +} + +.slide-text { + color: #9e4021; + font-size: 1rem; +} + +.slide-navigation-btn { + display: flex; + justify-content: center; + align-items: center; + height: 70px; + width: 100%; + gap: 0.5rem; + position: absolute; + bottom: 10px; +} + +.sliders { + position: relative; + width: 100%; + height: 100%; +} + +.slides { + position: absolute; + width: 100%; + height: 100%; + padding: 2rem; + top: 0; + left: 100%; /* Start slides off-screen */ + transition: all 1s ease-in-out; /* Animation */ + transform: scale(1); +} +.slides.active { + left: 0; /* Slide into view */ + transform: scale(1); +} +.slides.inactive { + left: -100%; /* Slide out of view */ + transform: scale(0.5); /* Zoom out */ +} + +.radio-btn { + width: 12px; + height: 12px; + border-radius: 50%; + background-color: #fff; + cursor: pointer; +} + +.radio-btn.active { + background-color: #833200; } .hero-image { - width: 100%; + width: 100%; } .about { - display: flex; - margin-left: 15%; - background: rgb(241, 207, 197); - padding: 50px; - gap: 20px; - padding-bottom: 80px; + display: flex; + margin-left: 15%; + background: rgb(241, 207, 197); + padding: 50px; + gap: 20px; + padding-bottom: 80px; } .about-col { - display: flex; - gap: 20px; + display: flex; + gap: 20px; } .about h1 { - font-size: 50px; - font-weight: 900; - color: #9E4021; - width: 100%; + font-size: 50px; + font-weight: 900; + color: #9e4021; + width: 100%; } .col { - width: 100%; - text-align: center; - margin-top: 50px; - + width: 100%; + text-align: center; + margin-top: 50px; } .col-image img { - width: 250px; - border-radius: 5px; + width: 250px; + border-radius: 5px; } .col p { - margin-top: 20px; - font-size: 20px; - color: #9E4021; - line-height: 30px; - padding: 5px; + margin-top: 20px; + font-size: 20px; + color: #9e4021; + line-height: 30px; + padding: 5px; } .slide-section { - margin: 70px 0; - background: rgb(241, 207, 197); + margin: 70px 0; + background: rgb(241, 207, 197); } .sce4 { - margin: 5px; + margin: 5px; } .sec4-intro-text { - width: 80%; - margin: 0 auto; - text-align: center; + width: 80%; + margin: 0 auto; + text-align: center; } .sce4-intro-header a { - color: #9E4021; - font-size: 30px; - font-weight: 900; + color: #9e4021; + font-size: 30px; + font-weight: 900; } .sec-4-text { - margin-top: 20px; - font-size: 20px; - color: #9E4021; - line-height: 30px; - padding: 5px; + margin-top: 20px; + font-size: 20px; + color: #9e4021; + line-height: 30px; + padding: 5px; } .our-mission { - display: flex; - justify-content: center; - align-items: center; - margin: 50px 120px; - gap: 50px; + display: flex; + justify-content: center; + align-items: center; + margin: 50px 120px; + gap: 50px; } .our-mission p { - color: #9E4021; - font-size: 20px; - line-height: 40px; - /* height: 500px; */ - width: 100%; - + color: #9e4021; + font-size: 20px; + line-height: 40px; + /* height: 500px; */ + width: 100%; } - .mission-img { - width: 90%; + width: 90%; } -.mission-img img { - width: 100%; - height: 600px; - +.mission-img img { + width: 100%; + height: 600px; } #sec-4-text { - width: 80%; - margin: 0 auto; - + width: 80%; + margin: 0 auto; } #cta-btn { - text-align: center; - margin: 30px 0; + text-align: center; + margin: 30px 0; } #subscribe-section { - width: 70%; - margin: 50px auto; - padding-top: 50px; - + width: 70%; + margin: 50px auto; + padding-top: 50px; } .subscribe-card { - background-color: #DA9; - color: #fff; - padding: 50px 30px; + background-color: #da9; + color: #fff; + padding: 50px 30px; } .subscribe h2 { - margin-bottom: 15px; - font-size: 25px; + margin-bottom: 15px; + font-size: 25px; } .subscribe p { - font-size: 20px; - margin-bottom: 15px; + font-size: 20px; + margin-bottom: 15px; } -input { +input { width: 60%; padding: 8px; font-size: 18px; @@ -305,466 +376,454 @@ input { } #sub-btn { - margin-top: 12px; - + margin-top: 12px; } footer { - background-color: #9E4021; + background-color: #9e4021; } .footer-links { - margin-top: 50px; - padding: 40px; - display: flex; - justify-content: space-between; - align-items: start; - color: #FFF3EE; + margin-top: 50px; + padding: 40px; + display: flex; + justify-content: space-between; + align-items: start; + color: #fff3ee; } .footer-col1 { - margin-left: 70px; + margin-left: 70px; } -.footer-logo img{ - width: 10%; - min-width: 200px; - margin-top: 20px; +.footer-logo img { + width: 10%; + min-width: 200px; + margin-top: 20px; } .about-links { - width: 35%; - /* min-width: 0px; */ - margin-top: 50px ; - line-height: 40px; + width: 35%; + /* min-width: 0px; */ + margin-top: 50px; + line-height: 40px; } - - .links { - display: flex; - justify-content: space-around; - width: 70%; - + display: flex; + justify-content: space-around; + width: 70%; } .about-links a { - color: #FFF3EE; + color: #fff3ee; } .mail-link { - margin-top: 20px; - font-size: 15px; + margin-top: 20px; + font-size: 15px; } .mail { - color: #FFF3EE; + color: #fff3ee; } #programs-links { - text-decoration: underline 0.1em rgba(14, 0, 0, 0); - transition: text-decoration-color 300ms; - + text-decoration: underline 0.1em rgba(14, 0, 0, 0); + transition: text-decoration-color 300ms; } #programs-links:hover { - text-decoration-color: #FFF3EE + text-decoration-color: #fff3ee; } .rounded-icons { - width: 30px; - height: 30px; - border: 1px solid #FFF3EE; - display: inline-flex; - color: #FFF3EE; - justify-content: center; - align-items: center; - border-radius: 50%; - text-decoration: none; - margin-right: 0.5rem; - margin-top: 15px; + width: 30px; + height: 30px; + border: 1px solid #fff3ee; + display: inline-flex; + color: #fff3ee; + justify-content: center; + align-items: center; + border-radius: 50%; + text-decoration: none; + margin-right: 0.5rem; + margin-top: 15px; } #twitter-icon:hover { - color: #1DA1F2; - background-color: #fff; - transition: 1s; - border-color: white; + color: #1da1f2; + background-color: #fff; + transition: 1s; + border-color: white; } #youtube-icon:hover { - color: #FF0000; - background-color: #fff; - transition: 1s; + color: #ff0000; + background-color: #fff; + transition: 1s; } #threads-icon:hover { - color: white; - background-color: black; - transition: 1s; - border-color: black; + color: white; + background-color: black; + transition: 1s; + border-color: black; } #instagram-icon:hover { - color: white; - background-image: linear-gradient(to right, #feda75, #ee2a7b, #6228d7); - transition: 1s; - border: none; + color: white; + background-image: linear-gradient(to right, #feda75, #ee2a7b, #6228d7); + transition: 1s; + border: none; } - .copyright { - border-top: 2px solid #FFF3EE; - margin-top: 20px; + border-top: 2px solid #fff3ee; + margin-top: 20px; } .copyright-text { - width: 260px; - margin-right: auto; - margin-left: auto; + width: 260px; + margin-right: auto; + margin-left: auto; + text-align: center; + color: #fff3ee; + margin-top: 10px; + padding-bottom: 10px; +} + +@media screen and (max-width: 767px) { + .logo img { + width: 70%; + padding-left: 10px; + } + + .hambuger-menu { + display: block; + } + + nav { + border-bottom: none; + padding-left: 10px; + } + + .nav-menu { + display: block; + position: fixed; + padding-top: 20px; + width: 100%; + height: 100vh; + font-weight: 600; + line-height: 40px; + background-color: #fae9df; + left: 0%; text-align: center; - color: #FFF3EE; - margin-top: 10px; - padding-bottom: 10px; + top: 0%; + font-size: 30px; + transition: 1s; + } + + .nav-menu.active { + left: 100%; + } + + .nav-menu a { + margin-top: 50px; + } + + .nav-menu .close-button { + display: block; + } + + .close-button .bar:nth-child(1) { + transform: translateY(9px) rotate(45deg); + } + + .close-button .bar:nth-child(2) { + opacity: 0; + } + + .close-button .bar:nth-child(3) { + transform: translateY(-10px) rotate(-45deg); + } + + li:hover, + .active { + border-bottom: none; + } + + .nav-menu button { + display: none; + } + + .hero { + display: block; + margin: 20px; + } + + .hero-intro h1 { + width: 100%; + font-size: 50px; + } + + .hero-intro { + width: 100%; + } + + .hero-intro p { + font-size: 18px; + } + + #hero-image img { + display: none; + } + + .about { + margin-left: 0%; + display: block; + background-color: #fae9df; + } + + .about h1 { + width: 100%; + text-align: center; + } + + .about-col { + display: block; + } + + .col { + width: 100%; + } + + .col-image img { + width: 100%; + } + + .col p { + font-size: 18px; + } + + .sec4-intro-text { + width: 100%; + } + + .sce4-intro-header a { + width: 100%; + font-size: 20px; + margin: 0 auto; + } + + .our-mission { + margin: 20px; + gap: 10px; + display: flex; + flex-direction: column-reverse; + text-align: center; + } + + .mission-img img { + width: 100%; + height: 100%; + } + + .our-mission p { + font-size: 18px; + line-height: 30px; + } + + .sec-4-text { + font-size: 18px; + } + + #sec-4-text { + margin: 0px; + width: 100%; + text-align: center; + font-size: 18px; + } + + #cta-btn button { + width: 50%; + padding-top: 10px; + } + + .subscribe p { + font-size: 17px; + width: 100%; + } + + #subscribe-section { + width: 100%; + margin-bottom: 0; + } + + input { + width: 90%; + padding: 5px; + font-size: 18px; + } + + #sub-btn { + width: 90%; + } + + .footer-links { + display: flex; + align-items: start; + justify-content: space-between; + margin-top: 0; + margin-left: 0; + padding: 10px; + width: 100%; + gap: 25px; + } + + .footer-col1 { + width: 70%; + line-height: 25px; + margin: 20px; + } + + .footer-logo img { + width: 70%; + min-width: 100px; + } + .links { + display: flex; + flex-direction: column-reverse; + margin-left: 0px; + width: 100%; + } + + .about-links1 { + margin-top: 50px; + line-height: 25px; + width: 100%; + } + + .about-links { + width: 100%; + line-height: 25px; + margin-top: 25px; + } + + .about-links1 h2 { + font-size: 20px; + font-weight: 800; + letter-spacing: 1.4px; + } + + .about-links a { + font-size: 13px; + } + + .rounded-icons { + width: 25px; + height: 25px; + } + + i { + width: 18px; + text-align: center; + } + + .about-links h2 { + font-size: 20px; + font-weight: 800; + letter-spacing: 1.4px; + } + + .mail-link { + width: 50%; + font-size: 12px; + } } +@media screen and (min-width: 768px) and (max-width: 1026px) { + .logo img { + padding-left: 20px; + } -@media screen and (max-width: 767px) { - .logo img { - width: 70%; - padding-left: 10px; - } - - .hambuger-menu { - display: block; - } - - nav { - border-bottom: none; - padding-left: 10px; - } - - .nav-menu { - display: block; - position: fixed; - padding-top: 20px; - width: 100%; - height: 100vh; - font-weight: 600; - line-height: 40px; - background-color: #FAE9DF; - left: 0%; - text-align: center; - top: 0%; - font-size: 30px; - transition: 1s; - } - - .nav-menu.active { - left: 100%; - } - - .nav-menu a { - margin-top: 50px; - } - - .nav-menu .close-button { - display: block; - } - - .close-button .bar:nth-child(1) { - transform: translateY(9px) rotate(45deg); - } - - .close-button .bar:nth-child(2) { - opacity: 0; - } - - .close-button .bar:nth-child(3) { - transform: translateY(-10px) rotate(-45deg); - } - - - li:hover, .active { - border-bottom: none; - } - - .nav-menu button { - display: none; - } - - .hero { - display: block; - margin: 20px; - } - - .hero-intro h1 { - width: 100%; - font-size: 50px; - } - - .hero-intro { - width: 100%; - } - - .hero-intro p { - font-size: 18px; - } - - #hero-image img{ - display: none; - } - - .about { - margin-left: 0%; - display: block; - background-color: #FAE9DF; - } - - .about h1 { - width: 100%; - text-align: center; - } - - .about-col { - display: block; - } - - .col { - width: 100%; - } - - .col-image img { - width: 100%; - } - - .col p { - font-size: 18px; - } - - .sec4-intro-text { - width: 100%; - } - - .sce4-intro-header a{ - width: 100%; - font-size: 20px; - margin: 0 auto; - } - - .our-mission { - margin: 20px; - gap: 10px; - display: flex; - flex-direction: column-reverse; - text-align: center ; - } - - .mission-img img { - width: 100%; - height: 100%; - } - - .our-mission p { - font-size: 18px; - line-height: 30px; - } - - .sec-4-text { - font-size: 18px; - } - - #sec-4-text { - margin: 0px; - width: 100%; - text-align: center; - font-size: 18px; - } - - #cta-btn button{ - width: 50%; - padding-top: 10px; - } - - .subscribe p { - font-size: 17px; - width: 100%; - } - - #subscribe-section { - width: 100%; - margin-bottom: 0; - } - - input { - width: 90%; - padding: 5px; - font-size: 18px; - } - - #sub-btn { - width: 90%; - } - - .footer-links { - display: flex; - align-items: start; - justify-content: space-between; - margin-top: 0; - margin-left: 0; - padding: 10px; - width: 100%; - gap: 25px; - - } - - .footer-col1 { - width: 70%; - line-height: 25px; - margin: 20px; - } - - .footer-logo img { - width: 70%; - min-width: 100px; - } - .links { - display: flex; - flex-direction: column-reverse; - margin-left: 0px; - width: 100%; - } - - .about-links1 { - margin-top: 50px; - line-height: 25px; - width: 100%; - } - - .about-links { - width: 100%; - line-height: 25px; - margin-top: 25px; - } - - .about-links1 h2 { - font-size: 20px; - font-weight: 800; - letter-spacing: 1.4px; - } - - .about-links a { - font-size: 13px; - } - - .rounded-icons { - width: 25px; - height: 25px; - } - - i{ - width: 18px; - text-align: center; - } - - .about-links h2 { - font-size: 20px; - font-weight: 800; - letter-spacing: 1.4px; - } - - .mail-link { - width: 50%; - font-size: 12px; - } -} - -@media screen and (min-width: 768px) and (max-width: 1026px){ - .logo img{ - padding-left: 20px ; - } - - nav { - padding:10px; - } - - .hero { - margin: 50px; - } - - .hero-intro { - width: 80%; - } - - #hero-image img { - width: 100%; - } - .about { - margin-left: 0%; - display: block; - padding: 20px; - } - - col { - width: 100%; - - } - - .col-image img { - width: 100%; - } - - .sec4-intro-text { - width: 90%; - margin: 0px auto; - } - - .our-mission { - margin: 40px; - height: 100%; - } - - .mission-img img { - width: 100%; - height: 100%; - } - - .our-mission p { - height: 90%; - } - - #sec-4-text { - width: 90%; - margin: 0px auto; - text-align: center; - } - - #cta-btn button{ - width: 25%; - padding-top: 10px; - } - - #subscribe-section { - width: 100%; - margin-bottom: -50px; - } - - footer { - width: 100%; - } - - .footer-col1 { - width: 60%; - } - - .links { - gap: 50px; - } - - - .about-links { - width: 100%; - line-height: 30px; - margin-top: 25px; - } - - -} \ No newline at end of file + nav { + padding: 10px; + } + + .hero { + margin: 50px; + } + + .hero-intro { + width: 80%; + } + + #hero-image img { + width: 100%; + } + .about { + margin-left: 0%; + display: block; + padding: 20px; + } + + col { + width: 100%; + } + + .col-image img { + width: 100%; + } + + .sec4-intro-text { + width: 90%; + margin: 0px auto; + } + + .our-mission { + margin: 40px; + height: 100%; + } + + .mission-img img { + width: 100%; + height: 100%; + } + + .our-mission p { + height: 90%; + } + + #sec-4-text { + width: 90%; + margin: 0px auto; + text-align: center; + } + + #cta-btn button { + width: 25%; + padding-top: 10px; + } + + #subscribe-section { + width: 100%; + margin-bottom: -50px; + } + + footer { + width: 100%; + } + + .footer-col1 { + width: 60%; + } + + .links { + gap: 50px; + } + + .about-links { + width: 100%; + line-height: 30px; + margin-top: 25px; + } +} From 04332bfa0c06ab132cff577248ba912ad8f34ebd Mon Sep 17 00:00:00 2001 From: ChikenduHillary Date: Sun, 9 Jun 2024 03:57:23 +0100 Subject: [PATCH 4/4] implemented subscriptions and structuered blog page --- .env.local | 1 + About Page/about.html | 21 ++++---- Blog Page/blog.html | 4 +- Blog Page/script.js | 2 +- Contact Page/contact.html | 10 ++-- Program Page/Programs_Main Page/index.html | 10 ++-- index.html | 4 +- subscribe.js | 63 ++++++++++++++++++++++ 8 files changed, 94 insertions(+), 21 deletions(-) create mode 100644 .env.local create mode 100644 subscribe.js diff --git a/.env.local b/.env.local new file mode 100644 index 0000000..a4dc8d1 --- /dev/null +++ b/.env.local @@ -0,0 +1 @@ +SUBSCRIBE_TOKEN=ab448096-dfd4-4e36-a433-7141de8ce724 \ No newline at end of file diff --git a/About Page/about.html b/About Page/about.html index 0e325e7..2925c7f 100644 --- a/About Page/about.html +++ b/About Page/about.html @@ -56,7 +56,7 @@
    -
  • Home
    •
  • Blog
    •  @@ -274,15 +274,15 @@

    Subscribe To Our Blog via Email

    notifications of new posts by email.


    - - + type="text" + name="" + id="input-email" + placeholder="Email address" + />
    + +
    @@ -391,5 +391,6 @@

    About Us

    }); }); + diff --git a/Blog Page/blog.html b/Blog Page/blog.html index ee23329..0b3e89b 100644 --- a/Blog Page/blog.html +++ b/Blog Page/blog.html @@ -55,7 +55,7 @@
    -
  • Home
    •
  • Blog
    •  @@ -227,6 +227,7 @@

    Subscribe To Our Blog via Email

    id="input-email" placeholder="Email address" />
    + @@ -328,5 +329,6 @@

    About Us

    + diff --git a/Blog Page/script.js b/Blog Page/script.js index c52f46b..1b4ab99 100644 --- a/Blog Page/script.js +++ b/Blog Page/script.js @@ -48,7 +48,7 @@ document.addEventListener("DOMContentLoaded", () => { // Iterate over the posts and create HTML for each post data.forEach((post) => { const postElement = document.createElement("div"); - postElement.className = "blog-post"; + postElement.className = "blog-section"; postElement.innerHTML = `

    Blog Posts

    diff --git a/Contact Page/contact.html b/Contact Page/contact.html index a5590d2..84ba70d 100644 --- a/Contact Page/contact.html +++ b/Contact Page/contact.html @@ -50,7 +50,7 @@
    -
  • Home
    •
  • Blog
    •  @@ -180,12 +180,13 @@

    Subscribe To Our Blog Via Email

    notifications of new posts by email.


    - + +
    @@ -273,5 +274,6 @@

    About Us

    + diff --git a/Program Page/Programs_Main Page/index.html b/Program Page/Programs_Main Page/index.html index 650c67c..0bc45ab 100644 --- a/Program Page/Programs_Main Page/index.html +++ b/Program Page/Programs_Main Page/index.html @@ -50,7 +50,7 @@
    -
  • Home
    •
  • Blog
    •  @@ -150,12 +150,13 @@

    Subscribe To Our Blog Via Email

    notifications of new posts by email.


    - + + @@ -237,5 +238,6 @@

    About Us

    + diff --git a/index.html b/index.html index 54fa409..b14de69 100644 --- a/index.html +++ b/index.html @@ -55,7 +55,7 @@
    -
  • Home
    •
  • Blog
    •  @@ -249,6 +249,7 @@

    Subscribe To Our Blog via Email

    id="input-email" placeholder="Email address" />
    + @@ -350,5 +351,6 @@

    About Us

    + diff --git a/subscribe.js b/subscribe.js new file mode 100644 index 0000000..4dd375f --- /dev/null +++ b/subscribe.js @@ -0,0 +1,63 @@ +document.getElementById("sub-btn").addEventListener("click", async () => { + const emailInput = document.getElementById("input-email"); + const email = emailInput.value; + const feedback = document.getElementById("feedback"); + const token = "ab448096-dfd4-4e36-a433-7141de8ce724"; + + feedback.style.display = "none"; + feedback.textContent = ""; + + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + if (!emailRegex.test(email)) { + feedback.textContent = "Please enter a valid email address."; + feedback.style.display = "block"; + return; + } + + try { + console.log(token); + feedback.textContent = "Loading..."; + feedback.style.color = "white"; + feedback.style.display = "block"; + + const response = await fetch( + "https://inclusive-talks.vercel.app/api/trpc/createSubscribers", + { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ email, token }), + } + ); + + console.log(response); + + if (response.ok) { + feedback.textContent = + "Subscription successful! Check your email for confirmation."; + feedback.style.color = "green"; + feedback.style.display = "block"; + emailInput.value = ""; // Clear the input field + } else if ( + response.statusText == "Bad Request" || + response.statusText == "" + ) { + const errorData = await response.json(); + feedback.textContent = errorData.message || "Email already exist"; + feedback.style.color = "red"; + feedback.style.display = "block"; + } else { + const errorData = await response.json(); + feedback.textContent = + errorData.message || "Subscription failed. Please try again."; + feedback.style.color = "red"; + feedback.style.display = "block"; + } + } catch (error) { + feedback.textContent = + "Network error. Please check your connection and try again."; + feedback.style.color = "red"; + feedback.style.display = "block"; + } +});