Projects
- Home
- Projects
Embracing an enchanting and whimsical theme, my WordPress design for Saito Design School exudes a celestial charm with a starry ambiance, evoking a fairy-tale aura. The design aims to encapsulate the essence of creativity and imagination prevalent within the school community. Featuring dedicated sections for community engagement, a captivating gallery showcasing exceptional student artwork, and comprehensive introductions, the website invites visitors into a world of artistic exploration. This stellar design not only highlights the school’s vibrant creative atmosphere but also amplifies the significance of fostering a captivating online presence that resonates with the spirit and artistic prowess of Saito Design School.
Access Link: https://saitodesignschool5.wordpress.com/
Phone Call
For my UI design school assignment, I delved into the realm of Figma, crafting a series of interfaces for phone call management, receiving calls, and a contact book. This project served as a pivotal learning experience, allowing me to familiarize myself with Figma’s functionalities and UI/UX design principles. Through this assignment, I gained proficiency in creating intuitive and visually appealing user interfaces, honing skills in layout design, iconography, and user interaction. The project demonstrates my foundational grasp of Figma as a powerful design tool, marking the beginning of my journey into the world of user interface design.
Gaming Interior & Outdoor
Employing advanced techniques in Photoshop, I spent one month meticulously crafting a captivating interior and outdoor illustration inspired by gaming landscapes sourced from extensive research on Google. This artwork intricately blends digital artistry with gaming aesthetics, utilizing the creative power of Photoshop to meticulously render intricate details and bring to life a captivating gaming-inspired setting. Through the use of digital brushes, layers, and precise detailing, this illustration invites viewers to explore an immersive world where the boundaries between reality and virtual gaming environments blur seamlessly.
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=""/>
<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;
}
Portfolio
Created as part of my portfolio, this project implemented Dreamweaver’s HTML and CSS functionalities to construct a visually captivating platform. Titled ‘My Portfolio,’ the design concept revolves around a ‘Starry Sky Theme’. By leveraging Dreamweaver’s robust capabilities, I meticulously crafted an immersive digital space that evokes the serene beauty and mystique of a starry night. The website’s layout, color scheme, and interactive elements were meticulously designed to reflect this celestial theme, resulting in a visually stunning and user-friendly portfolio presentation that captures the essence of the night sky.
inde.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Kiki Pee Shuqi Designer</title>
<link href="style.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>
var __adobewebfontsappname__="dreamweaver"
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><script src="http://use.edgefonts.net/chewy:n4:default;frijole:n4:default;devonshire:n4:default.js" type="text/javascript"></script>
</head>
<body class="bgimg1" onLoad="MM_preloadImages('Contact-Button-1.png','Work-Button-1.png','About-Button-1.png')">
<div class="head"><br><br>
<div class="bsc150"></div>
<h1><img src="H1h.png" width="515" height="156" alt=""/></h1>
<br>
<div id="wrap2">
<section id="sec1"><div class="bsc33"><div class="bsc33"></div>
<div class="bsc33"><a href="about.html"><img src="About-Button.png" alt="" width="1600" height="1000" id="atb" onMouseOver="MM_swapImage('atb','','About-Button-1.png',1)" onMouseOut="MM_swapImgRestore()"/></a></div><br><br><br><br>
<div class="bsc33"></div>
<div class="bsc33"><a href="works.html"><img src="Work-Button.png" alt="" width="1596" height="1000" id="wkb" onMouseOver="MM_swapImage('wkb','','Work-Button-1.png',1)" onMouseOut="MM_swapImgRestore()"/></a></div><br><br><br><br>
<div class="bsc33"></div>
<div class="bsc33"><a href="contact.html"><img src="Contact-Button.png" alt="" width="1610" height="1000" id="cbb" onMouseOver="MM_swapImage('cbb','','Contact-Button-1.png',1)" onMouseOut="MM_swapImgRestore()"/><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></a></div></div><br></section>
</div></div>
<div class="foot">
</div>
<video id="background-video" autoplay="autoplay" loop="loop" >
<source src="Epub f2 copy.mp4" type="video/mp4">
</video>
</body>
</html>
about.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Kiki Pee Shuqi Designer</title>
<link href="style.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>
var __adobewebfontsappname__="dreamweaver"
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><script src="http://use.edgefonts.net/chewy:n4:default;frijole:n4:default;devonshire:n4:default.js" type="text/javascript"></script>
</head>
<body class="bgimg1" onLoad="MM_preloadImages('Contact-Button-1.png','Work-Button-1.png','About-Button-1.png')">
<div class="head"><br><br>
<div class="bsc150"></div>
<h1><img src="H1h.png" width="515" height="156" alt=""/></h1>
<br>
<div id="wrap2">
<section id="sec1"><div class="bsc33"><div class="bsc33"></div>
<div class="bsc33"><a href="about.html"><img src="About-Button.png" alt="" width="1600" height="1000" id="atb" onMouseOver="MM_swapImage('atb','','About-Button-1.png',1)" onMouseOut="MM_swapImgRestore()"/></a></div><br><br><br><br>
<div class="bsc33"></div>
<div class="bsc33"><a href="works.html"><img src="Work-Button.png" alt="" width="1596" height="1000" id="wkb" onMouseOver="MM_swapImage('wkb','','Work-Button-1.png',1)" onMouseOut="MM_swapImgRestore()"/></a></div><br><br><br><br>
<div class="bsc33"></div>
<div class="bsc33"><a href="contact.html"><img src="Contact-Button.png" alt="" width="1610" height="1000" id="cbb" onMouseOver="MM_swapImage('cbb','','Contact-Button-1.png',1)" onMouseOut="MM_swapImgRestore()"/><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></a></div></div><br></section>
</div></div>
<div class="foot">
</div>
<video id="background-video" autoplay="autoplay" loop="loop" >
<source src="Epub f2 copy.mp4" type="video/mp4">
</video>
</body>
</html>
work.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kiki Pee Shuqi Designer</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-4.4.1.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>
var __adobewebfontsappname__="dreamweaver"
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><script src="http://use.edgefonts.net/chewy:n4:default;frijole:n4:default;devonshire:n4:default.js" type="text/javascript"></script>
</head>
<body class="bgimg1" onLoad="MM_preloadImages('Works-b1.png','Contacts-b1.png','About-b1.png','Home-b1.png','Digital-Button-1.png','Video-Button-1.png','Menu Button 1.png','Photography Button 1.jpeg','Competition-Button-1.png')">
<div class="head"><br><br>
<div class="bsc150"></div>
<h1><img src="H1w.png" width="490" height="156" alt=""/></h1>
<nav id="nav1">
<div class="bsc50"><img src="Line.png" width="50%" height="80" alt=""/><img src="Line.png" width="50%" height="80" alt=""/></div>
<div class="bsc10"><a href="index.html"><img src="Home-b.png" alt="" width="225" height="79" id="hmb" onMouseOver="MM_swapImage('hmb','','Home-b1.png',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
<div class="bsc10"><a href="about.html"><img src="About b.png" alt="" width="226" height="80" id="abb" onMouseOver="MM_swapImage('abb','','About-b1.png',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
<div class="bsc10"><a href="works.html"><img src="Works-b1.png" alt="" width="226" height="79" id="wkb" onMouseOver="MM_swapImage('wkb','','Works-b1.png',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
<div class="bsc10"><a href="contact.html"><img src="Contact-b.png" alt="" width="226" height="80" id="ctb" onMouseOver="MM_swapImage('ctb','','Contacts-b1.png',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
<div class="bsc10a"></div>
</nav><br><br><br><br>
<div id="carouselExampleIndicators1" class="carousel slide" data-ride="carousel" style="background-color: grey">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators1" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators1" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active"> <a href="digital.html"><img src="Digital-Button.png" alt="Third slide" width="1504" height="1000" class="d-block mx-auto" id="dgb" onMouseOver="MM_swapImage('dgb','','Digital-Button-1.png',1)" onMouseOut="MM_swapImgRestore()"></a>
<div class="carousel-caption">
<font color="#0F0B0B"> <font size="+35">Digital Art Work</font>
<p><h3>Click to view more</h3></p></font>
</div>
</div>
<div class="carousel-item"> <a href="competition.html"><img src="Competition Button.jpeg" alt="Second slide" width="1632" height="1000" class="d-block mx-auto" id="cpb" onMouseOver="MM_swapImage('cpb','','Competition-Button-1.png',1)" onMouseOut="MM_swapImgRestore()"></a>
<div class="carousel-caption">
<font color="#0F0B0B"> <font size="+35">Competition Art Work</font>
<p><h3>Click to view more</h3></p></font>
</div>
</div>
<div class="carousel-item"> <a href="menu.html"><img src="Menu-Button.png" alt="First slide" width="1778" height="1000" class="d-block mx-auto" id="mnb" onMouseOver="MM_swapImage('mnb','','Menu Button 1.png',1)" onMouseOut="MM_swapImgRestore()"></a>
<div class="carousel-caption">
<font color="#0F0B0B"> <font size="+35">Menu Art Work</font>
<p><h3>Click to view more</h3></p></font>
</div>
</div>
<div class="carousel-item"> <a href="animate.html"><img src="Video-Button.png" alt="Third slide" width="1799" height="1000" class="d-block mx-auto" id="vdb" onMouseOver="MM_swapImage('vdb','','Video-Button-1.png',1)" onMouseOut="MM_swapImgRestore()"></a>
<div class="carousel-caption">
<font color="#0F0B0B"> <font size="+35">Animation Art Work</font>
<p><h3>Click to view more</h3></p></font>
</div>
</div>
<div class="carousel-item"> <a href="photography.html"><img src="Photography-Button.png" alt="Third slide" width="1778" height="1000" class="d-block mx-auto" id="pgb" onMouseOver="MM_swapImage('pgb','','Photography Button 1.jpeg',1)" onMouseOut="MM_swapImgRestore()"></a>
<div class="carousel-caption">
<font color="#0F0B0B"> <font size="+35">Photography</font>
<p><h3>Click to view more</h3></p></font>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators1" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators1" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
<div class="nav2"></div>
</div>
<div class="foot">
</div>
<video id="background-video" autoplay="autoplay" loop="loop" >
<source src="Epub f2 copy.mp4" type="video/mp4">
</video>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.4.1.js"></script>
</body>
</html>
contact.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kiki Pee Shuqi Designer</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-4.4.1.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>
var __adobewebfontsappname__="dreamweaver"
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><script src="http://use.edgefonts.net/chewy:n4:default;frijole:n4:default;devonshire:n4:default.js" type="text/javascript"></script>
</head>
<body class="bgimg1" onLoad="MM_preloadImages('Works-b1.png','Contacts-b1.png','About-b1.png','Home-b1.png')">
<div class="head"><br><br>
<div class="bsc150"></div>
<h1><img src="H1c.png" width="733" height="156" alt=""/></h1>
<nav id="nav1">
<div class="bsc50"><img src="Line.png" width="50%" height="80" alt=""/><img src="Line.png" width="50%" height="80" alt=""/></div>
<div class="bsc10"><a href="index.html"><img src="Home-b.png" alt="" width="225" height="79" id="hmb" onMouseOver="MM_swapImage('hmb','','Home-b1.png',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
<div class="bsc10"><a href="about.html"><img src="About b.png" alt="" width="226" height="80" id="abb" onMouseOver="MM_swapImage('abb','','About-b1.png',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
<div class="bsc10"><a href="works.html"><img src="Works-b.png" alt="" width="226" height="80" id="wkb" onMouseOver="MM_swapImage('wkb','','Works-b1.png',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
<div class="bsc10"><a href="contact.html"><img src="Contacts-b1.png" alt="" width="226" height="79" id="ctb" onMouseOver="MM_swapImage('ctb','','Contacts-b1.png',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
<div class="bsc10a"></div>
</nav><br><br>
<div class="nav2">
<div class="bsc33"></div>
<div class="bsc33"><img src="Contact-Bg.png" width="686" height="1000" alt=""/></div>
</div>
<div class="nav2"></div><div class="nav2"></div>
</div>
<div class="foot">
</div>
<video id="background-video" muted="muted" autoplay="autoplay" loop="loop" >
<source src="Butterfly.mp4" type="video/mp4">
</video>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.4.1.js"></script>
</body>
</html>
style.css
@charset "UTF-8";
#wrapper {
min-width: 100%;
min-height: 100%;
position: fixed;
right: 0px;
bottom: 0px;
}
.head {
position: fixed;
top: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
text-align: left;
}
.bdtxt1 {
font-size: 127px;
text-align: left;
text-indent: 0px;
border-style: none;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
font-style: normal;
font-weight: 400;
color: #C2C2C2;
text-shadow: 0px 0px 0px;
}
.bgimg1 .head .bsc150 {
float: left;
width: 150px;
height: 150px;
}
.head #wrap2 #sec1 {
width: 100%;
height: 1500px;
overflow-x: scroll;
}
.bgimg1 #wrapper #Head1 {
width: 1366px;
height: 20%;
background-color: #C77E7F;
}
.bgimg1 {
width: 100%;
height: 100%;
position: fixed;
overflow-y: hidden;
overflow-x: hidden;
text-align: center;
background-image: url(Background3%20copy.jpg);
}
#background-video {
position: fixed;
overflow-x: hidden;
overflow-y: hidden;
z-index: -1;
min-width: 100%;
min-height: 100%;
right: 0px;
bottom: 0px;
}
.bgimg1 .head #nav1 {
height: 50px;
width: 100%;
}
.head #nav1 .bsc50 {
width: 50%;
height: 50px;
float: left;
position: relative;
}
.head #nav1 .bsc5 {
width: 5%;
height: 50px;
float: left;
}
.head #nav1 .bsc10 {
float: left;
width: 10%;
height: 50px;
border-bottom-width: 0px;
position: relative;
}
.head #nav1 .bsc10a {
width: 10%;
height: 50px;
float: left;
}
.foot {
position: fixed;
bottom: 0;
color: #f1f1f1;
width: 100%;
padding: 20px;
text-align: center;
background-image: url(Footer.png);
height: 100px;
float: left;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
}
.bgimg1 .head .nav2 {
width: 100%;
height: 500px;
}
.head .nav2 .bsc6 {
width: 6%;
height: 500px;
float: left;
}
.head .nav2 .bsc41 {
float: left;
width: 41%;
height: 500px;
}
.bgimg1 .head #wrap2 {
text-align: center;
}
.head .nav2 .bsc33 {
width: 33%;
height: 500px;
float: left;
text-align: center
}
.head .nav2 .bsc10c {
width: 10%;
height: 500px;
float: left;
}
.head .nav2 .bsc20 {
width: 20%;
height: 500px;
float: left;
}
Protrait
Utilizing Adobe Photoshop, I embarked on a creative journey by drawing a portrait inspired by a photo reference found on Google. Infused with a unique color palette, this rendition of the original image explores a fresh artistic interpretation. Through meticulous digital drawing techniques and a deliberate departure from the reference colors, I reimagined the portrait, infusing it with a new vibrancy and emotional depth. This approach transformed the familiar image into a captivating and original artwork, showcasing both technical skill and artistic innovation within the realm of digital artistry.
Sporty Bot
Adhering to the model outline, I’ve customized the design for our stickers using Illustrator, ensuring precision and adherence to the outlined specifications. Leveraging Illustrator’s versatile tools, I’ve meticulously crafted a visually appealing sticker design tailored to our needs. Subsequently, utilizing Photoshop, I’ve seamlessly integrated the design onto the model for presentation purposes, enabling a realistic and vivid portrayal of the sticker’s appearance on the intended product. Once the design gains approval within the company, the next step involves liaising with the printing department. They will take precise measurements of the product size and proceed to print the stickers, ensuring a seamless and professional final product that meets our standards.
Horror
Crafted as a chilling horror poster, titled ‘Find,’ this design encapsulates a sense of terror and suspense. Integrating my own image, the poster portrays a haunting narrative, drawing viewers into an eerie and mysterious atmosphere. The name ‘Find’ is strategically emphasized in a striking red hue, reminiscent of blood, creating a stark contrast against the overall composition. This color choice adds a visceral and unsettling element, intensifying the ominous undertones and heightening the poster’s spine-chilling effect. Through meticulous editing techniques and a deliberate color palette, the design seeks to provoke a sense of dread, leaving a lasting impression on those who encounter its unsettling visual narrative.
