How to create About Section with HTML and CSS

In this article, you will learn how to create Website About Card Section Card using only HTML & CSS. Earlier in this blog, I have shared a couple of simple Card Design, but here in this blog, I am going to create a Website About Section Card only with HTML and CSS. Apart from this, I have shared many Web design in my blog. Please make sure to check those as well.

Below is the video tutorials. watch and practices.

Website card is a powerful manner to give your enterprise details, multi function location, optimized for cell devices. As you are probable conscious, internet access from cell devices surpassed computing device about few years ago, so it's miles more essential than ever for corporations to have a cell-pleasant presence. Internet cards provide a convenient way to archive this.

Whilst considering the format styling for a website it’s crucial to consider the meant purpose and target audience of the layout, the sources available for the internet site (text, snap shots, video, and hyperlinks), your very own layout preferences, and any current branding inclusive of a logo or print advertising and marketing material. Every of these will outline in component the layout selections that are made.

Source Code:

First, you have to create two files. One of them is HTML, and the other one is CSS. After creating the files, paste the code provided below.

HTML CODE:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>About Section | By Code Info</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="wrapper">
      <h1>-- About Section --</h1>
      <div class="about-section">
        <img src="pic/showcase.jpg" />
        <p>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel nam harum fuga adipisci facilis pariatur reiciendis dicta distinctio, beatae laudantium nemo dolor? Quia, quibusdam ex doloribus illum ipsa earum odio repudiandae eligendi dicta commodi dolores.
          <br />
          <button>Hire Me</button>
          <button>More Info</button>
        </p>
      </div>
    </div>
  </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you have to create a file with .css extension.

CSS CODE:

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap");

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #1da1f2;
    font-family: "Poppins", sans-serif;
}

.wrapper{
    background: #fff;
    max-width: 750px;
    width: 100%;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

h1{
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.about-section{
    display: flex;
}

img{
    width: 200px;
    margin: 10px;
    border-radius: 10px;
    box-shadow: -5px 10px 15px rgba(0, 0, 0, 0.4);
}

p{
    margin: 10px;
}
button{
    outline: none;
    border: none;
    cursor: pointer;
    width: 100px;
    padding: 8px 12px;
    background: #1da1f2;
    margin: 25px 20px 0 0;
    color: white;
    border-radius: 6px;
}
button:hover{
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.3);
}

I hope you liked this snippet. If so, please share the blog and follow us in our social media profiles and stay connected with this blog. Thank you for visiting.

You may like this:

Source Code:

HTML CODE:

CSS CODE:

Post a Comment

Post a Comment

About Us

Contact Form