From a6876850b3eb4dc6efdd578fea07eb6da233355e Mon Sep 17 00:00:00 2001 From: Ashish Bharti Date: Sat, 20 Jan 2024 17:03:38 +0530 Subject: [PATCH 1/7] added header html --- blogs/01/index.html | 44 +++++++++++++++++++++++++------------------- 1 file changed, 25 insertions(+), 19 deletions(-) diff --git a/blogs/01/index.html b/blogs/01/index.html index abb8106..15b8d06 100644 --- a/blogs/01/index.html +++ b/blogs/01/index.html @@ -10,25 +10,31 @@ Mini Blog -
- -
+ +
+
+ +
+
From 3961c88a426c34c136959e3c43577f1d734aa864 Mon Sep 17 00:00:00 2001 From: Ashish Bharti Date: Mon, 22 Jan 2024 23:56:46 +0530 Subject: [PATCH 2/7] added posthiglightsection-01 index.html --- blogs/01/index.html | 106 ++++++++++++++++++++++++++++++++------------ 1 file changed, 77 insertions(+), 29 deletions(-) diff --git a/blogs/01/index.html b/blogs/01/index.html index 15b8d06..df95e33 100644 --- a/blogs/01/index.html +++ b/blogs/01/index.html @@ -10,50 +10,98 @@ Mini Blog - +
- -
-
-
-
-
-
- - -
+
+
+
+
+ +
+

The AI magically removes moving objects from videos.

+ July 19, 2019 +
+ + +
+

The AI magically removes moving objects from videos.

+ July 19, 2019 +
+ +
+ +
+ +
+
+ Travel + Food +
+

The AI magically removes moving objects from videos.

+ July 19, 2019 + +
+ +
-
-
-
-
-
-
+
+ + +
+

The 20 Biggest Fintech Companies In America 2019

+ July 19, 2019 +
+ + + +
+

The 20 Biggest Fintech Companies In America 2019

+ July 19, 2019 +
+ +
+
+ +
+
From 16825c0fbd80f00d1d23adc586a5a543c6740f16 Mon Sep 17 00:00:00 2001 From: Ashish Bharti Date: Tue, 23 Jan 2024 00:00:59 +0530 Subject: [PATCH 3/7] added mobile and desktop css of 1st highlight section --- blogs/01/styles/section.css | 177 ++++++++++++++++++++++++++++++++++++ 1 file changed, 177 insertions(+) create mode 100644 blogs/01/styles/section.css diff --git a/blogs/01/styles/section.css b/blogs/01/styles/section.css new file mode 100644 index 0000000..f90139c --- /dev/null +++ b/blogs/01/styles/section.css @@ -0,0 +1,177 @@ +div.topicsection{ + height: 500px; + background-color: var(--background-color); + padding: 80px 0px; + align-items: center; + display: grid; +} + +div.topicsection > .container{ + height: 430px; + width:1200px; + display:flex; + justify-content:center; + margin: 0 auto; +} + +div.topicsection > .container > div{ + width: 399.99px; + height: 430px; + +} + +div.topicsection > .container > div.first > a , div.third > a { + height: 200px; + width: 369.99px; + border-radius: 5px; + background-image:url('https://placehold.co/369x200'); +} + +div.topicsection > .container > div.second > a { + height: 430px; + width: 399.99px; + display:block; + border-radius: 5px; + background-image: url('https://placehold.co/369x400'); +} + +div.topicsection > .container > div.third{ + display: flex; + flex-direction: column; + align-items:center; + gap: 30px; +} + +div.topicsection > .container > div.first { + display: flex; + flex-direction: column; + align-items:center; + gap: 30px; + + +} + +div.topicsection > .container > div.first > a > div { + width: 320px; + height: 70px; + padding: 20px; + margin-top: 90px; + position: relative; +} + +div.topicsection > .container > div.first > a > div > h2{ + color: var(--h2text-color); + font-size: 18px; + font-weight: 350; + line-height: 1.5rem; + margin: 0; +} + +div.topicsection > .container > div.first > a > div > span{ + color: var(--lite-gray); +} + + +div.topicsection > .container > div.third > a > div { + width: 320px; + height: 70px; + padding: 20px; + margin-top: 80px; + position:relative; +} + +div.topicsection > .container > div.third > a > div > h2{ + color: var(--h2text-color); + font-size: 18px; + font-weight: 350; + line-height: 1.5rem; + margin-bottom: 0px; +} + +div.topicsection > .container > div.third > a > div > span{ + color: rgba(255, 255, 255, 0.5); +} + +div.topicsection > .container > div.second > a > div { + width: 350px; + height: 120px; + padding: 20px; + gap: 20px; + display:inline-grid; + margin-top: 280px; +} + +div.topicsection > .container > div.second > a > div > div{ + display: inline-block; + + letter-spacing: .2em; + font-weight: 700; + font-size: .6rem; + text-transform: uppercase; +} + +div.topicsection > .container > div.second > a > div > div > span.bgred{ + color: var(--h2text-color); + background-color:var(--span-red); + border-radius: 4px; + padding: 2px 10px; +} +div.topicsection > .container > div.second > a > div > div > span.bgblue{ + color: var(--h2text-color); + background-color:#2F89FC; + padding: 2px 10px; + border-radius: 4px; +} + + +div.topicsection > .container > div.second > a > div > span{ + color: rgba(255, 255, 255, 0.5); + margin-bottom: 0px; +} + + +div.topicsection > .container > div.second > a > div > h2{ + color:var(--h2text-color); + font-size: 18px; + font-weight: 350; + line-height: 1.5rem; + margin-bottom: -20px; + margin-top:0px; +} + +@media screen and (max-width:425px){ + div.topicsection{ + height: 1370px; + padding: 40px 0px; + align-items: center; + display: grid; + } + + div.topicsection > .container{ + height: 430px; + width:400px; + display:flex; + flex-direction:column; + justify-content:center; + margin: 0 auto; + } + div.topicsection > .container > div{ + height: 430px; + width:394px; + } + div.topicsection > .container > div.first > a , div.third > a , div.second > a { + height: 200px; + width: 394px; + background-image:url('https://placehold.co/394x200'); + } + div.topicsection > .container > div.first > a > div , div.third > a > div{ + height:90px; + width:350px; + } + div.topicsection > .container > div.first > a{ + margin-top:20px; + } + div.topicsection> .container > div.second > a{ + width:394px; + } +} \ No newline at end of file From 184a0a0be1b12705da5f1da910269396b8c88bfc Mon Sep 17 00:00:00 2001 From: Ashish Bharti Date: Tue, 23 Jan 2024 00:08:00 +0530 Subject: [PATCH 4/7] modify the path name of css file of that section --- blogs/01/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blogs/01/index.html b/blogs/01/index.html index df95e33..6bcb28d 100644 --- a/blogs/01/index.html +++ b/blogs/01/index.html @@ -5,7 +5,7 @@ - + Mini Blog From 38f572041d364952403346446c4c8df266b2f8ce Mon Sep 17 00:00:00 2001 From: Ashish Bharti Date: Tue, 23 Jan 2024 11:12:06 +0530 Subject: [PATCH 5/7] modify the css of mobile view --- blogs/01/styles/section.css | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/blogs/01/styles/section.css b/blogs/01/styles/section.css index f90139c..eb18027 100644 --- a/blogs/01/styles/section.css +++ b/blogs/01/styles/section.css @@ -141,7 +141,7 @@ div.topicsection > .container > div.second > a > div > h2{ @media screen and (max-width:425px){ div.topicsection{ - height: 1370px; + height: 820px; padding: 40px 0px; align-items: center; display: grid; @@ -171,7 +171,10 @@ div.topicsection > .container > div.second > a > div > h2{ div.topicsection > .container > div.first > a{ margin-top:20px; } - div.topicsection> .container > div.second > a{ - width:394px; + div.topicsection> .container > div.second { + display:none; + } + div.topicsection > .container > div.first{ + gap:10px; } } \ No newline at end of file From 148cb046708641e0c5636311fb0b4629a6a1262f Mon Sep 17 00:00:00 2001 From: Ashish Bharti Date: Tue, 23 Jan 2024 19:17:11 +0530 Subject: [PATCH 6/7] fixed the width and indentation --- blogs/01/index.html | 22 +++------------------- 1 file changed, 3 insertions(+), 19 deletions(-) diff --git a/blogs/01/index.html b/blogs/01/index.html index 6bcb28d..a4efb34 100644 --- a/blogs/01/index.html +++ b/blogs/01/index.html @@ -10,25 +10,19 @@ Mini Blog - -
-
@@ -59,7 +49,6 @@

The AI magically removes moving objects from videos.

July 19, 2019
-

The AI magically removes moving objects from videos.

@@ -67,7 +56,6 @@

The AI magically removes moving objects from videos.
-
@@ -77,20 +65,16 @@

The AI magically removes moving objects from videos.

The AI magically removes moving objects from videos.

July 19, 2019 -
- -
- - +
+

The 20 Biggest Fintech Companies In America 2019

July 19, 2019
-

The 20 Biggest Fintech Companies In America 2019

From 1cb3d667f3c96ffc99c7e3b58fa5342bc987e34f Mon Sep 17 00:00:00 2001 From: Ashish Bharti Date: Tue, 23 Jan 2024 19:19:31 +0530 Subject: [PATCH 7/7] Fixed the size the width --- blogs/01/styles/section.css | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/blogs/01/styles/section.css b/blogs/01/styles/section.css index eb18027..083f574 100644 --- a/blogs/01/styles/section.css +++ b/blogs/01/styles/section.css @@ -15,21 +15,21 @@ div.topicsection > .container{ } div.topicsection > .container > div{ - width: 399.99px; + width: 399px; height: 430px; } div.topicsection > .container > div.first > a , div.third > a { height: 200px; - width: 369.99px; + width: 369px; border-radius: 5px; background-image:url('https://placehold.co/369x200'); } div.topicsection > .container > div.second > a { height: 430px; - width: 399.99px; + width: 399px; display:block; border-radius: 5px; background-image: url('https://placehold.co/369x400'); @@ -63,7 +63,7 @@ div.topicsection > .container > div.first > a > div > h2{ color: var(--h2text-color); font-size: 18px; font-weight: 350; - line-height: 1.5rem; + line-height: 24px; margin: 0; } @@ -84,7 +84,7 @@ div.topicsection > .container > div.third > a > div > h2{ color: var(--h2text-color); font-size: 18px; font-weight: 350; - line-height: 1.5rem; + line-height: 24px; margin-bottom: 0px; } @@ -104,9 +104,9 @@ div.topicsection > .container > div.second > a > div { div.topicsection > .container > div.second > a > div > div{ display: inline-block; - letter-spacing: .2em; + letter-spacing: 3px; font-weight: 700; - font-size: .6rem; + font-size: 10px; text-transform: uppercase; } @@ -118,7 +118,7 @@ div.topicsection > .container > div.second > a > div > div > span.bgred{ } div.topicsection > .container > div.second > a > div > div > span.bgblue{ color: var(--h2text-color); - background-color:#2F89FC; + background-color:var(--span-blue); padding: 2px 10px; border-radius: 4px; } @@ -134,7 +134,7 @@ div.topicsection > .container > div.second > a > div > h2{ color:var(--h2text-color); font-size: 18px; font-weight: 350; - line-height: 1.5rem; + line-height: 24px; margin-bottom: -20px; margin-top:0px; }