HTML Coding

<html> <head> <title>Coding TutorialsDesign</title> <link type="text/css" rel="stylesheet" href="css/stylesheet.css"> </head> <body> <div class="background_x"> <div class="contanier_x"> <div class="card_x"> <div class="card_img"> <img src="img/pic.jpg"> </div> <div class="content_card"> <div class="content_head"> <h2>jahangir Ansari</h2> <p>Lorem Ipsum is simply dummy </p> <a href="">READ MORE</a> </div> </div> </div> <div class="card_x"> <div class="card_img"> <img src="img/pic.jpg"> </div> <div class="content_card"> <div class="content_head"> <h2>jahangir Ansari</h2> <p>Lorem Ipsum is simply dummy </p> <a href="">READ MORE</a> </div> </div> </div> </div> </div> </body> </html>

CSS Coding

*{ box-sizing: border-box; margin: 0; padding: 0; } .background_x { width:100%; height:100vh; display: flex; justify-content: center; align-items: center; } .contanier_x { position: relative; max-width:1000px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .contanier_x .card_x { position: relative; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; margin:100px 0; } .contanier_x .card_x:nth-child(odd) { flex-direction: row; } .contanier_x .card_x:nth-child(even) { flex-direction: row-reverse; text-align: right; } .contanier_x .card_x .card_img { position: relative; left:25px; width:500px; height:400px; z-index:1; } .contanier_x .card_x:nth-child(even) .card_img { left:-25px; } .contanier_x .card_x .card_img img { position: absolute; top:0; left: 0; width:100%; height:100%; object-fit: cover; } .contanier_x .card_x .content_card { position: relative; right:25px; width:500px; height:400px; background:#000; display: flex; justify-content: center; align-items: center; padding:20px 60px 20px 100px; } .contanier_x .card_x:nth-child(even) .content_card { right:-25px; padding:20px 100px 20px 60px; } .contanier_x .card_x .content_card:before { content:''; position: absolute; top:-50px; bottom:-50px; left:0; right:0; background:#000; z-index:-1; } .contanier_x .card_x .content_card h2 { font-size:30px; color:#fff; } .contanier_x .card_x .content_card p { margin-top:10px; color:#fff; } .contanier_x .card_x .content_card a { display: inline-block; margin-top:15px; color:#fff; text-decoration:none; padding:10px; border:1px solid #fff; } @media (max-width:1000px) { .contanier_x .card_x { flex-direction: column; max-width:350px; margin:25px 25px; } .contanier_x .card_x .card_img { width:100%; height:250px; left:0; } .contanier_x .card_x .content_card { width:100%; height: auto; right:0; padding:30px; text-align:center; } .contanier_x .card_x .content_card:before { top:0; bottom:0; } .contanier_x .card_x:nth-child(even) .card_img { left:0px; } .contanier_x .card_x:nth-child(even) .content_card { right:0; padding:30px; } }