Content Placeholder

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Content Placeholder</title>
  </head>
  <body>
    <div class="card">
      <div class="card-header animated-bg" id="header"> </div>

      <div class="card-content">
        <h3 class="card-title animated-bg animated-bg-text" id="title">
           
        </h3>
        <p class="card-excerpt" id="excerpt">
           
          <span class="animated-bg animated-bg-text"> </span>
          <span class="animated-bg animated-bg-text"> </span>
          <span class="animated-bg animated-bg-text"> </span>
        </p>
        <div class="author">
          <div class="profile-img animated-bg" id="profile_img"> </div>
          <div class="author-info">
            <strong class="animated-bg animated-bg-text" id="name"
              > </strong
            >
            <small class="animated-bg animated-bg-text" id="date"> </small>
          </div>
        </div>
      </div>
    </div>

    <div style="position: fixed; bottom: 10px; right: 10px; background-color: rgba(255, 255, 255, 0.9); padding: 8px 15px; border-radius: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);">
      Created by <a href="https://www.internpedia.in" style="color: #2980b9; text-decoration: none; font-weight: bold;" target="_blank" rel="noopener noreferrer">www.internpedia.in</a>
    </div>
  </body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
  box-sizing: border-box;
}

body {
  background-color: #f5f6fa;
  font-family: 'Roboto', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

img {
  max-width: 100%;
  transition: transform 0.3s ease;
}

.card {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  overflow: hidden;
  width: 350px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.card:hover img {
  transform: scale(1.05);
}

.card-header {
  height: 200px;
}

.card-header img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.card-content {
  background-color: #fff;
  padding: 30px;
}

.card-title {
  height: 20px;
  margin: 0;
}

.card-excerpt {
  color: #777;
  margin: 10px 0 20px;
}

.author {
  display: flex;
}

.profile-img {
  border-radius: 50%;
  overflow: hidden;
  height: 40px;
  width: 40px;
}

.author-info {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-left: 10px;
  width: 100px;
}

.author-info small {
  color: #aaa;
  margin-top: 5px;
}

.animated-bg {
  background-image: linear-gradient(
    to right,
    #f6f7f8 0%,
    #edeef1 10%,
    #f6f7f8 20%,
    #f6f7f8 100%
  );
  background-size: 200% 100%;
  animation: bgPos 1s linear infinite;
}

.animated-bg-text {
  border-radius: 50px;
  display: inline-block;
  margin: 0;
  height: 10px;
  width: 100%;
}

@keyframes bgPos {
  0% {
    background-position: 50% 0;
  }

  100% {
    background-position: -150% 0;
  }
}

const header = document.getElementById('header')
const title = document.getElementById('title')
const excerpt = document.getElementById('excerpt')
const profile_img = document.getElementById('profile_img')
const name = document.getElementById('name')
const date = document.getElementById('date')

const animated_bgs = document.querySelectorAll('.animated-bg')
const animated_bg_texts = document.querySelectorAll('.animated-bg-text')

setTimeout(getData, 2500)

function getData() {
  header.innerHTML =
    '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDXzOwF4kO19wyr0GLtV0KtlOuFypSIDGX2Z3sQvQ2m_sl4YUNajp4sE1XBEwJGm0aYAdTPPloGUVNQkKnrsXqAkspUX8v2I3w9pk8rgxRF_Aqi3R66dzP38npkCCxJYji-teXqsmNfXYnKGi_jSr5iXznBy29p05nkQiTOvP7QG7Oo-gn-fM_izTFCxwi/s1600/cardImage.jpg?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2072&q=80" alt="AI Technology" />'
  title.innerHTML = 'The Future of AI Technology'
  excerpt.innerHTML =
    'Exploring the latest advancements in artificial intelligence and machine learning technologies.'
  profile_img.innerHTML =
    '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOb1g4-oqswiM8_v1R7tnGy8pk9FDAzqonBxaf5UhtdeXsgtpfE2O3DaqfqifNWPmLv2BfgxzOtXmT16yFcwocFui_a7exrfsVMKgpBziPmBWPBdyeOwJN0Zi99gYe8yByjLdVEOhYCPzzvX_fcy5Rv1neTRaka9z4QLJtCCXGUh1nzZMlB3TGAjAjs1IZ/s1600/profile.png?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80" alt="Author" />'
  name.innerHTML = 'InternPedia'
  date.innerHTML = 'Aug 21, 2025'

  animated_bgs.forEach((bg) => bg.classList.remove('animated-bg'))
  animated_bg_texts.forEach((bg) => bg.classList.remove('animated-bg-text'))
}

Live Preview

Content Placeholder

About Us

#buttons=(Accept !) #days=(20)

Contact form

Content Placeholder

Related Pages

E-Commerce Landing Page

Hacker Typer Terminal Style Webpage

Developer Portfolio Website

Creative Hover Board Designing

Signup and Login Form

Login Form HTML CSS

Frequently Asked Questions

How to make animated navbar

Background Slider

Animated Navigation Menu Bar

#buttons=(Accept !) #days=(20)

Contact form