Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Victória Nogueira Marques• 390

    @victoriamnx

    Submitted

    Hello, this is my challenge result. I changed the color of the button on purpose to make it a nicer color and effect. It's not perfect and I'm still going to make it responsive.

    Newsletter Sign Up

    2

    MrDeveloper01010• 240

    @istfredy

    Posted

    Hi Victoria 👋👋 Great job😊, but i have a proposal ;) you can notice that when we reduce the size of the screen the page becomes less pleasant for the user, to correct this, you can use:

    @media (max-width: 600px) {
/*  Styles to apply when screen width is less than 600px */
/* For example : */
div.container {
width : 90%
display : flex;
flex-direction : colum;
gap : 10px;
}

div.container div {
width : 100%
}
}

    It's just an example, it's up to you to modify it so that it's as pleasant on the tablet as on the phone.

    I hope this comment could help you.😉

    Marked as helpful

    0
  • MrDeveloper01010• 240

    @istfredy

    Posted

    Hello, That's an excellent code😀

    You can see that your image quality is not very good. To change this, I suggest you use the Flexbox Template on your card container. Look at this:

    html

    <section>
<! ---- Your div here ----> 
<figure>
   <img src="" class="desktop-img">
   <img src="" class="mobile-img">
    <div class="violet-bg-container"></div>
</figure>
</section>

    css

    section {
display:flex;
width:#Your width#;
}
figure{
width:50%;
height:100%;
position:relative;
}

figure img{
width:100%;
height:100%;
border-radius: 0 6px 6px 0;
}

/* You are supposed to put one of the two images on ````display:none;```` depending on the width of the user screen */

figure div.violet-bg-container{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background-image: none;
background-color: #Your color#;
border-radius:0 6px 6px 0;
}

    I hope this will help you. bye bye 😋

    Marked as helpful

    1
  • MrDeveloper01010• 240

    @istfredy

    Posted

    ##Hello, already it is an excellent code that I see there :) But I can notice that the result block and the summary block don't have the same width. to fix that, I think that seen your code, you have to give 100% to each of the two blocks, a bit like this:

    .result {
    width: 100%;
    justify-content: space-around;
}

    the justify-content: space-around; is for the inter-space between the different blocks.

    and moreover, the text: "Your result" and "Summary are not very well aligned." I think to fix this, given your code, you should do this:

    .summary {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 3em 3.2rem;
}

/* We give the same size to the titles */

.summary h1{
font-size: 2.4rem;
}

    I really hope this will be useful to you. I saw your source code that's why you see exact values ​​on my properties ;)

    Marked as helpful

    0