Skip to content
OverviewSolutions
13
Comments
5
Atharva Shandilya
@Atharva-Shandilya

All comments

  • Atharva Shandilya•160
    @Atharva-ShandilyaPosted over 3 years ago

    If you would like me to teach you basics of html and css, I am happy to do so.

    0
  • Faris P•2,810
    @FarisPalayiSubmitted over 3 years ago

    I thought I could finish this in a few hours, so I thought then why not make it IE10 and IE11 compatible and why not not use flexbox and grid. I know it's kinda stupid. But, that's what I did. But it took me more than a day to complete it. So um... there's that. And oh Now I know that I need to be more grateful to flexbox and other modern css thingies. Gosh, without them things would be so damn hard. You have no idea how many hours I spent thinking about how to make the card both horizontally and vertically centered. No joke. However, I learned a lot in the process that I'm glad about. Like:

    • How to use tabindex to make unfocusable elements focusable.
    • The slightly disappointing fact that you can't use ::pseudo classes (::before and ::after etc.) on elements like <img>, <br> and <hr>
    • The astounding discovery that there is in fact a background-position property in css. Thanks @Atharva-Shandilya for that. Hope it's okay that I snooped around your Github repo and profile without permission.
    • Reminding that I can use multiple box-shadows by separating them by commas.
    • And finally I learned How the top:50% left:50% transform: translate(-50%, -50%) trick works.

    I don't have a specific question to ask but, any feedback on the project or code would be greatly appreciated 😊.

    And yeah there are some animations too!

    NO flexbox NO CSS Grid, And Compatible with IE10 and IE11.

    3
    Atharva Shandilya•160
    @Atharva-ShandilyaPosted over 3 years ago

    I too discovered it from snooping around in someone else code :D

    1
  • Alex•310
    @AlexGandertonSubmitted almost 4 years ago

    I couldn't quite figure out how to get the little triangle on the bottom of the storage left area. My guess would be to use an svg of sorts but I'm not quite sure. If anyone has a way of doing it, any feedback will be greatly appreciated!

    One small problem.

    2
    Atharva Shandilya•160
    @Atharva-ShandilyaPosted almost 4 years ago

    You can create a triangle purely using css. I think you can use something like this.

    width: 0px;

    height: 0px;

    border-left: 100px solid transparent;

    border-right: 100px solid transparent;

    border-bottom: 150px solid white;

    You can adjust the size of the triangle by changing the border-width.

    0
  • Atharva Shandilya•160
    @Atharva-ShandilyaPosted almost 4 years ago

    Increase the font size for heading elements. You haven't applied the specified font colors. You can see a white line just above 'Stay productive wherever you are'. Excluding these, I think its almost perfect.

    0
  • Atharva Shandilya•160
    @Atharva-ShandilyaPosted almost 4 years ago

    Here are some suggestions, hope you like it : -

    1. Use 'margin: 145px 0px;' to vertically center your .page on your viewport.
    2. Avoid using position relative to position your elements. Instead use absolute for positioning. It will be easy for you to make your webpage responsive later.
    3. Reduce the size of card-bg-img.
    4. You didn't use the specified font colors in your build, So i would suggest you use that to make it look clean.
    5. You specified 'overflow: hidden;' but it seems that it is not working. So look into it.
    6. Use 'outline: none;' to hide the outline around the arrow button, when you click it.
    1