I was struggling with the yellow box surrounding the "Learning" text. I couldn't get the sides to be proper and consistent. I also struggled with the profile picture next to the author's name, I tried aligning it at the same level as the text. Feedback on those issues and anything else will be greatly appreciated.
Also for the profile picture, a quick fix would be using the Flexbox method!
.greg { padding: 10px; // Flexbox display: flex; align-items: center; justify-content: flex-start; // Note: "justify-content" line is optional }
You don't need to have justify-content as the content will be position left. You add spacing between the image and text using margins.
I was struggling with the yellow box surrounding the "Learning" text. I couldn't get the sides to be proper and consistent. I also struggled with the profile picture next to the author's name, I tried aligning it at the same level as the text. Feedback on those issues and anything else will be greatly appreciated.
Hey Julian, it seems that your learning box looks off because your paragraph text has margins for the top and bottom. You also have no padding for the top and bottom in your .learning-box class.
For your learning-box class:
.learning-box { // Remove Height // padding: 10px; }
You can remove the height for the learning box as the padding will give the space you need.
For the paragraph text, I noticed that you have a class on it called ".learning". I don't think you need to do this since you can select the element using CSS selectors. For this part, all you have to do is remove the top and bottom margins using margin: auto.
// You can use ".learning-box" p or ".learning" to select the text in your learning-box .learning-box p { margin: auto }
Hope this helps!
I found this easier to do than the last project i attempted. although i am issues with the font weight of some of the components. i'd appreciate help.
Hey Hafsat, it looks like you didn't specify the font weights when you imported the font in CSS so all of your text shares the same font style. For this challenge, the only two font styles you need are Semibold(600) and Extrabold(800). I think this is also mentioned in the project's style guide. In other words, your @import link should look like this:
@import url('https://fonts.googleapis.com/css2family=Figtree:wght@600;800&display=swap');
Also since you're getting the font from Google Fonts, you should be able to select which fonts to use and generate the code using the @import option/button on their site.
You did a nice job recreating the blog card, the only thing you're missing is the box shadow and the line height and leading.
In your description or "title-text" you should add some line height to give the text more space.
If you want the box shadow to be solid black, set the blur value to zero. Another thing to note is that the box shadow is supposed to expand a little when you hover over the card similar to the <h1>.
Hey Dimitri, you did a very good job recreating the design! The only elements I think you missed are:
Please rate my spacings and correlation to the real design!
Hey @Lovethrech, your spacing is good but one major element that needs attention is the box shadow. The box-shadow's x and y positions are wrong and the color should be a solid black. An easy fix is setting the blur value (the third value in your box-shadow property) to 0. You will also need to remove the transparency of your box shadow's color. For the box-shadow to appear on the bottom of the card you have to set the y-offset to a position value.
In short, your box-shadow code should look something like this:
.card-container { box-shadow: 10px 10px 0px #000000; }
Another thing to note is that the card's box shadow should change when you hover over it just like your <h1>. This change can be seen in the image showing the active states. For this, all you have to do is add a hover-state on your .card-container class and change the x and y values on the box shadow. An example would be something like this:
.card-container:hover {
box-shadow: 30px 30px 0px #222222;
}
Please take a look and let me know how it reads on your end. Let me know if there are issues with font-size or margins and paddings.
Do transitions from one screen size to another make sense, or is there something you would recommend?
Hey there, you did a pretty good job with your solution, but you're missing your hover selection for the <h1> and box-shadow.
I also don't think you have added margins to your <main> since you already using Flexbox in your body.
Another nitpick from me is that I think that the border should only be 1px instead of 2px.
Check this out and give your honest comments.. thank you
Hey Edward, you did a pretty good job recreating the design! I like that you went out of your way to recreate the header image using SVG. You were very close to nailing it but you missed a few design elements.
Font
Learning Button
Paragraph Text
Box Shadow
.container { box-shadow: 10px 10px 0px rgba(0,0,0,1); }
The third value holds the blur value and if you set that value to 0, you'll get a flat shape.
Hover State You were very close to getting the hover state right but you're missing an element. Where you hover over the card, the card's box shadow should increase! The change is simple as you have to add a :hover selector just like you did with your h1.
.container:hover {
}
The only values you'll need to change are the x and y values of your box-shadow
Please I would accept any feedback.
Hi @kojozcodes, Overall your solution looks good but you missed a couple of things. These elements are the color of your heading text and your QR card lacking a box shadow.
One detail you missed in your solution is the color of your heading text, "Improve your front-end skills by building projects". In the design, the color of the heading is dark blue while yours is just black. I also took a look at your code using Chrome's developer tools saw a problem with your card-title class.
.card-title { margin-bottom: var(--bs-card-title-spacer-y); color: var(--bs-card-title-color); // This variable is undefined }
This should be a simple thing to fix since you find the hsl color values in the style guide provided by Frontend Mentor and under the #Color section.
I also notice that you're using an H6 tag for your heading. While this isn't really a problem, it would be a better idea if you just use an h1 tag if you're only using one heading tag.
While it's a bit feint, if you look at the bottom of the QR code in the design, you see that it has a box shadow under it. Box shadows can be tricky but make sure the x and y values are small and the color of the shadow has a low-opacity.
Hey! Should i change anything in my code? If so, which are the best practices?
Hey @leveau10, overall you did a really great job in recreating the design in your solution. The only thing I think you're missing is the box-shadow under the QR code card. Nonetheless, good job!
Does the responsive mode incorporate the design? What aspects of the design lack what the actual design has?
Hey @Joolaoluwa, one thing I noticed about your solution is missing the color, background-color, and font-style used in the design. In the starter files provided by Frontend Mentor there should be a style guide that lists the color values and fonts used in the design. This information is in the Colors and Font sections.
Another thing I wanted to point out is how your project's set up. In your repository, you have three CSS files, usually, it's a better idea to have your CSS code in one folder for file organization. I also don't think you need to create additional CSS files and link them using HTML to do Media Queries. In your own CSS file, you can use the CSS media rule when working with media queries. Code Example:
@media screen and (min-width: 400px) { // Insert Code here. }
Other than that you did a good making the website more responsive.
What did I do wrong with the image? How can I make it look like the example?
Hey Melina, you did a really good job building the preview card. For your question, my advice would be to use the background-blend-mode CSS property. You wouldn't need to have a div for the color as you can use the property for the imagen div. If you have used the blend modes in Photoshop then you should be familiar with them in CSS. Under the CSS for your image class, you can use something like
.imagen { background-blend-mode: multiply; }
I recommend experimenting with blend mode in developer mode. If you edit the opacity of the background color then I would recommend using RGBA values like
.imagen { background-color: hsl(277deg 64% 61% / 75%); }
or
background-color: rgb(170 92 219 / 75%);
