@forjoa
Submitted
Looking to hire developers?
@KrzysztofRozbicki
@forjoa
Submitted
@KrzysztofRozbicki
Posted
This is quite tricky one - i spent too much time looking into that - but once you think about it in reverse and do some research it seems very easy you just have to do 3 things:
In the container you put the background-color:var(--text-accent-500);
or something like that - the color is EXACTLY same as accent color on insight word.
Then you put image ON that background - but with
opacity: 0.75;
and NECESSARY with
mix-blend-mode: multiply;
and suddenly magic happens.
It was very good lesson for me and I hope it will help you with next similar projects - especially you can google mix-blend-mode and have fun with it (I wasn`t aware that it exists before).
Marked as helpful
@francismudzungayiri
Submitted
@KrzysztofRozbicki
Posted
Hello. You can do that by css background properties - you can read more here - about background-image size, position etc.
There a lot of properties to use - recommend checking and testing them .
https://www.w3schools.com/cssref/css3_pr_background.php https://developer.mozilla.org/en-US/docs/Web/CSS/background
Marked as helpful
@KrzysztofRozbicki
Posted
I am using something like that:
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
Then you can put the container in your <main> (with border-radius and box-shadow, and maybe the max-width if necessary) and here you go - all content is centered. You can add: position: relative;
to your body if you want to position some elements outside the centered box. (e.g. footer etc.)
It all depends on the project - but with these kind of component pages i think the flex solution is the best :)
Marked as helpful
@garrett-fiorito
Submitted
How can I make the three column layout easier using CSS grid, I feel like I was working against myself this project.
@KrzysztofRozbicki
Posted
I see you must have updated the project - it looks better. But still I have some advices.
first you can use on your body :
display: flex;
justify-content: center;
align-items: center;
It will make all items on your website centered.
And then - please make a semantic html! in body use <main> - which will be centered by body and then in main you can use:
display: grid;
grid-template-columns: repeat(3, 1fr);
And in <main> instead of div class="sedans" you should in my opinion use <section> Also there should be only one <h1> tag per whole website. - I think you should use <h2> instead.
And lastly - the mobile design.
The change is really really simple just for your grid class put media queries e.g. like this :
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr;
}
}
Or you can reverse that if you prefer mobile-first (recommended) design
@Peter3Khalil
Submitted
I am unsure of image accent.
@KrzysztofRozbicki
Posted
I have just finished this challenge few hours ago and had the same issue, and spent some time solving that. :) You have to reverse your thinking - leave your background your standard accent color (the same as the font - "insights") but change the image opacity to 0.75 - it worked like magic for me :) But you have to change the html structure it should be like that :
<div class="purple-background">
<img class="0.75-opacity-picture">
and one more thing you want to use in the img class to get 100% accurate effect:
mix-blend-mode: multiply
BTW - try to do the mobile version next - keep it going! And let me know if it worked for you.
Marked as helpful
@amirhazizi
Submitted
my first project with sass and i like it :]
@KrzysztofRozbicki
Posted
Hey! Great job! Will just give you some tips to the SASS if you want to use it in bigger designs:
../sass/components/_index.scss
../sass/components/_button.scss
../sass/components/_page-header.scss
../sass/utils/_variables.scss
../sass/main.scss
I have learned that just a while ago but overall it is better to use old :root{ --var: xxx}
variables than $variable:xxx
SCSS ones , the CSS :root variables are more flexible and you can e.g. change the value of them in @media queries etc.
Consider using @use and @forward instead of @import - i think it is a good practice.
I know that all that @use / @forward and sass directories might be overkill much for such a small project but i think it is good to learn a good habits even with small projects.
Great job! Keep it up!
Marked as helpful
@welderessutti
Submitted
Hello everyone!!
First I want to thank you for all the help, support, and tips I've been getting. You all are amazing!!
In this challenge, I tried to use the mobile-first concept.
Feel free to let me know about any suggestions, wrong spots, or anything like that.
Thanks for your attention.
@KrzysztofRozbicki
Posted
Hey. I am sure you noticed that your mobile design is quite off. I will try to give you some tips how to fix that:
display: block;
to the <img> element to solve this gap issue.width: 40ch
in the section which made it look bizzare on my browser and off the design. I think you shouldn`t put the width at all in this element, just delete it and it ill be fine - section will get the width of its parent - the main.Overall good job! Keep it up :)
Marked as helpful
@miporins
Submitted
One more HTML and CSS challenge!
This one was very fun to build because of all organization with the CSS elements.
Hope you like it, and if you have any feedbacks about how I am coding in both HTML and CSS, I'll gladly hear it to improve! 😁
@KrzysztofRozbicki
Posted
Hey. I would have for you only one advice for responsive design because now yours is not responsive and looks cropped with viewport width lower than 500px.
First of all consider if you need to use width property. If so instead of width: try to use max-width: more often which makes it more responsive.
Secondly - when you will put a class to your photo and add it : width:100% it will automatically retain the width of its container even on smaller screens.
And lastly but not leastly: With container like wrappers / mains etc consider using min() property e.g. width: min(87.5vw, 450px)
- it will set your container width either to 450px or to 87.5% width of the screen - will choose the value that is lower.
It is very useful when building the responsive designs.
More here:
https://developer.mozilla.org/en-US/docs/Web/CSS/min
This is only one way to make it adaptive/responsive - you can reach the goal in different methdos. responsive designis quite a big topic not possible to put it all in this short comment. But i recommend you read more - testing it and simply have fun with the designs. The mobile-first must have right now. Overall you did a very good Job! And have fun!
Marked as helpful
@Ashxarya
Submitted
I would like to know how I can improve my CSS if possible. Another thing I am wondering is, when I add the text at the bottom as a footer, I would like for the card itself to still be at the center of the page, I was not able to figure out how to do that. Any help is appreciated.
@KrzysztofRozbicki
Posted
Answering your question about the attribution. First be sure that your body has a
position: relative;
min-height: 100vh
First needed so you can position the child of body according to its parent (body), second one is just to be sure that your body is at least as high as the viewport(screen) of user. Then in the attribution class you put e.g.
position: absolute;
bottom: 0.5rem
Which means that your attribution will be always 0.5rem (default 8x) from the bottom of viewport You can read more about positioning - relative and absolute here: https://www.w3schools.com/css/css_positioning.asp And of course good old Kevin Powell: https://www.youtube.com/watch?v=P6UgYq3J3Qs
And i advice you strongly to test that yourself by simple divs and just have fun and testing a lot of stuff. Positioning is in my opinion crucial to understand and without it is simply not possible to get the design look as you want.
Marked as helpful
@cloak-codes
Submitted
My solution for the Front End Mentor NFT Preview Card Challenge. Although I'm sure it is far from perfect, I am proud of how this one turned out. Helpful critique is appreciated!
@KrzysztofRozbicki
Posted
Hey! Good Job! Few minor things:
instead of <hr> you can either use border-bottom for the element above, you can also use ::before or ::after pseudoelement, or simply made a css style for <div class="line">
that you made - as you can see <hr> is not looking as in design.
Your all overlay is transparent - together with the eye white icon. Instead you can set the div and background-colour to half transparent e.g. using rgba or hsla and then make it from opacity:0 to opacity:1 and then only the background of your overlay div will be transparent, but the eye icon itself will change itself from 0 to 1 and it will be plain white :)
I would check the width and height you have set up - because now on smaller screens (less than 340px the layout is not responsive) you can e.g. delete width on img class (default will be just fine) and e.g. change the width: 340px
property in your container to max-width: 340px
but this is only for full responsive and you would have to change quite a bit to make it work with your current design.
All together great work! it looks very good.
@christinepallon
Submitted
My focus for this project was to take a mobile-first approach, since previously I had always done desktop-first and then handled the mobile view via media queries.
I noticed my design takes up way more of the page than the original. Would appreciate tips on how to get the size of the component on the page closer to the design. Thanks!
@KrzysztofRozbicki
Posted
Hey- your order is repeating because you have overwritten all your background properties in media queries with: background: url(pattern-background-desktop.svg),hsl(225, 100%, 94%);
So all your previous properties were overwritten with default.
You should put only specific:
background-image: url(...)
then you change only url of image and all other properties won`t be overwritten with defaults :) Hope it was helpful :)
@Eyelin
Submitted
Hi folks, one main concern: the buttons seem to shrink a pixel or two on hover, and this is not the desired result, I used bootstrap to customize them, any thoughts? Thanks in advance! Feedback welcome! #newbie
@KrzysztofRozbicki
Posted
Hey. Checked your code and it seems that :hover has only:
border: #66e2dc;
It isn`t replacing the border-color with your color - it is like reseting the full border properties - so the border in this case has 0px - that is why it seems smaller .
There are few solutions:
you can either correct your code in :hover pseudoclass by replacing only the color value:
border-color: #66e2dc;
Or IMO better option - you can add to your btn class or normalize css file property:
border: none
Which simply removes any borders from your button making it plain and simple to style.
Marked as helpful