Page History

...

Div

id	introduction
class	section bg-top-curve

Div

class	container

Div

class	cols

Div

class	col-6

HTML

<h1 class="heading-deco terciary">Grants</h1>
<p class="lead"><strong>Support the deployment of EBSI services</strong></p>
<p>The EU proposes a number of funding programmes to support digital transformation across the EU. Some of those grants can support EBSI implementations. We list those funding opportunities here. </p>
<br>
<p><a class="btn secondary anchor-smooth-scroll" href="#open-grant"><span class="text-reboot">Find an open grants call</span><span class="ico-arrow-south"></span></a></p>

Div

HTML Image

src	https://ec.europa.eu/digital-building-blocks/sites/download/attachments/501089469/illu-grants_search.svgGrants.gif
id	grants-animation
class	img-fluid img-right

Div

id	apply-grants
class	section

Div

class	container

Div

class	cols justify-content-between

Div

class	col-6

HTML Image

src	https://ec.europa.eu/digital-building-blocks/sites/download/attachments/501089469/illu-grants_apply.svg
style	z-index: 100; position: relative;
class	img-fluid img-center

Div

class	col-6

HTML

<h2 class="heading-deco terciary">Who can apply for European Union grants?</h2>
<p>Every grants call is associated with a series of conditions. These will depend on the funding programme, its goals, and the policy priorities of the European Commission. Grants are open to all in the European Union who fulfill the conditions of the specific call for proposal. </p>

...

CSS Stylesheet

@media screen and ( max-width: 500px ) {

	#grants-dual-pill .dual-pill-bg { left: -60%!important; }
}

.bg-top-curve {
background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/501089469/bg-curve_grants-top.svg");
background-position:right top;
background-repeat: no-repeat;
background-size: contain;
}

.lead { font-size: 18px!important; }
#apply-grants { position: relative; z-index: 100; }

.order-list-start { padding-left: inherit; }

.dual-pill { padding-top: 5rem!important; }
#grants-dual-pill .dual-pill-bg { left: -10%; }
.dual-pill .btn { max-height: 45px; align-items: center;}
.dual-pill .btn .ico-external { background-size: 18px!important; }
.dual-pill .btn { margin-top: 24px; }


#main-content > p:nth-child(1) { display: none;}
#main-content > p:nth-child(2) { display: none;}
#main-content > p:nth-child(5) { display: none;}
#main-content > p:nth-child(6) { display: none; }


#closed-grants .col-5 { margin-top: 3rem; margin-bottom: 5rem; }
#closed_grant { justify-content:  space-between; padding: 2.5rem;}
#closed_grant .card-grid-footer { display: flex; justify-content: end; }
#closed_grant .grant-date { display: flex; align-items: center; gap: 10px; }
#closed_grant .grant-date span:first-child { display: flex; align-items: center; }
#closed_grant .grant-date span:first-child img { width: 14px; }


#introduction .btn { margin-top: 36px; }

/* no-slider */

.open-grant-container { min-height: 436px; background: linear-gradient(84.61deg, #00B3EF -13.37%, #004494 33.79%, #004494 65.57%, #FF0179 115.49%); border-radius: 24px; color: white; padding: 3rem;}
.open-grant-container h3 { color: white; }
.open-grant-container p { color: white; }
.open-grant-l-block { display: flex!important; flex-direction: column; justify-content: space-between; }
.open-grant-r-block { display: flex!important; justify-content: end; }
.grant-date { display: flex; gap: 10px; align-items: center; padding-top: 1rem;}
#open-grant .grant-date > span:first-child > img { width: 20px; padding-top: 0.2rem;}
.grant-date > span:nth-child(2) { display: flex; align-items: center; }
.grant-date > span:nth-child(2) span { text-align: center; }
.open-grant-container .dot-separator { width: 5px; height: 5px; min-width: 5px; min-height:5px; border-radius: 50%; margin: 0 1.25rem; background: #BBB6C2; }
.open-grant-container .line-separator { border-right: 1px solid white; margin: 1.5rem; }

@media screen and ( max-width: 768px ) {
	.open-grant-container { padding: 2rem!important; }
	.open-grant-container .line-separator { border-right: none!important; border-bottom: 1px solid white; }
}


@media screen and ( max-width: 550px ) {
	.open-grant-l-block .btn { align-items: center; }
	.btn .text-reboot { max-width: 180px; }
}

@media screen and ( min-width: 1137px ) {
	#grants-animation { max-width: unset!important; }
}

Page tree

Versions Compared

Old Version 83

New Version Current

Key