Ciellumiere

@tuanphan I think I figured out the styling, however, I'm still unsure how to link the annotations to the first card prompts. I have also updated the code above to reflect the newest style.

This is what i have at the moment. i have no idea where to even start with the quote/annotation part. <div class="Container"> <div class="Card"> <section> <div class="PrompTitle"> <div class="InThe">In the</div> </div> <div class="Prompt"> <p class="PromptText"></p> </div> <div class="PromptEnding"> <div class="Future">Future </div> </div> </section> </div> </div> <style> .Container{ justify-content: center; width: 320px; height: 500px; perspective: 800px; } .Card{ Background-color:#651BE8; height: 100%; width: 100%; position: relative; border-radius: 2rem; box-shadow: 0 0 5px 2px rgba(50, 50, 50, 0.50); text-align: center; outline: 1px solid white; outline-offset: -10px; display: flex; justify-content: center; align-items: center; } .PrompTitle { display: flex; justify-content: center; align-items: center; padding-top: 0px; padding-bottom:2px; } .Prompt{ padding: 5px 15px 5px 15px; display: flex; justify-content: center; align-items: center; background-color: #651BE9 } .PromptEnding{ padding-top: 2px; padding-bottom: 0px; display: flex; justify-content: center; align-items: center; } .InThe, .Future{ font-weight: bold; font-size: 30px; color:white; } .PromptText { font-size: 30px; line-height: 35px; color: #EEE8D6; display: flex; text-align: center; } @media screen and (max-width:767px) { .Prompt { width: 100%; max-width: 300px; } .PrompTitle{ width: 100%; max-width: 332px; } } } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function() { // Array of random texts var prompts = [ "biblically guided", "gilead-esque ", "barely democratic", "surveillance-heavy", "womb-regulated future" ]; // Event listener for the Shuffle button $(".Container").on('click', function() { // Pick a random prompt from the array var randomPrompt = prompts[Math.floor(Math.random() * prompts.length)]; // Update the paragraph with the new random prompt $(".PromptText").text(randomPrompt); }); }); </script>

Everything works perfectly! However, the client decided on a slightly different concept in the end. Basically, we would have 3 categories of prompts, 1 per each card (see image attached). We would like each of the prompts in the card to shuffle once you click on the individual card. Card background and text around the prompts (ex: in a ....... Future) stay the same, but the text in the middle changes (Ex: "feminist would change to "corporate-controlled" future once you click on the card). Another added challenge is that we would like to connect each of the prompts from the first card to a quote/annotation featured below the card "Did you know". So every time you shuffle only the first card it changes the middle prompt to "Feminist" and it also shows the quote linked to whatever prompt comes up on the card. so for example : We click on the first card, it shuffles and shows the following prompt: Prompt: In a Biblically guided future …. Below the card we would have the following quote linked to that specific prompt: Did you know: Project 2025 aims to promote Christian-centric policies, potentially marginalizing other faiths and challenging church-state separation(p. 4, 560, 581, 589) Click on the first card again, it shuffles and shows the following prompt: Prompt: In a barely democratic future …. Below the card we would have the following quote linked to that specific prompt: Did you know: Project 2025 seeks to expand executive power over agencies and ease civil servant dismissals, potentially concentrating power in the executive branch. (p. 43, 825) @tuanphan I played around with the code you have given and could create 3 cards, but im struggling with stylizing them to make them centered to keep the background the same and only make the middle part change, and of course the quote part under the card. Is this something you could help me with? Thank you so much, because every time i have any questions about coding you always provide brilliant solutions.

Same link. For now, I added it to the test page: flounder-bamboo-r38z.squarespace.com Password: demo Once again, a huge thank you for your help 🙂

@tuanphan You are an absolute rockstar!!! it works like a charm. Brilliant! How could I optimize it for mobile though? Extra question: How should i go about adding a button below the prompt that links to a PDF file like in an example:

Site URL: https://thethingfromthefuture.netlify.app/ Hey a client of mine would like to build a page on their existing website featuring random prompts that could also be shuffled to show a new prompt upon button click. Here is an example website of what we want: https://thethingfromthefuture.netlify.app/ Is there an app or any other way that this could be build in Squarespace. I am also open to any other ideas of how we could showcase random prompts, not necessarily in the exact same way as on the example page. I was thinking of possibly making cards/boxes that show the prompt upon hover but we have more than 100 prompts so it's not very realistic. Thank you for your input!

Brilliant! works like a charm! thank you

Hey, I am looking for a way to change the color of all elements within the text box on hover. I managed to change the color of individual elements but it's not exactly what I want, I want them all to change colour once I hover on the box background. In this case, I want the grey box with black text to change to the green background colour and white text on hover. Here is the website: polygon-moose-4jeh.squarespace.com Password: demo Thank you!

Hey I was wondering if there is a away to get the split / scrolling effect that you can see on this page for squarespace? https://www.theleap.co/ So you have a sticky section split in 2 parts, left (images) scroll to the left and on the right (text) you have text scrolling down. Thank you!

Hello, is there a way to hover zoom photos inside the Gallery: slideshow with thumbnails? Ideally I would like to zoom the thumbnail photos once someone hovers over it. I need it to zoom in a lot so you can see the product details or reproduce the "magnifying" type of effect that you can find on most e-commerce websites. Is there a way to do it with CSS or do I need to purchase a plugin? Here is the website i need it for : https://www.giakarsko.com/collection/balenciaga-white-leather-bag And here is an example of the type of zoom I'm looking for (click on any of the images) or any similar type of effect that would allow me to view product up close: https://fr.sandro-paris.com/fr/femme/sacs/tous-les-sacs/sac-yza-en-cuir-d-une-tannerie-certifiee/SFASA00219.html?dwvar_SFASA00219_color=20#start=1 Thank you! 🙂

Did anyone found a solution to this?

Thank you, it fixed it. I ended up moving the section with the video a bit up on the page and it masked the spacing

Hey I am trying to create a logo slideshow using gallery block, it seems to work fine on desktop but I have weird spacing on mobile. See the photo attached. I also noticed that the code I'm using is creating white space at the bottom of About Us page. The weirdest part about it is if I move any of the other sections to the bottom of the page to replace the (lilac one) the space disappears, if i move the video higher the space also disappears, if I remove the logo code it also disappears and it only affect this section. Website url: https://gia-homepage.squarespace.com/ password: demo Here is the code im using: #page { overflow-x:hidden } .gallery-grid-wrapper { display:flex !important; animation: slideshow 60s linear infinite } .gallery-grid-wrapper .gallery-grid-item { min-width: 18%; margin-right: 5% } @keyframes slideshow { 0% { left: 0; } 100% { left: -150%; } }