Dessidy
@DessidyAll comments
- @AkinflexSubmitted about 1 year ago@DessidyPosted about 1 year ago
Hello ๐๐๐
Just got a few things to say on your code.
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}
This Will perfectly center your code just like it is on the challenge. Its more advisable than
margin:0 auto
And every website must have at least 1
h1
tagThat's all I have to say
Nice code though ๐
0 - @Leroy-samaSubmitted over 1 year ago@DessidyPosted over 1 year ago
Hey ๐๐๐
I noticed your image doesn't have the purple background in it so I thought I would help out
.img_container { position: relative; (This is very important!) }
`.img_container::before { content: ""; position: absolute; inset: 0;
background: var(--clr-Soft-violet); opacity: .8; mix-blend-mode: multiply; (This is just to make it blend better) } `
Oh and also I noticed that you don't have <h1> tag, which is not so good practice. <h1> tags are very important to web pages.
That's all though. Hope this helps ๐ฆ
Marked as helpful0 - @raf0411Submitted over 1 year ago
I struggle at positioning the background pattern. Also, I'm not really sure about the sizing for each elements.
@DessidyPosted over 1 year agobackground-image: url(bg-pattern-top.svg), url(bg-pattern-bottom.svg); background-repeat: no-repeat; background-position: right 52vw bottom 35vh, left 48vw top 52vh;``` This is for the back ground positioning in the body Hope this helps ๐
1 - @KingofprundSubmitted over 1 year ago@DessidyPosted over 1 year ago
Try reducing the opacity of the cyan color. The image would be more visible also the eye icon, in general it will just blend things more
0 - @linericoSubmitted over 1 year ago@DessidyPosted over 1 year ago
Hello ๐๐
I think you should increase your media query break point to let it display properly on mobile devices as the design suggest.
@media (min-width: 600px)
Also starting with a mobile first approach is a good practice.
Hope you found this helpful ๐
Marked as helpful0 - @Sojo506Submitted over 1 year ago@DessidyPosted over 1 year ago
This is concerning your
<h2>
tag.A Website needs at least one
<h1>
so I think it's best if you use the<h1>
tag then size it perfectly usingfont-size: ;
Hope this was of help ๐
0 - @Slaks97Submitted over 1 year ago
I really struggled with the mobile version.
-
Which properties do I need to use to make the hero-img fit inside its parent? It would either spill over the parent div, or not fully stretch horizontally/vertically, and all sorts of mishaps. I found a way to make it work but I'm sure there is a 'cleaner' way!
-
I used the properties border-top-left-radius: 10px; and border-bottom-left-radius: 10px; to match the original design. I think I cheated my way around it! Should I have structured my HTML differently so that the hero-img automatically inherit the border-radius property of its parent?
Thanks!
@DessidyPosted over 1 year agoIn your .container class use:
overflow: hidden;
This will.make any overflowing content to be hidden, that's it basically, you can refer to my solution if it you think it will be of any help though.Hope this helps๐
0 -
- @KingLC01Submitted over 1 year ago@DessidyPosted over 1 year ago
Try this, I think it will help center your QR-Card better:
Instead of making your
margin: 50%
it would be better asmargin: 5rem auto
top and bottom-5rem(it can be an figure you want though but his is just my advice), left and right-autoMarked as helpful0