diff --git a/assets/theme/assets/images/prev-btn.png b/assets/theme/assets/images/prev-btn.png new file mode 100644 index 0000000..12f1139 Binary files /dev/null and b/assets/theme/assets/images/prev-btn.png differ diff --git a/assets/theme/assets/images/x-button.png b/assets/theme/assets/images/x-button.png new file mode 100644 index 0000000..289eca8 Binary files /dev/null and b/assets/theme/assets/images/x-button.png differ diff --git a/assets/theme/controllers/SubMenuController.ts b/assets/theme/controllers/SubMenuController.ts index 08e126e..7643690 100644 --- a/assets/theme/controllers/SubMenuController.ts +++ b/assets/theme/controllers/SubMenuController.ts @@ -1,39 +1,8 @@ import { Controller } from "@hotwired/stimulus"; import * as $ from 'jquery'; -import hello_Controller from "./Hello_Controller"; -export default class extends Controller { - // static targets=["hiddenContent"] - connect() { - console.log("vlog1","vlog2","vlog3","vlog4",this.element) - // this.hiddenContentTarget.hidden = true - } - - greet() { - console.log("you press the page") - // in this action i just grab this sub-menu-ul which is the parent of my sub-menu-list. then i add - // toggle clas in which if i click to button it will togle the list of the ul. - // then i just add the class open in which i also add in my css for the list of ul to be displayed - $(".sub-menu-ul").toggleClass("open"); - $(".menu").css({ - "background":"#171717" - }) - $(".first-label2").css({ - "font-weight": "bold" - }) +export default class extends Controller{ - } - KeyboardKey(event){ - console.log("you press enter") - } - button(){ - console.log("nav item") - $(".navigation1").toggleClass("blow"); - $(".nav-item").css({ - "margin-bottom":"1px solid gray" - }); - // $(".nav-item").css({ - // "border-bottom":"2px solid gray","width":"100%","padding":"2rem" - // }); - // $(".number").toggleClass("blow"); + connect() { + console.log('subMenu working') } } \ No newline at end of file diff --git a/assets/theme/controllers/VueController.ts b/assets/theme/controllers/VueController.ts index bddabb8..f829693 100644 --- a/assets/theme/controllers/VueController.ts +++ b/assets/theme/controllers/VueController.ts @@ -2,7 +2,6 @@ import {Controller} from "@hotwired/stimulus"; import AppComponent from "../components/App.vue"; import {VueFactory} from "@enhavo/app/vue/VueFactory"; import {VueRouterFactory} from "../vue/VueRouterFactory"; - export default class extends Controller { connect() diff --git a/assets/theme/styles/blocks/advanced-text.scss b/assets/theme/styles/blocks/advanced-text.scss index 1aa807e..f3bd46d 100644 --- a/assets/theme/styles/blocks/advanced-text.scss +++ b/assets/theme/styles/blocks/advanced-text.scss @@ -1,68 +1,64 @@ -.advance-text-block { - margin: 90px 0 50px; - +.block-advance-text { + padding-top: 150px; .advanced-text-grid { - max-width: 1390px; - display: grid; + display: grid;flex-direction: column; grid-template-columns: repeat(6, 1fr); grid-gap: 51px; - margin: 0 auto; - } - - .advanced-text-container { - display: flex; - flex-direction: column; - grid-column: 2 /span 4; - } - .advanced-text-big-headline{ - color: #171717; - font-family: "Open Sans"; - font-size: 50px; - font-style: normal; - font-weight: 700; - line-height: 64px; /* 128% */ - text-transform: uppercase; - } - - .advanced-text-text-big { - display: flex; - flex-direction: column; - grid-column: 2 /span 4; - - .advanced-text-big-copy { - margin-top: 20px; - color: #171717; - font-family: "Open Sans"; - font-size: 24px; - font-style: normal; - font-weight: 700; - line-height: 32px; + .advanced-text-headline-breaker{ + grid-column: 2 / span 4; + .bold-headline{ + font-size: 3.125rem; + line-height: 1.28em; + } } - } - - .advanced-text-one-column { - grid-column: 1 /span 4; - } - - .advanced-text-two-column-wide { - display: flex; - flex-direction: column; - grid-column: 2 /span 4; - } - - .advanced-text-two-column { - display: flex; - flex-direction: column; - grid-column: 1 /span 3; - } - .column { - margin-top: 52px; - grid-column: 4 / span 3; - - .two-button { + .advanced-text-text-big { + display: flex; + flex-direction: column; + grid-column: 2 /span 4; + .bold-headline{ + padding: 5px 0 20px 0; + } + .bold-copy { + font-size: 24px; + font-weight: 700; + } + } + .advanced-text-one-column { + grid-column: 1 /span 3; + .bold-headline{ + padding: 5px 0 15px 0; + } + } + .advanced-text-one-column-wide { + display: flex; + flex-direction: column; + grid-column: 2 /span 4; + .bold-headline{ + padding: 5px 0 15px 0; + } + } + .advanced-text-two-column { + grid-column: span 6; + .two-column-btn { + margin-left: auto + } + .theme-copies { + display: flex; + gap: 51px; + } + } + .advanced-text-button{ + margin-top: 30px; display: flex; - justify-content: flex-end; - align-items: end; + justify-content: center; + align-items: center; + border-radius: 40px; + border: 2px solid #000; + width: 280px; + height: 51px; + grid-column: span 3; + cursor: pointer; + text-decoration: none; } } } diff --git a/assets/theme/styles/blocks/card.scss b/assets/theme/styles/blocks/card.scss index 717f8a3..ad000a9 100644 --- a/assets/theme/styles/blocks/card.scss +++ b/assets/theme/styles/blocks/card.scss @@ -1,88 +1,68 @@ -.block_card { - width: 100%; - align-items: center; - - .hero-container { - margin-top: 160px; - } - +.block-card { + padding-top: 160px; .grid-container { display: grid; - grid-template-columns: repeat(6, 1fr); - grid-gap: 51px; - max-width: 1390px; - margin-inline: auto; - } - - .card-media-text { - width: 100%; - grid-column: 1 / span 3; - grid-row: 1; - z-index: -1; - background-size: cover; - } - .texts_container { - grid-row: 1; - grid-column: 4 / span 3; - } - .card_overline { - margin-top: 27px; - } - - .card_headline { - margin-top: 5px !important; - } - - .card-media-gradient { - width: 100%; - grid-column: 2 / span 3; - grid-row: 1; - z-index: -1; - background-size: cover; + grid-template-columns: repeat(2, 1fr); + grid-gap: 50px; + .card-media-img { + width: 100%; + height: 100%; + object-fit: cover; + grid-column: 1 / span 1; + grid-row: 1; + z-index: -1; + background-size: cover; + } + .texts-container { + grid-row: 1; + grid-column: 2 / span 1; + .overline { + margin-top: 27px; + } + .headline { + padding: 5px 0 15px 0; + } + } + .card-media-gradient-img { + max-width: 100%; + height: 100%; + margin-left: 261px; + grid-column: 1/ span 1; + grid-row: 1; + background-size: cover; + } + .gradient-texts-container { + grid-row: 1; + grid-column: 2 / span 1; + display: flex; + flex-direction: column; + justify-content: center; + } } - - .gradient-texts_container { - grid-row: 1; - grid-column: 4 / span 3; - margin-top: 112px; - } - - .media-text-stacked { - grid-column: 2 / span 4; - } - - .media-text-stacked-text-container { - grid-column: 2 / span 4;; - grid-row-gap: 0px; - } - - .card_overline-stacked { - margin-top: 20px; - } - - .card_headline { - margin-top: 5px !important; + .media-stacked-grid{ + display: grid; + grid-template-columns: 1fr; + margin: 0 auto; + max-width: 1320px; + .media-text-stacked-img { + grid-column: span 2; + max-width: 100%;height: 100%;object-fit: cover; + } + .media-text-stacked-text-container { + grid-column: span 2; + padding-top: 20px; + width: 58%; + } } - - .card_button_1, .hero_button_1 { + .card-button{ margin-top: 30px; - padding: 15px 30px; display: flex; justify-content: center; align-items: center; - gap: 10px; border-radius: 40px; border: 2px solid #000; width: 280px; height: 51px; - color: #171717; - font-family: "Open Sans"; - font-size: 18px; - font-style: normal; - font-weight: 700; - line-height: 19px; /* 105.556% */ - letter-spacing: 0.45px; - text-transform: uppercase; grid-column: span 3; cursor: pointer; text-decoration: none; diff --git a/assets/theme/styles/blocks/content_flex.scss b/assets/theme/styles/blocks/content_flex.scss index 32dee21..4623b2b 100644 --- a/assets/theme/styles/blocks/content_flex.scss +++ b/assets/theme/styles/blocks/content_flex.scss @@ -1,43 +1,50 @@ -.block-content-flex{ - width: 100%; - margin: 90px 0 50px ; - .block-container{ - display: grid;grid-template-columns: repeat(6, 1fr);grid-gap: 51px; - max-width: 1390px;margin-inline:auto; +.block-content-flex { + padding-top: 160px; + .block-flex-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 51px; + .block-image { + grid-column: span 1; + max-width: 1390px; + height: auto; + display: flex; + flex-direction: column; + img{ + max-width: 100%;width: 100%; + } + .content-flex-overline { + margin-top: 20px; + } + } } - .block-image{ - grid-column: span 2; - max-width: 1390px;height: auto; - display: flex;flex-direction: column; + .block-list-grid { + display: grid; + grid-template-columns: 1fr; + grid-gap: 51px; + .content-list-img-wrapper { + grid-column: span 1; + display: flex; + gap: 50px; + justify-content: center; + align-items: center; + img { + place-self: flex-start; + max-width: 100%; + } + } } - .content_flex-overline{ - margin-top: 20px; - } -} - -.content_flex-container-grid { - display: grid; - grid-template-columns: repeat(6, 1fr); - grid-gap: 51px; - max-width: 1390px; - margin-inline: auto; - - .content-flex-img-wrapper { - grid-column: span 6; + .content-flex-button{ + margin-top: 30px; display: flex; justify-content: center; align-items: center; - max-width: 1390px; - } - - .content_flex-texts_container { - grid-column: 3 /span 4; - grid-row: 1; - margin: 50px 0 0 50px; - } - - .content-flex-img img { - width: 100%; - height: auto; + border-radius: 40px; + border: 2px solid #000; + width: 280px; + height: 51px; + grid-column: span 3; + cursor: pointer; + text-decoration: none; } } \ No newline at end of file diff --git a/assets/theme/styles/blocks/form.scss b/assets/theme/styles/blocks/form.scss index 3b2a499..fdd2dc1 100644 --- a/assets/theme/styles/blocks/form.scss +++ b/assets/theme/styles/blocks/form.scss @@ -1,150 +1,110 @@ .block-form { - margin: 90px 0 50px; - - .form-content { - max-width: 1390px; + padding-top: 150px; + .form-grid { display: grid; - grid-template-columns: repeat(6, 1fr); /* Change the columns to fractions */ + grid-template-columns: repeat(6, 1fr); grid-gap: 51px; - margin: 0 auto; - } - - .form-text-container { - grid-column: 2 / span 4; - font: normal normal bold 16px/20px Open Sans; - letter-spacing: 0px; - color: #171717; - opacity: 1; - } - - .form-text-headline { - margin-top: 5px; - color: #171717; - font-family: "Open Sans"; - font-size: 50px; - font-style: normal; - font-weight: 700; - line-height: 64px; /* 128% */ - text-transform: uppercase; - } - - .form_text-overline { - color: #171717; - font-family: "Open Sans"; - font-size: 15px; - font-style: normal; - font-weight: 700; - line-height: 19px; /* 126.667% */ - letter-spacing: 0.375px; - text-transform: uppercase; - } - - .form-text-copy { - margin-top: 30px; - color: #171717; - font-family: "Open Sans"; - font-size: 16px; - font-style: normal; - font-weight: 700; - line-height: 20px; /* 125% */ - } - - .form { - grid-column: 2 / span 6; - - .row { - margin-bottom: 1rem; - } - - .form-label { - text-align: left; - text-transform: uppercase; - font: normal normal bold 18px/19px Open Sans; - letter-spacing: 0.45px; - color: #171717; - opacity: 1; - } - - input[type="text"], - input[type="email"], - textarea, - select { - width: 100%; - background: #FFFFFF 0% 0% no-repeat padding-box; - border: 1px solid #171717; - opacity: 1; - padding: 1rem; - } - - input[type="email"] { - border: 1px solid #DB5245; - } - - textarea::placeholder, - #subject::placeholder { - font: normal normal bold 18px/19px Open Sans; - letter-spacing: 0.45px; - color: #171717; - text-transform: uppercase; - opacity: 1; - } - - #email::placeholder, { - text-align: left; - font: normal normal bold 18px / 19px Open Sans; - letter-spacing: 0.45px; - color: #CBCBCB; - text-transform: uppercase; - opacity: 1; - } - - select:invalid { - color: gray; - } - - label[for='checkbox'] { - text-align: left; - margin-left: 5px; - font: normal normal normal 10px/26px Open Sans; - text-transform: capitalize; - letter-spacing: 0.1px; - color: #000000; - opacity: 1; - } - - .required { - width: 152px; - text-align: left; - font: normal normal normal 10px/26px Source Serif Pro; - letter-spacing: 0.1px; - color: #DB5245; - opacity: 1; - } - - .form_checkbox { - margin-right: 5%; - margin-top: 27px; - - input { - background: #FFFFFF 0% 0% no-repeat padding-box; - opacity: 1; - border: 1px solid #171717; - width: 12px; - height: 12px; + .form-text-container { + grid-column: 2 / span 4; + .form-text-headline { + color: $textColor3; + font-family: $fontFamily1; + font-size: 3.125rem; + line-height: 1.28em; + text-transform: uppercase; + } + .form_text-overline { + color: #171717; + font-family: $fontFamily1; + font-size: 0.93rem; + line-height: 1.26em; + letter-spacing: 0.375px; + text-transform: uppercase; + } + .form-text-copy { + margin-top: 30px; + color: $textColor3; + font-family: $fontFamily1; + font-size: 1rem; + line-height: 1.25em; } } - - .form_button { - padding: 1rem; - margin-top: 2%; - width: 100%; - border: 2px solid #171717; - border-radius: 100px; - opacity: 1; - display: flex; - justify-content: center; - align-items: center; - font: normal normal bold 18px/19px Open Sans; + .form { + grid-column: 2 / span 4; + + .row { + margin-bottom: 1rem; + + .form-label { + font-family: $fontFamily1; + font-size: $fontSizeCopy; + line-height: $lineHeightButton; + letter-spacing: 0.45px; + text-transform: uppercase; + } + input[type="text"], + select,textarea{ + margin: 9px 0 20px 0; + } + input[type="email"]{ + margin: 9px 0 0 0; + } + input[type="text"], + input[type="email"], + textarea, + select { + width: 100%; + background: #FFFFFF; + border: 1px solid #171717; + opacity: 1; + padding: 1rem; + } + input[type="email"] { + border: 1px solid #DB5245; + color: #CBCBCB; + } + #email::placeholder, + #text::placeholder, + textarea::placeholder, + select{ + color: $textColor3; + font-family: $fontFamily1; + font-size: $fontSizeCopy; + line-height: $lineHeightButton; + letter-spacing: 0.45px; + text-transform: uppercase; + } + #email::placeholder { + color: #CBCBCB; + } + select { + color: #CBCBCB; + } + label[for='checkbox'], + .required{ + font-size:0.625rem ; + line-height: 2.6em; + font-weight:$fontWeight ; + letter-spacing: 0.1px; + } + label[for='checkbox']{ + text-transform: capitalize; + } + .required { + color: #DB5245; + padding-bottom: 20px; + } + .form_button { + padding: 1rem; + margin-top: 2%; + width: 100%; + border: 2px solid #171717; + border-radius: 100px; + display: flex; + justify-content: center; + align-items: center; + } + } } } } \ No newline at end of file diff --git a/assets/theme/styles/blocks/gallery.scss b/assets/theme/styles/blocks/gallery.scss index bcd2d39..fe1a5f6 100644 --- a/assets/theme/styles/blocks/gallery.scss +++ b/assets/theme/styles/blocks/gallery.scss @@ -1,83 +1,61 @@ .block-gallery { - margin: 90px 0 50px; - .gallery-content { + padding-top: 150px; + .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 51px; - margin: 0 auto; - max-width: 1390px; - } - .item_2 { - grid-row: span 2; - } - .gallery_img { - width: 100%; - height: auto; - object-fit: cover; - vertical-align: top; - } -} -.black-gallery { - margin: 90px 0 50px; - background-color: #171717; - opacity: 0.9; - height: 1009px; - - .gallery-black-content-grid { - display: grid; - grid-template-columns: repeat(6, 1fr); - grid-gap: 51px; - margin: 0 auto; - max-width: 1390px; - } - - .left { - margin-top: 247px; - } - - .gallery-black-text-container { - grid-column: 2 / span 6; - margin-top: 70px; - } - - .gallery-black-button { + .item_2 { + &:nth-child(2) { + grid-row: span 2; + } + &:nth-child(4) { + grid-row: span 2; + } + &:nth-child(5) { + grid-row: span 2; + } + } + .gallery_img { + width: 100%; + height: auto; + object-fit: cover; + vertical-align: top; + } + } + .gallery-black-wrapper { + background-color: #171717; + opacity: 0.9; + height: 1009px; display: flex; - justify-content: flex-end; - } - - .xbutton, .left { - color: #FFFFFF; - font-size: 30px; - } - - .gallery-black-headline { - color: #FFFFFF; - font-family: "Open Sans"; - font-size: 24px; - font-style: normal; - font-weight: 700; - line-height: 32px; /* 133.333% */ - text-transform: uppercase; - } - - .galley-black-text { - color: #FFFFFF; - font-family: "Open Sans"; - font-size: 24px; - font-style: normal; - font-weight: 700; - line-height: 32px; - } - - .gallery-black-copy { - margin-top: 7px; - margin-bottom: 29px; - color: #FFFFFF; - font-family: "Open Sans"; - font-size: 18px; - font-style: normal; - font-weight: 400; - line-height: 26px; /* 144.444% */ - letter-spacing: 0.18px; + flex-direction: column; + justify-content: center; + .gallery-black-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 51px; + margin: 0 auto; + max-width: 1390px; + .x-button { + grid-column: 3 / span 1; + color: #FFFFFF; + font-size: 30px; + } + .gallery-black-text-container { + grid-column: 1 / span 2; + .gallery-headline { + color: #FFFFFF; + } + .gallery-copy { + color: #FFFFFF; + } + } + .gallery-image-wrapper{ + grid-column: span 2; + display: flex;justify-content:space-evenly;align-items: center; + img{ + max-width: 100%; + } + } + } } } \ No newline at end of file diff --git a/assets/theme/styles/blocks/hero.scss b/assets/theme/styles/blocks/hero.scss index c099e31..bc854ff 100644 --- a/assets/theme/styles/blocks/hero.scss +++ b/assets/theme/styles/blocks/hero.scss @@ -1,136 +1,82 @@ .block_hero { - margin: 90px 0 50px; - - .hero-container{ - margin: 0 auto ; - max-width: 1390px;width: 100%; - } - .hero-grid-container { - display: grid; - grid-template-columns: repeat(6, 1fr); - grid-gap: 51px; - } - - .hero-media { - width: 100%; - grid-column: 1 / span 3; - grid-row: 1; - z-index: -1; - } - - .hero-text-container { - grid-row: 1; - grid-column: 4 / span 3; - margin-top: 100px; - } - - .hero-overline { - margin-top: 100px; - } - - .hero-headline { - margin-top: 10px !important; - font-family: "Open Sans"; - font-size: 50px; - font-style: normal; - font-weight: 700 !important; - line-height: 64px !important; /* 133.333% */ - } - - .hero-copy { - margin-top: 15px; - color: #000; - font-family: "Open Sans"; - font-size: 18px; - font-style: normal; - font-weight: 400; - line-height: 26px; /* 144.444% */ - letter-spacing: 0.18px; - } -} - -.block-hero-2 { - margin: 90px 0 50px; -} - .hero-black-background { - width: 100%; - height: 565px; - background-color: #171717; + padding-top: 150px; + .hero-grid { display: flex; - justify-content: center; - } - - .hero-block-container { - margin: 0 auto; - max-width: 1390px; + gap: 55px; + .hero-image-wrapper{ + max-width: 100%; + } + .hero-media { + flex: 1; + width: 100%; + } + .hero-text-container { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + .hero-headline { + width: 110%; + font-size: 3.125rem; + line-height: 1.28em; + } + } + } + .hero-container { width: 100%; - } - - .hero-block-grid { - display: grid; - grid-template-columns: repeat(6, 1fr); - grid-gap: 51px; - max-width: 1390px; - } - - .hero-black-text-container { - grid-column: 2 /span 4; + //height: 565px; background-color: #171717; - position: relative; - width: 100%; display: flex; - flex-direction: column; - align-items: center; - } - - .hero-block-img { - grid-column: 2 /span 4; - margin-top: -22%; - } - - .hero-block-media { - position: relative; - width: 100%; - - } - - .hero-black-overline { - margin-top: 49px; - color: #FFF; - text-align: center; - font-family: "Open Sans"; - font-size: 15px; - font-style: normal; - font-weight: 700; - line-height: 19px; /* 126.667% */ - letter-spacing: 0.375px; - text-transform: uppercase; - } - - .hero-black-headline { - margin-top: 10px; - color: #FFF; - text-align: center; - font-family: "Open Sans"; - font-size: 50px; - font-style: normal; - font-weight: 700; - line-height: 64px; /* 128% */ - text-transform: uppercase; - } - - .hero-black-copy { - color: #FFF; - text-align: center; - } - - .hero-block-button { - grid-column: 3 / span 2; - z-index: 1; - color: #FFFFFF; - border: 2px solid #FFF; - } - - .hero-block-img { - grid-column: 2 / span 4; - } + justify-content: center; + .hero-black-grid { + display: grid; + grid-template-columns: repeat(6, 1fr); + grid-gap: 51px; + .hero-black-text-container { + grid-column: 2 / span 4; + background-color: #171717; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + grid-row: 2 / span 2; + .hero-black-overline{ + color: $textColor1; + } + .hero-black-headline{ + color: $textColor1; + font-size: 3.125rem; + line-height: 1.28em; + } + .hero-black-copy { + color: #FFF; + text-align: center; + } + .hero-black-button { + grid-column: 3 / span 2; + z-index: 1; + color: #FFFFFF; + margin-top: 30px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 40px; + border: 2px solid #FFFFFF; + width: 280px; + height: 51px; + cursor: pointer; + text-decoration: none; + } + } + .hero-block-img { + max-width: 100%; + grid-row: 4 / span 4; + grid-column: 2 / span 4; + img{ + width: 100%; + } + } + } + } +} \ No newline at end of file diff --git a/assets/theme/styles/blocks/jobs.scss b/assets/theme/styles/blocks/jobs.scss index be0dd3b..937f605 100644 --- a/assets/theme/styles/blocks/jobs.scss +++ b/assets/theme/styles/blocks/jobs.scss @@ -1,145 +1,123 @@ -.jobs-block { - margin: 90px 0 50px; +.block-jobs { + padding-top: 150px; .jobs-grid { - max-width: 1390px; - display: grid; - grid-template-columns: repeat(6, 1fr); /* Change the columns to fractions */ - grid-gap: 0px; - margin: 0 auto; - - } - .table { - width: 471px; - flex-shrink: 0; - } - .table-label { - border: 1px solid #171717; - } - .table-span { - display: flex; - justify-content: space-between; - margin-top: 10px; - padding: 1rem; - } - .button-caret{ display: flex; - justify-content: flex-end; - flex-direction: column; - } - .jobs-overline { - color: #171717; - font-family: "Open Sans"; - font-size: 15px!important; - font-style: normal; - font-weight: 700!important; - line-height: 19px; /* 126.667% */ - letter-spacing: 0.375px; - text-transform: uppercase; - } - .caret-down { - margin-right: 10px; - font-size: 24px; - cursor: pointer; - } - .caret { - margin-right: 10px; - font-size: 24px; - cursor: pointer; - } - .caret.open-job { - margin-right: 10px; - font-size: 24px; - cursor: pointer; - max-height: 100%; - } - .hr-container { - padding-left: 10px; - padding-right: 20px; - max-height: 0; - overflow: hidden; - } - .hr-container.open-job{ - max-height: 100%; - display: block; - } - .job-button{ - display: flex;flex-direction: column;justify-content: left;align-items: flex-start; - max-height: 0; - overflow: hidden; - } - .job-button.open-job{ - display: flex;flex-direction: column;justify-content: left;align-items: flex-start; - max-height: 100%; - } - .job-headline { - margin-top: 15px; - color: #171717; - font-family: "Open Sans"; - font-size: 15px; - font-style: normal; - font-weight: 400; - line-height: 19px; /* 126.667% */ - letter-spacing: 0.375px; - text-transform: uppercase; - padding: 1rem; - cursor: pointer; - } - .job-headline:hover{ - color: blue; - } - .job-headline:focus { - font-weight: bold; - color: blue; - } - .job-item,.job-items { - grid-column: 2/ span 5; - } - .job-item{ - border-bottom: 2px solid black; - margin-left: 5%; - } - .job-row { - margin-bottom: 1rem; - } - .job-type { - color: #000; - font-family: "Open Sans"; - font-size: 15px; - font-style: normal; - font-weight: 700; - line-height: 19px; /* 126.667% */ - letter-spacing: 0.375px; - text-transform: uppercase; - padding: 1rem; - } + gap: 51px; - .job-wrapper { - position: relative; - } - .job-title{ - color: #171717; - font-family: "Open Sans"; - font-size: 24px; - font-style: normal; - font-weight: 700; - line-height: 32px; /* 133.333% */ - text-transform: uppercase; - } - .job-text { - position: absolute; - right: 10px; /* Adjust as needed */ - top: 80%; - transform: translateY(-65%); - pointer-events: none; - color: #000; - text-align: right; - font-family: "Open Sans"; - font-size: 18px; - font-style: normal; - font-weight: 400; - line-height: 26px; /* 144.444% */ - letter-spacing: 0.18px; + .table { + flex: 1; + + .table-label { + border: 1px solid #171717; + } + + .table-span { + display: flex; + justify-content: space-between; + padding: 1rem; + } + + .jobs-overline { + color: $textColor3; + font-size: 0.93rem; + } + + .button-caret { + display: flex; + justify-content: flex-end; + flex-direction: column; + + .caret-button { + cursor: pointer; + } + + .caret-up.open-job { + margin-right: 10px; + font-size: 24px; + cursor: pointer; + max-height: 100%; + } + } + + .hr-container { + padding-left: 10px; + padding-right: 20px; + max-height: 0; + overflow: hidden; + } + + .hr-container.open-job { + max-height: 100%; + display: block; + } + + .job-button { + display: flex; + flex-direction: column; + justify-content: left; + align-items: flex-start; + max-height: 0; + overflow: hidden; + + .open-job { + display: flex; + flex-direction: column; + justify-content: left; + align-items: flex-start; + max-height: 100%; + } + + .job-headline { + //margin-top: 15px; + color: #171717; + font-family: "Open Sans"; + font-size: 15px; + font-style: normal; + font-weight: 400; + line-height: 19px; + letter-spacing: 0.375px; + text-transform: uppercase; + padding: 1rem; + cursor: pointer; + } + + .job-headline:hover { + color: blue; + } + + .job-headline:focus { + font-weight: bold; + color: blue; + } + } + } + .job-items { + flex: 2; + + .job-item { + border-bottom: 2px solid black; + + .job-row { + margin-bottom: 1rem; + + .job-type { + padding: 1rem 0; + } + + .job-wrapper { + display: flex; + justify-content: space-between; + align-items: flex-end; + + .job-text { + pointer-events: none; + color: #000; + } + } + } + } + } } } diff --git a/assets/theme/styles/blocks/logo.scss b/assets/theme/styles/blocks/logo.scss index a9c37bb..6b80e80 100644 --- a/assets/theme/styles/blocks/logo.scss +++ b/assets/theme/styles/blocks/logo.scss @@ -1,22 +1,16 @@ -.logo-block { - margin: 90px 0 50px; - +.block-logo { + padding-top: 150px; .logo-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 51px; - margin: 0 auto; - max-width: 1390px; } - .logo-overline { grid-column: span 6; - color: #171717; + color: $textColor3; text-align: center; } - .logo-container { - grid-column: span 6; - margin-top: 70px; + grid-column: span 1; } } diff --git a/assets/theme/styles/blocks/nag-screen.scss b/assets/theme/styles/blocks/nag-screen.scss index b4812d5..2df4976 100644 --- a/assets/theme/styles/blocks/nag-screen.scss +++ b/assets/theme/styles/blocks/nag-screen.scss @@ -1,57 +1,48 @@ -.nag-screen-block { - margin: 90px 0 50px; - +.block-nag-screen { + padding-top: 150px; .nag-screen-wrapper { height: 545px; background: rgba(54, 247, 234, 1); - } - - .nag-screen-grid { - display: grid; - grid-template-columns: repeat(6, 1fr); - grid-gap: 51px; - margin: 0 auto; - max-width: 1390px; - } - - .times { - grid-column: 6 / span 1; - font-size: 30px; - } - - .nag-screen-container { - grid-column: 2 / span 4; - text-align: center; - justify-content: center; - align-items: center; - } - - .nag-screen-overline { - text-align: center; - } - - .nag-screen-headline { - margin-top: 10px; - color: #171717; - text-align: center; - font-family: "Open Sans"; - font-size: 50px; - font-style: normal; - font-weight: 700; - line-height: 64px; /* 128% */ - text-transform: uppercase; - } - - .nag-screen-copy { - margin-top: 25px !important; - text-align: center; - } - - .nag-screen-btt { - margin-top: 35px; - grid-column: 3 / span 2; display: flex; - justify-content: center; - align-items: center; + .nag-screen-grid { + display: grid; + grid-template-columns: repeat(6, 1fr); + grid-gap: 51px; + .times { + grid-column: 6 / span 1; + font-size: 30px; + place-self: center; + } + .nag-screen-container { + grid-column: 2 / span 4; + display: flex; flex-direction: column;align-items: center; + .nag-screen-overline { + text-align: center; + font-size: 0.93rem; + } + .nag-screen-headline { + width: 30%; + margin-top: 10px; + color: $textColor3; + text-align: center; + font-family: $fontFamily1; + font-size: 3.125rem; + font-weight: 700; + line-height: 1.28em; + text-transform: uppercase; + } + .nag-screen-copy { + margin-top: 25px !important; + text-align: center; + } + .nag-screen-btt { + margin-top: 35px; + grid-column: 3 / span 2; + display: flex; + justify-content: center; + align-items: center; + } + } + } } } \ No newline at end of file diff --git a/assets/theme/styles/blocks/quote.scss b/assets/theme/styles/blocks/quote.scss index fbea1e9..2344607 100644 --- a/assets/theme/styles/blocks/quote.scss +++ b/assets/theme/styles/blocks/quote.scss @@ -1,46 +1,35 @@ .block-quote { - margin: 90px 0 50px; - background: #171717; - + padding-top: 150px; .quote-container { - margin: 0 auto; - max-width: 1390px; - width: 100%; - } - - .block-quote-grid { - display: grid; - grid-template-columns: repeat(6, 1fr); - grid-gap: 51px; - max-width: 1390px; - } - - .quote { - grid-column: span 6; - } - - .quote-headline { - color: #FFF; - text-align: center; - font-family: "Open Sans"; - font-size: 24px; - font-style: italic; - font-weight: 700; - line-height: 32px; /* 133.333% */ - } - - .quote-overline { - margin-top: 30px; - color: #FFF; - text-align: center; - font-family: "Open Sans"; - font-size: 24px; - font-style: normal; - font-weight: 700; - line-height: 32px; /* 133.333% */ - } - - .quote-svg2 { - grid-column: 6 / span 1; + background: #171717; + .block-quote-grid { + display: grid; + grid-template-columns: repeat(6, 1fr); + grid-gap: 51px; + .quote { + grid-column:2/span 4; + grid-row: 2; + .quote-headline { + color: #FFF; + text-transform: capitalize; + font-style: italic; + text-align: center; + } + .quote-caption { + margin-top: 30px; + color: #FFF; + text-transform: capitalize; + text-align: center; + } + } + .quote-svg2 { + grid-column: 6 / span 1; + grid-row: 2/span 2; + place-self: end; + } + img{ + max-width: 100%; + } + } } } \ No newline at end of file diff --git a/assets/theme/styles/blocks/swipe-teaser.scss b/assets/theme/styles/blocks/swipe-teaser.scss index 35b91f5..9296198 100644 --- a/assets/theme/styles/blocks/swipe-teaser.scss +++ b/assets/theme/styles/blocks/swipe-teaser.scss @@ -1,72 +1,67 @@ -.block_swipe-teaser{ - margin: 90px 0 50px; -} -.swipe-teaser-container{ - width: 100%; -} -.grid-gradient-container { - display: grid; - grid-template-columns: repeat(8, 1fr); - grid-gap: 51px; - margin-inline: auto; - - .teaser-wrapper { - grid-column: span 2; - } - - .teaser-swiper-media-gradient { - border: 1px solid green; - width: 100%; - grid-column: 2; - grid-row: 1; - z-index: -1; - background-size: cover; - } - - .teaser-swiper-media { - width: 100%; - grid-column: span 3; - grid-row: 1; - z-index: -1; - background-size: cover; - border: 1px solid gray; - } - - .swiper-text-container { - grid-column: 4; - } - - .swiper-overline { - margin-top: 32px; - } - - .swiper-media-gradient { - width: 100%; - grid-column: span 5; - grid-row: 1; - z-index: -1; - background-size: cover; - border: 1px solid green; +.block_swipe-teaser { + padding-top: 150px; + .swiper-theme-container { + padding: 0 135px; + .grid-gradient-container { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-gap: 51px; + .teaser-wrapper { + grid-column: span 1; + max-width: 100%; + img { + width: 100%; + } + } + .teaser-swiper-media-gradient { + border: 1px solid green; + width: 100%; + grid-column: 2; + grid-row: 1; + z-index: -1; + background-size: cover; + } + .teaser-swiper-media { + width: 100%; + grid-column: span 3; + grid-row: 1; + z-index: -1; + background-size: cover; + border: 1px solid gray; + } + .swiper-text-container { + grid-column: 4; + } + .swiper-overline { + margin-top: 32px; + } + .swiper-media-gradient { + width: 100%; + grid-column: span 5; + grid-row: 1; + z-index: -1; + background-size: cover; + border: 1px solid green; + } + } + .navi { + margin-top: 73px; + display: flex; + justify-content: center; + } + .btt-nav { + width: 12px; + height: 12px; + margin: 0 5px; + border-radius: 50%; + border: 1px solid; + cursor: pointer; + transition: background-color 0.3s ease; + } + .btt-nav:hover, + .btt-nav.active { + background-color: #333; + } } } - .navi { - margin-top: 73px; - display: flex; - justify-content: center; - } - - .btt-nav { - width: 12px; - height: 12px; - margin: 0 5px; - border-radius: 50%; - border: 1px solid; - cursor: pointer; - transition: background-color 0.3s ease; - } - - .btt-nav:hover, - .btt-nav.active { - background-color: #333; - } diff --git a/assets/theme/styles/blocks/team.scss b/assets/theme/styles/blocks/team.scss index 2dbb28c..4518348 100644 --- a/assets/theme/styles/blocks/team.scss +++ b/assets/theme/styles/blocks/team.scss @@ -1,72 +1,24 @@ .block-team { - margin: 90px 0 50px; - - .text_container{ - max-width: 1390px; - display: grid;grid-template-columns: repeat(6, 1fr);grid-gap: 51px; - margin: 0 auto; + padding-top: 150px; + .team-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 51px; + .team-img { + grid-column: span 1; + text-align: center; + img{ + max-width: 100%; + } + &:nth-of-type(4) { + place-self: flex-end; + } &:nth-of-type(5) { + place-self: flex-end; + } + .team-text-container { + grid-column: 2 / span 2; + margin-top: 20px; + } + } } - .team-img{ - grid-column:span 2; - text-align: center; - } - .team-img-4{ - grid-column: 2 / span 2; - } - .team-4{ - grid-column: 2 / span 2; - margin-top: 20px; - } - .team-contact{ - margin-top: 15px; - color: #000; - text-align: center; - font-family: "Open Sans";font-size: 18px;font-weight: 400; - line-height: 26px; /* 144.444% */letter-spacing: 0.18px; - } -.team-img{ - grid-column:span 2; - text-align: center; -} -.team-4{ - grid-column: 2 / span 2; - margin-top: 20px; } -.team-img-4{ - grid-column: 2 / span 2; -} -.position{ - margin-top: 20px; - color: #000; - text-align: center; - font-family: "Open Sans"; - font-size: 15px; - font-style: normal; - font-weight: 700; - line-height: 19px; /* 126.667% */ - letter-spacing: 0.375px; - text-transform: uppercase; -} -.team-name{ - margin-top: 5px; - color: #171717; - text-align: center; - font-family: "Open Sans"; - font-size: 24px; - font-style: normal; - font-weight: 700; - line-height: 32px; /* 133.333% */ - text-transform: uppercase; -} -.team-contact{ - margin-top: 15px; - color: #000; - text-align: center; - font-family: "Open Sans"; - font-size: 18px; - font-weight: 400; - line-height: 26px; /* 144.444% */ - letter-spacing: 0.18px; - display: flex;justify-content: center;align-items: center;flex-direction: column; - } -} \ No newline at end of file diff --git a/assets/theme/styles/core/reset.scss b/assets/theme/styles/core/reset.scss index 3238234..058d2f4 100644 --- a/assets/theme/styles/core/reset.scss +++ b/assets/theme/styles/core/reset.scss @@ -26,6 +26,7 @@ body { line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + font-weight: 700; } ol, ul {list-style: none;} diff --git a/assets/theme/styles/core/variables.scss b/assets/theme/styles/core/variables.scss index 10811f6..668fb0d 100644 --- a/assets/theme/styles/core/variables.scss +++ b/assets/theme/styles/core/variables.scss @@ -1,11 +1,30 @@ // Colors $primaryColor: #d50032; +$textColor1:#fff; +$textColor2:#000; +$textColor3:#171717; -// Fonts -$fontSize: 10px; -$fontFamily: Verdana, sans-serif; +// root Fonts +$fontSize: 16px; + +//fonts +$fontSizeOverline:1.06rem; +$fontSizeHeadline1:1.5rem;//==>24px +$fontSizeCopy:1.125rem;//==>18px + + +//font family +$fontFamily1: "Open Sans"; +$fontFamily2: "Source Sans Pro"; + +//line heights $lineHeight: 1.2em; -$lineHeightHeadline: 1.2em; +$lineHeightOverline: 1.26em;//===>19px/15 +$lineHeightHeadline1: 1.33em;//====>32px/24 +$lineHeightHeadline2: 1.2em; +$lineHeightCopy: 1.44em;//====>26px/18 +$lineHeightButton: 1.055em;//===>19px/18 $lineHeightReduced: 1.2em; - // Spaces +//font weight +$fontWeight:400; diff --git a/assets/theme/styles/theme/_index.scss b/assets/theme/styles/theme/_index.scss index ea80971..192cc07 100644 --- a/assets/theme/styles/theme/_index.scss +++ b/assets/theme/styles/theme/_index.scss @@ -1,2 +1,2 @@ @import "home"; -@import "layout"; +@import "theme"; diff --git a/assets/theme/styles/theme/home.scss b/assets/theme/styles/theme/home.scss index c29336f..1acfd9a 100644 --- a/assets/theme/styles/theme/home.scss +++ b/assets/theme/styles/theme/home.scss @@ -1,163 +1,106 @@ +.nav { + height: 123px; + position: relative; + background-color: transparent; -body{ - background: white; - margin: 0; - padding: 0; -} -header { - position: fixed; - top: 0; - left: 0; - width: 100%; - z-index: 1000; - background-color: #171717; /* Background color for the header */ -} + .navbar-grid { + display: grid; + grid-template-columns: repeat(6, 1fr); + grid-gap: 51px; + align-items: center; + padding: 2.71rem; -/* Navbar Styles */ -.nav { - position: relative; /* Adjusted from fixed */ - background-color: transparent; /* Transparent background */ -} -.block-paragraph{ - width: 100%; - align-items: center; - margin:90px 0 50px; -} -.paragraph-grid{ - display: grid;grid-template-columns: repeat(6, 1fr);grid-gap: 51px; - max-width: 1390px; - margin-inline: auto; -} -.paragraph-container{ - grid-column: 2 / span 4; -} -.paragraph{ - text-align: left; - font: normal normal normal 18px/26px Open Sans; - letter-spacing: 0.18px; - color: #000000; - opacity: 1; - margin-bottom: 20px; -} -.header1{ - text-align: center; - font: normal normal bold 24px/32px Open Sans; - letter-spacing: 0px; - color: #171717; - text-transform: uppercase; - opacity: 1; - grid-column: span 6; -} -.navbar-container { - display: grid;grid-template-columns: repeat(6, 1fr);grid-gap: 51px; - align-items: center; - padding: 1rem; - margin-inline: auto; - max-width: 1390px; -} -.container{ - margin: 0 auto; - max-width: 1390px; -} + .header-img { + grid-column: 1 / span 2; + display: flex; + align-items: center; -.header-img { - grid-column: 1 / span 2; - display: flex;align-items: center; -} + img { + height: auto; + max-width: 100%; + } + } -.header-img img { - height: auto; -} + .navigation { + grid-column: 3 / span 2; /* Spanning 3 columns */ + display: flex; + justify-content: space-evenly; -.navigation1 { - grid-column: 3 / span 2; /* Spanning 3 columns */ - display: flex; - justify-content: space-evenly; -} + .nav-item { + position: relative; + a { + font: normal normal normal 18px/19px Open Sans; + letter-spacing: 0.45px; + color: #FFFFFF; + text-transform: uppercase; + opacity: 1; + text-decoration: none; + &:hover { + color: #ffcc00; + } + } + &:hover .sub-menu-ul { + opacity: 1; + overflow: unset; + transform: translateY(0); + } + } + .sub-menu-ul { + position: absolute; + width: 100%; + left: 0; + top: calc(100% + .25rem); + opacity: 0; + transform: translateY(-10px); + overflow: hidden; + transition: opacity 150ms ease-in-out, transform 150ms ease-in-out; + } -.nav-item { - position: relative; -} -.nav-item a { - color: white; -} + .sub-menu-list { + padding: 10px; + margin-left: 20px; + } -.navigation1 a { - text-align: left; - font: normal normal normal 18px/19px Open Sans; - letter-spacing: 0.45px; - color: #FFFFFF; - text-transform: uppercase; - opacity: 1; - text-decoration: none; - margin-left: 45px; -} -.navigation1 a:hover { - color: #ffcc00; -} -.header-info { - grid-column: 5 / span 2; /* Spanning 1 column */ - display: flex;justify-content:end;align-items: center; -} -.number { - margin-right: 0.5rem; - text-align: right; - font: normal normal normal 20px/32px Open Sans; - letter-spacing: 0px; - color: #FFFFFF; - text-transform: uppercase; - opacity: 1; -} -.hamburger { - display: none; - background-color: transparent; - border: none; - cursor: pointer; - color: #fff; - font-size: 24px; -} -.menu { - color: #fff; - padding: 5px; - z-index: 1; - transition: opacity 0.3s; - text-align: left; - font: italic normal normal 18px/19px Open Sans; - letter-spacing: 0.45px; - opacity: 1; - position: absolute; - top: 89%; - left: 0; - width: 100%; - margin-top: 5px; -} -.first-label2{ - display: block; - text-decoration: none; - color: #fff; -} -//here i just use the max-height to 0 so in default this in hide -.sub-menu-ul { - max-height: 0; - overflow: hidden; - margin-left: 39.5%; -} -.sub-menu-list{ - padding: 10px; - margin-left: 20px; -} -.list-font{ - text-align: left; - text-transform: capitalize !important; - font: italic normal normal 18px/19px Open Sans !important; - letter-spacing: 0.45px; - color: #FFFFFF; - opacity: 1; -} -//then i use 100% so when clicked it will take the 100% in width the "open" i use in stimulus -.sub-menu-ul.open { - display: block; - max-height: 100%; + .list-font { + text-align: left; + text-transform: capitalize !important; + font: italic normal normal 18px/19px Open Sans !important; + letter-spacing: 0.45px; + color: #FFFFFF; + opacity: 1; + } + + //then i use 100% so when clicked it will take the 100% in width the "open" i use in stimulus + .sub-menu-ul.open { + display: block; + max-height: 100%; + } + } + .header-info { + grid-column: 5 / span 2; + display: flex; + justify-content: end; + align-items: center; + + .number { + margin-right: 0.5rem; + text-align: right; + font: normal normal normal 20px/32px Open Sans; + letter-spacing: 0px; + color: #FFFFFF; + text-transform: uppercase; + opacity: 1; + } + } + .hamburger { + display: none; + background-color: transparent; + border: none; + cursor: pointer; + color: #fff; + font-size: 24px; + } + } } @media screen and (max-width: 1169px) { .header-info{ diff --git a/assets/theme/styles/theme/layout.scss b/assets/theme/styles/theme/layout.scss deleted file mode 100644 index 314f941..0000000 --- a/assets/theme/styles/theme/layout.scss +++ /dev/null @@ -1,41 +0,0 @@ -.container { - margin: 0 auto; - max-width: 1320px; - width: 100%; -} -.overline{ - color: #000; - font-family: "Open Sans";font-size: 15px;font-style: normal;font-weight: 700; - line-height: 19px; /* 126.667% */letter-spacing: 0.375px; - text-transform: uppercase; -} -.headline{ - margin-top: 5px; - color: #171717; - font-family: "Open Sans";font-size: 24px;font-style: normal;font-weight: 700; - line-height: 32px; /* 133.333% */ - text-transform: uppercase; -} -.copy{ - margin-top: 15px; - color: #000; - font-family: "Open Sans";font-size: 18px;font-style: normal;font-weight: 400; - line-height: 26px; /* 144.444% */letter-spacing: 0.18px; -} -.texts_container{ - grid-row: 1;grid-column: 4 / span 3; -} -.card_button_1{ - margin-top: 30px;padding: 15px 30px; - display: flex;justify-content: center;align-items: center; - gap: 10px; - border-radius: 40px;border: 2px solid #000; - width: 280px;height: 51px; - color: #171717; - font-family: "Open Sans";font-size: 18px;font-style: normal;font-weight: 700; - line-height: 19px; /* 105.556% */letter-spacing: 0.45px; - text-transform: uppercase; - grid-column: span 3; - cursor: pointer; - text-decoration: none; -} \ No newline at end of file diff --git a/assets/theme/styles/theme/theme.scss b/assets/theme/styles/theme/theme.scss new file mode 100644 index 0000000..28db830 --- /dev/null +++ b/assets/theme/styles/theme/theme.scss @@ -0,0 +1,91 @@ +body{ + padding-top: 123px; + background: white; + margin: 0; +} +header { + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 1000; + background-color: #171717; +} +.theme-overline{ + color: $textColor2; + font-family: $fontFamily1; + font-size: $fontSizeOverline; + line-height: $lineHeightOverline; + letter-spacing: 0.375px; + text-transform: uppercase; +} +.theme-headline{ + color: $textColor3; + font-family: $fontFamily1; + font-size: $fontSizeHeadline1; + line-height: $lineHeightHeadline1; + text-transform: uppercase; +} +.theme-copy{ + color: $textColor2; + font-family: $fontFamily1; + font-size: $fontSizeCopy; + font-weight: $fontWeight; + line-height: $lineHeightCopy; + letter-spacing: 0.18px; +} +.theme-button{ + color: $textColor3; + font-family: $fontFamily1; + font-size: $fontSizeCopy; + line-height: $lineHeightButton; + letter-spacing: 0.45px; + text-transform: uppercase; +} +.container { + margin: 0 auto; + max-width: 1320px; + width: 100%; +} +//.overline{ +// color: #000; +// font-family: "Open Sans";font-size: 15px;font-style: normal;font-weight: 700; +// line-height: 19px; /* 126.667% */letter-spacing: 0.375px; +// text-transform: uppercase; +//} +//.headline{ +// margin-top: 5px; +// color: #171717; +// font-family: "Open Sans";font-size: 24px;font-style: normal;font-weight: 700; +// line-height: 32px; /* 133.333% */ +// text-transform: uppercase; +//} +//.copy{ +// margin-top: 15px; +// color: #000; +// font-family: "Open Sans";font-size: 18px;font-style: normal;font-weight: 400; +// line-height: 26px; /* 144.444% */letter-spacing: 0.18px; +//} +.texts_container{ + grid-row: 1;grid-column: 4 / span 3; +} +.card_button_1{ + margin-top: 30px;padding: 15px 30px; + display: flex;justify-content: center;align-items: center; + gap: 10px; + border-radius: 40px;border: 2px solid #000; + width: 280px;height: 51px; + color: #171717; + font-family: "Open Sans";font-size: 18px;font-style: normal;font-weight: 700; + line-height: 19px; /* 105.556% */letter-spacing: 0.45px; + text-transform: uppercase; + grid-column: span 3; + cursor: pointer; + text-decoration: none; +} +.theme-container{ + margin: 0 auto; + padding: 0 135px; + max-width: 1920px; + width: 100%; +} \ No newline at end of file diff --git a/data/block/advanced_text-text-two-column-wide.json b/data/block/advanced_text-text-one-column-wide.json similarity index 96% rename from data/block/advanced_text-text-two-column-wide.json rename to data/block/advanced_text-text-one-column-wide.json index b1f3c2c..34f814c 100644 --- a/data/block/advanced_text-text-two-column-wide.json +++ b/data/block/advanced_text-text-one-column-wide.json @@ -8,7 +8,7 @@ ], "data": { "block": { - "layout": "two-column-wide", + "layout": "one-column-wide", "id": 1, "text": "big", "columns": null, diff --git a/data/block/advanced_text-text-two-column.json b/data/block/advanced_text-text-two-column.json index 44600a6..8572f62 100644 --- a/data/block/advanced_text-text-two-column.json +++ b/data/block/advanced_text-text-two-column.json @@ -3,21 +3,22 @@ "type": "block", "template": "theme/block/advanced-text.html.twig", "component": null, - "children": [ - - ], + "children": [], "data": { "block": { "layout": "two-column", - "id": 1, + "id": 5, "text": "big", "columns": null, "overline": "Dies ist eine Overline", "headline": "Dies ist eine Headline", - "copy": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.", + "copy": [ + "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.", + "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet." + ], "ctaTitle": "Hier steht ein CTA", "ctaLink": "http://google.com", "ctaTarget": "_blank" } } -} \ No newline at end of file +} diff --git a/data/block/card-media-text.json b/data/block/card-media-text.json index cd120b6..beadc19 100644 --- a/data/block/card-media-text.json +++ b/data/block/card-media-text.json @@ -3,9 +3,7 @@ "type": "block", "template": "theme/block/card.html.twig", "component": null, - "children": [ - - ], + "children": [], "data": { "block": { "gradient": "yes", diff --git a/data/block/content_flex-cards.json b/data/block/content_flex-cards.json index 3f7736f..88eb396 100644 --- a/data/block/content_flex-cards.json +++ b/data/block/content_flex-cards.json @@ -3,12 +3,10 @@ "type": "block", "template": "theme/block/content-flex.html.twig", "component": null, - "children": [ - - ], + "children": [], "data": { "block": { - "layout": "cards", + "layout": "flex", "alignment": "center", "headline": "Test", "items": [ diff --git a/data/block/content_flex.yaml b/data/block/content_flex.yaml index 4c96338..f03a96e 100644 --- a/data/block/content_flex.yaml +++ b/data/block/content_flex.yaml @@ -3,9 +3,7 @@ "type": "block", "template": "theme/block/content-flex.html.twig", "component": null, - "children": [ - - ], + "children": [], "data": { "block": { "layout": "cards", diff --git a/data/block/form.json b/data/block/form.json index 1f360a3..d547a66 100644 --- a/data/block/form.json +++ b/data/block/form.json @@ -13,38 +13,42 @@ "id": 1, "text": "Sie möchten, dass Ihr Hund von einer erfahrenen Hand und einem liebevollen Herzen betreut wird? Kontaktieren Sie mich einfach über das unten stehende Formular, und lassen Sie uns gemeinsam dafür sorgen, dass Ihr Hund die besten Spaziergänge seines Lebens hat!", "overline": "Dies ist eine Headline", - "form": { - "name": { + "form": [ + { "type": "select", "label": "ANREDE", - "placeholder": "AUSWÄHLEN", - "is_required": false + "is_required": false, + "options": [ + {"value": "herr", "label": "Herr"}, + {"value": "frau", "label": "Frau"}, + {"value": "divers", "label": "Divers"} + ] }, - "email": { + { "type": "email", "label": "VORNAME", "placeholder": "VORNAME", "is_required": true }, - "subject": { + { "type": "text", "label": "NACHNAME", "placeholder": "ILLENBERGER", "is_required": false }, - "message": { + { "type": "textarea", "label": "NACHRICHT", "placeholder": "HALLO, ICH HABE EINE FRAGE.", "is_required": false }, - "checkbox": { + { "type":"checkbox", "label":"Hiermit erkläre ich, dass ich die AGB aufmerksam gelesen habe und dass ich. Meine Einwilligung zur Verarbeitung meiner persönlichen Daten gemäß geltender Datenschutzverordung gebe.", "placeholder": null, "is_required": null } - }, + ], "ctaTitle": "KONTAKT AUFNEHMEN", "ctaLink": "http://google.com", "ctaTarget": "_blank" diff --git a/data/block/gallery-black.json b/data/block/gallery-black.json index 9122b9a..0f5bcc9 100644 --- a/data/block/gallery-black.json +++ b/data/block/gallery-black.json @@ -21,7 +21,6 @@ "md5Checksum": "0ae20a86307cb5e55d2284825a6c0847" }, "headline": "Dies ist eine Bildüber", - "text": "schrift", "copy": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.." } } diff --git a/data/block/hero.json b/data/block/hero.json index 947e029..0cde133 100644 --- a/data/block/hero.json +++ b/data/block/hero.json @@ -22,7 +22,10 @@ }, "overline": "Dies ist eine Overline", "headline": "Dies ist eine Headline", - "copy": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet." + "copy": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.", + "ctaTitle": null, + "ctaTarget": null, + "ctaLink": null } } } \ No newline at end of file diff --git a/data/block/quote.json b/data/block/quote.json index 6f0c95a..cc8aef6 100644 --- a/data/block/quote.json +++ b/data/block/quote.json @@ -12,7 +12,7 @@ "text": "
Test
", "id": 1, "headline": "Seitdem John sich um unseren Labrador kümmert, hat sich das Energieniveau und die Lebensfreude unseres Hundes deutlich verbessert. Wir schätzen die Flexibilität und vor allem die Liebe, die er unserem pelzigen Familienmitglied entgegenbringt.", - "overline": "Familie Müller" + "caption": "Familie Müller" } } } \ No newline at end of file diff --git a/data/navigation.json b/data/navigation.json index 2121e02..ac2dcc7 100644 --- a/data/navigation.json +++ b/data/navigation.json @@ -3,6 +3,101 @@ "main": { "id": 1, "nodes": [ + { + "id": 7, + "name": "submenu", + "children": [ + { + "id": 8, + "name": "page", + "children": [], + "subject": { + "id": 11, + "title": "Blogartikel 04", + "url": "\/Blogartikel 04" + }, + "label": "Blogartikel 04", + "active": false, + "template": "/theme/navigation/page.html.twig", + "component": null + }, + { + "id": 8, + "name": "page", + "children": [], + "subject": { + "id": 11, + "title": "Blogartikel 02", + "url": "\/Blogartikel 02" + }, + "label": "Blogartikel 02", + "active": false, + "template": "/theme/navigation/page.html.twig", + "component": null + }, + { + "id": 8, + "name": "page", + "children": [], + "subject": { + "id": 11, + "title": "Blogartikel 04", + "url": "\/Blogartikel 04" + }, + "label": "Blogartikel 04", + "active": false, + "template": "/theme/navigation/page.html.twig", + "component": null + }, + { + "id": 9, + "name": "page", + "children": [], + "subject": { + "id": 12, + "title": "Blogartikel 04", + "url": "\/blog\/Blogartikel 04" + }, + "label": "Blogartikel 04", + "active": false, + "template": "/theme/navigation/page.html.twig", + "component": null + } + ], + "subject": { + "id": 2 + }, + "label": "Blog", + "active": false, + "template": "/theme/navigation/submenu.html.twig", + "component": null + }, + { + "id": 1, + "name": "page", + "children": [], + "subject": { + "id": 4, + "title": "Home", + "url": "expr:ref('page/homepage.json', 'resource.url')" + }, + "label": "Team", + "active": false, + "template": "/theme/navigation/page.html.twig" + }, + { + "id": 1, + "name": "page", + "children": [], + "subject": { + "id": 4, + "title": "Home", + "url": "expr:ref('page/homepage.json', 'resource.url')" + }, + "label": "Jobs", + "active": false, + "template": "/theme/navigation/page.html.twig" + }, { "id": 1, "name": "page", @@ -12,7 +107,7 @@ "title": "Home", "url": "expr:ref('page/homepage.json', 'resource.url')" }, - "label": "Home", + "label": "Contact", "active": false, "template": "/theme/navigation/page.html.twig" } diff --git a/data/page/homepage.json b/data/page/homepage.json index 963a91a..14c28af 100644 --- a/data/page/homepage.json +++ b/data/page/homepage.json @@ -26,7 +26,7 @@ "expr:load('block/advanced_text-headline-breaker.json')", "expr:load('block/advanced_text-text-big.json')", "expr:load('block/advanced_text-text-one-column.json')", - "expr:load('block/advanced_text-text-two-column-wide.json')", + "expr:load('block/advanced_text-text-one-column-wide.json')", "expr:load('block/advanced_text-text-two-column.json')", "expr:load('block/quote.json')", "expr:load('block/form.json')", diff --git a/templates/theme/base.html.twig b/templates/theme/base.html.twig index dcc7c83..5369680 100644 --- a/templates/theme/base.html.twig +++ b/templates/theme/base.html.twig @@ -1,7 +1,45 @@ + + + + + + + {% block meta %}{% endblock %} + + {% block stylesheets %} + {{ encore_entry_link_tags('base', null, 'theme') }} + {% endblock %} + + {% block javascripts %} + {{ encore_entry_script_tags('base', null, 'theme') }} + {% endblock %} + + + + + + + + + + {% block body %} {% block header %}