abbiericher
-
Posts
74 -
Joined
-
Last visited
abbiericher's Achievements
-
Hi group, I redesigned my website early this year and I did major changes in my navigation - like deleted some pages. Now Google inform me that they still crawl those pages but they are not found (which is normal, I deleted the pages). But in some way, they are still indexed. Did some research and I have to add a 410 code to the URLs. When I tried, it says the code is incorrect and that is has to be a 301 or 302. What should I do? Do you guys have an alternative to definitely delete those page from my sitemap? *I might not use all the good words to explain, i'm not an expert in SEO 🙂 Thanks!
-
Any free solution?
-
Hey @tuanphan! Thanks for the previous code! I tried it on my client's website and everything looks. Do you think it is possible to add element aside the animated numbers? I would like to add a % after 97 and "ans" after 40 Here's the link: https://voyages-jacqueline.squarespace.com/ PW: freelance Thank you!
-
Hey group, I was wondering if one of you knew how to reproduce a tab like the one on this site: https://tonrevedesign.wixsite.com/kendra (which is a built in option in Wix)... I do want it to change automatically (maybe every 5 secondes) or manually - when you click on the tabs, you can switch them (I don't wanna use the next-previous on each side) Any help? Thanks! 🙂
-
Creating a price table with interaction
abbiericher replied to abbiericher's topic in Customize with code
Yeah I found a solution. -
Creating a price table with interaction
abbiericher replied to abbiericher's topic in Customize with code
Found a code online and tweak it. Looks like this: https://alau-site-web.squarespace.com/prix (password: freelance). But, i'm not able to move the class "nb-course" in the middle of the table. And we can see the border table line in the "nb-course", which I dont want. Would you be able to help? -
Hi group! My client would like a price table like this: https://aquado.ca/tarifs/?fbclid=IwAR0SfshP8M1blW54mlgx2WHbPAdtNMSDFZmXsdVEx7b_94tN-pt4DzjgFpk Where you click on the number and ONLY the price changes. Also, she would like a accordion just below the card title with a small description of the package. I tried to code a table but can't figure it out... Client's website: https://alau-site-web.squarespace.com/ Password: freelance Any idea?
-
Pricing table + accordion HTML-CSS-JS
abbiericher replied to abbiericher's topic in Customize with code
@tuanphan any help oh the 2 last questions? 🙂 -
Pricing table + accordion HTML-CSS-JS
abbiericher replied to abbiericher's topic in Customize with code
The first code works! Thanks @tuanphan. #2: I used the code below in a code block element #3: No the button accordion title <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Prix</title> <link rel="stylesheet" href="styles.css"> <style> .price-table { float: left; width: 29.1%; background: #fcfeff!important; border-radius: 30px; margin: 5px; padding: 20px; } @media only screen and (max-width: 600px) { .price-table { width: 87%; margin-bottom: 30px; } } .price-table:hover { background: var(--light-green)!important; border: 1px solid var(--blue); } .price-header { text-align: center; } .price-header h3 { margin: 0; font-size: 24px; color: var(--blue); } @media only screen and (max-width: 600px) { .price-header h3 { padding-top: 15px; } } .price-header h4 { margin: 5px 0; font-size: 18px; color: var(--dark); } .price-content { padding-top: 15px; } .course { padding: 15px 0px; display: grid; justify-content: center; } ul { list-style-type: none; padding: 0; } li { text-align: center; } .division { border: 1px solid var(--light-green); width: 100%; } .price-content { margin: 0; } @media only screen and (max-width: 600px) { .price-content { margin-left: 10px; } } .price-content .price { font-weight: bold; font-size: 2rem; padding-top: 15px; } .price-content button { background-color: #007bff; color: #fff; border: none; border-radius: 5px; padding: 10px 20px; cursor: pointer; transition: background-color 0.3s ease; margin-left: 50px; } .price-content button:hover { background-color: var (--white); } .accordion { background-color: var(--white); color: var(--dark); cursor: pointer; padding: 8px 10px; padding-top: 15px; width: 91%; text-align: center; font-size: 15px; border: none; outline: none; transition: 0.4s; } .active, .accordion:hover { background-color: none; } .panel { padding: 0 15px; background-color: white; display: none; overflow: hidden; } </style> </head> <body> <div class="price-table"> <div class="price-header"> <h3>L'express</h3> <h4>1 cours</h4> </div> <div class="accordion"> <button class="accordion">Cliquez pour voir la description</button> <div class="panel"> <p>Cours de natation privés visant à évaluer les capacités du nageur, en identifiant ses points forts et faibles. Le forfait inclut également des exercices ciblés pour renforcer ses compétences.</p> </div> </div> <div class="price-content"> <div class="course"> <ul> <li class="price">55 $</li> <li class="time">30 min</li> </ul> </div> </div> </div> <div class="price-table"> <div class="price-header"> <h3>L'apprenti</h3> <h4>4 cours</h4> </div> <div class="accordion"> <button class="accordion">Cliquez pour voir la description</button> <div class="panel"> <p>Ce cours de natation à domicile offre au participant l'opportunité de progresser sur différents aspects techniques, en lui enseignant les fondamentaux nécessaires pour entreprendre sa propre progression vers l'autonomie aquatique.</p> </div> </div> <div class="price-content"> <div class="course"> <ul> <li class="price">200 $</li> <li class="time">30 min</li> </ul> </div> <span class="division"></span> <div class="course"> <ul> <li class="price">375 $</li> <li class="time">60 min</li> </ul> </div> <span class="division"></span> <div class="course"> <ul> <li class="price">525 $</li> <li class="time">90 min</li> </ul> </div> <span class="division"></span> <div class="course"> <ul> <li class="price">625 $</li> <li class="time">120 min</li> </ul> </div> </div> </div> <div class="price-table"> <div class="price-header"> <h3>L'autonome</h3> <h4>8 cours</h4> </div> <div class="accordion"> <button class="accordion">Cliquez pour voir la description</button> <div class="panel"> <p>Nos professeurs de natation à domicile se concentreront sur les besoins spécifiques de chaque jeune nageur, en travaillant en profondeur sur les aspects à améliorer. Ce programme permet au participant de gagner en autonomie dans l'eau.</p> </div> </div> <div class="price-content"> <div class="course"> <ul> <li class="price">400 $</li> <li class="time">30 min</li> </ul> </div> <span class="division"></span> <div class="course"> <ul> <li class="price">720 $</li> <li class="time">60 min</li> </ul> </div> <span class="division"></span> <div class="course"> <ul> <li class="price">990 $</li> <li class="time">90 min</li> </ul> </div> <span class="division"></span> <div class="course"> <ul> <li class="price">1215 $</li> <li class="time">120 min</li> </ul> </div> </div> </div> <script> var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { /* Toggle between adding and removing the "active" class, to highlight the button that controls the panel */ this.classList.toggle("active"); /* Toggle between hiding and showing the active panel */ var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); } </script> </body> </html> -
Hi group, I got a client who wanted a pricing table for her different packages. Found an HTML code online and customized it with CSS. The client love the concept (big win). But, she wanted to add a description with an accordion. I found another HTML code which I implanted in the pricing table code. The accordion works, but here are my two concerns: 1- I dont want the white background behind the description when it is clicked on. Would love it if it could stayed the same color than when we are hovering the table. How do I change that? 2- Why is my entire table closing when when we click on the accordion title to close the description? I would love to close only the description. Is it possible? 3- Is it possible to change the title when clicked to say "Fermer la description" ? (sorry, the site is in french) Site: https://alau-site-web.squarespace.com/ (you will have to click on "Forfait et prix" to find the pricing table) Password: freelance
-
Changing the button content on hover
abbiericher replied to abbiericher's topic in Customize with code
Awesome! It works! Thank you so much 🙂 -
Hey group! I would like to change my button content when on hover. I know it is possible, but I cant find a proper snippet for it to works on my clients website. Here is the code I used: .large-button-shape-rounded .sqs-block-button .sqs-block-button-element--large:hover::before { content: "voir le forfait"!important; } And here are the buttons I would like to apply the changes: website: https://alau-site-web.squarespace.com/ password: freelance Thank you!
-
Creating a manual blog post sidebar
abbiericher replied to abbiericher's topic in Customize with code
Never thought to use the blog code injection. Thank you! Yeah the line is like my most wanted tweak right now! I want to reflect my entire website style in my blog, with lines separating sections. If you have any clue, I'm all ears! -
Creating a manual blog post sidebar
abbiericher replied to abbiericher's topic in Customize with code
Thank you for the guide! -
Hi group, I'm currently creating my own blog post sidebar with space blocks, images, texts, code blocks, summary blocks and more. Everything looks fine and exactly how I would like it to be. Except: (a) I would like the vertical line to be full length, going from my navigation to the footer (b) I would like to customize the sidebar furthermore with CSS, but I don't want to add the same code lines to every blog post. Do you think it's possible to add the code somewhere, and it would copy-paste on each new blog post? Thank you for your help! website: https://www.abbiericher.com/blogue/pourquoi-tu-as-besoin-dun-site-internet-pour-ta-business password: freelance
