Submitted almost 3 years ago

Loopstudios landing page

@placeteno

A solution to the Loopstudios landing page challenge

Solution retrospective

Wow, this was a great challenge. It took me longer than I expected (around 6-7hrs), but, in the end, I was able to complete every section, both for mobile and desktop versions. I think the decision to go mobile first or desktop first influences a lot your approach and the solutions you need to find for every little detail. It is also important to point out that the way the site looks will depend greatly in the type of device you have. It definitely needs more media queries, so it looks great in all screen sizes, but I think the point of this one was to see how much one was capable of doing.

One question --> In the "Creations section", I wanted the hover effect to have a transition, but I was not able to achieve it. Any help would be appreciated.

Any other feedback is also welcome.

Code

Please log in to post a comment

Community feedback

BreinerJT•530
@BreinerJT
Posted almost 3 years ago
Hello Jose, Congratulations on finishing this challenge!

For your .creation-items is not necessary create a class for every element like you do (.creation-item-one, .creation-item-two, etc), the pseudo class :nth-of-type will make this easy for you and help to maintain the html code cleaner. About the hover effect, your .creation-item:hover::before is ok but you need to create first a .creation-item:before, like this:
```
  .creation-item:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: rgba(255, 255, 255);
    opacity: .7;
    transition: all .2s ease-in-out;
    cursor: pointer;
}
.creation-item:hover::before {
    content: '';
    position: absolute;
    width: 100%;
}
```
This one make the transition go from left to right because .creation-item:before width is set to 0 and your .creation-item:hover::before has a widht set to 100%. U can also set the width to 100%, height to 0% in the.creation-item:before and height to 100% in the .creation-item:hover::before and this will make the transition go from top to bottom.
Marked as helpful
Karabo Sambo•240
@blaqbox-prime
Posted almost 3 years ago
For the hover effect, since it wasn't specified on the 'How' part of it all, I decided to create this dropdown effect instead of the standard "color fading in" type of effect. Check out the piece of code i quoted on my github repo for this project - https://github.com/blaqbox-prime/loopstudios-landing-page

also give the site a quick visit to see what the effect looks like. https://blaqbox-prime.github.io/loopstudios-landing-page/
Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord