HTML Coding

<html> <head> <title>Coding TutorialsDesign</title> <link type="text/css" rel="stylesheet" href="css/stylesheet.css"> </head> <body> <div class="food"> <div class="contanier_f"> <div class="card_f"> <div class="img_f"> <img src="img/food_1.jpg"> </div> <div class="content_f"> <div> <h2>Food one </h2> <p> Lorem Ipsum is</p> </div> </div> </div> <div class="card_f"> <div class="img_f"> <img src="img/food_2.jpg"> </div> <div class="content_f"> <div> <h2>Food Two</h2> <p> Lorem Ipsum is</p> </div> </div> </div> <div class="card_f"> <div class="img_f"> <img src="img/food_3.jpg"> </div> <div class="content_f"> <div> <h2>Food Three</h2> <p> Lorem Ipsum is</p> </div> </div> </div> <div class="card_f"> <div class="img_f"> <img src="img/food_4.jpg"> </div> <div class="content_f"> <div> <h2>Food Four</h2> <p> Lorem Ipsum is</p> </div> </div> </div> </div> </div> </body> </html>

CSS Coding

.food { display: flex; justify-content: center; align-items: center; min-height:100vh; background:#fada3e; } .contanier_f { position: relative; width:1000px; display: grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)) ; } .contanier_f .card_f { position: relative; display: flex; flex-direction: column; background:#fff; } .contanier_f .card_f:nth-child(even) { flex-direction: column-reverse; } .contanier_f .card_f .img_f { position: relative; width:250px; height:250px; background:#000; } .contanier_f .card_f .img_f img { position: absolute; top:0; left: 0; width:100%; height:100%; object-fit: cover; } .contanier_f .card_f .content_f { position: relative; width:250px; height:250px; display: flex; justify-content: center; align-items: center; } .contanier_f .card_f .content_f a { text-decoration: none; color:#fada3e; } .contanier_f .card_f .content_f div { padding:20px; text-align: center; } @media (max-width:1000px) { .contanier_f { grid-template-columns:repeat(auto-fit,minmax(100%,1fr)); margin:50px; } .contanier_f .card_f { flex-direction:row; margin:10px 0; } .contanier_f .card_f:nth-child(even) { flex-direction:row-reverse; } .contanier_f .card_f .img_f, .contanier_f .card_f .content_f { width:50%; } } @media (max-width:600px) { .contanier_f .card_f { flex-direction:column; margin:10px 0; } .contanier_f .card_f:nth-child(even) { flex-direction:column; } .contanier_f .card_f .img_f, .contanier_f .card_f .content_f { width:100%; } .contanier_f .card_f .content_f { height:200px; } }