Skip to main content

Featured

Creating a Visiting Card using HTML and CSS

Document

Hey there, Welcome again!

In this article we will be creating a simple visiting card using HTML and CSS. Now, Even if it cannot serve the purpose of an actual visiting card it can be very helpful in practicing CSS box model. This is what your final result will look like

Now the HTML code you will be writing for this project is very simple and I've provided it below . You can generate an avatar for yourself very easily as there are alot of websites online that can do it for you. You can generate the QR code on the chrome browser and use it.


<body>
    <div class="main">
    <table cellspacing="20">
        <tr>
          <td><img class=mp src="avataaars.png" alt="varsha's avatar" width="150"></td>
          <td><h1>Varsha S</h1>
            <pre><h3 class="sub">       Engineering Student</h3></pre>
            <hr>
            <pre><h3>  Coding Enthusiast ❤️</h3></pre>
        </td>
        </tr>
      </table>
      <div class="qr">
        <table cellspacing="20">
            <tr>
        <td><img src="qrcode_mycodingonlinereference.blogspot.com.png" alt="qr code" width="100"></td>
        <td><h4>(scan this to open my blog website)</h4>
        <h3>contact me:</h3>
        <h3>varsharaj575@gmail.com</h3></td>
        </tr>
        </table>
        </div>
      </div>
</body>

This is the CSS code that I've used ,you can get creative and design it the way you wish to!


    div.main{
    background-color: #495C83;
    border: 2px solid black;
    margin-top: 200px;
    margin-bottom: 200px;
    margin-left: 400px;
    margin-right: 400px;
    padding: 5px;
  }
  div.qr{
    background-color: #A8A4CE;
    border: 2px dotted black;
    padding: 0;
  }
  h1{
    color: #71C9CE;
    font-family: cursive;
  }
  h3.sub{
    color: #71C9CE;
    font-family: monospace;
  }
  img.mp{
    width:200px;
  }
  hr{
    border-style: none;
    border-top-style: solid;
    border-width:3px;
    border-color: black;
    width:40%;
  }
  ::selection{
    background-color: #C6CFFF;
    color: purple;
  }

HAPPY CODING!

Comments

Post a Comment

Popular Posts