Jump to content

URGENT Codepen not working as it should be!!!!

Recommended Posts

Hello everybody, can someone help?

I've been trying to add this code below into my website but the results aren't quite as I intended.

This is a modified codepen I've found for a grid-services with hoover effect. Original codepen is: https://codepen.io/daya-s/pen/MOdzGY

After modifications it should be looking like this: image.thumb.png.cbcebbd4764dd440afd2a03f3751c63b.png

 

But when I transfer the code into my website using <style> and <script> to rely the 3 codes, it turns out completely different:

image.thumb.png.954f1394d471a56da79aff3ec145fdc5.png

This is the full code I've used: 

 

<div class="container">
  <h2 class="text-center text-bold">Our Services</h2>
        <div class="starter-template">
            <div class="row">
                <div class="col-sm-4">
                    <section class="hover-div"> <img src="https://worldline.com/content/dam/worldline-new/assets/images/icons/clearing-settlement.png" width="100">
                        <div class="hover-div_inner">
                            <h3><a href="#">Payment Solutions</a></h3>
                            <p class="text-center">Payroll solutions, bulk & batched payments or 3rd party incoming payments – WE PROVIDE SOLUTIONS!</p>
                            
                        </div>
                    </section>
                </div>
                <div class="col-sm-4">
                    <section class="hover-div"> <img src="https://worldline.com/content/dam/worldline-new/assets/images/icons/icon-connectivity-management.png" width="100">
                        <div class="hover-div_inner">
                            <h3><a href="#">Business Cash-Flow Strategy</a></h3>
                            <p class="text-center">Our tailor-made strategies will HELP YOU SAVE & PROTECT YOUR MONEY!</p>
                           
                        </div>
                    </section>
                </div>
                <div class="col-sm-4">
                    <section class="hover-div"> <img src="https://worldline.com/content/dam/worldline-new/assets/images/icons/icon-issuing.png" width="80">
                        <div class="hover-div_inner">
                            <h3><a href="#">Multicurrency Accounts</a></h3>
                            <p class="text-center">Receive, Pay & Stock up money in domestic currencies!</p>
                      
            </div>
        </div>
                  
                  
        <div class="starter-template">
            <div class="row">
                <div class="col-sm-4">
                    <section class="hover-div"> <img src="https://worldline.com/content/dam/worldline-new/assets/images/icons/citizen.png" width="100">
                        <div class="hover-div_inner">
                            <h3><a href="#">Private Foreign Exchange</a></h3>
                            <p class="text-center">Benefit from bank-beating exchange rates and our expertise every step of the way!</p>
                            
                        </div>
                    </section>
                </div>
                <div class="col-sm-4">
                    <section class="hover-div"> <img src="https://worldline.com/content/dam/worldline-new/icons/wallet.png" width="100">
                        <div class="hover-div_inner">
                            <h3><a href="#">Financial Planning & Wealth Management</a></h3>
                            <p class="text-center">With our partners we provide you with regulated advice and full understanding of your financial needs</p>
                           
                        </div>
                    </section>
                </div>
                <div class="col-sm-4">
                    <section class="hover-div"> <img src="https://worldline.com/content/dam/worldline-new/assets/images/icons/expenditure.png" width="80">
                        <div class="hover-div_inner">
                            <h3><a href="#">Expense Reporting & Insurance</a></h3>
                            <p class="text-center">GO sustainable and environmentally friendly with pre-paid cards, monitor foreign expenses, manage receipts and streamline your accounting. </p>
                      
            </div>
        </div>
    </div>
    <style>
      body {
            font-family: 'Lato', sans-serif;
            padding-top: 0px;
        }
 .starter-template {
            padding: 20px 15px;
            text-align: center;
        }

span.lower-text {
            color: #ffc300;
            font-size: 25px;
            display: block;
        }
        
        .hover-div {
            padding: 20px 20px;
            text-align: center;
            min-height: 350px;
        }
        
        .hover-div {
            border-top: 1px solid #f8f8f8;
            background: #f8f8f8;
            box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
            -webkit-transition: all 0.3s;
            transition: all 0.3s;
            margin: 10px 0px;
        }
        
        .hover-div:hover {
            -webkit-transform: translateY(-20px);
            -ms-transform: translateY(-20px);
            transform: translateY(-20px);
            box-shadow: 0 22px 43px rgba(0, 0, 0, 0.32);
            cursor: pointer;
            border-radius: 5px;
        }
    </style>
    <script>
       $(document).ready(function () {
            $('.hover-div').hover(function () {
                $('.hover-div').stop().fadeTo('fast', 0.3);
                $(this).stop().fadeTo('fast', 1);
            }, function () {
                $('.hover-div').stop().fadeTo('fast', 1);
            });
        });
    </script>

 

Can anyone help me?

 

Thank you!

Link to comment
  • Replies 1
  • Views 894
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Hi. You missing some external libraries.

(Click Gear icon to see all external code libraries)

external.thumb.png.8046dd856c9235261d1b8e3bfdc4a1c2.png

Also, your Codepen uses Bootstrap Framework, it will conflict with Editor Toolbar in Editing Mode.

You should find another code to achieve same layout.

I think we can also use Summary Block + CSS to achieve same layout. I will try testing code this weekend.

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

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

Hire a Designer

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