Skip to content

Latest commit

 

History

History
106 lines (80 loc) · 3.37 KB

README.md

File metadata and controls

106 lines (80 loc) · 3.37 KB
Raw

Frontend Mentor - Equalizer landing page solution

This is a solution to the Equalizer landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

Overview

This is my solution to the Equalizer Landing Page challenge. This is a landing page for a mobile app called equalizer that uses Svelte, Vite, TypeScript and custom SCSS. The user can get information about the product and links to download the app either from the iOS App Store or the Android Play Store. The user can also get in contact with the company using the social sites or through email.

Screenshot

Links

My process

Built with

  • Semantic HTML5 markup
  • SCSS custom properties
  • Flexbox
  • Svelte + Vite + TypeScript

What I learned

I have learned on this project that we need to practice everyday and work hard to really understand how everything works, specially with the images background. I will have to review this topic better.

&::before {
  content: "";
  position: absolute;
  top: -25rem;
  left: 0rem;
  background-image: url("./assets/images/bg-main-mobile.png");
  background-size: cover;
  background-repeat: no-repeat;
  width: 58.2rem;
  height: 78rem;
  z-index: -10;

  @media screen and (min-width: 48em) {
    background-image: url("./assets/images/bg-main-tablet.png");
    width: 128.3rem;
    height: 110.8rem;
    left: -30rem;
  }

  @media screen and (min-width: 68.75em) {
    background-image: url("./assets/images/bg-main-desktop.png");
    width: 191.3rem;
    height: 205.8rem;
    left: -35rem;
  }

  @media screen and (min-width: 89em) {
    left: -27rem;
  }
}

Continued development

For future development, I will continue to use background-image for divs so I could practice more the placement of the image in the element.

Useful resources

  • CSS-TRICKS - Using SVG - SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator. You can use SVG on the web pretty easily, but there is plenty you should know.

Author

Acknowledgments

The code may not be perfect compared to my sensei @jonasschmedtman but I need to thank him because he has shown me the ropes and now I am a confident web designer.