I have a few questions:
2 - To center your main on the page, you can apply the flex display in the body.
Your body will look like this:
body {
font-family: "Lexend Deca", sans-serif;
font-size: 1rem;
background-color: var(--very-light-gray);
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
justify-content: center;
}
Hi all, I would like to know if there's anything that can be improved (code readability, better practices, etc.).
Also, I was wondering if there's a way to make the picture "fold" when shrinking the window width, so that the text on the left doesn't touch the image when you're under a certain width. Basically, the image should stop moving to the left and star going like "under" the div on the left, disappearing below it. It's hard to put it into words, so I hope I was clear enough. I tried to look up a solution, but I haven't found anything. There should be a way to do it by making the picture a background image, but I was wondering if there's a way to do it by leaving it as it is.
Thank you in advance for any help or tips!
Hi Jurek!
See how is the responsiveness of my solution, see if this is what you want to do:
https://hersonmei.github.io/Base-Apparel-coming-soon-page/
If so, I can see how to help you, but I remember that it took me a while to solve this too.
This was the first project I did using the "mobile-first" approach, and I actually think it helped a lot for responsivity. However I had a problem when trying to do the active state (hover) on the links. Basically, I set the link's colors to the same color as the background. I thought the right way of doing it would to set the text color to 'transparent' but that didn't work out. Anyway, the solution I found worked out great until I had to do the hover state. I couldn't manage to get the link's background-color to be transparent, and the text color to be white (not managing to change the text color to white is the big issue here, I think). Can anyone help me with that?
Hi Caio!
Test it out and see if it works.
Add this color to your hover:
.card a:hover {
background-color: transparent;
-webkit-transition-duration: .1s;
transition-duration: .1s;
color: hsla(0, 0%, 100%, 0.75);
}
I think it's a question of specificity, it would be good to see that because I won't be able to explain it very well. But I managed to solve it by deleting all its id and transforming it into classes.
In your HTML code it will look like this:
<div class="card sedans" >
...
</div>
<div class="card suvs">
...
</div>
And in your CSS code it will look like this:
.sedans {
...
}
.sedans a {
...
}
.suvs {
...
}
.suvs a {
...
}
.luxury {
...
}
.luxury a {
...
}
Only with these changes has it started to work here. I recommend trying to find out the more detailed explanation of this, but I believe it could be greater ID specificity.
Good studies and keep sending new projects!
Hello everyone this is my attempt at this challenge! A question I have is how do I get a round border around the creator's profile picture? I tried so hard but I would only get a squared border even using border-radius I was not able to solve this. Please leave any feedback for me.
Hi @rayalva407!
#pfp {
width: 12%;
padding-top: 5px;
float: left;
border: solid 1px hsl(0, 0%, 100%);
border-radius: 50%;
}
Good studies and keep doing new projects!
Hi @everyone, what is the best way to create the desktop layout? Let me know thanks Guys.
Hi @abdellahelaajjouri,
If you still don't know it, I recommend that you study the CSS Grid, it will help a lot in those exercises that need to work with rows and columns at the same time.
The ideal is also that you don't use too many IDs, you could put a1,a2.. as classes.
I made some changes to your file if you want to simulate it to see how it would look closer to resolution:
1 - I delete the div <div class="main-article"> , with that all the items were inside the main.
2 - I changed all ids a1, a2.. to classes i your HTML file.
3 - I changed the ids in your css file to class (from # to .).
.a1{
border-top: 4px solid var(--Cyan);
}
...
4 - I didn't understand why you put two media queries, so I left only the first one with the code below:
/* For desktop: */ header h4 , header h2 { font-size: 5vh; } main { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto repeat(2, 1fr); justify-items: center; } header{ grid-column: 1 / 4; grid-row: 1; } .to 1{ grid-column: 1; grid-row: 2 / 4; align-self: center; } .a2{ grid-column: 2; grid-row: 2; } .a3{ grid-column: 2; grid-row: 3; } .a4{ grid-column: 3; grid-row: 2 / 4; align-self: center; } }
Not that this is the final answer, but it's a little closer to ideal, I'm studying CSS Grid more and it has helped me a lot, I hope it helps you too!
Good studies and keep sending new projects!
Hello Frontender 🌟😎, I used this particular challenge to teach someone how to go about using this platform to practice frontend development.
What do you think about the hover state of the Sign Up call-to-action on desktop? You can suggest any nice animation for the hover state.
Shalom!!
Hi @IEdiong!
Nice! I liked the hover effect.
Glad to know that (per month) you used opacity, I thought it was a specific color and I couldn't replicate it in my project.
Just revised the grid layout
Hi @Jerryl-597 !
There are some interesting projects in the Newbie category that you can train using CSS Grid. I think it would be better before you apply to Junior projects.
Hi!
You put in your code as your images were inside a folder called images that I marked below -- --.
<img src=".--/images/--image-equilibrium.jpg" alt="">However, within your github code there is no such folder images, so they are not showing up on your site.
You can create this folder with the same name and put all the images inside.
Hi, this is my solution to the challenge. I struggled a bit with the hover part as it kept on bleeding. Also the image that is supposed to show show up when you hover over it wouldn't show up properly on some screens.
Another issue that I couldn't properly fix without "hacking" was the "time-left" element. It wouldn't stay to the right without breaking other parts of the design.
I appreciate your feedback in advance :)
Hi!
You can put the remaining time in the correct position as follows:
.nft-metrics .time-metrics { margin: 0 0 0 automatic; justify-content: flex-end; }
Try to enforce the working of the flex-box, whenever you set the flex display on the parent, to affect the working of the children. So, you've already defined the flex display here:
.nft-metrics .price-metrics, .nft-metrics .time-metrics { display: flex; align-items: center; width: 100%; }
But as you are working both with price and time, here you cannot work only with the positioning of the children within time. So, you'll only need to go to (.nft-metrics .time-metrics ) to be able to work specifically with time items.
I hope I managed to make it a little clear, but it has helped me a lot to find the father, see the children I want to change and also see the available space I have to make the changes in the children's position. Using Devtools has helped me a lot with this.
Good work and keep on studying and creating more projects! ;)
Would appreciate any constructive criticism and ways to improve.
Your projects are pretty good and your code too.
I'll always get some improvement tips around here.
Good job!
This is my second finished challange. It was quite hard to complete but i did it. Any feedback greatly appreciated. One note though - i couldn't find the "Change" text color in style-guide.md that matched the color on the preview image so i slightly reduced the saturation on "Bright blue" color.
Hi @FancyBaguette, good work!
Your font is working here, if you click on the Preview Site you will see. Did you change the font after posting your code here?
You could put the wavy background image on your body, put no repeat and background-size: 100% 40%;
You can also put media queries in your project to be mobile responsive. Try this exercise.
I feel it wasn't 100% the same, but I'm glad I finished my first challenge on Front-end Mentor. Feedbacks will be appreciated.
Hi @renatoknot,
You could have used background-repeat: no-repeat. With that, your wavy background image wouldn't repeat.
With that, you put the background-color: #E0E8FF, to match the designer's background color.
Nice work, keep studying!
