Page History

...

Div

id	first-successful-story
class	section

Div

class	container

Div

class	cols section justify-content-between

Div

id	first-successful-story_image
class	col-5

HTML Image

src	https://ec.europa.eu/digital-building-blocks/sites/download/attachments/605323607/illu-ecosystem-text_isometric.png
alt	the first successful story ecosystem

Div

id	first-successful-story_content
class	col-5

Html-bobswift

<h2 class="heading-deco terciary">The importance of the ecosystem</h2> 
<p>The EBSI Early Adopters have been challenged to <strong>test their different pilots in real-life settings. Key stakeholders had to be identified to test the interoperability of their solutions</strong> in the ecosystem to allow for the exchange of verifiable credentials by students and universities: trusted accreditation organisations, trusted issuers, holders of credentials, wallet providers and other partners.</p>

Div

id	a-collaborative-path
class	cols section justify-content-between ss-video

Div

class	col-6

Html-bobswift

<h2 class="heading-deco terciary">A collaborative path</h2>
<p>The final step of the Early Adopters programme was a showcase of the outcomes in the demo day organised in June 2022.</p>
<p><a class="btn secondary outline" href="https://www.youtube.com/watch?v=mIZuECZgWpU&list=PLPMb0otsCuFLpE4UYiAZ_y3HhP2VX6q8O" target="_blank"><span>Watch demo day</span></a></p>
<p>
<ol class="list-numeral">
<li><strong>Discover</strong><p>They first explored the EBSI specifications and made sure their pilot scope was clear.</p></li>
<li><strong>Design</strong><p>They used the Verifiable Credentials Lifecycle to understand how Verifiable Credentials work according to W3C and EBSI standards. They designed the cross-border pilot scenario(s) and the integration plan at a Design Workshop.</p></li>
<li><strong>Build and Test</strong><p>They integrated their solutions in pre-production, basing themselves on the Verifiable Credentials Playbook and using wallets conformant with EBSI, they implemented the Verifiable Credentials according to W3C and EBSI standard specifications. </p></li>
</ol>
</p>

id

Div

a-collaborative-path_image	class	col-6

HTML

<div id="tabs-video-content">

<div id="tab1" class="tab-video-content">
<div class="tabs-video-content-iframe">
<iframe src="https://europa.eu/webtools/crs/iframe/?oriurl=%2f%2fwww.youtube.com%2fembed%2fmIZuECZgWpU&list=PLPMb0otsCuFLpE4UYiAZ_y3HhP2VX6q8O" allowfullscreen="" width="100%" height="315" frameborder="0"></iframe>
</div>
</div>

</div>

<div class="check-demo-days-list">
<p><a class="btn secondary outline" href="https://www.youtube.com/watch?v=mIZuECZgWpU&list=PLPMb0otsCuFLpE4UYiAZ_y3HhP2VX6q8O" target="_blank"><span><strong>Watch all demo days</strong></span><span class="ico-external"></span><span class="sr-only">(opens in a new tab)</span></a></p>
</div>

HTML Image

src	https://ec.europa.eu/digital-building-blocks/sites/download/attachments/605323607/illu-a-collaborative-path.png?api=v2
alt	a collaborative path
width	324

Div

class	bg-background-image

HTML
<img/ src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/605323607/shape-a-collaborative-path.svg" alt="a collaborative path">

...

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 right; 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; {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 (maxmin-width: 768px769px) {
.ss-actors [class*="ss-col-actor"].ss-actor-no-border-mobiledesktop { border:none;}
}

.ss-actor-nolist-mobilelabel { displaypadding:none !important0;}
}

@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-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-wave-top { z-index:12; position: relative; margin-top:-1rem2rem; positionpadding-top:relative0; height:8rempadding-bottom: 6rem; background-color: #E5F7FE;}
.ss-cta-register-wave-top p  .cols:last-child { margin-top:0 -3rem;}
/*HACK to remove empty p*/
.ss-cta-register-wave-top img { position:absolute; top:-1px; left:-1%; width: 102% .cols:first-child p:first-child { display: none;}
/*contentCARD*/
.ss-cta-register .card-grid-body img { zmargin-indextop:21rem; positionwidth: relative; margin-top:-2rem; padding-top:0; padding-bottom: 6rem; background-color: #E5F7FE80px}
.ss-cta-register .card-grid-text { margin:1rem 0 0 0;}
.ss-cta-register .cols:last-childcard-grid-footer { margintext-topalign: -3remright;}



/*HACK Updated topage remove- emptyCSS 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

@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; }
	#choose#ready-to-aregister-domaincontent .justify-content-around > .card-grid { width: 100%!important; min-height: auto!important;}
	#define#whats-your-role .justify-content-aroundin-it-for-you_image img { displaywidth: flexauto!important; 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}	
	#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: 700px; 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; flexalign-directionitems: columnend; justify-content: center; }
#first-successful-story_content h2 { font-size: 40pxz-index : 10; }
#first#a-successfulcollaborative-storypath_image > img { maxz-widthindex: 700px10; width: 50vw; }

#a-collaborative-path > div:first-child { position: relative .bg-background-image {position: absolute; right: -15px; bottom: -38px; z-index : 101; }
#a-collaborative-path .list-numeral li::before { margin-top: 2rem;}
#a-collaborative-path h2 { font-size: 20px!important32px; }

#a-collaborative-path > .list-numeral li strong { vertical-align: text-bottom; margin-left: 10px; }
col-6:nth-child(2) > p:first-child, #a-collaborative-path .list-numeral li p { margin-left: 32px; }
> .col-6:nth-child(2) > p:last-child { display: none; }
#a-collaborative-path_image > .col-6:nth-child(2) { display: flex; flex-direction: column; align-itemsgap: 32px; justify-content: endcenter; justifymargin-contenttop: center116px; z-index: 5; position: 10relative; }
#a-collaborative-path_image > img { z-index: 10; }
#a-collaborative-path .bg-background-image {position: absolute; right: -15px; bottom: -38px; z-index : 1;.col-6:nth-child(2) .check-demo-days-list { display: flex; justify-content: center; }
#a-collaborative-path {> margin.col-top: 2rem;}
#a-collaborative-path h2 { font-size: 32px; }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; }

...

Page tree

Versions Compared

Old Version 30

New Version 31

Key