How to add Codepen code my website?

tuanphan · January 21, 2022

3 hours ago, Lorne17 said:

I hate to be a bother and add to this incredibly long list, but I cannot get this code to work? @tuanphan any chance I can add one more request to help?

https://codepen.io/ellalalaa/pen/WNjGZNM

Thank you so much!

Lorne

Add a Code Block > Paste this code

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<!-- The Button that opens the modal -->
<button id="sizeChart-button" onclick="document.getElementById('id01').style.display='block'" class="w3-button buttstyle">Size Guide</button>

  <!-- Inside the Modal -->
<div id="id01" class="w3-modal sizeGuide">
  
 <div class="w3-modal-content w3-card-4 w3-animate-zoom">
  <header class="w3-container sizeguide-header"> 
   <span onclick="document.getElementById('id01').style.display='none'" 
   class="w3-button w3-display-topright sizeguide-close">&times;</span>
   <div id="guide-top" class="sizeguide-header">Size Guide</div>
  </header>

  <div class="w3-bar w3-border-bottom">
	  	<button class="tablink tablink-buttons w3-bar-item w3-button" onclick="openCity(event, 'yourself')">Measure Yourself</button>
   		<button class="tablink tablink-buttons w3-bar-item w3-button" onclick="openCity(event, 'product')">Product Measurements</button>
  </div>

  <div id="yourself" class="w3-container city">
  <div class="w3-container">
	  <div class="w3-container">
		  <h3 class="guide-title">Measure Yourself</h3>

			<p>For the most accurate fit, it is recommended that you measure a garment you own and compare those measurements to the ones in the "Product Measurements" tab.</p>
		  <div class="guide-section">
			  <center><img class="myBox" src="https://files.cdn.printful.com/upload/measure-yourself/4f/4f16539cf48b1adf1228f8fa059efee3_l?v=1619159786"/></center>
			  <p>The male model is wearing a size M. He's 6.2'' (190 cm) tall; chest circumference 37.7'' (96 cm).</p>
			  <p><strong>A Length</strong></p>
			  <p>Place the end of the tape beside the collar at the top of the tee (Highest Point Shoulder). Pull the tape measure to the bottom of the shirt.</p>
			  <p><strong>B Width</strong></p>
			  <p>Measure yourself around the fullest part of your chest. Keep the tape measure horizontal.</p>
			  <p><strong>C Sleeve Length</strong></p>
			  <p>Place the end of the tape at the center back of the collar, then pull the tape measure along the top seam of the sleeve. When you get to the shoulder hold the tape in place at the shoulder and continue to pull down the sleeve until you reach the hem of the sleeve.</p>
		  </div>
		  <h3 class="guide-title">Find Your Size</h3>
		  
      <div class="sizechart-style">
        <button onclick="sizechart_function('measure-yourself-chart')" class="sizechart-style w3-button w3-block w3-left-align">
          Size Chart
        </button>
      </div>
		  
		  <div id="measure-yourself-chart" class="w3-hide">
			  <div class="w3-bar w3-border-bottom">
			   <button class="tablink-yourself tablink-buttons w3-bar-item w3-button" onclick="openCity_yourself(event, 'yourselfinches')">Inches</button>
			   <button class="tablink-yourself tablink-buttons w3-bar-item w3-button" onclick="openCity_yourself(event, 'yourselfcentimeters')">Centimeters</button>
			  </div>

			  <div id="yourselfinches" class="w3-container city-yourself">
			  <div><br> <!-- INCHES -->
			   <table class="w3-table w3-striped">
				   <tr>
            <th></th>
            <th>XS</th>
            <th>S</th>
            <th>M</th>
            <th>L</th>
            <th>XL</th>
          </tr>
          <tr>
            <td><b>Length</b></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td><b>Width</b></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td><b>Sleeve</b></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
			   </table>
			  <p><small>Measurements are provided by suppliers. Product measurements may vary by up to 2".</small>
			  </p>
				  <p>If you're still unsure which size to order, you can measure a garment you own and compare those measurements to the ones in the "<a href="#guide-top">Product Measurements</a>" tab.
				   </p>
			  </div>
			  </div>


			  <div id="yourselfcentimeters" class="w3-container city-yourself">
			   <div><!-- CENTIMETERS -->
				   <br>
			   <table class="w3-table w3-striped">
				    <tr>
              <th></th>
              <th>XS</th>
              <th>S</th>
              <th>M</th>
              <th>L</th>
              <th>XL</th>
            </tr>
            <tr>
              <td><b>Length</b></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td><b>Width</b></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td><b>Sleeve</b></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
			   </table>
			  <p><small>Measurements are provided by suppliers. Product measurements may vary by up to 5 cm.</small>
			  </p>
           <p>If you're still unsure which size to order, you can measure a garment you own and compare those measurements to the ones in the "Product Measurements" tab.
				   </p>
			  </div>
			  </div>
			</div><br>
	  </div>
  </div>
  </div>

  
  
  
  <div id="product" class="w3-container city">
   <div class="w3-container">
	  <div class="w3-container">
		  <h3 class="guide-title">Product Measurements</h3>
		  <p>Measure one of your products at home and compare with the measurements you see in this guide.</p>
		  	<div class="guide-section">
			  <center><img class="myBox" style="width: 300px;" src="https://files.cdn.printful.com/upload/product-measure/a2/a20afd850eeceb1508545fa3a2bf583c_l?v=1619159786"></center>
			  <p><strong>A Length</strong></p>
			  <p>Place the end of the tape beside the collar at the top of the tee (Highest Point Shoulder). Pull the tape measure to the bottom of the shirt.</p>
			  <p><strong>B Width</strong></p>
			  <p>Place the end of the tape at the seam under the sleeve and pull the tape measure across the shirt to the seam under the opposite sleeve.</p>
			  <p><strong>C Sleeve Length</strong></p>
			  <p>Place the end of the tape at the center back of the collar, then pull the tape measure along the top seam of the sleeve. When you get to the shoulder hold the tape in place at the shoulder and continue to pull down the sleeve until you reach the hem of the sleeve.</p>
		  </div>
		  <h3 class="guide-title">Find Your Size</h3>
		  
      <div class="sizechart-style">
        <button onclick="sizechart_function('find-size-chart')" class="w3-button w3-block w3-left-align sizechart-style">
          Size Chart
        </button>
      </div>
		  
		  <div id="find-size-chart" class="w3-hide">
			  <div class="w3-bar w3-border-bottom">
			   <button class="tablink-product tablink-buttons w3-bar-item w3-button" onclick="openCity_product(event, 'productinches')">Inches</button>
			   <button class="tablink-product tablink-buttons w3-bar-item w3-button" onclick="openCity_product(event, 'productcentimeters')">Centimeters</button>
			  </div>

			  <div id="productinches" class="w3-container city-product">
			  <div> <!-- INCHES -->
          <p>Measurments taken when product laid flat.</p>
			   <table class="w3-table w3-striped">
				    <tr>
              <th></th>
              <th>XS</th>
              <th>S</th>
              <th>M</th>
              <th>L</th>
              <th>XL</th>
            </tr>
            <tr>
              <td><b>Length</b></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td><b>Width</b></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td><b>Sleeve</b></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
			   </table>
			  <p><small>Measurements are provided by suppliers. Product measurements may vary by up to 2".</small>
			  </p>
			  </div>
			  </div>


			  <div id="productcentimeters" class="w3-container city-product">
			   <div><!-- CENTIMETERS -->
           <p>Measurments taken when product laid flat.</p>
			   <table class="w3-table w3-striped">
            <tr>
              <th></th>
              <th>XS</th>
              <th>S</th>
              <th>M</th>
              <th>L</th>
              <th>XL</th>
            </tr>
            <tr>
              <td><b>Length</b></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td><b>Width</b></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td><b>Sleeve</b></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
			   </table>
			  <p><small>Measurements are provided by suppliers. Product measurements may vary by up to 5 cm.</small>
			  </p>
			  </div>
			  </div>
			</div><br>
	  </div>  
  </div>
  </div>
	 
	 <div class="w3-container sizeguide-close">
	   <button id="sizeguide-close-button" class="w3-button sizeguide-close w3-right" onclick="document.getElementById('id01').style.display='none'">Close</button>
    </div>
	 
	</div>
</div>

	<script>
		var divs = document.querySelectorAll(".pink");
		for (var i = 0; i < divs.length; i++){
			divs[i].classList.add("el-comp-lt-pink");
		}
	</script>
	 
<!-------------------------------------------- MODAL-Y THINGS ----------------------------------------->
<script>
	function sizechart_function(id) {
	  var x = document.getElementById(id);
	  if (x.className.indexOf("w3-show") == -1) {
		x.className += " w3-show";
	  } else { 
		x.className = x.className.replace(" w3-show", "");
	  }
	}
</script>
	
<script>
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
	body.style.overflow = "visible";
  }
}
</script>

	<!--------------------------------------- INSIDE THE MODAL -------------------------------------->
<!-- Measure Yourself and Product Measurment Buttons -->
<script>
document.getElementsByClassName("tablink")[0].click();

function openCity(evt, cityName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("city");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < x.length; i++) {
    tablinks[i].classList.remove("w3-light-grey");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.classList.add("w3-light-grey");
}
</script>
	
	<!-- Measure Yourself Inches and Centimeters Buttons -->
<script>
document.getElementsByClassName("tablink-yourself")[0].click();

function openCity_yourself(evt, cityName) {
  var i, x, tablinks_yourself;
  x = document.getElementsByClassName("city-yourself");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  tablinks_yourself = document.getElementsByClassName("tablink-yourself");
  for (i = 0; i < x.length; i++) {
    tablinks_yourself[i].classList.remove("w3-light-grey");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.classList.add("w3-light-grey");
}
</script>
	
	<!-- Product Inches and Centimeters Buttons -->
<script>
document.getElementsByClassName("tablink-product")[0].click();

function openCity_product(evt, cityName) {
  var i, x, tablinks_product;
  x = document.getElementsByClassName("city-product");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  tablinks_product = document.getElementsByClassName("tablink-product");
  for (i = 0; i < x.length; i++) {
    tablinks_product[i].classList.remove("w3-light-grey");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.classList.add("w3-light-grey");
}
</script>	
<style>
    /* Hide the modal by default */
  .sizeGuide .city {
		display:none
	}

  .w3-modal {
		padding-top: 30px!important;
		z-index: 9999!important;
	}
  .sizeGuide .w3-container {
    padding-left: 1%;
		padding-right: 1%;
	}
	
  /*Styling the Size Chart Button that opens the Modal*/
  .buttstyle {
		font-family: "Karla", sans-serif;
		font-style: normal;
		font-size: 15px;
		letter-spacing: .05em;
		text-transform: uppercase;
		line-height: 1em;
		color: grey;
		background-color: transparent;
		white-space: normal!important;
	}
	.buttstyle:hover {
		color: grey;
		background-color: lightgrey;
	}

/* INSIDE THE MODAL */

  .sizeguide-header {
		font-family: "Karla", sans-serif;
		font-size:25px; 
		font-weight:400;
		padding: 1.5%;
    padding-left: 2%;
		color: white;
		background-color: black;
	}
	.sizeguide-close {
    font-family: "Karla", sans-serif;
		font-size: 20px;
    text-transform: capitalize;
    color: white;
    background-color: black;
	}
  .tablink-buttons {
		text-transform: uppercase;
    font-family: "Karla", sans-serif;
	}

	.guide-title {
		padding-top: 1.5%!important;
	}
  .guide-section {
		color: #616161;
		background-color: #e3e3e3!important;
		padding: 3.5%!important;
	}

	.sizechart-style {
		font-size: 20px;
    font-family: "Karla", sans-serif;
    background-color: #507F99;
    color: white;
    text-transform: uppercase;
	}
	.city-yourself, .city-product {
		overflow: auto!important;
	}
  .myBox {
     width: 200px;
     height: 300px;
     object-fit: cover!important;
  }   
	
</style>

mwinn3 · January 25, 2022

@tuanphan Any way you could help me with this code? Every time I try and add a code box to the page, it just gives me a box filled with the code and a script disabled line. Any help would be greatly appreciated!

Codepen CSS here: https://codepen.io/team/keyframers/pen/aboBjar

tuanphan · January 26, 2022

13 hours ago, mwinn3 said:

@tuanphan Any way you could help me with this code? Every time I try and add a code box to the page, it just gives me a box filled with the code and a script disabled line. Any help would be greatly appreciated!

Codepen CSS here: https://codepen.io/team/keyframers/pen/aboBjar

script disabled is a default message in edit mode. Just open incognito window & check again

Add this code into Code Block

<a href="https://youtu.be/WuE_w_sLTSY" target="_blank" data-keyframers-credit style="color: #FFF"></a>
<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>

<nav class="bar-navigation">
  <ul class="nav-list" style="--total: 4;">
    <li class="nav-item" style="--i:0; --color: var(--color-green)" tabindex="1">     
    </li>
    <li class="nav-item" style="--i:1; --color: var(--color-gold)" tabindex="2"></li>
    <li class="nav-item" style="--i:2; --color: var(--color-purple)" tabindex="3"></li>
    <li class="nav-item" style="--i:3; --color: var(--color-red)" tabindex="4"></li>
  </ul>
</nav>
<style>
 .bar-navigation *,
.bar-navigation *::before,
.bar-navigation *::after {
  box-sizing: border-box;
  position: relative;
}
 .bar-navigation {
  height: 90vh;
  width: 90vw;
  background-color: var(--color-tan);
  display: grid;
  grid-template-rows: 100%;
  overflow: hidden;
}
  .nav-list,
.nav-item {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.nav-list {
  grid-row: 1/-1;
  display: grid;
  height: 100%;
  counter-reset: list;
}

.nav-item {
  --tx:
    calc(-100% + var(--nav-item-offset));
  display: grid;
  grid-template-columns: 1fr 20% auto;
  position: absolute;
  height: 100%;
  width: 60vw;
  transition: transform var(--duration) var(--easing);
  margin-left: calc(var(--i) * var(--nav-item-offset));
  overflow: hidden;
  transform: translateX(var(--tx));
  z-index: calc(var(--total) - var(--i));
  padding-right: 1vw;
  -webkit-animation: slide-down 1s cubic-bezier(0.5, 0, 0.3, 1);
          animation: slide-down 1s cubic-bezier(0.5, 0, 0.3, 1);
  -webkit-animation-delay: calc(var(--i) * .15s);
          animation-delay: calc(var(--i) * .15s);
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
}
.nav-item:hover:not(:focus):after {
  transform: none;
}
.nav-item:focus {
  transform: translateX(-2vw);
  outline: none;
}
.nav-item:focus ~ .nav-item {
  transform: none;
}
.nav-item:focus-within {
  transform: translateX(-2vw);
}
.nav-item:focus-within ~ .nav-item {
  transform: none;
}
.nav-item:before {
  counter-increment: list;
  content: counter(list) ".";
  display: block;
  grid-column: 3/4;
  text-align: right;
  font-size: 8vmin;
  padding: 1vw;
  padding-top: 10vh;
  mix-blend-mode: soft-light;
  z-index: 1;
  -webkit-animation: inherit;
          animation: inherit;
  -webkit-animation-name: slide-up;
          animation-name: slide-up;
}
@-webkit-keyframes slide-up {
  from {
    transform: translateY(130%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slide-up {
  from {
    transform: translateY(130%);
  }
  to {
    transform: translateY(0);
  }
}
.nav-item:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 1vw;
  width: 100%;
  height: 100%;
  background-color: var(--color);
  transform: translateX(-1vw);
  transition: transform var(--easing) var(--duration);
}
@-webkit-keyframes slide-down {
  from {
    transform: translateY(-100%) translateX(var(--tx));
    pointer-events: none;
  }
  to {
    transform: translateY(0) translateX(var(--tx));
    pointer-events: none;
  }
}
@keyframes slide-down {
  from {
    transform: translateY(-100%) translateX(var(--tx));
    pointer-events: none;
  }
  to {
    transform: translateY(0) translateX(var(--tx));
    pointer-events: none;
  }
}
</style>

BenjaminThomas · February 10, 2022

Hey! I've been looking into all your solutions but I just can't seem to get rid of the Script Disabled error. I also happen to have issues with my CSS showing up correctly 😕 Would you be able to help, please? My code is here: https://codepen.io/benjie-thomas/pen/zYPZjyV

Thank you so very much!

tuanphan · February 14, 2022

On 2/10/2022 at 1:25 PM, BenjaminThomas said:

Hey! I've been looking into all your solutions but I just can't seem to get rid of the Script Disabled error. I also happen to have issues with my CSS showing up correctly 😕 Would you be able to help, please? My code is here: https://codepen.io/benjie-thomas/pen/zYPZjyV

Thank you so very much!

It is default message in editor mode. Just save, open incognito window & check again

BenjaminThomas · February 16, 2022

On 2/14/2022 at 6:11 AM, tuanphan said:

It is default message in editor mode. Just save, open incognito window & check again

Thanks, @tuanphan but I'm still unable to get it to work. Incognito is showing all the code as output and not the actual intended output 😞 The CSS stuff isn't showing as intended and neither is the JS toggle etc.

tuanphan · February 21, 2022

On 2/16/2022 at 2:29 PM, BenjaminThomas said:

Thanks, @tuanphan but I'm still unable to get it to work. Incognito is showing all the code as output and not the actual intended output 😞 The CSS stuff isn't showing as intended and neither is the JS toggle etc.

Can you take a screenshot of top of Code Block?

Or don't check option: "Show code" (or similar option)

Anele0610 · February 23, 2022

On 10/3/2021 at 4:35 PM, tuanphan said:

Use Code Block

<div id="app" class="container tuan">
  <div class="row">
    <div class="col-md-12">
      <h1>Horizontal Timeline with Swiper</h1>
      Credit : 
      <ul>
        <li>Horizontal timeline CSS based on <a href="https://codepen.io/abhisharma2/pen/vEKWVo">https://codepen.io/abhisharma2/pen/vEKWVo</a> with a few modifications.</li>  
        <li>Website development step <a href="https://xbsoftware.com/blog/website-development-process-full-guide/">https://xbsoftware.com/blog/website-development-process-full-guide/</a></li>
        <li>Swiper Grab Cursor <a href="http://idangero.us/swiper/demos/12-grab-cursor.html">http://idangero.us/swiper/demos/12-grab-cursor.html</a></li>
      </ul>
      <div class="swiper-container">
        <p class="swiper-control">
          <button type="button" class="btn btn-default btn-sm prev-slide">Prev</button>
          <button type="button" class="btn btn-default btn-sm next-slide">Next</button>
        </p>
        <div class="swiper-wrapper timeline">
<!--           <div class="swiper-slide" v-for="item in steps">
            <div class="timestamp">
              <span class="date">{{item.dateLabel}}<span>
            </div>
            <div class="status">
              <span>{{item.title}}</span>
            </div>
          </div> -->
          <div class="swiper-slide">
            <div class="timestamp">
              <span class="date">April 2017<span>
            </div>
            <div class="status">
              <span>This is Title</span>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="timestamp">
              <span class="date">May 2017<span>
            </div>
            <div class="status">
              <span>This is Second Title</span>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="timestamp">
              <span class="date">June 2017<span>
            </div>
            <div class="status">
              <span>This is Third Title</span>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="timestamp">
              <span class="date">July 2017<span>
            </div>
            <div class="status">
              <span>This is Fourth Title</span>
            </div>
          </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </div>
</div>
            <style>
             #app {
  padding: 50px 0;
}

.timeline {
  margin: 50px 0;
  list-style-type: none;
  display: flex;
  padding: 0;
  text-align: center;
}

.timeline li {
  transition: all 200ms ease-in;
}

.timestamp {
  width: 100%;
  margin-bottom: 20px;
  padding: 0px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: 100;
}

.status {
  padding: 0px 40px;
  display: flex;
  justify-content: center;
  border-top: 4px solid #3e70ff;
  position: relative;
  transition: all 200ms ease-in;
}

.status span {
  font-weight: 600;
  padding-top: 20px;
}

.status span:before {
  content: "";
  width: 25px;
  height: 25px;
  background-color: #e8eeff;
  border-radius: 25px;
  border: 4px solid #3e70ff;
  position: absolute;
  top: -15px;
  left: calc(50% - 12px);
  transition: all 200ms ease-in;
}

.swiper-control {
  text-align: right;
}

.swiper-container {
  width: 100%;
  height: 250px;
  margin: 50px 0;
  overflow: hidden;
  padding: 0 20px 30px 20px;
}

.swiper-slide {
  width: 200px;
  text-align: center;
  font-size: 18px;
}

.swiper-slide:nth-child(2n) {
  width: 40%;
}

.swiper-slide:nth-child(3n) {
  width: 20%;
}
            </style>
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css"/>
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
            <script>
              const data = [
  { dateLabel: 'January 2017', title: 'Gathering Information' },
  { dateLabel: 'February 2017', title: 'Planning' },
  { dateLabel: 'March 2017', title: 'Design' },
  { dateLabel: 'April 2017', title: 'Content Writing and Assembly' },
  { dateLabel: 'May 2017', title: 'Coding' },
  { dateLabel: 'June 2017', title: 'Testing, Review & Launch' },
  { dateLabel: 'July 2017', title: 'Maintenance' }
];

new Vue({
  el: '#app', 
  data: {
    steps: data,
  },
  mounted() {
    var swiper = new Swiper('.swiper-container', {
      //pagination: '.swiper-pagination',
      slidesPerView: 3,
      paginationClickable: true,
      grabCursor: true,
      paginationClickable: true,
      nextButton: '.next-slide',
      prevButton: '.prev-slide',
    });    
  }
})
            </script>

Hey @tuanphan,

This code disrupts the text size and size / color of the background. Can you help adapt it?
You can see here: https://lifeofmusknft.com/lightbox-page

Thanks!

Anele

tuanphan · February 27, 2022

On 2/23/2022 at 9:08 PM, Anele0610 said:

Hey @tuanphan,

This code disrupts the text size and size / color of the background. Can you help adapt it?
You can see here: https://lifeofmusknft.com/lightbox-page

Thanks!

Anele

Some code conflict wtih Squarespace code

Add this to Design > Custom CSS

/* Codepen Conflict Squarespace */
main#page {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

HannahN · March 4, 2022

Hi @tuanphan,

I would love your help also if you don't mind. I have been struggling with this for days and it seems like you are helping with exactly what I need. Can you help me fix this code for my Squarespace site?

https://codepen.io/wesbos/pen/yepexZ

Can't explain how much I appreciate it and if you have a donation site where I can buy you a cup of coffee, I'd love to do that. Feel free to email me at hanneace@gmail.com. Thanks!

Hannah

tuanphan · March 6, 2022

On 3/5/2022 at 1:38 AM, HannahN said:

Hi @tuanphan,

I would love your help also if you don't mind. I have been struggling with this for days and it seems like you are helping with exactly what I need. Can you help me fix this code for my Squarespace site?

https://codepen.io/wesbos/pen/yepexZ

Can't explain how much I appreciate it and if you have a donation site where I can buy you a cup of coffee, I'd love to do that. Feel free to email me at hanneace@gmail.com. Thanks!

Hannah

Use this code into Code Block

<div class="post"><a class="fun-hover" href="#">Check out React For Beginners</a></div>
<div class="post"><a class="fun-hover" href="#">Are you a Sublime Text Power User?</a></div><br/>
<div class="post"><a class="fun-hover" href="#">I love to learn!</a></div>
<div class="post"><a class="fun-hover" href="#">I <br>sure<br>do<br>love<br>Flexbox! </a></div>
<style>
.post {
  max-width: 30rem;
  margin: 2rem;
  float: left;
}
.post a {
  font-size: 4rem;
  text-decoration: none;
  color: #1e1f23;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
}
.fun-hover {
  background-image: linear-gradient(to right, #25b0a9 50%, #fee603 50%);
  background-position: 0;
  background-size: 200%;
  transition: all 0.4s;
}
.fun-hover:hover {
  background-position: -100%;
}
</style>

How to get code: https://www.loom.com/share/aa114c3948d84848a85bc0e3ece120dc

Edited March 6, 2022 by tuanphan

HannahN · March 7, 2022

On 3/6/2022 at 8:27 AM, tuanphan said:

<div class="post"><a class="fun-hover" href="#">Check out React For Beginners</a></div>
<div class="post"><a class="fun-hover" href="#">Are you a Sublime Text Power User?</a></div><br/>
<div class="post"><a class="fun-hover" href="#">I love to learn!</a></div>
<div class="post"><a class="fun-hover" href="#">I <br>sure<br>do<br>love<br>Flexbox! </a></div>
<style>
.post {
  max-width: 30rem;
  margin: 2rem;
  float: left;
}
.post a {
  font-size: 4rem;
  text-decoration: none;
  color: #1e1f23;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
}
.fun-hover {
  background-image: linear-gradient(to right, #25b0a9 50%, #fee603 50%);
  background-position: 0;
  background-size: 200%;
  transition: all 0.4s;
}
.fun-hover:hover {
  background-position: -100%;
}
</style>

Thank you so much! Seriously, this is so unnecessary and kind of you, I appreciate this greatly. If there is anything I can do for you, like write you a review somewhere, a small donation, or anything like that, please let me know. You are the best. Have a great one!

S74 · March 11, 2022

Hi @tuanphan, is it possible to add this code (just the multiply version) into a banner on a 7.1 website? I haven't built the website yet just asking the question 🙂

tuanphan · March 13, 2022

On 3/11/2022 at 8:32 AM, S74 said:

Hi @tuanphan, is it possible to add this code (just the multiply version) into a banner on a 7.1 website? I haven't built the website yet just asking the question 🙂

Try adding a Code Block

<div class="scene"></div>
<div class="spotlight"></div>

<form>
  <select id="blend">
    <option>normal</option>
    <option selected>multiply</option>
    <option>difference</option>
    <option>screen</option>
    <option>overlay</option>
    <option>darken</option>
    <option>lighten</option>
    <option>color-dodge</option>
    <option>color-burn</option>
    <option>hard-light</option>
    <option>soft-light</option>
    <option>difference</option>
    <option>exclusion</option>
    <option>hue</option>
    <option>saturation</option>
    <option>color</option>
    <option>luminosity</option>
  </select>
</form>
<style>
  .spotlight {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), hsl(334, 80%, 80%) 20%, rgba(0,0,0,.96) 30%);
  mix-blend-mode: var(--blend, multiply);
}

.scene {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/61811/figure8s.jpg) center center;
  background-size: cover;
  overflow:hidden;
}

form {
  position: absolute;
  top: 0.5rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  
  opacity: var(--show-dropdown);
}
</style>
<script>
  var spotlight = document.querySelector('.spotlight');
var isUserMotion = false;

function move(e) {
  if (e.clientX || e.touches) {
    isUserMotion = true;
    spotlight.style.setProperty('--x', (e.clientX || e.touches[0].clientX)+'px');
    spotlight.style.setProperty('--y', (e.clientY || e.touches[0].clientY)+'px');
  }
}

if (window.PointerEvent) {
  spotlight.addEventListener('pointermove', move);
} else {
  spotlight.addEventListener('touchmove', move);
  spotlight.addEventListener('mousemove', move);
}



//Play when first loaded, then let user control
(() => {
  var startTime = Date.now();
  autorun();
  function autorun() {
    var now = Date.now();
    if (!isUserMotion && now <= startTime + 3000) {
      console.log(now - startTime);
      spotlight.style.setProperty('--x', ((now - startTime) / 6000 * 100) + '%');
      requestAnimationFrame(autorun);
    }
  }
})();



document.getElementById('blend').addEventListener('input', e => {
  spotlight.style.setProperty('--blend', e.currentTarget.value);
});
</script>

HunterD · March 29, 2022

Hi, I am trying to add the following code to have the exact same custom cursor, but I don't know which code I need to copy and where I need to paste it onto Squarespace. Any help would be appreciated. Thanks! https://codepen.io/clementGir/pen/RQqvQx

tuanphan · March 31, 2022

On 3/30/2022 at 12:55 AM, HunterD said:

Hi, I am trying to add the following code to have the exact same custom cursor, but I don't know which code I need to copy and where I need to paste it onto Squarespace. Any help would be appreciated. Thanks! https://codepen.io/clementGir/pen/RQqvQx

I answered here

Hoidya · May 12, 2022

Hi, I am trying to plug in the following code from codepen in my website, but it doesn't work. Can anyone help? THANKS! @tuanphan

https://codepen.io/SeanWhelan/pen/bErZYo

tuanphan · May 15, 2022

On 5/12/2022 at 10:24 AM, Hoidya said:

Hi, I am trying to plug in the following code from codepen in my website, but it doesn't work. Can anyone help? THANKS! @tuanphan

https://codepen.io/SeanWhelan/pen/bErZYo

Use this code into Code Block

<div class="container">
  <div class="row">
    <div class="col-md-4" >
      <h1><span class="counter">2,523</span></h1>
      <h3>Customers</h3>
      <i class="fa fa-users"></i>
    </div> 
    <div class="col-md-4">
      <h1><span class="counter">63,075</span></h1>
      <h3>Total Web Pages</h3>
      <i class="fa fa-desktop"></i>
    </div>
    <div class="col-md-4">
      <h1><span class="counter">12,218</span></h1>
      <h3>Cups Of Coffee</h3>
      <i class="fa fa-coffee"></i>
    </div>
  </div>
</div>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css"/>
<style>
  .col-md-4 {
  text-align: center;
  padding-bottom: 50px;
  border-right: 1px dashed black;
}

.col-md-4:last-child {
  border-right: 0px solid black;
}

.counter {
  animation-duration: 1s;
  animation-delay: 0s;
}

i {
  font-size: 20px !Important;
}

@media (max-width: 991px) {
  .col-md-4 {
    border-right: 0px dashed black;
    border-bottom: 1px dashed black;
    width: 50%;
    margin: auto auto;
  }
  
  .col-md-4:last-child {
    border-bottom: 0px dashed black;
  }
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.counterup/1.0/jquery.counterup.min.js"></script>
<script>
  $('.counter').counterUp({
  delay: 10,
  time: 2000
});
$('.counter').addClass('animated fadeInDownBig');
$('h3').addClass('animated fadeIn');
</script>

anaisjeanine · August 10, 2022

Hi @tuanphan

am having difficulties with codepens as well

am trying to use this or this as background for a section

is it possible to add interactivity to backgrounds?

for the first one, i tried copying and pasting all the code into a code block, Script Disabled kept appearing

please advise 😃

tuanphan · August 11, 2022

15 hours ago, anaisjeanine said:

Hi @tuanphan

am having difficulties with codepens as well

am trying to use this or this as background for a section

is it possible to add interactivity to backgrounds?

for the first one, i tried copying and pasting all the code into a code block, Script Disabled kept appearing

please advise 😃

It is default message in editing mode. Just view it in preview mode or incognito window

marcusstabenow · November 12, 2022

Hi @tuanphan

I recently saw that you found a way to implement code from codepen to SQSP. I have tried myself but can't seem to execute it. Can you help?

https://codepen.io/vamarcus/pen/QWxvOKo

Thank you!

tuanphan · November 21, 2022

On 11/12/2022 at 5:15 PM, marcusstabenow said:

Hi @tuanphan

I recently saw that you found a way to implement code from codepen to SQSP. I have tried myself but can't seem to execute it. Can you help?

https://codepen.io/vamarcus/pen/QWxvOKo

Thank you!

Add a Code Block > Use this code

<div id="multiscroll">
	<div class="ms-left">
		<div class="ms-section">
      <img src="https://images.squarespace-cdn.com/content/v1/630662594ba9aa3a6ab842d4/1664508563055-5JMZVUYDG0AIJLBIM4Y1/L-01.png" width="100%" height="auto">
        
    </div>
    
		<div class="ms-section">
      <img src="https://images.squarespace-cdn.com/content/v1/630662594ba9aa3a6ab842d4/1664508564710-OATKV52BM9OD406VWX1M/L-+02.png" width="100%" height="auto">
        
    </div>
    
		<div class="ms-section">
      <img src="https://images.squarespace-cdn.com/content/v1/630662594ba9aa3a6ab842d4/1664508566964-XJFAGKATFSXCVY7WS5TS/L-03.png" width="100%" height="auto">
        
    </div>
    
    <div class="ms-section">
      <img src="https://images.squarespace-cdn.com/content/v1/630662594ba9aa3a6ab842d4/1664508569047-PDBH7W76QCQIL7WGZZ1E/L-04.png" width="100%" height="auto">
        
    </div>
    
    <div class="ms-section">
      <img src="https://images.squarespace-cdn.com/content/v1/630662594ba9aa3a6ab842d4/1664508571291-I1SSFFOCPLSFZXR2PROD/L-05.png" width="100%" height="auto">
        
    </div>
    
    <div class="ms-section">
      <img src="https://images.squarespace-cdn.com/content/v1/630662594ba9aa3a6ab842d4/1665200158410-F2LOFISZQT4XIBBS0NJH/L-06.png" width="100%" height="auto">
        
    </div>
    
	</div>
  
	<div class="ms-right">
		<div class="ms-section">
      <img src="https://images.squarespace-cdn.com/content/v1/630662594ba9aa3a6ab842d4/1664508637479-LST4EO692RGEI39QDIEK/R-01.png" width="100%" height="auto">
        
    </div>
    
		<div class="ms-section">
      <img src="https://images.squarespace-cdn.com/content/v1/630662594ba9aa3a6ab842d4/1664508639978-I9U0ULCJN85PIA437B3X/R-02.png" width="100%" height="auto">
        
    </div>
    
		<div class="ms-section">
      <img src="https://images.squarespace-cdn.com/content/v1/630662594ba9aa3a6ab842d4/1664508642051-BJGWW3DBZP5EDVZKU8TU/R-03.png" width="100%" height="auto">
        
    </div>
    
    <div class="ms-section">
      <img src="https://images.squarespace-cdn.com/content/v1/630662594ba9aa3a6ab842d4/1664508644298-CW7YX9PU09HH8WHXUH77/R-04.png" width="100%" height="auto">
        
    </div>
    
    <div class="ms-section">
      <img src="https://images.squarespace-cdn.com/content/v1/630662594ba9aa3a6ab842d4/1664508647971-IU415NXNZWLPCOLQ59EZ/R-05.png" width="100%" height="auto">
        
    </div>
    
    <div class="ms-section">
      <img src="https://images.squarespace-cdn.com/content/v1/630662594ba9aa3a6ab842d4/1664508650991-4RBNNCXFOZC1S52CICNG/R-06.png" width="100%" height="auto">
        
    </div>
    
	</div>
	  
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/multiscroll.js/0.2.3/jquery.multiscroll.css"/>
<style>
  .ms-section{
  width: 100%;
  padding: 0%;
  text-align: center;
  color: #ededed;
}


</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://unpkg.com/multiscroll.js/vendors/jquery.easings.min.js"></script>
<script src="https://unpkg.com/multiscroll.js/jquery.multiscroll.js"></script>
<script>
  $(document).ready(function() {
	$('#multiscroll').multiscroll({
    licenseKey: 'A8673A58-4F004189-B94C8567-332622B6',
		verticalCentered : true,
		scrollingSpeed: 1222,
		easing: 'easeInQuart',
		easingcss3: 'ease-out',
		menu: false,
		sectionsColor: [],
		navigation: false,
		loopBottom: true,
		loopTop: true,
		css3: true,
		paddingTop: 0,
		paddingBottom: 0,
		normalScrollElements: null,
		scrollOverflow: false,
		scrollOverflowOptions: null,
		keyboardScrolling: true,
		touchSensitivity: 5,

		//responsive
		responsiveWidth: 0,
		responsiveHeight: 0,
		responsiveExpand: false,

		// Custom selectors
		sectionSelector: '.ms-section',
		leftSelector: '.ms-left',
		rightSelector: '.ms-right',

		//events
		onLeave: function(index, nextIndex, direction){},
		afterLoad: function(anchorLink, index){},
		afterRender: function(){},
		afterResize: function(){},
	});
});
</script>

This seems to be an effect with a lot of complicated code, you may need to tweak it further to make it work.

Gabriel93 · January 9, 2023

Hey @tuanphan

I've been trying to add this code in and I can't get it to function. Can you help me out?

https://codepen.io/jrdnrbtn/pen/ExarwXg

tuanphan · January 14, 2023

On 1/9/2023 at 10:31 PM, Gabriel93 said:

Hey @tuanphan

I've been trying to add this code in and I can't get it to function. Can you help me out?

https://codepen.io/jrdnrbtn/pen/ExarwXg

Use this code into Code Block

<section class="container my-5 py-5">
  <h1>Scroll down to see animation</h1>
  <p><i class="fas fa-angle-down fa-2x"></i></p>
</section>
<section id="mon-id" class="container my-5 py-5">
  <ul class="row list-unstyled numbers-list">
    <li>
      <span class="numbers"> <span class="animate-numbers">10</span>% </span>
      <span>Lorem ipsum dolor sit amet</span>
      <span class="small text-muted">Lorem ipsum dolor sit amet</span>
    </li>
    <li>
      <span class="numbers"> <span class="animate-numbers">20</span>% </span>
      <span>Lorem ipsum dolor sit amet</span>
      <span class="small text-muted">Lorem ipsum dolor sit amet</span>
    </li>
    <li>
      <span class="numbers"> <span class="animate-numbers">30</span>% </span>
      <span>Lorem ipsum dolor sit amet</span>
      <span class="small text-muted">Lorem ipsum dolor sit amet</span>
    </li>
    <li>
      <span class="numbers"> <span class="animate-numbers">40</span>% </span>
      <span>Lorem ipsum dolor sit amet</span>
      <span class="small text-muted">Lorem ipsum dolor sit amet</span>
    </li>
  </ul>
</section>

<style>
  .numbers-list {
  margin-top: 200px;
  align-items: flex-start;
}
.numbers-list li {
  text-align: center;
  flex: 0 0 25%;
  max-width: 25%;
}
.numbers-list li > span {
  display: block;
}
.numbers-list .numbers {
  color: var(--primary);
  font-weight: bold;
  font-size: 5rem;
}
</style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script>
  function animate_numbers(id) {
  var count = 0;
  var classToAnimate = ".animate-numbers";
  var offsetToScrollThrough = 500;
  var animationDuration = 6000;
  var animationEasing = "easeOutExpo";
  
  $(window).scroll(function() {
    var oTop = $(id).offset().top - window.innerHeight + offsetToScrollThrough;
    if (count == 0 && $(window).scrollTop() > oTop) {
      $(id + " " + classToAnimate).each(function() {
        $(this)
          .prop("Counter", 0)
          .animate(
            {
              Counter: $(this).text()
            },
            {
              duration: animationDuration,
              easing: animationEasing,
              step: function(now) {
                $(this).text(Math.ceil(now));
              }
            }
          );
      });
      count = 1;
    }
  });
}

animate_numbers("#mon-id");

</script>

Note: This code can conflict with Squarespace code

Lux615 · January 27, 2023

@tuanphan I've tried everything and am stuck. I would much appreciate any thoughts on this one:

https://codepen.io/Saramazal/pen/LYyywNb

Thank you for any recommendations

How to add Codepen code my website?

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan

tuanphan

tuanphan

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources