Four card feature section using HTML and CSS

Community feedback

• 

  Ynnk•170

  @HYannickPosted over 4 years ago

  This is a great result !

  Some suggestions would be to avoid overusing absolute position and margin positioning like this. In this case it does the tricks but it's hard to maintain especially if you want a more responsive display after that.

  For absolute position it's more conventional to use the top left right bottom css properties.

  Another potential issue would be the fixed size of the body. Usually it is meant to be flexible depending of the device.

  Another approach would be to use the flexbox technique. Here's some samples

  <div class="grid">
      <div class="grid-column">
          <div class="container container-left">
              <h2 class="box-title">Supervisor</h2>
              <p class="p-box">Monitors activity to identify project roadblocks</p>
              <img src="images/icon-supervisor.svg" alt="supervisor-img"> </img>
          </div>
      </div>
      <div class="grid-column">
          <div class="container container-top">
              <h2 class="box-title">Team Builder</h2>
              <p class="p-box">Scans our talent network to create the optimal team for your project</p>
              <img src="images/icon-team-builder.svg" alt="team-builder-img"> </img>
          </div>
  
          <div class="container container-bottom">
              <h2 class="box-title">Karma</h2>
              <p class="p-box">Regularly evaluates our talent to ensure quality</p>
              <img src="images/icon-karma.svg" alt="karma-img"> </img>
          </div>
      </div>
      <div class="grid-column">
          <div class="container container-right">
              <h2 class="box-title">Calculator</h2>
              <p class="p-box">Uses data from past projects to provide better delivery estimates</p>
              <img src="images/icon-calculator.svg" alt="calculator-img"> </img>
          </div>
      </div>
  </div>
  

  styles.css

  body {
    color: #40514E;
    margin: 0;
    text-align: center;
    font-family: 'Poppins', sans-serif;
  }
  
  h2 {
    font-size: 15px;
  }
  
  p {
    color: grey;
    color: hsl(229, 6%, 66%);
    width: 33%;
    margin: auto;
  }
  
  img {
    position: absolute;
    margin: 40px 90px;
    width: 40px;
    height: 40px;
  }
  
  .box-title {
    color: black;
    color: hsl(234, 12%, 34%);
    text-align: left;
    margin-left: 30px;
    margin-top: 30px;
  }
  
  .p-box {
    color: grey;
    color: hsl(229, 6%, 66%);
    line-height: 2;
    text-align: left;
    width: 80%;
    font-size: 12px;
  }
  
  .h1-plain {
    color: grey;
    font-weight: lighter;
    margin-bottom: 10px;
  }
  
  .h1-bold {
    margin-top: 0;
  }
  
  .grid {
    margin-top: 50px;
    display: flex;
    justify-content: center;
  }
  
  .grid-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 15px;
  }
  
  .container {
    border-top: thick solid;
    background-color: white;
    box-shadow: 0 10px 10px rgba(0,0,0,0.15);
    height: 200px;
    width: 300px;
    margin-bottom: 30px;
  }
  
  .container-left {
    border-top-color: cyan;
    border-top-color: hsl(180, 62%, 55%);
  }
  
  .container-top {
    border-top-color: red;
    border-top-color: hsl(0, 78%, 62%);
  }
  
  .container-bottom {
    border-top-color: orange;
    border-top-color: hsl(34, 97%, 64%);
  }
  
  .container-right {
    border-top-color: blue;
    border-top-color: hsl(212, 86%, 64%);
  }
  
  .attribution {
    margin-top: 30px;
    font-size: 11px;
    text-align: center;
    color: purple;
    color: hsl(228, 45%, 44%);
  }
  
  

  Have fun with the next challenges !

  1

  ---

  

  Charles•40

  @cicpPosted over 4 years ago

  @HYannick Thanks a lot for the feedback!

  0