how to create post like this cover photo with below code?

#javascript #css #html

<!DOCTYPE html>
<html>
<head>
<style>

.label-posts-container .label-post img {
  height: 200px;
  object-fit: cover;
  width: 100%;
  display: flex;
}

.label-posts-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
    background: #fff;
    padding: 24px;
    margin: 32px 0;
    align-items: center;
}

.label-posts-container .label-post {
  background: #fff;
  display: flex;
  align-items: center;
  max-width: 700px;
  box-shadow: 0 4px 40px -8px rgba(0, 0, 0, 0.3);
}

.label-posts-container .thumb-container {
  flex: 1;
  width: 100%;
}

.label-posts-container .text-content {
  flex: 2;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
}

.label-posts-container .post-title-container {
  text-decoration: none;
}

.label-posts-container .post-title-container:hover {
  text-decoration: underline;
}

.label-posts-container .post-title {
  margin: 0;
  font-size: 24px;
  margin-bottom: 8px;
  color: #ef233c;
line-height: 1.2;
}

.label-posts-container .summary {
  line-height: 1.8;
  color: #023047;
  opacity: 0.9;
  position: relative;
  height: 80px;
  overflow: hidden;
  margin-bottom: 8px;
}

.label-posts-container .summary::after {
  content: &quot;&quot;;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 32px;
  width: 100%;
  background: linear-gradient(transparent, #fff);
}

.label-posts-container .read-more-btn {
  color: darkblue;
  font-weight: bold;
  font-size: 13px;
  text-transform: uppercase;
  text-decoration: none;
  align-self: flex-end;
}

@media (max-width: 640px) {
  .label-posts-container .label-post {
    flex-direction: column;
  }

  .label-posts-container .label-post img {
    width: 100%;
    height: 200px;
  }
}

</style>

</head>
<body>
<div class='label-posts-container national'>
    Posts related to জাতীয়:
</div>

<script>

    const National = document.querySelector(".national");

    const populateLabelPosts = (data, container) => {
    data.forEach(post => {
        const thumbContainer = document.createElement('a');
        thumbContainer.href = post.link[post.link.length - 1].href;
        thumbContainer.classList.add('thumb-container');

        const thumbnail = document.createElement('img');
        thumbnail.src = post.media$thumbnail.url.replace('/s72', '/s300');

        thumbContainer.appendChild(thumbnail);

        const textContent = document.createElement('div');
        textContent.classList.add('text-content');

        const postTitleContainer = document.createElement('a');
        postTitleContainer.href = post.link[post.link.length - 1].href;
        postTitleContainer.classList.add('post-title-container');   

        const title = document.createElement('h3');
        title.classList.add('post-title');
        title.innerHTML = post.title.$t;

        postTitleContainer.appendChild(title);

        textContent.appendChild(postTitleContainer);

        const labelPost = document.createElement('div');
        labelPost.classList.add('label-post');

        labelPost.appendChild(thumbContainer);
        labelPost.appendChild(textContent);

        container.appendChild(labelPost);
    });

    }

    const displayNational = (posts) => {
        populateLabelPosts(posts.feed.entry, National);
    }

</script>
<script src='https://www.sebahotnews.org/feeds/posts/summary/-/জাতীয়?max-results=5&amp;alt=json-in-script&amp;callback=displayNational'></script>

</body>
</html>

DEV Community

how to create post like this cover photo with below code?

Top comments (0)

Read next

Evolution of Web Tech and Browsers

Thoughts on ThoughtWorks Radar 2024

Introducing Pretty-js-log: Add Beautiful, Colorful Logging to Your Node.js Apps 🎨

HTML meta 標籤中 viewport 的設定