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