Latest comments
- @jesuisbienbien@Hersonmei
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; }
Marked as helpful - @jurektomasello@Hersonmei
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.
- @caio-alcantara@Hersonmei
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!
- @rayalva407@Hersonmei
Hi @rayalva407!
- Try adding this border and this border-radius in your code to see if it works:
#pfp { width: 12%; padding-top: 5px; float: left; border: solid 1px hsl(0, 0%, 100%); border-radius: 50%; }
- Instead of using so many id, use classes, because the id you can only use once and the classes you can repeat in different elements.
Good studies and keep doing new projects!
- @abdellahelaajjouri@Hersonmei
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!
Marked as helpful - @IEdiong@Hersonmei
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.