Web HTML5 Startup! Kang Rian

Just another startup website by Kang Rian!

by Rian .N Herdian

HTML

<html>
  <head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Hello</title>
    <meta name="robots" content="index, follow">
    <meta name="googlebot" content="index, follow">
    <meta name="google" content="notranslate">
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel="icon" type="image/icon" href="file/img/icon.png">
    <link rel='stylesheet' type='text/css' href='file/css-reset.css'>
    <link rel='stylesheet' type='text/css' href='file/css-custom.css'>
  </head>
  <body itemscope itemtype="http://schema.org/WebPage">
    <header role="banner" itemscope itemtype="http://schema.org/WPHeader">
      <hgroup>
        <h1 itemprop="name"><img src="#logo.png" alt="logo"> LOGO</h1>
        <h2 itemprop="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
      </hgroup>
    </header>
    <!-- / header -->
    <div itemscope itemtype="http://schema.org/WebSite">
      <meta itemprop="url" content="https://www.tetangga-sebelah.com/" />
      <form itemprop="potentialAction" itemscope itemtype="http://schema.org/SearchAction" method="get" action="https://www.tetangga-sebelah.com/" role="search">
        <meta itemprop="target" content="https://www.tetangga-sebelah.com/?{s}" />
        <input itemprop="query-input" type="text" name="s" placeholder="Search here..." required/>
        <button type="submit" role="button">Search &nbsp;&rsaquo;</button>
      </form>
    </div>
    <!-- / search -->
    <nav role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
      <ul>
        <li><a itemprop="url" href="#url"><span itemprop="name">LINK</span></a></li>
        <li><a itemprop="url" href="#url"><span itemprop="name">LINK</span></a></li>
        <li><a itemprop="url" href="#url"><span itemprop="name">LINK</span></a></li>
        <li><a itemprop="url" href="#url"><span itemprop="name">LINK</span></a></li>
      </ul>
    </nav>
   ...

CSS

/* =========================================== css-reset.css ================================= */
*,
*:before,
*:after {
  font-weight: 300;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  word-wrap: break-word;
  margin: 0;
  padding: 0;
  outline: none!important;
  word-wrap: break-word !important;
  line-height: 1.6;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
  color:#868686;
  }
b,
strong {
  font-weight: 500!important
}
::-moz-selection {
  /* Code for Firefox */
  background: rgba(0, 0, 0, 0.1);
}

::selection {
  background: rgba(0, 0, 0, 0.1);
}

img {
  max-width: 100%;
  height: auto;
}

button,
input[type=button] {
  cursor: pointer;
}
.clear:after {
  content: '';
  display: block;
  clear: both;
}

a {
  color: #868686;
  text-decoration: none;
}

a:hover {
  color: #464646;
}

.hidden {
  position: fixed;
  top: -9999px;
  right: -9999px;
  opacity: 0;
  visibility: hidden;
}

.inmobile,
.onmobile {
  display: none!important;
}

@media(max-width: 960px) {
  .desktop {
    display: none!important;
  }
  .inmobile {
    display: inline-block!important;
  }
  .onmobile {
    display: block!important;
  }
}
/* ========================================= / css-reset.css ================================= */

JavaScript

$(document).ready(function(){
  $("button").click(function(){
    pressed();
  });
});
function pressed() {
  alert("Button pressed!");
}