Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
37
Comments
43

Sahand Masoleh

@sahand-masolehBelgrade, Serbia1,210 points

After years of working as an English translator and teacher, in 2022 I started focusing on learning something that embodied my passion for crafting and building, technology, and working with graphic elements all in one package: front-end web development.

I’m currently learning...

Electron.js, Rust!

Latest solutions

  • Ecommerce Product Page

    #framer-motion#react#typescript#sass/scss

    Sahand Masoleh•1,210
    Submitted over 2 years ago

    1 comment
  • Space Tourism Website

    #react#react-router#sass/scss#typescript

    Sahand Masoleh•1,210
    Submitted almost 3 years ago

    0 comments
  • Interactive Comment Section (Full Stack CRUD)

    #express#postgres#react#sass/scss

    Sahand Masoleh•1,210
    Submitted almost 3 years ago

    2 comments
  • Fylo Landing Page with Two Column Layout


    Sahand Masoleh•1,210
    Submitted almost 3 years ago

    0 comments
  • Huddle Landing Page with Curved Sections


    Sahand Masoleh•1,210
    Submitted almost 3 years ago

    0 comments
  • Fylo Dark Theme Landing Page


    Sahand Masoleh•1,210
    Submitted almost 3 years ago

    0 comments
View more solutions

Latest comments

  • Ernest Push Gbaboh•460
    @gbabohernest
    Submitted over 2 years ago

    Responsive Insure Landing Page Solution | Build using Scss & Flexbox

    #sass/scss#accessibility
    1
    Sahand Masoleh•1,210
    @sahand-masoleh
    Posted over 2 years ago

    Hi Ernest,

    Regarding your problem, I don't see any :hover selector on your hamburger button, if you have been trying to no avail, it's because your SVG has a fill: none set in it, that takes precedence over everything you write in CSS.

  • P
    yele.m•330
    @YelemyahM
    Submitted over 2 years ago

    Huddle Landing Page

    1
    Sahand Masoleh•1,210
    @sahand-masoleh
    Posted over 2 years ago

    Hello!

    You most likely need to edit your SVG, as any styling defined in there has the highest specificity.

    If you want to be able to control the color through your CSS or JS file, a common tactic is to set the fill or stroke in your SVG to currentColor so that it will follow the container.

    Also, if you're using an SVG inliner with Webpack for example, you can directly alter fill and stroke provided that they're not defined inside the SVG file.

  • Kelebglin•70
    @JerryWski
    Submitted over 2 years ago

    CSS flexbox,, grid, SCSS, JS

    2
    Sahand Masoleh•1,210
    @sahand-masoleh
    Posted over 2 years ago

    Hey Jerry! Good job!

    First things first, you have set a min-height: 150vh on your page, I'm guessing you meant to do 100vh to be able to center the content on the page. But even then, that's the wrong approach, vh units include the address bar on mobile browsers and it will push everything down. Use height: 100% on html and body elements and then you can use percentage units to maximize the main container with min-height: 100%

    Regarding the theme toggle, I think a checkbox would've been a better choice than two radio buttons, both for you and for the user. It's a tad bit hard to click on right now.

    Marked as helpful
  • Red Pangilinan•40
    @redpangilinan
    Submitted over 2 years ago

    Huddle Landing Page with Alternating Feature Blocks using Bootstrap

    #bootstrap#animation
    2
    Sahand Masoleh•1,210
    @sahand-masoleh
    Posted over 2 years ago

    Hey Red Pangilinan, nice job and welcome!

    First things first, your solution looks really good, exactly what the design wanted.

    Your footer does look a bit over-engineered, but nothing crazy. What you can do is after you're done, open up the console and turn CSS properties on and off, if it doesn't make a difference it doesn't need to be there.

    For example, the container for your social icons has a margin bottom, even though the content are at the top anyways, you can see that turning off that property doesn't change anything.

    But don't worry about long HTML, that's the nature of a markup language. There may be some room for optimization, but you'll get there with time.

    Edit: By the way, if you want to have an easier time with naming your classes, you may want to look into BEM, or other conventions like it.

    Marked as helpful
  • lieneil•560
    @NJVS
    Submitted over 2 years ago

    Clipboard Landing Page

    #sass/scss
    2
    Sahand Masoleh•1,210
    @sahand-masoleh
    Posted over 2 years ago

    Hi lieneil! Really good solution!

    About your question, you can also use a grid with grid-auto-flow: column and then setting your grid-template-columns to repeat with auto-fit.

    Also, don't use height: 100vh on your pages because the moving address bar of mobile browsers is included in it and it will push everything down. Use height: 100% on the "parents" of the element that you want to cover the page, and then min-height: 100% on that element.

    Nevertheless, you don't even need that for this page, since it doesn't have a vertically centered element.

    One more thing, you don't need to set height: auto on elements, it is by default set to auto.

    Marked as helpful
  • Remoan•290
    @RemoRemo11
    Submitted over 2 years ago

    clipboard-landing-page-master

    1
    Sahand Masoleh•1,210
    @sahand-masoleh
    Posted over 2 years ago

    Hello again Remoan! How are you doing?

    It's a challenging layout for sure, that monitor sticking out needs some creativity.

    You can't change the color of the SVG because it has a color hard-coded into its code and that overrides anything you define in CSS. Change the fill property to currentColor in your SVG and set the color with CSS with the color property.

    Your use of the main component is correct, but like I said about your other project, I would give it a max-width and center it, right now it grows forever and throws your cont element out of center.

    Marked as helpful
View more comments
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub