Jump to content

MadihaSyed

Member
 View Profile  See their activity

  • Posts

    29

  • Joined

  • Last visited

 Content Type 

Everything posted by MadihaSyed

  1. MadihaSyed
    Thank you so much! How about #2 ? Would want to extend the underline to the full page width instead of only under the text.
  2. MadihaSyed
    Site URL: https://www.thelibertyproject.org/-portfolio Hey! In the link provided, I would like to: 1. Align the titles to the left side of the page 2. Extend the horizontal line under each title across the width of the page (with the existing padding) 3. Change the fixed position of the image on hover to the right side of the page 4. Add a border radius to the image on hover so it has rounded corners. Thanks in advance for all your help, this community has been a game changer!
  3. MadihaSyed
    Alright, thank you!
  4. MadihaSyed
    @tuanphan No there is no effect in codepen because I'm not sure how to embed the javascript. Is there any way to achieve this effect with just HTML and CSS? Without any JavaScript.
  5. MadihaSyed
    Site URL: https://tympanus.net/codrops/2021/06/30/how-to-code-the-k72-marquee-hover-animation/ Hey guys! I have tried to follow the code on this attached website to make this marquee scrolling animation on codepen (https://codepen.io/madihasyed/pen/qBxBqGr) But I am not able to view the CSS elements properly, and I'm a complete newbie to Javascript so I have no idea how to import or attach the JS files to this code. Please let me know if there is something to be done from my side in order to achieve this effect! Thanks a TON ❤️
  6. MadihaSyed
    Site URL: https://www.thelibertyproject.org/ Reference website ^ I would like to be able to get images to reveal like this over hover on titles of the accordion block under "SERVICES" section. Super new to coding so please do let me know if this can be achieved by me. Thanks!
  7. MadihaSyed
    Thank you so much! Will check it out.
  8. MadihaSyed
    Thanks! I did try it out and this was the result: The text width is also decreasing. And overall I think on smaller windows the timeline's text and bead keeps moving left/right and isn't responsive. I am trying to look for something similar on codepen but not able to 😞 Any idea what I can do?
  9. MadihaSyed
    @tuanphan does this help?
  10. MadihaSyed
    Thank you! Will try looking on codepen to see if there's anything similar. The HTML content is as follows: Thanks!
  11. MadihaSyed
    Site URL: https://www.thelibertyproject.org/ Hey! I have a timeline at the bottom of my homepage and I would like to add pictures sliding in on either side of it as a person scrolls down (reference image attached) Any idea how to do this? I also seem to be having an issue with the timeline becoming very messy in terms of alignment if someone decreases their window size, even though its position is relative. Any help on this would be much appreciated! For your reference, I had attached the CSS of the timeline and the .js file embedded. JAVASCRIPT
  12. MadihaSyed
    Thank you! It has worked perfectly xD
  13. MadihaSyed
    Ah, I haven't quite figured out the mobile bit yet, but as for all the content coming on the left, I added a padding-left to the odd class here: So the padding-left: 18rem is something youll have to adjust according to your own website. The beads in the center are something that I still havent figured out how to place so I just removed them. 🥲 Also I have noticed that you have the same problem that I have encountered, and that is the width of the entire webpage has a horizontal scroll now. Please let me know if you figure this bit out!
  14. MadihaSyed
    Hey, there! Thanks, and yeah a lot of trial and error is bringing about some results xD So for the .js, I downloaded the script from the youtube video's description, then opened the editor in Squarespace, typed some random text and linked that text to the .js file (by selecting it, clicking on the link icon which opened up the link editor, and uploading the .js file under the "file" tab). Then, I simply copied the js code location and added it in the html block like so: Hope this helps!
  15. MadihaSyed
    Site URL: https://www.thelibertyproject.org/ Hey, I would like the "Hospitality // Food & Beverage // Wellness brands //" part to to be a horizonatally scrolling marquee text and play in an infinite loop instead of starting or ending at any one side. Please let me know how to go about this. Thanks a lot ❤️
  16. MadihaSyed
    I seem to have fixed the placement issue by adding padding-right to the .section:nth-child(odd) class selector. Is this the correct way to go about this? Thanks!
  17. MadihaSyed
    Thanks! It worked xD And yeah the scroll bar / timeline is something I wanted to change the alignment of. Have posted a little info about that here:
  18. MadihaSyed
    Site URL: https://www.thelibertyproject.org/ Hey, all. I have used this code ( a mix of html, css and javascript) to design a vertical animated timeline with the help of a youtube video ( For some reason, however, instead of appearing on both the left and right side, my text only appears on the left, even though it is fading in from opposite directions as denoted by the nth child selector. Attaching my CSS here for reference: //Section 3// .top-section{ text-align: center; max-width: 800px; 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: 500ms ease; position: relative; z-index: 1; margin: 20px 0; padding-left: 9rem; border-radius: 1 rem; align-items: right; min-height: 250px; } .section:nth-child(odd) { flex-direction: row-reverse; transform: translateX(100%); } .bead{ position:absolute; display: block; height: 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; } Please help me figure this out! Thanks in advance. If possible, also please do let me know which codes to change to alter the color of the main line and circles! ❤️
  19. MadihaSyed
    Site URL: https://www.thelibertyproject.org/ In the attached link, I have a section below the header that has a square image and then some text and an animated text block. Below this block, there seems to be a huge blank space for some reason. It is not a spacer block ( I checked) and I have tried using the div-id to change the padding to 0, but it doesn't seem to be working. Please let me know if you have any idea what the issue is.
  20. MadihaSyed
    thank you, will try it out and let you know!
  21. MadihaSyed
    Site URL: https://www.thelibertyproject.org/ Hey, so on the linked site, I have hidden the traditional logo title on the header so that I can add it as an image (.png) that spans across the entire width of the site and is in a fixed position. I've succeeded in the web version, but when I open the site up on my phone, the entire image has simply disappeared. Is there a way to make it appear? Or I don't even mind if I have to set the traditional logo title back to "visible" as long as it doesn't show up in the web version. I hope that made sense. Thank you all in advance for your help ❤️
  22. MadihaSyed
    Thanks a ton! Works like a charm xD
  23. MadihaSyed
    Hey, thanks so much! Did the trick xD Would you also be able to help me change the font of the nav bar? I had a custom brand font that I would like to use, and I'm not sure what class to assign it to!
  24. MadihaSyed
    Hey, thanks for the help! I did fix the position in the CSS, but now its overlapping across the entire page over the rest of the sections? is there a way to put it behind all of the other sections so its not visible after scrolling? Thanks!
  25. MadihaSyed
    Site URL: https://www.thelibertyproject.org/ Hey, there! Im very new to CSS and was wondering if there was a simple way to move the menu bar to the very top of the page (even above the logo/sm icons), and when I scroll down, I would like the entire header to minimise into the strip of the menu bar alone (this would be sticky, I'm guessing) (sample of what I'm talking about:https://www.zendaya.com/ Thanks for your help in advance, it would mean the world if I could get this sorted ❤️
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources