Skip to content
OverviewSolutions
9
Comments
13
Shomy032
@Shomy032

All comments

  • Shomy032•270
    @Shomy032

    Your card element (class = card ) , is not centered vertically on my screen , i am on my laptop with resolution 1600 x 900 px , you can wrap your .card and .attribution classes in one div and center it .

    Anyway great work , and keep up coding :)

  • Shomy032•270
    @Shomy032

    1 . Your cards are not centered vertically on desktop view , solution : use flexbox or grid insted of float , that way you can do it easily , ( Floats work really well in small cases like when there's an element, such as a button, that you'd like to move to the right of a paragraph. But the real issue arises when you start using floats to lay out entire web pages. And the reason for that is: floats are not meant for layouts , instead use flexbox or grid)

    2 . Maybe you can add property ' transition ' on your buttons , so when you hover them color change smoothly ( for example : transition : all 300ms linear ; ),

    1. you can add tagret="_blank" , on your link to github , so its open on new page.

    helpful links for research :

    Flexbox

    Grid

    Transition

    Target blank

    Anyway great work , if you have any more questions feel free to ask , and keep up coding :)

  • Shomy032•270
    @Shomy032

    I am on my laptop , and your box is not centered , its at bottom of my page. Its because you set a min height of that element , and i can scroll page way to much .

    maybe add overflow hidden to body and remove min height from .element class , and it should work.

    Anyway great work , and keep up coding.

  • Shomy032•270
    @Shomy032

    I think this should work

    .container{
position : relative;  
width : 500px ; // for example
height : 500px ; // for example
}
.container img{
width : 100% ;
object-fit : cover ;
}
.container button{
position : absolute ;  // relative to container , this will remove it from flow
bottom : 0 ;
left 100px ;
transform: translateY(-50%); // this will push it down for half of their height
}

    Anyway great work , and keep up coding :)

  • Shomy032•270
    @Shomy032

    Very cool , i am looking forward to build it myself. What was the hardest part for you?

  • Shomy032•270
    @Shomy032

    When i click "more" button scroll bar appear top left of screen , everything else works just fine. Good job :)

  • Shomy032•270
    @Shomy032

    You can make your black text little bit brighter , maybe set lower opacity or change color . Overall great work , i think its fully responsive , keep you coding :)

  • Shomy032•270
    @Shomy032

    Great work dude , ill suggest you 2 things , fix your padding in footer (bottom of page) , and add transition to all your elements that have hoover state , for example 300ms , then it will work much smoother.

    Happy coding :)

  • Shomy032•270
    @Shomy032

    I you want it to be perfect , you can add media queries for i-pad , go to firefox dev tools and press ctrl + shift + m and select i - pad , but its not that big off a deal.

    Overall great work dude :)

  • Shomy032•270
    @Shomy032

    Good job mate , i have one suggestion for you to improve your project , and that is to add transition of 300-400 ms to your buttons , then the hover effect will be so much smoother.

    Everything else is great , its completely mobile responsive , its work on i-pad too . Maybe add some animation when the page loads , if you want to practice css even further.

    Overall great work , and keep up coding :)

  • Shomy032•270
    @Shomy032

    I cant preview your site , your link isnt working for me.

  • Shomy032•270
    @Shomy032

    it works fine but only on screen wider the 1500px , challenge is on 1440 px , i guess its to late now (how use 1440 px screen anyways :) ), just demo it and you will see.

  • Shomy032•270
    @Shomy032

    Oh I just realized that i forgot to positon back-groud-img op purple card on tablet(900 x 600) , and my border radius i smaller then it shoult be , and grid gap is also smaller . But i guess now is to late :)