Skip to main content
Code Review

Return to Question

edited tags
Link
200_success
200_success
  • 145.7k
  • 22
  • 191
  • 481
deleted 55 characters in body; edited title
Source Link
Jamal
Jamal
  • 35.2k
  • 13
  • 134
  • 238

Creating tiles with cssCSS

I am still a beginner in CSS, I and am trying to make a tiles/cards design. I have reached this code, and I want to know if my layout this way is good or isif there are any improvementimprovements I need to do?make.

Is writing margin and padding auto is the right practice? How about using flexbox as am doing?

Any advices to improve it will be appreciated. Thanks.

Creating tiles with css

I am still a beginner in CSS, I am trying to make a tiles/cards design. I have reached this code, and I want to know if my layout this way is good or is there any improvement I need to do?

Is writing margin and padding auto is the right practice? How about using flexbox as am doing?

Any advices to improve it will be appreciated. Thanks.

Creating tiles with CSS

I am still a beginner in CSS and am trying to make a tiles/cards design. I have reached this code, and I want to know if my layout this way is good or if there are any improvements I need to make.

Is writing margin and padding auto is the right practice? How about using flexbox as am doing?

Source Link
Brittany Rutherford
Brittany Rutherford
  • 211
  • 1
  • 6

Creating tiles with css

I am still a beginner in CSS, I am trying to make a tiles/cards design. I have reached this code, and I want to know if my layout this way is good or is there any improvement I need to do?

Is writing margin and padding auto is the right practice? How about using flexbox as am doing?

Any advices to improve it will be appreciated. Thanks.

html{
  font-size: 12px;
  font-family: Arial, sans-serif;
}

body{
  margin: auto;
  padding: auto;
  /* What's the best practice to align content in the middle */
}

h1{
  background-color: red;
  text-align: center;
  height: 50px;
  vertical-align: /*What to put here to make it centered? */  ;
}

.flex{
  display: flex;
}

.item{
  width: 30%;
}
.item  h3{
    color: grey;
  }

  
   .item span{
    font-style: italic;
  }
<!DOCTYPE html>
<html>

  <head>
    
    <link rel="stylesheet/less" href="style.less" />
    <script  src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.6.1/less.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <div class="flex">
      <div class="item red">
        <h3>
        Project 1
        </h3>
        <span>Time: 10:30AM</span>
        </div>
      <div class="item green">
        <h3>
        Project 2
        </h3>
        <span>Time: 10:30AM</span>
        </div>
      <div class="item blue">
        <h3>
        Project 3
        </h3>
        <span>Time: 10:30AM</span>
        </div>
      <div class="item yellow">
        <h3>
        Project 4
        </h3>
        <span>Time: 10:30AM</span>
        </div>
      <div class="item navy">
        <h3>
        Project 5
        </h3>
        <span>Time: 10:30AM</span>
        </div>
    </div>
  </body>

</html>