Div | ||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||
|
Div | ||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||||||||||||
|
...
Div | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
...
Div | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
...
CSS Stylesheet |
---|
#ss-bg-section { position:relative; height:8rem;} #ss-bg-section p { margin: 0; } #ss-bg-section img { position: absolute; top: -216px; right: 0;} /*---SS SECTION INTRODUCTION---*/ .success-stories-introduction { background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/575210496/bg-curve-half-terciary.svg"); background-position: bottom righttop; background-repeat: no-repeat; background-size: cover;} /*---SS SECTION FIRST PILOT---*/ /* https://ec.europa.eu/digital-building-blocks/sites/download/attachments/575210496/bg-curve-half-right-secondary.svg */ .ss-first-pilot { background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/575210496/bg-curve-top-right-secondary.svg"); background-position: bottom right; background-repeat: no-repeat; background-size: cover;} .ss-first-pilot .container { margin-bottom: 2rem;} .ss-first-pilot .card-grid-body .list-flag { margin-top:1rem; margin-bottom:0;} .ss-first-pilot .card-grid-footer { text-align:right;} /*---SS SECTION IMPORTANCE ECOSYSTEM---*/ /*wave top*/ .ss-importance-ecosystem-wave-top { position:relative; height:8rem; background-color: #E5F7FE;} .ss-importance-ecosystem-wave-top p { margin:0;} .ss-importance-ecosystem-wave-top img { position:absolute; top:-1px; left:-1%; width: 102%;} /*content*/ .ss-importance-ecosystem { background-color: #E5F7FE;} .ss-importance-ecosystem .cols:first-child { margin-top:-4rem;} .ss-importance-ecosystem .list-numeral li p:first-child { margin-top:1rem;} /*---SS SECTION EBSI ECOSYSTEM---*/ .ss-ecosystem h2 { margin-bottom: 0;} /*---SS SECTION EBSI ECOSYSTEM---*/ .ss-actors { margin-top:-3.5rem;} .ss-actors [class*="ss-col-actor"] { padding-top: 2rem; padding-bottom: 2.5rem; border-bottom:1px solid #E3E2E6;} .ss-actors [class*="ss-col-actor"] p:last-child {margin-bottom:0;} @media only screen and (max-width: 768px) { .ss-actors [class*="ss-col-actor"].ss-actor-no-border-mobile { border:none;} .ss-actor-no-mobile { display:none !important;} } @media only screen and (min-width: 769px) { .ss-actors [class*="ss-col-actor"].ss-actor-no-border-desktop { border:none;} } .ss-actor-list-label { padding: 0;} .ss-actor-list-label li {list-style: none; display: inline-block;} .ss-actor-list-label li, .ss-actor-label { margin:0.25rem 1rem 0 0; padding:4px 12px; letter-spacing:1px; background-color: #FFCCE4; border-radius: 6px;} /*---SS SECTION CTA REGISTER---*/ /*wave top*/ .ss-cta-register-wave-top { z-index:1; margin-top:-1rem; position:relative; height:8rem; background-color: #E5F7FE;} .ss-cta-register-wave-top p { margin:0;} .ss-cta-register-wave-top img { position:absolute; top:-1px; left:-1%; width: 102%;} /*content*/ .ss-cta-register { z-index:2; position: relative; margin-top:-2rem; padding-top:0; padding-bottom: 6rem; background-color: #E5F7FE;} .ss-cta-register .cols:last-child { margin-top: -3rem;} /*HACK to remove empty p*/ .ss-cta-register .cols:first-child p:first-child { display: none;} /*CARD*/ .ss-cta-register .card-grid-body img { margin-top:1rem; width: 80px} .ss-cta-register .card-grid-text { margin:1rem 0 0 0;} .ss-cta-register .card-grid-footer { text-align: right;} /* Updated page - CSS */ @media screen and ( max-width: 400px) { #a-collaborative-path_image > img { width: 80%; } } @media screen and (max-width: 768px) { #choose-a-domain .justify-content-around { display: flex; flex-direction: column; gap: 24px; } #choose-a-domain .justify-content-around > .card-grid { width: 100%!important; min-height: auto!important;} #define-your-role .justify-content-around { display: flex; flex-direction: column; gap: 24px; } #define-your-role .justify-content-around > .card-grid { width: 100%!important; min-height: auto!important; } #ready-to-register-content .justify-content-around { display: flex; flex-direction: column; gap: 24px; } #ready-to-register-content .justify-content-around > .card-grid { width: 100%!important; min-height: auto!important;} #whats-in-it-for-you_image img { width: auto!important; } #first-successful-story_image > img { width: 80vw!important; } } .bg-gradient { background: linear-gradient(90deg, #00B3EF 0%, #004494 50%, #004494 65.57%, #FF0179 115.49%)!important;} .remove-unused-list { visibility: hidden; margin: 0px; } .h2 { font-size: 32px!important;} .card-grid { background: #FFF; } .card-grid-body { padding:0 1rem;} .card-grid-footer { padding: 0 1rem;} .card-grid-footer a { cursor: pointer; } .justify-content-around { gap: 1.5rem; } .img-fluid { width: 110%!important; } /* Importance of eco */ #first-successful-story { background: #E5F7FE; position: relative;} #first-successful-story .container { max-width: 1288px!important; } #first-successful-story_content { display: flex; flex-direction: column; justify-content: center; } #first-successful-story_content h2 { font-size: 40px; } #first-successful-story_image > img { max-width: 700px100%; width: 50vw; } #a-collaborative-path > div:first-child { position: relative; z-index: 10; } #a-collaborative-path .list-numeral li::before { font-size: 20px!important; } #a-collaborative-path .list-numeral li strong { vertical-align: text-bottom; margin-left: 10px; } #a-collaborative-path .list-numeral li p { margin-left: 32px; } #a-collaborative-path_image { display: flex; align-items: end; justify-content: center; z-index : 10; } #a-collaborative-path_image > img { z-index: 10; } #a-collaborative-path .bg-background-image {position: absolute; right: -15px; bottom: -38px; z-index : 1;} #a-collaborative-path { margin-top: 2rem;} #a-collaborative-path h2 { font-size: 32px; } #a-collaborative-path > .col-6:nth-child(2) > p:first-child, #a-collaborative-path > .col-6:nth-child(2) > p:last-child { display: none; } #a-collaborative-path > .col-6:nth-child(2) { display: flex; flex-direction: column; gap: 32px; justify-content: center; margin-top: 116px96px; z-index: 5; position: relative; } #a-collaborative-path > .col-6:nth-child(2) .check-demo-days-list { display: flex; justify-content: center; } #a-collaborative-path > .col-6:nth-child(2) .tabs-video-content-iframe > iframe { border-radius: 16px; } /* requirements section */ #requirments-to-join .list-numeral li span { font-size: 32px; margin-left: 10px; font-weight: 500;} #requirments-to-join .justify-content-around { padding-bottom: 1.5rem;} #requirments-to-join h2 { font-size: 40px; } .header-requirments-to-join {padding-top: 0px!important; padding-bottom: 0px!important;} #choose-a-domain { border-left: 2px solid #99E1F9;} #choose-a-domain > div { padding-left: 2.5rem;} #choose-a-domain > div:first-child { padding-top: 0px;} #choose-a-domain { display: flex; flex-direction: column; margin-left: 0.2rem;} #choose-a-domain .card-grid {width: 32%; min-width: 145px; min-height: 356px; padding-top: 3rem; padding-bottom: 2.5rem;} #define-your-role { border-left: 2px solid #99E1F9;} #define-your-role > div:first-child { padding-left: 2.5rem; } #define-your-role > div { padding-left: 2.5rem;} #define-your-role > div:first-child { padding-top: 0px;} #define-your-role { display: flex; flex-direction: column; margin-left: 0.2rem;} #define-your-role .card-grid {display: flex; flex-direction: column; padding-top: 3rem; padding-bottom: 2.5rem; width: 32%; min-width: 145px!important; min-height: 420px;} #define-your-role .card-grid-footer .card-capabilities { background: #ffcce4; width: fit-content; padding: 0.2rem 0.5rem; border-radius: 6px; letter-spacing: 0.1em; margin-top: 1rem; word-break : break-word; max-width: 250px;} /* ready to register section */ #ready-to-register-content > div:first-child { padding-left: 2.5rem; } #ready-to-register .list-numeral li span { font-size: 32px; margin-left: 10px; font-weight: 500; color: #fff;} #ready-to-register p { color: #fff;} #ready-to-register h2 { color: #fff;} #ready-to-register .list-numeral li::before { color: #fff!important;} #ready-to-register .container > div { display: flex; flex-direction: column; } #ready-to-register { padding-bottom: 5rem; padding-left: 1.5rem; padding-right: 1.5rem;} #ready-to-register-content > div > p:first-child { margin: 0px; } #ready-to-register-content > div > p:nth-child(2) { margin-bottom: 2rem; } #ready-to-register-content > div > p:nth-child(3) { margin-bottom: 5rem; } #ready-to-register-content .card-grid {width:32%; min-width: 145px!important; min-height: 315px!important; display: flex; flex-direction: column; justify-content: space-around; padding-top: 2.5rem; padding-bottom: 2.5rem;} #ready-to-register-content .card-grid-footer { display: flex; justify-content: end; } #ready-to-register-content .justify-content-around { margin-top: 3rem;} #ready-to-register-content .card-grid-text p { color: #000;} #ready-to-register_content p { margin-bottom: 1rem!important;} #whats-in-it-for-you { display: flex; flex-direction: column; justify-content: center;} #whats-in-it-for-you p { color: #fff;} #whats-in-it-for-you h3 { color: #fff;} #whats-in-it-for-you_image { margin-top : 5rem;} #whats-in-it-for-you_image p { margin: 0!important; } #whats-in-it-for-you_image img { width: 90%; } .whats-in-it-for-you-curve-top { z-index:1; margin-top:-1rem; position:relative;} .whats-in-it-for-you-wave-bottom { overflow: hidden; z-index:1; position:relative; height:10rem; background-color: #E5F7FE; } .whats-in-it-for-you-curve-top > p > img { position:absolute; top:-1px; left:-1%; width: 102%;} .whats-in-it-for-you-wave-bottom > p > img { position:absolute; bottom:0; left:-1%; width: 102%;} #first-ss-pilot .card-grid-footer { text-align: right; } |
...