@DevMoustafa97
Juan Daniel Martínez
@juandadevAll comments
- @juandadev
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@juandadev
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@juandadev
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-imagefrom the<body>, just keep thebackground-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 toz-indexlike -1, if this doesn't work maybe you need to change thez-indexof-containerto a value above -1 like 0. - Set the
positionof this container toabsolute, 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! 😁
- Remove the
- @befflus@juandadev
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: flexproperty to yourtiledivs. You could see how the position of the elements inside changes, don't be scared, the default value of the direction of items isrow. Just add theflex-direction: columnproperty. - Flexbox properties only affect the child elements of a container, but you can also modify the children.
- With the
.tiles imgselector just add thealign-self: flex-endproperty 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, andcenter, you can learn about Grid system instead.
Also learn more of Flexbox here
Hope you could understand me. Happy coding! 😁
- Work with Flexbox, it's very useful if you know how it works. Add the
- @pmdduarte@juandadev
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-widthto 768px, that's the default width for tablets.Also, change your grid width columns to relative values 😉
Happy coding!
- @Raphaelmbewe@juandadev
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-familyproperty you missed the comma between"Raleway"andsans-serif. - Once you correctly link the font, you can change the 185 in the
clipdiv. 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! 🔥
- 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
- @Raymond-ap@juandadev
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-radiusto thecontent-1,content-2andcontent-3containers and buttons. - Also, try different values for the
blur(third parameter) andspread(fourth parameter) in thebox-shadowproperty looking similar to the original design. You can use this tool that generates automatic code forbox-shadow. - The
content-2container 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: uppercaseyou 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@juandadev
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.secondaryheight property toautoand 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
*selectormargin: 0; padding: 0;andbox-sizing: border-box;
Happy coding! 🤓
-
- @wellspr@juandadev
Your site scales amazing! Congrats
- @csompatt@juandadev
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@juandadev
Look the same between your solution and the design preview, amazing!
- @EvertonBorges@juandadev
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 thebackground-image: url(/path_to_image.jpg)andbackground-size: cover. You can change the position of the image inside tho.
- Instead of putting an
- @Jmangel015@juandadev
Very accurate, just add the shadow box of the container ;)
