Jump to content

PJ22

Member
  • Posts

    15
  • Joined

  • Last visited

Everything posted by PJ22

  1. Hey, No problem. You can change the front with this line "font-family: 'proxima-nova', sans-serif;" I'm still trying to figure out how to repeat and do an infinite scroll/Carousel effect. This page may be of help. Please let me know if you figure it out. Thanks https://www.w3schools.in/css3/css-marquee/#Scrolling_Text_Using_CSS <!DOCTYPE html> <html> <body> <style style="text/css"> .bounce { font-family: 'proxima-nova', sans-serif; font-weight: 400; height: 40px; overflow: hidden; position: relative; background: #000000; color: #ffffff; border: 0px solid #000000; } .bounce p { position: absolute; width: 100%; height: 100%; margin: 0; line-height: 40px; text-align: center; -moz-transform: translateX(50%); -webkit-transform: translateX(50%); transform: translateX(50%); -moz-animation: bouncing-text 5s linear infinite alternate; -webkit-animation: bouncing-text 5s linear infinite alternate; animation: bouncing-text 20s linear infinite alternate; } @-moz-keyframes bouncing-text { 0% { -moz-transform: translateX(60%); } 100% { -moz-transform: translateX(-60%); } } @-webkit-keyframes bouncing-text { 0% { -webkit-transform: translateX(60%); } 100% { -webkit-transform: translateX(-60%); } } @keyframes bouncing-text { 0% { -moz-transform: translateX(60%); -webkit-transform: translateX(60%); transform: translateX(60%); } 100% { -moz-transform: translateX(-60%); -webkit-transform: translateX(-60%); transform: translateX(-60%); } } </style> <div class="bounce"> <p> BUY ONE, DONATE ONE FACE MASK!</p> </div> </body>
  2. We would love for mobile view to be in slideshow mode with the indication dots instead of the thumbnails at the bottom if possible and for the desktop view to stay the same stacked
  3. That worked perfectly Thanks for all of your help. One last thing if possible, can we center the box and text to aligned under shop? The box comes out towards the right side, maybe if it could come out evenly on the left side to match the right side with the text centered, i attached a similar example below
  4. Thanks for the quick reply. Not yet. We want the secondary buttons to be the same as shop and about, As you hover over the buttons we would like for the box to be highlighted black and the text to turn white
  5. How would i add a button to the secondary nav on hover to match the primary one? and how would i center the text and the box under shop ByPaigeJordan.com Thanks
  6. Hello Everyone, I tried the code above but swapped out (Productitem-gallery-thumbnails) with our site code (ProductItem-gallery-slides-item) which did not work. I'm also interested in doing a mobile slideshow on the product page but with indication squares or dots over the image or below the image ByPaigeJordan.com
  7. One last question, How do i add spaces and repeat the text over again going around repeatably ?
  8. Thanks for the quick reply. How would i change the font with this code? <!DOCTYPE html> <html> <body> <style style="text/css"> .bounce { height: 40px; overflow: hidden; position: relative; background: #000000; color: #ffffff; border: 0px solid #000000; } .bounce p { position: absolute; width: 100%; height: 100%; margin: 0; line-height: 40px; text-align: center; -moz-transform: translateX(50%); -webkit-transform: translateX(50%); transform: translateX(50%); -moz-animation: bouncing-text 5s linear infinite alternate; -webkit-animation: bouncing-text 5s linear infinite alternate; animation: bouncing-text 10s linear infinite alternate; } @-moz-keyframes bouncing-text { 0% { -moz-transform: translateX(50%); } 100% { -moz-transform: translateX(-50%); } } @-webkit-keyframes bouncing-text { 0% { -webkit-transform: translateX(50%); } 100% { -webkit-transform: translateX(-50%); } } @keyframes bouncing-text { 0% { -moz-transform: translateX(50%); -webkit-transform: translateX(50%); transform: translateX(50%); } 100% { -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); } } </style> <div class="bounce"> <p> BUY ONE, DONATE ONE! </p> </div> </body> </html>
  9. Site URL: https://www.bypaigejordan.com/ Hello Everyone, I wanted to know if it is possible to make the text on the announcement bar scroll/roll going from right to left automatically and reset/start again? Thanks
×
×
  • 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.