Use the attached files to copy the examples shown in our 'Getting Creative with Home Pages: Part 2' Blog Post.


Kaleidoscope Text:


Copy and paste the following code into your portal's Custom HTML box:

<main>
  <h1 class="text">
  Hello {{ContactName}}!
  </h1>
</main>

Copy and paste the following code into your portal's Custom CSS box:

.page-home .inside-page-content h1{
color:transparent;
}

.page-home {
  background: black;
  margin: 0;
}
main {
  height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.text {
  background: url(https://media.giphy.com/media/3o6Ztb45EYezY9x9gQ/giphy.gif);
  background-size: contain;
  background-position: top left;
  -webkit-background-clip: text;
  color: transparent;
  font-size: 200px;
  font-weight: bold;
  font-family: sans-serif;
}


Background-Colour-Changing Buttons:


Copy and paste the following code into your portal's Custom HTML box:

<nav class="menubuttons">
    <a href="#" class="menu__item menu__item--yellow menu__item--active" data-background="e4a924">
     <svg xmlns="http://www.w3.org/2000/svg" id="Capa_1" style="" viewBox="0 0 460.298 460.297" x="0px" y="0px" width="460.298px" height="460.297px" xmlns:xml="http://www.w3.org/XML/1998/namespace" xml:space="preserve" version="1.1">
<g>
  <g>
    <path d="M 230.149 120.939 L 65.986 256.274 c 0 0.191 -0.048 0.472 -0.144 0.855 c -0.094 0.38 -0.144 0.656 -0.144 0.852 v 137.041 c 0 4.948 1.809 9.236 5.426 12.847 c 3.616 3.613 7.898 5.431 12.847 5.431 h 109.63 V 303.664 h 73.097 v 109.64 h 109.629 c 4.948 0 9.236 -1.814 12.847 -5.435 c 3.617 -3.607 5.432 -7.898 5.432 -12.847 V 257.981 c 0 -0.76 -0.104 -1.334 -0.288 -1.707 L 230.149 120.939 Z" />
    
  </g>
</g><path d="M 457.122 225.438 L 394.6 173.476 V 56.989 c 0 -2.663 -0.856 -4.853 -2.574 -6.567 c -1.704 -1.712 -3.894 -2.568 -6.563 -2.568 h -54.816 c -2.666 0 -4.855 0.856 -6.57 2.568 c -1.711 1.714 -2.566 3.905 -2.566 6.567 v 55.673 l -69.662 -58.245 c -6.084 -4.949 -13.318 -7.423 -21.694 -7.423 c -8.375 0 -15.608 2.474 -21.698 7.423 L 3.172 225.438 c -1.903 1.52 -2.946 3.566 -3.14 6.136 c -0.193 2.568 0.472 4.811 1.997 6.713 l 17.701 21.128 c 1.525 1.712 3.521 2.759 5.996 3.142 c 2.285 0.192 4.57 -0.476 6.855 -1.998 L 230.149 95.817 l 197.57 164.741 c 1.526 1.328 3.521 1.991 5.996 1.991 h 0.858 c 2.471 -0.376 4.463 -1.43 5.996 -3.138 l 17.703 -21.125 c 1.522 -1.906 2.189 -4.145 1.991 -6.716 C 460.068 229.007 459.021 226.961 457.122 225.438 Z" />
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
    </a>
    <a href="/ProductList.aspx" class="menu__item menu__item--red" data-background="c92142">
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="475.084px" height="475.085px" viewBox="0 0 475.084 475.085" style="enable-background:new 0 0 475.084 475.085;" xml:space="preserve">
<g>
  <g>
    <path d="M365.446,401.998c0,10.092,3.579,18.702,10.711,25.834c7.132,7.139,15.749,10.711,25.845,10.711    c10.081,0,18.698-3.572,25.83-10.711c7.139-7.132,10.711-15.742,10.711-25.834s-3.568-18.702-10.711-25.841    c-7.132-7.132-15.749-10.704-25.83-10.704c-10.096,0-18.713,3.572-25.845,10.704C369.025,383.296,365.446,391.906,365.446,401.998    z"/>
    <path d="M469.658,78.51c-3.618-3.617-7.898-5.426-12.848-5.426H113.918c-0.193-1.331-0.621-3.756-1.287-7.277    c-0.666-3.523-1.188-6.329-1.569-8.425c-0.383-2.087-1.093-4.611-2.142-7.561c-1.047-2.952-2.284-5.286-3.711-6.995    c-1.425-1.718-3.328-3.189-5.708-4.43c-2.378-1.233-5.092-1.853-8.136-1.853H18.276c-4.952,0-9.234,1.812-12.85,5.424    C1.809,45.583,0,49.868,0,54.816s1.809,9.231,5.426,12.847c3.619,3.617,7.902,5.424,12.85,5.424h58.237l50.532,234.976    c-0.378,0.76-2.329,4.373-5.852,10.848c-3.521,6.475-6.328,12.135-8.42,16.988c-2.093,4.859-3.14,8.616-3.14,11.279    c0,4.948,1.809,9.232,5.424,12.854c3.621,3.606,7.902,5.421,12.851,5.421h18.272h255.815h18.261c4.948,0,9.232-1.814,12.847-5.421    c3.62-3.621,5.427-7.905,5.427-12.854c0-4.949-1.807-9.233-5.427-12.847c-3.614-3.614-7.898-5.428-12.847-5.428h-262.66    c4.57-9.138,6.854-15.222,6.854-18.268c0-1.909-0.238-4.004-0.715-6.283s-1.047-4.805-1.713-7.569    c-0.667-2.752-1.093-4.799-1.283-6.133l298.077-34.831c4.753-0.575,8.658-2.614,11.703-6.14c3.046-3.518,4.565-7.562,4.565-12.133    V91.363C475.082,86.415,473.278,82.132,469.658,78.51z"/>
    <path d="M109.632,401.998c0,10.092,3.567,18.702,10.706,25.834c7.141,7.139,15.75,10.711,25.841,10.711    c10.085,0,18.699-3.572,25.835-10.711c7.139-7.132,10.71-15.742,10.71-25.834s-3.568-18.702-10.71-25.841    c-7.137-7.132-15.75-10.704-25.835-10.704c-10.09,0-18.704,3.572-25.841,10.704C113.203,383.296,109.632,391.906,109.632,401.998z    "/>
  </g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
    </a>
    <a id="profilelink" class="menu__item menu__item--green" data-background="37b983">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <g id="Bounding_Boxes"> <g id="ui_x5F_spec_x5F_header_copy_2"> </g> <path fill="none" d="M0,0h24v24H0V0z"/> </g> <g id="Rounded"> <path d="M12,12c2.21,0,4-1.79,4-4s-1.79-4-4-4S8,5.79,8,8S9.79,12,12,12z M12,14c-2.67,0-8,1.34-8,4v1c0,0.55,0.45,1,1,1h14 c0.55,0,1-0.45,1-1v-1C20,15.34,14.67,14,12,14z"/> </g> </svg> 
    </a>
    <a href="https://dmg.orderprintnow.com/PortalPage.aspx?PortalPageId=044141d8-9cf2-40dc-9c4a-069635c4e8f3&PortalId=90ef91db-a399-40a4-98d3-364da3cef9ab" class="menu__item menu__item--purple" data-background="9f32b8">
       <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <g id="Bounding_Boxes"> <g id="ui_x5F_spec_x5F_header_copy_2"> </g> <path fill="none" d="M0,0h24v24H0V0z"/> </g> <g id="Rounded_1_"> <g id="ui_x5F_spec_x5F_header_copy_6"> </g> <path d="M20,2H4C2.9,2,2.01,2.9,2.01,4L2,22l4-4h14c1.1,0,2-0.9,2-2V4C22,2.9,21.1,2,20,2z M7,9h10c0.55,0,1,0.45,1,1v0 c0,0.55-0.45,1-1,1H7c-0.55,0-1-0.45-1-1v0C6,9.45,6.45,9,7,9z M13,14H7c-0.55,0-1-0.45-1-1v0c0-0.55,0.45-1,1-1h6 c0.55,0,1,0.45,1,1v0C14,13.55,13.55,14,13,14z M17,8H7C6.45,8,6,7.55,6,7v0c0-0.55,0.45-1,1-1h10c0.55,0,1,0.45,1,1v0 C18,7.55,17.55,8,17,8z"/> </g> </svg>
    </a>
  </nav>

Copy and paste the following code into your portal's Custom CSS box:

.page-portalpage-044141d8-9cf2-40dc-9c4a-069635c4e8f3 container {width:100%;padding:0px;margin:0px;}

.page-home .inside-page-content {
  height: 90vh;
  font-size: 1.3vw;

}

@media (min-width: 768px) {
.page-home .inside-page-content {
    font-size: 62.5%;
  }
}

.page-home {
  background-color: #e4a924;
body {
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e4a924;
  transition: background-color 0.55s;
  will-change: background-color;
  margin: 0;
}
}


.menubuttons {
margin:20% 35% 0% 35%;
}

.menu__item {
  width: 8.5rem;
  height: 8.5rem;
  border-radius: 12.5rem;
  background: #f3f3f3;
  display: inline-block;
  margin-left: 1.1rem;
  animation-name: close;
  animation-duration: 0s;
  will-change: width background-color;
  transition: background 0.55s;
  vertical-align: top;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 1px rgba(0,0,0, 0.1);
}

.menu__item:first-child {
  margin-left: 0;
}

.menu__item--animate {
  animation-duration: 0.5s;
}

.menu__item--active {
  width: 17rem;
  animation-name: open;
}

@keyframes open {
  0% {width: 8.5rem;}
  40% {width: 18.5rem;}
  80% {width: 17rem;}
  100% {width: 17rem;}
}

@keyframes close {
  0% {width: 17rem;}
  40% {width: 7rem;}
  80% {width: 8.5rem;}
  100% {width: 8.5rem;}
}

.menu__item--active.menu__item--yellow { background: #fabe2b; }
.menu__item--active.menu__item--red { background: #f43768; }
.menu__item--active.menu__item--green { background: #45e1a3; }
.menu__item--active.menu__item--purple { background: #c152da; }

.menu__item svg {
  fill: #a6a6a6;
  width: 4.5rem;
  height: 4.5rem;
  transtiion: fill 0.55s;
  will-change: fill;
}

.menu__item--active svg {
  fill: #fffdfe;
}

.menu__item menu__item--red .menu__item--active menu__item--animate{
position:relative;
content:"Click here to Shop!";
}

Copy and paste the following code into your portal's Custom Javascript box:

function dmLoad(){ 
var insidepage = document.getElementsByClassName('inside-page-content');

const menuItems = document.querySelectorAll('.menu__item');
let menuItemActive = document.querySelector('.menu__item--active');

// ---
// App
// ---

for (var i = 0; i < menuItems.length; i++) {
  menuItems[i].addEventListener('click', buttonClick);
}

// ---------
// Functions
// ---------

function buttonClick() {
  if (!this.classList.contains('menu__item--active')) {
    document.body.style.backgroundColor = `#${this.getAttribute('data-background')}`

    menuItemActive.classList.remove('menu__item--active');
    this.classList.add('menu__item--active');

    menuItemActive.classList.add('menu__item--animate');
    this.classList.add('menu__item--animate');

    menuItemActive = this;
  }
}
var x = document.links.namedItem("ContentPlaceHolder1_hplProfileEdit").href;
document.getElementById("profilelink").href = x;
};

3D Product Carousel:


Copy and paste the following code into your portal's Custom HTML box:

<div id="drag-container">
  <div id="spin-container">
    <!-- Add your images here -->
    <img src="https://images.unsplash.com/photo-1556943418-0e5712249b9d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1049&q=80" alt="">
    <img src="https://images.unsplash.com/photo-1482876555840-f31c5ebbff1c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1051&q=80" alt="">
    <img src="https://images.unsplash.com/photo-1516409590654-e8d51fc2d25c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1012&q=80" alt="">
    <img src="https://images.unsplash.com/photo-1456456496250-d5e7c0a9b44d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1051&q=80" alt="">
    <img src="https://images.unsplash.com/photo-1469708105586-50396e970312?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="">
    <img src="https://images.unsplash.com/photo-1494830723470-a8f5b3918a99?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="">
    
    <!-- Example image with link -->
    <a target="_blank" href="https://images.unsplash.com/photo-1521685468847-de0a1a3c41a8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
      <img src="https://images.unsplash.com/photo-1521685468847-de0a1a3c41a8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="">
    </a>

    <img src="https://images.unsplash.com/photo-1543278418-d8f5bd77465d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="">

    <!-- Text at center of ground - if wanted -->
    <p> </p>
  </div>
  <div id="ground"></div>
</div>

Copy and paste the following code into your portal's Custom CSS box:

.page-home .container {
width:100%;
padding:0px;
margin:0px;
}

#ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder1_pnlCustomContent {
width:100%;
margin-top:15%;
}

#ContentPlaceHolder1_ContentPlaceHolder1_pnlCustomContent{
width:100%;
margin-top:15%;
}

.page-home .inside-page-content {
  height: 90vh;
  /* for touch screen */
  touch-action: none; 
}

.page-home .inside-page-content {
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #111;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

#drag-container, #spin-container {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: auto;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateX(-10deg);
          transform: rotateX(-10deg);
}

#drag-container img {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  line-height: 200px;
  font-size: 50px;
  text-align: center;
  -webkit-box-shadow: 0 0 8px #fff;
          box-shadow: 0 0 8px #fff;
  -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005);
}

#drag-container img:hover{
  -webkit-box-shadow: 0 0 15px #fffd;
          box-shadow: 0 0 15px #fffd;
  -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0007);
}

#drag-container p {
  font-family: Serif;
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%) rotateX(90deg);
          transform: translate(-50%,-50%) rotateX(90deg);
  color: #fff;
}

#ground {
  width: 900px;
  height: 900px;
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%) rotateX(90deg);
          transform: translate(-50%,-50%) rotateX(90deg);
  background: -webkit-radial-gradient(center center, farthest-side , #9993, transparent);
}



@-webkit-keyframes spin {
  from{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  } to{
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}

@keyframes spin {
  from{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  } to{
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
@-webkit-keyframes spinRevert {
  from{
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  } to{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
}
@keyframes spinRevert {
  from{
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  } to{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
}

Copy and paste the following code into your portal's Custom Javascript box:

function dmLoad() {

if ($('#drag-container').length > 0) {

// You can change global variables here:
var radius = 280; // how big of the radius
var autoRotate = true; // auto rotate or not
var rotateSpeed = -60; // unit: seconds/360 degrees
var imgWidth = 180; // width of images (unit: px)
var imgHeight = 180; // height of images (unit: px)
var bgMusicURL = null;
var bgMusicControls = true; 


// ===================== start =======================
// animation start after 1000 milis
setTimeout(init, 1000);

var odrag = document.getElementById('drag-container');
var ospin = document.getElementById('spin-container');
var aImg = ospin.getElementsByTagName('img');
var aVid = ospin.getElementsByTagName('video');
var aEle = [...aImg, ...aVid]; // combine 2 arrays

// Size of images
ospin.style.width = imgWidth + "px";
ospin.style.height = imgHeight + "px";

// Size of ground - depend on radius
var ground = document.getElementById('ground');
ground.style.width = radius * 3 + "px";
ground.style.height = radius * 3 + "px";

function init(delayTime) {
  for (var i = 0; i < aEle.length; i++) {
    aEle[i].style.transform = "rotateY(" + (i * (360 / aEle.length)) + "deg) translateZ(" + radius + "px)";
    aEle[i].style.transition = "transform 1s";
    aEle[i].style.transitionDelay = delayTime || (aEle.length - i) / 4 + "s";
  }
}

function applyTranform(obj) {
  // Constrain the angle of camera (between 0 and 180)
  if(tY > 180) tY = 180;
  if(tY < 0) tY = 0;

  // Apply the angle
  obj.style.transform = "rotateX(" + (-tY) + "deg) rotateY(" + (tX) + "deg)";
}

function playSpin(yes) {
  ospin.style.animationPlayState = (yes?'running':'paused');
}

var sX, sY, nX, nY, desX = 0,
    desY = 0,
    tX = 0,
    tY = 10;

// auto spin
if (autoRotate) {
  var animationName = (rotateSpeed > 0 ? 'spin' : 'spinRevert');
  ospin.style.animation = `${animationName} ${Math.abs(rotateSpeed)}s infinite linear`;
}

// add background music
if (bgMusicURL) {
  document.getElementById('music-container').innerHTML += `
<audio src="${bgMusicURL}" ${bgMusicControls? 'controls': ''} autoplay loop>    
<p>If you are reading this, it is because your browser does not support the audio element.</p>
</audio>
`;
}

// setup events
document.onpointerdown = function (e) {
  clearInterval(odrag.timer);
  e = e || window.event;
  var sX = e.clientX,
      sY = e.clientY;

  this.onpointermove = function (e) {
    e = e || window.event;
    var nX = e.clientX,
        nY = e.clientY;
    desX = nX - sX;
    desY = nY - sY;
    tX += desX * 0.1;
    tY += desY * 0.1;
    applyTranform(odrag);
    sX = nX;
    sY = nY;
  };

  this.onpointerup = function (e) {
    odrag.timer = setInterval(function () {
      desX *= 0.95;
      desY *= 0.95;
      tX += desX * 0.1;
      tY += desY * 0.1;
      applyTranform(odrag);
      playSpin(false);
      if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) {
        clearInterval(odrag.timer);
        playSpin(true);
      }
    }, 17);
    this.onpointermove = this.onpointerup = null;
  };

  return false;
};

document.onmousewheel = function(e) {
  e = e || window.event;
  var d = e.wheelDelta / 20 || -e.detail;
  radius += d;
  init(1);
};
}
};