Order summary component using CSS HTML

Community feedback

• 

  hitmorecode•6,680

  @hitmorecodePosted about 1 year ago

  Well done, good effort. I took a look at your page and there are a few issues you can fix.

  • You placed the background image inside the html file. This is causing issues with the card. The background image is overlapping with the card. Move the background image to the css file.
  • Regarding the other issues with your page I've made some changes (see below). Lines that are commented out, you can delete them. Lines with /**/ are the lines that I added or made some changes. It's a lot to explain right now, but if there are things that you don't understand why I did like this, feel free to ask and I'll do my best to explain to you.

  body {
  font-family: Tahoma, Verdana, sans-serif, Arial, sans-serif; 
      min-height: 100vh; /**/
      display: flex; /**/
      justify-content: center; /**/
      align-items: center; /**/
  }
  
  .card {
  /* margin-top: -30vh; */
  /* margin-left: 30%; */
  width: 400px; /**/
  height: auto; /**/
  border-radius: 15px;
  background-color: white;
  display: flex;
  justify-content: center;
  flex-direction: column;
      align-items: center; /**/
  border: 1px solid #ddd; 
  }
  
  .card img { /**/
      width: 100%;
      border-radius: 15px 15px 0 0;
  }
  
  .card h2 {
  /* margin-left: 21%; */
  margin-top: 20px;
  margin-bottom: 15px;
  opacity: 0.8;
  }
  
  .p1 {
  opacity: 0.7;
  /* margin-left: 40px; */
  width: 360px; /**/
  color: #222;
  background-color: white;
  font-size: 16px;
      text-align: center; /**/
  }
  
  .music-div {
  display: flex;
      align-items: center; /**/
  margin: 30px;
  /* width: 260px; */
      background-color: hsl(225, 100%, 98%);
      padding: 15px;
      border-radius: 10px;
  
  }
  
  .salary {
  display: flex;
  flex-direction: column;
  margin-left: 19px;
  }
  
  /* .music-div img {
      margin-left: 10px;
  } */
  
  .music-div a {
  margin-left: 60px;
  text-decoration: none;
  }
  
  .salary .bold {
  font-size: 16px;
  font-weight: 600;
  }
  
  .salary .light {
  opacity: 0.7;
  }
  
  button {
  width: 260px;
  height: 40px;
  background-color: rgb(15, 15, 134);
  font-size: 16px;
  border: none;
  outline: none;
  border-radius: 6px;
  /* margin: 0 auto; */
  color: white;
  /* padding: 10px 0; */
  cursor: pointer;
  }
  
  .card h4 {
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  margin-top: 15px;
  line-height: 1.2;
  text-align: center;
  opacity: 0.7;
  margin-bottom: 16px; /**/
  }
  
  

  0

  ---

  

  ahmed elsayed•90

  @ahmed9143Posted about 1 year ago

  thanks for these great tips i will add it to this simple card and thank you for your effort @hitmorecode

  0