- Create HTML syntax
- Create an html with a main wrap
- Then add an inner wrap
- Then add the 2 columns inside the inner wrap
- In side the 2 column add another wrap before adding the contents of the column
- Add contents(image, heading title, smaller heading and text content)
- Add CSS: Use CSS display flex to inline the 2 column div's
- Add the display flex CSS on the inner wrapper then add align-items center, this will align the 2 column div's on the center
- If you want to align it on the top you can use flex-start if you want to align bottom use flex-end on the value of align-items
Chevrolet Camaro
Four Column Design
Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Vitae luctus metus libero eu augue. Eros pede semper est, vitae.
Porsche 911
Four Column Design
Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Eros pede semper est, vitae luctus metus libero eu augue. Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Eros pede semper est, vitae luctus metus libero eu augue.
.align-center{
text-align: center;
}
.container{
width: 100%;
max-width: 900px;
margin: 0 auto;
}
.row{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.col-2{
flex: 0 0 50%;
max-width: 50%;
}
.content-wrap{
padding: 10px 20px;
margin: 0 10px;
border: 1px solid #000;
}
