Versions Compared

Old Version 2

changes.mady.by.user Virginie MANGELINCK

Saved on

compared with

New Version 3

changes.mady.by.user Virginie MANGELINCK

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
CSS Stylesheet
/*-----------------------------------------------*/
/*---OOH ACCELERATOR DETAIL PAGE - 13-05-2024---*/
/*---------------------------------------------*/

#main-content p:empty { display: none;}
.mb-0 { margin-bottom:0;}

/*---INTRODUCTION---*/
#introduction .container > p:first-child { display: none; border:1px solid red;}
.introduction-box { display: flex; border-radius: 16px; overflow: hidden; }
.introduction-box-cover { width: 50%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/716149200/illu-introduction-projectathon-04.jpg"); background-size: cover;}
.introduction-box-content { position:relative; padding: 3.5rem 7rem 2.5rem 0; width: 50%; background-color: #F3F4F7;}
.introduction-box-content * { position: relative;}
.introduction-box-content:before { position:absolute; top: -10%; left:-110px; display: inline-block; content:""; background-color: #F3F4F7; width: 200px; height: 120%; border-radius: 50% 50% 52% 48% / 50% 50% 50% 50% ;}
.heading-subtitle { display: block; font-size: 14px; line-height: 24px; letter-spacing: 5px; font-family: Source Sans Pro SB !important; text-transform: uppercase;}

@media screen and (max-width: 768px) {
    .introduction-box { display: block;}
    .introduction-box-cover { height: 260px; width: 100%;}
    .introduction-box-content { padding: 2rem; width: 100%;}
    .introduction-box-content:before { width: 0;}
}

@media screen and (min-width: 769px) {
  .introduction-box-content h1 + p { width: 80%;}
}

/*---INFORMATION---*/
#information { padding-top:0; padding-bottom:0;}

/*reboot*/ 
#information .container .cols { margin:0;}
#information .container .cols > div { padding:0;}

#information h2 { margin:6rem 0 40px 0;}
#information h2:first-child { margin-top:0;}

.information-list { margin: 0; padding: 0;}
.information-list li { margin:2rem 0 0 0; padding-bottom:1rem; list-style-type: none; border-bottom: 1px solid #E3E6EB;}
.information-list li:first-child { margin-top:0;}
.information-list li:last-child { padding-bottom:0; border-bottom: none;}
.information-col:nth-child(1) p { font-size: 18px; color: #001832;}
.information-list li:last-child .information-col:nth-child(2) p { margin-bottom:0;}

@media screen and (min-width: 769px) {
	.information-cols { display: flex; align-items: flex-start;}
	.information-col:nth-child(1) { width: 30%;}
	.information-col:nth-child(2) { width: 70%}
}

/*---AGENDA BOX---*/
.agenda {
  background: rgb(243,244,247);
  background: linear-gradient(0deg, rgba(243,244,247,1) 75%, rgba(251,252,255,1) 75%, rgba(251,252,255,1) 100%);
}
 
.agenda-content-box { position: relative; padding:80px; background-color:#00284A; border-radius:60px;}
.agenda-content-box:nth-child(2) { margin-top:40px;}
.agenda-content-box > p:first-child { display:none; border:1px solid red;}

@media screen and (max-width: 768px) {
  .agenda-content-box { padding:20px; border-radius:20px;}
}

.agenda-content-box h2 { margin-bottom:40px; color: #FFF;}

.agenda-hour-cols { display: flex;}
.agenda-hour-col:nth-child(1) { padding:1rem 0; width: 25%; font-family: Source Sans Pro SB;}
.agenda-hour-col:nth-child(2) { padding:1rem 0; width: 75%; border-bottom: 1px dashed rgba(255, 255, 255, 0.25);}
.agenda-hour li:last-child .agenda-hour-cols  .agenda-hour-col:nth-child(2) { border-bottom:none;}

@media screen and (min-width: 769px) {
	.agenda-cols { display: flex;}
	.agenda-col:nth-child(1) { width: 30%;}
	.agenda-col:nth-child(2) { width: 70%}
}

/*hour*/
.agenda-hour { margin: 0; padding:0;}
.agenda-hour li { list-style: none;}
.agenda-hour li:first-child { padding-top:0;}
.agenda-hour li:last-child { padding-bottom:0; border-bottom: 1px dashed transparent;}
.agenda-hour li .agenda-hour-col:nth-child(1) {color: #FFF;}
.agenda-hour li .agenda-hour-col:nth-child(2) {color: rgba(255, 255, 255, 0.75);}

/*ico-location*/
.location { display: inline-flex; flex-direction: row; align-items: center; gap: 6px;}
.location span:nth-child(1) { display: inline-block; width: 16px; height: 16px;}
.location.room-1 span:nth-child(1) { background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/716149200/ico-room-1.svg") no-repeat center;}
.location.room-1 span:nth-child(2) { color:#FBC11D;}
.location.room-2 span:nth-child(1) { background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/716149200/ico-room-2.svg") no-repeat center;}
.location.room-2 span:nth-child(2) { color:#EC8FFF;}

/*add illu*/
.illu-projectathon-agenda { position: absolute; bottom: -65px; right: 50px;}
.illu-projectathon-agenda img {width: 90px;}

@media screen and (min-width: 769px) {
  .illu-projectathon-agenda { bottom: -110px; right: 100px;}
  .illu-projectathon-agenda img {width: 180px;}
}

/*macro expand*/
.expand-container { margin:0; padding:0; border-bottom: 1px solid rgba(255, 255, 255, 0.12);}
.expand-container:last-child { border-bottom: 1px solid transparent;}
.expand-container .aui-icon::before { font-size: 20px !important; color: #FFF;}
.expand-container [aria-expanded="true"] .aui-iconfont-chevron-down { transform: rotate(180deg);}
.expand-container [aria-expanded="false"] .aui-iconfont-chevron-right { transform: rotate(90deg);}
.expand-control { display: flex; align-items: center;  margin-bottom:0; padding:40px 0;}
.expand-control button { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items:end; gap: 24px; width:100%;}
.expand-control button.aui-button.aui-button-link { color: transparent;}
.expand-control button span:nth-child(1) {}
.expand-control button span:nth-child(2) { text-align: left;}
.expand-control-text {width: 100%; font-size: 20px; color: #FFF;}
.expand-content { margin:0; padding: 0; color: #5E748E;}

@media screen and (max-width: 768px) {
  .expand-control-text { font-size: 16px;}
}

/*---REGISTER---*/
#register { display:none; padding-bottom:0; background:#F3F4F7;}

/*reboot*/ 
#register .container .cols { margin:0;}
#register .container .cols > div { padding:0;}

#register .container .cols { position:relative; z-index: 10;}
#register h2 { margin-bottom:40px;}
#register ul { margin:2.5rem 0 0 0; padding: 0; list-style: none;}
#register ul li { display:flex; align-items: baseline; gap:8px;}
#register ul li span { display: flex; align-items: center; justify-content: center; background: #E3E6EB; width: 24px; height: 24px; min-width: 24px; border-radius: 24px; color: #3D597A; font-size: 12px;}
#register ul li:last-child > p { margin-bottom:0;}
#register p.p-btn-cta { margin:40px 0 0 0;}

/*---OBSERVERBOX PLAYBOOK---*/
#observer#box-cta-playbook { padding-top:0; position:relative; background:#F3F4F7;}

#observer img { display: none; position:absolute; bottom:0; right: 0; z-index:9;}

/*reboot*/ 
#observer .container > p:first-child { display: none; border:1px solid red;}
#observer#box-cta-playbook .container .cols { margin:0;}
#observer#box-cta-playbook .container .cols > div.col-8 { padding:0;}

#observer .container .cols box-playbook { positionpadding:relative1.5rem; zbackground-indexcolor: 10 #00284A; border-radius:20px;}

/*#observer .container .cols div { border-top:1px solid #E3E6EB;}*/
#observer .container .cols div h2 { margin:0 0 40px 0;}
#observer p.p-btn-cta { margin-bottom:0;}

/*---BOX PLAYBOOK---*/
#box-cta-playbook { position:relative;}

/*reboot*/ 
#box-cta-playbook .container .cols { margin:0;}
#box-cta-playbook .container .cols .col-8 { padding:0;}
.box-playbook h4 span { display: block; font-size: 12px; letter-spacing: 5px; font-family: Source Sans Pro SB; text-transform: uppercase; color: rgba(251, 193, 29, 1);}
.box-playbook h4, #box-cta-playbook p { color: white;}
.box-playbook p.p-opacity { opacity: 0.75}
.box-playbook p:last-of-type { margin-bottom:0;}
.box-playbook ul { padding:1.5remmargin-bottom:0; background-colorpadding:1rem #00284A0 0 1rem; border-radius:20pxcolor: #EC8FFF;}

.box-playbook h4 spana.secondary-download { displaycolor: block; font-size: 12px; letter-spacing: 5px; font-family: Source Sans Pro SB; text-transform: uppercase; color: rgba(251, 193, 29, 1);}
.box-playbook h4, #box-cta-playbook p { color: white;}
#EC8FFF;}
.box-playbook .box-playbook-illu img { width: 120px; height:auto;}

@media screen and (max-width: 768px) {
  .box-playbook p.pbox-playbook-opacityillu { opacity: 0.75}
.box-playbook p:last-of-type { margin-bottom:0;}
.box-playbook ul { margin-bottom:0; padding:1rem 0 0 1rem; color: #EC8FFF;}
.box-playbook a.secondary-download { color: #EC8FFF;}
.box-playbook .box-playbook-illu imgmargin-bottom:1rem;}
}

@media screen and (max-width: 900px) {
  #box-cta-playbook .container .cols .col-8 { width: 120px; height:auto;100%;}
}

@media screen and (maxmin-width: 768px769px) {
  .box-playbook { padding:2.5rem;}
  .box-playbook-illucols { margin-bottom:1rem;}
}

@media screen and (max-width: 900px) {
  #box-cta-playbook .container .cols .col-8 { width: 100%;}
}

@media screen and (min-width: 769px) {
  .box-playbook { padding:2.5rem;}
  .box-playbook-cols { display: display: flex; align-items: center; gap: 80px;}
}

@media screen and (min-width: 1366px) {
  .box-playbook { padding:5rem;}
}

/*---FOOTER---*/
#projectathon-footer { padding-top:0;}

/*reboot*/ 
#projectathon-footer .container .cols { margin:0;}
#projectathon-footer .container .cols .col-12 { padding:0;}

#projectathon-footer .container .cols div { border-top:1px solid #E3E6EB;}
#projectathon-footer .container .cols div p { margin:40px 0 0 0;}

...

Div
idregister
classsection
Div
classcontainer
Html-bobswift
<div class="cols">
<div class="col-9">

<h2 class="h3">How to register in the OOTS Projectathons</h2>

<ul>
<li>
<span>1</span>
<p>The Organising Team invites the National Coordinators to register for the Projectathon event via an event registration form (using EU Survey)</p>
</li>
<li>
<span>2</span>
<p>National Coordinators register for the Projectathon event via EU Survey. They share the link to the event registration form with each person joining the Projectathon from their Member State (including the Competent Authorities). It is mandatory for every participant from a Member State to fill in the event registration form for the May 2024 Projectathon (it is a pre-condition for getting access to the Gazelle platform). Please register on time, this is also needed for the catering.</p>
</li>
<li>
<span>3</span>
<p>Once the event registration process is completed (see step 2), the Supporting Team invites National Coordinators to encode their organisation and users (team members) in the Gazelle platform (active participants only). Note that all participants will have to register again in 2024 (2023 data has been anonymised and removed from Gazelle). In case you need test related data for archiving or auditing purposes, don’t forget to archive your data in Gazelle at the end of the year since data will be again anonymised and will be deleted one month after the end of the year (around end of January 2025) </p>
</li>
<li>
<span>4</span>
<p>National Coordinators select the relevant test session (May 2024) and add your System(s) Under Test (SUT) in the Gazelle platform (active participants only). Note that since data of 2023 has been anonymized in Gazelle and because there is a new modelisation for 2024, you will have to recreate your SUT.</p>
</li>
</ul>

<!--<p class="p-btn-cta"><a class="btn primary" href="https://ec.europa.eu/eusurvey/runner/OOTS-Projectathon-04"><span>Register for the Projectathon #4</span></a></p>-->

</div>
</div>
Div
idobserver
classsection
Div
classcontainer
Html-bobswift
<p style="margin-bottom:0;"><img aria-hidden="true" alt="" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/716149200/bg-illu-observer.svg"></p>

<div class="cols">
<div class="col-7">

<h2 class="h3">Participate as an observer</h2>
<p>Explore the Projectathon Playbook to discover how to prepare for the upcoming Projectathon event by participating as an observer, and learn the process for registering as an observer.</p>
 recreate your SUT.</p>
</li>
</ul>

<!--<p class="p-btn-cta"><a class="btn ghostprimary" href="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/Once-Only_Technical_System_Projectathon_Playbook_v4.00.pdf" onclick="_paq.push(['trackEvent','conversion','oots-projectathon-detail-page-04','oots-projectathon-playbook'])"><span>Downloadeusurvey/runner/OOTS-Projectathon-04"><span>Register for the Projectathon Playbook</span><span class="ico-download"></#4</span></a></p>-->

</div>
</div>


Div
idbox-cta-playbook
classsection
Div
classcontainer
Html-bobswift
<div class="cols justify-content-center">

<div class="col-8">
<div class="box-playbook">
<div class="box-playbook-cols">

<div class="box-playbook-illu">
<img aria-hidden="true" alt="" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/illu-projectathon playbook.png">  
</div>

<div class="box-playbook-content">
<h4><span class="subtitle">Projectathon Playbook</span>Want to learn more?</h4>
<p class="p-opacity">Explore the Projectathon Playbook for a detailed overview of the Projectathon events organisation, teams and how to participate.</p>
<p><a class="btn primary-bis" href="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/Once-Only_Technical_System_Projectathon_Playbook_v4.00.pdf" onclick="_paq.push(['trackEvent','conversion','oots-projectathon-detail-page-04','oots-projectathon-playbook'])"><span>Download the Projectathon Playbook</span><span class="ico-download"></span></a></p>

<ul>
<li>
<a class="secondary-download " href="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/Once-Only_Technical_System_Projectathon_Playbook_Appendix_Gazelle_SUT_capabilities_v4.00.pdf" onclick="_paq.push(['trackEvent','conversion','oots-projectathon-detail-page-04','oots-projectathon-playbook-appendix-gazelle'])"><span>Download Appendix: Gazelle SUT capabilities and associated concepts</span></a>
</li>
<li>
<a class="secondary-download" href="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/Once-Only_Technical_System_Projectathon_Playbook_Annex2_How_to_do_pre-tests_in_Gazelle_V4.00.pdf" onclick="_paq.push(['trackEvent','conversion','oots-projectathon-detail-page-04','oots-projectathon-playbook-annex2-gazelle'])"><span>Annex 2: how to do pre-tests in Gazelle</span></a>
</li>
</ul>

</div>

</div>
</div>
</div>

</div>
display:none;
Div
style
idprojectathon-footer
classsection
Div
classcontainer
Html-bobswift
<div class="cols">

<div class="col-12">
<p class="text-right"><a class="btn primary" href="https://ec.europa.eu/eusurvey/runner/OOTS-Projectathon-04"><span>Register fo this event</span></a></p>
</div>

</div>