senaduka/old-saburly-website2
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Optimize images & stuff

Browse Source
This commit is contained in:
Edin Dazdarevic
2017-10-06 15:00:59 +02:00
parent 8f44e80ec7
commit f4927f9c8a
81 changed files with 561 additions and 858 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
index.html
View File

@@ -8,15 +8,16 @@
<title>Saburly</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/owl.carousel.css">
<link href="css/animate.css" rel="stylesheet">
<!-- <link href="css/animate.css" rel="stylesheet"> -->
<!-- <link href="dist/all.css" rel="stylesheet"> -->
@@ -44,7 +45,7 @@
<span></span>
</div>
</button>
<a class="navbar-brand animated123" href="#"><img src="img/logo.svg" class="img-responsive hidden-xs" alt="logo"><img src="img/logo_mobile.svg" class="img-responsive visible-xs" alt="logo"></a>
<a class="navbar-brand 123" href="#"><img src="img/logo.svg" class="img-responsive hidden-xs" alt="logo"><img src="img/logo_mobile.svg" class="img-responsive visible-xs" alt="logo"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
@@ -67,7 +68,7 @@
<div class="container">
<div class="row">
<div class="col-md-12 header-wrap">
<img src="img/logo.svg" class="img-responsive center-block visible-xs" alt="suburly">
<img src="img/logo@3x.svg" class="img-responsive center-block visible-xs" alt="suburly">
<h1>WE DESIGN AND BUILD<br> SOFTWARE</h1>
</div>
</div>
@@ -97,9 +98,10 @@
<img src="img/brush.png" class="img-responsive brush hidden-xs" alt="brush">
<img src="img/brush-shadow.png" class="img-responsive brush-shadow hidden-xs" alt="brush-shadow" >
<img src="img/what_we_do/Mobile_Development_mobile_parallax@2x.png" class="img-responsive visible-xs full-width-img" alt="ui-webdesign">
<!-- <img src="img/brush2.png" class="img-responsive brush visible-xs" alt="brush"> -->
<!-- <img src="img/brush-shadow2.png" class="img-responsive brush-shadow visible-xs" alt="brush-shadow" > -->
<img src="img/what_we_do/ux/main.png" class="img-responsive visible-xs full-width-img" alt="ui-webdesign">
<img src="img/what_we_do/ux/brush.svg" class="img-responsive brush visible-xs" alt="brush">
<img src="img/what_we_do/ux/brush_shadow.svg" class="img-responsive brush-shadow visible-xs" alt="brush-shadow" >
</div>
</div>
<div class="col-md-6 col-sm-6">
@@ -114,11 +116,9 @@
<div class="row space200">
<div class="col-md-6 col-sm-6 visible-xs mob-pad0">
<div class="img-container">
<img src="img/what_we_do/software_development_mobile.svg" class="img-responsive visible-xs full-width-img" alt="software_development">
<!-- <img src="img/box2.png" class="img-responsive box-img visible-xs " alt="box"> -->
<!-- <img src="img/box-shadow2.png" class="img-responsive box-img-shadow visible-xs" alt="box-shadow" > -->
<img src="img/what_we_do/web/main.png" class="img-responsive visible-xs full-width-img" alt="software_development">
<img src="img/what_we_do/web/code.png" class="img-responsive box-img visible-xs " alt="box">
<img src="img/what_we_do/web/code_shadow.png" class="img-responsive box-img-shadow visible-xs" alt="box-shadow" >
</div>
</div>
<div class="col-md-6 col-sm-6 ">
@@ -142,12 +142,14 @@
<div class="col-md-6 col-sm-6 mob-pad0">
<div class="img-container">
<img src="img/mob-development.png" class="img-responsive outline-shadow full-width-img hidden-xs" alt="mob-development">
<img src="img/hand.png" class="img-responsive hand hidden-xs" alt="hand">
<img src="img/hand-shadow.png" class="img-responsive hand-shadow hidden-xs" alt="hand-shadow" >
<img src="img/what_we_do/mobile_development_mobile.svg" class="img-responsive visible-xs full-width-img" alt="mob-development">
<!-- <img src="img/hand2.png" class="img-responsive hand visible-xs" alt="hand"> -->
<!-- <img src="img/hand-shadow2.png" class="img-responsive hand-shadow visible-xs" alt="hand-shadow" > -->
<img src="img/what_we_do/mobile/main.png" class="img-responsive visible-xs full-width-img" alt="mob-development">
<img src="img/what_we_do/mobile/hand.svg" class="img-responsive hand visible-xs" alt="hand">
<img src="img/what_we_do/mobile/hand_shadow.svg" class="img-responsive hand-shadow visible-xs" alt="hand-shadow" >
</div>
</div>
<div class="col-md-6 col-sm-6">
@@ -174,13 +176,13 @@
<p class="tag-line text-center space20">We collaborate closely with our clients at each step of the development<br class="hidden-xs hidden-sm"> process. From designing the UX to developing the front-end and <br class="hidden-xs hidden-sm">architecting the back-end.</p>
<div class="row text-center space90">
<div class="col-md-6 col-sm-6 border-box animated" data-animation="slideInLeft" data-animation-delay="0">
<div class="col-md-6 col-sm-6 border-box " data-animation="slideInLeft" data-animation-delay="0">
<img src="img/how_we_work/high_quality_code.svg" class="img-responsive center-block" alt="icon1">
<h4 class="heading-tag">High quality code</h4>
<p class="details2">We have deep understanding of software engineering & computer science and we know what it takes to write high-quality, performant and maintainable code. Clean, readable, robust code is something we strive for.</p>
<a class="readmore visible-xs">Read more</a>
</div>
<div class="col-md-6 col-sm-6 border-box animated space-left" data-animation="slideInRight">
<div class="col-md-6 col-sm-6 border-box space-left" data-animation="slideInRight">
<img src="img/how_we_work/continuous_delivery.svg" class="img-responsive center-block" alt="icon2">
<h4 class="heading-tag">Continuous delivery</h4>
<p class="details2">Deploying new code to production should not take weeks. We know how to build pipelines that allow code changes to be pushed to different cloud environments automatically. Deploying to production is as easy as pressing a button.</p>
@@ -188,14 +190,14 @@
</div>
</div>
<div class="row text-center">
<div class="col-md-6 col-sm-6 border-box animated space-top" data-animation="slideInLeft">
<div class="col-md-6 col-sm-6 border-box space-top" data-animation="slideInLeft">
<img src="img/how_we_work/modern_devops.svg" class="img-responsive center-block" alt="icon3">
<h4 class="heading-tag">Modern DevOps</h4>
<p class="details2">We like a "release early, release often" philosophy and to achieve this we use modern DevOps tools like Docker. But DevOps is not only about development
and operations, it is also about quality. Automated testing is part of our continuous delivery process, deploying code with a high confidence level</p>
<a class="readmore visible-xs">Read more</a>
</div>
<div class="col-md-6 col-sm-6 pad0 border-box animated space-top-left" data-animation="slideInRight">
<div class="col-md-6 col-sm-6 pad0 border-box space-top-left" data-animation="slideInRight">
<img src="img/how_we_work/code_reviews.svg" class="img-responsive center-block" alt="icon4">
<h4 class="heading-tag">Code reviews</h4>
<p class="details2">“Two Heads are Better Than One”. Code reviews are integrated part of our process which makes catching bugs early before they event get merged into the main repository. We make sure each change is reviewed by multiple people before shipping it to the production environment.</p>
@@ -203,14 +205,14 @@
</div>
</div>
<div class="row text-center">
<div class="col-md-6 col-sm-6 border-box animated space-top" data-animation="slideInLeft">
<div class="col-md-6 col-sm-6 border-box space-top" data-animation="slideInLeft">
<img src="img/how_we_work/research.svg" class="img-responsive center-block" alt="icon5">
<h4 class="heading-tag">UX testing/research</h4>
<p class="details2">We know it takes more than just an user video or a survey to understand your user experience. Designs can be improved by watching real customers interact
with your interface (websites, mobile devices, prototypes). User testing is grounded in behavioral observations to provide design insights. The research generates actionable findings to redesign your site or application.</p>
<a class="readmore visible-xs">Read more</a>
</div>
<div class="col-md-6 col-sm-6 border-box animated space-top-left" data-animation="slideInRight">
<div class="col-md-6 col-sm-6 border-box space-top-left" data-animation="slideInRight">
<img src="img/how_we_work/unit_and_integration_testing.svg" class="img-responsive center-block" alt="icon6">
<h4 class="heading-tag">Unit & Integration testing</h4>
<p class="details2">Unit and integration testing are vital parts of the testing process. Having automated unit & integration tests is the key prerequisite for writing high-quality code at a fast pace.</p>
@@ -239,32 +241,32 @@
<h2 class="med-title text-center text-white">Our work</h2>
<div class="row space50 main above_item">
<div class="col-md-6 col-sm-6 border-box2 animated" data-animation="fadeInUp">
<div class="col-md-6 col-sm-6 border-box2 " data-animation="fadeInUp">
<img src="img/zooblack.png" class="img-responsive center-block" alt="zooblack">
<p class="product">Zoblak</p>
<p class="hint">Agritech IoT Solution</p>
</div>
<div class="col-md-6 col-sm-6 border-box2 animated space-left" data-animation="fadeInUp">
<div class="col-md-6 col-sm-6 border-box2 space-left" data-animation="fadeInUp">
<img src="img/kiwi.png" class="img-responsive center-block" alt="kiwi">
<p class="product">KIVI</p>
<p class="hint">Kivi.ba - real-estate search website</p>
</div>
<div class="col-md-6 col-sm-6 border-box2 animated space-top" data-animation="fadeInUp">
<div class="col-md-6 col-sm-6 border-box2 space-top" data-animation="fadeInUp">
<img src="img/ribica.png" class="img-responsive center-block" alt="ribica">
<p class="product">Ribica</p>
<p class="hint">Online shop for baby products</p>
</div>
<div class="col-md-6 col-sm-6 border-box2 animated space-top-left" data-animation="fadeInUp">
<div class="col-md-6 col-sm-6 border-box2 space-top-left" data-animation="fadeInUp">
<img src="img/emis.png" class="img-responsive center-block" alt="emis">
<p class="product">EMIS</p>
<p class="hint">Students registry for Ministry of Education</p>
</div>
<div class="col-md-6 col-sm-6 border-box2 animated space-top" data-animation="fadeInUp">
<div class="col-md-6 col-sm-6 border-box2 space-top" data-animation="fadeInUp">
<img src="img/vsm.png" class="img-responsive center-block" alt="vsm">
<p class="product">VSM</p>
<p class="hint">Social Media Manager</p>
</div>
<div class="col-md-6 col-sm-6 border-box2 animated space-top-left" data-animation="fadeInUp">
<div class="col-md-6 col-sm-6 border-box2 space-top-left" data-animation="fadeInUp">
<img src="img/analytical.png" class="img-responsive center-block" alt="analytical">
<p class="product">Simulation Finance</p>
<p class="hint">Financial forecasting SaaS</p>
@@ -297,97 +299,97 @@
<div class="row space80 owl_id">
<div class="col-md-3 col-sm-3">
<div class="bg-color">
<img src="img/technology/amazon_webservices.svg" class="img-responsive center-block animated" data-animation="zoomIn" alt="tech1">
<img src="img/technology/amazon_webservices.svg" class="img-responsive center-block " data-animation="zoomIn" alt="tech1">
<p class="hint text-center">Amazon AWS</p>
</div>
</div>
<div class="col-md-3 col-sm-3">
<div class="bg-color">
<img src="img/technology/ruby.svg" class="img-responsive center-block animated" data-animation="zoomIn" alt="tech2">
<img src="img/technology/ruby.svg" class="img-responsive center-block " data-animation="zoomIn" alt="tech2">
<p class="hint text-center">Ruby</p>
</div>
</div>
<div class="col-md-3 col-sm-3">
<div class="bg-color">
<img src="img/technology/angular_js.svg" class="img-responsive center-block animated" data-animation="zoomIn" alt="tech3">
<img src="img/technology/angular_js.svg" class="img-responsive center-block " data-animation="zoomIn" alt="tech3">
<p class="hint text-center">Angular.js</p>
</div>
</div>
<div class="col-md-3 col-sm-3">
<div class="bg-color">
<img src="img/technology/elastic.svg" class="img-responsive center-block animated" data-animation="zoomIn" alt="tech4">
<img src="img/technology/elastic.svg" class="img-responsive center-block " data-animation="zoomIn" alt="tech4">
<p class="hint text-center">Elastic</p>
</div>
</div>
<div class="col-md-3 col-sm-3 space80">
<div class="bg-color">
<img src="img/technology/nodejs.svg" class="img-responsive center-block animated" data-animation="zoomIn" alt="tech5">
<img src="img/technology/nodejs.svg" class="img-responsive center-block " data-animation="zoomIn" alt="tech5">
<p class="hint text-center">Node.js</p>
</div>
</div>
<div class="col-md-3 col-sm-3 space80">
<div class="bg-color">
<img src="img/technology/python.svg" class="img-responsive center-block animated" data-animation="zoomIn" alt="tech6">
<img src="img/technology/python.svg" class="img-responsive center-block " data-animation="zoomIn" alt="tech6">
<p class="hint text-center">Python</p>
</div>
</div>
<div class="col-md-3 col-sm-3 space80">
<div class="bg-color">
<img src="img/technology/postgresql.svg" class="img-responsive center-block animated" data-animation="zoomIn" alt="tech7">
<img src="img/technology/postgresql.svg" class="img-responsive center-block " data-animation="zoomIn" alt="tech7">
<p class="hint text-center">Postrgresql</p>
</div>
</div>
<div class="col-md-3 col-sm-3 space80">
<div class="bg-color">
<img src="img/technology/html_5.svg" class="img-responsive center-block animated" data-animation="zoomIn" alt="tech8">
<img src="img/technology/html_5.svg" class="img-responsive center-block " data-animation="zoomIn" alt="tech8">
<p class="hint text-center">HTML 5</p>
</div>
</div>
<div class="col-md-3 col-sm-3 space80">
<div class="bg-color">
<img src="img/technology/react.svg" class="img-responsive center-block animated" data-animation="zoomIn" alt="tech9">
<img src="img/technology/react.svg" class="img-responsive center-block " data-animation="zoomIn" alt="tech9">
<p class="hint text-center">React</p>
</div>
</div>
<div class="col-md-3 col-sm-3 space80">
<div class="bg-color">
<img src="img/technology/mongodb.svg" class="img-responsive center-block animated" data-animation="zoomIn" alt="tech10">
<img src="img/technology/mongodb.svg" class="img-responsive center-block " data-animation="zoomIn" alt="tech10">
<p class="hint text-center">Mongo DB</p>
</div>
</div>
<div class="col-md-3 col-sm-3 space80">
<div class="bg-color">
<img src="img/technology/mysql.svg" class="img-responsive center-block animated" data-animation="zoomIn" alt="tech12">
<img src="img/technology/mysql.svg" class="img-responsive center-block " data-animation="zoomIn" alt="tech12">
<p class="hint text-center">My SQL</p>
</div>
</div>
<div class="col-md-3 col-sm-3 space80">
<div class="bg-color">
<img src="img/technology/rails.svg" class="img-responsive center-block animated" data-animation="zoomIn" alt="tech12">
<img src="img/technology/rails.svg" class="img-responsive center-block " data-animation="zoomIn" alt="tech12">
<p class="hint text-center">Rails</p>
</div>
</div>
<div class="col-md-3 col-sm-3 space80">
<div class="bg-color">
<img src="img/technology/docker.svg" class="img-responsive center-block animated" data-animation="zoomIn" alt="tech13">
<img src="img/technology/docker.svg" class="img-responsive center-block " data-animation="zoomIn" alt="tech13">
<p class="hint text-center">Docker</p>
</div>
</div>
<div class="col-md-3 col-sm-3 space80">
<div class="bg-color">
<img src="img/technology/es6.svg" class="img-responsive center-block animated" data-animation="zoomIn" alt="tech14">
<img src="img/technology/es6.svg" class="img-responsive center-block " data-animation="zoomIn" alt="tech14">
<p class="hint text-center">ES6</p>
</div>
</div>
<div class="col-md-3 col-sm-3 space80">
<div class="bg-color">
<img src="img/technology/redis.svg" class="img-responsive center-block animated" data-animation="zoomIn" alt="tech15">
<img src="img/technology/redis.svg" class="img-responsive center-block " data-animation="zoomIn" alt="tech15">
<p class="hint text-center">Redis</p>
</div>
</div>
<div class="col-md-3 col-sm-3 space80">
<div class="bg-color">
<img src="img/technology/jenkins.svg" class="img-responsive center-block animated" data-animation="zoomIn" alt="tech16">
<img src="img/technology/jenkins.svg" class="img-responsive center-block " data-animation="zoomIn" alt="tech16">
<p class="hint text-center">Jenkins</p>
</div>
</div>
@@ -533,9 +535,9 @@
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/modernizr-2.5.3.min.js"></script>
<script src="js/jquery.appear.js"></script>
<script src="js/jquery.easing.min.js"></script>
<!-- <script src="js/modernizr-2.5.3.min.js"></script> -->
<!-- <script src="js/jquery.appear.js"></script> -->
<!-- <script src="js/jquery.easing.min.js"></script> -->
<script src="js/jquery.bcSwipe.min.js"></script>
<script src="js/custom.js"></script>