Help with CodePen in squarespace

carlylecapital · November 17, 2020

Site URL: https://www.carlylecapitalinc.com/

Hi there, I'm not able to add my codepen HTML, CSS and JS successfully to my site. Can someone tell me what I'm doing wrong?

HTML: (added code in </> code block)

<section>
<div class="container">
<h1 class="text-center">OUR PROCESS</h1>
<div class="timeline flex-container">

<div class="timeline-item flex-items-default selected">
<div class="timeline-content text-left animated bounceIn">
<h2>1. Let's Talk</h2>
<p>Submit a form online or contact us directly. We’ll discuss your project needs to ensure it meets our lending guidelines.</p>
<div class="hexagon"></div>
<i class="material-icons">phone</i>
</div>
</div>
<div class="timeline-item flex-items-default">
<div class="timeline-content text-left">
<h2>2. Letter of Intent</h2>
<p>Afterwards we’ll issue a Letter of Intent that outlines terms, document requirements, and costs to proceed.</p>
<div class="hexagon"></div>
<i class="material-icons">article</i>
</div>
</div>
<div class="timeline-item flex-items-default">
<div class="timeline-content text-left">
<h2>3. Processing</h2>
<p>After we’ve agreed on the terms and structure of your loan, we’ll collect additional documentation.</p>
<div class="hexagon"></div>
<i class="material-icons">note_add</i>
</div>
</div>
<div class="timeline-item flex-items-default">
<div class="timeline-content text-left">
<h2>4. Underwriting</h2>
<p>Our team will then validate and analyze borrower and property details, keeping you updated along the way.</p>
<div class="hexagon"></div>
<i class="material-icons">find_in_page</i>
</div>
</div>
<div class="timeline-item flex-items-default">
<div class="timeline-content text-left">
<h2>5. Closing & Funding</h2>
<p>Our team will then obtain credit committee approval to fund transaction. Now it’s time to celebrate! Your loan has been funded.</p>
<div class="hexagon"></div>
<i class="material-icons">house</i>
</div>
</div>

</div>
</div>
</section>

CSS: (added in custom css)

body {
background-color: #f5efed;
}

section {
height: 600px;
background-image: linear-gradient(to bottom, rgba(0, 121, 193, 0.75) 0%, rgba(70, 93, 255, 0.75) 100%), url(http://bluebeam.com/uk/bluebeamchallenge/_assets/bg-hero.jpg);
}
section h1 {
margin-top: 50px;
margin-bottom: 350px;
color: white;
}

p {
font-family: "Source Sans Pro", sans-serif;
font-size: 18px;
}

h2 {
font-family: "Roboto", sans-serif;
}

.timeline {
width: 100%;
position: relative;
perspective: 5000px;
}
.timeline:before {
position: absolute;
content: "";
width: 100%;
height: 15px;
background-color: #d5dfe5;
border-radius: 15px;
top: 76px;
}
.timeline .timeline-item {
text-align: center;
position: relative;
z-index: 1;
cursor: pointer;
}
.timeline .timeline-item:hover:after {
transform: scale(1.5, 1.5);
}
.timeline .timeline-item.selected:after {
background-color: #1c77c3;
border: 5px solid #56cbf9;
transform: scale(1.5, 1.5);
}
.timeline .timeline-item:after {
width: 30px;
height: 30px;
position: absolute;
top: 69px;
left: 50%;
margin-left: -15px;
background-color: #f5efed;
border: 5px solid #d5dfe5;
content: "";
border-radius: 50%;
transition: transform 0.5s ease;
}
.timeline .timeline-item .timeline-content {
position: absolute;
top: -300px;
display: none;
width: 350px;
left: -60px;
cursor: auto;
}
.timeline .timeline-item .timeline-content.fadeIn {
animation-delay: 0.2s;
}
.timeline .timeline-item .timeline-content.animated {
display: block;
}

.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
align-items: flex-start;
}

.flex-items-default {
width: 224px;
height: 150px;
}

.dropdown {
width: 400px;
height: 326px;
background: white;
box-shadow: 0 3px 20px 1px rgba(0, 0, 0, 0.1);
border-radius: 5px;
position: absolute;
top: -310px;
animation-duration: 0.2s;
transition: left 0.3s ease;
}
.dropdown .inner {
position: relative;
width: 100%;
height: 326px;
}
.dropdown .inner .arrow-down {
position: absolute;
bottom: -19px;
left: 50%;
margin-left: -20px;
}

.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid white;
}

.animated {
display: block;
}

.material-icons {
position: absolute;
top: 189px;
left: 160px;
width: 100%;
color: white;
font-size: 33px;
}

.hexagon {
position: relative;
width: 75px;
height: 43.3px;
background-color: #1c77c3;
margin: 21.65px 0;
left: 50%;
margin-left: -37px;
top: 25px;
}

.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: 37.5px solid transparent;
border-right: 37.5px solid transparent;
}

.hexagon:before {
bottom: 100%;
border-bottom: 21.65px solid #1c77c3;
}

.hexagon:after {
top: 100%;
width: 0;
border-top: 21.65px solid #1c77c3;
}

JS: (Code Injection, header)

// Globals
var prefixes =
"webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";
var $container = $(".container");
var $timeline = $(".timeline");
var $timelineItem = $(".timeline-item");
var $timelineContent = $(".timeline-content");
var $dropDown = $(".dropdown");
var $hasHovered = true;
var hideOnExit = false;

// mouseenter event handler
$timelineItem.on("mouseenter", function (e) {
var isSelected = $(this).hasClass("selected");

if (isSelected === false) {
var leftPos = $(this).position().left,
left = leftPos - 88,
$that = $(this);

$timelineItem.removeClass("selected");
$(this).addClass("selected");

if ($hasHovered === false) {
// Show Bounce

// Set Flag
$hasHovered = true;

// Show DD Bounce
showBounce(left);

// Show DD content Bounce
showContentBounce($that);
} else {
// Follow

// Change pos of DD to follow
dropDownFollow(left);

// Hide previous dd content
$timelineContent.removeClass("animated fadeIn bounceIn");

// Show hovered dd content
$that.find($timelineContent).addClass("animated fadeIn");
}
}
});

// mouseleave event handler
$timeline.on("mouseleave", function (e) {
if (hideOnExit) {
// Set Flag
$hasHovered = false;

// Hide DD
hideDropDown();

// Hide DD content
$timelineContent.removeClass("animated fadeIn");
}
});

// Animation end event listener
$dropDown.on(prefixes, function (e) {
if (e.originalEvent.animationName === "fadeOut") {
$dropDown.removeAttr("style");
}
});

/**
* Private functions that do showing/hiding/animating
*/
function showContentBounce(that) {
$hasBounced = true;
that.find(".timeline-content").addClass("animated bounceIn");
}

function showBounce(pos) {
$dropDown
.css("left", pos + "px")
.removeClass("fadeOut")
.addClass("animated bounceIn");
}

function dropDownFollow(pos) {
$dropDown.css("left", pos + "px");
}

function hideDropDown() {
$timelineItem.removeClass("selected");
$dropDown.removeClass("bounceIn").addClass("fadeOut");
}

inunzi · November 18, 2020

8 hours ago, carlylecapital said:

Site URL: https://www.carlylecapitalinc.com/

Hi there, I'm not able to add my codepen HTML, CSS and JS successfully to my site. Can someone tell me what I'm doing wrong?

HTML: (added code in </> code block)

<section>
<div class="container">
<h1 class="text-center">OUR PROCESS</h1>
<div class="timeline flex-container">

<div class="timeline-item flex-items-default selected">
<div class="timeline-content text-left animated bounceIn">
<h2>1. Let's Talk</h2>
<p>Submit a form online or contact us directly. We’ll discuss your project needs to ensure it meets our lending guidelines.</p>
<div class="hexagon"></div>
<i class="material-icons">phone</i>
</div>
</div>
<div class="timeline-item flex-items-default">
<div class="timeline-content text-left">
<h2>2. Letter of Intent</h2>
<p>Afterwards we’ll issue a Letter of Intent that outlines terms, document requirements, and costs to proceed.</p>
<div class="hexagon"></div>
<i class="material-icons">article</i>
</div>
</div>
<div class="timeline-item flex-items-default">
<div class="timeline-content text-left">
<h2>3. Processing</h2>
<p>After we’ve agreed on the terms and structure of your loan, we’ll collect additional documentation.</p>
<div class="hexagon"></div>
<i class="material-icons">note_add</i>
</div>
</div>
<div class="timeline-item flex-items-default">
<div class="timeline-content text-left">
<h2>4. Underwriting</h2>
<p>Our team will then validate and analyze borrower and property details, keeping you updated along the way.</p>
<div class="hexagon"></div>
<i class="material-icons">find_in_page</i>
</div>
</div>
<div class="timeline-item flex-items-default">
<div class="timeline-content text-left">
<h2>5. Closing & Funding</h2>
<p>Our team will then obtain credit committee approval to fund transaction. Now it’s time to celebrate! Your loan has been funded.</p>
<div class="hexagon"></div>
<i class="material-icons">house</i>
</div>
</div>

<div class="dropdown animated bounceIn" style="left: -88px;">
<div class="inner">
<div class="arrow-down"></div>
</div>
</div>

</div>
</div>
</section>

CSS: (added in custom css)

body {
background-color: #f5efed;
}

section {
height: 600px;
background-image: linear-gradient(to bottom, rgba(0, 121, 193, 0.75) 0%, rgba(70, 93, 255, 0.75) 100%), url(http://bluebeam.com/uk/bluebeamchallenge/_assets/bg-hero.jpg);
}
section h1 {
margin-top: 50px;
margin-bottom: 350px;
color: white;
}

p {
font-family: "Source Sans Pro", sans-serif;
font-size: 18px;
}

h2 {
font-family: "Roboto", sans-serif;
}

.timeline {
width: 100%;
position: relative;
perspective: 5000px;
}
.timeline:before {
position: absolute;
content: "";
width: 100%;
height: 15px;
background-color: #d5dfe5;
border-radius: 15px;
top: 76px;
}
.timeline .timeline-item {
text-align: center;
position: relative;
z-index: 1;
cursor: pointer;
}
.timeline .timeline-item:hover:after {
transform: scale(1.5, 1.5);
}
.timeline .timeline-item.selected:after {
background-color: #1c77c3;
border: 5px solid #56cbf9;
transform: scale(1.5, 1.5);
}
.timeline .timeline-item:after {
width: 30px;
height: 30px;
position: absolute;
top: 69px;
left: 50%;
margin-left: -15px;
background-color: #f5efed;
border: 5px solid #d5dfe5;
content: "";
border-radius: 50%;
transition: transform 0.5s ease;
}
.timeline .timeline-item .timeline-content {
position: absolute;
top: -300px;
display: none;
width: 350px;
left: -60px;
cursor: auto;
}
.timeline .timeline-item .timeline-content.fadeIn {
animation-delay: 0.2s;
}
.timeline .timeline-item .timeline-content.animated {
display: block;
}

.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
align-items: flex-start;
}

.flex-items-default {
width: 224px;
height: 150px;
}

.dropdown {
width: 400px;
height: 326px;
background: white;
box-shadow: 0 3px 20px 1px rgba(0, 0, 0, 0.1);
border-radius: 5px;
position: absolute;
top: -310px;
animation-duration: 0.2s;
transition: left 0.3s ease;
}
.dropdown .inner {
position: relative;
width: 100%;
height: 326px;
}
.dropdown .inner .arrow-down {
position: absolute;
bottom: -19px;
left: 50%;
margin-left: -20px;
}

.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid white;
}

.animated {
display: block;
}

.material-icons {
position: absolute;
top: 189px;
left: 160px;
width: 100%;
color: white;
font-size: 33px;
}

.hexagon {
position: relative;
width: 75px;
height: 43.3px;
background-color: #1c77c3;
margin: 21.65px 0;
left: 50%;
margin-left: -37px;
top: 25px;
}

.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: 37.5px solid transparent;
border-right: 37.5px solid transparent;
}

.hexagon:before {
bottom: 100%;
border-bottom: 21.65px solid #1c77c3;
}

.hexagon:after {
top: 100%;
width: 0;
border-top: 21.65px solid #1c77c3;
}

JS: (Code Injection, header)

// Globals
var prefixes =
"webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";
var $container = $(".container");
var $timeline = $(".timeline");
var $timelineItem = $(".timeline-item");
var $timelineContent = $(".timeline-content");
var $dropDown = $(".dropdown");
var $hasHovered = true;
var hideOnExit = false;

// mouseenter event handler
$timelineItem.on("mouseenter", function (e) {
var isSelected = $(this).hasClass("selected");

if (isSelected === false) {
var leftPos = $(this).position().left,
left = leftPos - 88,
$that = $(this);

$timelineItem.removeClass("selected");
$(this).addClass("selected");

if ($hasHovered === false) {
// Show Bounce

// Set Flag
$hasHovered = true;

// Show DD Bounce
showBounce(left);

// Show DD content Bounce
showContentBounce($that);
} else {
// Follow

// Change pos of DD to follow
dropDownFollow(left);

// Hide previous dd content
$timelineContent.removeClass("animated fadeIn bounceIn");

// Show hovered dd content
$that.find($timelineContent).addClass("animated fadeIn");
}
}
});

// mouseleave event handler
$timeline.on("mouseleave", function (e) {
if (hideOnExit) {
// Set Flag
$hasHovered = false;

// Hide DD
hideDropDown();

// Hide DD content
$timelineContent.removeClass("animated fadeIn");
}
});

// Animation end event listener
$dropDown.on(prefixes, function (e) {
if (e.originalEvent.animationName === "fadeOut") {
$dropDown.removeAttr("style");
}
});

/**
* Private functions that do showing/hiding/animating
*/
function showContentBounce(that) {
$hasBounced = true;
that.find(".timeline-content").addClass("animated bounceIn");
}

function showBounce(pos) {
$dropDown
.css("left", pos + "px")
.removeClass("fadeOut")
.addClass("animated bounceIn");
}

function dropDownFollow(pos) {
$dropDown.css("left", pos + "px");
}

function hideDropDown() {
$timelineItem.removeClass("selected");
$dropDown.removeClass("bounceIn").addClass("fadeOut");
}

Where are you putting these codes? Do you think you might be putting them in the wrong place?

Beyondspace · November 18, 2020

Please make sure in code injection, you wrap the script snippet inside <script> and </script>

JS: (Code Injection, header)

carlylecapital · November 18, 2020

9 hours ago, inunzi said:

Where are you putting these codes? Do you think you might be putting them in the wrong place?

I put the HTML in a code block on the page i want it to be on, the JS in the code injection, header and the CSS in Design, Custom CSS

carlylecapital · November 18, 2020

7 hours ago, bangank36 said:

Please make sure in code injection, you wrap the script snippet inside <script> and </script>

JS: (Code Injection, header)

Thanks for this! I added the <script> and </script> but it is still not working properly

IXStudio · November 18, 2020

Hi,
Please let me know the codepen (Base) code you used and which section you used in your website?

Please use the like button if it helps you!

Best,
Leopold

carlylecapital · November 18, 2020

1 hour ago, IXStudio said:

Hi,
Please let me know the codepen (Base) code you used and which section you used in your website?

Please use the like button if it helps you!

Best,
Leopold

I have all the code in my question and am not sure what the base code is, the only code i didnt use was this: <p class="codepen" data-height="237" data-theme-id="light" data-default-tab="html,result" data-user="vram1980" data-slug-hash="jrzgXk" style="height: 237px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Horizontal Timeline">
<span>See the Pen <a href="https://codepen.io/vram1980/pen/jrzgXk">
Horizontal Timeline</a> by Vincent Ramos (<a href="https://codepen.io/vram1980">@vram1980</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

I used it in a code block

IXStudio · November 19, 2020

Insert this code in your code block and let me know if it not works!

<section>
    <div class="container">
        <h1 class="text-center">OUR PROCESS</h1>
        <div class="timeline flex-container">
            <div class="timeline-item flex-items-default selected">
                <div class="timeline-content text-left animated bounceIn">
                    <h2>1. Let's Talk</h2>
                    <p>Submit a form online or contact us directly. We’ll discuss your project needs to ensure it meets our lending guidelines.</p>
                    <div class="hexagon"></div>
                    <i class="material-icons">phone</i>
                </div>
            </div>
            <div class="timeline-item flex-items-default">
                <div class="timeline-content text-left">
                    <h2>2. Letter of Intent</h2>
                    <p>Afterwards we’ll issue a Letter of Intent that outlines terms, document requirements, and costs to proceed.</p>
                    <div class="hexagon"></div>
                    <i class="material-icons">article</i>
                </div>
            </div>
            <div class="timeline-item flex-items-default">
                <div class="timeline-content text-left">
                    <h2>3. Processing</h2>
                    <p>After we’ve agreed on the terms and structure of your loan, we’ll collect additional documentation.</p>
                    <div class="hexagon"></div>
                    <i class="material-icons">note_add</i>
                </div>
            </div>
            <div class="timeline-item flex-items-default">
                <div class="timeline-content text-left">
                    <h2>4. Underwriting</h2>
                    <p>Our team will then validate and analyze borrower and property details, keeping you updated along the way.</p>
                    <div class="hexagon"></div>
                    <i class="material-icons">find_in_page</i>
                </div>
            </div>
            <div class="timeline-item flex-items-default">
                <div class="timeline-content text-left">
                    <h2>5. Closing & Funding</h2>
                    <p>Our team will then obtain credit committee approval to fund transaction. Now it’s time to celebrate! Your loan has been funded.</p>
                    <div class="hexagon"></div>
                    <i class="material-icons">house</i>
                </div>
            </div>
            <div class="dropdown animated bounceIn" style="left: -88px;">
                <div class="inner">
                    <div class="arrow-down"></div>
                </div>
            </div>
        </div>
    </div>
</section>
<style>
body {
    background-color: #f5efed;
}

section {
    height: 600px;
    background-image: linear-gradient(to bottom, rgba(0, 121, 193, 0.75) 0%, rgba(70, 93, 255, 0.75) 100%), url(http://bluebeam.com/uk/bluebeamchallenge/_assets/bg-hero.jpg);
}

section h1 {
    margin-top: 50px;
    margin-bottom: 350px;
    color: white;
}

p {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 18px;
}

h2 {
    font-family: "Roboto", sans-serif;
}

.timeline {
    width: 100%;
    position: relative;
    perspective: 5000px;
}

.timeline:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 15px;
    background-color: #d5dfe5;
    border-radius: 15px;
    top: 76px;
}

.timeline .timeline-item {
    text-align: center;
    position: relative;
    z-index: 1;
    cursor: pointer;
}

.timeline .timeline-item:hover:after {
    transform: scale(1.5, 1.5);
}

.timeline .timeline-item.selected:after {
    background-color: #1c77c3;
    border: 5px solid #56cbf9;
    transform: scale(1.5, 1.5);
}

.timeline .timeline-item:after {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 69px;
    left: 50%;
    margin-left: -15px;
    background-color: #f5efed;
    border: 5px solid #d5dfe5;
    content: "";
    border-radius: 50%;
    transition: transform 0.5s ease;
}

.timeline .timeline-item .timeline-content {
    position: absolute;
    top: -300px;
    display: none;
    width: 350px;
    left: -60px;
    cursor: auto;
}

.timeline .timeline-item .timeline-content.fadeIn {
    animation-delay: 0.2s;
}

.timeline .timeline-item .timeline-content.animated {
    display: block;
}

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
}

.flex-items-default {
    width: 224px;
    height: 150px;
}

.dropdown {
    width: 400px;
    height: 326px;
    background: white;
    box-shadow: 0 3px 20px 1px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    position: absolute;
    top: -310px;
    animation-duration: 0.2s;
    transition: left 0.3s ease;
}

.dropdown .inner {
    position: relative;
    width: 100%;
    height: 326px;
}

.dropdown .inner .arrow-down {
    position: absolute;
    bottom: -19px;
    left: 50%;
    margin-left: -20px;
}

.arrow-down {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid white;
}

.animated {
    display: block;
}

.material-icons {
    position: absolute;
    top: 189px;
    left: 160px;
    width: 100%;
    color: white;
    font-size: 33px;
}

.hexagon {
    position: relative;
    width: 75px;
    height: 43.3px;
    background-color: #1c77c3;
    margin: 21.65px 0;
    left: 50%;
    margin-left: -37px;
    top: 25px;
}

.hexagon:before,
.hexagon:after {
    content: "";
    position: absolute;
    width: 0;
    border-left: 37.5px solid transparent;
    border-right: 37.5px solid transparent;
}

.hexagon:before {
    bottom: 100%;
    border-bottom: 21.65px solid #1c77c3;
}

.hexagon:after {
    top: 100%;
    width: 0;
    border-top: 21.65px solid #1c77c3;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
// Globals
var prefixes =
    "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";
var $container = $(".container");
var $timeline = $(".timeline");
var $timelineItem = $(".timeline-item");
var $timelineContent = $(".timeline-content");
var $dropDown = $(".dropdown");
var $hasHovered = true;
var hideOnExit = false;

// mouseenter event handler
$timelineItem.on("mouseenter", function(e) {
    var isSelected = $(this).hasClass("selected");

    if (isSelected === false) {
        var leftPos = $(this).position().left,
            left = leftPos - 88,
            $that = $(this);

        $timelineItem.removeClass("selected");
        $(this).addClass("selected");

        if ($hasHovered === false) {
            // Show Bounce

            // Set Flag
            $hasHovered = true;

            // Show DD Bounce
            showBounce(left);

            // Show DD content Bounce
            showContentBounce($that);
        } else {
            // Follow

            // Change pos of DD to follow
            dropDownFollow(left);

            // Hide previous dd content
            $timelineContent.removeClass("animated fadeIn bounceIn");

            // Show hovered dd content
            $that.find($timelineContent).addClass("animated fadeIn");
        }
    }
});

// mouseleave event handler
$timeline.on("mouseleave", function(e) {
    if (hideOnExit) {
        //   Set Flag
        $hasHovered = false;

        // Hide DD
        hideDropDown();

        // Hide DD content
        $timelineContent.removeClass("animated fadeIn");
    }
});

// Animation end event listener
$dropDown.on(prefixes, function(e) {
    if (e.originalEvent.animationName === "fadeOut") {
        $dropDown.removeAttr("style");
    }
});

/**
 * Private functions that do showing/hiding/animating
 */
function showContentBounce(that) {
    $hasBounced = true;
    that.find(".timeline-content").addClass("animated bounceIn");
}

function showBounce(pos) {
    $dropDown
        .css("left", pos + "px")
        .removeClass("fadeOut")
        .addClass("animated bounceIn");
}

function dropDownFollow(pos) {
    $dropDown.css("left", pos + "px");
}

function hideDropDown() {
    $timelineItem.removeClass("selected");
    $dropDown.removeClass("bounceIn").addClass("fadeOut");
}
</script>

Please use the like button if it helps you!

Best,
Leopold

carlylecapital · November 19, 2020

3 hours ago, IXStudio said:

Insert this code in your code block and let me know if it not works!


<section>
    <div class="container">
        <h1 class="text-center">OUR PROCESS</h1>
        <div class="timeline flex-container">
            <div class="timeline-item flex-items-default selected">
                <div class="timeline-content text-left animated bounceIn">
                    <h2>1. Let's Talk</h2>
                    <p>Submit a form online or contact us directly. We’ll discuss your project needs to ensure it meets our lending guidelines.</p>
                    <div class="hexagon"></div>
                    <i class="material-icons">phone</i>
                </div>
            </div>
            <div class="timeline-item flex-items-default">
                <div class="timeline-content text-left">
                    <h2>2. Letter of Intent</h2>
                    <p>Afterwards we’ll issue a Letter of Intent that outlines terms, document requirements, and costs to proceed.</p>
                    <div class="hexagon"></div>
                    <i class="material-icons">article</i>
                </div>
            </div>
            <div class="timeline-item flex-items-default">
                <div class="timeline-content text-left">
                    <h2>3. Processing</h2>
                    <p>After we’ve agreed on the terms and structure of your loan, we’ll collect additional documentation.</p>
                    <div class="hexagon"></div>
                    <i class="material-icons">note_add</i>
                </div>
            </div>
            <div class="timeline-item flex-items-default">
                <div class="timeline-content text-left">
                    <h2>4. Underwriting</h2>
                    <p>Our team will then validate and analyze borrower and property details, keeping you updated along the way.</p>
                    <div class="hexagon"></div>
                    <i class="material-icons">find_in_page</i>
                </div>
            </div>
            <div class="timeline-item flex-items-default">
                <div class="timeline-content text-left">
                    <h2>5. Closing & Funding</h2>
                    <p>Our team will then obtain credit committee approval to fund transaction. Now it’s time to celebrate! Your loan has been funded.</p>
                    <div class="hexagon"></div>
                    <i class="material-icons">house</i>
                </div>
            </div>
            <div class="dropdown animated bounceIn" style="left: -88px;">
                <div class="inner">
                    <div class="arrow-down"></div>
                </div>
            </div>
        </div>
    </div>
</section>
<style>
body {
    background-color: #f5efed;
}

section {
    height: 600px;
    background-image: linear-gradient(to bottom, rgba(0, 121, 193, 0.75) 0%, rgba(70, 93, 255, 0.75) 100%), url(http://bluebeam.com/uk/bluebeamchallenge/_assets/bg-hero.jpg);
}

section h1 {
    margin-top: 50px;
    margin-bottom: 350px;
    color: white;
}

p {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 18px;
}

h2 {
    font-family: "Roboto", sans-serif;
}

.timeline {
    width: 100%;
    position: relative;
    perspective: 5000px;
}

.timeline:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 15px;
    background-color: #d5dfe5;
    border-radius: 15px;
    top: 76px;
}

.timeline .timeline-item {
    text-align: center;
    position: relative;
    z-index: 1;
    cursor: pointer;
}

.timeline .timeline-item:hover:after {
    transform: scale(1.5, 1.5);
}

.timeline .timeline-item.selected:after {
    background-color: #1c77c3;
    border: 5px solid #56cbf9;
    transform: scale(1.5, 1.5);
}

.timeline .timeline-item:after {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 69px;
    left: 50%;
    margin-left: -15px;
    background-color: #f5efed;
    border: 5px solid #d5dfe5;
    content: "";
    border-radius: 50%;
    transition: transform 0.5s ease;
}

.timeline .timeline-item .timeline-content {
    position: absolute;
    top: -300px;
    display: none;
    width: 350px;
    left: -60px;
    cursor: auto;
}

.timeline .timeline-item .timeline-content.fadeIn {
    animation-delay: 0.2s;
}

.timeline .timeline-item .timeline-content.animated {
    display: block;
}

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
}

.flex-items-default {
    width: 224px;
    height: 150px;
}

.dropdown {
    width: 400px;
    height: 326px;
    background: white;
    box-shadow: 0 3px 20px 1px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    position: absolute;
    top: -310px;
    animation-duration: 0.2s;
    transition: left 0.3s ease;
}

.dropdown .inner {
    position: relative;
    width: 100%;
    height: 326px;
}

.dropdown .inner .arrow-down {
    position: absolute;
    bottom: -19px;
    left: 50%;
    margin-left: -20px;
}

.arrow-down {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid white;
}

.animated {
    display: block;
}

.material-icons {
    position: absolute;
    top: 189px;
    left: 160px;
    width: 100%;
    color: white;
    font-size: 33px;
}

.hexagon {
    position: relative;
    width: 75px;
    height: 43.3px;
    background-color: #1c77c3;
    margin: 21.65px 0;
    left: 50%;
    margin-left: -37px;
    top: 25px;
}

.hexagon:before,
.hexagon:after {
    content: "";
    position: absolute;
    width: 0;
    border-left: 37.5px solid transparent;
    border-right: 37.5px solid transparent;
}

.hexagon:before {
    bottom: 100%;
    border-bottom: 21.65px solid #1c77c3;
}

.hexagon:after {
    top: 100%;
    width: 0;
    border-top: 21.65px solid #1c77c3;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
// Globals
var prefixes =
    "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";
var $container = $(".container");
var $timeline = $(".timeline");
var $timelineItem = $(".timeline-item");
var $timelineContent = $(".timeline-content");
var $dropDown = $(".dropdown");
var $hasHovered = true;
var hideOnExit = false;

// mouseenter event handler
$timelineItem.on("mouseenter", function(e) {
    var isSelected = $(this).hasClass("selected");

    if (isSelected === false) {
        var leftPos = $(this).position().left,
            left = leftPos - 88,
            $that = $(this);

        $timelineItem.removeClass("selected");
        $(this).addClass("selected");

        if ($hasHovered === false) {
            // Show Bounce

            // Set Flag
            $hasHovered = true;

            // Show DD Bounce
            showBounce(left);

            // Show DD content Bounce
            showContentBounce($that);
        } else {
            // Follow

            // Change pos of DD to follow
            dropDownFollow(left);

            // Hide previous dd content
            $timelineContent.removeClass("animated fadeIn bounceIn");

            // Show hovered dd content
            $that.find($timelineContent).addClass("animated fadeIn");
        }
    }
});

// mouseleave event handler
$timeline.on("mouseleave", function(e) {
    if (hideOnExit) {
        //   Set Flag
        $hasHovered = false;

        // Hide DD
        hideDropDown();

        // Hide DD content
        $timelineContent.removeClass("animated fadeIn");
    }
});

// Animation end event listener
$dropDown.on(prefixes, function(e) {
    if (e.originalEvent.animationName === "fadeOut") {
        $dropDown.removeAttr("style");
    }
});

/**
 * Private functions that do showing/hiding/animating
 */
function showContentBounce(that) {
    $hasBounced = true;
    that.find(".timeline-content").addClass("animated bounceIn");
}

function showBounce(pos) {
    $dropDown
        .css("left", pos + "px")
        .removeClass("fadeOut")
        .addClass("animated bounceIn");
}

function dropDownFollow(pos) {
    $dropDown.css("left", pos + "px");
}

function hideDropDown() {
    $timelineItem.removeClass("selected");
    $dropDown.removeClass("bounceIn").addClass("fadeOut");
}
</script>

Please use the like button if it helps you!

Best,
Leopold

Thank you so much that did help! However, there are a few things that still don't work such as:

<div class="hexagon"></div>
<i class="material-icons">phone</i>

All hexagon symbols are showing up looking like a wrench rather than a hexagon and the material icons only show up as words rather that as icons (ex: phone is spelled out rather than showing an icon of a phone)

Help with CodePen in squarespace

Recommended Posts

carlylecapital

Link to comment

inunzi

Link to comment

Beyondspace

Link to comment

carlylecapital

Link to comment

carlylecapital

Link to comment

IXStudio

Link to comment

carlylecapital

Link to comment

IXStudio

Link to comment

carlylecapital

Link to comment

Archived

News

Events

Circle Day

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources