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; + } +}