on work

by Roberto Apasajja

HTML

<script src="https://designmodo.com/demo/responsiveslider/js/jquery.flexslider-min.js"></script>
<ul id="top-menu">
    <div>
        <li>
            <a href="yahoo.com"><b>LT</b></a>
        </li>
        <li class="active">
            <a href="#"><small>TOP</small></a>
        </li>
        <li>
            <a href="#addcart"><span class="blink_me">Order (klik sini)</span></a>
        </li>
        <li class="right">
            <a href="#contact">Hubungi Kami</a>
        </li>
    </div>
</ul>
<div class="row1">
    <div class="width">
        <div class="flex-container">
            <div class="flexslider">
                <ul class="slides">
                    <li>
                        <img src="https://pictr.com/images/2016/12/12/5f3b333e479e8be922fb7a235a47713d.jpg" />
                    </li>
                    <li>
                        <img src="https://pictr.com/images/2016/12/12/43b4aea21dc7fa14df700819d01ea13c.jpg" />
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="row2">
    <div class="width">
        <div class="flex centertext">
            <div class="one">
                <div>
                    <h3>Untuk Semua</h3>Letakkan pada kenderaan, kanak-kanak, bagasi</div>
            </div>
            <div class="two">
                <div>
                    <h3>Jarak Jauh</h3>Mengesan semua lokasi walaupun kawasan pedalaman</div>
            </div>
            <div class="three">
                <div>
                    <h3>Keperluan Wajib</h3>Masih ada peluang kedua jika ada kecurian</div>
            </div>
        </div>
    </div>
</div>
<div class="row3">
    <div class="width">
        <div class="centertext">
            <h1>Long Distance Location Tracker</h1>
            <span id="mprice">RM588</span><span id="p2">Promosi Terhad RM150</span>
            <div><i>*Harga pengenalan ini dijangka untuk beberapa hari sahaja. Order segera sementara masih...

CSS

@import url('https://fonts.googleapis.com/css?family=Francois+One|Slabo+27px');

/********************************* normalize css *********************************/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img { 
    border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border:0;}

/********************************* general *********************************/

body {
    font-family: 'Slabo 27px', serif;
    background:#F3F5F6;
    color: #555
}

img{
  max-width:100%
}
#content img {width:100%}

h1, h3 {
  font-weight:bold
}
h1 {
  font-size:2em;
}
h3 {
  margin-bottom:13px;
  font-size:19px;
}
p+p, p+h3, img+p, p+img{
  margin-top:16px
}

h3+img{
  margin-top:10px
}

p {
  text-align:justify
}

.centertext, .centertext th, .centertext td {
  text-align:center
}

[class^="row"] {
  padding:26px 0
}

.flex>div:first-child {
  border-radius:20px 0 0 20px
}
.flex>div:last-child {
  border-radius:0 20px 20px 0
}

.clear{
      clear: both;
}

hr{
  border:1px dashed #bbb;
  border-top:0;
  margin:2% 0
}

/********************************* general: table *********************************/

table {
  width:100%;
  table-layout: fixed;
  margin:26px 0
}
table th {
  background: #2980B9;
  color: #fff;
  font-weight:bold
}
tr:nth-child(odd) {background: #F1F1F1}
tr:nth-child(even) {background: #E1E1E1}
th,td {
  padding:5px 8px
}

/********************************* specific *********************************/

.row1{
  padding-top:70px;
  background:#ccc
}
.row2{
  color:white;
  background:#ED564B;
  border-top: 5px solid #F96B61;
  border-bottom:5px solid #F96B61;
}

.row5{
...

JavaScript

// Slider

    $(document).ready(function () {
        $('.flexslider').flexslider({
            animation: 'slide',
            slideshowSpeed: '2000',
            controlNav: false,
            controlsContainer: '.flexslider'
        });
    });
    
    

// Cache selectors
var lastId,
    topMenu = $("#top-menu"),
    topMenuHeight = topMenu.outerHeight()+15,
    // All list items
    menuItems = topMenu.find("a"),
    // Anchors corresponding to menu items
    scrollItems = menuItems.map(function(){
      var item = $($(this).attr("href"));
      if (item.length) { return item; }
    });

// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
  var href = $(this).attr("href"),
      offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
  $('html, body').stop().animate({ 
      scrollTop: offsetTop
  }, 300);
  e.preventDefault();
});

// Bind to scroll
$(window).scroll(function(){
   // Get container scroll position
   var fromTop = $(this).scrollTop()+topMenuHeight;
   
   // Get id of current scroll item
   var cur = scrollItems.map(function(){
     if ($(this).offset().top < fromTop)
       return this;
   });
   // Get the id of the current element
   cur = cur[cur.length-1];
   var id = cur && cur.length ? cur[0].id : "";
   
   if (lastId !== id) {
       lastId = id;
       // Set/remove active class
       menuItems
         .parent().removeClass("active")
         .end().filter("[href='#"+id+"']").parent().addClass("active");
   }                   
});