Aled91
-
Posts
10 -
Joined
-
Last visited
Aled91's Achievements
-
Hi @tuanphan, I did not. And the Squarespace help center was not able to help me neither. Do you have any idea why this is happening? Thanks!
-
Site URL: https://www.alessandrodenard.com/ Hello, It seems that suddenly the colors and themes of my website changed (home page and buttons have been impacted). If I look at the website as a normal user buttons are darker (first screenshot), in addition two yellow bands appeared as the main background color of my homepage. In the edit mode I have tried to select the right theme but nothing is changing. In addition, in the edit mode the buttons have the right color (lighter, second screenshot). Does anyone have the same issue? What could have happened? Thanks, Alessandro
-
Responsive timeline with swiper from Codepen - How to
Aled91 replied to Aled91's topic in Customize with code
Hi @tuanphan, Sorry for the delay. I did not check the post in the last days. No unfortunately I did not solve it, now it actually looks even worse than last time 😄 Do you think that what I asked in this post below is something feasible? Thanks, Alessandro -
Responsive timeline with swiper from Codepen - How to
Aled91 replied to Aled91's topic in Customize with code
Hi @tuanphan, you can find it here: https://clover-triceratops-sx8c.squarespace.com/new-page pwd: Home123 Thanks again, Alessandro -
Responsive timeline with swiper from Codepen - How to
Aled91 replied to Aled91's topic in Customize with code
I have already changed the title background, thank you. Could you please help me with what is above? It will be super helpful. Thanks, Alessandro -
Responsive timeline with swiper from Codepen - How to
Aled91 replied to Aled91's topic in Customize with code
I have already changed the title background, thank you @tuanphan. Probably what I would like to do is to change the data-year, in the code part below (for all elements): <div class="swiper-slide" style="background-image: url(https://unsplash.it/1920/500?image=12" data-year="2012"> and insert a date range (rather than data-year) like "Jun 2019 - Jun 2020". And same goes for this one below, where I want to put the same date range and change the size of the year's font since if I put "Jun 2019-Jun 2020" it is splitted in two rows (screenshot below). <div class="swiper-slide-content"><span class="timeline-year">2012</span> I have tried but it is also showing in a different way and the content is crossing the line. Do you know how to solve this? thanks a lot!
-
Responsive timeline with swiper from Codepen - How to
Aled91 replied to Aled91's topic in Customize with code
Thank you @tuanphan. It works really well, I just need to change some colors and for the rest is perfect! -
Aled91 reacted to a post in a topic:
Responsive timeline with swiper from Codepen - How to
-
Thanks a lot, now the js runs but still cannot figure out the layout since, as you said, blocks are all aligning on the left and it seems that on mobile version titles are overlapping the line. For the first issue I have added the padding-right as you suggested but the code seems working on codepen but not here on squarespace. For the second issue no idea how to fix it 😞 Would you mind having a look at it just to suggest me what is wrong? Thanks a lot! The website is this: https://clover-triceratops-sx8c.squarespace.com/experience and the pwd: 1234 This is the code: <body> <div class="container"> <div class="top-section"> <h1> Work Experience</h1> <p> Prova paragrafo seconda riga </p> </div> <div class="timeline"> <div class="line"></div> <div class="section"> <div class="bead"></div> <div class="content"> <h2> Ecommerce Manager</h2> <p> Prova paragrafo </p> </div> </div> <div class="section"> <div class="bead"></div> <div class="content"> <h2> Marketplace Consultant</h2> <p> Prova paragrafo </p> </div> </div> <div class="section"> <div class="bead"></div> <div class="content"> <h2> Account Manager</h2> <p> Prova paragrafo </p> </div> </div> <div class="section"> <div class="bead"></div> <div class="content"> <h2> Vendor Manager</h2> <p> Prova paragrafo </p> </div> </div> </div> <script src="/s/timeline.js"> </script> </body> <style> body{ margin: 0; padding: 0; line-height: 1.5; font-weight: 400; color: white; background-color: #fff2cc; background_image: linear-gradient (315deg, #4c4177 0%, #2a5470 74%); } .container{ padding: 2rem; padding-bottom: 400px; margin: 0 auto; max-width: 1200px; } .top-section{ text-align:center; padding:4rem 0; max-width:600px; margin: 0 auto; } .timeline{ position:relative; min-height: 150px; } .line{ position:absolute; z-index:2; left: calc(50% - 1px); width: 2px; top: -50px; bottom:-50px; background-color: #000; display:none; } .line:before, .line:after{ position:absolute; display:block; content: ''; height: 1rem; width: 1rem; border-radius: 50%; background-color:#000; left: 50%; transform: translateX(-50%); } .line:after{ bottom:0; } .section{ display:flex; opacity:0; transform: translatex(-100%); transition: 600ms ease; position: relative; z-index: 1; margin: 50px 0; padding: 1rem; border-radius: 1rem; align-items: center; min-height: 300px; } .section:nth-child(odd){ padding-right: 1rem; flex-direction: row-reverse; transform: translateX(100%); } .bead{ position:absolute; display:block; height: 1rem; width: 1rem; border-radius: 50%; background-color: #000; left: 50%; top: 20%; transform: translateX(-50%); } .content{ width: calc(50% - 2rem); } .show-me:nth-child(n){ transform:none; opacity:1; } h1{ font-weight:400; letter-spacing: 1px; } </style>
-
Aled91 reacted to a post in a topic:
Animated Timeline Slider
-
Hi @MadihaSyed, Great job. It looks great on your website. I think that for changing colors of the line you should try inside the ".line" the background-color. While for circles you should change the same background-color inside the ".beads". I would like to use the same timeline for my work experience but I am struggling with the js and nothing is showing up. I created the HTML in a code block and the CSS inside the custom CSS. How did you manage to make it work? Thanks, Alessandro
-
Aled91 reacted to a post in a topic:
How to create vertical timeline in Squarespace
-
Aled91 reacted to a post in a topic:
How to use custom code to create a popup window with text for bios
-
Hi all, I found this really cool timeline that I would like to implement on my squarespace to speak about my study and work experience. I have tried to copy and paste the HTML and CSS codes into the code blocks or into the custom CSS but nothing is happening. I am not sure how to inject the JS part inside Squarespace. Do you have any idea how to implement this timeline inside Squarespace? Thanks a lot!
