@lndbgaa
MordenWebDev
@MordenWebDevAll comments
- @MordenWebDev
there is a property call box shadow. with that you will be able to bring shadow to your design.
yourcard { box-shadow: 5px 10px rgba(255,255,255,.1); }i hope this might helped you
Marked as helpful - @RenanGuapyassu@MordenWebDev
you are specifying height for the grid so it will not be able to grow according to the content. if you remove the height from grid class it will fix the issue . remove height form grid class in media query also it will fix the issue for mobile. it will be responsive.
- @ajc98@MordenWebDev
use html for structure CSS for styling js for functionality
don't use inline CSS it is not best practice. there are many things need to be changed..
- @Itsmoe16@MordenWebDev
button should have some padding so that it have space around the text. And in super charge workflow section the one image is missing from the center div . font size is big for paragraph. there should be some spacing between image and content. over all nice job.
Marked as helpful - @mahnoork18@MordenWebDev
media query need to be adjusted because you are not using device screen space properly. even in the 1366px it goes to mobile design.
- @deborapaiva@MordenWebDev
nice job, hover state are missing. if it is there it will be nice.
- @jsmeyring@MordenWebDev
image will show in live server but when u access the site without the live server the image will not load. to fix this issue remove "/" from the starting of image source. your code: <img src="/images/illustration-hero.svg" alt="Music Hero">
use this where "/" is not in starting of source.
<img src="images/illustration-hero.svg" alt="Music Hero">Marked as helpful - @trillionclues@MordenWebDev
footer section need some improvement. and the links in the footer as so left. Sticking to the edge.
- @Abdul400@MordenWebDev
why us section is not para it is a list. you can make it similar to design by making it as list. nice job on overall design.
Marked as helpful - @Jorahhh@MordenWebDev
nice job. you can see that the 3day left is taking new line. you can fix this by removing ul in the sub2 and making it as display flex. this code will help you to align items.
ie) in html
<div class="sub2"> <div class=""><img src="images/icon-ethereum.svg" alt="">0.041 ETH</div> <div class=""><img src="images/icon-clock.svg" alt="">3 days left </div> </div> css style:.sub2{ display: flex; justify-content: space-between; align-items: center;
}
it will be aligned in one line and you can give some margin for the image. so the is little space between image and text.
Marked as helpful - @MordenWebDev@MordenWebDev
@skyv26 can you suggest best recourses for grid for learn . I am having some doubt
- @mwororokevin@MordenWebDev
id must be unique, don't use same id for multiple element. it is not best practice use class instead of id.
- @Helmer135@MordenWebDev
you can make them both to appear by using this
.topimg:hover .mask, .topimg:hover .viewicon { opacity: 1; }
and reduce the mask color opacity so the background image will be visible don't forget to adjust the height of mask;
Marked as helpful - @Unomars4@MordenWebDev
nice job, you can see the background gets repeated you can fix the repeated background by using background-repeat: no-repeat; so that the background does not repeat
- @boredcodebyk@MordenWebDev
nicely done, hover state is missing from the design. if you add it will be nice.
- @W0LvErine93@MordenWebDev
you just uploaded the image . I think you should build this component using html and css. not just uploading image in html.
- @Adezayn@MordenWebDev
in differnent screen size each div Hight is varying to fix that issue remove the align-items form main. so the divs will be in same height and it will work.
Marked as helpful - @Njabz-1@MordenWebDev
you can fix the image by removing removing "/" from the image source.
ie) <img src="images/image-header-desktop.jpg">
Marked as helpful
