Board of directors 2020 update

static/css/about.css

@@ -90,6 +90,34 @@
   font-family: archivo-black;
   color: #403e41;
 }
+.about-content .scene-container {
+  overflow: hidden;
+  width: 37%;
+  background-color: #f0f0f0;
+  min-height: 50vh;
+}
+@media screen and (max-width: 1023px) {
+  .about-content .scene-container {
+    width: 100%;
+  }
+}
+.about-content object {
+  overflow-x: hidden;
+  display: none;
+  width: 100%;
+  height: 100%;
+}
+.about-content object.active {
+  display: block;
+}
+.about-content iframe {
+  display: none;
+}
+@media screen and (max-width: 1024px) {
+  .about-content iframe.active {
+    display: block;
+  }
+}
 .about-content figure {
   width: 37%;
   align-self: center;

static/css/home.css

@@ -107,8 +107,8 @@ section .description p {
 #home .description {
   overflow-x: hidden;
 }
-#home .description p,
-#home .description button {
+#home .description button,
+#home .description p {
   position: relative;
   left: 0;
   opacity: 1;
@@ -134,9 +134,9 @@ section .description p {
 #home .description button {
   transition-delay: 1000ms;
 }
+#home .description.hide button,
 #home .description.hide h3,
-#home .description.hide p,
-#home .description.hide button {
+#home .description.hide p {
   left: 10%;
   opacity: 0;
 }
@@ -152,8 +152,7 @@ section .description p {
 @media screen and (max-width: 1024px) {
   #home button {
     display: block;
-    margin: 0 auto;
-    margin-bottom: 40px;
+    margin: 0 auto 40px;
   }
 }
 #home button .fas {
@@ -167,19 +166,19 @@ section .description p {
   left: 10px;
 }
 
-#home,
-#about {
+#about,
+#home {
   position: relative;
 }
 @media screen and (max-width: 1024px) {
-  #home,
-#about {
+  #about,
+#home {
     padding-top: 100px;
   }
 }
 @media screen and (max-width: 1024px) {
-  #home h3,
-#about h3 {
+  #about h3,
+#home h3 {
     position: absolute;
     top: 35px;
     left: 50%;
@@ -397,8 +396,8 @@ section .description p {
   height: 140px;
   overflow: hidden;
 }
-#branches .owl-branches .owl-item-branches .description .person-name,
-#branches .owl-branches .owl-item-branches .description .person-info {
+#branches .owl-branches .owl-item-branches .description .person-info,
+#branches .owl-branches .owl-item-branches .description .person-name {
   font-size: 14px;
   font-weight: bold;
 }
@@ -590,8 +589,8 @@ section .description p {
   font-weight: bold;
   font-size: 16px;
 }
-#contact .inner-container .description-container li address,
-#contact .inner-container .description-container li .contact-content {
+#contact .inner-container .description-container li .contact-content,
+#contact .inner-container .description-container li address {
   width: 70%;
 }
 #contact .inner-container .description-container li .contact-content {
@@ -654,13 +653,14 @@ section .description p {
   color: white;
   text-decoration: underline;
   font-size: 14px;
-  margin: 0 0 10px 0;
+  margin: 0 0 10px;
 }
 .toast ul li.highlight {
   animation: glow 1.5s infinite linear;
   font-weight: 600;
   font-size: 16px;
 }
+
 @keyframes glow {
   0% {
     color: white;

static/css/loans.css

@@ -69,11 +69,6 @@
 .service-content object.active {
   display: block;
 }
-@media screen and (max-width: 1024px) {
-  .service-content object.active {
-    display: none;
-  }
-}
 .service-content iframe {
   display: none;
 }

static/scss/about.scss

@@ -54,7 +54,7 @@
             @media screen and (max-width: 1024px) {
                 width: 100%;
             }
-            
+
             p {
                 width: 100%;
             }
@@ -68,7 +68,39 @@
                 font-size: $heading_size;
                 font-family: archivo-black;
                 color: $dark_brown;
-            } 
+            }
+        }
+    }
+
+    .scene-container {
+        overflow: hidden;
+        width: 37%;
+        background-color: $lightest_gray;
+        min-height: 50vh;
+
+        @media screen and (max-width: 1023px) {
+            width: 100%;
+        }
+    }
+
+    object {
+        overflow-x: hidden;
+        display: none;
+        width: 100%;
+        height: 100%;
+
+        &.active {
+            display: block;
+        }
+    }
+
+    iframe {
+        display: none;
+
+        @media screen and (max-width: 1024px) {
+            &.active {
+                display: block;
+            }
         }
     }
 
@@ -172,7 +204,7 @@
 		margin: 20px auto;
 		text-align: center;
 		padding: 20px 0;
-	
+
 		i {
 			font-size: 16px;
 			padding: 0 10px;
@@ -180,4 +212,4 @@
 			cursor: pointer;
 		}
 	}
-}
+}

static/scss/loans.scss

@@ -48,10 +48,6 @@
 
         &.active {
             display: block;
-
-            @media screen and (max-width: 1024px) { 
-                display: none;
-            }
         }
     }
 
@@ -87,4 +83,4 @@
             }
         }
     }
-}
+}

templates/about.html

@@ -11,9 +11,11 @@
 </section>
 <section class="about-content">
     <div class="inner-container">
-        <figure>
-            <img src="{% static 'images/edits/founders.jpg' %}" alt="">
-        </figure>
+        <div class="scene-container">
+            <object data="{% static 'files/board_of_dir_2020.pdf' %}" type="application/pdf" style="width:100%; height:100%;" class="active" data-scene-target = "sales">
+                <embed src="{% static 'files/board_of_dir_2020.pdf' %}" type="application/pdf" />
+            </object>
+        </div>
         <div class="description">
             <div class="heading"><mark>About</mark> BCB</div>
             <h3>Brief History</h3>

templates/deposit.html

@@ -23,4 +23,4 @@
 
 {% block scripts %}
 <script src="{% static 'js/service.js' %}" ></script>
-{% endblock scripts %}
+{% endblock scripts %}

templates/loans.html

@@ -47,4 +47,4 @@
 
 {% block scripts %}
 <script src="{% static 'js/service.js' %}" ></script>
-{% endblock scripts %}
+{% endblock scripts %}