Skip to content
OverviewSolutions
17
Comments
18
dania
@adimidania

All comments

  • dania•530
    @adimidaniaPosted over 2 years ago

    The card is looking great! good job Yokke you rock 🤩 However, the card needs to be centered, there are many ways to achieve that, one of them is to use flexbox! try to add the following properties to your body element.

        display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 100vh;

    Keep it up mate!

    Marked as helpful
    1
  • dania•530
    @adimidaniaPosted over 3 years ago

    You did amazing! It's looking awesome and responsive!

    I guess for the buttons, add a little bit of padding to make them look as close as possible to the design.

    Keep coding!

    1
  • dania•530
    @adimidaniaPosted over 3 years ago

    Well done Safi! you did a really amazing job! the card is fully responsive and looking great!

    You can add some space between the lines in the paragraphs using line-height property, also, for the body change the background color to hsl(0, 0%, 95%).

    Keep coding!

    Marked as helpful
    1
  • dania•530
    @adimidaniaPosted over 3 years ago

    Hey @yurehn! Congratulations on completing this project! well done, the card looks too close to the design, and It's responsive!

    Just one remark, in some screens, including mine, the card isn't showing completely! one of the ways to fix this, is to remove overflow:hidden; or just let it be overflow:auto; in your body element, also remove height:100vh; and add min-height:100vh;.

    Marked as helpful
    0
  • Goran Dejanovic•30
    @gdejanovicSubmitted over 3 years ago

    I know i have a lot to learn, especially when i had to fiddle a lot with CSS to position things, i am currently attending frontend bootcamp so i hope i'll do better next challenge.

    Mobile only without JS

    1
    dania•530
    @adimidaniaPosted over 3 years ago

    Hey Goran! Congratulations on completing this challenge!

    • For the background image, you need to put background-image: URL("images/pattern-background-desktop.svg"); along with background-color: hsl(225, 100%, 94%);
    • Then, add to your .card element, background-color: white; and border: none;
    • Try to always include this in your style.css whenever you start a new project. It will save a lot of time and actual headache for you in both the long run and short run :
    *,*:before, *:after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
    • After including the properties above, adjust the padding and the margins as you want.
    • You need to learn about media-queries to make your website responsive (looks good on all screens - mobile, desktop, tablet), and then try to apply what you learned on this challenge.

    Good luck! keep learning and keep coding!

    0
  • dania•530
    @adimidaniaPosted over 3 years ago

    Hey mate! Congratulations on completing this project!

    You need to learn about media queries in order to make your website responsive (looks better on all the screens - Desktop, mobile, and tablet), here's a recommended video to get started with media queries. Also, try to learn about CSS flexbox, here's a recommended video, CSS flexbox will make your life easier to design and build responsive web pages.

    After getting a basic knowledge about both of these, come back to this challenge and try to make it responsive and look better.

    Best of luck! keep coding and keep learning!

    Marked as helpful
    1
  • dania•530
    @adimidaniaPosted over 3 years ago

    Really well done! It's fully responsive, and looking good! There's just one thing missing, add font-family: "Lexend Deca", sans-serif; to the buttons. Keep coding!

    Marked as helpful
    1
  • Michael•30
    @MichaelGeehSubmitted over 3 years ago

    Hello everybody,

    this is my first submission on Frontend Mentor and I'd be grateful for some feedback, especially on whether my formatting is efficient or if I should have followed a different approach somewhere.

    Thank you!

    HTML CSS

    2
    dania•530
    @adimidaniaPosted over 3 years ago

    Hey Michael! Welcome to Fronted Mentor's community! Congratulations on completing your first project. Just a few notes :

    • I guess the background image for the mobile version needs to be added for the screens with a width of 375px and less (according to the challenge).
    • Your card is looking great on large screens, but on small screens (mobile version), It needs to be adjusted, in other words, It's not fully responsive.
    • The card needs to be centered. One way to do this is :
    body {
 display:flex;
 align-items:center;
 justify-content:center;
 height:100vh; 
 margin:0;
}
    Marked as helpful
    0
  • dania•530
    @adimidaniaPosted over 3 years ago

    Hey Dalenza! Congratulations on completing this challenge! My suggestions :

    • I think you need to add some space between the lines in the paragraphs, you can achieve that by using the property line-height, try to add this line-height:27px;
    • For the buttons hovering, as shown in the active-state-preview.jpg, you only need to make the background-color transparent (and the button needs to have a white border)
    • In the mobile version, we can't see the card properly (It's overflowing), because you've set the height of the body to 100vh. One of the ways to fix this (according to your solution), is to set the height of the body to height:max-content for the mobile version (P.S : add some margin (top & bottom) to the card to make it look better)

    Keep coding!!

    Marked as helpful
    0
  • dania•530
    @adimidaniaPosted over 3 years ago

    Hey mate! Congratulations on completing this challenge! Just few remarks :

    • In you body element, add background-repeat: no-repeat;.
    • The card needs to be centered! one way to do this is (according to your solution) :
    body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
    • Also, try to add some padding to the left and the right of the ".card-main-body", and some padding to the top and the bottom of the buttons (in order the make the card look as close as possible to the given design)

    Best of luck and keep coding :D

    Marked as helpful
    1
  • dania•530
    @adimidaniaPosted over 3 years ago

    Congratulation on completing this project!! I liked both mobile and desktop versions, well done @Dmitry!

    Just a remark, maybe you should check how your website looks on screens with a width in the range of [1138px-376px], there's some text overflowing, because you've fixed the width (as well as the height) of the .container, and you've set the overflow to hidden.

    Keep the hard work up!

    Marked as helpful
    1
  • Adaeze Ikemefuna•95
    @AdaezeIkemefunaSubmitted over 3 years ago

    I had issues with the background image positioning. I would love some feedback, thank you.

    HTML and CSS

    2
    dania•530
    @adimidaniaPosted over 3 years ago

    Hello Adaeze! Congrats on your submission. Keep pushing and keep the work up. Here are some things that you need to update in order to improve your website :

    • Reduce the card height by adjusting the height of the hero section, the about section, and the stats section (as well as the padding).
    • Let the border-radius be 20px instead of 7px, in order to make it look as close as possible to the given design.
    • For h1 the heading in both the about and the stats sections, use color:hsl(229, 23%, 23%);, instead of letting it be black (by default).
    • You can also add some letter-spacing to span's inside of the stats section (Followers, etc.).
    • For the background, there are plenty of ways to do it, and honestly I don't know what is the best one among them, but I will tell you what I did. For the HTML, I added a div with a class .circles containing the two circles, and another div containing the card component, as you can see here
      <div class="circles">
    <img src="images/bg-pattern-top.svg" class="c1" alt="circle" />
    <img src="images/bg-pattern-bottom.svg" class="c2" alt="circle" />
  </div>
  <main>
</main>

    And for the styling, I just did the following :

    .c1 {
    bottom: 40%;
    right:50%;
    position:fixed;
} 
.c2 {
    top:50%;
    left:50%;
    position:fixed;
}  
main {
    width:100%;
    height: 100%;
    background-color: var(--dark-cyan);
    /* + Other stuff */
}
.card {
    z-index: 999;
   /* So the card stays on top of everything */
}

    I hope you will find this helpful!

    Marked as helpful
    2