<!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: ""; 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&alt=json-in-script&callback=displayNational'></script> </body> </html> 
S M Ashraful Azom
Posted on
how to create post like this cover photo with below code?
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (0)