Hello everyone,
This is my first attempt. Suggestions for improvements will be highly appreciated. And yes I want guidance with media queries. I struggled a lot while making it responsive.
Thanks and looking forward to your feedback.
Regards, Hira Mustafa
Hi Hira, good job for your first challenge !
To improve, you can remove the height from .product-card
the padding inside .product-card-rightdid the gob for it.
also remove height from media queries too.
and maybe to make font-size more smaller on mobile, but it right to your taste =)
Hope it help and keep going coding !
Any feedback is welcome, I couldn't get the rating buttons content to fit inside the buttons container so I let them out on the right side, I will update them as soon i get a solution.
Also i'm unsure about having two different pages of the application in the same HTML file, instead of storing them in different files. What's the best practice?
@Kevin27j
Good job for that challenge !
one of quick fix, maybe not perfect one but it will work and put rating inside button.
you can put it all inside label and then wrap the "1" inside span
<label for="btn-1" class="rating-value">
<input type="radio" name="rating" id="btn-1" class="rating-btn" value="1" placeholder="1">
<span>1</span>
</label>
add some CSS to label and span and it will be in the center.
.rating-value{
position: relative;
}
.rating-value span{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
of course you can change color and add some animation... for now on click the number will be not seen because the same color , but you can change it, you will figure out how to do this =)
about second question, I don't see something wrong with that. I think when you will go with frameworks you will learn new ways how to do that, for now I think it's fine.
hope it will help.
I will be glad to any feedback!
Hi Purbo,
The project looks good !
I didn't understand why you put all in header tag but all looks good and responsive,
I think you can separate it in header , main and 'footer' create link on your portfolio, but it's up to you.
Great work !
It was difficult to make the adaptation.
Congrats on your first project !
to make image more flexible you can set img width to max-width: 100%
.wrapper-img__qr {
max-width: 100%;
}
Any feedback or recommendations would be greatly appreciated. Thanks :)
Hi Ahmed,
nice work on that challenge. I notice there is horizontally scrollbar on desktop, you can get rid of it by giving
body{
overflow-x: hidden;;
}
or
id='intro'{
width:100vw; // remove it
}
main div#intro img.desktop{
width: 49vw; // 49 instead of 50
}
but then it can make other serious problem on mobile device. need to check more deeply what cause of that inside main tag. only there some issues with width
another advice, I think it will be good idea to put logo images inside a link, for example
<a href="index.html" id="logo" ><img src="./images/logo.svg" alt="Company's Logo" ></a>
at header and footer, its help users to navigate back to the page if there is need.
at footer you can make list instead of paragraphs like that:
<ul class="footerMenu">
<li class="menuTitle">Product</li>
<li class="menuItem"><a href="#">Overview</a></li>
<li class="menuItem"><a href="#">Pricing</a></li>
<li class="menuItem"><a href="#">Marketplace</a></li>
<li class="menuItem"><a href="#">Features</a></li>
<li class="menuItem"><a href="#">Integrations</a></li>
</ul>
it's just suggestion, your work looking really great
I found it difficult applying the object-fit property... I hope i did it well, waiting for feedbacks, thank u in advance
Hi @VKampos2, It's looks good, you can put the card in a middle of a page using flex-box, for example:
.conteiner{
display: flex;
align-items: center;
justify-content: center;
height: 80vh;
}
And I think it's a good idea to make card's height to min-height or no height at all, for best practice if you will need to add some more text to the card.
Any Feedback is really appreciated. Also how can i make the image color ?
Hi @Prajwol-Shrestha, you can try to use filter for your image tag
filter: invert(10%) sepia(80%) saturate(400%) hue-rotate(250deg) brightness(100%) contrast(100%); - it's not perfect but you can play whit it to get perfect result.
or you make background image to imgContainer and add css background-blend-mode: multiply.
hope it will help
This is my first site, I would like to have your opinion I am a total beginner
Hi Alex! I think for beginner you did a very nice job. the webpage responsive, only need to make some cosmetic with positions. It's look great on mobile. More practices and I would like to see more of your future works, well done !
Can anyone suggest a better way to add the background images?
Hi, good job on that challenge.
try to put image on css body as background-image: url('images/bg-pattern-top.svg');
and make it background-position: bottom right; and top left
try tutorial for: w3schools background-image w3schools background-position
hope this will help you
Can I get feedback on how to get rid of the side scrolling? I'd really appreciate it.
Hello Wendiie-O,
nice job for your first project
You can change the min-height: 100vh; to other value, or disable flex and put the <div class="attribution"> inside the main tag, but then you need to make some changes to your style.
I could not make good "curve" of the desktop version. If anyone can teach me, I'm appreciated.
Hi Ayaka, I found easiest solution for me, create new div only for curve img, between your PRIMARY SECTION and SECONDARY SECTION.
I thinks it can be done with z-index, but I didn't sucseed whit it...
or you can put the img at the bottom of PRIMARY SECTION, I think it can do the work to.
I home it's will help, you did great job !
Finally finished this, had to learn flexbox to be able to complete it. Appreciate comments/suggestions.
Great job ! At mobile version I thinks the header paragraph close to sides edge of screen, need some padding left and right =)
