Skip to content
OverviewSolutions
58
Comments
25
Victoria Azola Silva
@VickyAzola

All comments

  • Victoria Azola Silva•1,290
    @VickyAzola

    Hi there! Good work on completing this challenge! I checked your solution and noticed that when the window is large, the content escapes the card.

    To fix this you can create a container div with a background image of the card and place the content of the card inside. Something like this:

      <div class="card-container">
    <div class="card-back">
      <p id="cardCVC" class="absolute right-16 text-white"> OOO </p>  
    </div>
    <div class="card-front">
      <div class="absolute top-5 left-8 bg-white h-[29%] w-[15%] rounded-full text-transparent">sss</div>
      <div class="absolute top-[41px] left-28 bg-transparent h-[10%] w-[5%] rounded-full border-2 text-transparent">sss</div>
      <p id="cardNum" class="absolute bottom-14 left-6 text-[2.4cqw] max-sm:text-xl text-white"> OOOO OOOO OOOO 0000 </p>
      <p id="cardName" class="absolute bottom-5 left-8 text-[1cqw] text-white max-sm:text-sm"> JANE APLESSED </p>
      <p class="absolute bottom-5 right-16 text-[1cqw] text-white max-sm:text-sm"> <span id="month">00</span>/<span id="year">00</span> </p>
    </div>
  </div>

    I added this line for the CVC since i didn't notice it in your code

    <p id="cardCVC" class="absolute right-16 text-white"> OOO </p>

    and add the style to the css

    .card-container {
  position: relative;
  min-height: 100vh;
}

.card-front {
  background-image: url('bg-card-front.png');
  width: 28rem;
  height: 15.2rem;
  border-radius: .6rem;
  position: absolute;
  left: 10rem;
  top: 10rem
} 

.card-back {
  background-image: url('bg-card-back.png');
  width: 28rem;
  height: 15.2rem;
  border-radius: .6rem;
  position: absolute;
  left: 18rem;
  top: 28rem;
}

    You would need to adjust the width, height, and position for responsiveness, but this way your content will stay inside the card no matter the size of the window.

    Hope this help!

  • Lyle Patterson•60
    @Squing0
    What are you most proud of, and what would you do differently next time?

    In general, getting more used to tailwind and I'd definitely try to be more aware of the mobile design here before attempting the desktop design.

    What challenges did you encounter, and how did you overcome them?

    The image here was the main problem both for the desktop and mobile design but by placing the image using absolute positing in the mobile design, I was able to allow it to scale down properly in comparison to using it's full width.

    What specific areas of your project would you like help with?

    Mainly getting the border lines to work for the table as these while these are definitely applied styles, they aren't visible and also having space between list numbers and list items.

    Recipe page using flexbox and tailwind css.

    #tailwind-css
    1
    Victoria Azola Silva•1,290
    @VickyAzola

    Hi there! 👋 Awesome job completing this challenge!.

    So for the <table>, the class border-separate is not allowing the border to show; if you remove it and add a py to the <th>, the space effect is still achieved.

    <table class="w-full text-left ml-5">
   <tr class="border-b">
      <th class="font-normal py-2">Calories</th>
      <td class="text-nutmeg font-bold">277kcal</d>
   </tr>
.......
</table>

    And for the list, I don't know if there is a better way, but this is how I did it: I removed the list-inside since the design shows it is outside, added a px-4 and a marker:font-bold for the numbers. And to move the text further away from the number, I added a <span> inside the <li> with the classes relative and left-2. I also removed the <br> since those aren't necessary.

    <ol class="list-decimal space-y-2 px-4 marker:font-bold">
   <li>
     <span class="relative left-2">
       <b>Beat the eggs:</b> In a bowl, beat the eggs with a pinch of salt and pepper
 until they are well mixed. You can add a tablespoon of water or milk for a fluffier texture.
     </span>
  </li>
.......

    Another thing is that in the design, the text color should be 'darkCharcoal'.

    Hope this Helps!

    Marked as helpful
  • Victoria Azola Silva•1,290
    @VickyAzola

    Hi there! 👋 Awesome job completing this challenge.

    So, <button> and <a> are not meant to be together since they have different purposes:

    • button should be used when you want something to take action on the same page.
    • a is used when you have links that take you away from the page.

    In this case the more semantically appropriate tag is <a>

    <main>
.....
      <a href="">GitHub</a>
      <a href="">Frontend Mentor</a>
      <a href="">LinkedIn</a>
      <a href="">Twitter</a>
      <a href="">Instagram</a>
</main>

    Take the style on the button and add it to the a:

    a {
    text-decoration: none;
    color: hsl(0, 0%, 100%);
    background-color: hsl(0, 0%, 20%);
    width: 230px;
    height: 30px;
    margin: 5px;
    border-radius: 5px;
}

a:hover{
    color: hsl(0, 0%, 8%);
   background-color: hsl(75, 94%, 57%);
}

    Hope this helps!

  • Humberto Barreto•10
    @Berto8714
    What are you most proud of, and what would you do differently next time?

    I really enjoyed learning more how to use CSS and HTML, it's satisfying to see progress happening and I would have started this task sooner if I knew it would be easy.

    What challenges did you encounter, and how did you overcome them?

    I really didn't know how to create tables in CSS, I had to research and watch videos to just discover that you just need to use two different tags, programming is complicated.

    What specific areas of your project would you like help with?

    I would like to know how to better organize yourself in terms of margins and positioning of elements and I would also like to know why my image is not loading

    Page of an omelette recipe using HTML5 AND CSS3.

    1
    Victoria Azola Silva•1,290
    @VickyAzola

    Hi there! 👋 Awesome job completing this challenge.

    So looking at your github repository, it looks like you didn't upload the image file; that's why it doesn't appear on the page.  For it to show, you need the folder assets and the folder images since that is the way you declare it on the src:

     <img src="assets/images/image-omelette.jpeg" alt="Omelette on a plate">

    Also, adding an alt attribute is important for accessibility, and in cases like this when the image doesn't load properly.

    Hope this helps!

    Marked as helpful
  • BobFisherman18•50
    @BobFisherman18
    What are you most proud of, and what would you do differently next time?

    I am starting to understand on how to use the web development tools in Google Chrome and Firefox. Learning and understanding the box model in CSS is a fundamental tool to designing websites.

    What challenges did you encounter, and how did you overcome them?

    One challenge is that I overcame is adjusting the proper width and height when it comes to mobile and desktop environments.

    What specific areas of your project would you like help with?

    Specific areas I would like to work with is that I need to figure out how to implement the font family in CSS. Another thing is I need to adjust the colors of the words.

    Recipe Page using CSS Border-box

    1
    Victoria Azola Silva•1,290
    @VickyAzola

    Hi there!

    So, there are two ways to get the font: import it into your CSS or your HTML, and then apply it to the body or the necessary classes.

    • First, go to style-guide.md and copy the font link on Google.
    • Then, on the top right, click on the blue button get font
    • Click the button get embed code
    • On the left, you can see the selected fonts and the weights they have, you can change that and select the ones you want, or leave it like it is and get all the weights.
    • On the right, select web, and there will appear two options: "<link>" (you can copy this and paste it on your head HTML) and "@import" (this goes on the top of your CSS). Choose whichever you want, and then copy the text and paste it on your CSS body or classes that require the font.

    Here is an example:

    With <link>: In the <head> of your HTML:

    <head>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Young+Serif&display=swap" rel="stylesheet">
</head>

    In the CSS (the selected elements are just an example): 

    h1 { 
    font-family: "Outfit", sans-serif;
}
p { 
    font-family: "Young Serif", serif;
}

    With @import: In your CSS:

    @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Young+Serif&display=swap');

h1 { 
    font-family: "Outfit", sans-serif;
}
p { 
    font-family: "Young Serif", serif;
}
  • M•40
    @mkalmetieva
    What challenges did you encounter, and how did you overcome them?

    I didn't know how to choose an image based on media size. Now I now that picture tag can handle it.

    What specific areas of your project would you like help with?
    1. I am not sure whether I configured element resizing based on media size properly
    2. Cart icon doesn't look aligned vertically despite all my attempts

    Product Preview Card with many Flexboxes

    1
    Victoria Azola Silva•1,290
    @VickyAzola

    Hi there! 👋 Awesome job completing this challenge. 

    The media query seems fine to me. The only thing that seems different compared to the design is the price on mobile; there, the flex-direction: column; is not necessary: 

    @media screen and (max-width: 768px) {
.....
  .price-block {
    gap: 0.5rem;
    margin: 1rem 0;   ---> added to separate from the text and button
  }
}

    And for the button, you can achieve the alignment by giving it a display of flex and deleting the class on the image. Here is an example:

    button {
---- added -----
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: .8rem;
-----
  width: 100%;
  padding: 1rem;
  font: inherit;
  font-weight: 600;
  color: var(--white);
  background-color: var(--dark-cyan);
  cursor: pointer;
  border: none;
  border-radius: 0.5rem;
}

--- Delete this one ----
.icon-cart {
  width: 0.75rem;
  vertical-align: middle; /* Aligns strangely, not in the middle */
  margin-right: 0.5rem;
}

    Hope this helps!

  • Mark Matlock•20
    @techmatlock
    What are you most proud of, and what would you do differently next time?

    I'm most proud of making it responsive to different screen sizes since it's my first time using media queries and maintaining consistent CSS class names.

    What challenges did you encounter, and how did you overcome them?

    I encountered a problem where I can't remove the last divider line in the nutrition table I created using CSS grid. The part after the fat nutrition facts at the bottom. And I also couldn't get my ordered list numbers to be the same font as the solution.

    What specific areas of your project would you like help with?

    Removing the last divider line after the fat nutrition facts. Also I changed the font-family for the ordered list in the instructions and used the two fonts that were in the style guide but my numbers still don't look like the numbers in the solution url.

    Other than that, just requesting to see if I followed best practices in my code. Thank you.

    Responsive landing page using CSS Grid & Flexbox

    1
    Victoria Azola Silva•1,290
    @VickyAzola

    Hi there! 👋 Awesome job completing this challenge. Here are a few tips that may interest you:

    First, it is important to use semantic HTML for accessibility purposes. Try wrapping your main content in the <main> tag instead of <div class="main__content">. And the attribution in a <footer>; also, it may be better to put the footer outside the recipe card. The code would look something like this:

    <main  class="main__content">
 <img src="assets/images/image-omelette.jpeg" alt="" class="main__content-image" />
 <h1>Simple Omelette Recipe</h1>
.....
</main>
<footer class="attribution">
  Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">
  Frontend Mentor
  </a>. Coded by <a href="#">Mark Matlock</a>.
</footer>

    Here you can find more info on why it is important to use semantic HTML for accessibility. 

    Second, in this challenge the last content represents a table, so in this case it is more semantically accurate to use the html tag <table> instead of <div class="nutrition__grid-container">. Here is an example:

    <table>
  <tbody>
     <tr>
        <th>Calories</th>
        <td>277kcal</td>
     </tr>
     <tr>
        <th>Carbs</th>
        <td>0g</td>
     </tr>
     <tr>
        <th>Protein</th>
        <td>20g</td>
     </tr>
     <tr>
        <th>Fat</th>
        <td>22g</td>
     </tr>
  </tbody>
</table>

    Here you can find more info on <table> and how to use it.

    For the line, you can remove it like this if you use a table:

    tr {
    border-bottom: 1px solid hsl(30, 18%, 87%);
}

tr:nth-child(4) {
    border-bottom: none;
}

    And like this, if you use your code:

    .item {
  padding: 1rem 0 1rem 1.2rem;
  border-bottom: 1px solid var(--clr-neutral-grey);
}

.item:nth-child(7), .item:nth-child(8)    {
  border-bottom: none;
}

    For the numbers, it may be because you are using the property font-style instead of font-family:

    ol li::marker {
  color: var(--clr-secondary-raspberry);
  font-weight: var(--fw-bold);
  font-style: var(--ff-body);     ---> here
}

    Lastly, for this challenge, there were two designs, one for mobile and the other for desktop. Check out the design folder and look for mobile-design.jpg image. In this case, the mobile design doesn't have any background, and the content takes up all the screen. When it is on desktop the background appears.

    Hope this helps!

    Marked as helpful
  • Valeo•250
    @Thessssift
    What are you most proud of, and what would you do differently next time?

    Progress .

    What challenges did you encounter, and how did you overcome them?

    links Grid-ing .

    What specific areas of your project would you like help with?

    Grid .

    Responsive Blog links

    2
    Victoria Azola Silva•1,290
    @VickyAzola

    Hi there! 👋 Awesome job completing this challenge. Here are a few tips that may interest you:

    • First it is important to use semantic HTML for accessibility purposes. Try wrapping your main content in the <main> tag instead of a <div> .
    • Also use consecutive headings and don't use them solely for styling purposes. They are supposed to be descriptive tags that let the user know the level of importance of the text.
    • The code would look something like this:
    <main class="container">
    <img src="assets/images/avatar-jessica.jpeg" alt="">
    <h1>Jessica Randall</h1>
    <h2>London, United Kingdom</h2>
.....
</main>
    • Second, for the links instead of <p> that represent a paragraph, you should use an <a> since this tag is especially made for links. Here,  the code would look like this:
    <main class="container">
.....
   <div class="links">
      <a class="button" href="">GitHub</a>
      <a class="button" href="">Frontend Mentor</a>
      <a class="button" href="">LinkedIn</a>
      <a class="button" href="">Twitter</a>
      <a class="button" href="">Instagram</a>
    </div>
</main>

    In here, the href is empty since we don't really have links to put, but in a real setting, there would be links to the sites listed.

    For your CSS, I suggest:

    • In the root, only use one box-sizing property (the border-box is more commonly used).
    :root {
    background-color: var(--Off-Black);
   box-sizing: border-box; 
    --White: hsl(0, 0%, 100%);
    --Grey: hsl(0, 0%, 20%);
    --Dark-Grey: hsl(0, 0%, 12%);
    --Off-Black: hsl(0, 0%, 8%);
    font-size: 17px;
}
    • The body shouldn't be the card; that's what the container class is for. So in the body, we add the most general properties and center the card vertically and horizontally. Also, it is important to add the min-height to allow the vertical center.
    body {
    font-family: 'Inter';
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

    Here, the @media is not necessary since the design is the same for desktop and mobile.

    • The container is the card, so here we add all that is necessary for its general styling. I personally like to add a specific width to control the size it takes.
    .container {
    width: 22rem;
    margin: 1rem;
    padding: 1rem 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--White);
    border-radius: 10px;
    background-color: var(--Dark-Grey);
}
    • Since you have a wrapper for the links, you should use it to set the width of the div.
    .links {
    width: 100%;
}
    • For the buttons, I deleted the padding on the sides since it is no longer necessary; now the width of the buttons is 100% of their container.
    .button {
    padding: .9rem 0 ;
    background-color: hsl(0, 0%, 20%);
    border-radius: 5px;
    font-weight: bold;
}
    • For the button hover, you were missing the change to the text color, so I added that and a cursor pointer.
    .button:hover {
    background-color: hsl(75, 94%, 57%);
    cursor: pointer;
    color: hsl(0, 0%, 20%);
}
    • For the green text, I removed the style inline in the HTML and added the color here, also made the font smaller, according to the design.
    h2 {
    margin-top: 5px ;
    font-size: .9rem;
    color: hsl(75, 94%, 57%);
}

    Hope this helps!

  • Victoria Azola Silva•1,290
    @VickyAzola

    Hi there! 👋 Awesome job completing this challenge. Here are a few tips that may interest you:

    • First it is important to use semantic HTML for accessibility purposes. Try wrapping your main content in the <main> tag instead of a <div> tag, and use <h1> for the titles. Here you can find more information on the use of semantic HTML: link1 link2
    • To use the font specified in the style-guide.md, you need to go to the link they provide and select the weights required, then copy the @import element that is created and paste it on the CSS, then specify the font-family.
    • The idea is to code a solution that looks as close as possible to the design provided, so idealy the background color in this challenge should be: hsl(212, 45%, 89%)
    • And the paragraph should be: hsl(220, 15%, 55%)
    • Lastly, there is an easier way to center a card with Flex or Grid. Here is a good and detailed explanation of centering with CSS

    Here is an example with Grid:

    @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap");

body {
  min-height: 100vh;
  display: grid;
  place-content: center;

  background-color: hsl(212, 45%, 89%);

  font-size: 15px;
  font-family: "Outfit", sans-serif;
}

.qr-card-body-text-secondary {
  font-weight: 400;
  color: hsl(220, 15%, 55%);
}

    Hope this helps! 🤗

  • Victoria Azola Silva•1,290
    @VickyAzola

    Hi there!

    So, there are two ways: import it into your CSS or your HTML, and then apply it to the body or the necessary classes.

    • First, go to style-guide.md and copy the font link on Google.
    • Then, on the right (blue links), select the necessary weights (specified in the guide) of the font.
    • There will appear a red dot on the icon in the top right corner (selected families), which will open a window on the right with a review of your selected fonts.
    • Below it will appear "Use on the Web" with 2 options: "<link>" (you can copy this and paste it on your head HTML) and "@import" (this goes on the top of your CSS). Choose whatever you want, and then copy the text on "CSS rules to specify families" and paste it on your CSS body or classes that require the font.

    Here is an example:

    • With @import:
    in your CSS

@import url('https://fonts.googleapis.com/css2family=Poppins:wght@200;400;600&display=swap');

body { 
    font-family: 'Poppins', sans-serif;
}
    • With <link>:
    In your HTML

<head>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap" rel="stylesheet">
</head>

In your CSS:

body { 
    font-family: 'Poppins', sans-serif;
}
  • Victoria Azola Silva•1,290
    @VickyAzola

    Hi! Great work finishing this challenge! For your first question, there is an easier way! When there is something you want to center vertically and horizontally, you can use a display grid or flex.

    • With Grid:
    body { 
    min-height: 100vh;  //sets the minimum height of the body to be 100% of the screen.
    display: grid;
    place-content: center;  //align content vertically and horizontally.
}
    • With Flex
    body { 
    min-height: 100vh;
    display: flex;
    flex-direction: column; 
    justify-content: center;  
    align-items: center;   
}
    • For the second question, in this case, it is sufficient since the design is the same for mobile and desktop. When you need to make different designs in the future use the @media queries of CSS, here is a link for more info on that

    Hope this helps!

    Marked as helpful
  • Victoria Azola Silva•1,290
    @VickyAzola

    Hi! Great work finishing this challenge! I tried to put the icon using your code, and this is what I came up with.

    • First on the HTML i added the <svg> with an id and class, and I also added a class for the image on the button:
             <div class="input-wrapper">
              <input type="text" class="text-input" placeholder="Email Address">
              <svg id="error-icon" class="error-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><g fill="none" fill-rule="evenodd"><circle cx="12" cy="12" r="12" fill="#F96464"/><path fill="#FFF" fill-rule="nonzero" d="M13.256 6v9.056h-2V6h2zm-.944 12.464c-.384 0-.699-.104-.944-.312a1.027 1.027 0 0 1-.368-.824c0-.33.125-.608.376-.832.25-.224.563-.336.936-.336.373 0 .68.112.92.336.24.224.36.501.36.832 0 .341-.117.616-.352.824-.235.208-.544.312-.928.312z"/></g></svg>
              <button class="email-button">
                <img class="btn-img" src="images/icon-arrow.svg" alt="">
              </button>
          </div>
    • Then for the CSS styled the .error-icon class like this:
    .error-icon {
    position: absolute;
    display: none;
    right: 63%;
    top: 15%;
}
    • Modified the .email-button:
    .email-button {
    background: linear-gradient(135deg, hsl(0, 80%, 86%), hsl(0, 74%, 74%));
    width: 70px;
    height: 45px;
    border: 0;
    border-radius: 30px;
    cursor: pointer;
    position: absolute;
    left: 39%;
}
    • I added the .btn-img class with some padding to center it and changed the color of the .error-message to red:
    .btn-img {
    margin-left: 40%;
}

    #error-message {
    position: relative;
    font-family: 'Josefin Sans';
    font-size: 75%;
    padding-left: 3%;
    color: hsl(0, 93%, 68%);
    margin-top: 8px;
}
    • Lastly, for the javascript, I changed the border to 1px (so the input doesn't change size when clicked) and added the errorIcon variable:
    line 9      const errorIcon = document.getElementById("error-icon")
line 13   emailInput.style.border = '1px solid hsl(0, 93%, 68%)'
line 16   errorIcon.style.display = "block"
line 20   errorIcon.style.display = "none"
    • I also added an event listener to the emailimput variable, so when clicked, the error disappeared.
    line 25   emailInput.addEventListener("click", () => {
                   errorIcon.style.display = "none"
                   errorMessage.style.display = 'none';
                   emailInput.style.border = '0.5px solid hsl(0, 36%, 70%)'
               })

    Hope this helps!

    Marked as helpful
  • Victoria Azola Silva•1,290
    @VickyAzola

    Hi! I tried to solve the problem using your code, and this seems to work.

    • You don't need a .between-div class, so I deleted it.
    • Added a padding to the stats.
    @media screen and (min-width: 1024px) {
    .stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        padding: 0 80px 0 40px;
    }
}

    Also, added a margin to the p on mobile.

    .stats div p {
    color: hsla(0, 0%, 100%, 0.6);
    font-family: 'Lexend Deca';
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 400;
    font-size: .6rem;
    padding-top: 4px;
//
    margin-bottom: 25px;
}

    Hope this helps!

    Marked as helpful
  • Victoria Azola Silva•1,290
    @VickyAzola

    Hi, 👋 welcome to the community! 👩‍💻 👨‍💻 Nice work finishing this challenge.

    A few tips I can give you:

    • To center the card vertically and horizontally, you can use grid or flex on the body, like this:

    With grid

    body { 
    min-height: 100vh;
    display: grid;
    place-content: center;
    font-family: 'Hanken Grotesk', sans-serif
}

    With flex

    body { 
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Hanken Grotesk', sans-serif
}
    • Fix the container, let only the display flex, and delete the set width and height. Also, the default direction of flex is always row, so you don't need to specify it (unless you want a diferent direction). The class parent would look like this:
    .parent {
    display: flex;
}
    • To center the circle, you can use margin auto. And to center the content in the circle, use Flex, like this:
    .overall-score {
    margin-inline: auto;

    border-radius: 50%;
    background-image: linear-gradient(hsla(256, 72%, 46%, 1), hsla(241, 72%, 46%, 0));
    text-align: center;
    width: 200px;
    height: 200px;

//to center the contetn
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}
    • Also, remove the defaul margin on the h1 and h5 and use a bigger font-size on the h1:
    .overall-score h1 {
    color: hsl(221, 100%, 96%);
    margin: 0;
    font-size: 80px;
}

.overall-score h5 {
    color: hsl(241, 100%, 89%);
    margin: 0;
}
    • For the button, add border: none;
    • And on hover, add the color and pointer:
    button:hover {
    background: linear-gradient(hsl(252, 100%, 67%), hsl(241, 81%, 54%));
    cursor: pointer;
}

    Hope this helps! 🤗

    Marked as helpful
  • Victoria Azola Silva•1,290
    @VickyAzola

    Hi, great work finishing this challenge. Your desing looks realy good! Here are a few tips I can give you:

    • Try to use <main></main> to wrap your main content for accessibility purposes. Here is a link to more information on the use of semantic HTML
    • To center your card vertically and horizontally, you can use flex or grid on the body. And delete the margin on the .card-container
    • The design has a background image; you can add this to your CSS:
    body { 
// to center the card
    min-height: 100vh;
    display: grid;
    place-content: center;

//to add the image
    background: url(images/pattern-background-desktop.svg);
    background-color: hsl(225, 100%, 94%);
    background-size: contain;
    background-repeat: no-repeat;
}

.card-container {
  width: 85%;
  margin: 70px auto;  //delete this
  text-align: center;
  background-color: hsl(0, 0%, 100%);
  border-radius: 20px;
}
    • if you are using the same 20px for the border top, there is no need to specify it for left and right separately; just use the border-radius, like this:
    .hero-img {
  width: 100%;
  height: auto;
// top-left | top-right | bottom-right | bottom-left //
  border-radius: 20px 20px 0 0;
}

    Hope this helps! 🤗

    Marked as helpful
  • Victoria Azola Silva•1,290
    @VickyAzola

    Hi! Great work finishing this challenge,

    Your solution looks really close to the design; you are only missing the font and the background color. Add something like this to your CSS:

    @import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap');

body {
  font-family: 'Red Hat Display', sans-serif;
  background-color: hsl(225, 100%, 94%);
}

    The fonts are always linked on the style-guide.md 

    Hope this helps! 🤗

    Marked as helpful
  • Victoria Azola Silva•1,290
    @VickyAzola

    Hi there! Great work finishing this challenge!

    To center the card vertically and horizontally you can use grid or flex on the body:

    with grid:

    body { 
    min-height: 100vh;
    display: grid;
    place-content: center;
}

    with flex:

    body { 
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    Hope this helps!

  • Victoria Azola Silva•1,290
    @VickyAzola

    Hi! great work finishing this challenge 😊

    Your solution looks awesome! just a few tips that may interest you to make the background look more close to the design. To the body add some background properties like: (The // are to explain better, just delete them on your css code)

    body {
//sets the minimum height of the body to be 100% of the screen.
    min-height: 100vh;  

 //allows to center the content
    display: grid; 

//centers the content vertically and horizontally
    place-content: center;  

//the image and the color
    background: url("images/pattern-background-desktop.svg");
    background-color: hsl(225, 100%, 94%);

//Scales the image as large as possible within its container without cropping or stretching the image
    background-size: contain; 

//so the image doesn't repeat
    background-repeat: no-repeat; 
}

    Here's more info on the background properties

    Hope this helps! 🤗

    Marked as helpful