Body

Body

Body is the content area for your content you write i.e. heading for your products, text about your products, anchor links as a button, about us section, etc. Body is a main part of a website. All the content goes to the body.

Body contains different types of tags to each other to create a clean structure of HTML.

Here I’ll let you show website content area with some tags. You can see a About us section and Products section.

HTML Structure

<div class="container">
  
  <div class="about-us-wrapper">
    <h1> About Us </h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at elementum urna. Quisque vulputate ut dui eu placerat. Proin pretium turpis ut vehicula cursus. Nam sodales efficitur augue, non consequat augue sollicitudin ut. Etiam at diam non dolor fringilla commodo ac ultrices lacus. Vestibulum mattis sapien quis magna tincidunt, id pharetra elit ullamcorper. Vestibulum ultricies aliquam sem id bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
  </div>
  
<div class="product-parent-wrapper">
   <h1> Products </h1>
      <ul>
           <li>
              <img src="product-image.jpg" >
                <h3>Product Name</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at elementum urna.</p>
                <a href="#">
                  Read more
                </a>
            </li>
          
             <li>
              <img src="product-image.jpg" >
                <h3>Product Name</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at elementum urna.</p>
                <a href="#">
                  Read more
                </a>
            </li>
          
           <li>
              <img src="product-image.jpg" >
                <h3>Product Name</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at elementum urna.</p>
                <a href="#">
                  Read more
                </a>
            </li>
          
           <li>
              <img src="product-image.jpg" >
                <h3>Product Name</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at elementum urna.</p>
                <a href="#">
                  Read more
                </a>
            </li>
          
      </ul>
      
    </div>
  
  </div>

CSS: For content section UI

.container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 5%;
}
.about-us-wrapper{
  margin-bottom: 70px;
text-align: center;
}

.about-us-wrapper p{
  font-size:30px;
}
.product-parent-wrapper h1{
  text-align: center;
}
.product-parent-wrapper img{
      max-width: 100%;
    height: 200px;
}
.product-parent-wrapper ul {
  display: flex;
  flex-wrap: wrap;
}

  .product-parent-wrapper ul li {
  flex: 1 0 240px;
  padding: 0 10px;
        margin: 20px 0;
    text-align: center;
}


.product-parent-wrapper ul li h3 {
    font-size: 28px;
    color: #000;
}

.product-parent-wrapper ul li p {
    font-size: 20px;
    font-weight: 500;
    color: #000;
}

.product-parent-wrapper ul li a {
  font-size: 18px;
    font-weight: 500;
}