1. Home

Using W3.CSS

Change this

How to Be Responsive

Name1
Name2
Name3

HTML Code

<div class="w3-row">

<div class="w3-third">
<img src="img_avatar.png" alt="Name1" style="width:100%">
</div>

<div class="w3-third">
<img src="img_avatar.png" alt="Name2" style="width:100%">
</div>

<div class="w3-third">
<img src="img_avatar.png" alt="Name3" style="width:100%">
</div>

</div>

How to Create a Card

Ready for something really advanced?

How about a Business Card in HTML?

Including both image and text.

Play with the code below for a while, until you think you got a grip on it.

After that, we will start coding really fantastic HTML pages.

John Doe

Engineer

HTML Code

<div class="w3-card" style="width:200px">
  <img src="img_avatar.png" style="width:100%">
  <div class="w3-container w3-center">
    <p class="w3-xlarge">John Doe</p>
    <p>Engineer</p>
  </div>
</div>

Categories

HTML CSS3 Bootstrap Foundation Sass JavaScript TypeScript JQuery AngularJS React NodeJS Highcharts PHP Python Python3 Django Linux Docker Ruby Java C C ++ Perl Servlet JSP Lua Scala Go ASP C # SQL MySQL SQLite MongoDB Redis Android Swift ionic Kotlin XML tutorial

Contact US