HTML base

by Roberto Apasajja

HTML

<!DOCTYPE html>
<head>

</head>
<body>
<div style="font-family: 'Open Sans', sans-serif;">
    <p>Open Sans speeds up and protects millions of <b>websites</b>, APIs, SaaS services, and other properties connected to the Internet. Our Anycast technology enables our benefits to scale with every server we add to our growing footprint of data centers.</p>
    <p>Open Sans speeds up and protects millions of <b>websites</b>, APIs, SaaS services, and other properties connected to the Internet. Our Anycast technology enables our benefits to scale with every server we add to our growing footprint of data centers.</p>
</div>
<hr>
<div style="font-family: 'Roboto', sans-serif;">
    <p>Roboto speeds up and protects millions of <b>websites</b>, APIs, SaaS services, and other properties connected to the Internet. Our Anycast technology enables our benefits to scale with every server we add to our growing footprint of data centers.</p>
    <p>Roboto speeds up and protects millions of <b>websites</b>, APIs, SaaS services, and other properties connected to the Internet. Our Anycast technology enables our benefits to scale with every server we add to our growing footprint of data centers.</p>
</div>
<hr>
<div style="font-family: 'Roboto Condensed', sans-serif;">
    <p>Roboto Condensed speeds up and protects millions of <b>websites</b>, APIs, SaaS services, and other properties connected to the Internet. Our Anycast technology enables our benefits to scale with every server we add to our growing footprint of data centers.</p>
    <p>Roboto Condensed speeds up and protects millions of <b>websites</b>, APIs, SaaS services, and other properties connected to the Internet. Our Anycast technology enables our benefits to scale with every server we add to our growing footprint of data centers.</p>
</div>
<hr>
<div style="font-family: 'PT Sans Narrow', sans-serif;">
    <p>PT Sans Narrow speeds up and protects millions of <b>websites</b>, APIs, SaaS services, and other properties connected...

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,700|PT+Sans+Narrow:400,700|Roboto+Condensed:300,700|Roboto:300,700|Roboto+Slab:400,700');
    /**CONTENTS FONTS
    *font-family: 'Open Sans', sans-serif;
    *font-family: 'PT Sans Narrow', sans-serif;
    *font-family: 'Roboto Condensed', sans-serif;
    *font-family: 'Roboto', sans-serif;
    */
    
    /**HEADING FONTS
    *font-family: 'Roboto Slab', serif;
    */
    
/********************************* 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 *********************************/

html * {transition: 1s}

body {
    background:#F3F5F6;
    color: #444;
    font-size:13px
}

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;
 ...