Skip to content
OverviewSolutions
7
Comments
11
Shiryumee
@Shiryu790

All comments

  • Shiryumee•210
    @Shiryu790Posted over 3 years ago

    Hola, Hay un problema con el menu hamburger, cuando apoyas en el menu hamburger que aparece a partir de 1 000 pixels, y entonces se amplía la pantalla del ordenador, aparece un espacio en blanco que no se puede borrar

    0
  • Shiryumee•210
    @Shiryu790Posted over 3 years ago

    Oh my god, I totally forgot about the shadow boxes on the design. Thank you so much for the tips.

    Hahaha, when Zeke first appeared in attack on titan, he was so impressive

    0
  • Shiryumee•210
    @Shiryu790Posted over 3 years ago

    C'est très étrange sur mon ordinateur lorsque je regarde votre design, il ne semble absolument pas responsive et se casse lorsqu'on réduit l'écran. Mais lorsque j'active la console en inspectant l'élément avec le clic droit, votre design semble fonctionner sur tous les supports. J'avais jamais vu ça. En tout cas très belle solution, bonne chance pour la suite.

    0
  • Shiryumee•210
    @Shiryu790Posted over 3 years ago

    You have 2 options for the photo colour. First one: you can use an overlay above your photo. Second one: you can choose the background-blend-mode property

    Marked as helpful
    0
  • Gonca•100
    @goncanegisSubmitted over 3 years ago

    Not sure if the main div is centered vertically on page. Any feedback is appreciated!

    Responsive 3-card layout

    2
    Shiryumee•210
    @Shiryu790Posted over 3 years ago

    I saw it on my Phone and my computer. It's responsive and the layout corresponds to the requested design

    1
  • Dardian•60
    @TheTryfechtaSubmitted over 3 years ago

    Hello everyone!

    Question: For the stats (likes, photos, followers): I used padding to make the container bigger and to center the text at the same time, but the div does not fit the card exactly. My question is, how would one go about making the stats div take up all the space left in the card?

    Card page using HTML and CSS

    3
    Shiryumee•210
    @Shiryu790Posted over 3 years ago

    It's perfectly responsive. But why did you forget the two SVG Which should have been your background images ?

    1
  • Shiryumee•210
    @Shiryu790Posted over 3 years ago

    To me it doesn't look bad. But in the media queries for responsive, you should set a breakpoint at 950 pixels, because your design is not responsive until it reaches 720 pixels and a scrollbar appears at the screen width. Then you should add margin to the first card and the top of the screen and the third card and the bottom of the screen. And finally, you forgot the little animation when the button is hovered over so that it changes background colour. But it's quite encouraging, good luck for the next challenges, I hope I helped you

    0
  • Shiryumee•210
    @Shiryu790Posted over 3 years ago

    I can't really help you, beacause I'm French and saw some videos in French. But you can follow Kevin Powell tutorial about medias queries on YouTube

    0
  • Shiryumee•210
    @Shiryu790Posted over 3 years ago

    Hi, your design looks perfect. But there is a little problem with the responsive. If you shrink your screen between 958 pixels and 949 pixels, you will see that the orange section is not the same size as the other sections unfortunately. But overall it's very good. Good luck with the rest

    0
  • Shiryumee•210
    @Shiryu790Posted over 3 years ago

    Hello, the design respects the instructions concerning the size of the cards and their layout in flexbox.

    But there are several problems, your design is not adapted to all supports, if you reduce the size of your browser, you will see that your design does not correspond to the size of the screen. So you should start by using media queries to adapt your code to different screen sizes. Then you should create a generic class for the three buttons, such as
    <a class="button but3" href="">Learn More</a>, <a class=" button but2" href="">Learn More</a> and <a class=" button but1" href="">Learn More</a>. And from this point on, you start coding in CSS in this generic class several general attributes of the buttons, it will save you from repeating yourself every time you want to style the three buttons.

    For example, if you write in CSS .button { -webkit-border-radius: 59px; -moz-border-radius: 59px; border-radius: 59px; height: 20px; line-height: 20px; font-family: Arial; width: 118px; font-size: 15px; font-weight: 200; padding: 12px; background-color: #FFFFFF; border: solid #FFFFFF 0; text-decoration: none; display: inline-block; cursor: pointer; text-align: center; position: relative; left:40px; top: 70px; } this will apply to all three buttons and you won't have to rewrite the code several times. And then you add the specific colour of each button in the second class created like this. .but1 { color: #E38826; } .but2 { color: #006970; } .but3 { color: #004241 }

    I hope this has helped you, good luck for the rest

    1
  • Efosa•5
    @EfonoviaSubmitted over 3 years ago

    Works only for desktop, tried my best to make it work for mobile but I couldn't. Any feedback on how I could have done that or any feedback and or tip on what I could have done better will be very much appreciated. Thanks :)

    Preview card using html and css grid

    1
    Shiryumee•210
    @Shiryu790Posted over 3 years ago

    I'm sorry, I can't help you, your site doesn't even display. Try hosting perhaps on Vercel, it's easier to handle. Good luck with the rest

    0