Jump to content

Integrating CodePen Code

By Lexa, in Customize with code

Recommended Posts

Lexa Level 2

Lexa

Posted
Posted (edited)

Hi everyone, first of all, thank you in advance to anyone that offers a helping hand. I am trying to implement this CodePen code into my website, I have added the whole code into a code block inside only one site on my webpage; however, the whole CSS style of that page is affected. I believe the problem is one of the bootstraps I am adding. However, without it, the whole code does not work.

The code pen link is (as I hope it would look like on my Squarespace website): https://codepen.io/SuperHumanosPodcast/pen/GRwRwXE

My webpage (how the resulting code looks), where I am implementing the specific code as a single code block, is: http://ariix.com.mx/test

Finally, the whole code is: (I am almost sure the problem is "bootstrap@5.0.2......") 

<link rel="stylesheet" href="https://fonts.googleapis.com" />
<link rel="stylesheet" href="https://fonts.gstatic.com" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Raleway:wght@200;400;500;700&amp;display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rancho&amp;effect=anaglyph|3d-float" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" />

<!-- insert any HTML code from the pen below this line -->
<div class="section">
  <div class="container p-4 p-md-5">
    <div class="row banner-news">
      <div class="col-lg-12 px-5">
        <h4 class="pb-3">Comprar por Categoría</h4>
        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-2 g-4">
          <!-- Card 1 -->
          <div class="col">
            <div class="card">
              <img src="https://images.squarespace-cdn.com/content/v1/5efe0307ffc2f00ba07e009e/f3af1e01-6cf3-42b0-a453-9e66635584fc/Slenderiiz-PartnerCo-Ariix-Programa-Perdida-Peso.png?format=1500w" class="img-fluid">
              <div class="card-body p-0">
                <div class="accordion accordion-flush" id="accordionCard1">
                  <div class="accordion-item">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#education-card1" aria-expanded="false" aria-controls="education-card1">
                      <p class="card-title">Slenderiiz</p>
                    </button>
                    <div id="education-card1" class="accordion-collapse collapse" data-bs-parent="#accordionCard1">
                      <div class="accordion-body">
                        <!-- Product Image and Name -->
                        <a href="https://www.ariix.com.mx/gotas-premeal-niite">
                        <img src="https://images.squarespace-cdn.com/content/v1/5efe0307ffc2f00ba07e009e/241ec3bc-3d14-47c7-bc5d-d0bff0d39d3b/Gotas-Ariix-Adelagazar-Veganas-Slenderiiz-Partner-Co-Night-Day-Gotas-Drops.png?format=500w" class="img-fluid"> </a>
                        <p class="card-text">Gotas Pre-Meal & Niite (México) <FONT COLOR= #FF0000><i><b>MÁS VENDIDO</FONT COLOR= #FF0000></b></i></p>
                        <a href="https://www.ariix.com.mx/gotas-day-night">
                         <img src="https://images.squarespace-cdn.com/content/v1/5efe0307ffc2f00ba07e009e/5063d11b-c58f-4f60-a1a4-7c68d8d8cd3a/Gotas-Espan%CC%83a-Night-Day-Slenderiiz-Ariix-NewAge-Partner-Co.png?format=750w" class="img-fluid"> </a>
                        <p class="card-text">Gotas Day & Night (Europa) <FONT COLOR= #FF0000><i><b>MÁS VENDIDO</FONT COLOR= #FF0000></b></i></p>
                        <a href="https://www.ariix.com.mx/gotas-slenderiix-xceler8">
                         <img src="https://images.squarespace-cdn.com/content/v1/5efe0307ffc2f00ba07e009e/f943791f-8fa0-428d-9b90-7110563e279b/Slenderiiz+Drops+Slenderiix+%26+Xceler8+Ariix+NewAge+Partner+Co.png?format=1500w" class="img-fluid"> </a>
                        <p class="card-text">Gotas Slenderiix & Xceler8 (Estados Unidos) <FONT COLOR= #FF0000><i><b>MÁS VENDIDO</FONT COLOR= #FF0000></b></i></p>
                        <a href="https://www.ariix.com.mx/slenderiiz">
                        <img src="https://images.squarespace-cdn.com/content/v1/5efe0307ffc2f00ba07e009e/241ec3bc-3d14-47c7-bc5d-d0bff0d39d3b/Gotas-Ariix-Adelagazar-Veganas-Slenderiiz-Partner-Co-Night-Day-Gotas-Drops.png?format=500w" class="img-fluid"> </a>
                        <p class="card-text">PowerBoost (Cocoa PB) <FONT COLOR= #FF0000><i><b>MÁS VENDIDO</FONT COLOR= #FF0000></b></i></p>
                        <a href="https://www.ariix.com.mx/slenderiiz">
                        <img src="https://images.squarespace-cdn.com/content/v1/5efe0307ffc2f00ba07e009e/465b3807-261b-4a31-997b-7abe1d222cfd/Untitled+%281500+%C3%97+1000+px%29+%281%29.png?format=500w" class="img-fluid"> </a>
                        <p class="card-text">PureNourish</p>
                        <a href="https://www.ariix.com.mx/slenderiiz">
                        <img src="https://images.squarespace-cdn.com/content/v1/5efe0307ffc2f00ba07e009e/241ec3bc-3d14-47c7-bc5d-d0bff0d39d3b/Gotas-Ariix-Adelagazar-Veganas-Slenderiiz-Partner-Co-Night-Day-Gotas-Drops.png?format=500w" class="img-fluid"> </a>
                        <p class="card-text">Giving Greens</p>
                        <a href="https://www.ariix.com.mx/slenderiiz">
                        <img src="https://images.squarespace-cdn.com/content/v1/5efe0307ffc2f00ba07e009e/241ec3bc-3d14-47c7-bc5d-d0bff0d39d3b/Gotas-Ariix-Adelagazar-Veganas-Slenderiiz-Partner-Co-Night-Day-Gotas-Drops.png?format=500w" class="img-fluid"> </a>
                        <p class="card-text">Beauty Boost </p>
                       
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- Card 2 -->
          <div class="col">
            <div class="card">
              <img src="https://d1g9yur4m4naub.cloudfront.net/image-handler/picture/2021/2/shutterstock_1188127132.jpg" class="img-fluid">
              <div class="card-body p-0">
                <div class="accordion accordion-flush" id="accordionCard2">
                  <div class="accordion-item">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#education-card2" aria-expanded="false" aria-controls="education-card2">
                      <p class="card-title">Nutrifii</p>
                    </button>
                    <div id="education-card2" class="accordion-collapse collapse" data-bs-parent="#accordionCard2">
                      <div class="accordion-body">
                        <!-- Product Image and Name -->
                        <img src="YOUR_PRODUCT_IMAGE_URL" class="img-fluid">
                        <p class="card-text">YOUR_PRODUCT_NAME</p>
                        <img src="YOUR_PRODUCT_IMAGE_URL" class="img-fluid">
                        <p class="card-text">YOUR_PRODUCT_NAME</p>
                        <img src="YOUR_PRODUCT_IMAGE_URL" class="img-fluid">
                        <p class="card-text">YOUR_PRODUCT_NAME</p>
                        <img src="YOUR_PRODUCT_IMAGE_URL" class="img-fluid">
                        <p class="card-text">YOUR_PRODUCT_NAME</p>
                        <img src="YOUR_PRODUCT_IMAGE_URL" class="img-fluid">
                        <p class="card-text">YOUR_PRODUCT_NAME</p>
                        <img src="YOUR_PRODUCT_IMAGE_URL" class="img-fluid">
                        <p class="card-text">YOUR_PRODUCT_NAME</p>
                        <img src="YOUR_PRODUCT_IMAGE_URL" class="img-fluid">
                        <p class="card-text">YOUR_PRODUCT_NAME</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- Card 3 -->
          <div class="col">
            <div class="card">
              <img src="https://cdn.technologynetworks.com/tn/images/body/humancellnuclei1512470985301.jpg" class="img-fluid">
              <div class="card-body p-0">
                <div class="accordion accordion-flush" id="accordionCard3">
                  <div class="accordion-item">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#education-card3" aria-expanded="false" aria-controls="education-card3">
                      <p class="card-title">Cancer</p>
                    </button>
                    <div id="education-card3" class="accordion-collapse collapse" data-bs-parent="#accordionCard3">
                      <div class="accordion-body">
                        <!-- Product Image and Name -->
                        <img src="YOUR_PRODUCT_IMAGE_URL" class="img-fluid">
                        <p class="card-text">YOUR_PRODUCT_NAME</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- Card 4 -->
          <div class="col">
            <div class="card">
              <img src="https://chanzuckerberg.com/wp-content/uploads/2022/11/22_1128-Lab-Made-Stem-Cells-Transforming-Research-Hero.jpg" class="img-fluid">
              <div class="card-body p-0">
                <div class="accordion accordion-flush" id="accordionCard4">
                  <div class="accordion-item">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#education-card4" aria-expanded="false" aria-controls="education-card4">
                      <p class="card-title">Immune System</p>
                    </button>
                    <div id="education-card4" class="accordion-collapse collapse" data-bs-parent="#accordionCard4">
                      <div class="accordion-body">
                        <!-- Product Image and Name -->
                        <img src="YOUR_PRODUCT_IMAGE_URL" class="img-fluid">
                        <p class="card-text">YOUR_PRODUCT_NAME</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- Card 5 -->
          <div class="col">
            <div class="card">
              <img src="YOUR_IMAGE_URL" class="img-fluid">
              <div class="card-body p-0">
                <div class="accordion accordion-flush" id="accordionCard5">
                  <div class="accordion-item">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#education-card5" aria-expanded="false" aria-controls="education-card5">
                      <p class="card-title">YOUR_TITLE</p>
                    </button>
                    <div id="education-card5" class="accordion-collapse collapse" data-bs-parent="#accordionCard5">
                      <div class="accordion-body">
                        <!-- Product Image and Name -->
                        <img src="YOUR_PRODUCT_IMAGE_URL" class="img-fluid">
                        <p class="card-text">YOUR_PRODUCT_NAME</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--/.col-lg-12-->
    </div>
    <!--/.row -->
  </div>
  <!--/.container-->
</div>
<!--/.section-->


<!-- insert any CSS Code between these style tags -->
<style>
  h4,
h4 a {
  color: #202025;
  font-weight: bold;
  text-align: left;
  font-size: 2.027rem;
}

.banner-news .card {
  border: 0;
  border-radius: 1rem;
  -webkit-box-shadow: 0 20px 40px 0 rgb(190 190 205 / 50%);
  box-shadow: 0 20px 40px 0 rgb(190 190 205 / 50%);
  height: auto;    
  padding-top: 0;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.banner-news .card .card-body .card-title {
  color: #0078bf;
  display: block;
  font-size: 1.266rem;
  font-weight: bold;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

.banner-news .card .card-body .card-title:hover {
  cursor: pointer;
}

.banner-news .card .card-body .card-text {
  color: #202025 !important;
  font-size: 1.125rem;
}

.banner-news .card:hover {
  -webkit-box-shadow: 0 20px 40px 0 rgb(190 190 205 / 50%);
  box-shadow: 0 20px 40px 0 rgb(190 190 205 / 50%);
  -webkit-transform: scale(1.02);
  -ms-transform: scale(1.02);
  transform: scale(1.02);
}

.banner-news .card img {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  max-height: 45vh;
  min-height: 35vh;
  object-fit: cover;
  width: 100%;
}

.banner-news .card .card-body .card-title:hover {
    cursor: default;
}

.banner-news .card .card-body .card-title {
    color: #202025;
}

.accordion-header {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #f1f5f8;
    display: flex;
    padding: 1rem 1.25rem;
    position: relative;
    -webkit-transition: color .15s ease-in-out;
    -o-transition: color .15s ease-in-out;
    transition: color .15s ease-in-out;
    width: 100%;
}

.accordion-header::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 1.25rem;
    content: '';
    -ms-flex-negative: 0;
    flex-shrink: 0;
    height: 1.25rem;
    margin-left: auto;
    -webkit-transition: transform .2s ease-in-out;
    -o-transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
    width: 1.25rem;
}

.accordion-header h4 {
    margin-bottom: 0;
    width: 100%;
}

.accordion-header a {
    display: block;
}

.accordion-item {
    border: 0;
  margin-bottom: .8rem;
}
    
.accordion-button {
    font-size: 1.125rem;
  font-weight: bold;
    padding-bottom: .5rem;
    padding-top: .5rem;
}
    
.accordion-button:not(.collapsed) {
    color: #202025;
    -webkit-box-shadow: 0 0 0;
    box-shadow: 0 0 0;
}
    
.accordion-button:focus {
    border-color: transparent;
    -webkit-box-shadow: 0 0 0;
    box-shadow: 0 0 0;
}
</style>

<!-- insert any JS dependencies here -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

<!-- insert any JS Code from teh code pen inside these script tags -->
<script>
  
</script>

A quick thank you to user @iamdavehart the template on how to add codepen code to Squarespace! 

Edited by Lexa
Wrong Code
Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

tuanphan Level 17

tuanphan

Posted
Posted

Bootstrap will conflict with Tool Bar in Edit Mode

Also above code contains some class name, tag name conflict with SS code

If you want to achieve this effect only, we still have some other approaches

  • Box with Image, text (under image) and arrow next to next
  • Click arrow >> Show more content (products, text, image...)
  • Hover box > Scale it a bit

If these are all what you want, let me know, we can help with another code

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources