AnnaNeedsHelp Posted September 7, 2022 Share Posted September 7, 2022 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
tuanphan Posted September 7, 2022 Share Posted September 7, 2022 Add to top of Code Block <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 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
AnnaNeedsHelp Posted September 7, 2022 Author Share Posted September 7, 2022 9 minutes ago, tuanphan said: Add to top of Code Block <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> Thank you, Tuan! I also figured out how to fix the "slide down" animation Link to comment
AnnaNeedsHelp Posted September 7, 2022 Author Share Posted September 7, 2022 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> Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment