Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive loopstudios landing page

Ali Ahmed 680

@Dany-GitHub

Desktop design screenshot for the Loopstudios landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Made animation on scroll using intersection observer Api, Any recommendation about articles on writing clean code or best practices for SCSS Thank you for your time! 🤗

Community feedback

Jeck 1,080

@j-tomajin

Posted

GOOD DAY!

  • You can watch Coder Coder's tutorial about SASS here, she explains pretty much everything about it and some ways to make your job easier.

  • or you can just clone my repo for my default SASS folder here, it is pretty much the same as Coder Coder's and just added some stuff, but I still recommend you to watch her tutorials about it...

LOVE YOUR ANIMATE ON SCROLL! KEEP IT UP :D

1

Ali Ahmed 680

@Dany-GitHub

Posted

@AsukalDePapa i want a guide to write clean code for SCSS not to learn it, Thanks for sharing❤ if you have any guide can you share it with me 😁

1
Jeck 1,080

@j-tomajin

Posted

@Dany-GitHub she explains how to do media queries using sass @include function, and how to convert pixels to rem/em, so you don't have to calculate.

0
Jeck 1,080

@j-tomajin

Posted

@Dany-GitHub

  • I looked at you code, can you please explain what's the % for? is it just for the name? and the @extend function? Thank you!

  • oh and idk if this will help you but,

padding: {
        block-start: 18px;
        inline-start: 50px;
};
margin: {
        block-end: 100px;
        inline: 20px;
};
background: {
        image: url('../assets/Vector (1).svg');
        repeat: no-repeat;
        size: contain;
        position-x: 50%;
};
  • you can do this on sass

Marked as helpful

1
Ali Ahmed 680

@Dany-GitHub

Posted

@AsukalDePapa % works as placeholder like making a class and extend it anywhere you want, works like mixins

1
Ali Ahmed 680

@Dany-GitHub

Posted

@AsukalDePapa I wasn't looking for a tutorial but was looking for an article to help me write cleaner code in CSS, I found it already here its Code Guide

0

@Ameerkha21

Posted

@Dany-GitHub hey bro i was doing this challenge the same way you did it but i was struggling with keeping the animation active once i scroll back, I'm trying to trigger the animation on scroll like you but without js, how did you do it?

0

Please log in to post a comment

Log in with GitHub
Discord logo

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