HEX

File: /var/www/vhost/disk-apps/teamdemo.sports-crowd.com/resources/views/personalized_news/news.blade.php
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Article</title>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
    integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

  <style>
    .container {
      max-width: 700px; /* Set a base max-width */
      margin: 0 auto; /* Center horizontally */
      padding: 1.5rem; /* Add some padding */
    }

    @media (max-width: 768px) {
      .container {
        padding: 1rem; /* Adjust padding for smaller screens */
      }

      .article-content h1 {
        font-size: 1.5rem; /* Adjust heading size */
      }
    }

    .text-center {
      text-align: center;
    }

    .large-image {
      display: block;
      margin: 0 auto;
      width: 100%; /* Make image fluid */
      height: auto;
    }

    .article-content {
      display: flex; /* Use flexbox for content layout */
      flex-direction: column;
    }

    .article-footer {
      padding: 1rem;
      border-radius: 5px;
      color: #6c757d;
      text-align: center;
    }

    .article-footer p {
        text-align: left;
        color: #6c757d; 
    }

    /* ... other styles */
  </style>
</head>

<body>
  <article class="container">
    <div class="space-y-4">

      <div class="text-center">
        <img src="{{ $publication->image }}" class="large-image" alt="User Image" data-toggle="modal" onerror="this.onerror=null; this.remove();">
      </div>

      <div class="article-content">
        <h1 class="font-weight-bold tracking-tight">{{ $publication->name }}</h1>
        <div class="prose prose-gray dark:prose-invert" style="color: #828c94;">
          <p>{{ $publication->description }}</p>
        </div>
      </div>

      <footer class="article-footer">
        <hr>
        <p>Publicado el <time datetime="{{ $publication->created_at }}">{{ $created_at }}</time></p>
      </footer>

    </div>
  </article>

</body>

</html>