@DevMoustafa97
Submitted
My first challenge , please try different sizes and write below if you see any issues thanks previously
Looking to hire developers?
@juandadev
@DevMoustafa97
Submitted
My first challenge , please try different sizes and write below if you see any issues thanks previously
@juandadev
Posted
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! 🔥
@AlexanderHeo
Submitted
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?
@juandadev
Posted
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.
@LizzardMedeiros
Submitted
The background image does not appear entirely right for me, in the upper left corner it is not transparent
@juandadev
Posted
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:
background-image
from the <body>
, just keep the background-color
.<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.position
of this container to absolute
, then place it at the bottom.border-top-left-radius
.Hope you could understand me. Happy coding! 😁
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?
@juandadev
Posted
Hello Steffan!
Your design looks great! To avoid the align="right"
in the tag need to do this:
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..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.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! 😁
@pmdduarte
Submitted
Resuelto con base de GRID. Descktop First.
@juandadev
Posted
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!
please advice me on some improvements that are needed.
@juandadev
Posted
Hello Raphael!
It was a good try but there are many things you may want to change/improve:
+
button, and in the embed tab copy the link tag and paste it on the <head>
section near your stylesheets.font-family
property you missed the comma between "Raleway"
and sans-serif
.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.selector
:hover
. It's called a pseudo-class and you can learn more hereI'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! 🔥
@Raymond-ap
Submitted
All solutions and feedback are welcome
@juandadev
Posted
There are some issues you need to fix/improve:
border-radius
to the content-1
, content-2
and content-3
containers and buttons.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
.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.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! 😁
@samuel-adu
Submitted
What do you think i could have done differently.
@juandadev
Posted
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! 🤓
@wellspr
Submitted
This is my first submitted solution here, I'd be very happy to get any comment about it! :)
@juandadev
Posted
Your site scales amazing! Congrats
@csompatt
Submitted
I'm very new in Frontend. What do you think about my solution?
@juandadev
Posted
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.
@KuroiwaAiki
Submitted
Feedback appreciated! Thx!
@juandadev
Posted
Look the same between your solution and the design preview, amazing!
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.
@juandadev
Posted
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.
<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.Hello, I am practicing my html and css. I accept any constructive criticism
@juandadev
Posted
Very accurate, just add the shadow box of the container ;)