Json fiddle test

HTML

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Eyezzz</title>
		<meta charset="utf-8">
		<meta name="description" content="Нүдний эмнэлэг, eye">
		<meta name="keywords" content="нүд,нүдний шил, нүдний дасгал, нүдний эмнэлэг">
		<meta name="author" content="Номундарь">
		<meta name="viewport" content="width=divice-width,initial-scale=1.0">
		<link rel="stylesheet" href="ColStylesheet.css">
		<script src="web.js"></script>
		
			
	</head>
	<body onload="show1()" onscroll="myFunction()" align="center">
		
		<header id="header" >
			<h2 id="htxt">Тавтай морил</h2>
			<div id="logo">
				<img src="Web_03.gif" alt="Logo" >
			</div>
		</header>
		<div id="subhead" class="sticky">
			<p id="h1">Happy Optical </p>
			<nav id="h2" >
				<ul class="changecursor">
					<li><a onclick="show1()" onmouseover="navl(this)" onmouseout="navout(this)" >Нүүр хуудас</a></li>
					<li><a onclick="show2()" onmouseover="navl(this)" onmouseout="navout(this)">Танилцуулга</a></li>
					<li><a onclick="show3()" onmouseover="navl(this)" onmouseout="navout(this)" >Зөвлөгөө</a></li>
					<li><a onclick="show4()" onmouseover="navl(this)" onmouseout="navout(this)" >Холбоо барих</a></li>
				</ul>
			</nav>
		</div>
		<section id="page1">
			<section class="s1">
				<div id="bg-img">
					<img src="webbb.gif" alt="bg">
					<p id="bg-ug">
						Эрүүл нүд таны гоо сайхан
					</p>
					<p id="bg-ugg">
						Найдвартай тав тухтай байдал сэтгэл ханамжийн баталгаа
					</p>
				</div>
			</section>
			<section id="s12">
				<div id="img">
					<img src="Web_17.gif" alt="cimg">
				</div>
				<div id="text">
					<h2>Үзлэг оношилгоо</h2>
					<ul> 
						<li>Торлог шилэнцэрийн эмгэг</li>
						<li>Бүх төрлийн болрын цайх өвчин</li> 
						<li>Нүдний даралт ихсэх өвчний оношилгоо</li>
						<li>Хүүхдийн гэрлийн хугарлын өөрчлөлт оношилгоо</li>
						<li>Хяларын эмгэг оношилгоо хяналт</li>
						<li>Нүдний хуурайшил</li>
						<li>Насжилтаас шалтгаалсан шар толбо</li> 
						<li>Амблиопиц буюу мохос...

CSS

html{
	scroll-behaviour : smooth;
}
.changecursor{
	cursor:pointer;
}
body{
	display : block;
	margin : auto;
	width : 1400px; 
	font-family : "Times New Roman", serif;
}
#header {
	font-size : 28px;
	width : 100%;
	background-color : #9bcfe3;
	height : 150px;
	margin : 0 0 0 0; 
}
#logo {
	margin : 0px 0px 0px 30px;
	padding-top : 30px;
	width : 250px;
	height : auto;
	float : right;
	position: relative;
    -webkit-transition: left 2s; 
    transition:left 2s;
	left:-2000px;
	top : 0px;
}
#page1, #page2, #page3, #page4 {
	margin-top : 0px;
}



#htxt{
	float: left;
	margin : 50px 5px 0px 80px;
	font-size : 30px;
	-webkit-transition : opacity 0.5s;
	opacity : 0;
}


#subhead {
	background-color : #d7d7d7;
	font-size : 28px;
	width : 100%;
	width : 100%;
	margin : 0px 0px 0px 0px;
	height : 80px;
	overflow:hidden;
	display:block;
}
.sticky {
	background-color : #d7d7d7;
	width : 100%;
	margin : 30px 0px 30px 0px;
	height : 80px;
}
.fixed{
	position:fixed;
	top:0;
}
#h1 {
	float : left;
	margin : 20px 0px 0px 20px;
}
#h2 {
	float : right;
}
#subhead{
	position:sticky;
}
nav ul li {
	float : left;
	width : 180px;
	list-style : none;
	
}
.s1{
	width : 100%;
}
#bg-ug  {
	position : absolute;
	width : 320px;
	height : 50px;
	font-size : 24px;
	top : 350px;
	left : 250px;
	text-align : center;
}
#bg-ugg{
	position : absolute;
	width : 320px;
	height : 50px;
	font-size : 18px;
	top : 410px;
	left : 250px;
	text-align : center;
}
#s12, #s13 {
	margin : auto;
	margin-top : 50px;
	width : 1000px;
	height : 360px;
}
#img {
	float : left;
	width : 460px;
	height : 360px;
	margin : 20px; 
}
#text {
	float : right;
	background-color : #9bcfe3;
	font-size : 14px;
	width : 440px;
	height : 300px;
	margin : 20px;
	padding : 10px;
}
h2 {
	margin : 10px 0px;
	text-align : center;
	font-size : 16px;
}
#text ul li {
	list-style : none;
	margin : 10px 0px;
}
#img1 {
	float : right;
	height : 325px;
	width : 470px;
	margin : 15px;
}
#img1 img {
	width : 100%;
	height : 100%;
}
#texts...

JavaScript

function show1() {
	document.getElementById("logo").style.left = "-100px";
	setTimeout(appearh2, 1500);
	document.getElementById("page1").style.display = "block";
	document.getElementById("page2").style.display = "none";
	document.getElementById("page3").style.display = "none";
	document.getElementById("page4").style.display = "none";
}
function show2() {
	document.getElementById("page1").style.display = "none";
	document.getElementById("page2").style.display = "block";
	document.getElementById("page3").style.display = "none";
	document.getElementById("page4").style.display = "none";
	setTimeout(loadDoc,3000);
}
function show3() {
	document.getElementById("page1").style.display = "none";
	document.getElementById("page2").style.display = "none";
	document.getElementById("page3").style.display = "block";
	document.getElementById("page4").style.display = "none";
}
function show4() {
	document.getElementById("page1").style.display = "none";
	document.getElementById("page2").style.display = "none";
	document.getElementById("page3").style.display = "none";
	document.getElementById("page4").style.display = "block";
}
function loadDoc(){
	var xhttp;
	if(window.XMLHttpRequest){
		xhttp =new XMLHttpRequest;
	}else {
		xhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xhttp.onreadystatechange = function(){
		if(this.readyState == 4 && this.status == 200){
			var obj=JSON.quotes(this.responseText);
			
			
			var mycont="<section>";
			for(i in obj.quotes)
				mycont+='<section><div class="t1"><p>'+obj.quotes[i].name+'<br>'+obj.quotes[i].quote+'</p></div>'
			mycont+='</section>';
			
			document.getElementById("quotes").innerHTML = mycont;
		}
	};
	xhttp.open("GET","https://api.jsonbin.io/b/5c1355de27794d69b3d84012",true);
	xhttp.send();
}
function navl(bg){
	bg.style.backgroundColor="#5F9EA0";
	
}

function navout(change){
	change.style.backgroundColor="#d7d7d7";
}
function appearh2() {
	document.getElementById("htxt").style.opacity = "1";
}
function...