diff --git a/cta.svg b/cta.svg
new file mode 100644
index 0000000..b37bcc6
--- /dev/null
+++ b/cta.svg
@@ -0,0 +1,29 @@
+
+
+
+
diff --git a/hero_bg_2.svg b/hero_bg_2.svg
new file mode 100644
index 0000000..b1a182e
--- /dev/null
+++ b/hero_bg_2.svg
@@ -0,0 +1,128 @@
+
+
+
+
diff --git a/hero_bg_2_plain.svg b/hero_bg_2_plain.svg
new file mode 100644
index 0000000..72fa2e8
--- /dev/null
+++ b/hero_bg_2_plain.svg
@@ -0,0 +1,116 @@
+
+
+
+
diff --git a/index.html b/index.html
index ad57e2a..aa38bf6 100644
--- a/index.html
+++ b/index.html
@@ -26,9 +26,14 @@
-
+
\ No newline at end of file
diff --git a/main.css b/main.css
index 7ef28f1..4c8a00d 100644
--- a/main.css
+++ b/main.css
@@ -13,8 +13,9 @@ h1, h2, h3, h4, h5, h6 {
/*gap: 20px;*/
padding-top: 5.78vw; /* hor spacing from line to heading top */
margin-top: 2.25vw;
+ margin-bottom: 0;
- background-image: url("https://abanbytes.eu/upload/hero_bg_plain.svg");
+ background-image: url("https://abanbytes.eu/upload/hero_bg_2_plain.svg");
background-repeat: no-repeat;
background-position: center top;
background-size: 100% auto;
@@ -45,6 +46,7 @@ h1, h2, h3, h4, h5, h6 {
/*align-items: center;
justify-content: center;*/
flex-direction: column;
+ margin-bottom: 2.25vw; /* bottom distance to cta, in regular mode */
}
.block h2 {
@@ -66,7 +68,8 @@ h1, h2, h3, h4, h5, h6 {
flex-direction: column;
padding-top: 19.29vw;
margin-top: 2.25vw;
- margin-bottom: 2.25vw;
+ margin-bottom: 0;
+ width: max(100%, calc(15em + 2 * 12.85vw));
}
.block {
@@ -83,14 +86,58 @@ h1, h2, h3, h4, h5, h6 {
}
.block:nth-child(1) {
- margin-top:
+ margin-top: 0;
+ }
+ .block:nth-child(3) {
+ margin-bottom: 4.5vw; /* bottom 2.25vw + distance to cta, in responsive mode */
}
}
-div.body, div.footer {
+.cta {
+ margin-left: 0;
+ margin-top: -0.3vw;
+ padding-left: 13vw;
+}
+
+div.cta {
+ /*width: 100%;*/
+ min-height: 5.95vw;
+ background-image: url("https://abanbytes.eu/upload/cta.svg");
+ background-repeat: no-repeat;
+ background-position: left top;
+ background-size: auto 5.95vw;
+}
+
+div.footer {
margin-left: 7.14vw;
margin-right: 7.14vw;
}
+div.cta {
+ margin-right: 7.14vw;
+}
+.cta {
+ /* set variables */
+ --circle-center-y: 2.905vw;
+ --cta-heading-size: 1.5rem;
+ --cta-heading-line-height: 1.2;
+}
+.cta h2 {
+ margin-top: 0px;
+ margin-bottom: 0.5rem; /* sensitive to .cta h2 font-size */
+ font-size: var(--cta-heading-size);
+ line-height: var(--cta-heading-line-height);
+}
+.cta p:first-of-type {
+ margin-top: 0.5rem;
+}
+
+div.cta-content {
+ padding-top: calc(
+ var(--circle-center-y) -
+ ((var(--cta-heading-size) * var(--cta-heading-line-height)) * 0.5)
+ );
+ margin-left: 2.25vw;
+}
div.footer {
margin-top: 7.14vw;