From da353afdcfdb7e2f6596255b76d4dfc2dbdc92b2 Mon Sep 17 00:00:00 2001 From: Subrat Kumar Behera <148032888+codexpsk@users.noreply.github.com> Date: Mon, 23 Oct 2023 15:24:42 +0530 Subject: [PATCH 01/10] header html inserted --- Starter/index.html | 93 ++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 78 insertions(+), 15 deletions(-) diff --git a/Starter/index.html b/Starter/index.html index b2db673..73fe6dd 100644 --- a/Starter/index.html +++ b/Starter/index.html @@ -1,38 +1,101 @@ - - - - + + + + NewsFlash | Home - + - + - + - - - + + + + - + - + - + - - \ No newline at end of file + + From e1e118e30b18f59eecb1eb5a05367d7b3bd1252c Mon Sep 17 00:00:00 2001 From: Subrat Kumar Behera <148032888+codexpsk@users.noreply.github.com> Date: Mon, 23 Oct 2023 15:41:03 +0530 Subject: [PATCH 02/10] header html modified --- Starter/index.html | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/Starter/index.html b/Starter/index.html index 73fe6dd..557d7f9 100644 --- a/Starter/index.html +++ b/Starter/index.html @@ -76,6 +76,13 @@ + + Sign in + Sign up From 67d3dc0b1e3b0fe3c84bce8207487adec4d61192 Mon Sep 17 00:00:00 2001 From: Subrat Kumar Behera <148032888+codexpsk@users.noreply.github.com> Date: Mon, 23 Oct 2023 15:55:18 +0530 Subject: [PATCH 03/10] css reset --- Starter/assets/css/main.css | 101 +++++++++++++++++++++++++++--------- 1 file changed, 77 insertions(+), 24 deletions(-) diff --git a/Starter/assets/css/main.css b/Starter/assets/css/main.css index 7bbec97..0a95fe0 100644 --- a/Starter/assets/css/main.css +++ b/Starter/assets/css/main.css @@ -1,31 +1,84 @@ /* Import font */ -@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap"); /* Custom properties */ -:root{ - --light-color: #fff; - --light-color-alt: #afb6cd; - --primary-background-color: #131417; - --secondary-background-color: #252830; - --hover-light-color: var(--light-color); - --hover-dark-color: var(--primary-background-color); - --gradient-color: linear-gradient( - 115deg,#4fcf70,#fad648,#a767e5,#12bcfe,#44ce7b); - --transparent-light-color: rgba(255,255,255,.05); - --transparent-dark-color: rgba(0,0,0,.75); - --font-family: 'Poppins', sans-serif; - --font-size-xsm: 1.2rem; - --font-size-sm: 1.6rem; - --font-size-md: 2.4rem; - --font-size-lg: 3rem; - --font-size-xl: 4rem; - --gap: 2rem; - --margin-sm: 2rem; - --margin-md: 3rem; - --item-min-height-sm: 20rem; - --item-min-height-md: 30rem; +:root { + --light-color: #fff; + --light-color-alt: #afb6cd; + --primary-background-color: #131417; + --secondary-background-color: #252830; + --hover-light-color: var(--light-color); + --hover-dark-color: var(--primary-background-color); + --gradient-color: linear-gradient( + 115deg, + #4fcf70, + #fad648, + #a767e5, + #12bcfe, + #44ce7b + ); + --transparent-light-color: rgba(255, 255, 255, 0.05); + --transparent-dark-color: rgba(0, 0, 0, 0.75); + --font-family: "Poppins", sans-serif; + --font-size-xsm: 1.2rem; + --font-size-sm: 1.6rem; + --font-size-md: 2.4rem; + --font-size-lg: 3rem; + --font-size-xl: 4rem; + --gap: 2rem; + --margin-sm: 2rem; + --margin-md: 3rem; + --item-min-height-sm: 20rem; + --item-min-height-md: 30rem; } /* Base styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + /* font-size: 10px; */ + font-size: 62.5%; +} + +body { + font-family: var(--font-family); + font-size: var(--font-size-sm); + color: var(--light-color-alt); + background-color: var(--primary-background-color); + letter-spacing: 1px; + transition: background-color 0.25s, color 0.25s; +} + +a { + text-decoration: none; + color: inherit; +} +img { + max-width: 100%; + display: block; +} + +ul { + list-style: none; +} + +input, +button { + font: inherit; + color: inherit; + background-color: transparent; + outline: none; + display: flex; + justify-content: center; + align-items: center; +} + +i { + font-size: var(--font-size-md); +} /* Theme color change */ /* Reusable classes */ @@ -58,4 +111,4 @@ /* Blog post */ -/* Media queries */ \ No newline at end of file +/* Media queries */ From 894b126091a7077502ca31b6772ef5cb4f8416c0 Mon Sep 17 00:00:00 2001 From: Subrat Kumar Behera <148032888+codexpsk@users.noreply.github.com> Date: Mon, 23 Oct 2023 16:18:38 +0530 Subject: [PATCH 04/10] header css and part of js css --- Starter/assets/css/main.css | 116 +++++++++++++++++++++++++++++++++++- Starter/index.html | 4 +- 2 files changed, 115 insertions(+), 5 deletions(-) diff --git a/Starter/assets/css/main.css b/Starter/assets/css/main.css index 0a95fe0..6ed8a44 100644 --- a/Starter/assets/css/main.css +++ b/Starter/assets/css/main.css @@ -71,21 +71,131 @@ button { color: inherit; background-color: transparent; outline: none; - display: flex; - justify-content: center; - align-items: center; } i { font-size: var(--font-size-md); } /* Theme color change */ +body.light-theme { + --light-color: #3d3d3d; + --light-color-alt: rgba(0, 0, 0, 0.6); + --primary-background-color: #fff; + --secondary-background-color: #f1f1f1; + --hover-light-color: #fff; + --transparent-light-color: #252830; + --transparent-dark-color: rgba(0, 0, 0, 0.1); +} /* Reusable classes */ +.container { + max-width: 160rem; + margin: 0 auto; + padding: 0 1.5rem; +} + +.place-items-center { + display: inline-flex; + align-items: center; + justify-content: center; +} + +.screen-sm-hidden { + display: none; +} /* Header */ +.header { + background-color: var(--secondary-background-color); + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 999; +} + +.navbar { + display: flex; + align-items: center; + justify-content: space-between; + padding-block: 1.5rem; +} + +.logo { + font-size: var(--font-size-md); + color: var(--light-color); +} + +.menu { + position: absolute; + top: 8.5rem; + right: 1.5rem; + width: 23rem; + padding: 1.5rem; + background-color: var(--secondary-background-color); + opacity: 0; + transform: scale(0); + transition: opacity 0.25s ease-in; +} + +.list { + display: flex; + align-items: center; + gap: var(--gap); +} + +.menu > .list { + flex-direction: column; +} + +.list-link.current { + color: var(--light-color); +} + +.close-menu-icon { + display: none; +} + +.btn { + cursor: pointer; +} + +.list-link:hover, +.btn:hover, +.btn:hover span { + color: var(--light-color); +} + +.moon-icon { + display: none; +} + +.light-theme .sun-icon { + display: none; +} + +.light-theme .moon-icon { + display: block; +} /* Header JavaScript Styles */ +.header.active { + box-shadow: 0 1px 0.5rem --transparent-light-color; +} + +.menu.active { + box-shadow: 1px 1px 1rem --transparent-light-color; + opacity: 1; + transform: scale(1); +} + +.menu-toggle-icon.active .open-menu-icon { + display: none; +} + +.menu-toggle-icon.active .close-menu-icon { + display: block; +} /* Search */ diff --git a/Starter/index.html b/Starter/index.html index 557d7f9..0adaa64 100644 --- a/Starter/index.html +++ b/Starter/index.html @@ -31,8 +31,8 @@ +
+
+

Newsletter

+
+ + +
+ + +
+
+
+ +
From 96b0d4d3f02a5c054b7ad2d3ff5f8ca6b1813bb9 Mon Sep 17 00:00:00 2001 From: Subrat Kumar Behera <148032888+codexpsk@users.noreply.github.com> Date: Tue, 24 Oct 2023 17:38:55 +0530 Subject: [PATCH 10/10] final --- Starter/assets/css/main.css | 285 +++++++++++++++++++++++- Starter/assets/js/main.js | 6 + Starter/index.html | 114 +++++++++- Starter/post.html | 427 ++++++++++++++++++++++-------------- 4 files changed, 657 insertions(+), 175 deletions(-) diff --git a/Starter/assets/css/main.css b/Starter/assets/css/main.css index 5fa8553..ca6081e 100644 --- a/Starter/assets/css/main.css +++ b/Starter/assets/css/main.css @@ -83,8 +83,8 @@ body.light-theme { --primary-background-color: #fff; --secondary-background-color: #f1f1f1; --hover-light-color: #fff; - --transparent-light-color: #252830; - --transparent-dark-color: rgba(0, 0, 0, 0.1); + --transparent-dark-color: #252830; + --transparent-light-color: rgba(0, 0, 0, 0.1); } /* Reusable classes */ @@ -363,7 +363,7 @@ body.light-theme { bottom: 0; left: 0; padding: 2rem 1.5rem; - background-color: var(--transparent-dark-color); + background-color: var(--transparent-light-color); z-index: 10; width: 100%; transition: background-color 0.5s; @@ -377,7 +377,9 @@ body.light-theme { .article:hover .article-data-spacer { background-color: var(--hover-light-color); } - +.article:hover .article-title { + color: var(--hover-light-color); +} .article-data { display: flex; align-items: center; @@ -412,7 +414,7 @@ body.light-theme { flex-direction: column; gap: var(--gap); padding-block: 2rem; - border: 1px solid var(--transparent-light-color); + border-bottom: 1px solid var(--transparent-light-color); } .trending-news-box:last-of-type { @@ -558,11 +560,12 @@ body.light-theme { left: 50%; transform: translate(-50%, -50%); background-color: var(--transparent-dark-color); + padding: 1rem 2rem; } .popular-tags-container .article:hover .tag-name { - color: var(--light-color); + color: var(--hover-light-color); } .popular-tags-container .article:hover .article-image { @@ -582,11 +585,279 @@ body.light-theme { margin-bottom: 3rem; } - /* Footer */ +.footer { + background-color: var(--secondary-background-color); +} + +.footer-container { + gap: var(--gap); +} + +.company-data { + display: flex; + flex-direction: column; + order: 1; +} + +.company-description { + margin-block: var(--margin-sm); + max-width: 75%; +} + +.social-links { + margin-bottom: var(--margin-md); +} + +.copyright-notice { + opacity: 0.8; +} +.footer-list { + flex-direction: column; + align-items: flex-start; +} + +.footer-title { + font-size: var(--font-size-md); + text-transform: uppercase; + margin-bottom: var(--margin-sm); +} /* Scrollbar styles */ +::-webkit-scrollbar { + width: 1rem; +} + +::-webkit-scrollbar-track { + background-color: #f1f1f1; +} + +::-webkit-scrollbar-thumb { + background-color: #3f4254; +} +::-webkit-scrollbar-thumb:hover { + background-color: #2e303b; +} /* Blog post */ +.blog-post { + padding-bottom: 5rem; +} + +.blog-post-data { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + padding-block: 2.5rem; +} + +.blog-post-title { + font-size: clamp(3rem, 5vw, 6rem); +} + +.blog-post-data .article-data { + margin-bottom: 2.5rem; +} + +.blog-post-data img { + width: 100%; + height: var(--item-min-height-sm); + object-fit: cover; + object-position: center 10%; +} + +.blog-post-container .container { + max-width: 90rem; + padding: 0; + display: flex; + flex-direction: column; + gap: var(--gap); +} + +.quote { + background-color: var(--secondary-background-color); + padding: 2.5rem; +} + +.quote p { + font-style: italic; +} + +.quote span i { + font-size: 3.5rem; +} + +.author { + margin-top: 5rem; + gap: var(--gap); + background-color: var(--secondary-background-color); +} + +.author-image-box { + position: relative; + height: var(--item-min-height-sm); +} + +.author-about { + padding: 1.5rem; + display: flex; + flex-direction: column; + gap: 1rem; +} + +.author-name { + color: var(--light-color); + font-weight: 400; +} + +.author p { + max-width: 50rem; + margin-bottom: 1rem; +} + +.author-about .social-links { + margin-top: auto; + margin-bottom: 0; +} /* Media queries */ + +@media screen and (min-width: 700px) { + .trending-news-box { + flex-direction: row; + align-items: center; + } + .trending-news-image-box { + width: 50%; + } + + .trending-news-data { + margin: auto; + text-align: center; + } + + .newsletter-description { + max-width: 40rem; + } + .popular-tags-container, + .footer-container { + grid-template-columns: repeat(2, 1fr); + } + .form-container-inner { + align-items: center; + } + .company-data { + order: 0; + } + .author { + grid-template-columns: 25rem 1fr; + } +} + +@media screen and (min-width: 768px) { + .featured-content { + grid-template-columns: repeat(4, 1fr); + grid-template-rows: 5rem repeat(4, 1fr); + } + .headline-banner { + grid-column: 1/-1; + font-size: var(--font-size-sm); + } + .featured-article { + grid-column: 3/-1; + grid-row: 2/4; + } + .featured-article-1 { + grid-column: 1/3; + } + .featured-article-3 { + grid-column: 1/-1; + grid-row: 4/6; + } + .older-posts .article { + grid-template-columns: 25rem 1fr; + } + .older-posts-article-image-wrapper { + height: auto; + } + .blog-post-data img { + height: var(--item-min-height-md); + } +} + +@media screen and (min-width: 1024px) { + .menu { + position: initial; + width: initial; + padding: initial; + background-color: transparent; + opacity: initial; + transform: initial; + } + + .menu > .list { + flex-direction: row; + } + + .screen-lg-hidden { + display: none; + } + + .screen-sm-hidden { + display: block; + } + + .sign-up-btn { + padding: 0.4rem; + } + .btn.fancy-border:hover::before { + animation: animate_border 0.75s linear infinite; + } + @keyframes animate_border { + to { + transform: translateX(-50%); + } + } + .featured-articles-container { + grid-template-columns: 1fr 40rem; + } + .trending-news-image-box { + width: 10rem; + height: 10rem; + } + .popular-tags-container { + grid-template-columns: repeat(3, 1fr); + } + .footer-container { + grid-template-columns: repeat(5, 1fr); + } + .company-data { + grid-column: span 2; + } + .company-description { + max-width: 85%; + } + .copyright-notice { + margin-top: auto; + } + .blog-post-data img { + height: 40rem; + } +} + +@media screen and (min-width: 1200px) { + .older-posts-grid-wrapper { + grid-template-columns: repeat(2, 1fr); + } +} + +@media screen and (min-width: 1500px) { + .featured-article { + grid-column: 3/-1; + } + .featured-article-1 { + grid-column: 1/3; + grid-row: 2/-1; + } +} diff --git a/Starter/assets/js/main.js b/Starter/assets/js/main.js index dd54c17..b4e053f 100644 --- a/Starter/assets/js/main.js +++ b/Starter/assets/js/main.js @@ -82,3 +82,9 @@ const swiper = new Swiper(".swiper", { }, }, }); + +document.addEventListener("DOMContentLoaded", () => { + const yrSpan = selectElement(".yrSpan"); + let year = new Date().getFullYear(); + yrSpan.innerHTML = year; +}); diff --git a/Starter/index.html b/Starter/index.html index b048747..f4f72a3 100644 --- a/Starter/index.html +++ b/Starter/index.html @@ -629,12 +629,122 @@
Subscribe to NewsFlash
- - + diff --git a/Starter/post.html b/Starter/post.html index 961822e..cfad07e 100644 --- a/Starter/post.html +++ b/Starter/post.html @@ -1,199 +1,294 @@ - - - - + + + + NewsFlash | Post - + - + - + - - - + + +
+
+
+ + +
+ Or press ESC to close. +
-
- -
- - -
- Or press ESC to close. + +
+ +
+
+
+

Is VR the future

+
+ Dec 6th 2021 + + 4 min read +
+
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure et + exercitationem mollitia architecto quasi eum eos culpa consequatur + magnam velit non excepturi magni unde, provident odio natus libero + est saepe! +

- +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur aut + odio facilis minima cum quasi aliquam, illo illum esse totam, quidem + ducimus inventore incidunt magnam! +

-
- - +
+

+ Lorem ipsum dolor, + sit amet consectetur adipisicing elit. Animi, illo iste. Modi + voluptatem repudiandae totam! +

+
+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate + omnis nihil odit mollitia doloribus beatae distinctio, corporis + alias maxime? Ea doloribus enim incidunt consectetur doloremque, + assumenda placeat. Quibusdam, fugit suscipit! +

+ +
+
+ +
+
+

John Doe

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, + accusantium? +

+ +
+
+
+
+ - - \ No newline at end of file + +