diff --git a/Day 24 - Content Placeholder/app.js b/Day 24 - Content Placeholder/app.js new file mode 100644 index 0000000..e69de29 diff --git a/Day 24 - Content Placeholder/index.html b/Day 24 - Content Placeholder/index.html new file mode 100644 index 0000000..c81382e --- /dev/null +++ b/Day 24 - Content Placeholder/index.html @@ -0,0 +1,55 @@ + + + + + + + + + Content | Placeholder + + +
+ + +
+

+ Lorem ipsum dolor sit amet +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi, + sapiente +   +   +   +

+
+
+ profile-img +
+
+ Jhon Doe + oct 08, 2021 +
+
+
+
+ + + + diff --git a/Day 24 - Content Placeholder/style.css b/Day 24 - Content Placeholder/style.css new file mode 100644 index 0000000..1ffbd32 --- /dev/null +++ b/Day 24 - Content Placeholder/style.css @@ -0,0 +1,78 @@ +*::after, +*::before { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: "Roboto", sans-serif; + background-color: #ecf0f1; + 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.7); + border-top-left-radius: 10px; + border-top-right-radius: 10px; + overflow: hidden; + width: 350px; +} + +.card-header { + height: 200px; +} + +.card-header img { + object-fit: cover; + height: 100%; + width: 100%; +} + +.card-contant { + background-color: #fff; + padding: 30px; +} + +.card-title { + height: 20px; + margin: 0; +} + +.card-excerpt { + color: #777; + margin: 10px 0 20px; +} + +.author { + display: flex; +} + +.profile-img { + height: 40px; + width: 40px; + border-radius: 50%; + overflow: hidden; +} + +.author-info { + display: flex; + flex-direction: column; + justify-content: space-around; + margin-left: 10px; + width: 100px; +} + +.author-info small { + color: #aaa; + margin-top: 5px; +}