Create Text Display Card Using HTML And CSS



Nature

Heading For Image

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy

Botton


Nature

Heading For Image

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy

Botton


Nature

Heading For Image

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy

Botton


Nature

Heading For Image

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy

Botton


Its features:

  • It is completely responsive.

  • You can add a link to the name of each button.

  • You can use the image you need instead of the fiction image.

  • You can change the hover color via CSS if you want.

Try to create like yourself by following the codes below :


Step 1) Add to folder :
First make one folder and put an images that you like.
Step 2) Add to head :
<meta name="viewport" content="width=device-width, initial-scale=1">
Step 3) Add to html :
<h2>Create Text Display Card Using HTML And CSS</h2> <div class="seventeen"> <div class="row"> <div class="column left" style="background-color:;"> <img src="v01.png" alt="Nature" class="responsive" width="160" height="121"> </div> <div class="column right" style="background-color:;"> <h2>Heading For Image</h2> <div class="sixteen"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy </p> </div> <div class="fifteen"> <p>Botton</p> </div> </div> </div><br> <div class="row"> <div class="column left" style="background-color:;"> <img src="v01.png" alt="Nature" class="responsive" width="160" height="121"> </div> <div class="column right" style="background-color:;"> <h2>Heading For Image</h2> <div class="sixteen"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy </p> </div> <div class="fifteen"> <p>Botton</p> </div> </div> </div><br> <div class="row"> <div class="column left" style="background-color:;"> <img src="v01.png" alt="Nature" class="responsive" width="160" height="121"> </div> <div class="column right" style="background-color:;"> <h2>Heading For Image</h2> <div class="sixteen"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy </p> </div> <div class="fifteen"> <p>Botton</p> </div> </div> </div><br> <div class="row"> <div class="column left" style="background-color:;"> <img src="v01.png" alt="Nature" class="responsive" width="160" height="121"> </div> <div class="column right" style="background-color:;"> <h2>Heading For Image</h2> <div class="sixteen"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy </p> </div> <div class="fifteen"> <p>Botton</p> </div> </div> </div><br> </div>
Step 4) Add to css :
* { box-sizing: border-box; } .row{ width:80%; margin:auto; background:#8ed043; border:1px solid #a45e4d; border-radius:10px; } .column { float: left; padding: px; height:auto; } .left { width: 30%; } .left img{ margin-top:20px; margin-bottom:20px; margin-left:-30px; } .right { width: 70%; font-family:arial,sans-serif; font-size:14px; font-weight:300; margin-bottom:10px; } .fifteen{ width:80px; height:35px; background-image: linear-gradient(#1060c5, #59a1f2); color:white; display:flex; align-items:center; justify-content:center; } .fifteen:hover{ background-image: linear-gradient(#59a1f2, #1060c5); } .sixteen{ width:90%; height:auto; } .row12:after { content: ""; display: table; clear: both; } .responsive { width: 100%; height: auto; } .seventeen{ max-width:800px; height:auto; margin:auto; }



Thank you sir

Congratulations to you on visiting our page.

If you have any feedback, you can give advice through the "Contact Me" form.