All comments

• 

  Tolulope Oluwabukunmi•240

  @TheTreeveloperSubmitted 9 months ago

  I am happy with the outcome of my code. I am now able (or so I think) to break down the components to manageable sections where I can determine how I want to structure my component.

  

  Responsive component page using CSS Flexbox

  2

  40
  

  rahmad•230

  @rahmadsubaktiPosted 9 months ago

  Congratulations on finishing this challenge.

  In your code, i saw that your code contains three containers with the class name container1 container2 container3. You can improve this by replacing that three class with the generic class container (or whatever your name prefer) so you don't have to write it twice and three another class for background color. Here's how you do it:

  .container {
      width: 40%;
      border-radius: 5px 0 0 5px;
      display: flex;
      flex-direction: column;
      padding: 25px;
      gap: 25px;
  }
  
  .bg-orange {
      background-color: var(--Bright-orange);
  }
  
  .bg-dark-cyan {
      background-color: var(--Dark-cyan);
  }
  
  .bg-very-dark-cyan {
      background-color: var(--Very-dark-cyan);
  }
  

  Here's the example in the html file:

  <div class="container bg-orange">
      <!--Your children component-->
  </div>
  <div class="container bg-dark-cyan">
      <!--Your children component-->
  </div>
  <div class="container bg-very-dark-cyan">
      <!--Your children component-->
  </div>
  

  Sorry for my bad english and wording. Have fun coding :)

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Adigun Israel Collins•880

  @IcyEazySubmitted about 2 years ago

  How do I go about the background? Am I using the SVG as background-image in CSS or an element in HTML?

  

  profile-card-component

  2

  80
  

  rahmad•230

  @rahmadsubaktiPosted about 2 years ago

  I prefer background-image, since you can use more than one image and position them. If you use element like <img> you have to make their position as absolute and their parent's position as relative

  Marked as helpful

  1