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

37 Comments

  1. 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.

  2. 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 😀

  3. 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

  4. 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.

  5. 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!

  6. 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;
    “`

  7. 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?

Leave A Reply

Please enter your comment!
Please enter your name here