Business Preview Card Component

Community feedback

• 

  Adeola Bamigboye•280

  @deeolaPosted over 3 years ago

  Hey Deva, Kudos on finishing this project. I know it took a lot of time but i'm very sure you learnt a lot from it and that is the major objective. I checked your code already and i figured you need to refactor a lot of things. Don't be discouraged, it is perfectly okay, i'm still learning myself.

  I will be suggesting some changes in your code, both html and your css file. but i will start with the html file.

  (1)You should remove all inline styles you have since you have your css file and you might get confused styling it, that is the height and width on the 'img' and color styling on the span.

  (2) change the 'top-head' tag to h1 or h2.

  (3) You can also change the div tag on your li to span.

  NOW CSS (1) Always start your css with this code

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

  }

  It removes unneccessary margins and paddings that might stress you later.

  (2) Don't put flex on your body, instead put it on your '.outline' container, your body can just contain background color and font family instead.

  (3)On your .outline, chnage display to flex, change width to 80% and add a margin of 95px auto. You do not need to start your selectors with 'div.' by the way, just '.outline' will do the job.

  please let me know if you are following so that i can type the rest of the changes, i still have have some things to explain and type here. you can just reply this and let me know.

  Marked as helpful

  0

  ---

  

  deva22•20

  @deva22githubPosted over 3 years ago

  @clazikar First of all, I feel really great seeing this comment of guidance from you, as I am only guided by youtube tutorials and blogs for now, thanks a lot for seeing my work and giving your kind support for further improvements.. and I will for sure follow up the changes you said me.. and I am just confused because, when I run the code through my local server, it was almost giving the same look.. that's why I uploaded though.. but here with the comparison of solution & design, shows me huge differences.. like even the fonts, and the card and image not sticked next to each other etc.., and I don't know why is that

  0

  

  deva22•20

  @deva22githubPosted over 3 years ago

  @clazikar (https://me-deva22.github.io/Business-Preview-Card-Component/)
  here's the page after making those changes.

  0

  

  Adeola Bamigboye•280

  @deeolaPosted over 3 years ago

  @deva22github Hey Deva, I'm glad you're still here. just like i mentioned earlier, there are still some changes you need to make and i will be pointing them out. So let's continue where we stopped.

  (4) on your .card div, change your width to 50%, add a padding of about 40px(it's your choice) and add a background, remove the rest of the properties, they are not needed. your card div should look like this after

  .card { width:50%; padding: 40px; background-color: hsl(277, 20%, 13%); } (5)Remember your h2? Remove the display property, it's not needed. You can add 'px' to the back of the '32'.

  (6) You have a span inside your h1 tag, you can style it too. just like this

  h1 span{ color: hsla(226, 40%, 41%, 0.75); }

  Not sure about the color, that is just an example

  (7) now to your p tag. I believe it's okay. just remember to add the unit at the back of your font-size property

  (8) Now you need to style your ul, li and li span.

  --on your ul, display it as flex, add a justify-item of space between, add a margin-top and you can add a width of 80% and also a text-aligh of left.

  Text-align justifies your text either to the left, center or right. Your ul tag should look like this: ul{ display: flex; justify-content: space-between; text-align: left; margin-top: 60px; width: 80%;

  }

  --your li too, remove list style(to remove the bullet points, add a display flex because you have a span inside, but your flex direction should be in column, add few styles like font-weight and color and size). it should look like this.

  li{ list-style: none; display: flex; flex-direction: column; font-weight: 700; font-size: 1.5rem; color: white;

  } --and your li span, add a display of block and other neccesary properties like this. You should remove the classname of word if you are going to style it like below, if you want to keep your styling, just copy the properties and not the 'li span'. you dig?

  li span{ display: block; text-transform: uppercase; font-weight: 500; font-size: 12px; color: rgb(136, 135, 132);

  }

  Note:Other properties are something i praticed with, so you can change it.

  NOW LET's MOVE TO THE IMAGE DIV

  i want to suggest you remove the image from the html, like yank it off because if that is the only image you are working with, it won't work when your screen becomes really smaller and that is just a pain in the add. We will be using the image as a background inside css. Remove the img BUT not the div, instead place the .img div BELOW the card div.

  so the .img div is still a sibling of .card card and a child of .outline.

  NOW LET's style it back in css.

  remove the img styling(NOT THE .img div styling, we need to work with that).

  in your .img div, make it a size of 50%, remember .card takes the other 50%?

  back to your .img div, add a position of 'relative' (i'll tell you why soon). add a background and make it the image in your folder, add backgound-repeat of none, background-position of center and backgound-size of cover, here is how it should look like.

  .img { width: 50%; position: relative; background: url('/imag.jpg'); background-repeat: none; background-position: center; background-size: cover;

  }

  Now you should see a major difference but you need that overlay, i know. in another line add a pseudo element to your .img div, add a content of empty string, width and height of 100%, position of absolute(if you didn't add a position of relative to your .img tag, the pseudo element will cover your whole body.) , a top and left of 0, make the z-index above 1, can be 100 or 50, add a backgound color but make it transparent, in your color box, there are two boxes by the right, one to change color, one to change how transparent your color is, play with them and see what suites you. Your element should look like this afterwards.

  .img::after{ content: ''; width: 100%; position: absolute; height: 100%; z-index: 100; background-color: rgba(70, 13, 117, 0.411); top: 0; left: 0; }

  NOW TO MAKE IT RESPONSIVE, you need to see some videos on media queries because it is another topic and i might be boring you with my solution already so i will just copy it here and try to make some basic explanation. Under your previous styling, add a media query of about 850px(that means any change you want will start occuring at this screen width BELOW).Then make a few changes to some of your elements. please go through media queries but you can copy the code below and paste it under your last css. I'm sorry for the long correction and they are just normal fixes and just like i mentioned earlier, it can only get better from here for you. Let me know if you have any question. Have a nice weekend deva

  @media (max-width:850px) { .outline { flex-direction: column; text-align: center;

  }
  .img{
      width: 100%;
      min-height: 500px;
  }
  
  .card{
      width: 100%;
      order: 2;
  }
  p{
      width: 100%;
  }
  
  ul{
      flex-direction: column;
      align-items: center;
      width: 100%;
      margin-top: 20px;
      
  }
  
  li{
      margin-top: 10px;
      text-align: center;
  
  }
  

  }

  I just noticed some part of the media query was highlited in blue, please start the copy from where '@ media down to the last curly braces about this statement.

  0

  

  deva22•20

  @deva22githubPosted over 3 years ago

  @clazikar Thank you so much for taking time and pointing out each one with clear explanation cuts with the code.. I really value it, as you have helped me knowing things which I have not yet even used before.. and I have gone through @media query now, which I got an understanding with code.. and if u don't feel like u have already explained too much, can you please tell me why we used relative position for the image? (you mentioned you'll tell that sooner)..

  Thanks, and u too have a superb weekend, Keep rocking as you already do!

  0
• 

  Shibu Sarkar•605

  @shibuwdPosted over 3 years ago

  Keep practicing. Happy coding.

  Marked as helpful

  0

  ---

  

  deva22•20

  @deva22githubPosted over 3 years ago

  Thanks @Shibu77 ! Have a great day ahead :)

  0