From e42646cfd4656e251892404a54838f420e581d07 Mon Sep 17 00:00:00 2001 From: Inna Atanasova Date: Sat, 27 Apr 2024 19:11:22 -0400 Subject: [PATCH 1/2] add FAQ section --- css/common.css | 59 +++++++++++++++++++++++++++++++++++++++++++++- index.html | 64 ++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 122 insertions(+), 1 deletion(-) diff --git a/css/common.css b/css/common.css index 38c2cdc..a737809 100644 --- a/css/common.css +++ b/css/common.css @@ -701,4 +701,61 @@ footer a:is(:focus, .active, .active:hover) { footer a:is(.active) { text-decoration-color: var(--white); -} \ No newline at end of file +} + +.cc-faq { + margin-block: 3rem 6rem; +} + +.cc-faq h2 { + text-align: center; +} + +.cc-faq ul { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; +} + +.cc-faq a { + display: inline-flex; + font-size: 1rem; + font-weight: 600; +} + +.cc-faq li { + width: 100%; +} + +.cc-faq li { + align-self: center; + text-align: center; +} + +.cc-faq h3 { + font-size: var(--type-0); + padding-block: 0; + margin-block: 2rem 0; + color: var(--code-connect-color); + cursor: pointer; +} + +.cc-faq p { + margin-block-start: 0.5rem; + margin-block-end: 0; + display: none; +} + +.cc-faq p.active { + display: block; + } + +@media only screen and (min-width: 768px) { + .cc-faq li { + width: 100%; + align-self: flex-start; + text-align: start; + } +} diff --git a/index.html b/index.html index da57308..a22accb 100644 --- a/index.html +++ b/index.html @@ -125,6 +125,64 @@

Location

+
+
+
+

FAQ

+
    + +
  • +

    How big is the event?

    +

    + There will be ~400 people on site in St. Leon-Rot. The number of people attending online is hard to predict. +

    +
    • + +
  • +

    Livestreams: do I need to register?

    +

    + No 😁. All streams will be publicly accessible. We'll put up the URLs everywhere (including this site) as soon as the streams are live. +

    +
    • + +
  • +

    Will there be food and drinks on-site?

    +

    + Yes 😋. And plenty, including coffee and vegetarian options. All free. Also for the evening event.
    + In case you have special dietary requirements (such as gluten- or lactose intolerance), let us know via e-mail and we'll work something out. +

    +
    • + +
  • +

    What's happening on the pre-conference evening on Mon, June 3?

    +

    + There's an unofficial evening event happening on Monday, June 3, prior to the three Code Connect events -
    all Code Connect participants are invited, from re>≡CAP, UI5con and ABAPconf.
    + We'll meet at the cozy Spanish-stlye restaurant »La Tortuga« in Walldorf - there'll be no agenda or seating order, we'll just get together for food, drinks, tech- & non-tech talk and being merry.
    + Doors open a 7pm (19:00 CEST) and we have the location to ourselves.
    + Food is flat €17 for an all-in Tapas 🥗🍤🧆🍖 buffet that includes vegetarian tapas; drinks are separate and to be paid individually.
    + Note that you'll be asked to pay the flat €17 at the door (credit cards accepted) where you'll also get a bracelet indicating you're with the cool Code Connect people 😎 +

    +
    • + +
  • +

    WLAN on-site?

    +

    Yes. SSID and access code(s) will be provided upon check-in and in the conference app.

    +
    • + +
  • +

    I'm off after the event. Any place to park my bags/luggage?

    +

    Yes. There'll be a locked room available to park bags/luggage in. Just ask at the registration desk.

    +
    • + +
  • +

    Is there a dress code?

    +

    Please. No. You wear what you're comfy in. So will the org team.

    +
    • +
+
+
+
+

Our sponsors

@@ -156,3 +214,9 @@

Our sponsors

+ + From 32e5431dbf3b64c3ce281876fc36d533c64c5734 Mon Sep 17 00:00:00 2001 From: Inna Atanasova Date: Wed, 27 Nov 2024 11:01:35 -0500 Subject: [PATCH 2/2] update for 2024 --- css/common.css | 768 ++++++++++++++++------------------ images/CodeConnect.svg | 10 + images/codeconnect-signet.svg | 3 + images/heart.svg | 3 + images/lines.svg | 13 + images/pin.svg | 3 + images/recap-logo.svg | 11 + images/ui5con-logo.svg | 3 + index.html | 447 +++++++++++--------- 9 files changed, 642 insertions(+), 619 deletions(-) create mode 100644 images/CodeConnect.svg create mode 100644 images/codeconnect-signet.svg create mode 100644 images/heart.svg create mode 100644 images/lines.svg create mode 100644 images/pin.svg create mode 100644 images/recap-logo.svg create mode 100644 images/ui5con-logo.svg diff --git a/css/common.css b/css/common.css index a737809..5c4c046 100644 --- a/css/common.css +++ b/css/common.css @@ -1,69 +1,72 @@ :root { - --background-color: #F5F5F5; - --brand-color: #00C8E8; - --brand-color-alt: #0090DA; - --dark-brand-color: #242424; - --text-color: #686868; - --white: #fff; - --sucess-color: #30914c; - --code-connect-color: #3B4673; - --code-connect-brand-color: #3B4673; - --brand-color-recap: #0090DA; - --brand-color-ui5con: #FF5D17; - --brand-color-abap: #3B4673; - - --type-0: clamp(1rem, 0.9286rem + 0.3571vw, 1.25rem); - --type-1: clamp(1.2rem, 1.0964rem + 0.5179vw, 1.5625rem); - --type-2: clamp(1.44rem, 1.2934rem + 0.733vw, 1.9531rem); - --type-3: clamp(1.7281rem, 1.5244rem + 1.0188vw, 2.4413rem); - --type-4: clamp(2.0738rem, 1.7943rem + 1.3973vw, 3.0519rem); - --type-5: clamp(3.5rem, 2.1786rem + 6.6071vw, 8.125rem); + --logo-color: #8838EC; + --background-color: #F5F5F5; + --brand-color: #00C8E8; + --brand-color-alt: #0090DA; + --dark-brand-color: #000; + --text-color: #000; + --text-color-contrast: #fff; + --white: 255, 255, 255; + --success-color: #30914c; + --code-connect-color: #3B4673; + --code-connect-brand-color: #3B4673; + --brand-color-recap: #0090DA; + --brand-color-ui5con: #FF5D17; + --brand-color-hana: #f00; + --brand-color-codejam: #9D6B57; + + --type-0: clamp(1rem, 0.9286rem + 0.3571vw, 1.25rem); + --type-1: clamp(1.2rem, 1.0964rem + 0.5179vw, 1.5625rem); + --type-2: clamp(1.44rem, 1.2934rem + 0.733vw, 1.9531rem); + --type-3: clamp(1.7281rem, 1.5244rem + 1.0188vw, 2.4413rem); + --type-4: clamp(2.0738rem, 1.7943rem + 1.3973vw, 3.0519rem); + --type-5: clamp(3.5rem, 2.1786rem + 6.6071vw, 8.125rem); } @media (prefers-reduced-motion: reduce) { - *:not(svg, path) { - animation: none !important; - transition: none !important; - transform: none !important; - } + *:not(svg, path) { + animation: none !important; + transition: none !important; + transform: none !important; + } } @media (prefers-reduced-motion: no-preference) { - html { - scroll-behavior: smooth; - } + html { + scroll-behavior: smooth; + } } @font-face { - font-family: "72"; - src: url("../fonts/72-Light.woff2") format("woff2"); - font-weight: 300; - font-style: normal; - font-display: swap; + font-family: "72"; + src: url("../fonts/72-Light.woff2") format("woff2"); + font-weight: 300; + font-style: normal; + font-display: swap; } @font-face { - font-family: "72"; - src: url("../fonts/72-Regular.woff2") format("woff2"); - font-weight: normal; - font-style: normal; - font-display: swap; + font-family: "72"; + src: url("../fonts/72-Regular.woff2") format("woff2"); + font-weight: normal; + font-style: normal; + font-display: swap; } @font-face { - font-family: "72"; - src: url("../fonts/72-Bold.woff2") format("woff2"); - font-weight: 700; - font-style: normal; - font-display: swap; + font-family: "72"; + src: url("../fonts/72-Bold.woff2") format("woff2"); + font-weight: 700; + font-style: normal; + font-display: swap; } @font-face { - font-family: "72"; - src: url("../fonts/72-Black.woff2") format("woff2"); - font-weight: 900; - font-style: normal; - font-display: swap; + font-family: "72"; + src: url("../fonts/72-Black.woff2") format("woff2"); + font-weight: 900; + font-style: normal; + font-display: swap; } /* Document @@ -74,10 +77,10 @@ * IE on Windows Phone and in iOS. */ html { - height: 100%; - line-height: 1.35; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ + height: 100%; + line-height: 1.35; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections * ========================================================================== */ @@ -86,9 +89,9 @@ * `article` contexts in Chrome, Edge, Firefox, and Safari. */ h1 { - font-size: 2em; - margin-block: 0.67em; - margin-inline: 0; + font-size: 2em; + margin-block: 0.67em; + margin-inline: 0; } /* Grouping content * ========================================================================== */ @@ -100,7 +103,7 @@ dl ol, dl ul, ol dl, ul dl { - margin: 0; + margin: 0; } /** * Remove the margin on nested lists in Edge 18- and IE. @@ -109,7 +112,7 @@ ol ol, ol ul, ul ol, ul ul { - margin: 0; + margin: 0; } /** * 1. Add the correct box sizing in Firefox. @@ -117,24 +120,24 @@ ul ul { * 3. Show the overflow in Edge 18- and IE. */ hr { - box-sizing: content-box; /* 1 */ - color: inherit; /* 2 */ - height: 0; /* 1 */ - overflow: visible; /* 3 */ + box-sizing: content-box; /* 1 */ + color: inherit; /* 2 */ + height: 0; /* 1 */ + overflow: visible; /* 3 */ } /** * Add the correct display in IE. */ main { - display: block; + display: block; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ } /* Text-level semantics * ========================================================================== */ @@ -142,19 +145,19 @@ pre { * Add the correct text decoration in Edge 18-, IE, and Safari. */ abbr[title] { - text-decoration: underline; - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; + text-decoration: underline; + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; } ins { - text-decoration: none; + text-decoration: none; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { - font-weight: bolder; + font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. @@ -163,14 +166,14 @@ strong { code, kbd, samp { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { - font-size: 80%; + font-size: 80%; } /* Embedded content * ========================================================================== */ @@ -178,8 +181,8 @@ small { * Hide the overflow in IE. */ svg:not(:root) { - overflow: hidden; - vertical-align: middle; + overflow: hidden; + vertical-align: middle; } /* Tabular data * ========================================================================== */ @@ -188,8 +191,8 @@ svg:not(:root) { * 2. Remove text indentation from table contents in Chrome, Edge, and Safari. */ table { - border-color: inherit; /* 1 */ - text-indent: 0; /* 2 */ + border-color: inherit; /* 1 */ + text-indent: 0; /* 2 */ } /* Forms * ========================================================================== */ @@ -199,16 +202,16 @@ table { button, input, select { - margin: 0; - font-family: "72", sans-serif; + margin: 0; + font-family: "72", sans-serif; } /** * 1. Show the overflow in IE. * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE. */ button { - overflow: visible; /* 1 */ - text-transform: none; /* 2 */ + overflow: visible; /* 1 */ + text-transform: none; /* 2 */ } /** * Correct the inability to style buttons in iOS and Safari. @@ -217,545 +220,476 @@ button, [type="button"], [type="reset"], [type="submit"] { - -webkit-appearance: button; + -webkit-appearance: button; } /** * Correct the padding in Firefox. */ fieldset { - padding: 0; + padding: 0; } /** * Show the overflow in Edge 18- and IE. */ input { - overflow: visible; + overflow: visible; } /** * 1. Correct the text wrapping in Edge 18- and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. */ legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - white-space: normal; /* 1 */ + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + white-space: normal; /* 1 */ } /** * 1. Add the correct display in Edge 18- and IE. * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox. */ progress { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ } /** * Remove the inheritance of text transform in Firefox. */ select { - text-transform: none; + text-transform: none; } /** * 1. Remove the margin in Firefox and Safari. * 2. Remove the default vertical scrollbar in IE. */ textarea { - margin: 0; /* 1 */ - overflow: auto; /* 2 */ + margin: 0; /* 1 */ + overflow: auto; /* 2 */ } /** * 1. Correct the odd appearance in Chrome, Edge, and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { - height: auto; + height: auto; } /** * Correct the text style of placeholders in Chrome, Edge, and Safari. */ ::-webkit-input-placeholder { - color: inherit; - opacity: 0.54; + color: inherit; + opacity: 0.54; } /** * Remove the inner padding in Chrome, Edge, and Safari on macOS. */ ::-webkit-search-decoration { - -webkit-appearance: none; + -webkit-appearance: none; } /** * 1. Correct the inability to style upload buttons in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ } /** * Remove the inner border and padding of focus outlines in Firefox. */ ::-moz-focus-inner { - border-style: none; - padding: 0; + border-style: none; + padding: 0; } /** * Restore the focus outline styles unset by the previous rule in Firefox. */ :-moz-focusring { - outline: 1px dotted ButtonText; + outline: 1px dotted ButtonText; } /** * Remove the additional :invalid styles in Firefox. */ :-moz-ui-invalid { - box-shadow: none; + box-shadow: none; } /* * Add the correct styles in Edge 18-, IE, and Safari. */ dialog { - background-color: white; - border: solid; - color: black; - display: block; - height: fit-content; - left: 0; - margin: auto; - padding-block: 1rem; - padding-inline: 1rem; - position: absolute; - right: 0; - width: fit-content; + background-color: rgb(var(--white)); + border: solid; + color: black; + display: block; + height: fit-content; + left: 0; + margin: auto; + padding-block: 1rem; + padding-inline: 1rem; + position: absolute; + right: 0; + width: fit-content; } dialog:not([open]) { - display: none; + display: none; } /* * Add the correct display in all browsers. */ summary { - display: list-item; + display: list-item; } p { - margin-block-end: 1rem; - font-size: 1rem; + margin-block-start: 0; + margin-block-end: 1.5rem; + font-size: 1rem; } *, *:after, *:before { - box-sizing: border-box; + box-sizing: border-box; } html { - -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1); - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } body { - overflow-x: hidden; - font-family: "72", Arial, Helvetica, sans-serif; - margin: 0; - position: relative; - color: var(--text-color); - background-attachment: fixed; - background-repeat: no-repeat; - /* background: var(--background-color); */ - /* background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); */ - /* background: linear-gradient(to top, #9890e3 0%, #b1f4cf 100%); */ - /* background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); */ - background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%); + overflow-x: hidden; + font-family: "72", Arial, Helvetica, sans-serif; + margin: 0; + position: relative; + color: var(--text-color); } @media only screen and (orientation: landscape), (orientation: portrait) { - html { - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; - } + html { + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + } } .sr-only:not(:focus):not(:active) { - clip: rect(0 0 0 0); - -webkit-clip-path: inset(50%); - clip-path: inset(50%); - height: 1px; - overflow: hidden; - position: absolute; - white-space: nowrap; - width: 1px; + clip: rect(0 0 0 0); + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; } /* --------------------------- Typography --------------------------- */ h1 { - font-size: var(--type-5); - font-weight: 900; - - text-align: center; - background-image: linear-gradient(35deg, var(--brand-color), var(--brand-color-alt)); - background-clip: text; - color: transparent; + font-size: var(--type-5); + font-weight: 900; + text-align: left; + margin: 0; + line-height: 0; } h2 { - color: var(--code-connect-color); - font-size: 1.6rem; + color: var(--code-connect-color); + font-size: 1.6rem; } ul { - font-size: var(--type-0); + font-size: var(--type-0); } /* ---------------------- Interactive Elements --------------------------- */ a { - font-size: 1.2rem; - gap: 0.75rem; - display: flex; - align-items: center; - text-decoration: none; - text-decoration-color: currentColor; - color: var(--code-connect-color); - transition: all 0.1s ease; + text-decoration: none; + text-decoration-color: currentColor; + color: var(--code-connect-color); + transition: all 0.1s ease; } a:is(:hover) { - color: var(--code-connect-color); - text-decoration: underline; - text-decoration-color: currentColor; - text-decoration-thickness: 0.125rem; - text-underline-offset: 0.25rem; + color: var(--code-connect-color); + text-decoration: underline; + text-decoration-color: currentColor; + text-decoration-thickness: 0.125rem; + text-underline-offset: 0.25rem; } a:is(:focus, .active, .active:hover) { - outline: none; - color: var(--code-connect-color); - text-decoration: underline; - text-decoration-color: currentColor; - text-decoration-thickness: 0.125rem; - text-underline-offset: 0.25rem; + outline: none; + color: var(--code-connect-color); + text-decoration: underline; + text-decoration-color: currentColor; + text-decoration-thickness: 0.125rem; + text-underline-offset: 0.25rem; } a:is(.active) { - text-decoration-color: var(--code-connect-color); + text-decoration-color: var(--code-connect-color); +} + +.cc-btn-shape { + display: inline-block; + border-radius: 5px; + border: 1px solid var(--dark-brand-color); + font-size: 1rem; + font-weight: 600; + line-height: 1.3; + padding: .7rem; + margin-inline-end: .6rem; +} + +a.cc-btn-shape:focus-within { + outline: 2px solid var(--text-color-contrast); + outline-offset: -4px; +} + +a.cc-btn-shape:is(:hover) { + text-decoration: none; + background: var(--dark-brand-color); + color: var(--text-color-contrast); } +a.cc-btn-shape:is(:focus, .active, .active:hover) { + text-decoration: none; + background: var(--dark-brand-color); + color: var(--text-color-contrast); +} /* ----------------------------- Header ------------------------------ */ .cc-header { - padding-block: 10vh 2rem; - padding-inline: 1rem; - text-align: center; - color: var(--code-connect-color); + padding-block-start: 3.2rem; } -.cc-header img { - width: 65%; - z-index: 5; - position: relative; - margin-block: 4rem; +.logo { + height: 5.6rem; } -.cc-header p { - font-size: 1rem; - line-height: 1.4rem; +.logo g { + /* animation-name: colorswitch; */ + animation-duration: 15s; + animation-timing-function: ease-in-out; + animation-fill-mode: forwards; + animation-iteration-count: infinite; } -.cc-header-banner { - gap: 1rem; - display: flex; - align-items: center; - justify-content: center; +@keyframes colorswitch { + + 0% { + --logo-color: var(--brand-color-ui5con); + } + 25% { + --logo-color: var(--brand-color-recap); + } + 50% { + --logo-color: var(--brand-color); + } + 75% { + --logo-color: inherit; + } + 100% { + --logo-color: var(--brand-color-hana); + } } -.cc-header-banner span { - font-size: clamp(3rem, 10vw, 6rem); - color: var(--code-connect-color); +.cc-event-marker { + display: inline-block; + border-radius: 50%; + background-color: var(--logo-color); + color: rgb(var(--white)); + width: 4rem; + height: 4rem; + text-align: center; + margin-block: 2rem; + margin-inline-end: .8rem; + vertical-align: top; + cursor: pointer; } -/* ------------------------------ Main ------------------------------- */ -body { - margin: 0; +.cc-content-box .cc-event-marker { + margin-block: 0; + margin-inline-end: 0; + scroll-margin-block-start: 4rem; } -main, header { - margin-inline: auto; - max-width: 840px; +.cc-content-box.cc-sponsors .cc-teaser-content { + display: flex; + flex-direction: column; + justify-content: space-between; } -.cc-teaser { - gap: 0; - display: flex; - overflow: hidden; - text-align: left; - margin-block: 2rem; - margin-inline: 1rem; - align-items: stretch; - background: transparent; +/* .cc-content-box.cc-sponsors .cc-teaser-content p { + margin-block-end: 0; +} */ + +.cc-event-marker svg { + width: 2.6rem; + height: 3.9rem; } -.cc-teaser-date { - width: 20%; - display: flex; - flex-direction: column-reverse; - align-items: center; - justify-content: center; - color: var(--code-connect-color); - font-size: 1.4rem; - font-weight: bold; +.cc-event-marker-codejam { + background-color: var(--brand-color-codejam); } -.cc-teaser-date span:last-child { - font-size: 3rem; - line-height: 1; - font-weight: normal; +.cc-event-marker-codeconnect { + background-color: var(--logo-color); } -.cc-teaser-content { - width: 80%; - padding: 1.4rem; - padding-block: 1rem; - padding-inline: 1rem 0; - color: var(--text-color); +.cc-event-marker-recap { + background-color: var(--brand-color-recap); } -.cc-teaser-content h2 { - color: var(--code-connect-color); - font-size: 1.6rem; +.cc-event-marker-ui5con { + background-color: var(--brand-color-ui5con); } -.cc-teaser-content p { - font-size: 1rem; +.cc-event-marker-hanaconf { + background-color: var(--brand-color-hana); } -.cc-location { - gap: 1.1rem; - display: flex; - text-align: left; - align-items: center; - margin-inline: 2rem; - margin-block: 4rem; +.cc-header time { + display: block; + font-weight: 900; + font-size: 2.3rem; + line-height: 1; + color: var(--dark-brand-color); + margin-block-end: 2.5rem; } -.cc-location img { - width: clamp(4rem, 20% , 20rem); +.cc-header p { + line-height: 2; + color: var(--dark-brand-color); } -.cc-sponsors { - gap: 2rem; - display: flex; - margin-block: 2rem 8rem; - align-items: center; - flex-direction: column; +/* ------------------------------ Main ------------------------------- */ +body { + margin: 0; + background-color: var(--background-color); + background-image: url(../images/lines.svg); + background-repeat: no-repeat; + background-size: cover; } -.cc-logo-container { - gap: 4rem; - width: 100%; - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: center; +header, main, footer { + max-width: 1100px; + margin: 0 auto 5.5rem; + padding-inline: 1rem; } -.cc-logo-container a { - width: 30%; - height: 100%; - justify-content: center; +.cc-content-box { + background: rgba(var(--white), .85); + box-shadow: 0px 0px 2px rgba(34, 53, 72, 0.4), 0px 8px 16px rgba(34, 53, 72, 0.16); + border-radius: 1.25rem; + padding: 2.5rem 1.5rem; + backdrop-filter: blur(5px); } -.cc-logo-container img { - width: 100%; - height: 100%; -} - -.cc-link { - cursor: pointer; - font-weight: 600; - font-size: 1.2rem; - width: fit-content; - color: var(--white); - border-radius: 5rem; - margin-inline: auto; - text-decoration: none; - padding: 0.75rem 1.5rem; - margin-block-start: 2rem; - background-color: var(--code-connect-color); - transition: background-color 0.3s ease-in-out; - border: 0.125rem solid var(--code-connect-color); -} - -.cc-link:is(:hover) { - font-weight: 600; - text-decoration: none; - background-color: transparent; - color: var(--code-connect-color); -} - -a.cc-link:is(:focus, :active, :focus:hover) { - color: var(--white); - text-decoration: none; - outline-offset: 0.125rem; - background-color: var(--code-connect-color); - outline: 0.125rem solid var(--code-connect-color); -} - -p.cc-annonce-codejam { - margin-block-start: 4rem; -} - -p.cc-annonce-codejam a { - font-weight: bold; - display: inline-block; -} - -@media only screen and (min-width: 768px) { - .cc-header img { - width: 60%; - } - - .cc-header p { - font-weight: 500; - font-size: 1.2rem; - line-height: 1.5; - } - - .cc-header .cc-annonce { - font-weight: bold; - font-size: 1.8rem; - } - - .cc-header-banner span { - font-size: clamp(3rem, 20vw, 6rem); - } - - .cc-teaser { - gap: 2rem; - padding-inline: 2rem; - } - - .cc-teaser-date { - width: 30%; - font-size: 2.4rem; - } - - .cc-teaser-date span:last-child { - font-size: 6rem; - } - - .cc-teaser-content { - width: 70%; - padding-inline: 1rem; - } - - .cc-location { - gap: 2rem; - } - - .cc-location img { - width: clamp(4rem, 30% , 20rem); - } - - .cc-logo-container a { - width: 45%; - } +.cc-content-box h2 { + font-size: 3rem; + font-weight: 900; + color: var(--text-color); + margin: 0; } -footer { - background-image: linear-gradient(45deg, var(--brand-color-abap), var(--brand-color-abap)); - clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%); - color: var(--white); - padding-block: 2rem; +.cc-teaser { + display: flex; + flex-direction: column; + margin-block-end: 2rem; } -footer div { - display: flex; - max-width: 840px; - align-items: center; - margin-inline: auto; - padding-inline: 1rem; - justify-content: space-between; +.cc-teaser-head { + flex: 0 0 auto; } -footer a { - color: var(--white); +.cc-teaser-content time { + font-size: 2.25rem; + font-weight: 900; } -footer a:is(:hover) { - color: var(--white); - +.cc-teaser-content { + line-height: 2; + flex: 1 1 auto; } -footer a:is(:focus, .active, .active:hover) { - color: var(--white); +.cc-teaser-content.location { + display: flex; + align-items: center; } -footer a:is(.active) { - text-decoration-color: var(--white); +.cc-teaser-content.location p { + line-height: 1.5; + margin-block-end: 0; +} + +.cc-logo-container { + gap: 1rem; + display: flex; + flex-wrap: wrap; + align-items: center; +} + +.cc-logo-container img { + max-height: 3.5rem; + display: inline-block; } -.cc-faq { - margin-block: 3rem 6rem; +.cc-logo-container a { + flex: 1; } -.cc-faq h2 { - text-align: center; +.cc-logo-container a:is(:hover, :focus) { + text-decoration: none; } -.cc-faq ul { - list-style: none; - padding: 0; - margin: 0; - display: flex; - flex-direction: column; +@media screen and (min-width: 768px) { + + .cc-teaser { + flex-direction: row; + } + + .cc-teaser-head { + flex: 0 0 22rem; + } } -.cc-faq a { - display: inline-flex; - font-size: 1rem; - font-weight: 600; +.infos { + margin-block-start: 5.5rem; } -.cc-faq li { - width: 100%; +footer { + } -.cc-faq li { - align-self: center; - text-align: center; +footer div { + gap: 5%; + display: flex; + padding-block-end: 3rem; } -.cc-faq h3 { - font-size: var(--type-0); - padding-block: 0; - margin-block: 2rem 0; - color: var(--code-connect-color); - cursor: pointer; +footer a { + } -.cc-faq p { - margin-block-start: 0.5rem; - margin-block-end: 0; - display: none; +footer a:is(:hover) { + } -.cc-faq p.active { - display: block; - } +footer a:is(:focus, .active, .active:hover) { -@media only screen and (min-width: 768px) { - .cc-faq li { - width: 100%; - align-self: flex-start; - text-align: start; - } } + +footer a:is(.active) { + text-decoration-color: var(--brand-color); +} \ No newline at end of file diff --git a/images/CodeConnect.svg b/images/CodeConnect.svg new file mode 100644 index 0000000..e87e3d8 --- /dev/null +++ b/images/CodeConnect.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/images/codeconnect-signet.svg b/images/codeconnect-signet.svg new file mode 100644 index 0000000..91a2926 --- /dev/null +++ b/images/codeconnect-signet.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/heart.svg b/images/heart.svg new file mode 100644 index 0000000..96e3017 --- /dev/null +++ b/images/heart.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/lines.svg b/images/lines.svg new file mode 100644 index 0000000..2553af3 --- /dev/null +++ b/images/lines.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/images/pin.svg b/images/pin.svg new file mode 100644 index 0000000..0da94a0 --- /dev/null +++ b/images/pin.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/recap-logo.svg b/images/recap-logo.svg new file mode 100644 index 0000000..b7763fc --- /dev/null +++ b/images/recap-logo.svg @@ -0,0 +1,11 @@ + + + + + + + + + \ No newline at end of file diff --git a/images/ui5con-logo.svg b/images/ui5con-logo.svg new file mode 100644 index 0000000..46829ec --- /dev/null +++ b/images/ui5con-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/index.html b/index.html index a22accb..d71ff57 100644 --- a/index.html +++ b/index.html @@ -2,221 +2,264 @@ - - - Code Connect 2024 - + + + Code Connect 2025 + - + - + - + - + - + - + - + - + - + - + - - + + -
-

Code Connect 2024 Conferences

-
- 20 - Illustration representing the Code Connect conference. Contains logos of UI5con, reCAP and abap conference. - 24 -
- -

Code Connect brings together four exciting events - CodeJam, reCAP, UI5con, and ABAPConf - all taking place in the same week and location. This is your chance to deep dive into your chosen tech or broaden your horizon, understanding the end-to-end dev flow. Whether you're joining for just one event or the whole package, be ready to connect, collaborate, and code away with a bustling community of like-minded developers!
Save the dates and check-out the conference pages for more details

-

Registration is now open

- get your ticket - -

If you want to register for the CAP Code Jam on June 3rd, please go here -

-
-
-
-
-
- June - 03 -
-
-

CAP CodeJam

-

This SAP CodeJam event is on the topic of the SAP Cloud Application Programming Model, and specifically about service integration. You'll become acquainted with how external services can be integrated and consumed from within a CAP project. In working through this CodeJam you'll also become familiar with how the SAP Cloud SDK covers connectivity and destinations, supporting such integration scenarios with CAP.

- learn more and register -
-
- -
-
- June - 04 -
-
-

re>≡CAP

-

Join the awesome developer conference all about the SAP Cloud Application Programming Model (CAP). The time of - the year where our lively communities, customers, and partners meet the CAP Product Team and exchange best - practices, technical concepts, current projects, ideas for the future, and way more.

- learn more -
-
- -
-
- June - 05 -
-
-

UI5con

-

If you want to learn more about UI5, you can't miss UI5con 2024. A day of inspiration, learning, and networking - with like-minded people. Inspiring talks. Endless learning.

- learn more -
-
- -
-
- June - 06 -
-
-

ABAPConf 2024 Europe

-

The conference for ABAP developers, from ABAP developers. ABAP as we love it. Changing the deployment model, - ABAPConf leaves the cloud and is now also offered as an on-premise edition.

- learn more -
-
-
- -
-
- image of a conference -
-

Location

-

- SAP SE (ROT03), SAP-Allee 27, - 68789 Sankt Leon-Rot, - Germany -

-
-
-
- -
-
-
-

FAQ

-
    - -
  • -

    How big is the event?

    -

    - There will be ~400 people on site in St. Leon-Rot. The number of people attending online is hard to predict. -

    -
    • - -
  • -

    Livestreams: do I need to register?

    -

    - No 😁. All streams will be publicly accessible. We'll put up the URLs everywhere (including this site) as soon as the streams are live. -

    -
    • - -
  • -

    Will there be food and drinks on-site?

    -

    - Yes 😋. And plenty, including coffee and vegetarian options. All free. Also for the evening event.
    - In case you have special dietary requirements (such as gluten- or lactose intolerance), let us know via e-mail and we'll work something out. -

    -
    • - -
  • -

    What's happening on the pre-conference evening on Mon, June 3?

    -

    - There's an unofficial evening event happening on Monday, June 3, prior to the three Code Connect events -
    all Code Connect participants are invited, from re>≡CAP, UI5con and ABAPconf.
    - We'll meet at the cozy Spanish-stlye restaurant »La Tortuga« in Walldorf - there'll be no agenda or seating order, we'll just get together for food, drinks, tech- & non-tech talk and being merry.
    - Doors open a 7pm (19:00 CEST) and we have the location to ourselves.
    - Food is flat €17 for an all-in Tapas 🥗🍤🧆🍖 buffet that includes vegetarian tapas; drinks are separate and to be paid individually.
    - Note that you'll be asked to pay the flat €17 at the door (credit cards accepted) where you'll also get a bracelet indicating you're with the cool Code Connect people 😎 -

    -
    • - -
  • -

    WLAN on-site?

    -

    Yes. SSID and access code(s) will be provided upon check-in and in the conference app.

    -
    • - -
  • -

    I'm off after the event. Any place to park my bags/luggage?

    -

    Yes. There'll be a locked room available to park bags/luggage in. Just ask at the registration desk.

    -
    • - -
  • -

    Is there a dress code?

    -

    Please. No. You wear what you're comfy in. So will the org team.

    -
    • -
-
-
-
- -
-

Our sponsors

-
- - Asbrucon home - - - - CBS home - - - - Rev-Trac home - - -
-
-
- +
+

+ + Code Connect 2025 Conferences +

+ + + + + + + + + + + + + + + + +
+

Code Connect brings together three exciting events - reCAP, UI5con, and HANAConf - all taking place in the same week and location.

+

This is your chance to deep dive into your chosen tech or broaden your horizon, understanding the end-to-end dev flow. Whether you're joining for just one event or the whole package, be ready to connect, collaborate, and code away with a bustling community of like-minded developers!
Save the dates and check-out the conference pages for more details

+ Save the date + Get a ticket +
+
+
+
+
+
+ +

CodeJam

+
+ + + + + + + + + +
+
+ +
+ +

This SAP CodeJam event is on the topic of the SAP Cloud Application Programming Model, and specifically about service integration. You'll become acquainted with how external services can be integrated and consumed from within a CAP project. In working through this CodeJam you'll also become familiar with how the SAP Cloud SDK covers connectivity and destinations, supporting such integration scenarios with CAP.

+ learn more and register +
+
+ +
+
+ + + + +

re>≡CAP

+
+ + + + + + + + + +
+
+ +
+ +

Join the awesome developer conference all about the SAP Cloud Application Programming Model (CAP). The time of + the year where our lively communities, customers, and partners meet the CAP Product Team and exchange best + practices, technical concepts, current projects, ideas for the future, and way more.

+ learn more +
+
+ +
+
+ + + + +

UI5con

+ +
+ + + + + + + + +
+
+
+ +

If you want to learn more about UI5, you can't miss UI5con 2024. A day of inspiration, learning, and networking + with like-minded people. Inspiring talks. Endless learning.

+ learn more +
+
+ +
+
+ + +

Hana

+
+ + + + + + + + +
+
+
+ +

If you want to learn more about UI5, you can't miss UI5con 2024. A day of inspiration, learning, and networking + with like-minded people. Inspiring talks. Endless learning.

+ learn more +
+
+ +
+ +
+
+
+ + + +

Our sponsors

+
+
+
+ + Asbrucon home + + + + CBS home + + + + Rev-Trac home + +
+ + Become a sponsor +
+
+
+
+ + + +

Location

+
+
+

+ SAP SE (ROT03), SAP-Allee 27, + 68789 Sankt Leon-Rot, + Germany +

+
+
+
+ +
+ - -