diff --git a/content-placeholder/index.html b/content-placeholder/index.html
new file mode 100644
index 0000000..14a6974
--- /dev/null
+++ b/content-placeholder/index.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+ Content Placeholder
+
+
+
+
+
+
+
diff --git a/content-placeholder/script.js b/content-placeholder/script.js
new file mode 100644
index 0000000..e2f2359
--- /dev/null
+++ b/content-placeholder/script.js
@@ -0,0 +1,26 @@
+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 =
+ ''
+ title.innerHTML = 'Lorem ipsum dolor sit amet'
+ excerpt.innerHTML =
+ 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore perferendis'
+ profile_img.innerHTML =
+ ''
+ name.innerHTML = 'John Doe'
+ date.innerHTML = 'Oct 08, 2020'
+
+ animated_bgs.forEach((bg) => bg.classList.remove('animated-bg'))
+ animated_bg_texts.forEach((bg) => bg.classList.remove('animated-bg-text'))
+}
diff --git a/content-placeholder/style.css b/content-placeholder/style.css
new file mode 100644
index 0000000..ab5bdd6
--- /dev/null
+++ b/content-placeholder/style.css
@@ -0,0 +1,106 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ background-color: #ecf0f1;
+ font-family: 'Roboto', sans-serif;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ overflow: hidden;
+ margin: 0;
+}
+
+img {
+ max-width: 100%;
+}
+
+.card {
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ border-radius: 10px;
+ overflow: hidden;
+ width: 350px;
+}
+
+.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;
+ }
+}