refactor structure for committee block to bootstrap

diff --git a/static/css/style.css b/static/css/style.css
index 00fe1278628847c213e4fd6e43e2743fdb9eb547..438205dfc9ac4f19b205816f8f55fe02f41bea87 100644 (file)
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -42,7 +42,6 @@ h3 {
 footer {
   background-color: #F5F5F5;
   padding: 5rem;
-  margin-top: 4rem;
   text-align: center;
 }
 
@@ -58,14 +57,9 @@ footer {
   overflow: hidden;
   background:#34495e;
   padding:60px;
-  display:flex;
 }
 
-.our-team{
-  margin-top: 100px;
-}
-
-.our-team .pic{
+  .team-section .pic{
       display: inline-block;
       width: 85%;
       height: 85%;
@@ -74,20 +68,13 @@ footer {
       transition: all 0.5s ease 0s;
   }
 
-  .pic img{
+  .team-section .pic img{
       width: 100%;
       height: auto;
       border-radius: 50%;
   }
 
-  .our-team .title{
-      display: block;
-      font-size: 15px;
-      font-weight: 600;
-      color: white;
-      margin: 0 0 7px 0;
-  }
-  .our-team .post{
+  .team-section .post{
       display: block;
       font-size: 15px;
       color: #17bebb;
@@ -119,6 +106,10 @@ footer {
       margin-top: 4rem;
   }
 
+  .jumbotron h2 {
+      color: #fff;
+  }
+
   /* NAVIGATION */
 
    .navbar-fixed-top {

diff --git a/templates/pages/index.html b/templates/pages/index.html
index 100f9bf1e00f4f5a6a0389eb04b59d3fce5d75e6..7e64826b94d3784109e6e5773b821b91c96fb224 100644 (file)
--- a/templates/pages/index.html
+++ b/templates/pages/index.html
@@ -38,63 +38,64 @@
 </div>
 
 <div class="jumbotron">
+  <div class="team-section">
+    <div class="container-fluid">
+      <div class="row">
 
+        <h2>Our Committee</h2>
 
-    <div class="team-section">
+        <div class="col-sm-2">
+          <div class="pic">
+            <img src="../../static/images/team1.jpg">
+          </div>
+          <h3 class="title">Tyson Clugg</h3>
+          <span class="post">President</span>
 
-      <h2>Our Committee</h2>
-
-      <div class="our-team">
-        <div class="pic">
-          <img src="../../static/images/team1.jpg">
         </div>
-        <h3 class="title">Tyson Clugg</h3>
-        <span class="post">President</span>
-
-      </div>
 
-      <div class="our-team">
-        <div class="pic">
-          <img src="../../static/images/team2.jpg">
+        <div class="col-sm-2">
+          <div class="pic">
+            <img src="../../static/images/team2.jpg">
+          </div>
+          <h3 class="title">Andrea Cucciniello</h3>
+          <span class="post">Secretary</span>
         </div>
-        <h3 class="title">Andrea Cucciniello</h3>
-        <span class="post">Secretary</span>
-      </div>
 
-      <div class="our-team">
-        <div class="pic">
-          <img src="../../static/images/team3.jpg">
+        <div class="col-sm-2">
+          <div class="pic">
+            <img src="../../static/images/team3.jpg">
+          </div>
+          <h3 class="title">Gary Evans</h3>
+          <span class="post">Committee Member</span>
         </div>
-        <h3 class="title">Gary Evans</h3>
-        <span class="post">Committee Member</span>
-      </div>
 
-      <div class="our-team">
-        <div class="pic">
-          <img src="../../static/images/team4.jpg">
+        <div class="col-sm-2">
+          <div class="pic">
+            <img src="../../static/images/team4.jpg">
+          </div>
+          <h3 class="title">Rajni Baliyan</h3>
+          <span class="post">Committee Member</span>
         </div>
-        <h3 class="title">Rajni Baliyan</h3>
-        <span class="post">Committee Member</span>
-      </div>
 
-      <div class="our-team">
-        <div class="pic">
-          <img src="../../static/images/team5.jpg">
+        <div class="col-sm-2">
+          <div class="pic">
+            <img src="../../static/images/team5.jpg">
+          </div>
+          <h3 class="title">James Sewell</h3>
+          <span class="post">Sponsorship Officer</span>
         </div>
-        <h3 class="title">James Sewell</h3>
-        <span class="post">Sponsorship Officer</span>
-      </div>
 
-      <div class="our-team">
-        <div class="pic">
-          <img src="../../static/images/team6.jpg">
+        <div class="col-sm-2">
+          <div class="pic">
+            <img src="../../static/images/team6.jpg">
+          </div>
+          <h3 class="title">Randal McDonnell</h3>
+          <span class="post">Treasurer</span>
         </div>
-        <h3 class="title">Randal McDonnell</h3>
-        <span class="post">Treasurer</span>
-      </div>
 
+      </div>
     </div>
-
+  </div>
 </div>
 
 {%endblock%}