Image and Text side by side html css Source Code

 Image and Text Side by Side

ब्लॉग के Home Page या अन्य Page के Design के लिए Image and Text Side by Side नाम का एक प्रोजेक्ट लेकर आये है जिसे हम ब्लॉग में जोड़ कर अपने ब्लॉग को एक बेहतरीन लुक दे सकते है इस प्रोजेक्ट Image and Text Side by Side का Source Code नीचे दिया गया है 

 Image and Text Side by Side CSS Code

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

.header {
  text-align: center;
  padding: 32px;
}

.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  -ms-flex: 25%; /* IE10 */
  flex: 50%;
  max-width: 100%;
  padding: 0 4px;
  float: right;
  }

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;

  
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}

<div class="header">
  <h1>Image and Text Side by Side</h1>
  <p>image and text side by side html css Code</p>
</div>
<div class="row">
  <div class="column">
    <img src="image url" style="width:100%">
  </div>
  <div class="column">
    <h1>Image and Text Side by Side</h1>
   <p>image and text side by side html css Code</p>
  </div>  
</div>

उपरोक्त HTML Code में image url की जगह अपने Image कोड को पेस्ट करे