all programs pages complete

Hilda-Enyioko · May 5, 2024 · 75abd99 · 75abd99
1 parent a7ce45a
commit 75abd99
Show file tree

Hide file tree

Showing 9 changed files with 727 additions and 4 deletions.
diff --git a/Program Page/GuestWriting Page/index.html b/Program Page/GuestWriting Page/index.html
@@ -63,8 +63,8 @@ <h1>How Does It <br>Work?</h1>
                 <p>The Inclusive Talks Guest Writing Program, an annual initiative, invites the public to contribute articles promoting diversity and inclusion. 
                     It provides a platform for individuals, especially young voices, to freely discuss topics of interest. This program runs from mid-May to the end of June, comprising two segments: </p>
                 <ul>
-                    <li>Application Submission And Screening</li>
-                    <li>Article Release</li>
+                    <a href="#section2"><li>Application Submission And Screening</li></a>
+                    <a href="#section3"><li>Article Release</li></a>
                 </ul>
             </div>
             <div class="section-image"></div>
@@ -102,7 +102,7 @@ <h1>Guidelines And <br/>Instructions</h1>
                     <li>You must be 18 years or older to participate in the Inclusive Talks Guest Writing program.</li>
                     <li>Participating in the Inclusive Talks Guest Writing program is entirely voluntary.</li>
                     <li>Articles submitted must be in line with our goal: PROMOTING DIVERSITY AND INCLUSION.</li>
-                    <li>Articles should range from 1000 to 1200 words in length.</li>
+                    <li>Articles should range from 1000 to 1200 word-length.</li>
                     <li>Articles containing any form of plagiarism or spun will be disqualified.</li>
                     <li>Articles promoting hate, violence, or any social vice will be disqualified.</li>
                     <li>Articles containing cuss words will be disqualified.</li>

diff --git a/Program Page/GuestWriting Page/style.css b/Program Page/GuestWriting Page/style.css
@@ -170,6 +170,14 @@ li {
     color: #9e4021;
 }
 
+
+#section2 .section-text a, #section1 .section-text a{
+    transition: 0.5s;
+  }
+
+#section2 .section-text a:hover, #section1 .section-text a:hover {
+  opacity: 0.7;
+}
 #section4 .section-text {
     width: 100%;
 }

diff --git a/Program Page/Programs_Main Page/index.html b/Program Page/Programs_Main Page/index.html
@@ -61,7 +61,7 @@ <h1>Our <br>Programs</h1>
             <div class="program-card">
                 <div class="program-text">
                     <a href="../WMYFE Page/index.html"><h1>What Makes You <br>Feel Excluded?</h1></a>
-                    <p>Every voice finda comfort here, no matter how trivial your experience may seem. Inclusive Talks provides a safe space for you to unravel the nuances of inclusivity. All you've got to do is answer the question - "What Makes You Feel Excluded?"</p>
+                    <p>Every voice finds comfort here, no matter how trivial your experience may seem. Inclusive Talks provides a safe space for you to unravel the nuances of inclusion. All you've got to do is answer the question - "What Makes You Feel Excluded?"</p>
                 </div>
                 <div class="illustration">
                     <img alt="What Makes You Feel Excluded?" />

diff --git a/Program Page/WMYFE Page/images/icon-email.svg b/Program Page/WMYFE Page/images/icon-email.svg
diff --git a/Program Page/WMYFE Page/images/inclusive talks logo.png b/Program Page/WMYFE Page/images/inclusive talks logo.png
diff --git a/Program Page/WMYFE Page/images/logo.png b/Program Page/WMYFE Page/images/logo.png
diff --git a/Program Page/WMYFE Page/index.html b/Program Page/WMYFE Page/index.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<head>
+    <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Programs - Inclusive Talks</title>
+        <link rel="stylesheet" href="style.css" />
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" />
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" />
+        <link rel="icon" href=".\images\inclusive talks logo.png" />
+        <script src="https://kit.fontawesome.com/b825955621.js" crossorigin="anonymous"></script>
+        <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
+</head>
+<body>
+    <!--Navbar-->
+    <nav>
+        <!--Logo-->
+        <div id="logo">
+            <a href="../Home Page/index.html">
+                <img alt="Inclusive Talks Logo" src="./images/logo.png" loading="eager" />
+            </a>
+        </div>
+
+        <!--Nav-menu-->
+        <div id="nav-menu">
+            <div id="hamburger-menu">
+                <div class="bar"></div>
+                <div class="bar"></div>
+                <div class="bar"></div>
+            </div>
+            <ul class="nav-menu">
+                <div id="close-button">
+                    <div class="bar"></div>
+                    <div class="bar"></div>
+                    <div class="bar"></div>
+                </div>
+                <a href="../../Home Page/index.html"><li class="nav-link">Home</li></a>
+                <a href="../../Blog Page/index.html"><li class="nav-link">Blog</li></a>
+                <a href="../Programs_Main Page/index.html"><li class="nav-link active">Programs</li></a>
+                <a href="../../About Page/index.html"><li class="nav-link">About Us</li></a>
+                <a href="../../Contact Page/contact.html"><li class="nav-link">Contact</li></a>
+                <!--cta-->
+                <a href="#subscribe-section"><button class="cta-button" type="button">SUBSCRIBE</button></a>
+            </ul>
+        </div>
+    </nav>
+
+    <!--Hero Section-->
+    <section id="hero-section">
+        <div id="hero-text">
+            <h1>What Make You <br>Feel Excluded?</h1>
+            <p>Every voice finds comfort here, no matter how trivial your experience may seem. We provides a safe space for you to unravel the nuances of inclusion.</p>
+            <a href="#subscribe-section"><button class="cta-button" type="button">SUBSCRIBE</button></a>
+        </div>
+        <div id="hero-image">
+            <img alt="What Makes You Feel Excluded?" src="images/hero-image.png" loading="active" />
+        </div>
+    </section>
+
+    <section id="section1" class="sections">
+        <div class="section-card">
+            <div class="section-text">
+                <h1>How Does It <br>Work?</h1>
+                <p></p>
+            </div>
+            <div class="section-image"></div>
+        </div>
+    </section>
+
+    <section id="section2" class="sections">
+        <div class="section-card">
+            <div class="section-text">
+                <h1><br/></h1>
+                <a href="" target="_blank"><button class="send-button"></button></a>
+            </div>
+        </div>
+    </section>
+
+    <section id="subscribe-section">
+        <div id="subscribe-card">
+            <h3 id="subscribe-title">Subscribe To Our Blog Via Email</h3>
+            <p id="subscribe-text">Enter your email address to subscribe to our blog and receive notifications of new posts by email.</p>
+            <input type="email" placeholder="Email address" name="" id="input-email" /><br />
+            <button class="cta-button" type="button" action="">SUBSCRIBE</button>
+        </div>
+    </section>
+
+    <footer>
+        <div class="footer-parts footer-links">
+            <div class="main-link">
+                <div id="footer-logo">
+                    <img src="./images/inclusive talks logo.png" alt="Inclusive Talks Logo" loading="lazy" />
+                </div>
+                    <h3 class="footer-header">Blog</h3>
+                    <p>Dedicated To Diversity!</p>
+                    <a href="https://instagram.com/inclusivetalks_" target="_blank" class="footer-icons instagram-icon"><i class="fa fa-brands fab fab fa-instagram"></i></a>
+                    <a href="https://x.com/InclusiveTalks" target="_blank" class="footer-icons twitter-icon"><i class="fa fa-brands fa-twitter"></i></a>
+                    <a href="https://youtube.com/@inclusivetalks22" target="_blank" class="footer-icons youtube-icon"><i class="fa fa-brands fab fa-youtube-square"></i></a>
+                    <a href="" target="_blank" class="footer-icons threads-icon"><i class="fa fa-brands fab fa-threads"></i></a>
+                    <div class="mail-link">
+                        <!-- <img src="images/icon-email.svg" alt="E-mail Icon" class="mail-icon" loading="lazy" /> -->
+                        <a href="mailto:[email protected]" target="_blank">[email protected]</a>
+                    </div>
+            </div>
+            <div class="support-link">
+                <div class="support-links">
+                    <h3 class="footer-header">Our Programs</h3>
+                    <a class="programs-link" href="../WMYFE Page/index.html">What Makes You Feel Excluded?</a><br>
+                    <a class="programs-link" href="../GuestWriting Page/">Become A Guest Writer</a><br>
+                    <a class="programs-link" href="../5DaysOfLove Page/index.html">5 Days Of Love</a><br>   
+                </div>
+                <div class="support-links">
+                    <h3 class="footer-header">About Us</h3>
+                    <a class="about-link" href="../../About Page/about.html">How It Started</a><br />
+                    <a class="about-link" href="../../About Page/about.html">Where We Are</a><br />
+                    <a class="about-link" href="../../About Page/about.html">Our Goal</a><br />  
+                    <a class="about-link" href="../../About Page/about.html">Meet The Team</a><br /> 
+                    <a class="about-link" href="../../About Page/about.html">FAQ</a><br>  
+                </div>
+            </div>
+        </div>
+        <hr class="footer-parts" />
+        <div class="footer-parts copyright">
+            <p class="copyright-text"> &copy; Copyright 2023 Inclusive Talks</p>
+            <p class="copyright-text">All Rights Reserved</p>
+        </div>
+    </footer>
+    <script src="script.js"></script>
+</body>
diff --git a/Program Page/WMYFE Page/script.js b/Program Page/WMYFE Page/script.js
@@ -0,0 +1,11 @@
+const hamburgerMenu = document.querySelector("#hamburger-menu")
+const navMenu = document.querySelector(".nav-menu") 
+const closeButton = document.querySelector("#close-button")
+
+hamburgerMenu.addEventListener("click", () =>{
+    navMenu.classList.toggle("active")
+})
+
+closeButton.addEventListener("click", () => {
+    navMenu.classList.toggle("active")
+})