Jump to content

Adding Codepen Code to Code Block (sooo close)

By AnnaNeedsHelp, in Customize with code

Recommended Posts

AnnaNeedsHelp Level 3

AnnaNeedsHelp

Posted
Posted

Site URL: https://elephant-raspberry-f4jz.squarespace.com/

I've been learning coding and have learned so much from the forums -- but I have hit a roadblock. 

Code is almost working but it's not displaying icons (from font awesome) which I thought I linked through the html link src tags and is doing this strange lift and lower action before it settles on the page. 

If anyone could help you'd make me very happy. It's 5am and I've been working since 8 PM 😞

Here is my codepen link:

https://codepen.io/annamakesmagic/pen/vYjNJLg

And here is what I pasted into the html block: 

<!DOCTYPE html>
<html>
<wrapper class="hero">
  <div class="hero__wrapper">
<div class="wrapper">
  
  <div class="panel animated slideInDown">
    <h3>Tenant Representation</h3>
    <p>The right space is essential to the well-being of your business. We create strategies to ensure you’re in the right space, at the right time, for the right price.</p>
    <div class="slide">
      <h4>Services</h4>
      <ul>
        <li><i class="fa-solid fa-chess"></i> Project Strategy & Planning </li>
        <li><i class="fa-solid fa-shop"></i> Development & Renovations </li>
        <li><i class="fa fa-check"></i> Competitive Landscape Analysis </li>
        <li><i class="fa-solid fa-percent"></i> Demographic Studies </li>
        <li><i class="fa fa-check"></i> Lease Administration </li>
        <li><i class="fa-solid fa-magnifying-glass-location"></i> Site Selection </li>
      </ul>
    </div>
  </div>
  
  <div class="panel animated slideInDown">
    <h3>Investment Acquisition & Sales</h3>
    <p>We know what makes a good deal and have a knack for finding them. We assist buyers and sellers in the acquisition and disposition of investment properties and land.</p3>
    <div class="slide">
      <h4>Services</h4>
      <ul>
        <li><i class="fa fa-check"></i> Manage Real Assets Investments </li>
        <li><i class="fa fa-check"></i> Pre-Acquisition and Pre-Development Due Diligence </li>
        <li><i class="fa fa-check"></i> Property Development & Investment </li>
        <li><i class="fa fa-check"></i> Capital Markets </li>
        <li><i class="fa fa-check"></i> Environmental Site Assessments </li>
      </ul>
    </div>
  </div>
  
    <div class="panel animated slideInDown">
    <h3>Project Leasing & Management</h3>
    <p>Leasing the last 10% is where the profit lies. We know our markets and leverage longstanding relationships with retailers and brokers to ensure the project gets done.</p>
    <div class="slide">
      <h4>Services</h4>
      <ul>
        <li><i class="fa fa-check"></i> service </li>
        <li><i class="fa fa-check"></i> service </li>
        <li><i class="fa fa-check"></i> service </li>
        <li><i class="fa fa-check"></i> service </li>
        <li><i class="fa fa-check"></i> service </li>
        <li><i class="fa fa-check"></i> service </li>
        <li><i class="fa fa-check"></i> Lease Administration </li>
      </ul>
    </div>
  </div>
</div>
  </div>
</wrapper>
</html>

Link to comment
  • Replies 3
  • Views 260
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

AnnaNeedsHelp Level 3

AnnaNeedsHelp

Posted
  • Author
Posted
8 hours ago, AnnaNeedsHelp said:

Thank you, Tuan! 

I also figured out how to fix the "slide down" animation 

Hey Juan, 

The code on my squarespace is still not showing icons (see attached screen shot) 

but the code pen (https://codepen.io/annamakesmagic/pen/vYjNJLg) is displaying them fine.  I'm not sure what I'm doing wrong. 

I've tried adding the scripts at top and bottom and added all the information under "settings" in codepen. 

I'm just not sure anymore what is needed and where it needs to go. 

I also wondered if the code that I pasted at top is pulling from an older version of Font Aweseome? Any ideas?

Here is my updated code square space.

Please let me know if you have any suggestions.

 

CURRENT CODE BLOCK: 

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script> src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
</head> 


<div>
<h2 style= "padding-bottom: 20px"/> Our core service is making our<br> <SPAN STYLE="text-decoration:line-through">clients</SPAN> 
  <SPAN STYLE="text-decoration:font-weight: bold">partners</SPAN> successful.
  <br
  <br>
    <br>
  </br>
  <div>
  </div>
</div>
<wrapper class="hero">
  <div class="hero__wrapper">
    <div class="wrapper">
      <div class="panel animated slideInDown">
        <h3>Tenant Representation</h3>
        <p>The right space is essential to the well-being of your business. We create strategies to ensure you’re in the right space, at the right time, for the right price.</p>
        <div class="slide">
          <h4>Services</h4>
          <ul>
            <li><i class="fa-solid fa-chess"></i> Project Strategy & Planning </li>
            <li><i class="fa-solid fa-shop"></i> Development & Renovations </li>
            <li><i class="fa-solid fa-file-signature"></i> Competitive Landscape Analysis </li>
            <li><i class="fa-solid fa-percent"></i> Demographic Studies </li>
            <li><i class="fa-solid fa-file-signature"></i> Lease Administration </li>
            <li><i class="fa-solid fa-magnifying-glass-location"></i> Site Selection </li>
          </ul>
        </div>
      </div>

      <div class="panel animated slideInDown">
        <h3>Investment Acquisition & Sales</h3>
        <p>We know what makes a good deal and have a knack for finding them. We assist buyers and sellers in the acquisition and disposition of investment properties and land.</p3>
        <div class="slide">
          <h4>Services</h4>
          <ul>
            <li><i class="fa fa-check"></i> Manage Real Assets Investments </li>
            <li><i class="fa fa-check"></i> Pre-Acquisition and Pre-Development Due Diligence </li>
            <li><i class="fa fa-check"></i> Property Development & Investment </li>
            <li><i class="fa fa-check"></i> Capital Markets </li>
            <li><i class="fa fa-check"></i> Environmental Site Assessments </li>
          </ul>
        </div>
      </div>

      <div class="panel animated slideInDown">
        <h3>Project Leasing & Management</h3>
        <p>Leasing the last 10% is where the profit lies. We know our markets and leverage longstanding relationships with retailers and brokers to ensure the project gets done.</p>
        <div class="slide">
          <h4>Services</h4>
          <ul>
            <li><i class="fa fa-check"></i> service </li>
            <li><i class="fa fa-check"></i> service </li>
            <li><i class="fa fa-check"></i> service </li>
            <li><i class="fa fa-check"></i> service </li>
            <li><i class="fa fa-check"></i> service </li>
            <li><i class="fa fa-check"></i> service </li>
            <li><i class="fa fa-check"></i> Lease Administration </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</wrapper>


  <link rel="stylesheet" href="https://codepen.io/annamakesmagic/pen/vYjNJLg.css"/>
<link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet">
<link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet">
<style>
.wrapper {
  height: 500px;
  max-width: 1270px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}
.wrapper::before, .wrapper::after {
  content: "";
  display: table;
  clear: both;
}
.wrapper .panel {
  position: relative;
  margin: 5px 35px 5px;
  padding: 20px 10px 10px 10px;
  overflow: hidden;
  float: left;
  width: 25%;
  height: 100%;
  text-align: center;
  background: #F1F1F1;
  border: 2px solid #d1d3d4;
  box-sizing: border-box;
  transition: border 200ms ease;
  cursor: pointer;
}

.wrapper .panel h3 {
  display: block;
 padding-top: 20px;
}
    
  color: #000;
  font-weight: 400;
  text-align: center;
  text-shadow: 0 2px 1px #FFF;
}
.wrapper .panel p {
  font-size: 1.1rem;}

.wrapper .panel .slide {
  position: absolute;
  bottom: -460px;
  left: 0;
    z-index: 100;
  padding: 10px 10px 10px 10px;
  height: 100%;
  width: 100%;
  text-align: left;
  background: rgba(67, 86, 114, 1);
  box-sizing: border-box;
  transition: all 300ms 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.wrapper .panel .slide h4 {
  padding: 10px 10px 10px 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: left;
  font-size: 1.3rem;
  font-weight: 400;
  color: #D1d3d4;
}
.wrapper .panel .slide ul li {
  padding: 10px 6px 10px 0px;
  line-height: 1.3rem;
  font-size: 1.1rem;
  color: #F0F0F0;
}
.wrapper .panel .slide ul li:last-child {
  border: 0;
}
.wrapper .panel .slide ul li .fa-solid {
  align: left;
  color: #F26522;
}

.panel:hover {
  border: 2px solid #d1d3d4;
}
.panel:hover .slide {
  bottom: 0;
  cursor: pointer;
}

.animated {
  animation-duration: 500ms;
  animation-fill-mode: both;
  animation-delay: 1s;
}

@keyframes slideInDown {
  0% {
    -webkit-transform: translateY(-20%);
    -ms-transform: translateY(-20%);
    transform: translateY(-20%);
    visibility: visible;
  }
  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

ul {
    list-style-type: none;
}

.hero__wrapper {
  max-width: 2300px;
  margin-left: auto;
  margin-right: auto;
  text-align: center
}
</style>

Screen Shot 2022-09-07 at 2.43.22 PM-min.jpeg

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