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

Submitted

Perfume card

lainaq217 40

@lainaq217

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Tengo problemas para las fuentes y para colocar de forma correcta los precios. Espro y agradezco sus comentarios

Community feedback

P

@JIH7

Posted

Great attempt! Some things to keep in mind

  • Your image isn't showing because it was not uploaded to your GitHub repo. Make sure you're adding it and also make sure it's not in your .gitignore

  • In .contenido your items are overflowing. Try reducing the height and margin-top/margin-bottom values of the content inside.

  • The layout is not responsive for mobile. Try learning about media queries!

@media only screen and (max-width: 600px) {
  body {
    /* Your mobile body styles here  */
  }

   .content {
   /* Your mobile content styles here */
   }
}

This will allow you to design a separate layout for phones. You can see how the device will look on a phone by opening the dev tools (right click > inspect) and at the top of the screen select a phone under "Dimensions."

Hope this helps!

0
hitmorecode 6,230

@hitmorecode

Posted

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    font-family: "Monserrat","Fraunces";
    font-size: 14px;
    font-weight: 500, 700, 800;
    background-color:hsl(30, 38%, 92%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container{
    display: flex;
    border-radius: 10px;
}

img{
    height: 550px;
    width: 400px;
    border-radius: 10px 0 0 10px;
}

.segunda{
    background-color: hsl(0, 0%, 100%);
    height: 550px;
    width: 350px;
    border-radius: 0 10px 10px 0;
    padding: 25px;
}

.contenido{
/*     margin-top: 25px; */
/*     margin-left: 25px; */
    display: flex;
    flex-direction: column;
    justify-content: left;
}

h1{
    color: hsl(228, 12%, 70%);
    font-size: 15px;
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-bottom: 30px;
}

h2{
    font-weight: 700;
    font-size: 24px;
/*     margin-right: 120px; */
    line-height:32px;
    padding-right: 95px;
    margin-bottom: 40px;
}

.precio{
    color:hsl(158, 36%, 37%);
    font-weight: bold;
    font-size: 32px;
    display: flex;
}
span{
    font-size: 18px;
    color:hsl(228, 12%, 50%);
    text-decoration: line-through;
    margin-left: 50px;

  
}

button{
    background-color: hsl(158, 36%, 37%);
    color:hsl(0, 0%, 100%) ;
    font-weight: bold;
    font-size: 14px;
    height: 60px;
    width: 80%;
    margin-left: 30px;
    margin-right: 20px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

p{
    color: hsl(228, 12%, 50%);
    font-size: 16px; 
/*     margin-right: 60px; */
    line-height: 26px;
    margin-bottom: 50px;
    padding-right: 30px;
}
0

@arogersrenee

Posted

The file can't find the image because your images are not uploaded to github. In your HTML file check that your image link is a relative link, then re-upload the folder to github and the image should display.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord