What Makes You
-
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?"
+
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?"
diff --git a/Program Page/WMYFE Page/images/icon-email.svg b/Program Page/WMYFE Page/images/icon-email.svg
new file mode 100644
index 0000000..7c6a74c
--- /dev/null
+++ b/Program Page/WMYFE Page/images/icon-email.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/Program Page/WMYFE Page/images/inclusive talks logo.png b/Program Page/WMYFE Page/images/inclusive talks logo.png
new file mode 100644
index 0000000..2272b70
Binary files /dev/null and b/Program Page/WMYFE Page/images/inclusive talks logo.png differ
diff --git a/Program Page/WMYFE Page/images/logo.png b/Program Page/WMYFE Page/images/logo.png
new file mode 100644
index 0000000..456ecd3
Binary files /dev/null and b/Program Page/WMYFE Page/images/logo.png differ
diff --git a/Program Page/WMYFE Page/index.html b/Program Page/WMYFE Page/index.html
index e69de29..267af69 100644
--- a/Program Page/WMYFE Page/index.html
+++ b/Program Page/WMYFE Page/index.html
@@ -0,0 +1,128 @@
+
+
+
+
+
Programs - Inclusive Talks
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
What Make You
+
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.
+
SUBSCRIBE
+
+
+
+
+
+
+
+
+
+
+
Subscribe To Our Blog Via Email
+
Enter your email address to subscribe to our blog and receive notifications of new posts by email.
+
+
SUBSCRIBE
+
+
+
+
+
\ No newline at end of file
diff --git a/Program Page/WMYFE Page/script.js b/Program Page/WMYFE Page/script.js
new file mode 100644
index 0000000..9139ece
--- /dev/null
+++ 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")
+})
diff --git a/Program Page/WMYFE Page/style.css b/Program Page/WMYFE Page/style.css
new file mode 100644
index 0000000..ac664a7
--- /dev/null
+++ b/Program Page/WMYFE Page/style.css
@@ -0,0 +1,575 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: 'Poppins', sans-serif;
+ scroll-behavior: smooth;
+}
+
+body {
+ background-color: #fae9df;
+ color: #9e4021;
+}
+
+nav {
+ width: 100%;
+ height: 119px;
+ display: flex;
+ justify-content: space-between;
+ justify-items: center;
+ align-items: center;
+ padding: 20px 40px;
+ border-bottom: 4px solid #fff3ee;
+}
+
+#logo img {
+ width: 90%;
+ padding-left: 50px;
+}
+
+.nav-menu {
+ width: 600px;
+ display: flex;
+ justify-items: centre;
+ justify-content: space-evenly;
+ font-size: 18px;
+}
+
+a {
+ text-decoration: none;
+ color: inherit;
+}
+
+li {
+ list-style: none;
+}
+
+.nav-link {
+ transition: border-bottom, 300ms;
+}
+
+.nav-link:hover, .active {
+ cursor: pointer;
+ padding-bottom: 1px;
+ border-bottom: 2px solid #9E4021;
+}
+
+#hamburger-menu {
+ display: none;
+ width: 35px;
+ height: 25px;
+ cursor: pointer;
+ margin-top: -20px;
+}
+
+#close-button {
+ display: none;
+ width: 35px;
+ height: 25px;
+ cursor: pointer;
+ margin-left: 80%;
+ margin-bottom: 30px;
+ margin-top: 20px;
+}
+
+.bar {
+ width: 100%;
+ height: 4px;
+ margin: 5px auto;
+ background-color: #9E4021;
+ border-radius: 10px;
+}
+
+.cta-button {
+ color: #fff3ee;
+ background-color: #9e4021;
+ padding: 7px;
+ font-size: 18px;
+ letter-spacing: 1.5px;
+ border-radius: 5px;
+ border: none;
+}
+
+.send-button {
+ background-color: #9e4021;
+ color: #fae9df;
+ border: none;
+ border-radius: 25px;
+ width: 300px;
+ height: 30px;
+ font-size: 15px;
+ letter-spacing: 1.5px;
+ margin-top: 20px;
+}
+
+.cta-button:hover, .send-button:hover {
+ cursor: pointer;
+ box-shadow: 1px 2px 8px #b1693d;
+ transition: 1s;
+}
+
+.nav-menu .cta-button {
+ margin-top: -7px;
+}
+
+#hero-section, .sections {
+ display: flex;
+ margin: 60px 86px 86px;
+ justify-content: space-between;
+ justify-items: center;
+}
+
+#hero-text {
+ width: 50%;
+}
+
+#hero-text h1, .section-text h1 {
+ font-size: 70px;
+ font-weight: 900;
+ color: #833200;
+}
+
+#hero-text p, .section-text p {
+ width: 90%;
+ font-size: 20px;
+ line-height: 40px;
+ font-weight: 400;
+ letter-spacing: 0.2px;
+ margin-top: 30px;
+}
+
+#hero-text .cta-button{
+ margin-top: 30px;
+}
+
+#hero-image {
+ width: 45%;
+}
+
+#hero-image img {
+ width: 90%;
+ height: 80%;
+}
+
+.sections {
+ background-color: rgb(241, 207, 197);
+ width: 100%;
+ margin: 0 0 50px;
+ padding: 0;
+}
+
+.section-card {
+ width: 90%;
+ margin: 40px 40px 40px 86px;
+ display: flex;
+}
+
+.section-text {
+ width: 60%;
+ color: #9e4021;
+}
+
+#section2 .section-text {
+ width: 100%;
+}
+
+.section-text h1 {
+ font-size: 50px;
+}
+
+#subscribe-section {
+ background-color: #da9;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ width: 70%;
+ height: 300px;
+ margin: 50px auto;
+ border-radius: 5px;
+ line-height: 40px;
+ color: #fff;
+}
+
+#subscribe-card {
+ padding: 30px 20px 20px 50px;
+}
+
+#subscribe-title {
+ font-size: 1.5rem;
+}
+
+#subscribe-text {
+ font-size: 18px;
+ font-weight: 400;
+}
+
+#input-email {
+ width: 500px;
+ height: 35px;
+ font-size: 16px;
+ border-radius: 3px;
+ border: none;
+ padding-left: 10px;
+ margin-bottom: 20px;
+}
+
+input:focus {
+ outline: none;;
+}
+
+footer {
+ width: 100%;
+ background-color: #9e4021;
+ color: #fff3ee;
+ display: flex;
+ flex-direction: column;
+}
+
+.footer-links {
+ margin-top: 50px;
+ margin-left: 70px;
+ padding: 40px;
+ padding-top: 0;
+ display: flex;
+ justify-content: space-between;
+ align-items: start;
+}
+
+.support-link {
+ display: flex;
+ justify-content: space-around;
+ width: 70%;
+}
+
+.support-links {
+ width: 35%;
+ margin-top: 50px;
+ line-height: 40px;
+}
+
+.mail-link a, .support-links a {
+ transition: text-decoration-color 300ms;
+}
+
+.mail-link a:hover, .support-links a:hover {
+ text-decoration: underline 0.1em rgba(14, 0, 0, 0);
+ text-decoration-color: #fff;
+}
+
+.mail-link {
+ margin-top: 20px;
+ font-size: 15px;
+}
+
+#footer-logo img {
+ width: 200px;
+ height: 200px;
+ margin-top: 20px;
+}
+
+.footer-header {
+ font-size: 1.5rem;
+}
+
+.footer-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;
+}
+
+.footer-icons.instagram-icon:hover, .connect-icons.instagram-icon:hover {
+ color: white;
+ background-image: linear-gradient(to right, #feda75, #ee2a7b, #6228d7 );
+ transition: 0.3s;
+ border: none;
+}
+
+.footer-icons.twitter-icon:hover, .connect-icons.twitter-icon:hover {
+ color: #1DA1F2;
+ background-color: #fff;
+ transition: 0.3s;
+ border-color: white;
+}
+
+.footer-icons.youtube-icon:hover, .connect-icons.youtube-icon:hover {
+ color: #FF0000;
+ background-color: #fff;
+ transition: 0.3s;
+ border-color: white;
+}
+
+.footer-icons.threads-icon:hover {
+ color: white;
+ background-color: black;
+ transition: 0.3s;
+ border-color: black;
+}
+
+.connect-icons.facebook-icon:hover {
+ color: white;
+ background-color: #3b5998;
+ border-color: #3b5998;
+ transition: 0.3s;
+}
+
+hr {
+ margin: 20px 0 0;
+ border: 0;
+ height: 2px;
+ background-color: #fff3ee;
+}
+
+.copyright {
+ margin: 10px auto;
+}
+
+.copyright-text {
+ margin: 0 auto;
+ text-align: center;
+}
+
+@media screen and (max-width:767px) {
+ nav {
+ border-bottom: none;
+ }
+
+ #logo {
+ margin-left: -20px;
+ }
+
+ #logo img {
+ padding-left: 0;
+ width: 70%;
+ height: 80%;
+ }
+
+ #hamburger-menu, #close-button {
+ display: block;
+ }
+
+
+ .nav-menu {
+ display: block;
+ position: fixed;
+ padding-top: 20px;
+ width: 100%;
+ height: 100vh;
+ font-weight: 600;
+ line-height: 40px;
+ background-color: #FAE9DF;
+ text-align: center;
+ font-size: 18px;
+ transition: 1s;
+ left: 100%;
+ top: 0%;
+ }
+
+ .nav-menu.active {
+ left: 0%;
+ }
+
+ .nav-menu .cta-button {
+ display: none;
+ }
+
+ .nav-link:hover, .active {
+ border-bottom: none;
+ }
+
+ .nav-link {
+ margin-bottom: 10px;
+ }
+
+ .nav-link:hover {
+ opacity: 0.6;
+ }
+
+ #close-button .bar:first-child {
+ transform: translateY(9px) rotate(45deg);
+ }
+
+ #close-button .bar:nth-child(2) {
+ opacity: 0;
+ }
+
+ #close-button .bar:last-child {
+ transform: translateY(-10px) rotate(-45deg);
+ }
+
+ #hero-section, .section-card {
+ width: 95%;
+ margin: 20px;
+ flex-direction: column;
+ }
+
+ #hero-text, .section-text {
+ width: 100%;
+ }
+
+ #hero-text h1, .section-text h1 {
+ font-size: 50px;
+ width: 100%;
+ }
+
+ #hero-text br, .section-text br {
+ display: none;
+ }
+
+ #hero-text p, .section-text p, .section-text li {
+ font-size: 18px;
+ width: 100%;
+ }
+
+ #hero-image {
+ display: none;
+ }
+
+ #section1 {
+ margin-top: 50px;
+ }
+
+ .section-card {
+ padding-top: 20px;
+ padding-bottom: 40px;
+ }
+
+ .section-text h1 {
+ font-size: 40px;
+ margin-bottom: 20px;
+ }
+
+ #subscribe-section {
+ width: 100%;
+ margin: 0;
+ border-radius: 0;
+ height: fit-content;
+ }
+
+ #subscribe-card {
+ width: 80%;
+ margin: 50px 30px;
+ padding: 0;
+ }
+
+ #subscribe-title {
+ font-size: 25px;
+ width: 100%;
+ margin-bottom: 15px;
+ }
+
+ #subscribe-text {
+ font-size: 16px;
+ width: 100%;
+ line-height: 30px;
+ margin-bottom: 15px;
+ }
+
+ #input-email {
+ width: 100%;
+ font-size: 18px;
+ border-radius: 0;
+ margin-bottom: 15px;
+ }
+
+ #subscribe-card .cta-button {
+ width: 100%;
+ margin-top: 5px;
+ }
+
+ .footer-links {
+ margin: 30px 15px 20px 15px;
+ }
+
+ .footer-links a, .footer-parts p {
+ font-size: 15px;
+ }
+
+ #footer-logo img {
+ width: 50%;
+ height: 50%;
+ min-width: 100px;
+ min-height: 100px;
+ }
+
+ .main-link .footer-header{
+ margin-top: 120px;
+ }
+
+ .footer-header {
+ font-size: 20px;
+ }
+
+ .mail-link {
+ font-size: 12px;
+ }
+
+ .support-link {
+ flex-direction: column-reverse;
+ gap: 15px;
+ }
+
+ .support-links {
+ width: 100%;
+ margin-top: 40px;
+ line-height: 30px;
+ }
+}
+
+@media screen and (min-width:768px) and (max-width: 1026px) {
+ nav {
+ padding: 10px;
+ }
+
+ #logo img{
+ padding-left: 20px;
+ }
+
+ #hero-section {
+ margin: 50px;
+ }
+
+ #hero-text {
+ width: 60%;
+ }
+
+ #hero-image {
+ margin-top: 110px;
+ }
+
+ #hero-image img {
+ width: 100%;
+ height: 60%;
+ }
+
+ #subscribe-section {
+ width: 100%;
+ margin: 0;
+ border-radius: 0;
+ height: fit-content;
+ }
+
+ #subscribe-card {
+ width: 80%;
+ margin-top: 50px;
+ margin-bottom: 50px;
+ margin-left: 30px;
+ padding: 0;
+ }
+
+ .footer-links {
+ margin: 30px 0px 20px 70px;
+ }
+
+ .support-links {
+ line-height: 30px;
+ margin-top: 40px;
+ }
+}
\ No newline at end of file
+