How to add Codepen code my website?

Hello, I want to use this code on my website's homepage. https://codepen.io/kseniacold/pen/QKNKow

Not sure where to paste the various HTML, CSS & JS codes.

Thanks for any help!

Add Code Block > paste all code

<main class="page">
    <div class="row">
      <div class="col-md-12">
        <div class="mood-board">
          <div class="title">
              <h1 class="align-center">From Trouville-sur-Mer</h1>
          </div>
          <!-- Start of Mood Board Bg -->
          <div id="background" class="images">

            <div  class="draggable resizeable element">
              <img src="//static1.squarespace.com/static/543870a5e4b0a877b5a652d9/t/57d990802994cae5530aa4d3/1473876096339/5706067294_df3f598fc3.jpg" alt="" />
            </div>
            <div  class="draggable resizeable element">
              <img src="//static1.squarespace.com/static/543870a5e4b0a877b5a652d9/t/57d9909e2994cae5530aa608/1473876127131/visitez-la-cotes-basquesss.JPG" alt="" />
            </div>
            <div  class="draggable resizeable element">
              <img src="//static1.squarespace.com/static/543870a5e4b0a877b5a652d9/t/57d990ad2994cae5530aa6b6/1473876141612/tumblr_inline_nmr7wkhRzo1r2u8iv_500.jpg" alt="" />
            </div>
            <div  class="draggable resizeable element">
              <img src="//static1.squarespace.com/static/543870a5e4b0a877b5a652d9/t/57d990bd2994cae5530aa7eb/1473876157299/9718096_2.jpg" alt="" />
            </div>
            <div  class="draggable resizeable element">
              <img src="//static1.squarespace.com/static/543870a5e4b0a877b5a652d9/t/57d990db2994cae5530aaab7/1473876187333/Bernard-Villemot-portrait-affichiste-graphiste-FR-index-grafik.jpg" alt="Bernard-Villemot-portrait" />
              <p class="description">
                <i>Bernard Villemot – French graphic artist (1911 - 1989).</i>     
              </p>
            </div>
            <div  class="draggable resizeable element">
              <img src="//static1.squarespace.com/static/543870a5e4b0a877b5a652d9/t/57d990e72994cae5530aab4b/1473876200141/orangina.jpg" alt="Orangina" />
            </div>
            <div  class="draggable resizeable element">
              <img src="//static1.squarespace.com/static/543870a5e4b0a877b5a652d9/t/57d990fd2994cae5530aac9c/1473876222103/bergasol.jpg" alt="Bergazol" />
            </div>
            <div  class="draggable resizeable element">
              <img src="//static1.squarespace.com/static/543870a5e4b0a877b5a652d9/t/57d991092994cae5530aad29/1473876233277/perrier.jpg" alt="Perrie" />
            </div>

          </div>
          <!-- Mood board Bg ends -->

        </div>
      </div>
    </div>
  </main>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.theme.css"/>
<style>
  /*
==============================================
Fonts Installation
==============================================
*/
@import "https://fonts.googleapis.com/css?family=Droid+Serif";
@font-face {
  font-family: 'Bodoni';
  src: url("//static1.squarespace.com/static/543870a5e4b0a877b5a652d9/t/57dad241414fb5d694751ab7/1473958465275/BodoniFLF-Roman.ttf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Bodoni Bold';
  src: url("//static1.squarespace.com/static/543870a5e4b0a877b5a652d9/t/57dad236414fb5d694751a44/1473958454896/BodoniFLF-Bold.ttf");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Bodoni Italic';
  src: url("//static1.squarespace.com/static/543870a5e4b0a877b5a652d9/t/57dad23b414fb5d694751a73/1473958460144/BodoniFLF-Italic.ttf");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'Bodoni Bold Italic';
  src: url("//static1.squarespace.com/static/543870a5e4b0a877b5a652d9/t/57dad231414fb5d694751a13/1473958449544/BodoniFLF-BoldItalic.ttf");
  font-weight: bold;
  font-style: italic;
}
/*
==============================================
Variables
==============================================
*/
/*
==============================================
Mixins
==============================================
*/
/*
==============================================
Overall styles
==============================================
*/
.align-center {
  text-align: center;
}

h1 {
  font-family: "Bodoni Bold", Garamond, "Times New Roman", serif;
  font-size: 7vw;
  color: #000;
  letter-spacing: -0.02em;
}

p {
  font-family: "Bodoni Italic", Garamond, "Times New Roman", serif;
  font-size: 0.8em;
  font-style: italic;
  padding-top: 0.5em;
  letter-spacing: 0.09em;
}

.description {
  display: none;
}

.mood-board {
  width: 100%;
  height: 100vh;
  background: #ffeecc;
  position: relative;
}
.mood-board .title {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 40vh;
}
.mood-board .images {
  position: absolute;
  top: 0;
  bottom: auto;
  left: 0;
  right: auto;
  margin: auto;
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}
.mood-board .element {
  position: absolute;
  z-index: 0;
}
.mood-board .element:hover .description {
  display: block;
}
.mood-board .element img {
  width: 100%;
  height: 100%;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script src="https://kseniaksenia.squarespace.com/s/jqueryuitouch-punchmin.js"></script>
<script>
  $(document).ready(function() {
  var draggable = $('.draggable');
  var resizable = $('.resizeable');
  var element = $('.element');

  element.each( setRandomSize );
  element.each( setRandomPosition );
  
  resizable.resizable({
        containment: "#background",
        aspectRatio: true,
        handles: "n, w, s, e"
  });

  draggable.draggable({
      cursor: "move",
      containment: "#background",
      stack: ".element",
  });
  if(window.innerHeight > window.innerWidth){
    
  }

  function setRandomSize(){
    //Get IMG size
    var img = $(this).find('img');
    imgHeight = img.outerHeight();
    imgWidth = img.outerWidth();
    
    if(window.innerHeight > window.innerWidth){
      //Generate random Width % [10, 60]
      var randomWidth = randomIntFromInterval(10, 60);
      $(this).css({
        width: randomWidth + '%'
      });
    } else {
      //Change Height to [100, 330] randomly
      var randomHeight = randomIntFromInterval(100, 330);
      //Calc proportional width
      var proportionalWidth = (imgWidth * randomHeight) / imgHeight; 
      $(this).css({
        height: randomHeight + 'px',
        width: proportionalWidth + 'px'
      });
    }
    
  }

  function setRandomPosition(){
    //Generate random Top % [0, 75]
    var randomTop = randomIntFromInterval(0, 75);
    //Generate randon Left % [0, 85]
    var randomLeft = randomIntFromInterval(0, 75);
    $(this).css({
      top: randomTop + '%',
      left: randomLeft + '%'
    })
  }

  function randomIntFromInterval(min,max) {
    return Math.floor(Math.random()*(max-min+1)+min);
  }

});
</script>

It uses some external JS library & CSS. This can cause problems when editing or adding blocks.

Can you do the same for https://codepen.io/c-corcoran10/pen/mdrBOmV

I have no idea how to get it integrate onto my site!

On 12/23/2020 at 10:56 PM, ConorCOCO said:

Can you do the same for https://codepen.io/c-corcoran10/pen/mdrBOmV

I have no idea how to get it integrate onto my site!

 

Use this code into Code Block

<div class="leaderboard">
  <header>
    <img src="https://cdn.shopify.com/s/files/1/0480/1462/2880/files/Banner-removebg-preview_500x.png?v=1600515112" alt"">
    <nav>
      <a href="" class="active">Male</a>
      <a href="">Female</a>
    </nav>
  </header>
  <table> 
  <thead>
    <tr>
    <th class="Rank"></th>
    <th class="Name">Name</th>
    <th class="Score">Score</th>
    </tr>
    </thead>
    <tbody>
      <tr>
        <td class="rank">1</td>
        <td class="name">Conor Corcoran</td>
        <td class="score">19:24</td>
      </tr>
       <tr>
        <td class="rank">2</td>
        <td class="name">James Norton </td>
        <td class="score">18:34</td>
      </tr>
      <tr>
        <td class="rank">3</td>
        <td class="name">Jack McGrath</td>
        <td class="score">21:30</td>
      </tr>
      <tr>
        <td class="rank">4</td>
        <td class="name">Conor Corcoran</td>
        <td class="score">19:24</td>
      </tr>
       <tr>
        <td class="rank">5</td>
        <td class="name">James Norton </td>
        <td class="score">18:34</td>
      </tr>
      <tr>
        <td class="rank">6</td>
        <td class="name">Jack McGrath</td>
        <td class="score">21:30</td>
      </tr>
      <tr>
        <td class="rank">7</td>
        <td class="name">Conor Corcoran</td>
        <td class="score">19:24</td>
      </tr>
       <tr>
        <td class="rank">8</td>
        <td class="name">James Norton </td>
        <td class="score">18:34</td>
      </tr>
      <tr>
        <td class="rank">9</td>
        <td class="name">Jack McGrath</td>
        <td class="score">21:30</td>
      </tr>
    </tbody>
  </table>
</div>
<style>
  .leaderboard *{ 
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  
}

.leaderboard {
  max-width: 25rem;
  margin: 5rem auto;
  border-radius: 1rem;
  box-shadow: 2px 2px 16px 1px #111;
  font-family: sans-serif;
}

.leaderboard a {
  text-decoration: none;
  color: #FFFFFF;
 }

.leaderboard header{
  background-color: #000000;
  text-transform: uppercase;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  height: 15rem;
  positive: relative;
}

.leaderboard nav a{
  font-size: 0.9rem;
}

.leaderboard nav a+a{
  margin-left: 0.5rem;
}


.leaderboard img{
  height: 16rem;
  position: absolute;
  padding-top: 1rem;
  padding-bottom: 1.5rem;
}

.leaderboard nav{
  position: absolute;
  padding-top: 1rem;
  font-size: 0.9rem;
}

.leaderboard nav a{
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  display: inline-block;
  font-weight: bold;
}


.leaderboard nav a:first-child {
  margin-left: 1rem;
 
}

.leaderboard a.active {
  border-bottom: 4px solid #368BAB;
}

.leaderboard table{
  background-color: #16181e;
  color: #000000;
  width: 100%;
  border-collapse: collapse;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  overflow: hidden;
}

.leaderboard thead{
  font-size: 0.75rem;
  color: #FFFFFF;
  text-transform: uppercase;
  text-align: left;
  
}

.leaderboard tbody .name{
  color: white;
  font-weight: bold;
}

.leaderboard tbody .score{
  color: white;
  font-weight: bold;
}

.leaderboard tbody .rank{
  color: #55B6DA;
  font-weight: bold;
}

.leaderboard tbody tr:nth-child(2n) {
  background-color: #1f232c;
}

.name {
  text-align: left;
}

.score, 
.gender, {
  text-align: right;
}

.leaderboard th{
  padding: 1rem 1rem;
}

.leaderboard td{
  padding: 1rem 1rem;
}

</style>

Hey @tuanphan can you help me add my codepen as well?  Thanks! 

https://codepen.io/daviddcarr/pen/XVyQMM

On 5/12/2021 at 6:15 AM, ninety9stclaire said:

Hey @tuanphan can you help me add my codepen as well?  Thanks! 

 

https://codepen.io/daviddcarr/pen/XVyQMM

Add a Code Block >> Paste this CodePen code

<div class="container py-5">
  <div class="output" id="output">
    <h1 class="cursor"></h1>
    <p></p>
  </div>
</div>
<style>
  .output {
  text-align: center;
  font-family: "Source Code Pro", monospace;
  color: white;
}
.output h1 {
  font-size: 30px;
}

/* Cursor Styling */
.cursor::after {
  content: "";
  display: inline-block;
  margin-left: 3px;
  background-color: white;
  animation-name: blink;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
}

h1.cursor::after {
  height: 24px;
  width: 13px;
}

p.cursor::after {
  height: 13px;
  width: 6px;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  49% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  // values to keep track of the number of letters typed, which quote to use. etc. Don't change these values.
var i = 0,
    a = 0,
    isBackspacing = false,
    isParagraph = false;

// Typerwrite text content. Use a pipe to indicate the start of the second line "|".  
var textArray = [
  "What do you call an alligator wearing a vest?|An Investigator", 
  "What do you call a fake noodle?|An Impasta", 
  "Why shouldn't you write with a broken pencil?|Because it's pointless",
  "Why couldn't the pirate finish the alphabet?|He kept getting lost a C",
  "What's brown and sticky?|A stick",
  "What starts with an E, ends with an E and has one letter in it?|An Envelope",
  "What has four wheels, and flies?|A Garbage truck",
  "What do you call a pig that knows Karate?|Pork Chop",
  "Why did the scarecrow get promoted?|He was out standing in his field.",
  "I have a step ladder|I never knew my real ladder.",
  "What kind of shoes do ninjas wear?|Sneakers"
];

// Speed (in milliseconds) of typing.
var speedForward = 100, //Typing Speed
    speedWait = 1000, // Wait between typing and backspacing
    speedBetweenLines = 1000, //Wait between first and second lines
    speedBackspace = 25; //Backspace Speed

//Run the loop
typeWriter("output", textArray);

function typeWriter(id, ar) {
  var element = $("#" + id),
      aString = ar[a],
      eHeader = element.children("h1"), //Header element
      eParagraph = element.children("p"); //Subheader element
  
  // Determine if animation should be typing or backspacing
  if (!isBackspacing) {
    
    // If full string hasn't yet been typed out, continue typing
    if (i < aString.length) {
      
      // If character about to be typed is a pipe, switch to second line and continue.
      if (aString.charAt(i) == "|") {
        isParagraph = true;
        eHeader.removeClass("cursor");
        eParagraph.addClass("cursor");
        i++;
        setTimeout(function(){ typeWriter(id, ar); }, speedBetweenLines);
        
      // If character isn't a pipe, continue typing.
      } else {
        // Type header or subheader depending on whether pipe has been detected
        if (!isParagraph) {
          eHeader.text(eHeader.text() + aString.charAt(i));
        } else {
          eParagraph.text(eParagraph.text() + aString.charAt(i));
        }
        i++;
        setTimeout(function(){ typeWriter(id, ar); }, speedForward);
      }
      
    // If full string has been typed, switch to backspace mode.
    } else if (i == aString.length) {
      
      isBackspacing = true;
      setTimeout(function(){ typeWriter(id, ar); }, speedWait);
      
    }
    
  // If backspacing is enabled
  } else {
    
    // If either the header or the paragraph still has text, continue backspacing
    if (eHeader.text().length > 0 || eParagraph.text().length > 0) {
      
      // If paragraph still has text, continue erasing, otherwise switch to the header.
      if (eParagraph.text().length > 0) {
        eParagraph.text(eParagraph.text().substring(0, eParagraph.text().length - 1));
      } else if (eHeader.text().length > 0) {
        eParagraph.removeClass("cursor");
        eHeader.addClass("cursor");
        eHeader.text(eHeader.text().substring(0, eHeader.text().length - 1));
      }
      setTimeout(function(){ typeWriter(id, ar); }, speedBackspace);
    
    // If neither head or paragraph still has text, switch to next quote in array and start typing.
    } else { 
      
      isBackspacing = false;
      i = 0;
      isParagraph = false;
      a = (a + 1) % ar.length; //Moves to next position in array, always looping back to 0
      setTimeout(function(){ typeWriter(id, ar); }, 50);
      
    }
  }
}
</script>

@tuanphan-- Do you mind helping me? Here is mine.

https://codepen.io/stl_dohm/pen/dyvMgzP

On 5/14/2021 at 11:39 PM, StevieD said:

@tuanphan-- Do you mind helping me? Here is mine.

 

https://codepen.io/stl_dohm/pen/dyvMgzP

 

 

Add a Code Block >> Paste this code

<section class="cd-intro">
		<h1 class="cd-headline letters type">
			<div class="shrink">A teacher needs help</div> 
			<div class="cd-words-wrapper waiting">
				<b class="is-visible">Working Facebook</b>
        <b>building a class jeopardy game</b>
        <b>installing an update</b>
        <b>getting feedback from students</b>
        <b>making a presentation</b>
        <b>connecting to Zoom</b>
        <b>finding an app</b>
        <b>syncing a Smartboard</b>
        <b>recording a video</b>
        <b>connecting a printer</b>
        <b>resetting a Chromebook</b>
        <b>posting an assignment</b>
        <b>testing a program</b>
        <b>creating a survey</b>
        <b>contacting a parent</b>
        <b>organizing files</b>
			</div>
      <div class="shrink">so a Student Tech Leader provides immediate support.</div>
		</h1>
	</section> <!-- cd-intro -->
<style>
  /* -------------------------------- 

Primary style

-------------------------------- */
.cd-intro *,.cd-intro *::after, .cd-intro*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.cd-intro * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.shrink {
 font-size: 32.5% 
}

.cd-intro b {
 font-size: 32.5% 
}

.cd-intro a {
  text-decoration: none;
}

.cd-title {
  position: relative;
  text-align: center;
}
.cd-title h1 {
  font-size: 2.4rem;
  font-weight: 700;
}
@media only screen and (min-width: 768px) {
  .cd-title {
    line-height: 250px;
  }
}
@media only screen and (min-width: 1170px) {
  .cd-title {
    height: 200px;
    line-height: 300px;
  }
  .cd-title h1 {
    font-size: 3rem;
  }
}

.cd-intro {
  width: 90%;
  max-width: 768px;
  text-align: center;
}

.cd-intro {
  margin: 4em auto;
}
@media only screen and (min-width: 768px) {
  .cd-intro {
    margin: 5em auto;
  }
}
@media only screen and (min-width: 1170px) {
  .cd-intro {
    margin: 6em auto;
  }
}

.cd-headline {
  font-size: 3rem;
  line-height: .7;
}
@media only screen and (min-width: 768px) {
  .cd-headline {
    font-size: 4.4rem;
    font-weight: 300;
  }
}
@media only screen and (min-width: 1170px) {
  .cd-headline {
    font-size: 6rem;
  }
}

.cd-words-wrapper {
  display: inline-block;
  position: relative;
  text-align: left;
}
.cd-words-wrapper b {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
  left: 0;
  top: -25px;
  bottom: 0px;
  
}
.cd-words-wrapper b.is-visible {
  position: relative;
}
.no-js .cd-words-wrapper b {
  opacity: 0;
  
}
.no-js .cd-words-wrapper b.is-visible {
  opacity: 1;
}


/* -------------------------------- 

xtype 

-------------------------------- */
.cd-headline.type .cd-words-wrapper {
  vertical-align: top;
  overflow: hidden;
}
.cd-headline.type .cd-words-wrapper::after {
  /* vertical pulsating cursor bar */
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 90%;
  width: 1px;
  background-color: #ffb91d;
}
.cd-headline.type .cd-words-wrapper.waiting::after {
  -webkit-animation: cd-pulse 1s infinite;
  -moz-animation: cd-pulse 1s infinite;
  animation: cd-pulse 1s infinite;
}
.cd-headline.type .cd-words-wrapper.selected {
  background-color: #aebcb9;
}
.cd-headline.type .cd-words-wrapper.selected::after {
  visibility: hidden;
}
.cd-headline.type .cd-words-wrapper.selected b {
  color: #0d0d0d;
}
.cd-headline.type b {
  visibility: hidden;
}
.cd-headline.type b.is-visible {
  visibility: visible;
}
.cd-headline.type i {
  position: absolute;
  visibility: hidden;
}
.cd-headline.type i.in {
  position: relative;
  visibility: visible;
}

@-webkit-keyframes cd-pulse {
  0% {
    -webkit-transform: translateY(-50%) scale(1);
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-50%) scale(0.9);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(-50%) scale(0);
    opacity: 0;
  }
}
@-moz-keyframes cd-pulse {
  0% {
    -moz-transform: translateY(-50%) scale(1);
    opacity: 1;
  }
  40% {
    -moz-transform: translateY(-50%) scale(0.9);
    opacity: 0;
  }
  100% {
    -moz-transform: translateY(-50%) scale(0);
    opacity: 0;
  }
}
@keyframes cd-pulse {
  0% {
    -webkit-transform: translateY(-50%) scale(1);
    -moz-transform: translateY(-50%) scale(1);
    -ms-transform: translateY(-50%) scale(1);
    -o-transform: translateY(-50%) scale(1);
    transform: translateY(-50%) scale(1);
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-50%) scale(0.9);
    -moz-transform: translateY(-50%) scale(0.9);
    -ms-transform: translateY(-50%) scale(0.9);
    -o-transform: translateY(-50%) scale(0.9);
    transform: translateY(-50%) scale(0.9);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(-50%) scale(0);
    -moz-transform: translateY(-50%) scale(0);
    -ms-transform: translateY(-50%) scale(0);
    -o-transform: translateY(-50%) scale(0);
    transform: translateY(-50%) scale(0);
    opacity: 0;
  }
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
	//set animation timing
	var animationDelay = 2500,
		//loading bar effect
		barAnimationDelay = 3800,
		barWaiting = barAnimationDelay - 3000, //3000 is the duration of the transition on the loading bar - set in the scss/css file
		//letters effect
		lettersDelay = 50,
		//type effect
		typeLettersDelay = 150,
		selectionDuration = 500,
		typeAnimationDelay = selectionDuration + 800,
		//clip effect 
		revealDuration = 600,
		revealAnimationDelay = 1500;
	
	initHeadline();
	

	function initHeadline() {
		//insert <i> element for each letter of a changing word
		singleLetters($('.cd-headline.letters').find('b'));
		//initialise headline animation
		animateHeadline($('.cd-headline'));
	}

	function singleLetters($words) {
		$words.each(function(){
			var word = $(this),
				letters = word.text().split(''),
				selected = word.hasClass('is-visible');
			for (i in letters) {
		
				letters[i] = (selected) ? '<i class="in">' + letters[i] + '</i>': '<i>' + letters[i] + '</i>';
			}
		    var newLetters = letters.join('');
		    word.html(newLetters).css('opacity', 1);
		});
	}

	function animateHeadline($headlines) {
		var duration = animationDelay;
		$headlines.each(function(){
			var headline = $(this);
			
			 if (!headline.hasClass('type') ) {
				//assign to .cd-words-wrapper the width of its longest word
				var words = headline.find('.cd-words-wrapper b'),
					width = 0;
				words.each(function(){
					var wordWidth = $(this).width();
				    if (wordWidth > width) width = wordWidth;
				});
				headline.find('.cd-words-wrapper').css('width', width);
			};

			//trigger animation
			setTimeout(function(){ hideWord( headline.find('.is-visible').eq(0) ) }, duration);
		});
	}

	function hideWord($word) {
		var nextWord = takeNext($word);
		
		if($word.parents('.cd-headline').hasClass('type')) {
			var parentSpan = $word.parent('.cd-words-wrapper');
			parentSpan.addClass('selected').removeClass('waiting');	
			setTimeout(function(){ 
				parentSpan.removeClass('selected'); 
				$word.removeClass('is-visible').addClass('is-hidden').children('i').removeClass('in').addClass('out');
			}, selectionDuration);
			setTimeout(function(){ showWord(nextWord, typeLettersDelay) }, typeAnimationDelay);
		
		} else if($word.parents('.cd-headline').hasClass('letters')) {
			var bool = ($word.children('i').length >= nextWord.children('i').length) ? true : false;
			hideLetter($word.find('i').eq(0), $word, bool, lettersDelay);
			showLetter(nextWord.find('i').eq(0), nextWord, bool, lettersDelay);

		}  else if($word.parents('.cd-headline').hasClass('clip')) {
			$word.parents('.cd-words-wrapper').animate({ width : '2px' }, revealDuration, function(){
				switchWord($word, nextWord);
				showWord(nextWord);
			});

		} else {
			switchWord($word, nextWord);
			setTimeout(function(){ hideWord(nextWord) }, animationDelay);
		}
	}

	function showWord($word, $duration) {
		if($word.parents('.cd-headline').hasClass('type')) {
			showLetter($word.find('i').eq(0), $word, false, $duration);
			$word.addClass('is-visible').removeClass('is-hidden');

		}  else if($word.parents('.cd-headline').hasClass('clip')) {
			$word.parents('.cd-words-wrapper').animate({ 'width' : $word.width() + 10 }, revealDuration, function(){ 
				setTimeout(function(){ hideWord($word) }, revealAnimationDelay); 
			});
		}
	}

	function hideLetter($letter, $word, $bool, $duration) {
		$letter.removeClass('in').addClass('out');
		
		if(!$letter.is(':last-child')) {
		 	setTimeout(function(){ hideLetter($letter.next(), $word, $bool, $duration); }, $duration);  
		} else if($bool) { 
		 	setTimeout(function(){ hideWord(takeNext($word)) }, animationDelay);
		}

		if($letter.is(':last-child') && $('html').hasClass('no-csstransitions')) {
			var nextWord = takeNext($word);
			switchWord($word, nextWord);
		} 
	}

	function showLetter($letter, $word, $bool, $duration) {
		$letter.addClass('in').removeClass('out');
		
		if(!$letter.is(':last-child')) { 
			setTimeout(function(){ showLetter($letter.next(), $word, $bool, $duration); }, $duration); 
		} else { 
			if($word.parents('.cd-headline').hasClass('type')) { setTimeout(function(){ $word.parents('.cd-words-wrapper').addClass('waiting'); }, 200);}
			if(!$bool) { setTimeout(function(){ hideWord($word) }, animationDelay) }
		}
	}

	function takeNext($word) {
		return (!$word.is(':last-child')) ? $word.next() : $word.parent().children().eq(0);
	}

	function takePrev($word) {
		return (!$word.is(':first-child')) ? $word.prev() : $word.parent().children().last();
	}

	function switchWord($oldWord, $newWord) {
		$oldWord.removeClass('is-visible').addClass('is-hidden');
		$newWord.removeClass('is-hidden').addClass('is-visible');
	}
});
</script>

@tuanphan-- Would love your help. I have been trying to understand what you did with the other codepens and figured out that you added a jquery for the javascript, but I can't get this one to work. Here is my codepen code:

https://codepen.io/RobinTreur/pen/pyWLeB

Also, this is in Squarespace 7.1 which had me playing with
#collections and section:nth-of-type(1)

18 hours ago, nealteneyck said:

@tuanphan-- Would love your help. I have been trying to understand what you did with the other codepens and figured out that you added a jquery for the javascript, but I can't get this one to work. Here is my codepen code:

https://codepen.io/RobinTreur/pen/pyWLeB

Also, this is in Squarespace 7.1 which had me playing with
#collections and section:nth-of-type(1)

 

Use this

<section class="tcontainer">
  <h1>
    <span class="title">This is</span>
    <span class="title">a long</span>
    <span class="title">long title</span>
  </h1>
  
  <div class="button">restart</div>
</section>
<style>
  .tcontainer {
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  display: block;
  position: absolute;
  max-width: 225px;
}

.button {
  float: left;
  position: relative;
  bottom: -65px;
  left: 50%;
  transform: translateX(-50%) rotate(-10deg);
  color: #e55643;
  text-transform: uppercase;
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
}
.button span {
  transform: skew(-10deg);
  display: block;
  float: left;
  text-shadow: #533d4a 1px 1px, #533d4a 2px 2px, #533d4a 3px 3px, #533d4a 4px 4px;
}

h1 {
  color: #fff;
  text-transform: uppercase;
  font-size: 42px;
  margin: 0;
  line-height: 47px;
  letter-spacing: 2px;
}

.title {
  transform: translateX(-50%) rotate(-10deg);
  display: block;
  float: left;
  left: 50%;
  position: relative;
}
.title span {
  transform: skew(-10deg);
  display: block;
  float: left;
  text-shadow: #533d4a 1px 1px, #533d4a 2px 2px, #533d4a 3px 3px, #533d4a 4px 4px, #533d4a 5px 5px, #533d4a 6px 6px;
  min-width: 10px;
  min-height: 10px;
  position: relative;
}

.title:nth-child(1) {
  color: #e55643;
}
.title:nth-child(2) {
  color: #2b9f5e;
}
.title:nth-child(3) {
  color: #f1c83c;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js"></script>
<script>
  $(document).ready(function() {
  $(".title").lettering();
  $(".button").lettering();
});





$(document).ready(function() {
  animation();
}, 1000);

$('.button').click(function() {
  animation();
});


function animation() {
  var title1 = new TimelineMax();
  title1.to(".button", 0, {visibility: 'hidden', opacity: 0})
  title1.staggerFromTo(".title span", 0.5, 
  {ease: Back.easeOut.config(1.7), opacity: 0, bottom: -80},
  {ease: Back.easeOut.config(1.7), opacity: 1, bottom: 0}, 0.05);
  title1.to(".button", 0.2, {visibility: 'visible' ,opacity: 1})
}
</script>

@tuanphan Thanks for the reply, I appreciate it.

I got this far before, but all the shadows and animation isn't coming through. Any suggestions? No big deal if this can't work, it is also breaking other code on my page.

On 5/24/2021 at 9:33 PM, nealteneyck said:

@tuanphan Thanks for the reply, I appreciate it.

I got this far before, but all the shadows and animation isn't coming through. Any suggestions? No big deal if this can't work, it is also breaking other code on my page.

Can you share link to page where you added Code Block? We can check easier

On 5/16/2021 at 5:01 AM, tuanphan said:

Add a Code Block >> Paste this code

<section class="cd-intro">
		<h1 class="cd-headline letters type">
			<div class="shrink">A teacher needs help</div> 
			<div class="cd-words-wrapper waiting">
				<b class="is-visible">Working Facebook</b>
        <b>building a class jeopardy game</b>
        <b>installing an update</b>
        <b>getting feedback from students</b>
        <b>making a presentation</b>
        <b>connecting to Zoom</b>
        <b>finding an app</b>
        <b>syncing a Smartboard</b>
        <b>recording a video</b>
        <b>connecting a printer</b>
        <b>resetting a Chromebook</b>
        <b>posting an assignment</b>
        <b>testing a program</b>
        <b>creating a survey</b>
        <b>contacting a parent</b>
        <b>organizing files</b>
			</div>
      <div class="shrink">so a Student Tech Leader provides immediate support.</div>
		</h1>
	</section> <!-- cd-intro -->
<style>
  /* -------------------------------- 

Primary style

-------------------------------- */
.cd-intro *,.cd-intro *::after, .cd-intro*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.cd-intro * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.shrink {
 font-size: 32.5% 
}

.cd-intro b {
 font-size: 32.5% 
}

.cd-intro a {
  text-decoration: none;
}

.cd-title {
  position: relative;
  text-align: center;
}
.cd-title h1 {
  font-size: 2.4rem;
  font-weight: 700;
}
@media only screen and (min-width: 768px) {
  .cd-title {
    line-height: 250px;
  }
}
@media only screen and (min-width: 1170px) {
  .cd-title {
    height: 200px;
    line-height: 300px;
  }
  .cd-title h1 {
    font-size: 3rem;
  }
}

.cd-intro {
  width: 90%;
  max-width: 768px;
  text-align: center;
}

.cd-intro {
  margin: 4em auto;
}
@media only screen and (min-width: 768px) {
  .cd-intro {
    margin: 5em auto;
  }
}
@media only screen and (min-width: 1170px) {
  .cd-intro {
    margin: 6em auto;
  }
}

.cd-headline {
  font-size: 3rem;
  line-height: .7;
}
@media only screen and (min-width: 768px) {
  .cd-headline {
    font-size: 4.4rem;
    font-weight: 300;
  }
}
@media only screen and (min-width: 1170px) {
  .cd-headline {
    font-size: 6rem;
  }
}

.cd-words-wrapper {
  display: inline-block;
  position: relative;
  text-align: left;
}
.cd-words-wrapper b {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
  left: 0;
  top: -25px;
  bottom: 0px;
  
}
.cd-words-wrapper b.is-visible {
  position: relative;
}
.no-js .cd-words-wrapper b {
  opacity: 0;
  
}
.no-js .cd-words-wrapper b.is-visible {
  opacity: 1;
}


/* -------------------------------- 

xtype 

-------------------------------- */
.cd-headline.type .cd-words-wrapper {
  vertical-align: top;
  overflow: hidden;
}
.cd-headline.type .cd-words-wrapper::after {
  /* vertical pulsating cursor bar */
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 90%;
  width: 1px;
  background-color: #ffb91d;
}
.cd-headline.type .cd-words-wrapper.waiting::after {
  -webkit-animation: cd-pulse 1s infinite;
  -moz-animation: cd-pulse 1s infinite;
  animation: cd-pulse 1s infinite;
}
.cd-headline.type .cd-words-wrapper.selected {
  background-color: #aebcb9;
}
.cd-headline.type .cd-words-wrapper.selected::after {
  visibility: hidden;
}
.cd-headline.type .cd-words-wrapper.selected b {
  color: #0d0d0d;
}
.cd-headline.type b {
  visibility: hidden;
}
.cd-headline.type b.is-visible {
  visibility: visible;
}
.cd-headline.type i {
  position: absolute;
  visibility: hidden;
}
.cd-headline.type i.in {
  position: relative;
  visibility: visible;
}

@-webkit-keyframes cd-pulse {
  0% {
    -webkit-transform: translateY(-50%) scale(1);
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-50%) scale(0.9);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(-50%) scale(0);
    opacity: 0;
  }
}
@-moz-keyframes cd-pulse {
  0% {
    -moz-transform: translateY(-50%) scale(1);
    opacity: 1;
  }
  40% {
    -moz-transform: translateY(-50%) scale(0.9);
    opacity: 0;
  }
  100% {
    -moz-transform: translateY(-50%) scale(0);
    opacity: 0;
  }
}
@keyframes cd-pulse {
  0% {
    -webkit-transform: translateY(-50%) scale(1);
    -moz-transform: translateY(-50%) scale(1);
    -ms-transform: translateY(-50%) scale(1);
    -o-transform: translateY(-50%) scale(1);
    transform: translateY(-50%) scale(1);
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-50%) scale(0.9);
    -moz-transform: translateY(-50%) scale(0.9);
    -ms-transform: translateY(-50%) scale(0.9);
    -o-transform: translateY(-50%) scale(0.9);
    transform: translateY(-50%) scale(0.9);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(-50%) scale(0);
    -moz-transform: translateY(-50%) scale(0);
    -ms-transform: translateY(-50%) scale(0);
    -o-transform: translateY(-50%) scale(0);
    transform: translateY(-50%) scale(0);
    opacity: 0;
  }
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
	//set animation timing
	var animationDelay = 2500,
		//loading bar effect
		barAnimationDelay = 3800,
		barWaiting = barAnimationDelay - 3000, //3000 is the duration of the transition on the loading bar - set in the scss/css file
		//letters effect
		lettersDelay = 50,
		//type effect
		typeLettersDelay = 150,
		selectionDuration = 500,
		typeAnimationDelay = selectionDuration + 800,
		//clip effect 
		revealDuration = 600,
		revealAnimationDelay = 1500;
	
	initHeadline();
	

	function initHeadline() {
		//insert <i> element for each letter of a changing word
		singleLetters($('.cd-headline.letters').find('b'));
		//initialise headline animation
		animateHeadline($('.cd-headline'));
	}

	function singleLetters($words) {
		$words.each(function(){
			var word = $(this),
				letters = word.text().split(''),
				selected = word.hasClass('is-visible');
			for (i in letters) {
		
				letters[i] = (selected) ? '<i class="in">' + letters[i] + '</i>': '<i>' + letters[i] + '</i>';
			}
		    var newLetters = letters.join('');
		    word.html(newLetters).css('opacity', 1);
		});
	}

	function animateHeadline($headlines) {
		var duration = animationDelay;
		$headlines.each(function(){
			var headline = $(this);
			
			 if (!headline.hasClass('type') ) {
				//assign to .cd-words-wrapper the width of its longest word
				var words = headline.find('.cd-words-wrapper b'),
					width = 0;
				words.each(function(){
					var wordWidth = $(this).width();
				    if (wordWidth > width) width = wordWidth;
				});
				headline.find('.cd-words-wrapper').css('width', width);
			};

			//trigger animation
			setTimeout(function(){ hideWord( headline.find('.is-visible').eq(0) ) }, duration);
		});
	}

	function hideWord($word) {
		var nextWord = takeNext($word);
		
		if($word.parents('.cd-headline').hasClass('type')) {
			var parentSpan = $word.parent('.cd-words-wrapper');
			parentSpan.addClass('selected').removeClass('waiting');	
			setTimeout(function(){ 
				parentSpan.removeClass('selected'); 
				$word.removeClass('is-visible').addClass('is-hidden').children('i').removeClass('in').addClass('out');
			}, selectionDuration);
			setTimeout(function(){ showWord(nextWord, typeLettersDelay) }, typeAnimationDelay);
		
		} else if($word.parents('.cd-headline').hasClass('letters')) {
			var bool = ($word.children('i').length >= nextWord.children('i').length) ? true : false;
			hideLetter($word.find('i').eq(0), $word, bool, lettersDelay);
			showLetter(nextWord.find('i').eq(0), nextWord, bool, lettersDelay);

		}  else if($word.parents('.cd-headline').hasClass('clip')) {
			$word.parents('.cd-words-wrapper').animate({ width : '2px' }, revealDuration, function(){
				switchWord($word, nextWord);
				showWord(nextWord);
			});

		} else {
			switchWord($word, nextWord);
			setTimeout(function(){ hideWord(nextWord) }, animationDelay);
		}
	}

	function showWord($word, $duration) {
		if($word.parents('.cd-headline').hasClass('type')) {
			showLetter($word.find('i').eq(0), $word, false, $duration);
			$word.addClass('is-visible').removeClass('is-hidden');

		}  else if($word.parents('.cd-headline').hasClass('clip')) {
			$word.parents('.cd-words-wrapper').animate({ 'width' : $word.width() + 10 }, revealDuration, function(){ 
				setTimeout(function(){ hideWord($word) }, revealAnimationDelay); 
			});
		}
	}

	function hideLetter($letter, $word, $bool, $duration) {
		$letter.removeClass('in').addClass('out');
		
		if(!$letter.is(':last-child')) {
		 	setTimeout(function(){ hideLetter($letter.next(), $word, $bool, $duration); }, $duration);  
		} else if($bool) { 
		 	setTimeout(function(){ hideWord(takeNext($word)) }, animationDelay);
		}

		if($letter.is(':last-child') && $('html').hasClass('no-csstransitions')) {
			var nextWord = takeNext($word);
			switchWord($word, nextWord);
		} 
	}

	function showLetter($letter, $word, $bool, $duration) {
		$letter.addClass('in').removeClass('out');
		
		if(!$letter.is(':last-child')) { 
			setTimeout(function(){ showLetter($letter.next(), $word, $bool, $duration); }, $duration); 
		} else { 
			if($word.parents('.cd-headline').hasClass('type')) { setTimeout(function(){ $word.parents('.cd-words-wrapper').addClass('waiting'); }, 200);}
			if(!$bool) { setTimeout(function(){ hideWord($word) }, animationDelay) }
		}
	}

	function takeNext($word) {
		return (!$word.is(':last-child')) ? $word.next() : $word.parent().children().eq(0);
	}

	function takePrev($word) {
		return (!$word.is(':first-child')) ? $word.prev() : $word.parent().children().last();
	}

	function switchWord($oldWord, $newWord) {
		$oldWord.removeClass('is-visible').addClass('is-hidden');
		$newWord.removeClass('is-hidden').addClass('is-visible');
	}
});
</script>