I'm here to assist you with Figma design tasks. Just let me know your design needs, and I'll help you create and collaborate on your projects, ensuring a smooth and efficient design process.
I will make your design in Figma using the Relume library and develop it on webflow as well. I have great expertise in realume library to build your Website.
I am skilled with custom coding integrations on Webflow which helps in modern web design. and will take your website to the next level.
It's always fast and easy to work with a styleguide system. Client first is a styleguide system which help to make the development process more efficient and fast.
%402x.svg){kind=icon}
%402x%20(2).svg){kind=icon}
HAIAR® – Die Technologie, um Unternehmen der Automobilbranche datengetrieben zu beschleunigen
Nosso framework é projetado para capturar a essência humana em todas as suas etapas
Impacting Communities Through Superior Commercial Real Estate Development
Cross-Continental Success: European Innovation, Global Expansion
DEUTSCHLANDS #1 EVENT FÜR STIFTUNG, ERBSCHAFT & TESTAMENT
Webflow is both a web design tool and a hosting platform. It can be used to create responsive websites, landing pages, blogs, and many other things. It's what I use to build all of my websites, including this one.
We first discuss about the project and your business goal, After that if you have the design ready then i will check and overview the design, After that we will set the deadline of the project and you can offer your affordable budget. Then I start the work and give you and update on every milestone i complete.
YES! Developed website displays perfectly on desktops, tablets, and phones. If your design doesn't have a mobile version, we will take care to implement one by using the best practices.
We only need your design ready in Figma, Sketch or Adobe Xd, the licensed fonts, and animations request..
Fill out this form to get in touch with me. If your question is more urgent, you can use the information below to email us.
First, create a container to house the card elements.
In this case, I have created 'c-cards-list' and 'w-cards-list'. 'c' represent container and 'w' represent wrapper. This is my standard structuring method to prepare the elements for complicated interactions just in case.
Similarly, create 'c-card' and 'w-card' inside the container. Style the 'w-card' element according to your preference and then add in required content.
To create a stacking effect, you will required to use the 'position: sticky'.
Apply 'position: sticky' to 'c-card' element and apply at least 1px for the top position.
By now, you should be able to see the cards stacking on top of each other while you scroll down the page.
Great. Now you have successfully stacking the cards on top of each other. To make them looks better, we will create some layering effect.
Create combo class for each of the 'c-card' element. For example, '1', '2', '3' and etc. Then add some value in the top position. For example, for first card, you can give it 20px from the top to make some spacing. Then for the following cards, you can add 100px each. You can adjust the value based on your design and layout.
Example: First card : 20px ; Second card : 120px ; Third card : 220px ; and so forth...
To make the layering looks even much better, you can apply interaction into 'c-card' elements.
Apply 'While scrolling in view' interaction to 'c-card' elements and ensure it affects all same class. Set the smoothing value to 90%.
Insert 'Scale' interaction starts at keyframe 40% (scale value: 1) and end at 100% (scale value: 0.8). Set it to affect 'Interaction Trigger' (c-card).
Now you should be seeing the cards stacking on top of each other with nice layering and depth.
Now, have fun and start cloning. 😍
If you encountered any issue during cloning, feel free to contact us by clicking the 'Need help?' button on the right.
You can also support our work by following us on our social media or buy us a cup of coffee.
☕☕☕
%402x.svg)
-1.webp)
-1.webp)
.jpg)
