Blog page icon with hover effects

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 11 months ago

  Hello @julian1665!

  Your project looks great!

  About your questions:

  • To create a box around a text you just have to change its background-color and then add some padding. It's simple as that. Just pay attention because most times the necessary horizontal padding is a bit bigger than vertical padding when we are working with words, like this case.

  • And to align the picture with the author's name: First: Create a flex-container. Second: Create the flex-items (the image and the name of the author). They can be a <img> and a <p>. Then set align-items to the container. This should be enough to align them.

  I tried to give you a very simple answer for better understanding, considering they are simple issues to address. 😊

  I hope it helps!

  Other than those details, you did an excelent job!

  Marked as helpful

  0
• 

  Pierce Issah•120

  @PJIceskullPosted 11 months ago

  Also for the profile picture, a quick fix would be using the Flexbox method!

  .greg {
      padding: 10px;
      // Flexbox
      display: flex;
      align-items: center;
      justify-content: flex-start; // Note:  "justify-content" line is optional
  }
  

  You don't need to have justify-content as the content will be position left. You add spacing between the image and text using margins.

  Marked as helpful

  0
• 

  Marcos Travaglini•4,840

  @BlackpachamamePosted 11 months ago

  For the profile image part, you could do it this way (don't use the label unless it's referring to an input):

  HTML

  <div class="greg">
       <img src="assets/images/image-avatar.webp" height="40px">
       <p class="author">Greg Hooper</p>
  </div>
  

  CSS

  .greg {
      display: flex;
      padding: 10px 0px;
      align-items: center;
      gap: 10px;
  }
  

  Learning: HTML (delete div class learning-box, leave only the p)

  <p class="learning">Learning</p>
  

  CSS

  p.learning {
      background-color: var(--yellow);
      border-radius: 5px;
      display: inline-block;
      font-weight: 800;
      font-size: 14px;
      padding: 10px;
  }
  

  Marked as helpful

  0
• 

  Pierce Issah•120

  @PJIceskullPosted 11 months ago

  Hey Julian, it seems that your learning box looks off because your paragraph text has margins for the top and bottom. You also have no padding for the top and bottom in your .learning-box class.

  For your learning-box class:

  .learning-box {
  // Remove Height //
  padding: 10px;
  }
  

  You can remove the height for the learning box as the padding will give the space you need.

  For the paragraph text, I noticed that you have a class on it called ".learning". I don't think you need to do this since you can select the element using CSS selectors. For this part, all you have to do is remove the top and bottom margins using margin: auto.

  // You can use ".learning-box" p or ".learning" to select the text in your learning-box
  .learning-box p {
  margin: auto
  }
  

  Hope this helps!

  Marked as helpful

  0
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 11 months ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  CSS 🎨:

  • You can easily create the black surrounding border effect using box-shadow property, you don't need to struggle by using border-right for this design.

  ---

  • Now you need to remove these rules from your css,

  div.container {
    border-right: solid black 10px;
    border-bottom: solid black 10px;
  }
  
  div.container:hover {
    border-right-width: 15px;
    border-bottom-width: 15px;
  }
  

  ---

  • Instead you can add these rules,

  div.container {
    box-shadow: 10px 10px black;
  }
  
  div.container:hover {
    box-shadow: 15px 15px black;
  }
  

  • Additionally there's another thing you need to fix is that the incorrect usage of transition triggering used while hover, the transition must not be declared within the pseudo-class this will affect the full utilization.

  ---

  • Due to this whenever you hover the effect will start smooth but as soon as you leave the cursor out from the component the effect will suddenly disappears without any transition.

  ---

  • So its better to add the transition property in a normal class, it will be triggered by a pseudo-class automatically.

  ---

  div.container {
    transition: linear 0.3s;
    box-shadow: 10px 10px black;
  }
  

  ---

  • Please let me know if you have any further doubts regarding my suggestion.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0