Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
18
Comments
10

Marcus Hugo

@marcus-hugoCollierville, TN365 points

I'm all about frontend development! There's always new and awesome things to learn about HTML, CSS, and JavaScript! When I'm not coding, I enjoy music and watching movies.

I’m currently learning...

React

Latest solutions

  • Responsive Galleria website with Express and EJS

    #accessibility#express#sass/scss

    Marcus Hugo•365
    Submitted over 1 year ago

    0 comments
  • Classic todo app made with React

    #react#sass/scss#vite

    Marcus Hugo•365
    Submitted over 1 year ago

    0 comments
  • Markdown Notes App built with React

    #react#vite#sass/scss

    Marcus Hugo•365
    Submitted about 2 years ago

    0 comments
  • Advice Generator App with Sass and Javascript

    #sass/scss

    Marcus Hugo•365
    Submitted almost 3 years ago

    0 comments
  • Creative Agency Site with Webpack

    #bem#webpack#sass/scss

    Marcus Hugo•365
    Submitted almost 3 years ago

    0 comments
  • Manual Slider with Javascript and Sass

    #accessibility#sass/scss

    Marcus Hugo•365
    Submitted almost 3 years ago

    0 comments
View more solutions

Latest comments

  • Emmilie Estabillo•5,600
    @emestabillo
    Submitted about 5 years ago

    Mobile-first with Flexbox and old-fashioned CSS

    5
    Marcus Hugo•365
    @marcus-hugo
    Posted over 3 years ago

    Hey Emmilie, I've been googling javascript for a basic carousel, and all the tutorials are very complicated, but, your solution is so concise! I couldn't understand how to implement the logic and I've been studying your solution and wondering how the slideIndex gets updated with each click?

    I think I understand. Is it because slideIndex is a variable that gets updated with each onclick="plusSlides(1) or onclick="plusSlides(-1)?

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe
    Submitted about 3 years ago

    Pure CSS FAQ Accordion Card With Sweet CSS Animations

    #accessibility#sass/scss
    19
    Marcus Hugo•365
    @marcus-hugo
    Posted over 3 years ago

    I've been reworking my solution and saw that yours has no javascript and that you used the details and summary elements, which I didn't know about!

    I really like the animations on load too!

  • Md Ajmal Shadab•410
    @mdajmalshadab
    Submitted almost 4 years ago

    Huddle landing page with a single introductory HTML and CSS

    2
    Marcus Hugo•365
    @marcus-hugo
    Posted almost 4 years ago

    Looks really good! I had the same thing happening and what worked for me was,

    background-position: 0 0;
    background-size: auto 100vh;
    
  • Logan Willaumez•160
    @LoganWillaumez
    Submitted almost 4 years ago

    Hundle landing page

    1
    Marcus Hugo•365
    @marcus-hugo
    Posted almost 4 years ago

    Desktop looks great! I like the animations too! for the mobile background image, instead of body::after you could try using background-image with the svg url. This is what worked for me,

    background-image: url(../images/bg-mobile.svg);
    background-repeat: no-repeat;
    background-position: center 0px;
    background-size: contain;
    
    Marked as helpful
  • Edyta•100
    @Infinit-dot
    Submitted almost 4 years ago

    FAQ accordion, mobile first workflow, vanilla javascript

    2
    Marcus Hugo•365
    @marcus-hugo
    Posted almost 4 years ago

    Looks great! I really like the animations!

  • samandavari•20
    @samandavari
    Submitted almost 4 years ago

    I used javascript for my first time

    2
    Marcus Hugo•365
    @marcus-hugo
    Posted almost 4 years ago

    Looks good!

    For the box svg , add it to the html before the div .image, then in the css set it to position: relative and position it with top: and left: like this

    display: inline;
    position: relative;
    left: -177px;
    top: 282px;
    

    Try removing the heights from the .wrapper and .accwrapper, that should keep it from popping out of the wrapper.

    For hiding the images, it looks like you could add the bg-pattern to the .image div and then set it to position: relative and z-index: -1, and overflow: hidden, though I'm not sure it will work?

    I ended up using background-image: with url().

    background-image: url(../images/illustration-woman-online-desktop.svg), url(../images/bg-pattern-desktop.svg);
            background-position:  -76px, -571px -248px;
            background-size: 472px, 966px;
            background-repeat: no-repeat;
    

    Hope this helps! Happy coding!

View more comments

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