Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
11
Comments
11
talentlessDeveloper
@talentlessDeveloper

All comments

  • Hector Brito•470
    @hectorjbd
    Submitted almost 3 years ago

    Data Storage

    1
    talentlessDeveloper•340
    @talentlessDeveloper
    Posted almost 3 years ago

    Hi,

    Nicely done project!

    As for the white box, you can begin with adding these properties to your alert_info class. .alert_info { position: relative; background: #fff; border-bottom-right-radius: 0; }

    Then you can create a new div inside or use the ::before pseudo element let's say you created a new div inside .alert__info, add these properties to the div.

    position: absolute; width: 0; height: 0; border-top: 22px solid #fff; border-left: 22px solid transparent; right: 0px; bottom: -14px

    You can adjust the values to fit your preference.

    if you want to learn how to create shapes using css, here is a link Css shapes.

    Marked as helpful
  • sek-devops•110
    @devwinner-sek
    Submitted about 3 years ago

    HTML, CSS

    3
    talentlessDeveloper•340
    @talentlessDeveloper
    Posted about 3 years ago

    Hi @devwinner-sek,

    It's actually not necessary you use media queries as everything is centered.

    You can add margin:0 to the body to remove the default margin on it so that everything is properly centered especially on mobile view.

    Also you should add padding-bottom to your container as some of the contents are hidden.

    This is impressive work, welldone

    Marked as helpful
  • Alyfer Jacobsen•450
    @AlyferJT
    Submitted about 3 years ago

    qrcode box - better

    1
    talentlessDeveloper•340
    @talentlessDeveloper
    Posted about 3 years ago

    Impressive!

  • tayk6ix•70
    @tayk6ix
    Submitted almost 4 years ago

    My first Junior Challenge, How I do? :)

    2
    talentlessDeveloper•340
    @talentlessDeveloper
    Posted almost 4 years ago

    This is impressive! welldone

  • tayk6ix•70
    @tayk6ix
    Submitted almost 4 years ago

    My first Junior Challenge, How I do? :)

    2
    talentlessDeveloper•340
    @talentlessDeveloper
    Posted almost 4 years ago

    hi @tayk6ix, Something is off, seems like you hosted your readme instead of the live site. Try and upload the real project itself.

    Marked as helpful
  • Bandaru Sindhuja•190
    @SindhujaBandaru
    Submitted almost 4 years ago

    3Column-preview-card-component using Flexbox

    2
    talentlessDeveloper•340
    @talentlessDeveloper
    Posted almost 4 years ago

    Hi @SindhujaBandaru,

    Move your media query to the bottom of the page.

    then in your media query you should add

    @media screen and (min-width: 62.5rem) {  
     .sed {
        border-radius: 10px 0 0 10px;
      }
      
      .lux {
         border-radius: 0 10px 10px 0;
      }
    }
    
    

    then outside of your media query your .sed and .lux class should have a border-radius of

    .sed {
     border-radius: 10px 10px 0 0;
    }
    
    .lux {
    border-radius: 0 0 10px 10px;
    }
    
    

    This should fix your border-radius problem. welldone!

    Marked as helpful
  • Bojan•40
    @Bojan227
    Submitted almost 4 years ago

    Signup form with HTML/CSS/JS

    3
    talentlessDeveloper•340
    @talentlessDeveloper
    Posted almost 4 years ago

    @Bojan277 the desktop version is great! but using desktop approach first means your mobile version is going to inherit values from desktop.

    I don't know how the mobile version looks like but i believe it shouldn't be more than stacking upon each other.

    So in your media query for your mobile,

    • add padding to your container.
    • Remove the left and right margins you added to H1 and p tags.
    • text align center your code.
    • Instead of a 35vw for your right box change it to 100%.
    • Also reduce the font for your h1 tags and placeholders too.

    goodluck

    Marked as helpful
  • Shuree•65
    @shuree0331
    Submitted almost 4 years ago

    SunnySide Agency Landing Page

    6
    talentlessDeveloper•340
    @talentlessDeveloper
    Posted almost 4 years ago

    @Shuree the nav on my device looks awesome, welldone.

  • Oluwafemi•345
    @Albusflames
    Submitted almost 4 years ago

    responsive sunny landing page using flex, grid and media

    2
    talentlessDeveloper•340
    @talentlessDeveloper
    Posted almost 4 years ago

    Hi Oluwafemi,

    add a before pseudo class to your anchor tag something like this

    
     a::before {
       display: block;
      content: "";
      position: absolute;
      top: 0.6875rem;
     left: -0.25rem;
     width: 108%;
     height: 0.4375rem;
     opacity: 0.6;
     border-radius: 10px;
     z-index: -1;
    background-color: yellow;
    }
    
    
    

    you can adjust the values and background-color as you see fit.

    Welldone!

    Marked as helpful
  • Ezmad-Ze•195
    @Ezmad-Ze
    Submitted almost 4 years ago

    Sunnyside Agency Landing page main using css grid and js

    2
    talentlessDeveloper•340
    @talentlessDeveloper
    Posted almost 4 years ago

    For a first responsive site, this is great!

  • Shuree•65
    @shuree0331
    Submitted almost 4 years ago

    SunnySide Agency Landing Page

    6
    talentlessDeveloper•340
    @talentlessDeveloper
    Posted almost 4 years ago

    Hello Shuree, the desktop version looks good! I'm guessing there's no mobile version. Also the width of the nav overflowed on my desktop using 100vw instead of 100% made it work fine.

    welldone!

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