Blog

Squarespace Default "Code Block" Display

I really wanted to see how code displays on the Squarespace platform, straight out of the box. Here is HTML, CSS, and Javascript displaying utilizing the Squarespace code block on a white template.

Squarespace' block selection > More Category > Code

Squarespace' block selection > More Category > Code

 

HTML

<article>
  <h1>First Item</h1>
  <p>This is the first item description.</p>
</article>
<article>
  <h1>Second item</h1>
  <p>This is the second item description.</p>
</article>
<article>
  <h1>Third Item</h1>
  <p>This is the third item description.</p>
</article>

CSS

.drop-shadow.top {
  box-shadow: 0 -4px 2px -2px rgba(0,0,0,0.4);
}

.drop-shadow.right {
  box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4);
}

.drop-shadow.bottom {
  box-shadow: 0 4px 2px -2px rgba(0,0,0,0.4);
}

.drop-shadow.left {
  box-shadow: -4px 0 2px -2px rgba(0,0,0,0.4);
}

Java Script

function getLink() {
  // constructs unique page using name and choice of music - SECTION A.2
  temp = muresources[choice] temp2 = "<TITLE>Custom Links</TITLE><H3>" +document.m.pername.value+", here are some links for you</H3><P>"+temp
}
Brian Bustos1 Comment