Royale Susinest Company Profile

Developed as a school assignment, this web design project for ‘Royale Susinest’ utilizes Dreamweaver’s HTML and CSS capabilities to create a functional and visually appealing promotional platform for sunbird-related products in the bird’s nest industry. Integrating Photoshop and Illustrator, appearance materials such as graphics and visual elements were meticulously crafted. The primary focus was on creating a seamless user experience by incorporating aesthetically pleasing design elements, navigation features, and compelling visuals to mirror the brand essence of Royale Susinest, showcasing a deep connection to the natural world while meeting the assignment’s requirements.

index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Royale Susinest</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>

<body onLoad="MM_preloadImages('About-a.jpg','Product-a.jpg','Service-a.jpg','Contact-a.jpg','About-pa.jpg','Product-pa.jpg','htp-a.jpg')">
<div id="wrapper">
  <header id="head1"><img src="Head.jpg" width="1366" height="250" alt=""/></header>
  <nav id="nav1">
    <div class="bsc33"></div>
    <div class="button"><a href="index.html"><img src="Home-a.jpg" alt="" width="200" height="50" id="hpb"/></a></div>
    <div class="bsc75"></div>
    <div class="button"><a href="About.html"><img src="About-b.jpg" alt="" width="200" height="50" id="abb" onMouseOver="MM_swapImage('abb','','About-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
    <div class="bsc75"></div>
    <div class="button"><a href="Product.html"><img src="Product-b.jpg" alt="" width="200" height="50" id="pdb" onMouseOver="MM_swapImage('pdb','','Product-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
    <div class="bsc75"></div>
    <div class="button"><a href="Service.html"><img src="Service-b.jpg" alt="" width="200" height="50" id="svb" onMouseOver="MM_swapImage('svb','','Service-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
    <div class="bsc75"></div>
    <div class="button"><a href="Contact.html"><img src="Contact-b.jpg" alt="" width="200" height="50" id="ctb" onMouseOver="MM_swapImage('ctb','','Contact-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
    <div class="bsc33"></div>
  </nav>
<section id="sec1">
	<br><br><br>
	<iframe width="954.78" height="537" src="https://www.youtube.com/embed/3BR6Ycu6GHs?start=5" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
	<br><section id="sec2"><br><p class="bdtxt3">ABOUT</p>
  <a href="About.html"><img src="Screenshot 2021-08-20 at 8.53.37 PM.png" alt="" width="471" height="285" id="abpb" onMouseOver="MM_swapImage('abpb','','About-pa.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></section>
	<section id="sec3"><br><p class="bdtxt3">PRODUCT</p>
  <a href="Product.html"><img src="Screenshot 2021-08-20 at 8.54.41 PM.png" alt="" width="467" height="276" id="pdpb" onMouseOver="MM_swapImage('pdpb','','Product-pa.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></section>
<section id="sec7">
  <p class="bdtxt3">HOW TO PREPARE?</p>
  <a href="How_to_prepare.html"><img src="WhatsApp Image 2021-08-24 at 9.40.15 AM (2).jpeg" alt="" width="373" height="374" id="htpp" onMouseOver="MM_swapImage('htpp','','htp-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></section>
</section>

  
  
  <footer id="foot"><img src="Foot.jpg" width="1366" height="200" alt=""/></footer>
</div>
</body>
</html>
About.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Royale Susinest</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>

<body onLoad="MM_preloadImages('Home-a.jpg','Product-a.jpg','Service-a.jpg','Contact-a.jpg')">
<div id="wrapper">
  <header id="head1"><img src="Head.jpg" width="1366" height="250" alt=""/></header>
  <nav id="nav1">
    <div class="bsc33"></div>
    <div class="button"><a href="index.html"><img src="Home-b.jpg" alt="" width="200" height="50" id="hpb" onMouseOver="MM_swapImage('hpb','','Home-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
    <div class="bsc75"></div>
    <div class="button"><a href="About.html"><img src="About-a.jpg" alt="" width="199" height="50" id="abb"/></a></div>
    <div class="bsc75"></div>
    <div class="button"><a href="Product.html"><img src="Product-b.jpg" alt="" width="200" height="50" id="pdb" onMouseOver="MM_swapImage('pdb','','Product-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
    <div class="bsc75"></div>
    <div class="button"><a href="Service.html"><img src="Service-b.jpg" alt="" width="200" height="50" id="svb" onMouseOver="MM_swapImage('svb','','Service-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
    <div class="bsc75"></div>
    <div class="button"><a href="Contact.html"><img src="Contact-b.jpg" alt="" width="200" height="50" id="ctb" onMouseOver="MM_swapImage('ctb','','Contact-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
    <div class="bsc33"></div>
  </nav>
<section id="sec1"><br><br><br><span class="bdtxt2">ABOUT</span>
<div class="bdtxt1">
  <p class="bdtxt">Sunbirds Industry Sdn.bhd. was founded in 1992. Sunbirds Industry is a bird’s nest factory that manufactures bird’s nests, processes, and wholesales and sells bird’s nests. Royale Susinest is a private branch of Sunbirds Industry. Royale Susinest was founded in 2020 and the company is located in Malaysia,  Segamat.  Provide consulting, cleaning services, and also provide finished products for customers to purchase.      
   
	  <br><br>Our bird's nest is a local house bird in Malaysia, the quality is pure and natural.  The packaging of the finished product is selected through multiple screenings and checking the quality.  <br><br>
	     
    Regardless of the vicissitudes of life and market changes, Royale Susinest Malaysia insists on creating the highest quality products in the industry, and welcomes new and old customers at home and abroad to visit and inspect.<br>
    <img src="aboutphoto.jpg" width="900" height="563" alt=""/></p>
</div>
</section>
  <footer id="foot"><img src="Foot.jpg" width="1366" height="200" alt=""/></footer>
</div>
</body>
</html>
Product.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Royale Susinest</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>

<body onLoad="MM_preloadImages('Home-a.jpg','About-a.jpg','Service-a.jpg','Contact-a.jpg','Product1a.jpg','Product2a.jpg','Product4a.jpg','Product3a.jpg','Product5a.jpg')">
<div id="wrapper">
  <header id="head1"><img src="Head.jpg" width="1366" height="250" alt=""/></header>
  <nav id="nav1">
    <div class="bsc33"></div>
    <div class="button"><a href="index.html"><img src="Home-b.jpg" alt="" width="200" height="50" id="hpb" onMouseOver="MM_swapImage('hpb','','Home-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
    <div class="bsc75"></div>
    <div class="button"><a href="About.html"><img src="About-b.jpg" alt="" width="200" height="50" id="abb" onMouseOver="MM_swapImage('abb','','About-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
    <div class="bsc75"></div>
    <div class="button"><a href="Product.html"><img src="Product-a.jpg" alt="" width="199" height="50" id="pdb"/></a></div>
    <div class="bsc75"></div>
    <div class="button"><a href="Service.html"><img src="Service-b.jpg" alt="" width="200" height="50" id="svb" onMouseOver="MM_swapImage('svb','','Service-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
    <div class="bsc75"></div>
    <div class="button"><a href="Contact.html"><img src="Contact-b.jpg" alt="" width="200" height="50" id="ctb" onMouseOver="MM_swapImage('ctb','','Contact-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
    <div class="bsc33"></div>
  </nav>
<section id="sec1"><br><br><br><span class="bdtxt2">PRODUCT</span>
	<br>
	<nav id="nav2">
	  <div class="bx51"></div>
	  <div class="vid">
        <video width="400" height="300" controls="controls" muted="muted" autoplay="autoplay" loop="loop" >
          <source src="wx_camera_1607406965116.mp4" type="video/mp4">
        </video>
	  </div>
	  <div class="bx32"></div>
	  <div class="vid">
        <video width="400" height="300" controls="controls" muted="muted" autoplay="autoplay" loop="loop" >
          <source src="VID-20210113-WA0180.mp4" type="video/mp4">
        </video>
	  </div>
	  <div class="bx32"></div>
	  <div class="vid"><video width="400" height="300" controls="controls" muted="muted" autoplay="autoplay" loop="loop" >
          <source src="wx_camera_1607406984527.mp4" type="video/mp4">
      </video></div>
	  <div class="bx51"></div>
	</nav><br><br>
	<nav id="nav3">
	  <div class="bx558"></div>
	  <div class="button1"><a href="Contact.html"><img src="Product1.jpg" alt="" width="275" height="275" id="p1" onMouseOver="MM_swapImage('p1','','Product1a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
	  <div class="bx558"></div>
	</nav>
	<nav id="nav4"><p class="bdtxt4">RM315.00</p></nav>
	<nav id="nav5">
	  <div class="button2"><a href="Contact.html"><img src="Product2.jpg" alt="" width="368" height="275" id="p2" onMouseOver="MM_swapImage('p2','','Product2a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
		<div class="bx75"><p class="bdtxt4">RM350.00</p></div>
		<div class="button2"><a href="Contact.html"><img src="Product4.jpg" alt="" width="363" height="275" id="p4" onMouseOver="MM_swapImage('p4','','Product4a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
	  <div class="bx75"><p class="bdtxt4">RM2,000.00</p></div>
	</nav>
	<nav id="nav6">
	  <div class="button3"><a href="Contact.html"><img src="Product3.jpg" alt="" width="368" height="275" id="p3" onMouseOver="MM_swapImage('p3','','Product3a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
	  <div class="bx75"><p class="bdtxt4">RM315.00</p></div>
	  <div class="button3"><a href="Contact.html"><img src="Product5.jpg" alt="" width="362" height="275" id="p5" onMouseOver="MM_swapImage('p5','','Product5a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
	  <div class="bx75"><p class="bdtxt4">RM4,125.00</p></div>
	</nav>
  <br></section>
  <footer id="foot"><img src="Foot.jpg" width="1366" height="200" alt=""/></footer>
</div>
</body>
</html>
How_to_prepare.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Royale Susinest</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>

<body onLoad="MM_preloadImages('Home-a.jpg','About-a.jpg','Service-a.jpg','Contact-a.jpg','Product1a.jpg','Product2a.jpg','Product4a.jpg','Product3a.jpg','Product5a.jpg','Product-a.jpg')">
<div id="wrapper">
  <header id="head1"><img src="Head.jpg" width="1366" height="250" alt=""/></header>
  <nav id="nav1">
    <div class="bsc33"></div>
    <div class="button"><a href="index.html"><img src="Home-b.jpg" alt="" width="200" height="50" id="hpb" onMouseOver="MM_swapImage('hpb','','Home-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
    <div class="bsc75"></div>
    <div class="button"><a href="About.html"><img src="About-b.jpg" alt="" width="200" height="50" id="abb" onMouseOver="MM_swapImage('abb','','About-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
    <div class="bsc75"></div>
    <div class="button"><a href="Product.html"><img src="Product-b.jpg" alt="" width="206" height="50" id="pdb" onMouseOver="MM_swapImage('pdb','','Product-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
    <div class="bsc75"></div>
    <div class="button"><a href="Service.html"><img src="Service-b.jpg" alt="" width="200" height="50" id="svb" onMouseOver="MM_swapImage('svb','','Service-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
    <div class="bsc75"></div>
    <div class="button"><a href="Contact.html"><img src="Contact-b.jpg" alt="" width="200" height="50" id="ctb" onMouseOver="MM_swapImage('ctb','','Contact-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
    <div class="bsc33"></div>
  </nav>
<section id="sec1"><br><br><br>
<span class="bdtxt2">HOW TO PREPARE?</span>
	<br><br><br>
	<nav id="nav5">
	  <div class="button2"><img src="WhatsApp Image 2021-08-24 at 9.40.15 AM.jpeg" width="275" height="275" alt=""/></div>
		<br><br><br>
		<div class="button2"><img src="WhatsApp Image 2021-08-24 at 9.40.15 AM (1).jpeg" width="275" height="275" alt=""/></div>
	  <br><br><br>
	  <div class="button2"><img src="WhatsApp Image 2021-08-24 at 9.40.15 AM (3).jpeg" width="275" height="274" alt=""/></div>
	  <br><br><br>
	  <div class="button2"><img src="WhatsApp Image 2021-08-24 at 9.40.15 AM (2).jpeg" width="275" height="274" alt=""/></div>
	</nav>
	<nav id="nav6">
	  <div class="button4"><p class="bdtxt3">Step 1</p><br><br><p class="bdtxt5">Divide one or two bird's nests (37.5g) into three equal portions, and soak them in mineral water or pure water for several hours (depending on the type of bird's nest purchased), and wait until the bird's nest absorbs water and becomes translucent.</p></div>
	  <div class="button4"><p class="bdtxt3">Step 2</p><br><br><p class="bdtxt5">Pick up a small amount of small feathers attached to the bird's nest, and then rinse it with clean water. About 12 gram of bird's nest can stew 500cc of bird's nest.</p></div>
	  <div class="button4"><p class="bdtxt3">Step 3</p><br><br><p class="bdtxt5">Put the soaked bird's nest into the stewing pot, add 500cc of water and appropriate amount of rock sugar.</p></div>
		  <div class="button4"><p class="bdtxt3">Step 4</p><br><br><p class="bdtxt5">Put the stewing pot into the rice cooker, add a cup of water to the outer pot, and wait for the rice cooker to jump on.  If you don't have an electric rice cooker, you can also simmer it over a low heat for about 20-30 minutes.</p></div>
	</nav>
	<br></section>
  <footer id="foot"><img src="Foot.jpg" width="1366" height="200" alt=""/></footer>
</div>
</body>
</html>
Service.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Royale Susinest</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>

<body onLoad="MM_preloadImages('Home-a.jpg','About-a.jpg','Product-a.jpg','Contact-a.jpg')">
<div id="wrapper">
  <header id="head1"><img src="Head.jpg" width="1366" height="250" alt=""/></header>
  <nav id="nav1">
    <div class="bsc33"></div>
    <div class="button"><a href="index.html"><img src="Home-b.jpg" alt="" width="200" height="50" id="hpb" onMouseOver="MM_swapImage('hpb','','Home-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
    <div class="bsc75"></div>
    <div class="button"><a href="About.html"><img src="About-b.jpg" alt="" width="200" height="50" id="abb" onMouseOver="MM_swapImage('abb','','About-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
    <div class="bsc75"></div>
    <div class="button"><a href="Product.html"><img src="Product-b.jpg" alt="" width="200" height="50" id="pdb" onMouseOver="MM_swapImage('pdb','','Product-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
    <div class="bsc75"></div>
    <div class="button"><a href="Service.html"><img src="Service-a.jpg" alt="" width="200" height="51" id="svb"/></a></div>
    <div class="bsc75"></div>
    <div class="button"><a href="Contact.html"><img src="Contact-b.jpg" alt="" width="200" height="50" id="ctb" onMouseOver="MM_swapImage('ctb','','Contact-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
    <div class="bsc33"></div>
  </nav>
<section class="bdtxt1" id="sec1"><br><br><br><span class="bdtxt2">SERVICES</span>
  <div class="bdtxt1"><img src="Service-photo.jpg" width="958" height="716" alt=""/></div>
  <div class="bdtxt1"><p class="bdtxt">We have a cleaning service. This service provides raw materials for bird's nest and cleans the raw materials of bird's nest.  If you need this service, please click “<a href="Contact.html">Contact Us</a>” to contact the service staff to make an appointment.</p></div>
	<br>
  <br></section>
  <footer id="foot"><img src="Foot.jpg" width="1366" height="200" alt=""/></footer>
</div>
</body>
</html>
Contact.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Royale Susinest</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>

<body onLoad="MM_preloadImages('Home-a.jpg','About-a.jpg','Product-a.jpg','Service-a.jpg')">
<div id="wrapper">
  <header id="head1"><img src="Head.jpg" width="1366" height="250" alt=""/></header>
  <nav id="nav1">
    <div class="bsc33"></div>
    <div class="button"><a href="index.html"><img src="Home-b.jpg" alt="" width="200" height="50" id="hpb" onMouseOver="MM_swapImage('hpb','','Home-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
    <div class="bsc75"></div>
    <div class="button"><a href="About.html"><img src="About-b.jpg" alt="" width="200" height="50" id="abb" onMouseOver="MM_swapImage('abb','','About-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
    <div class="bsc75"></div>
    <div class="button"><a href="Product.html"><img src="Product-b.jpg" alt="" width="200" height="50" id="pdb" onMouseOver="MM_swapImage('pdb','','Product-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
    <div class="bsc75"></div>
    <div class="button"><a href="Service.html"><img src="Service-b.jpg" alt="" width="200" height="50" id="svb" onMouseOver="MM_swapImage('svb','','Service-a.jpg',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
    <div class="bsc75"></div>
    <div class="button"><a href="Contact.html"><img src="Contact-a.jpg" alt="" width="200" height="50" id="ctb"/></a></div>
    <div class="bsc33"></div>
  </nav>
<section id="sec1">
  <div id="map"><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15953.627197600208!2d103.7868531!3d1.5241143!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31ce2dc79a28b9c5%3A0xcea95d69069d326f!2zUm95YWxlIFN1c2luZXN0IOS6rueHleS6p-S4mg!5e0!3m2!1sen!2smy!4v1629457691034!5m2!1sen!2smy" width="1366" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe></div>
<br><br><br><span class="bdtxt2">CONTACT US</span>
<div class="bdtxt1"><p class="bdtxt">Address: No.25, Jalan Bistari 4/8, Taman Yayasan, 85010 Segamat, Johor.

<br><br>Contact Number: +60-102072720/+60-187812903

<br><br>WhatsApp: <a href="https://wa.me/message/GDSA7PKEHCVDP1">https://wa.me/message/GDSA7PKEHCVDP1</a> <a href="https://wa.me/message/7QIESG73KJEQJ1">https://wa.me/message/7QIESG73KJEQJ1</a><br><br><img src="wacode1.png" width="80" height="80" alt=""/>&nbsp;
&nbsp;&nbsp;<img src="wacode2.png" width="80" height="80" alt=""/><br><br>
<img src="Contact1.jpg" width="1086" height="485" alt=""/></p>
</div>
</section>

 
  <footer id="foot"><img src="Foot.jpg" width="1366" height="200" alt=""/></footer>
</div>
</body>
</html>
style.css
@charset "UTF-8";
#wrapper {
    width: 1366px;
    position: relative;
    margin-right: auto;
    margin-left: auto;
    margin-top: -8px;
    background-color: #AB9999;
}
#wrapper #head1 {
    width: 1366px;
    height: 250px;
    background-color: #6692DE;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
#wrapper #nav1 .bsc33 {
    width: 23px;
    height: 50px;
    background-color: #A77C52;
    float: left;
}
#wrapper #nav1 .button {
    width: 200px;
    height: 50px;
    float: left;
    background-color: #BF97D4;
    border-width: 2px;
    border-style: inset;
}
#wrapper #nav1 .bsc75 {
    width: 75px;
    height: 50px;
    float: left;
    background-color: #A77C52;
}
#wrapper #nav1 {
    width: 1366px;
    height: 50px;
}
#wrapper #sec1 #nav2 {
    width: 1366px;
    height: 300px;
}
#sec1 #nav2 .bx51 {
    width: 51px;
    height: 300px;
    float: left;
}
#sec1 #nav2 .vid {
    width: 400px;
    height: 300px;
    float: left;
}
#sec1 #nav2 .bx32 {
    width: 32px;
    height: 300px;
    float: left;
}
#wrapper #sec1 #nav3 {
    width: 1366px;
    height: 275px;
}
#sec1 #nav3 .bx558 {
    width: 545px;
    height: 275px;
    float: left;
}
.bdtxt4 {
    color: #696060;
    text-align: center;
    font-size: 25px;
    font-weight: bolder;
}
#sec1 #nav3 .button1 {
    width: 275px;
    height: 275px;
    float: left;
}
#wrapper #sec1 #nav4 {
    width: 1366px;
    height: 50px;
}
#wrapper #sec1 #nav5 {
    width: 683px;
    height: 700px;
    float: left;
}
#sec1 #nav5 .bx75 {
    width: 683px;
    height: 75px;
}
#sec1 #nav5 .button2 {
    width: 683px;
    height: 275px;
}
#wrapper #sec1 #nav6 {
    width: 683px;
    height: 700px;
    float: left;
}
#sec1 #nav6 .button3 {
    width: 683px;
    height: 275px;
}
#sec1 #nav6 .button4 {
    width: 610px;
    height: 275px;
}
#sec1 #nav6 .bx75 {
    width: 683px;
    height: 75px;
}
#wrapper #sec1 {
    width: 1366px;
    background-color: #CDBDBD;
    float: left;
    background-image: url(Background.jpg);
    text-align: center;
    margin-top: -6px;
    height: 1600px;
}
#wrapper #sec1 .bdtxt1 {
    width: 1086px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.bdtxt2 {
    color: #443D3D;
    font-size: 60pt;
    text-align: center;
    margin-bottom: -5px;
}
.bdtxt3 {
    color: #564E4E;
    text-align: center;
    font-size: 50px;
    text-shadow: 0px 0px;
    font-weight: bold;
    font-variant: normal;
    font-style: normal;
    text-decoration: none;
    margin-bottom: -5px;
}
.bdtxt {
    color: #342F2F;
    width: 1086px;
    height: 1067px;
    font-weight: normal;
    font-size: 36px;
    text-align: center;
}
.bdtxt5 {
    color: #3C3737;
    font-size: 20px;
    text-align: center;
    font-weight: bolder;
    font-variant: normal;
    font-style: normal;
    text-decoration: none;
}
#wrapper #sec2 {
    width: 683px;
    height: 400px;
    float: left;
}
#wrapper #sec3 {
    width: 683px;
    height: 400px;
    float: left;
    margin-right: auto;
    margin-left: 0px;
}
#wrapper #sec1 #sec7 {
    width: 1366px;
    height: 500px;
    float: left;
    margin-top: -20px;
}
#wrapper #sec1 #map {
    width: 1366px;
    height: 300px;
}
#wrapper #foot {
    width: 1366px;
    height: 200px;
    background-color: #413232;
    float: left;
    text-align: center;
    text-decoration: none;
    text-shadow: 0px 0px #E5DCDC;
    text-transform: lowercase;
    margin-top: auto;
    color: #DFD6D6;
}