How to set up landing page with slideshow that autoplays + centred text overlaid on the images + white header navigation text?

Site URL: https://www.janeashleygardendesign.co.uk/

I've been trying to set up a landing page style homepage with a slideshow that autoplays + centred white text overlayed on top of the slideshow images + a transparent header (with the header text in the colour white).

I couldn't figure out how to do this so hacked a solution together by playing the images as a video in the background, rather than making it a slideshow - but the video is quite large and the quality of the images is less good so I really want to solve this. Any help will be very appreciated.

Full context and what I've tried is below:

• The current homepage (https://www.janeashleygardendesign.co.uk/)
  • This is a background video
  • Initially this was the only way I could figure out how to show 3 pictures with text sitting on top, centred on the page
  • The only code on the current home page is to remove the footer:
    • <style>
    •  #footer-sections {
    •   display: none!important;}
    • </style>
  • However, the pictures in the video are slightly low quality and the video is quite a large file to download

• So I want to switch to using a slideshow on the homepage
  • Note that I want the new homepage to look essentially the same as the current homepage - but using a slideshow should mean the pictures are higher quality and also quicker to download
  • I am not sure how to make the new homepage look like the current one using a slideshow
  • I have looked at this video and tried to do what it says: https://www.youtube.com/watch?v=PF45Wz5dAX0&ab_channel=InsideTheSquare-SquarespaceTutorials
  • I have tried using a ’slideshow full’ and then overlaying a text box on top of it with the following code: (you can see this at this link https://www.janeashleygardendesign.co.uk/home-test-2-1 and use the password ’test’)
    • <style> #page .page-section{height:75vh!important}
    • #page .page-section:nth-child(2) {margin-top:-100vh!important;}
    • #page .page-section:nth-child(2) , #page .page-section:nth-child(2) .section-background{background-color:transparent!important}
    • #footer-sections {display:none!important} <style>
  • This has made it look like the homepage except the navigation text in the header is black not white - which means you can’t really see it. 
  • How can I turn the text in the navigation header to be white (not black?)

Can someone tell me how to do this by starting from scratch or by turning the header text colour from black to white on the above test page?

Thanks so much in advance

On 4/13/2022 at 6:23 PM, Ben92 said:

Site URL: https://www.janeashleygardendesign.co.uk/

I've been trying to set up a landing page style homepage with a slideshow that autoplays + centred white text overlayed on top of the slideshow images + a transparent header (with the header text in the colour white).

I couldn't figure out how to do this so hacked a solution together by playing the images as a video in the background, rather than making it a slideshow - but the video is quite large and the quality of the images is less good so I really want to solve this. Any help will be very appreciated.

Full context and what I've tried is below:

• The current homepage (https://www.janeashleygardendesign.co.uk/)
  • This is a background video
  • Initially this was the only way I could figure out how to show 3 pictures with text sitting on top, centred on the page
  • The only code on the current home page is to remove the footer:
    • <style>
    •  #footer-sections {
    •   display: none!important;}
    • </style>
  • However, the pictures in the video are slightly low quality and the video is quite a large file to download

 

• So I want to switch to using a slideshow on the homepage
  • Note that I want the new homepage to look essentially the same as the current homepage - but using a slideshow should mean the pictures are higher quality and also quicker to download
  • I am not sure how to make the new homepage look like the current one using a slideshow
  • I have looked at this video and tried to do what it says: https://www.youtube.com/watch?v=PF45Wz5dAX0&ab_channel=InsideTheSquare-SquarespaceTutorials
  • I have tried using a ’slideshow full’ and then overlaying a text box on top of it with the following code: (you can see this at this link https://www.janeashleygardendesign.co.uk/home-test-2-1 and use the password ’test’)
    • <style> #page .page-section{height:75vh!important}
    • #page .page-section:nth-child(2) {margin-top:-100vh!important;}
    • #page .page-section:nth-child(2) , #page .page-section:nth-child(2) .section-background{background-color:transparent!important}
    • #footer-sections {display:none!important} <style>
  • This has made it look like the homepage except the navigation text in the header is black not white - which means you can’t really see it. 
  • How can I turn the text in the navigation header to be white (not black?)

Can someone tell me how to do this by starting from scratch or by turning the header text colour from black to white on the above test page?

Thanks so much in advance

Have you figured it out? Do you still need help?