styling fixes

index.html

@@ -105,26 +105,32 @@ <h2 class="resources-title">How to Get Started</h2>
                 <li class="resource-item">
                     <a class="resource-link" href="https://defang.io" target="_blank">
                         <img class="resource-icon" src="images/website_icon.png">
-                        <h3 class="resource-name">Defang Website</h3>
+                        <h3 class="resource-name">Defang.io Website</h3>
                     </a>
-                        <p class="resource-description">Visit the Defang website to download the Defang CLI, check out sample projects written in JavaScript, NodeJS, Python, Go, Ruby, and so much more. </p>
+                        <p class="resource-description">Visit the Defang website to get an in-depth overview of the produdct! </p>
                 </li>
 
                 <li class="resource-item">
-                    <a class="resource-link" href="https://defang.io" target="_blank">
+                    <a class="resource-link" href="https://hackp.ac/defang-docs" target="_blank">
                         <img class="resource-icon" src="images/documentation_icon.png">
                         <h3 class="resource-name">Defang Documentation</h3>
                     </a>
-                    <p class="resource-description">Visit the Defang website to download the Defang CLI, check out sample projects written in JavaScript, NodeJS, Python, Go, Ruby, and so much more. </p>
+                    <p class="resource-description">Find everything you need to know about Defang in their documentation page.</p>
                 </li>
 
                 <li class="resource-item">
-                    <a class="resource-link" href="https://defang.io" target="_blank">
+                    <a class="resource-link" href="https://hackp.ac/defang-github" target="_blank">
                         <img class="resource-icon" src="images/github_icon.png">
                         <h3 class="resource-name">Defang GitHub Page</h3>
                     </a>
-                    <p class="resource-description">Visit the Defang website to download the Defang CLI, check out sample projects
-                        written in JavaScript, NodeJS, Python, Go, Ruby, and so much more. </p>
+                    <p class="resource-description">A great resource for anyone that wants to take a deep dive into the Defang code.</p>
+                </li>
+                <li class="resource-item">
+                    <a class="resource-link" href="https://hackp.ac/defang-samples" target="_blank">
+                        <img class="resource-icon" src="images/project_icon.png">
+                        <h3 class="resource-name">Sample Projects</h3>
+                    </a>
+                    <p class="resource-description">A full gallery of sample projects written in a dozen languages and frameworks! </p>
                 </li>
             </ul>
         </div>
@@ -152,13 +158,13 @@ <h2 class="video-title">Video Tutorial</h2>
 
             <br><br>
 
-        The workshop will also cover best practices for updating project files. By the end of this session, attendees will be
-        proficient in using the Defang CLI to create and deploy their hackathon project to the cloud.
+        The workshop will also cover best practices for updating project files. By the end of this session, viewers will be
+        proficient in using the Defang CLI to create and deploy their hackathon projects to the cloud.
 
             <br><br>
 
         <em>Requirements:</em>
-        <ul>
+        <ul class="requirements-ul">
             <li>
             Computer with Windows, Mac, or Linux
             </li>

styles.css

@@ -48,6 +48,7 @@ body {
     display: flex; 
     justify-content: space-between; 
     align-items: center; 
+    text-align: center; 
     z-index: 2;
 }
 
@@ -76,12 +77,16 @@ body {
     list-style-type: none;
     justify-content: center; 
     align-items: center; 
-    margin-left: 20px; 
+}
+
+.nav-li,.nav-ul {
+    margin: 0; 
+    padding: 0; 
 }
 
 .nav-link {
     text-decoration: none;
-    font-size: 15px;
+    font-size: 18px;
     padding-right: 30px;
     color: var(--main-white);
     font-weight: 600;
@@ -245,7 +250,7 @@ section{
 
 #resources-section, #projects-section{
     height: auto; 
-    padding: 30px; 
+    padding: 30px 30px 0; 
 }
 
 .list-container {
@@ -299,16 +304,20 @@ section{
     padding-bottom: 20px; 
 }
 
-ul {
-    padding-left: 20px; 
-    padding-bottom: 20px; 
+.requirements-ul {
+    padding-left: 20px;
+    padding-bottom: 20px;  
+}
+
+#projects-section {
+    background-image: linear-gradient(65deg, var(--main-dark), var(--main-blue));
+    padding-bottom: 50px; 
 }
 
 .iframe-container{
     height: 315px; 
     width: 560px; 
-    border: 10px solid var(--main-dark); 
-    box-shadow: 0 10px 10px 5px var(--shadow-blue);
+    border: 10px solid var(--main-blue); 
 }
 
 @media only screen and (max-width: 900px) {