Merge pull request #97 from Tech-neophyte/main

Resize and align Project cards
SnowScriptWinterOfCode · Jan 13, 2024 · 314c9ff · 314c9ff
2 parents b679be1 + 3cae3db
commit 314c9ff
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -225,12 +225,12 @@ <h3>Project 1</h3>
                                     Repo</a></button>
                         </div>
                     </div>
-
+                  
                     <div class="project" data-aos="fade-right">
                         <h3>Project 2</h3>
-                        <p>Developed a full-stack web application using Node.js and MongoDB. Implemented user
-                            authentication and integrated third-party APIs for enhanced functionality.</p>
-                        <p><strong>Skills and Tools:</strong> HTML, CSS, JavaScript, Node.js, MongoDB</p>
+                        <p>Built a full-stack web app with Node.js and MongoDB, featuring user authentication 
+                            and third-party API integration for enhanced functionality.</p>
+                        <p><strong>Skills and Tools:</strong> HTML, CSS, JavaScript, Node.js</p>
                         <div class="buttons">
                             <button><a href="https://example-project1-live-website.com" target="_blank">Live
                                     Website</a></button>

diff --git a/styles.css b/styles.css
@@ -464,7 +464,6 @@ button a:hover{
 
 
 /* Projects */
-
 .about-me,
 .projects{
   background-color: #f4f4f4;
@@ -479,6 +478,26 @@ button a:hover{
   padding: 40px 0;
   background-color: #f4f4f4;
 }
+#project-heading {
+    text-align: center;
+}
+#project-heading h1 {
+    font-size: 27px;
+    font-weight: 600;
+    color: #3498db;
+    position: relative;
+    margin-bottom: 25px;
+}
+#project-heading h1::after {
+    position: absolute;
+    content: ' ';
+    width: 100px;
+    height: 2px;
+    left: 50%;
+    bottom: -8px;
+    background-image: linear-gradient(to right, #3498db, #7cbde9);
+    transform: translateX(-50%);
+}
 
 .project {
     overflow: hidden;
@@ -489,6 +508,7 @@ button a:hover{
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     max-width: 800px;
     transition: transform background-color 0.2s ease-in-out;
+    height: 238px;
   }
 
   .project:hover {
@@ -523,7 +543,7 @@ button a:hover{
 }
 
 .project button {
-  display: block;
+  display: flex;
   margin: 10px;
   margin-left: 0;
   padding: 8px 16px;
@@ -548,7 +568,12 @@ button a:hover{
   display: flex;
   flex-wrap: wrap;
 }
-
+@media screen and (max-width: 600px) {
+    .project .button {
+        width: 100%; 
+        margin: 5px 0; 
+    }
+}
 /* Scroll-up Button */
 .scroll-up-btn {
   position: fixed;