Untitled

mail@pastecode.io avatar
unknown
plain_text
22 days ago
4.0 kB
5
Indexable
Never
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Author Page</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome CSS -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
  <!-- Custom CSS -->
  <style>
    /* Add your custom styles here */
  </style>
</head>
<body>

  <div class="container">
    <!-- add padding to the top of the page -->
    
    <div class="row justify-content-center py-5">
      <div class="col-md-3 ">
        <!-- Author Profile -->
        <div class="card mb-4 text-center">
            <div class="rounded-circle overflow-hidden mx-auto my-4" style="width: 150px; height: 150px;">
                <img src="https://www.indiafilings.com/learn/wp-content/uploads/2023/03/Can-a-single-person-own-a-firm-in-India.jpg" class="card-img-top" alt="Author Image" style="width: 100%; height: 100%; object-fit: cover;">
            </div>
            <div class="card-body">
                <h5 class="card-title">Full Name</h5>
                <p class="card-text">Bio: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <ul class="list-group list-group-flush">
                <li class="list-group-item">Email: user@example.com</li>
                <li class="list-group-item">Joined: January 1, 2022</li>
                <li class="list-group-item">Total Posts: 10</li>
                <!-- Add more user details here -->
                <!-- Social Links -->
                <li class="list-group-item">
                  <a href="#" class="text-decoration-none me-2"><i class="fab fa-facebook"></i></a>
                  <a href="#" class="text-decoration-none me-2"><i class="fab fa-twitter"></i></a>
                  <a href="#" class="text-decoration-none me-2"><i class="fab fa-instagram"></i></a>
                  <!-- Add more social media icons as needed -->
                </li>
            </ul>
        </div>
      </div>
      <div class="col-md-9">
        <!-- Author Page Content -->
        <div class="card mb-4">
          <div class="card-body">
            <h5 class="card-title">Author Page</h5>
          </div>
          <div class="card-footer text-muted">
            Views: 100 | Last Updated: January 30, 2024
          </div>
        </div>
        

        <!-- Author's Posts -->
        <h4>Author's Posts</h4>
        <div class="row row-cols-1 row-cols-md-2 g-4">
          <!-- Post 1 -->
          <div class="col">
            <div class="card">
              <img src="https://buffer.com/cdn-cgi/image/w=1000,fit=contain,q=90,f=auto/library/content/images/size/w1200/2023/10/free-images.jpg" class="card-img-top" alt="Post 1 Image">
              <div class="card-body">
                <h5 class="card-title">Post 1 Title</h5>
                <p class="card-text">Two line description for Post 1.</p>
                <a href="#" class="btn btn-primary">Read More</a>
              </div>
            </div>
          </div>
          <!-- Post 2 -->
          <div class="col">
            <div class="card">
              <img src="https://buffer.com/cdn-cgi/image/w=1000,fit=contain,q=90,f=auto/library/content/images/size/w1200/2023/10/free-images.jpg" class="card-img-top" alt="Post 2 Image">
              <div class="card-body">
                <h5 class="card-title">Post 2 Title</h5>
                <p class="card-text">Two line description for Post 2.</p>
                <a href="#" class="btn btn-primary">Read More</a>
              </div>
            </div>
          </div>
          <!-- Add more posts here -->
        </div>
      </div>
    </div>
  </div>

  <!-- Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Leave a Comment