Skip to content
OverviewSolutions
6
Comments
13
Juan Daniel Martínez
@juandadev

All comments

  • Juan Daniel Martínez•470
    @juandadevPosted over 4 years ago

    Awesome work Moustafa!

    The responsive works fine, but in 320px the left and right margins are missing, just fix this 😉.

    Also, you're putting the mobile background image in all sizes. Change this with a media query for 768px (Tablet default size).

    Happy coding! 🔥

    1
  • Alexander Heo•80
    @AlexanderHeoSubmitted over 4 years ago

    I'm finding it difficult to get pixel perfect, even with an overlay tool like PerfectPixel. Any suggestions on how to get the font size, letter-spacing, and line heights more accurate?

    HTML & CSS, media queries and keyframes

    4
    Juan Daniel Martínez•470
    @juandadevPosted over 4 years ago

    Hello Alexander!

    Your solution and design looks identic 🔥

    Guess the reason it doesn't look pixel-perfect is for the image resolution or something like that. Of course, you can buy the Sketch file as @shashilo said.

    0
  • Juan Daniel Martínez•470
    @juandadevPosted over 4 years ago

    Hello Lizzard!

    Your design is so accurate.

    To fix the upper left corner you may want to change a little bit the structure of the layout:

    • Remove the background-image from the <body>, just keep the background-color.
    • Add another <div> container only for the background image. This needs to be a child of <body>. To place it under all elements give it a negative value to z-index like -1, if this doesn't work maybe you need to change the z-index of -container to a value above -1 like 0.
    • Set the position of this container to absolute, then place it at the bottom.
    • Finally, just add a border-radius to the upper left corner with border-top-left-radius.

    Hope you could understand me. Happy coding! 😁

    2
  • Steffan Hatlestad•90
    @befflusSubmitted over 4 years ago

    Had issues with displaying the images. The solution was to add code to the HTML with align=right attribute in <img> tag. Also had to add <br> tags to get the tile bigger so the image would fit inside the tile. I think this should be possible to get done with CSS. Any advice how to get this done in CSS?

    HTML CSS only

    1
    Juan Daniel Martínez•470
    @juandadevPosted over 4 years ago

    Hello Steffan!

    Your design looks great! To avoid the align="right" in the tag need to do this:

    • Work with Flexbox, it's very useful if you know how it works. Add the display: flex property to your tile divs. You could see how the position of the elements inside changes, don't be scared, the default value of the direction of items is row. Just add the flex-direction: column property.
    • Flexbox properties only affect the child elements of a container, but you can also modify the children.
    • With the .tiles img selector just add the align-self: flex-end property to move only the <img> tags inside of the .tiles containers to the right. flex-end value is because this works in the X-axis so the order is left to right = flex-start to flex-end.
    • The other fact about adding more divs like the side-left, side-right, and center, you can learn about Grid system instead.

    Also learn more of Flexbox here

    Hope you could understand me. Happy coding! 😁

    1
  • Juan Daniel Martínez•470
    @juandadevPosted over 4 years ago

    Hello Pablo!

    That's an awesome job!

    The only thing is your media query, the value it's too high. You may need to change the max-width to 768px, that's the default width for tablets.

    Also, change your grid width columns to relative values 😉

    Happy coding!

    0
  • Juan Daniel Martínez•470
    @juandadevPosted over 4 years ago

    Hello Raphael!

    It was a good try but there are many things you may want to change/improve:

    • To add the fonts to your page, you need to embed the link code from Google Fonts. Just search the correct font and click on it, then select the styles you want no import clicking in the + button, and in the embed tab copy the link tag and paste it on the <head> section near your stylesheets.
    • Fix the call to your fonts, in the font-family property you missed the comma between "Raleway" and sans-serif.
    • Once you correctly link the font, you can change the 185 in the clip div. Instead of putting each number on a separated div, put it together like <div>185</div> or <p>185</p>, the font itself gonna add that style in the numbers.
    • Check the correct colors in the style-guide.md file and try to change it correctly in your containers.
    • The hovers or active states of your project are missing, you can change styles when putting the mouse over an element with selector:hover. It's called a pseudo-class and you can learn more here

    I'm from Mexico, so I still improving my English writing skills, I hope you could understand me 😅.

    You're doing great, keep practicing your CSS skills and happy coding! 🔥

    1
  • Juan Daniel Martínez•470
    @juandadevPosted over 4 years ago

    There are some issues you need to fix/improve:

    • I recommend you add the fonts in the HTML Document in a link tag getting the embed code from Google Fonts.
    • Your background image looks different from the original one.
    • Add a border-radius to the content-1, content-2 and content-3 containers and buttons.
    • Also, try different values for the blur(third parameter) and spread(fourth parameter) in the box-shadow property looking similar to the original design. You can use this tool that generates automatic code for box-shadow.
    • The content-2 container for the Professional plan includes a gradient background with white, again you can use this tool to generate the code for the gradient as the background.
    • With text-transform: uppercase you can change the style of any text, including the one inside of the buttons of learn more.

    That's all I can see now, good work, and keep coding and learning every day! 😁

    1
  • Juan Daniel Martínez•470
    @juandadevPosted over 4 years ago

    Hello Samuel! Your solutions look fine, but there's a little thing you can change:

    • Need to work with the responsive design of your page, maybe with your screen resolution looks fine, but in other devices doesn't look good, especially with the container's height. You may want to change the .main-header .primary .secondary height property to auto and give more padding to these containers too, I recommend you to use relative values (%, rem, em) instead of absolute values (10px). Give it a try

    • In case you still have some trouble, the normalize.css file could affect too. The most simple way to format styles it's adding in the * selector margin: 0; padding: 0; and box-sizing: border-box;

    Happy coding! 🤓

    2
  • Juan Daniel Martínez•470
    @juandadevPosted over 4 years ago

    Your site scales amazing! Congrats

    1
  • Juan Daniel Martínez•470
    @juandadevPosted over 4 years ago

    The card design was very good! Now learn how to make your site responsive. Also, I recommend you to learn about Grid Layout System and more of Flexbox.

    2
  • Juan Daniel Martínez•470
    @juandadevPosted over 4 years ago

    Look the same between your solution and the design preview, amazing!

    1
  • Everton Soares Borges•140
    @EvertonBorgesSubmitted over 4 years ago

    Making this page responsive gave me a headache, it took me a while to get the page centered, but I did it. Thank you if you can help by giving suggestions / improvements to the page.

    Just HTML, CSS and VanillaJS

    1
    Juan Daniel Martínez•470
    @juandadevPosted over 4 years ago

    Hello, your page looks fine! Just it's better to put the image as a background with CSS and not as an img tag because it resizes when you shrink the screen and looks so bad.

    • Instead of putting an <img> tag just add a <div> then adjust the size with CSS and you can use the background-image: url(/path_to_image.jpg) and background-size: cover. You can change the position of the image inside tho.
    1