UI fixes

bcb/settings.py

@@ -25,7 +25,7 @@ SECRET_KEY = '6c+@l58@$0nky8p2dm-$9a)!yr=7p!*1#q=ff@g#g*1&gx+@h+'
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = True
 
-ALLOWED_HOSTS = []
+ALLOWED_HOSTS = ['*']
 
 
 # Application definition

static/css/about.css

@@ -49,12 +49,17 @@
 }
 
 .about-content {
-  width: 90%;
   margin: 50px auto;
+  line-height: 1.8;
+  letter-spacing: 0.8px;
+  color: #808285;
+  border-bottom: 1px solid #f1f1f1;
 }
 .about-content .inner-container {
   display: flex;
   justify-content: space-between;
+  width: 90%;
+  margin: 0 auto;
 }
 .about-content .inner-container .description {
   width: 60%;
@@ -63,18 +68,32 @@
   justify-content: space-between;
   flex-direction: column;
 }
+.about-content .inner-container .description p {
+  width: 100%;
+}
+.about-content .inner-container .description marked {
+  color: #28aae2;
+}
 .about-content .inner-container .description .heading {
   font-weight: bold;
   font-size: 36px;
+  font-family: archivo-black;
+  color: #403e41;
 }
 .about-content figure {
-  width: 30%;
+  width: 37%;
+  align-self: center;
+  display: flex;
 }
 .about-content figure img {
   width: 100%;
+  align-self: center;
 }
 .about-content p {
   margin-top: 30px;
+  width: 90%;
+  margin: 30px auto 0;
+  padding-bottom: 50px;
 }
 
 #our-team {
@@ -85,6 +104,18 @@
   font-size: 36px;
   color: #403e41;
   text-align: center;
+  font-family: archivo-black;
+}
+#our-team h3 marked {
+  color: #28aae2;
+  display: inline;
+}
+#our-team marked {
+  color: #28aae2;
+  padding: 10px 0 0;
+  text-align: center;
+  display: block;
+  font-weight: bold;
 }
 #our-team .owl-team {
   margin: 50px 0;

static/css/service.css

@@ -69,7 +69,6 @@
   display: block;
 }
 .service-content ul {
-  border: 1px solid #d2d4d5;
   width: 25%;
   display: flex;
   flex-direction: column;
@@ -78,10 +77,11 @@
 .service-content ul li {
   list-style: none;
   padding: 10% 0;
-  border-bottom: 1px solid #808285;
-  color: #403e41;
+  border-bottom: 2px solid white;
   text-align: center;
   cursor: pointer;
+  background-color: #fcfcfc;
+  color: #808285;
 }
 .service-content ul li.active {
   background-color: #28aae2;

static/scss/about.scss

@@ -28,12 +28,17 @@
 }
 
 .about-content {
-    width: 90%;
     margin: 50px auto;
+    line-height: 1.8;
+    letter-spacing: 0.8px;
+    color: #808285;
+    border-bottom: 1px solid #f1f1f1;
 
     .inner-container {
         display: flex;
         justify-content: space-between;
+        width: 90%;
+        margin: 0 auto;
 
         .description {
             width: 60%;
@@ -41,24 +46,40 @@
             display: flex;
             justify-content: space-between;
             flex-direction: column;
+            
+            p {
+                width: 100%;
+            }
+
+            marked {
+                color: $blue;
+            }
 
             .heading {
                 font-weight: bold;
                 font-size: $heading_size;
+                font-family: archivo-black;
+                color: $dark_brown;
             } 
         }
     }
 
     figure {
-        width: 30%;
+        width: 37%;
+        align-self: center;
+        display: flex;
 
         img {
             width: 100%;
+            align-self: center;
         }
     }
 
     p {
         margin-top: 30px;
+        width: 90%;
+        margin: 30px auto 0;
+        padding-bottom: 50px;
     }
 }
 
@@ -70,6 +91,20 @@
         font-size: $heading_size;
         color: $dark_brown;
         text-align: center;
+        font-family: archivo-black;
+
+        marked {
+            color: $blue;
+            display: inline;
+        }
+    }
+
+    marked {
+        color: $blue;
+        padding: 10px 0 0;
+        text-align: center;
+        display: block;
+        font-weight: bold;
     }
 
     .owl-team {

static/scss/service.scss

@@ -51,7 +51,6 @@
     }
 
     ul {
-        border: 1px solid $light_gray;
         width: 25%;
         display: flex;
         flex-direction: column;
@@ -60,10 +59,11 @@
         li {
             list-style: none;
             padding: 10% 0;
-            border-bottom: 1px solid $dark_gray;
-            color: $dark_brown;
+            border-bottom: 2px solid white;
             text-align: center;
             cursor: pointer;
+            background-color: #fcfcfc;
+            color: #808285;
 
             &.active {
                 background-color: $blue;

templates/about.html

@@ -19,7 +19,7 @@
             <img src="{% static 'images/cover-image.jpg' %}" alt="">
         </figure>
         <div class="description">
-            <div class="heading">Hello, Bankers!</div>
+            <div class="heading"><marked>About</marked> BCB</div>
             <p>
                 Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
                 Delectus, incidunt! Illum blanditiis quas rem in adipisci 
@@ -58,12 +58,13 @@
     </p>
 </section>
 <section id="our-team">
-    <h3>Our Team</h3>
+    <h3>Our <marked>Team</marked></h3>
    <div class="owl-carousel owl-team">
         <section class="section-container">
             <figure>
                 <img src="{% static 'images/cover-image.jpg' %}" alt="">
             </figure>
+            <marked>Joseph</marked>
             <p>
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, consequuntur!
             </p>
@@ -72,6 +73,7 @@
             <figure>
                 <img src="{% static 'images/cover-image.jpg' %}" alt="">
             </figure>
+            <marked>Joseph</marked>
             <p>
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, consequuntur!
             </p>
@@ -80,6 +82,7 @@
             <figure>
                 <img src="{% static 'images/cover-image.jpg' %}" alt="">
             </figure>
+            <marked>Joseph</marked>
             <p>
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, consequuntur!
             </p>
@@ -88,6 +91,7 @@
             <figure>
                 <img src="{% static 'images/cover-image.jpg' %}" alt="">
             </figure>
+            <marked>Joseph</marked>
             <p>
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, consequuntur!
             </p>
@@ -96,6 +100,7 @@
             <figure>
                 <img src="{% static 'images/cover-image.jpg' %}" alt="">
             </figure>
+            <marked>Joseph</marked>
             <p>
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, consequuntur!
             </p>

templates/home.html

@@ -116,7 +116,7 @@
 			<li>
 				<a href="/service" class="inner-contents">
 					<img src="{% static 'images/car.svg' %}" alt="">
-					<div class="title">Sales &amp; Trading</div>
+					<div class="title">ATM Services</div>
 					<p>	Lorem ipsum dolor sit amet,
 						consectetur adipiscing elit, sed
 						do eiusmod tempor
@@ -126,7 +126,7 @@
 			<li>
 				<a href="/service" class="inner-contents">
 					<img src="{% static 'images/payment-method.svg' %}" alt="">
-					<div class="title">Financial Advisors</div>
+					<div class="title">ABB Services</div>
 					<p>	Lorem ipsum dolor sit amet,
 						consectetur adipiscing elit, sed
 						do eiusmod tempor
@@ -136,7 +136,7 @@
 			<li>
 				<a href="/service" class="inner-contents">
 					<img src="{% static 'images/economic-growth.svg' %}" alt="">
-					<div class="title">Investment Planning</div>
+					<div class="title">Deposits</div>
 					<p>	Lorem ipsum dolor sit amet,
 						consectetur adipiscing elit, sed
 						do eiusmod tempor
@@ -146,7 +146,7 @@
 			<li>
 				<a href="/service" class="inner-contents">
 					<img src="{% static 'images/bank-building.svg' %}" alt="">
-					<div class="title">Tax Consulting</div>
+					<div class="title">Loans</div>
 					<p>	Lorem ipsum dolor sit amet,
 						consectetur adipiscing elit, sed
 						do eiusmod tempor
@@ -156,37 +156,7 @@
 			<li>
 				<a href="/service" class="inner-contents">
 					<img src="{% static 'images/car.svg' %}" alt="">
-					<div class="title">Sales &amp; Trading</div>
-					<p>	Lorem ipsum dolor sit amet,
-						consectetur adipiscing elit, sed
-						do eiusmod tempor
-					</p>
-				</a>
-			</li>
-			<li>
-				<a href="/service" class="inner-contents">
-					<img src="{% static 'images/payment-method.svg' %}" alt="">
-					<div class="title">Financial Advisors</div>
-					<p>	Lorem ipsum dolor sit amet,
-						consectetur adipiscing elit, sed
-						do eiusmod tempor
-					</p>
-				</a>
-			</li>
-			<li>
-				<a href="/service" class="inner-contents">
-					<img src="{% static 'images/economic-growth.svg' %}" alt="">
-					<div class="title">Investment Planning</div>
-					<p>	Lorem ipsum dolor sit amet,
-						consectetur adipiscing elit, sed
-						do eiusmod tempor
-					</p>
-				</a>
-			</li>
-			<li>
-				<a href="/service" class="inner-contents">
-					<img src="{% static 'images/bank-building.svg' %}" alt="">
-					<div class="title">Tax Consulting</div>
+					<div class="title">Advance</div>
 					<p>	Lorem ipsum dolor sit amet,
 						consectetur adipiscing elit, sed
 						do eiusmod tempor

templates/service.html

@@ -15,13 +15,12 @@
 </section>
 <section class="service-content">
     <ul class="side-content">
-        <li data-tab = "sales" class="active">Sales &amp; Trading</li>
-        <li data-tab = "financial">Financial Advisors</li>
-        <li data-tab = "investment">Investment Planning</li>
-        <li data-tab = "tax">Tax Consultants</li>
-        <li data-tab = "loan">Financial Advisors</li>
-        <li data-tab = "consultant">Tax Consultants</li>
-        <li data-tab = "planning">Investment Planning</li>
+        <li data-tab = "sales" class="active">Mortage &amp; Loan</li>
+        <li data-tab = "financial">Unsecured Loans</li>
+        <li data-tab = "investment">Plant &amp; Machinery Loans</li>
+        <li data-tab = "tax">Vehicle Loans</li>
+        <li data-tab = "loan">Loan On Gold Ornaments</li>
+        <li data-tab = "consultant">Loan on Government Securities</li>
     </ul>
     <div class="scene-container">
         <object data="{% static 'files/sample-1.pdf' %}" type="application/pdf" style="width:100%; height:100%;" class="active" data-scene-target = "sales">
@@ -42,9 +41,6 @@
         <object data="{% static 'files/sample-2.pdf' %}" type="application/pdf" style="width:100%; height:100%;" data-scene-target = "consultant">
             <embed src="{% static 'files/sample-2.pdf' %}" type="application/pdf" />
         </object>
-        <object data="{% static 'files/sample-1.pdf' %}" type="application/pdf" style="width:100%; height:100%;" data-scene-target = "planning">
-            <embed src="{% static 'files/sample-1.pdf' %}" type="application/pdf" />
-        </object>
     </div>
 </section>
 {% endblock content %}