Adding some CSS changes

index.html

@@ -26,9 +26,9 @@
     </div>
       
 <div id="slider">
-    <div class="item"><img src="../Project/buildings/buildings/1.png"  alt="building"></div>
+    <div class="item" id="spl1"><img src="../Project/buildings/buildings/1.png"  alt="building"></div>
-    <div class="item"><img src="../Project/buildings/buildings/2.png"  alt="building"></div>
+    <div class="item" ><img src="../Project/buildings/buildings/2.png"  alt="building"></div>
-    <div class="item"><img src="../Project/buildings/buildings/3.png"  alt="building"></div>
+    <div class="item" id="spl3"><img src="../Project/buildings/buildings/3.png"  alt="building"></div>
     <div class="item"><img src="../Project/buildings/buildings/4.png"  alt="building"></div>
     <div class="item"><img src="../Project/buildings/buildings/5.png"  alt="building"></div>
         </div>

jquery.bxslider.css

@@ -21,10 +21,10 @@
 ul.bxslider {
   list-style: none;
 }
-.bx-viewport {
+/*.bx-viewport {
-  /*fix other elements on the page moving (on Chrome)*/
+  fix other elements on the page moving (on Chrome)
   -webkit-transform: translatez(0);
-}
+}*/
 /** THEME
 ===================================*/
 .bx-wrapper {

myScript1.js

@@ -16,6 +16,7 @@ $(document).ready(function(){
  $('#slider').bxSlider({
     auto: true,
              controls: true,
+             slideMargin: 70,
              infiniteLoop: true,
              mode: 'horizontal',
              autoDirection: 'next',
@@ -25,18 +26,18 @@ $(document).ready(function(){
              randomStart: false,
              pager: false,
              moveSlideQty: 1,
-useCSS: false,
+             adaptiveHeight:true,
-speed: 750,
+             useCSS: false,
-hideControlOnEnd: true,
+             speed: 750,
-    slideSelector: 'div.item',
+             slideSelector: 'div.item',
-    minSlides: 3,
+             minSlides: 3,
-    maxSlides: 3,
+             maxSlides: 3,
-    moveSlides: 1,
+             moveSlides: 1,
-    slideWidth: 1000,
+             slideWidth: 1000,
-    nextSelector: '#slider-next',
+             nextSelector: '#slider-next',
-    prevSelector: '#slider-prev',
+             prevSelector: '#slider-prev',
-    nextText: '<i class="fa fa-arrow-circle-right fa-3x"></i>',
+             nextText: '<i class="fa fa-arrow-circle-right fa-3x"></i>',
-        prevText: '<i class="fa fa-arrow-circle-left fa-3x"></i>'
+             prevText: '<i class="fa fa-arrow-circle-left fa-3x"></i>'
 
   });
 });

mystyle.css

@@ -9,6 +9,14 @@
     float: left;
 }
 
+#spl1 {
+  margin-top: 170px;
+}
+
+#spl3 {
+  margin-top: 40px;
+}
+
  .item {
   float: left;
   width: 100%;
@@ -24,19 +32,24 @@
   top: 0;
 }
 
-  
+@font-face {
+  font-family: myFirstFont;
+  src: url(assets/fonts/Merriweather/Merriweather-Black.ttf);
+} 
 
 
 #black {
    color: black;
-   font-family: Verdana;
+   font-family: myFirstFont;
-   font-style: bold;
+   font-stretch: wider;
+   font-size: larger;
 }
 
 #white {
    color: white;
-   font-family: Verdana;
+   font-family: myFirstFont;
-   font-style: bold;
+   font-stretch: wider;
+   font-size: larger;
 }
 
 #CG {
@@ -45,7 +58,7 @@
 }
 
 #myProgress {
-    width: 50%;
+    width: 30%;
     background-color: grey;
   }