diff --git a/FrontendMentor/article-preview-component/css/style.css b/FrontendMentor/article-preview-component/css/style.css index 55b2bd6..b51389b 100644 --- a/FrontendMentor/article-preview-component/css/style.css +++ b/FrontendMentor/article-preview-component/css/style.css @@ -33,6 +33,7 @@ body { .container { } + .articlePreview { display: flex; flex-direction: column; @@ -41,6 +42,8 @@ body { background-color: white; width: 87%; margin: 0 auto; + + box-shadow: 0px 40px 40px -10px rgba(201, 213, 225, 0.503415); } .previewImage { @@ -56,28 +59,35 @@ body { */ .previewImage > img { width: 100%; - margin:-4% 0 -15% 0% ; + margin:-4% 0 -15% 0%; } .previewBody { flex: 1 60%; - margin-top: 1.5rem; - padding: 1rem 1.5rem; + margin-top: 0.85rem; + padding: 1rem 1.75rem 1rem 1.5rem; } .articleSummary { } + .articleTitle { color: var(--veryDarkGrayishBlue); - font-size: 18px; - line-height: 1.3em; + font-size: 16px; + line-height: 24px; + font-weight: 700; + letter-spacing: 0.2px; } + .articleSell { margin-top: 0.5rem; color: var(--desaturatedDarkBlue); - font-size: 16px; - line-height: 1.3em; + font-size: 13px; + font-weight: 500; + letter-spacing: 0.12px; + line-height: 20px; } + .articleAuthor { margin-top: 1.5rem; display: flex; @@ -87,23 +97,25 @@ body { .authorImage { border-radius: 50%; - width: 2.5rem; - height: 2.5rem; + width: 2rem; + height: 2rem; } .nameAndDate { - margin-left: 0.5rem; + margin-left: 0.8rem; margin-top: auto; margin-bottom: auto; } .authorName { - color: var(--veryDarkGrayishBlue) + color: var(--veryDarkGrayishBlue); + font-weight: 700; } .articleDate { margin-top: 0.3rem; color: var(--desaturatedDarkBlue); + font-weight: 500; } .articleShareIcon { @@ -146,4 +158,25 @@ body { object-position: left; /* margin-bottom: 10%; */ } + + .previewBody { + margin-top: 0.5rem; + padding: 1.2rem 2.3rem 1.6rem 0rem; + margin-left: 2.45rem; + } + + .articleTitle { + font-size: 20px; + letter-spacing: 0.25px; + line-height: 28px; + + } + .articleSell { + margin-top: 0.5rem; + } + + .articleAuthor { + margin-top: 1rem; + } + } \ No newline at end of file diff --git a/FrontendMentor/article-preview-component/index.html b/FrontendMentor/article-preview-component/index.html index 132d7ab..2c56635 100644 --- a/FrontendMentor/article-preview-component/index.html +++ b/FrontendMentor/article-preview-component/index.html @@ -49,9 +49,9 @@ -