Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
8
Comments
17
Stefan
@st3wn

All comments

  • Waithira•10
    @waithira001
    Submitted over 3 years ago

    3-column-preview-card-component

    1
    Stefan•180
    @st3wn
    Posted over 3 years ago

    Very interesting!

  • Akshit0703•10
    @Akshit0703
    Submitted over 3 years ago

    HTML, CSS, Positioning

    1
    Stefan•180
    @st3wn
    Posted over 3 years ago

    I do not see any differents!

  • Stefan•180
    @st3wn
    Submitted over 3 years ago

    Grid System with flex

    1
    Stefan•180
    @st3wn
    Posted over 3 years ago

    I see in the screenshot that there is a box shadow on the white boxes and another font color :o

  • Stefan•180
    @st3wn
    Submitted over 3 years ago

    Copy of Responsiv Social Proof Website

    3
    Stefan•180
    @st3wn
    Posted over 3 years ago

    Big thanks for your time.

    Reading something like this and trying to understand it is really the best thing that can happen to a beginner frontend developer.

    I think I just lack practice.

    <3

  • Parham•200
    @frontendparham
    Submitted over 3 years ago

    Social Proof Section, Made with HTML, CSS, SASS

    1
    Stefan•180
    @st3wn
    Posted over 3 years ago

    Hey, here some things.

    -use line-height -put the stars + the "Rated 5 stars..." in one div and use display flex with a flex-direction: row; -do not use font-weight: bold; everywhere -set a width to the title to get as closest as possible to the frontendmentor design You can watch my version of it if you need help. :)

    But pretty good, how long did you need for it?

    Marked as helpful
  • Stefan•180
    @st3wn
    Submitted over 3 years ago

    Copy of Responsiv Social Proof Website

    3
    Stefan•180
    @st3wn
    Posted over 3 years ago

    Please visit the live page https://st3wn.github.io/FrontendMentorRatingPage/

    This compare box here is just for 1440px.

  • Stefan•10
    @stefanatanasovmk
    Submitted over 3 years ago

    Responsive card using Flexbox

    3
    Stefan•180
    @st3wn
    Posted over 3 years ago

    Yo Zineb,

    love it, thanks :)

    Can you still send me your CSS rest? Would be great!

  • Josh•20
    @J0shcodes
    Submitted over 3 years ago

    Responsive Stats card with CSS Flexbox

    1
    Stefan•180
    @st3wn
    Posted over 3 years ago

    hi, start using font-weight: ;

  • AhmedFawzi•110
    @AhmedFawzi44
    Submitted over 3 years ago

    Responsive Order-Summary-Card

    2
    Stefan•180
    @st3wn
    Posted over 3 years ago

    Hi man,

    I recommend to you to put the full box in one container like.

    <div class="container"> In it you put everything of the summary box. </div>
  • Stefan•10
    @stefanatanasovmk
    Submitted over 3 years ago

    Responsive card using Flexbox

    3
    Stefan•180
    @st3wn
    Posted over 3 years ago

    Hi man,

    just a little tip: You can give the left side of the container a padding-right: px; to get the text smaller. Or you put the h1 and paragraph in a div container and give the div container a width.

    Aswell you can check the width and height of the image by rightclicking it, click on the tab "details" and then see the px size of the image. Is the image for example 446px high, you set the container to a height of 446px. In your case the picture is a bit cut off.

    But overall pretty good!

  • Michael Watson•20
    @mgwatson21
    Submitted over 3 years ago

    HTML and CSS

    1
    Stefan•180
    @st3wn
    Posted over 3 years ago

    Hi man,

    start using font-weight: 700;

    Marked as helpful
  • Stefan•180
    @st3wn
    Submitted over 3 years ago

    Second "website" ever - responsiv Box

    4
    Stefan•180
    @st3wn
    Posted over 3 years ago

    Thank you very much! Just used HTML and CSS

  • Stefan•180
    @st3wn
    Submitted over 3 years ago

    Second "website" ever - responsiv Box

    4
    Stefan•180
    @st3wn
    Posted over 3 years ago

    Thank you man!

  • Gab•150
    @gp0710
    Submitted over 3 years ago

    Responsive Stats Preview Card

    1
    Stefan•180
    @st3wn
    Posted over 3 years ago

    Use the height of the Desktop Image (446px) as the Container Image. I made the same challenge, you can checkout the solution on my profile.

    Thank you :)

  • Trevor Smith•10
    @Tleesm345
    Submitted over 3 years ago

    divs, inline-block elements, border-radius, hsl coloring

    1
    Stefan•180
    @st3wn
    Posted over 3 years ago

    -use Media Queries -setup the correct Font for the Button -use correct font color -use a grid system or display flex instead of the inline-block method

  • Yared•90
    @yaredh30
    Submitted over 3 years ago

    Stats Preview Card

    2
    Stefan•180
    @st3wn
    Posted over 3 years ago

    Hey man,

    for the colored image you can use a linear-gradient. Example:

    background-image: linear-gradient(rgba(170, 92, 219, 0.45), rgba(170, 92, 219, 0.45)), url("../img/image-header-desktop.jpg");

    In this case, the image would have a pink overlay (0.45).

    Marked as helpful
  • Stefan•180
    @st3wn
    Submitted over 3 years ago

    First "website" ever - Order Summary Challenge

    1
    Stefan•180
    @st3wn
    Posted over 3 years ago

    Oh, aswell I had no idea how to make this wave background so I just took white color.

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

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