Watch as I show you how to recreate the super Zen landing page from https://karinasirqueira.com.
Support the channel: https://ko-fi.com/hyperplexed (accepts PayPal, card, etc).
Tools used: HTML, CSS, JavaScript
CodePen: https://cdpn.io/poVpKdQ
Music Credits:
Day Dreaming – StreamBeats – Lofi – Harris Heller
source
Thanks for featuring my website. I'm glad you like it.
love u
Please, Can you show something about responsive PC to mobile
More of this please!
GoodJob!
what ide do you use
btw for a random value distinct from prev, you really don't need a while-loop. Something like (rand(0, len – 2) + len – prev) % len should work.
Thanks for sharing Z-d 😂
Feels like I struck gold discovering this channel. Love your work♥️
Is it just me or does anyone think you sound exactly like Every Frame A Painting? You also both have really great production on each video, instant sub for me!
I was trying to follow along with the video to learn, however the transition portion for the wrappers ended up breaking for me on VS Code.
I wasn't able to use transition for the height, width as well as border-radius? Any clue as to why this happened? Wondering if I'm missing a specific CSS kit on my computer.
Love the videos overall, getting me interested in learning about CSS & more front end work.
Lots of cool websites and recreations! Unfortunately (for me) I find these types of websites confusing and overstimulating
Wow men your videos are just awesome
Subscribe after watching just 2 of your videos gonna learn a lot from you keep up the good work.
I'm loving your videos!!! Please do more improves to sites/apps of existing ones.
I'm using one of your videos to an assignment for my school and its going really good! You gave me inspiration to do better 😀
Need some help with this one. I had to do an unintuitive tweek to js to get it to work:
This works:
document.getElementById("wrapper").dataset.configuration = combination.configuration;
This doesn't:
const wrapper = document.getElementById("wrapper");
wrapper.dataset.configuration = combination.configuration;
I'm working with node v16.17.1
Nice animation and cool concept. Possibly a terrible user experience since its not immediately clear that there is more to it.
That green circle on the left bottom not being perfectly aligned in one of the modes hurts my eyes.
Great video and very useful. Hope you could monetize it!
Help me i hate frontend
Immediately subscribe 🤣
i thought this was python tutorial
Web developers create a functional website challenge (impossible)
aaaaaand subbed
Hello, I'm new to your channel and I'm starting to learn mobile app development ( using React Native since I'm familiar in ReactJs; easy route). I'm more of backend guy, but with your videos on how redesigning some most known apps, it really gave me an idea on how I should design the application.
I hope you post more content like this. It helps a lot and motivates me to design an app.
What do you think about will-change? Should one use it in this case?
Ensō circle as background in preview.
We need tutorials like this.
To the point with excellent video editing and animations
Thanks for creating such a video
Great video! Out of curiosity though, wouldnt it be easier just to set 6 states with numbers 0-5? Just combine the arrangement/roundness pair into 6 styles, so the js can just pick a random number from 0-5 as well, simplifying the code by a lot!
don't use 100vh on body since it doesn't look great on IOS. instead do 100% for both of them
Your account is crazy good man. Great job at explaining some tough concepts!
One thing I noticed Karina is also doing, is to ensure the morph doesn't happen when hovering the wrapper. This can be done by adding just one line at the top of the setInterval callback:
“`
if (wrapper.matches(':hover')) return;
“`
Omfg… wtf…
❤
im embarassed that this is the way i learned about the aspect-ratio property a day after I just created a JS script to do it for me…
low framerate and strange theyre a bit out of sync
I tried putting this code in a test project, but it doesn't quite seem to work…. the document.getElementsByClassName("card") in the for loop returns null according to the console ): I import the js with a normal script tag is that wrong? any ideas on how to fix it would be appreciated 😀 and do I maybe need to install some specific packs using npm?
Amazing video!