How to create a Contact us page card view using only HTML, and CSS from scratch

Hello Developers, In this artical I will teach you, How to create a Contact us page card view using only HTML, and CSS from scratch so now let’s get started. If you have any problem then you can watch the video. So now let’s Write the HTML and CSS code 

BihariGraphic:
Join our Telegram Channel and Discussion Group to get Daily Update’s and Idea’s

Here is HTML code

Go to your Blogger account and create a new page then Click to HTML view and paste code over here

      <div class="main-box">
          <div class="second-box">
              <div class="card-box">
                  <img src="https://blogger.googleusercontent.com/img/a/AVvXsEgzCLjYuV7m2D28mw57ijbpg1IP7SQXTCASWysNBWS0YhlGlb3Iym03Zd6Cw183Pp-xykWnx6crgES7pdwDBYGNs55uND7rnQdeJEXA8qrgL-QfljZYSoBHVBbUKbkIqciMaOjhTXFxvvOZZlr9uLqI1_ioxn2rLTdwg4cdrJvAiAfPXZ5VuGLO2mpCYA=s1280" alt="" width="200px" />
                  <div class="main-container">
                      <h2>BihariGraphic</h2>
                      <p class="onwer-title">Founder</p>
                      <p class="info-me">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                      <p class="gmail">help.biharigraphic@gmail.com</p>
                      <p><button class="button"> Contact</button></p>
                  </div>
              </div>
          </div>
      </div>

Here is CSS code

*{
    margin: 0;
    padding: 0;
}

body{
    font-family: sans-serif;
}

.main-box{
    display: flex;
    flex-direction: column;
    margin: 20px auto;
    align-content: space-around;
    justify-content: space-between;
    flex-wrap: wrap;
}

.second-box {
    float: left;
    width: 225px;
    height: 25em;
    margin-bottom: 16px;
    padding: 0 9px;
    border-radius: 5px;
    border: 0.5px solid rgb(168, 198, 255);
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
  }

  .card-box {
    padding: 0 15px;
}

.button {
    border: none;
    outline: 0px;
    display: flex;
    padding: 8px;
    color: white;
    font-size: 17px;
    margin: 30px auto;
    font-weight: 600;
    background-color: rgb(136, 0, 233);
    text-align: center;
    cursor: pointer;
    width: fit-content;
    place-content: space-around;
    border-radius: 5px;
    box-shadow: rgb(0 0 0 / 40%) 0px 2px 4px, rgb(0 0 0 / 30%) 0px 7px 13px -3px, rgb(0 0 0 / 20%) 0px -3px 0px inset;
    justify-content: space-between;
    align-content: space-around;
}

.button:hover {
    background-color: rgb(68, 212, 248);
  }

img{
    margin-block: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    border-radius: 15px 0 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

h2{
    font-weight: 200;
    margin-top: 20px;
    font-size: 20px;
    margin-bottom: 15px;
    color: rgb(0, 51, 255);
}

.onwer-title{
    margin-bottom: 22px;
    font-size: 15px;
    color: rgb(255, 113, 5);
    font-family: cursive;
}

.info-me{
    font-size: 12px;
    line-height: 1.4em;
    text-align: center;
    color: rgb(79, 77, 77);
}

.gmail{
    margin-top: 25px;
    color: rgb(47, 55, 106);
    font-size: 15px;
}

BihariGraphic:
Join our Telegram Channel and Discussion Group to get Daily Update’s and Idea’s