From 54c80a09eeeb8016992b5562bddc3fd2d1f8ab60 Mon Sep 17 00:00:00 2001 From: JSriwongsa Date: Wed, 24 May 2023 12:22:09 -0500 Subject: [PATCH] added blog section --- ecommerce/flora_website/blog.html | 124 +++++++++++++++++++++++++ ecommerce/flora_website/style_blog.css | 109 ++++++++++++++++++++++ 2 files changed, 233 insertions(+) create mode 100644 ecommerce/flora_website/blog.html create mode 100644 ecommerce/flora_website/style_blog.css diff --git a/ecommerce/flora_website/blog.html b/ecommerce/flora_website/blog.html new file mode 100644 index 0000000..5584778 --- /dev/null +++ b/ecommerce/flora_website/blog.html @@ -0,0 +1,124 @@ + + + + + + Blog + + + + + + + + + +
+
+ +
+ + +
+
+ + + HOME + + + + Shop + + + + Blog + + + + About Us + + + + Contact + +
+
+
+ +
+
+

On the blog

+
+
+ +
+
+ +
+
+ May 21, 2023 / Topic + Title +

all messages are in here.

+ Read More +
+
+ +
+
+ +
+
+ May 21, 2023 / Topic + Title +

all messages are in here.

+ Read More +
+
+ +
+
+ +
+
+ May 21, 2023 / Topic + Title +

all messages are in here.

+ Read More +
+
+ +
+
+ +
+
+ May 21, 2023 / Topic + Title +

all messages are in here.

+ Read More +
+
+ +
+
+ +
+
+ May 21, 2023 / Topic + Title +

all messages are in here.

+ Read More +
+
+ +
+
+ + +
+

© Flora All Rights Reserved

+
+ + \ No newline at end of file diff --git a/ecommerce/flora_website/style_blog.css b/ecommerce/flora_website/style_blog.css new file mode 100644 index 0000000..2aa2d93 --- /dev/null +++ b/ecommerce/flora_website/style_blog.css @@ -0,0 +1,109 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Klee One', cursive; + list-style: none; + text-decoration: none; + scroll-behavior: smooth; +} +:root{ + --bg-color:snow; + --main-color:lightcoral; + --minor-color:rgb(49, 48, 48); + --other-color:dimgray; + --text-color:black; +} +#blog{ + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + margin-top: 10%; +} +.blog-heading h1{ + font-size: 2.5rem; + font-family: 'Norican', cursive; +} +.blog-container{ + display: flex; + justify-content: center; + align-items: center; + margin: 20px 0px; + flex-wrap: wrap; +} +.blog-content{ + width: 350px; + background-color: var(--bg-color); + border: 1px solid var(--bg-color); + margin: 20px; +} +.blog-img{ + width: 100%; + height: auto; +} +.blog-img img{ + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; +} +.blog-text{ + padding: 30px; + display: flex; + flex-direction: column; +} +.blog-text span{ + color: var(--other-color); + font-size: 0.8rem; +} +.blog-text .blog-title{ + font-size: 1.2rem; + color: var(--main-color); +} +.blog-text .blog-title:hover{ + color: var(--other-color); + transition: all ease 0.5s; +} +.blog-text p{ + color: var(--text-color); + font-size: 0.8rem; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + margin: 20px 0px; +} +.blog-text a{ + color: var(--main-color); +} +.blog-text a:hover{ + color: var(--minor-color); + transition: all ease 0.5s; +} +@media(max-width:1200px){ + #blog{ + margin-top: 15%; + } + .blog-container{ + width: 120%; + } +} +@media(max-width:1100px){ + #blog{ + margin-top: 15%; + } + .blog-container{ + width: 70%; + } +} +@media(max-width:550px){ + #blog{ + margin-top: 18%; + } + .blog-container{ + margin: 20px 10px; + width: 100%; + } +}