People's Cards UI fix v2

kerner-lab · Sep 30, 2024 · 3523204 · 3523204
1 parent 69328b9
commit 3523204
Showing 1 changed file with 47 additions and 23 deletions.
diff --git a/people.html b/people.html
@@ -53,7 +53,7 @@
   align-items: center;
   min-height: 100vh;
 
-  background: #a4bdb7;
+  /* background: #a4bdb7; */
 }
 
 /* Content-1:Start */
@@ -223,6 +223,7 @@
 </style>
 <section class="people">
     <h1>{{ page.title }}</h1>
+
     <div class="people-list">
         {% for person in sorted_people_en %}
         <div class="person-card">
@@ -244,11 +245,54 @@ <h3>{{ person.name }}</h3>
                 <i>{{ person.affiliation }}</i>
             </p>
             {% endif %}
+        </div>
+        {% endfor %}
+    </div>
+
 
+    <div>
+        {% for person in sorted_people_en %}
+        <div class="box1 box">
+            <div class="content">
+                <div class="image">
+                    <img src="{{ '/assets/img/' | append: person.photo }}" alt="{{ person.name }}">
+                </div>
+                <div class="level">
+                    {% if person.role == 'Professor' %}
+                    <p>PRO</p>
+                    {% else %}
+                    <p>{{ person.role | upcase }}</p>
+                    {% endif %}
+                </div>
+                <div class="text">
+                    <p class="name">{{ person.name }}</p>
+                    {% if person.role == 'Student' %}
+                    <p class="job_title">{{ person.program }} <i>( {{ person.completion_date }} )</i></p>
+                    {% elsif person.role == 'Professor' %}
+                    <p class="job_title">{{ person.title }}</p>
+                    <p class="job_discription">{{ person.affiliation }}</p>
+                    {% else %}
+                    <p class="job_title">{{ person.role }}</p>
+                    {% endif %}
+                </div>
+                <div class="button">
+                    <div>
+                        <button class="message" type="button">Project</button>
+                    </div>
+                    {% if person.link %}
+                    <div>
+                        <a href="{{ person.link }}">
+                            <button class="connect" type="button">Connect</button>
+                        </a>
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
         </div>
         {% endfor %}
     </div>
 
+
     <div class="box1 box">
         <div class="content">
           <div class="image">
@@ -262,35 +306,15 @@ <h3>{{ person.name }}</h3>
             <p class="job_title">UI / UX Designer</p>
             <p class="job_discription">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam atque, ipsam a amet laboriosam eligendi.</p>
           </div>
-          <div class="icons">
-            <button>
-              <ion-icon name="logo-dribbble"></ion-icon>
-            </button>
-            <button>
-              <ion-icon name="logo-instagram"></ion-icon>
-            </button>
-            <button>
-              <ion-icon name="logo-twitter"></ion-icon>
-            </button>
-            <button>
-              <ion-icon name="logo-linkedin"></ion-icon>
-            </button>
-            <button>
-              <ion-icon name="logo-facebook"></ion-icon>
-            </button>
-            <button>
-              <ion-icon name="logo-behance"></ion-icon>
-            </button>
-          </div>
           <div class="button">
             <div>
-              <button class="message" type="button">Message</button>
+              <button class="message" type="button">Project</button>
             </div>
             <div>
               <button class="connect" type="button">Connect</button>
             </div>
           </div>
         </div>
     </div>
-    
+
 </section>