Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
31
Comments
16
Foued
@Foued80

All comments

  • kristynavulcova•150
    @kristynavulcova
    Submitted almost 3 years ago

    Loopstudios #scss #grid

    1
    Foued•655
    @Foued80
    Posted almost 3 years ago

    Very nice well done :D

  • Jibreel•300
    @jibreel1
    Submitted almost 3 years ago

    E-commerce product page

    #react#material-ui
    1
    Foued•655
    @Foued80
    Posted almost 3 years ago

    Hi, Jibreel great work for this challenge

    there is an issue with " + " it calls a function that increment "counter" that's ok but it is not supposed to show the quantity on the cart bdge (top right screen) untill you hit the "add to cart" button.

  • Paula Isabel•230
    @paulaxisabel
    Submitted about 3 years ago

    Loopstudios Landing Page

    #sass/scss
    2
    Foued•655
    @Foued80
    Posted almost 3 years ago

    Great job Isabel, the animations are great!

  • Holat•640
    @Holat
    Submitted about 3 years ago

    ecommerce page

    1
    Foued•655
    @Foued80
    Posted about 3 years ago

    hi, geat work.

    on desktop view when hovering over navbar links i can see the border-bottom shifting due to the boxsizing property, you can fix this by adding margin-bottom:-3.5px;

    header .logo .menu ul a:hover { color: #1d2025; text-decoration: none; font-weight: 700; border-bottom: 3.5px solid #ff7d1a; margin-bottom:-3.5px; }

    and to prevent the links to shift right when hover over due to the font weight change, try to change opacity or color unstead.

    cheers

    Marked as helpful
  • Romeo Noveanre•200
    @kraken-afk
    Submitted about 3 years ago

    Ecommerce-product-page with Sass and plain JavaScript

    #sass/scss#webpack
    1
    Foued•655
    @Foued80
    Posted about 3 years ago

    hi, great job, on desktop view you forgot the thumbnails (design/desktop-design-lightbox.jpg).

  • CorizCoder•20
    @CharlesCypher
    Submitted about 3 years ago

    Intro section with dropdown navigation

    #jquery
    1
    Foued•655
    @Foued80
    Posted about 3 years ago

    hi, CorizCoder

    Goodjob, i had the same trouble with the sidebar dropdown menu specialy the padding and margins to hide the submenu;

    check my css only solution for this challenge no single line of javascript was needed, i used input:checkbox with css ~ sibling

    your sidebar is missing a backdrop to the left, and for the best practice i suggest checking bootstrap's code for navbars and dropdown menu for inspiration

    cheers.

    Marked as helpful
  • David A•730
    @DavidXploidz
    Submitted about 3 years ago

    Responsive landing page with drop down navigation using html, css y JS

    1
    Foued•655
    @Foued80
    Posted about 3 years ago

    hello, great work, the sub menus do not collapse after they are displayed

  • Bogdan-Mihail Pavel•635
    @codeguy9
    Submitted about 4 years ago

    HTML, CSS, FLEXBOX, CSS GRID

    2
    Foued•655
    @Foued80
    Posted about 4 years ago

    hi,

    Here a fix for the the reviews section

    .flex-machine { display: flex; align-items: center; }

    align-items:center will stop the avatar from stretching

    can you tell me how you made the paragraph to shrink and grow with the viewport, i dont see clamp or font-size relative to viewport anywhere in your css :s i may learn something here :O

  • Menna Rashad•90
    @Menna-Rashad
    Submitted about 4 years ago

    Responsive landing page using flexbox

    2
    Foued•655
    @Foued80
    Posted about 4 years ago

    hi,

    1. the desktop view needs a container with a max-width of 1440px

    2. hovering over the nav links shift the content try to force border to 0 on the li's

    3. try the aspect-ration preperty to set the corect width/height of background images

    4. don't use duplicate IDs check your solution report and fix the problems

    Marked as helpful
  • Heritier Akilimali•310
    @heritio
    Submitted about 4 years ago

    html and css site with flexbox and media queries

    3
    Foued•655
    @Foued80
    Posted about 4 years ago

    Hi Heritier,

    Be aware that the css is processed from top to bottom, at the begening of the file you put :

    body> margin: 9vh auto; and then @media body> width: 95%;

    for mobile view, you should override the rules if you want something different and remove duplicates @medias if you wan't it to stay as it is .

    cheers

    Marked as helpful
  • Amon•2,560
    @A-amon
    Submitted about 4 years ago

    HTML, SCSS, JS

    2
    Foued•655
    @Foued80
    Posted about 4 years ago

    Hi Amon, realy cool animations there !

  • Oscar Daniel Piñeros Hernández•60
    @odpinerosh
    Submitted about 4 years ago

    Simple coming soon page with basic HTML, CSS & JavaScript.

    1
    Foued•655
    @Foued80
    Posted about 4 years ago

    Hi Oscar, well done,

    -Not sure if an email like this example@exampl.c is a valid email ( .c) need at least 2 chars according to Domain Naming Conventions. -The background pattern isn't well scaled nor well positionned

    cheers.

    Marked as helpful
  • Keshava Varma•20
    @keshavavarma
    Submitted about 4 years ago

    Basic site using HTML and CSS

    1
    Foued•655
    @Foued80
    Posted about 4 years ago

    Hello, use th background-size to scale up or down with VH or VW units.

  • David Maillard•375
    @DavidMaillard
    Submitted about 4 years ago

    Card component with Flexbox

    2
    Foued•655
    @Foued80
    Posted about 4 years ago

    Good job, i personaly used background images, your design miss the mobileview.

    Marked as helpful
  • Foued•655
    @Foued80
    Submitted about 4 years ago

    FAQ accordion card mobile first, no javascript!.

    2
    Foued•655
    @Foued80
    Posted about 4 years ago

    Thank you for the feedback, here what i fixed :

    • Mobile display down to 320px.
    • LABEL html validation issue:
    <li>
                <input type="checkbox" id="toggle1" />
                <label for="toggle1">How many team members can I invite?</label>
    
                <img class="arrow" src="images/icon-arrow-down.svg" alt="" />
                <div class="card_faq_a">
                  You can invite up to 2 additional users on the Free plan. There is
                  no limit on team members for the Premium plan.
                </div>
              </li>
    
    • Lowered transition to 0.5s;

    On desktop view :

    • Added shadow to the box and fixed the positioning;
    • Reduced font-size, paddings and margins to fix the accordion display when fully expanded;
    • Added hover effect on questions (color, cursor)
  • Carl Wicker•1,055
    @carlwicker
    Submitted about 4 years ago

    Profile Card Component

    1
    Foued•655
    @Foued80
    Posted about 4 years ago

    svg top and bottom took me 70% of the developemen't time, i'm not sure if i got it right :/

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

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