From 60c3d386de208c8a7b30923cc3d0c04b9101ce85 Mon Sep 17 00:00:00 2001 From: TeshuKatepalli Date: Thu, 7 Dec 2023 10:52:21 +0530 Subject: [PATCH 1/6] Updated the landing page code --- blocks/columns/columns.css | 10 +++ blocks/forms/forms.css | 1 + scripts/scripts.js | 1 + styles/Typo.css | 98 +++++++++---------------- templates/Landing-page/Landing-page.css | 36 +++++++++ templates/Landing-page/Landing-page.js | 47 ++++++++++++ 6 files changed, 128 insertions(+), 65 deletions(-) create mode 100644 templates/Landing-page/Landing-page.css create mode 100644 templates/Landing-page/Landing-page.js diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css index 6a72a1d8..e6539bfd 100644 --- a/blocks/columns/columns.css +++ b/blocks/columns/columns.css @@ -23,6 +23,16 @@ transition: all 0.3s ease 0s; } +.cover-images picture img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; /* Maintain aspect ratio, fitting the image within the container */ + transition: all 0.3s ease 0s; +} + .zoomed-image picture img { position: absolute; top: 0; diff --git a/blocks/forms/forms.css b/blocks/forms/forms.css index f7bd0020..1342ca1e 100644 --- a/blocks/forms/forms.css +++ b/blocks/forms/forms.css @@ -1,5 +1,6 @@ .forms { padding: 50px 0; + min-height: 100px; } .forms h1, .forms h2, .forms h3, .forms h4, .forms h5, .forms h6 { diff --git a/scripts/scripts.js b/scripts/scripts.js index 6f9a48b2..ce40cf99 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -36,6 +36,7 @@ const TEMPLATE_LIST = [ 'blog', 'news', 'anniversary', + 'landing-page', ]; const CATEGORY_LIST = [ diff --git a/styles/Typo.css b/styles/Typo.css index d98c72af..534110a1 100644 --- a/styles/Typo.css +++ b/styles/Typo.css @@ -553,19 +553,9 @@ fieldset { background-color: rgba(0 0 0 / 5%); margin: 1em 0; padding: 1em; -} - -fieldset, -legend { border: 1px solid #fff; } -legend { - background-color: #00ace5; - color: #fff; - margin: 0; - padding: 2px 6px; -} optgroup { font-weight: 700; @@ -597,7 +587,7 @@ textarea { } select { - padding: 0.4em 0.6em; + padding: 0.6em; } #hs-pwd-widget-password { @@ -616,13 +606,6 @@ input[type="text"]:focus outline: none } -select,select:focus, -textarea:focus { - padding: .4em .6em; - border-color: var(--primary-color); - outline: none -} - .blog-pagination a, .button, .cta_button, @@ -634,18 +617,18 @@ input[type="reset"], .hs-form input[type="submit"], input[type="submit"] { background-color: var(--primary-color); - border-radius: 5px; - border: 1px solid var(--primary-color); + border-radius: 5px!important; + border: 1px solid var(--primary-color)!important; box-sizing: border-box; - color: var(--text-color); + color: var(--text-color)!important; cursor: pointer; display: inline-block; font-family: Brown-Ald, Helvetica, Arial, sans-serif; - font-size: 18px; + font-size: 18px!important; font-weight: 400; line-height: 100%; margin: 0; - padding: .8em 1.3em; + padding: .8em 1.3em!important; text-align: center; text-decoration: none; text-transform: uppercase; @@ -699,7 +682,7 @@ input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { background-color: #fff; - color: var(--primary-color); + color: var(--primary-color)!important; text-decoration: none; border: 1px solid var(--primary-color); } @@ -1021,7 +1004,7 @@ body.mrna input[type="submit"]:hover { } .shadow { - padding: 10%; + padding: 0!important; background-color: transparent; border: none; box-shadow: 0 2px 15px rgba(0 0 0 / 10%); @@ -1029,6 +1012,10 @@ body.mrna input[type="submit"]:hover { display: block; } +.shadow > div { + padding: 20px!important; +} + .no-shadow { box-shadow: none!important; } @@ -1264,6 +1251,24 @@ body.mrna input[type="submit"]:hover { width: 100% } +.hs-form .hs-form-checkbox { + padding:0; + margin: 0; +} + +.hs-form .hs-form-checkbox input { + margin-right: 8px!important; +} + +.hs-form .hs-form-radio { + padding:0; + margin: 0; +} + +.hs-form .hs-form-radio input { + margin-right: 8px!important; +} + .hs-form .hsformerror { background: #f72e00; border: 0; @@ -1728,48 +1733,11 @@ form.hs-form .hs-input[type="checkbox"] { } /* landing section */ - .landing-section { - box-sizing: border-box; - margin: 0 auto; - width: 980px; - display: flex; - align-items: flex-start; - justify-content: center; - gap: 5px; padding: 50px 0; -} - -.landing-section > div { - flex-grow: 1; - flex-basis: 0; - padding: 0 20px; -} - -.landing-section .forms { - padding: 30px; - background-color: #fff;; - border: 1px solid #cbd6e2; -} - -@media (max-width: 1024px) { - .landing-section { - padding: 40px 20px; - width: auto; - flex-direction: column; - } - - .landing-section > div { - padding: 0; - width: 100%; - } -} - -@media (max-width: 479px) { - .landing-section { - padding: 30px 10px; - width: auto; - } + float: none !important; + max-width: 1145px !important; + margin: 0 auto !important; } /* sidebar-navigation css */ diff --git a/templates/Landing-page/Landing-page.css b/templates/Landing-page/Landing-page.css new file mode 100644 index 00000000..59cb1ce6 --- /dev/null +++ b/templates/Landing-page/Landing-page.css @@ -0,0 +1,36 @@ +.landing-section .float-left { + width: 48%; + float: left; +} + +.landing-section .float-right { + float: right; + width: 48%; +} + +input, select { + /* -webkit-appearance: none; */ + /* appearance: none; */ + /* width: 100% !important; */ + border-radius: 1px!important; + border: 1px solid #d6dde3!important; + font-family: 'Open Sans',sans-serif!important; + font-size: 15px!important; + font-weight: 400!important; + line-height: 20px!important; + color: #6a6a6a!important; + padding: 10px!important; + margin: 5px 0!important; +} + +@media (max-width: 950px) { + .landing-section .float-left { + width: 100%; + float: none; + } + + .landing-section .float-right { + float: none; + width: 100%; + } +} \ No newline at end of file diff --git a/templates/Landing-page/Landing-page.js b/templates/Landing-page/Landing-page.js new file mode 100644 index 00000000..86dcf544 --- /dev/null +++ b/templates/Landing-page/Landing-page.js @@ -0,0 +1,47 @@ +export default function buildAutoBlocks(block) { + const landingSection = block.querySelector('.landing-section'); + + function createAndAppendElement(className) { + const element = document.createElement('div'); + element.classList.add(className); + return element; + } + + function extractAndClearFloatElements(className) { + const childrenCopy = landingSection.cloneNode(true); + const floatElements = [...childrenCopy.children].filter((child) => { + const childElement = child.querySelector('.block'); + if (childElement.classList.contains(className)) { + childElement.classList.remove(className); + return true; + } + return false; + }); + return floatElements; + } + + function appendElementsToContainer(container, elements) { + elements.forEach((element) => container.appendChild(element)); + } + + const clearFix = createAndAppendElement('clearfix'); + const floatLeftBlock = createAndAppendElement('float-left'); + const floatRightBlock = createAndAppendElement('float-right'); + + const floatLeftElements = extractAndClearFloatElements('float-left'); + const floatRightElements = extractAndClearFloatElements('float-right'); + + // Clear the landingSection + landingSection.innerHTML = ''; + + // Append 'float-left' elements first + appendElementsToContainer(floatLeftBlock, floatLeftElements); + + // Append 'float-right' elements next + appendElementsToContainer(floatRightBlock, floatRightElements); + + // Append clearFix + landingSection.appendChild(floatLeftBlock); + landingSection.appendChild(floatRightBlock); + landingSection.appendChild(clearFix); +} From d51bf1301e54bde62cfef62f4f60f0050fcab59c Mon Sep 17 00:00:00 2001 From: TeshuKatepalli Date: Thu, 7 Dec 2023 10:56:18 +0530 Subject: [PATCH 2/6] removed importants --- styles/Typo.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/styles/Typo.css b/styles/Typo.css index 534110a1..2eeaf512 100644 --- a/styles/Typo.css +++ b/styles/Typo.css @@ -618,9 +618,9 @@ input[type="reset"], input[type="submit"] { background-color: var(--primary-color); border-radius: 5px!important; - border: 1px solid var(--primary-color)!important; + border: 1px solid var(--primary-color); box-sizing: border-box; - color: var(--text-color)!important; + color: var(--text-color); cursor: pointer; display: inline-block; font-family: Brown-Ald, Helvetica, Arial, sans-serif; From c74f59405353c1b7264a245625e6bfae9c0fdca0 Mon Sep 17 00:00:00 2001 From: TeshuKatepalli Date: Thu, 7 Dec 2023 11:00:11 +0530 Subject: [PATCH 3/6] Updated teh submit button code --- templates/Landing-page/Landing-page.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/templates/Landing-page/Landing-page.css b/templates/Landing-page/Landing-page.css index 59cb1ce6..4460abcb 100644 --- a/templates/Landing-page/Landing-page.css +++ b/templates/Landing-page/Landing-page.css @@ -23,6 +23,10 @@ input, select { margin: 5px 0!important; } +input[type="submit"] { + color: var(--primary-color)!important; +} + @media (max-width: 950px) { .landing-section .float-left { width: 100%; From e14e81fbcdd9e26d5cfcede14e15a6885fddde47 Mon Sep 17 00:00:00 2001 From: TeshuKatepalli Date: Thu, 7 Dec 2023 11:02:03 +0530 Subject: [PATCH 4/6] Updated the input submit code --- templates/Landing-page/Landing-page.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/templates/Landing-page/Landing-page.css b/templates/Landing-page/Landing-page.css index 4460abcb..0b5ae305 100644 --- a/templates/Landing-page/Landing-page.css +++ b/templates/Landing-page/Landing-page.css @@ -24,6 +24,10 @@ input, select { } input[type="submit"] { + color: var(--text-color)!important; +} + +input[type="submit"]:hover { color: var(--primary-color)!important; } From d025712527e0d948446d8589c91314b9cec48ce5 Mon Sep 17 00:00:00 2001 From: TeshuKatepalli Date: Thu, 7 Dec 2023 11:04:18 +0530 Subject: [PATCH 5/6] Updated the button border --- templates/Landing-page/Landing-page.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/Landing-page/Landing-page.css b/templates/Landing-page/Landing-page.css index 0b5ae305..88e9f29f 100644 --- a/templates/Landing-page/Landing-page.css +++ b/templates/Landing-page/Landing-page.css @@ -13,7 +13,7 @@ input, select { /* appearance: none; */ /* width: 100% !important; */ border-radius: 1px!important; - border: 1px solid #d6dde3!important; + border: 1px solid #d6dde3; font-family: 'Open Sans',sans-serif!important; font-size: 15px!important; font-weight: 400!important; From 29e5825ac93c2245ae280585b78e83ed896a6fb5 Mon Sep 17 00:00:00 2001 From: TeshuKatepalli Date: Thu, 7 Dec 2023 11:06:14 +0530 Subject: [PATCH 6/6] Updated the border color --- templates/Landing-page/Landing-page.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/templates/Landing-page/Landing-page.css b/templates/Landing-page/Landing-page.css index 88e9f29f..edfd8bc0 100644 --- a/templates/Landing-page/Landing-page.css +++ b/templates/Landing-page/Landing-page.css @@ -13,7 +13,7 @@ input, select { /* appearance: none; */ /* width: 100% !important; */ border-radius: 1px!important; - border: 1px solid #d6dde3; + border: 1px solid #d6dde3!important; font-family: 'Open Sans',sans-serif!important; font-size: 15px!important; font-weight: 400!important; @@ -25,6 +25,7 @@ input, select { input[type="submit"] { color: var(--text-color)!important; + border: 1px solid var(--primary-color)!important; } input[type="submit"]:hover {