Merge pull request #22 from Bryson69/main

Resolve #12

Author: vinzvinci

assets/css/styles.css

@@ -302,6 +302,67 @@ img {
 }
 
 
+/* ===== PROJECT ====== */
+
+.cards {
+    padding: 3rem;  
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 1.5rem;
+  }
+  
+  .card {
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 300px;
+    max-width: 450px;
+    color: #333;
+    border-radius: 25px;
+    box-shadow: 2px 2px 5px rgba(0,0,0,.3);
+    text-decoration: none;  
+    font-size: 1rem;
+    overflow: hidden;
+    transition: transform 200ms, box-shadow 200ms;
+  }
+  
+  
+  
+  .card .card__image {
+    flex: 0 0 250px;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+  }
+  
+  .card .content {
+    padding: 1rem;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .card .card__title {
+    font-size: 1.75rem;
+    font-weight: 700;
+    margin-bottom: .5rem;
+  }
+  
+  .card .card__snippet {
+    margin-bottom: .5rem;
+  }
+  
+  .card .card__button {
+    text-transform: uppercase;  
+    text-align: right;
+    font-weight: 600;
+    margin-top: auto;
+  }
+  
+  .card:hover {
+    transform: translateY(-10px);
+    box-shadow: 2px 2px 15px rgba(0,0,0,.3);
+  }
 /* ===== TEAM ====== */
 
 .team__container {

assets/js/main.js

@@ -37,10 +37,10 @@ const sr = ScrollReveal({
 });
 
 
-sr.reveal(`.home__data, .home__img, .about__img,
-            .about__subtitle, .about__profession, .about__text, .about__social,
-            .team__card, .team__content,
-            .join__preview, .join__text, .join__button,
-            .footer__content, .footer__copy`, {
-    interval: 200
-})
+// sr.reveal(`.home__data, .home__img, .about__img,
+//             .about__subtitle, .about__profession, .about__text, .about__social,
+//             .team__card, .team__content,
+//             .join__preview, .join__text, .join__button,
+//             .footer__content, .footer__copy`, {
+//     interval: 200
+// })

index.html

@@ -81,6 +81,52 @@ <h2 class="about__subtitle">SurPath Community</h2>
             </div>
         </section>
 
+        <!-- ====== PROJECTS =======-->
+        <section class="cards section">
+            
+            <div class="card">
+              <div class="card__image" style="background-image: url('http://placeimg.com/640/480/any')"></div>
+              <div class="content">
+                <div class="card__title">A Card Title</div>
+                <div class="card__snippet">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
+                <a class="card__button" href="">Button</a> 
+              </div>
+              
+            </div>
+            
+            <div class="card">
+              <div class="card__image" style="background-image: url('http://placeimg.com/640/480/any')"></div>
+              <div class="content">
+                <div class="card__title">A Card Title</div>
+                <div class="card__snippet">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
+                <a class="card__button" href="">Button</a>
+              </div>
+              
+            </div>
+            
+            <div class="card">
+              <div class="card__image" style="background-image: url('http://placeimg.com/640/480/any')"></div>
+              <div class="content">
+                <div class="card__title">A Card Title</div>
+                <div class="card__snippet">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
+                <a class="card__button" href="">Button</a>
+              </div>
+            </div>
+
+            <div class="card">
+                <div class="card__image" style="background-image: url('http://placeimg.com/640/480/any')"></div>
+                <div class="content">
+                  <div class="card__title">A Card Title</div>
+                  <div class="card__snippet">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
+                  <a class="card__button" href="">Button</a>
+                </div>
+                
+              </div>
+            
+            
+            
+          </section>
+
         <!-- ====== TEAM =======-->
         <section class="team section bd-grid" id="team">
             <h2 class="section-title">Our Team</h2>