From 08f11956cadc9c73b64737660597aa713337a8d9 Mon Sep 17 00:00:00 2001 From: Daryl Magera Date: Mon, 26 Aug 2024 22:49:22 -0700 Subject: [PATCH] added a blog section --- build/main.css | 121 ++++++++++++++++++++++++++++- index.html | 72 ++++++++++++++++- resources/blog-placeholder-one.jpg | Bin 0 -> 101786 bytes resources/blog-placeholder-two.jpg | Bin 0 -> 37328 bytes 4 files changed, 188 insertions(+), 5 deletions(-) create mode 100644 resources/blog-placeholder-one.jpg create mode 100644 resources/blog-placeholder-two.jpg diff --git a/build/main.css b/build/main.css index d047d05..5568ea8 100644 --- a/build/main.css +++ b/build/main.css @@ -45,10 +45,16 @@ a.prevent-default-style-logo:visited { cursor: pointer; } +section { + padding-top: var(--padding-60); + /* padding-bottom: var(--padding-60); */ +} + h2 { font-size: 2.4rem; text-transform: uppercase; margin: 40px 0; + text-align: center; } h3 { @@ -560,7 +566,6 @@ p { display: grid; justify-items: center; justify-content: center; - padding-top: var(--padding-60); width: 100%; } @@ -585,7 +590,121 @@ p { .about .about__content .about__img img { width: 100%; } +/* ============***End of About styles***============ */ + +/* ============***Beginning of Pricing Section styles***============ */ +.pricing { + color: var(--primary-color); + background-color: var(--light-text-color); +} + + + +/* ============***End of Pricing styles***============ */ + +/* ============***Beginning of Classes Section styles***============ */ +.classes { + color: var(--light-text-color); + background-color: var(--primary-color); +} + + + +/* ============***End of Classes styles***============ */ + +/* ============***Beginning of Blog Section styles***============ */ +.blog { + color: var(--primary-color); + background-color: var(--light-text-color); + padding-bottom: var(--padding-60); +} +.blog__desc { + color: var(--primary-color); + text-align: center; +} +.blog__container { + display: grid; + place-content: center; + grid-template-columns: repeat(2, 50%); + grid-column-gap: 20px; + grid-row-gap: 60px; + font-size: 1.2rem; + padding: var(--padding-60); + /* padding-bottom: 100px; */ + overflow: hidden; +} + +@media screen and (max-width: 600px) { + .blog__container { + padding: var(--padding-30); + grid-column-gap: 0; + } + } + .blog__post { + display: grid; + grid-template-columns: 40% 60%; + background-color: var(--white-color); + box-shadow: 2px 4px 5px 1px #ddcfa746; + } + @media screen and (max-width: 1030px) { + .blog__post { + grid-column: 1 / end; + } + } + @media screen and (max-width: 600px) { + .blog__post { + grid-template-columns: 100%; + } + } + .postimg__container { + width: inherit; + height: inherit; + overflow: hidden; + } + .post__img { + width: 100%; + height: 100%; + object-fit: cover; + transform: scale(1); + transition: transform 0.3s ease-in-out; + } + .post__img:hover { + transform: scale(1.2); + } + .post__content { + padding: 0 10px 0 20px; + } + .post__date { + display: inline-block; + color: var(--primary-color); + font-style: normal; + font-weight: 300; + padding: 30px 0; + } + .post__title { + color: var(--tertiary-color); + font-size: 1.3rem; + margin: 10px 0; + } + .post__desc { + color: var(--primary-color); + padding: 10px 5px; + } + .post__readmore { + display: inline-block; + color: var(--tertiary-color); + font-size: 1.2rem; + padding: 5px 0; + margin: 5px 0 20px 0; + border-bottom: 3px solid var(--tertiary-color); + } + .blog__moreblogs { + grid-column: 1 / end; + display: grid; + justify-content: center; + } +/* ============***End of Blog styles***============ */ /* Key Frames Animations */ @keyframes logo-animation { diff --git a/index.html b/index.html index 4f2cb0e..ec38f04 100644 --- a/index.html +++ b/index.html @@ -105,9 +105,10 @@ @@ -116,8 +117,9 @@ -
-

About

+ +

About

+

"After having a road accident when I was 17, each and every doctor and physiotherapist recommended I try @@ -140,6 +142,68 @@

About

+ + +
+

Pricing

+
+

COMING SOON

+
+
+ + +
+

Classes

+
+

COMING SOON

+
+
+ + +
+

Blog

+

Latest Blog Post.

+ +
+
+
+ + Post 1 Headline + +
+
+ Tue Aug 27 2024 | Category +
Post 1 Headline
+

+ Lorem ipsum odor amet, consectetuer adipiscing elit. Ipsum non etiam odio nulla dignissim cras porta... +

+ Read More +
+
+ + +
+
+ + Post 2 Headline + +
+
+ Mon Aug 26 2024 | Category +
Post 2 Headline
+

+ Lectus suspendisse class amet; orci amet cursus. Phasellus sapien sociosqu velit aptent ex taciti... +

+ Read More +
+
+
+ +
+ More Blogs +
+
+