programs and contact edited

Hilda-Enyioko · Jun 16, 2024 · 0586aea · 0586aea
1 parent 02dc2ac
commit 0586aea
Show file tree

Hide file tree

Showing 9 changed files with 270 additions and 148 deletions.
diff --git a/Contact Page/contact.html b/Contact Page/contact.html
@@ -68,19 +68,21 @@
     </nav>
     <!--Hero Section-->
     <section id="hero-section">
-      <div id="hero-text">
-        <h1>Get In <br />Touch</h1>
-        <p>
-          At Inclusive Talks, we believe in the power of diverse voices coming
-          together to create positive change. Your thoughts, experiences, and
-          ideas matter to us.
-        </p>
-        <a href="#subscribe-section"
-          ><button class="cta-button" type="button">SUBSCRIBE</button></a
-        >
-      </div>
-      <div id="hero-image">
-        <img alt="Get In Touch" src="images/hero-image.png" loading="active" />
+      <h1>Get In <br />Touch</h1>
+      <div class="hero-content">
+        <div id="hero-text">
+          <p>
+            At Inclusive Talks, we believe in the power of diverse voices coming
+            together to create positive change. Your thoughts, experiences, and
+            ideas matter to us.
+          </p>
+          <a href="#subscribe-section"
+            ><button class="cta-button" type="button">SUBSCRIBE</button></a
+          >
+        </div>
+        <div id="hero-image">
+          <img alt="Get In Touch" src="images/hero-image.png" loading="active" />
+        </div>
       </div>
     </section>
 

diff --git a/Contact Page/style.css b/Contact Page/style.css
@@ -98,16 +98,21 @@ li {
 
 #hero-section {
   display: flex;
+  flex-direction: column;
   margin: 60px 86px 86px;
   justify-content: space-between;
   justify-items: center;
 }
 
-#hero-text {
+.hero-content {
+  display: flex;
+}
+
+#hero-text, #hero-section h1 {
   width: 50%;
 }
 
-#hero-text h1 {
+#hero-section h1 {
   font-size: 70px;
   font-weight: 900;
   color: #833200;
@@ -128,11 +133,12 @@ li {
 
 #hero-image {
   width: 45%;
+  margin-top: -150px;
+  margin-left: 30px;
 }
 
 #hero-image img {
   width: 90%;
-  height: 80%;
 }
 
 #partnership {
@@ -473,18 +479,25 @@ hr {
     width: 95%;
     margin: 20px;
     flex-direction: column;
-    gap: 30px;
   }
 
   #hero-text {
     width: 100%;
   }
 
-  #hero-text h1 {
+  #hero-section h1 {
     font-size: 50px;
     width: 100%;
   }
 
+  #hero-text p {
+    margin-top: 0;
+  }
+
+  #hero-section h1 br {
+    display: none;
+  }
+
   #hero-text br {
     display: none;
   }
@@ -668,12 +681,11 @@ hr {
   }
 
   #hero-image {
-    margin-top: 110px;
+    margin-top: -60px;
   }
 
   #hero-image img {
     width: 100%;
-    height: 60%;
   }
 
   #partnership-image div {

diff --git a/Program Page/GuestWriting Page/images/hero-image.png b/Program Page/GuestWriting Page/images/hero-image.png
diff --git a/Program Page/GuestWriting Page/index.html b/Program Page/GuestWriting Page/index.html
@@ -111,37 +111,47 @@ <h1>How Does It <br />Work?</h1>
 
   <section id="section2" class="sections">
     <div class="section-card">
-      <div class="section-text">
         <h1>Article Submission <br />And Screening</h1>
-        <p>
-          This segment runs from May 14th to June 7th. The application form for
-          the program is open, accepting submissions until May 30th at 12:00am
-          (WAT). Applications are reviewed, ensuring compliance with
-          <a href="#section4">the guidelines of the program.</a><br />
-          3 articles are selected to undergo proofreading and editing. Selected
-          applicants are notified via email, and their social media handles are
-          confirmed for proper credit.
-        </p>
-      </div>
-      <div class="section-image">
-        <img
-          src="./images/articlescreening.jpg"
-          alt="Application and Screening"
-          loading="lazy"
-        />
-      </div>
+        <div class="section-content">
+            <div class="section-text">
+                <p>
+                This segment runs from May 14th to June 7th. The application form for
+                the program is open, accepting submissions until May 30th at 12:00am
+                (WAT). Applications are reviewed, ensuring compliance with
+                <a href="#section4">the guidelines of the program.</a><br />
+                3 articles are selected to undergo proofreading and editing. Selected
+                applicants are notified via email, and their social media handles are
+                confirmed for proper credit.
+                </p>
+            </div>
+            <div class="section-image">
+                <img
+                src="./images/articlescreening.jpg"
+                alt="Application and Screening"
+                loading="lazy"
+            />
+            </div>
+        </div>
     </div>
   </section>
 
     <section id="section3" class="sections">
         <div class="section-card">
-            <div class="section-text">
-                <h1>Article <br/>Release</h1>
-                <p>Running from June 8th to June 30th, one article is released each Thursday in no particular order.<br />
+            <h1>Article <br/>Release</h1>
+            <div class="section-content">
+                <div class="section-text">
+                    <p>Running from June 8th to June 30th, one article is released each Thursday in no particular order.<br />
                     Each week, due credit is consistently attributed to the featured writer across all our social media channels.<br />
                     Writers are also encouraged to share their articles across their networks tagging Inclusive Talks appropriately.</p>
+                </div>
+                <div class="section-image">
+                    <img
+                    src="./images/article-release.jpg"
+                    alt="Read Articles From Our Blog"
+                    loading="lazy"
+                    />
+                </div>
             </div>
-            <div class="section-image"></div>
         </div>
     </section>
 

diff --git a/Program Page/GuestWriting Page/style.css b/Program Page/GuestWriting Page/style.css
@@ -127,8 +127,7 @@ li {
   width: 50%;
 }
 
-#hero-text h1,
-.section-text h1 {
+#hero-text h1 {
   font-size: 70px;
   font-weight: 900;
   color: #833200;
@@ -153,8 +152,8 @@ li {
 }
 
 #hero-image img {
-  width: 90%;
-  height: 80%;
+  width: 80%;
+  height: 70%;
 }
 
 .sections {
@@ -168,13 +167,27 @@ li {
   width: 90%;
   margin: 40px 40px 40px 86px;
   display: flex;
+  flex-direction: column;
+}
+
+.section-content {
+  display: flex;
 }
 
-.section-text {
+.section-text, .section-card h1 {
   width: 60%;
   color: #9e4021;
 }
 
+.section-card h1 {
+  font-size: 50px;
+  font-weight: 900;
+}
+
+.section-image {
+  width: 35%;
+}
+
 #section2 .section-text a,
 #section1 .section-text a {
   transition: 0.5s;
@@ -206,13 +219,8 @@ li {
   font-weight: 700;
 }
 
-.section-text h1 {
-  font-size: 50px;
-}
-
 .sections img {
   width: 100%;
-  margin-top: 60px;
   border-radius: 8px;
   box-shadow: 5px 5px 8px rgba(105, 104, 104, 0.5);
 }
@@ -499,17 +507,22 @@ hr {
     padding-bottom: 40px;
   }
 
-  .section-text h1 {
+  .section-card h1 {
     font-size: 40px;
-    margin-bottom: 20px;
+    width: 100%;
   }
 
-  .section-image {
-    width: 100%;
+  .section-card h1 br{
+    display: none;
   }
 
-  .section-text {
+  .section-content {
+    flex-direction: column;
+  }
+
+  .section-image {
     width: 100%;
+    margin-top: 25px;
   }
 
   #subscribe-section {
@@ -627,7 +640,7 @@ hr {
     padding-left: 20px;
   }
 
-  #hero-section {
+  #hero-section{
     margin: 50px;
   }
 
@@ -645,18 +658,26 @@ hr {
   }
 
   .section-card {
-    flex-direction: column;
     margin-left: 50px;
   }
 
+  .section-content {
+    flex-direction: column;
+  }
+
   .section-image {
     width: 100%;
+    margin-top: 25px;
   }
 
-  .section-text {
+  .section-text, .section-card h1 {
     width: 100%;
   }
 
+  .section-card h1 br{
+    display: none;
+  }
+
   #subscribe-section {
     width: 100%;
     margin: 0;