CSS Stylesheet |
---|
/*only for dev*/
/*.section { border:1px solid red;}
.cols { border:1px solid green;}*/
/*erase main CSS*/
.cols { margin-top: 0;}
.cols:last-child { margin-bottom: 0;}
.cols:not(:last-child) { margin-bottom: 0;}
.cols > div { padding-top: 0; padding-bottom:0;}
/*remove empty p added by Confluence*/
#main-content p:empty { display: none;}
/*-----------------------------------------------*/
/*---OOH FORUM EVENT DETAIL PAGE - 06-10-2023---*/
/*---------------------------------------------*/
/*---INTRODUCTION---*/
#introduction .container > p:first-child { display: none; border:1px solid purple;}
.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/691830885/illu-forum-event-citizens-introduction.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% ;}
.introduction-box-content p:last-child { margin-bottom:0;}
.heading-subtitle { display: block; font-size: 14px; line-height: 24px;}
@media screen and (max-width: 768px) {
.introduction-box { display: block;}
.introduction-box-cover { height: 12rem; width: 100%;}
.introduction-box-content { padding: 2rem; width: 100%;}
.introduction-box-content:before { width: 0;}
}
/*---INFORMATION---*/
#information { padding-top:0; padding-bottom:0;}
#information h2 { margin:3rem 0 2.5rem 0;}
#information p:last-child { margin-bottom: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;}
@media screen and (min-width: 769px) {
#information h2 { margin:6rem 0 2.5rem 0;}
.information-cols { display: flex; align-items: center;}
.information-col:nth-child(1) { width: 30%;}
.information-col:nth-child(2) { width: 70%}
}
/*---AGENDA BOX---*/
.agenda-content-box { margin-bottom:6rem; padding:80px 60px 60px 60px; background-color:#F3F4F7; border-radius:20px;}
.agenda-content-box:last-child { margin-bottom:0;}
.agenda-content-box h2 + p { color: white; opacity: 0.75;}
@media screen and (max-width: 768px) {
.agenda-content-box { margin-bottom:3rem; padding:40px 20px 20px 20px;}
}
.agenda-content-box {background-color: #00284A;}
.agenda-content-box h2 {color: #FFF;}
.agenda-content-box .expand-container { border-bottom: 1px solid rgba(255, 255, 255, 0.50);}
.agenda-content-box .expand-container:last-child { border-bottom: 1px solid transparent;}
.agenda-content-box .expand-control-text {color: #FFF;}
.agenda-content-box .expand-container .aui-icon::before { color: #FFF;}
.agenda-content-box .agenda-hour li {border-bottom: 1px dashed rgba(255, 255, 255, 0.25);}
.agenda-content-box .agenda-hour li:last-child { border-bottom: 1px dashed transparent;}
.agenda-content-box .agenda-hour li .agenda-hour-col:nth-child(1) {color: #FFF;}
.agenda-content-box .agenda-hour li .agenda-hour-col:nth-child(2) {color: rgba(255, 255, 255, 0.75);}
.agenda-content-box { position: relative;}
.illu-forum-agenda { position: absolute; bottom: -65px; right: 50px;}
.illu-forum-agenda img {width: 90px;}
@media screen and (min-width: 769px) {
.illu-forum-agenda { bottom: -110px; right: 100px;}
.illu-forum-agenda img {width: 180px;}
}
/*--- AGENDA MACRO EXPAND ---*/
.agenda-content-box .expand-container:last-child { border-bottom:1px solid transparent;}
.expand-container { margin:0; padding:0; border-bottom:1px solid #E3E6EB;}
.expand-control { display: flex; flex-direction: row-reverse; align-items: center; margin-bottom:0; padding:1rem 0;}
.expand-control-text { margin:0 0.5rem 0.5rem 0; width: 100%; font-size: 20px; color:#001832;}
.expand-content { margin:0; padding: 0; color: #5E748E;}
.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-container .aui-icon::before { font-size: 20px !important;}
@media screen and (max-width: 768px) {
.expand-control-text { font-size: 16px;}
}
/*---AGENDA HOUR---*/
.agenda-hour { margin: 0; padding:0; }
.agenda-hour li { padding:1rem 0; list-style: none; border-bottom: 1px dashed #E3E6EB;}
.agenda-hour li:first-child { padding-top:0;}
.agenda-hour li:last-child { padding-bottom:0; border-bottom: none;}
.agenda-hour li .agenda-hour-cols { display: flex;}
.agenda-hour li .agenda-hour-col:nth-child(1) { width: 25%; font-family: Source Sans Pro SB;}
.agenda-hour li .agenda-hour-col:nth-child(2) { width: 75%;}
.agenda-hour .label { margin-bottom:0;}
.agenda-hour .label span { padding:4px 10px; font-size: 12px; line-height: 12px; background: #E3E6EB; border-radius: 40px;}
.agenda-hour .label.plenary span { color: #842DB5; background: #F2E5F7;}
.agenda-hour .label.ccab span { color: #995E00; background: #FFEECC;}
.agenda-hour .label.tbc span { background: #E3E6EB;}
@media screen and (min-width: 769px) {
.agenda-cols { display: flex;}
.agenda-col:nth-child(1) { width: 30%;}
.agenda-col:nth-child(2) { width: 70%}
}
/*---UPCOMING EVENT---*/
#upcoming-event h2 + p { margin-bottom:3rem;}
/*---UPCOMING CARDS---*/
.card-upcoming-col { margin-top: 1.5rem;}
.card-upcoming-col:nth-child(0) .card-upcoming-body a { margin:-1rem 0 0 0; width: 115%; background: url( |
Div |
---|
id | introduction |
---|
class | section |
---|
|
Div |
---|
| Html-bobswift |
---|
<p><a class="link-cta primary before" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/Once-Only+Forum"><span>Back to Once-Only Forum</span></a></p>
<div class="introduction-box">
<div class="introduction-box-cover">
</div>
<div class="introduction-box-content">
<p class="h5">23 November 2023 | Brussels, Belgium</p>
<h1 class="h2"><span class="heading-subtitle">Once-Only Forum</span>Citizens' Focus Group</h1>
<p>A focus group to share experiences on current administrative procedures when moving and/or studying abroad.</p>
<p>Registration: <strong>06 October - 12 November 2023</strong></p>
<p class="text-right"><a class="btn primary" href="#"><span>Apply (note: no link)</span></a></p>
<!--<p>Registration: <strong>Closed</strong></p>-->
</div>
</div> |
|
|
Div |
---|
id | information |
---|
class | section |
---|
|
Div |
---|
| Div |
---|
| Html-bobswift |
---|
<div class="col-8">
<!-- START PRACTICAL INFORMATION -->
<h2 class="h3">Practical information</h2>
<ul class="information-list">
<li>
<div class="information-cols">
<div class="information-col"><p>Location</p></div>
<div class="information-col"><p>Brussels, Belgium</p></div>
</div>
</li>
<li>
<div class="information-cols">
<div class="information-col"><p>Date</p></div>
<div class="information-col"><p>23 November 2023</p></div>
</div>
</li>
<li>
<div class="information-cols">
<div class="information-col"><p>Target groups</p></div>
<div class="information-col">
<p>
<strong>Age:</strong> 18+<br>
<strong>Country of residency:</strong> All EU Member States<br>
<strong>Characteristics:</strong> Citizens who have had previous experiences with cross-border administrative procedures in either:<br>
- Application for a study financing for higher education, or<br>
- Initial application for admission to public higher education, or<br>
- Registration of a vehicle abroad.<br>
</p>
</div>
</div>
</li>
<li>
<div class="information-cols">
<div class="information-col"><p>Fees</p></div>
<div class="information-col"><p>No fees are charged to participate in the focus group</p></div>
</div>
</li>
</ul>
<!--END PRACTICAL INFORMATION -->
<!-- START DESCRIPTION -->
<h2 class="h3">Description</h2>
<p>This focus group will be organised for a small group of citizens, including students, and recent graduates, and you will be able to share your experiences with administrative procedures regarding moving and/or studying abroad, test the OOTS first-hand to see how it can make your life easier in these types of procedures, and provide insights to improve the OOTS.</p>
<p style="margin-top:2.5rem;"><a class="link-download primary" href="#"><span>Download the privacy statement (note: no link)</span></a></p>
<!-- END DESCRIPTION -->
<!-- START APPLY -->
<h2 class="h3">Interested in participating? Apply here:</h2>
<p>Already interested in participating in the OOTS Citizens’ Focus Group? Apply here!</p>
<p><a class="btn primary" href="#"><span>Apply (note: no link)</span></a></p>
<!-- END APPLY -->
</div>
|
|
|
|
...
...
...
...
class | faq-content-box custom-agenda |
---|
Html-bobswift |
---|
<h2 class="h3">Citizens’ Focus Group agenda</h2>
<p>During the focus group you will discuss your experiences with the administrative procedures when moving and/or studying abroad.<br> But what else will you be discussing?</p>
<p class="illu-projectathon-agenda"><img alt="" aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/688493907/illu-forum-agenda.png"></p>
<p><span class="badge warning">Coming soon</span></p> |
Expand |
---|
|
Html-bobswift |
---|
<ul class="agenda-hour">
<li>
<div class="agenda-hour-cols">
<div class="agenda-hour-col">08:00 - 09:00</div>
<div class="agenda-hour-col">Welcome coffee & registration
<p class="label ccab"><span>CCAB - room 0.A</span></p>
</div>
</div>
</li>
<li>
<div class="agenda-hour-cols">
<div class="agenda-hour-col">09:00 - 09:45</div>
<div class="agenda-hour-col">Introduction to the Once-Only Technical System Projectathon (day 1)
<p class="label plenary 0.A"><span>Plenary</span></p>
</div>
</div>
</li>
</ul> |
|
...
Div |
---|
id | upcoming-projectatons |
---|
class | section |
---|
|
Div |
---|
| Html-bobswift |
---|
<div class="cols">
<div class="col-8">
<h2>Upcoming Forums</h2>
<p class="mb-0">The Commission is organising forums for Citizens and forums for SMEs, each comprising of an onsite focus group and online forums discussing various cross-border procedures.</p>
</div>
</div> |
Html-bobswift |
---|
<div class="card-upcoming-cols">
<!--CARD 01-->
<div class="card-upcoming-col">
<div class="card-upcoming">
<div class="card-upcoming-body">
<a href="#" style="pointer-events: none;"></a>
<h3>Once-Only Forum for Citizens - Focus Group</h3>
<p class="label upcoming">Upcoming</p>
<p>Onsite event for 10 to 15 citizens, including students, and recent graduates, where you can share your experience in administrative procedures related to <strong>either moving and/or studying abroad</strong>.</p>
</div>
<div class="card-upcoming-footer">
<a class="btn primary" href="#"><span>Read more (note: page note yet dev)</span><span class="ico-cta-forward"></span></a>
</div>
</div>
</div>
<!---->
<!--CARD 02-->
<div class="card-upcoming-col">
<div class="card-upcoming">
<div class="card-upcoming-body">
<a href="#" style="pointer-events: none;"></a>
<h3>Once-Only Forum for Students and Recent Graduates</h3>
<p class="label upcoming">Upcoming</p>
<p>Online event for students and recent graduates to share experiences related to administrative procedures when <strong>studying abroad</strong>, and to experience how the Once-Only Technical System can improve these experiences.</p>
</div>
<div class="card-upcoming-footer">
<a class="btn primary" href="#"><span>Read more (note: page note yet dev)</span><span class="ico-cta-forward"></span></a>
</div>
</div>
</div>
<!---->
<!--CARD 03-->
<div class="card-upcoming-col">
<div class="card-upcoming">
<div class="card-upcoming-body">
<a href="#" style="pointer-events: none;"></a>
<h3>Once-Only Forum for Expats</h3>
<p class="label upcoming">Upcoming</p>
<p>Online event for citizens to share experiences related to administrative procedures when <strong>registering a vehicle abroad, and to experience</strong> how the Once-Only Technical System can improve these experiences.</p>
</div>
<div class="card-upcoming-footer">
<a class="btn primary" href="#"><span>Read more (note: page note yet dev)</span><span class="ico-cta-forward"></span></a>
</div>
</div>
</div>
<!---->
</div> |
|
|
Div |
---|
id | box-cta-playbook |
---|
class | section |
---|
|
Div |
---|
|
|
Html-bobswift |
<div class="cols justify-content-center">
<div class="col-8">
<div class="playbook-box">
<div class="playbook-box-cols">
<div class="playbook-box-col-illu">
<img aria-hidden="true" alt="" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/
688493907691830885/illu-forum-event-introduction-
playbookcitizens.
png">
</div>
<div class="playbook-box-col-content">
<h3 class="h5">Once-Only Forum for Citizens Playbook</h3>
<p class="p-opacity">The <strong>Once-Only Forum Playbook</strong> provides a complete overview of the forums, including background information on the OOTS, what to expect during the forums, and other important logistics information.</p>
<p><a class="btn primary-bis" href="#" onclick="_paq.push(['trackEvent','conversion','oots-once-only-forum-for-citizens','oots-once-only-forum-for-citizens-playbook'])"><span>Download the Once-Only<br> Forum Playbook for Citizens (note: no link)</span><span class="ico-download"></span></a></p>
</div>
</div>
</div>
</div>
</div>
CSS Stylesheet |
---|
/*-----------------------------------------*/
/*---OOH FORUM DETAIL PAGE - 22-09-2023---*/
/*---------------------------------------*/
#main-content p:empty { display: none;}
.mb-0 { margin-bottom:0;}
/*---INTRODUCTION---*/
#introduction { padding-bottom:0;}
.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/688493732/illu-introduction-forum-citizens.png"); 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;}
@media screen and (max-width: 768px) {
.introduction-box { display: block;}
.introduction-box-cover { height: 12rem; width: 100%;}
.introduction-box-content { padding: 2rem; width: 100%;}
.introduction-box-content:before { width: 0;}
}
/*---INFORMATION---*/
#information { padding-top:0;}
#information h2 { margin:3rem 0 2.5rem 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: #001832jpg"); background-size: 100%; background-position: 0 10%;border-radius: 100% 0% 38% 62% / 0% 88% 12% 100% ;}
.card-upcoming-col:nth-child(1) .card-upcoming-body a { margin:-1rem 0 0 0; width: 115%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/691830885/illu-forum-event-introduction-students.jpg"); background-size: 100%; background-position: 0 5%; border-radius: 100% 0% 47% 53% / 0% 76% 24% 100% ;}
.card-upcoming-col:nth-child(2) .card-upcoming-body a { margin:-1rem 0 0 0; width: 115%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/691830885/illu-forum-event-introduction-expats.jpg"); background-size: 100%; background-position: 0 26%; border-radius: 100% 0% 38% 62% / 0% 88% 12% 100% ;}
.card-upcoming { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100% !important; padding:1rem 2rem 2rem 2rem; background-color: white; box-shadow: 0px 2px 12px rgba(0, 24, 50, 0.12); border-radius: 12px; overflow: hidden;}
.card-upcoming-body a { display: block; line-height:0; text-align: right; height: 170px; border-top-right-radius: 12px; border-top-left-radius: 12px; overflow: hidden;}
.card-upcoming-body h3 { margin-top:24px; font-size:20px; line-height:24px;}
.card-upcoming-body p { position:relative;}
.card-upcoming-body p:last-child { margin-bottom:0;}
.card-upcoming-date { font-size: 14px !important; color: #5E748E !important;}
.card-upcoming-footer { margin-top:24px; text-align: right;}
@media screen and (min-width: 992px) {
.card-upcoming-cols { display: flex; width: 100%; gap:20px;}
.card-upcoming-col:nth-child(0) { width: 33%;}
.card-upcoming-col:nth-child(1) { width: 50%;}
.card-upcoming-col:nth-child(2) { width: 33%;}
.card-upcoming-body { flex: 1 1 auto;}
}
/*---BOX CTA PLAYBOOK---*/
#box-cta-playbook { position:relative;}
#box-cta-playbook .playbook-box { padding:1.5rem; background-color: #00284A; border-radius:20px;}
#box-cta-playbook .playbook-box-col-illu { margin-bottom:1rem;}
#box-cta-playbook .playbook-box-col-illu img { width: 120px; height:auto;}
#box-cta-playbook h3, #box-cta-playbook p { color: white;}
#box-cta-playbook p.p-opacity { opacity: 0.75}
#box-cta-playbook p:last-of-type { margin-bottom:0;}
#box-cta-playbook ul { margin-bottom:0; padding:1rem 0 0 1rem; color: white;}
#box-cta-playbook a.secondary-download { color: #EC8FFF;}
/*hack - remove empty p from confluence*/
#box-cta-playbook .container > p:first-child, #box-cta-playbook .container > p:last-child { display: none; border:1px solid green;}
@media screen and (min-width: 769px) {
#information h2 #box-cta-playbook .playbook-box { marginpadding:6rem 0 2.5rem 0;}
.information
#box-cta-playbook .playbook-box-cols { display: flex; align-items: center;}
.information-col:nth-child(1) { width: 30%;}
.information-col:nth-child(2) { width: 70%}
}
/*---AGENDA BOX---*/
.agenda-box { padding-top:0;}
.faq-content-box { margin-bottom:6rem; padding:80px 60px 60px 60px; background-color:#F3F4F7; border-radius:20px;}
.faq-content-box:last-child { margin-bottom:0;}
.faq-content-box h2 + p { color: white; opacity: 0.75;}
@media screen and (max-width: 768px) {
.faq-content-box { margin-bottom:3rem; padding:40px 20px 20px 20px;}
}
/*--- MACRO EXPAND ---*/
.faq-content-box .expand-container:last-child { border-bottom:1px solid transparent;}
.expand-container { margin:0; padding:0; border-bottom:1px solid #E3E6EB;}
.expand-control { display: flex; flex-direction: row-reverse; align-items: center; margin-bottom:0; padding:1rem 0;}
.expand-control-text { margin:0 0.5rem 0.5rem 0; width: 100%; font-size: 20px; color:#001832;}
.expand-content { margin:0; padding: 0; color: #5E748E;}
.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-container .aui-icon::before { font-size: 20px !important;}
@media screen and (max-width: 768px) {
.expand-control-text { font-size: 16px;}
}
/*---AGENDA HOUR---*/
.agenda-hour { margin: 0; padding:0; }
.agenda-hour li { padding:1rem 0; list-style: none; border-bottom: 1px dashed #E3E6EB;}
.agenda-hour li:first-child { padding-top:0;}
.agenda-hour li:last-child { padding-bottom:0; border-bottom: none;}
.agenda-hour li .agenda-hour-cols { display: flex;}
.agenda-hour li .agenda-hour-col:nth-child(1) { width: 25%; font-family: Source Sans Pro SB;}
.agenda-hour li .agenda-hour-col:nth-child(2) { width: 75%;}
.agenda-hour .label { margin-bottom:0;}
.agenda-hour .label span { padding:4px 10px; font-size: 12px; line-height: 12px; background: #E3E6EB; border-radius: 40px;}
.agenda-hour .label.plenary span { color: #842DB5; background: #F2E5F7;}
.agenda-hour .label.ccab span { color: #995E00; background: #FFEECC;}
.agenda-hour .label.tbc span { background: #E3E6EB;}
@media screen and (min-width: 769px) {
.agenda-cols { display: flex;}
.agenda-col:nth-child(1) { width: 30%;}
.agenda-col:nth-child(2) { width: 70%}
}
/*---LABEL---*/
.label span { padding:4px 10px; font-size: 12px; line-height: 12px; background: #E3E6EB; border-radius: 40px;}
.label.room1 span { color: #842DB5; background: #F2E5F7;}
.label.room2 span { color: #995E00; background: #FFEECC;}
.label.room3 span { color: #3D597A; background: #E3E6EB;}
.label.room4 span { color: #00786F; background: #D0F3F1;}
/*---CUSTOM AGENDA---*/
.faq-content-box.custom-agenda {background-color: #00284A;}
.faq-content-box.custom-agenda h2 {color: #FFF;}
.faq-content-box.custom-agenda .expand-container { border-bottom: 1px solid rgba(255, 255, 255, 0.50);}
.faq-content-box.custom-agenda .expand-container:last-child { border-bottom: 1px solid transparent;}
.faq-content-box.custom-agenda .expand-control-text {color: #FFF;}
.faq-content-box.custom-agenda .expand-container .aui-icon::before { color: #FFF;}
.faq-content-box.custom-agenda .agenda-hour li {border-bottom: 1px dashed rgba(255, 255, 255, 0.25);}
.faq-content-box.custom-agenda .agenda-hour li:last-child { border-bottom: 1px dashed transparent;}
.faq-content-box.custom-agenda .agenda-hour li .agenda-hour-col:nth-child(1) {color: #FFF;}
.faq-content-box.custom-agenda .agenda-hour li .agenda-hour-col:nth-child(2) {color: rgba(255, 255, 255, 0.75);}
/*---CUSTOM AGENDA ADD ILLU---*/
.faq-content-box { position: relative;}
.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;}
}
/*---UPCOMING PROJECTATONS---*/
#upcoming-projectatons { padding-top:0; padding-bottom:0;}
.card-upcoming-cols { margin-top: 1.5rem;}
/*---UPCOMING CARDS---*/
.card-upcoming { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100% !important; padding:1rem 2rem 2rem 2rem; background-color: white; box-shadow: 0px 2px 12px rgba(0, 24, 50, 0.12); border-radius: 12px; overflow: hidden;}
.card-upcoming-body a { display: block; line-height:0; text-align: right; height: 170px; border-top-right-radius: 12px; border-top-left-radius: 12px; overflow: hidden;}
.card-upcoming-col:nth-child(1) .card-upcoming-body a { margin:-1rem 0 0 0; width: 115%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/688493732/illu-introduction-forum-citizens.png"); background-size: cover; border-radius: 100% 0% 47% 53% / 0% 76% 24% 100% ;}
.card-upcoming-col:nth-child(2) .card-upcoming-body a { margin:-1rem 0 0 0; width: 115%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/688493732/illu-introduction-forum-citizens.png"); background-size: cover; border-radius: 100% 0% 38% 62% / 0% 88% 12% 100% ;}
.card-upcoming-col:nth-child(3) .card-upcoming-body a { margin:-1rem 0 0 0; width: 115%; background: url(align-items: center;}
#box-cta-playbook .playbook-box-col-illu { margin-bottom:0; padding:0 3rem 0 0}
}
@media screen and (min-width: 1366px) {
#box-cta-playbook .playbook-box { padding:5rem;}
}
/*---GALLERY---*/
#gallery { position: relative; z-index: 2;}
#gallery h3 { margin-bottom:2.5rem;}
/*#gallery .container .cols > div p:first-child, #gallery .container .cols > div p:last-child { display: none;}*/
.wiki-content .gallery-p { margin:0 0 2rem 0;}
.wiki-content .gallery-cta { margin:2rem 0 0 0;}
.gallery { margin: 0 -5px!important; width:100%;}
.gallery table { width:100%;}
.gallery table td { width:12%;}
.gallery table td img { margin: 0 !important; padding: 5px; width: 100%; max-width: 400px; height: auto; border-radius: 16px;}
.gallery table td img:hover { cursor: pointer;}
#gallery .group-picture { margin:5px auto 0; text-align: center;}
#gallery .group-picture p { margin:0;}
#gallery .group-picture img { width: 100%; max-width: 450px !important; height: auto; cursor: pointer !important; border-radius: 16px;} |
Div |
---|
id | introduction |
---|
class | section |
---|
|
Div |
---|
| Html-bobswift |
---|
<p><a class="link-cta primary before" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/once-only+forum+events+calendar+citizens"><span>Back to Once-Only Forum events calendar - Citizens</span></a></p>
<div class="introduction-box">
<div class="introduction-box-cover">
</div>
<div class="introduction-box-content">
<p class="h5">23 November 2023 | Brussels, Belgium</p>
<h1 class="h2"><span class="heading-subtitle">Once-Only Forum</span>for Citizens and Students</h1>
<p>Onsite event for a selected group of citizens who have first-hand experience in administrative procedures related to either moving and/or studying abroad. Participants explored different cross-border procedures, provided useful feedback, and helped refine the upcoming Once-Only Forum for Citizens and Students.</p>
<!--<p class="badge neutral">Already fully booked</p>-->
<p>Application: <strong>Closed</strong></p>
<!--
<p class="text-right"><a class="btn primary" href="https://ec.europa.eu/eusurvey/runner/OnceOnlyForumforCitizensStudents" onclick="_paq.push(['trackEvent','conversion','oots-forum-event-citizens','oots-forum-event-citizens-apply-cta-introduction'])"><span>Apply</span><span class="ico-cta-forward"> </span></a></p>
-->
</div>
</div> |
|
|
Div |
---|
id | information |
---|
class | section |
---|
|
Div |
---|
| Div |
---|
| Html-bobswift |
---|
<div class="col-8">
<!-- START PRACTICAL INFORMATION -->
<h2 class="h3">Practical information</h2>
<ul class="information-list">
<li>
<div class="information-cols">
<div class="information-col"><p>Location</p></div>
<div class="information-col"><p>Brussels, Belgium</p></div>
</div>
</li>
<li>
<div class="information-cols">
<div class="information-col"><p>Date</p></div>
<div class="information-col"><p>23 November 2023, half-day session</p></div>
</div>
</li>
<li>
<div class="information-cols">
<div class="information-col"><p>Selection criteria</p></div>
<div class="information-col">
<p>
<strong>Age:</strong> 18+<br>
<strong>Country of residency:</strong> All EU Member States<br>
<strong>Characteristics:</strong> EU citizens who have experience with online cross-border administrative procedures in the following areas:<br>
- Initial application for admission to public tertiary education institution, or <br>
- Applying for a tertiary education study financing, or <br>
- Registering a motor vehicle.
</p>
</div>
</div>
</li>
<li>
<div class="information-cols">
<div class="information-col"><p>Language</p></div>
<div class="information-col"><p>The Forum will be conducted in English</p></div>
</div>
</li>
<li>
<div class="information-cols">
<div class="information-col"><p>Gift voucher</p></div>
<div class="information-col"><p>As thank you for participating in this Once-Only Forum, we will offer you a gift voucher of 50€. We will hand out the voucher after successful participation in the event, based on the attendance list.</p>
</div>
</div>
</li>
</ul>
<!--END PRACTICAL INFORMATION -->
<!-- START DESCRIPTION -->
<h2 class="h3">Description</h2>
<p>The Once-Only Forum for Citizens and Students is an onsite focus group for a selected group of citizens who have first-hand experience in administrative procedures related to either moving and/or studying abroad. Participants will explore different cross-border procedures, provide feedback, and help refine the upcoming Once-Only Forum events for Citizens.</p>
<p>Participants will explore how the Once-Only Technical System can make cross-border administration as easy as possible <strong>when studying abroad, seeking grants and/or registering a motor vehicle in another Member State</strong>.</p>
<p>During this event, you will have the unique opportunity to personally test the Once-Only Technical System and share your valuable insights and recommendations to enhance its user-friendliness.</p>
<p>Based on your application, we will check if you have relevant experience in the selected administrative procedures and will contact you about next steps.</p>
<!-- END DESCRIPTION -->
<!-- START APPLY -->
<!--
<h2 class="h3">Interested in participating?</h2>
<p><a class="btn primary" href="https://ec.europa.eu/eusurvey/runner/OnceOnlyForumforCitizensStudents" onclick="_paq.push(['trackEvent','conversion','oots-forum-event-citizens','oots-forum-event-citizens-apply-cta-second'])"><span>Apply</span><span class="ico-cta-forward"></span></a></p>
<p>Application: <strong>Closed</strong></p>
-->
<p style="margin-top:2.5rem;"><a class="link-download primary" href="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/688493907/Once_Only_Forums_Privacy_Statement_v2.00.pdf"><span>Download the privacy statement</span></a></p>
<!-- END APPLY -->
</div>
|
|
|
|
Div |
---|
|
Div |
---|
| Div |
---|
| Div |
---|
Html-bobswift |
---|
<h3>Gallery</h3>
<p class="gallery-p">Experience the event in its entirety and relive every moment with our gallery.</p>
|
Gallery |
---|
excludeLabel | no-gallery |
---|
columns | 8 |
---|
sort | name |
---|
|
Div |
---|
| Image Added |
|
|
|
|
Div |
---|
style | display:none; |
---|
class | section agenda-box |
---|
|
Div |
---|
| Div |
---|
| Div |
---|
| Html-bobswift |
---|
<h2 class="h3">Forum agenda </h2>
<p>During this event you will, amongst other things, discuss your experiences with the administrative procedures when moving and/or studying abroad.</p>
<p class="illu-forum-agenda"><img alt="" aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/688493907/illu-forum-agenda.png"></p>
<p><span class="badge warning">Coming soon</span></p> |
Div |
---|
| Expand |
---|
| Html-bobswift |
---|
<ul class="agenda-hour">
<li>
<div class="agenda-hour-cols">
<div class="agenda-hour-col">08:00 - 09:00</div>
<div class="agenda-hour-col">Welcome coffee & registration
</div>
</div>
</li>
<li>
<div class="agenda-hour-cols">
<div class="agenda-hour-col">09:00 - 09:45</div>
<div class="agenda-hour-col">Introduction to the Once-Only Technical System Projectathon (day 1)
</div>
</div>
</li>
</ul> |
|
|
|
|
|
|
Div |
---|
id | upcoming-event |
---|
class | section |
---|
|
Div |
---|
| Html-bobswift |
---|
<div class="cols">
<div class="col-8">
<h2>Past Forums</h2>
</div>
</div> |
Html-bobswift |
---|
<div class="card-upcoming-cols">
<!--CARD 01-->
<!--<div class="card-upcoming-col">
<div class="card-upcoming">
<div class="card-upcoming-body">
<a href="#" style="pointer-events: none;"></a>
<h3>Once-Only Forum for Citizens and Students </h3>
<p>Onsite focus group in Brussels for max. 15 citizens, that have experience in administrative procedures related to either moving and/or studying abroad. Participants will explore different cross-border procedures, provide feedback, and help refine the upcoming Once-Only Forums for Citizens.</p>
<p class="card-upcoming-date">23 November 2023, Brussels</p>
</div>
<div class="card-upcoming-footer">
<a class="btn primary" href="https://ec.europa.eu/digital-building-blocks/sites/ |
| downloadattachments688493732/illu-introduction-forum-citizens.png"); background-size: cover; border-radius: 100% 0% 38% 62% / 0% 88% 12% 100% ;}
.card-upcoming-body h3 { margin-top:24px; font-size:20px; line-height:24px;}
.card-upcoming-body p { position:relative;}
.card-upcoming-body p.label { margin-bottom:12px; display: inline-block;}
.card-upcoming-body p:last-child { margin-bottom:0;}
.card-upcoming-date { font-size: 14px !important; color: #5E748E !important;}
.card-upcoming-footer { margin-top:24px; text-align: right;}
.card-upcoming-footer .label { display: inline;}
.card-upcoming .label { padding: 8px 12px; font-size: 12px; line-height: 12px; border-radius: 40px;}
.card-upcoming .label.available-soon { color: #842DB5; background: #F2E5F7;}
.card-upcoming .label.past { color: #3D597A; background: #E3E6EB;}
.card-upcoming .label.upcoming { color: #995E00; background: #FFEECC;}
@media screen and (max-width: 991px) {
.card-upcoming-col { margin-bottom: 1.5rem;}
}
@media screen and (min-width: 992px) {
.card-upcoming-cols { display: flex; width: 100%; gap:20px;}
.card-upcoming-col:nth-child(1) { width: 33%;}
.card-upcoming-col:nth-child(2) { width: 33%;}
.card-upcoming-col:nth-child(3) { width: 33%;}
.card-upcoming-body { flex: 1 1 auto;}
}
/*---BOX CTA PLAYBOOK---*/
#box-cta-playbook { position:relative;}
#box-cta-playbook .playbook-box { padding:1.5rem; background-color: #00284A; border-radius:20px;}
#box-cta-playbook .container .cols { margin-bottom:-1rem;}
#box-cta-playbook .playbook-box-col-illu { margin-bottom:1rem;}
#box-cta-playbook .playbook-box-col-illu img { width: 120px; height:auto;}
#box-cta-playbook h3, #box-cta-playbook p { color: white;}
#box-cta-playbook p.p-opacity { opacity: 0.75}
#box-cta-playbook p:last-of-type { margin-bottom:0;}
#box-cta-playbook ul { margin-bottom:0; padding:1rem 0 0 1rem; color: white;}
#box-cta-playbook a.secondary-download { color: #EC8FFF;}
/*hack - remove empty p from confluence*/
#box-cta-playbook .container > p:first-child, #box-cta-events .container > p:last-child { display: none; border:1px solid green;}
@media screen and (min-width: 769px) {
#box-cta-playbook .playbook-box { padding:2.5rem;}
#box-cta-playbook .playbook-box-cols { display: flex; align-items: center;}
#box-cta-playbook .playbook-box-col-illu { margin-bottom:0; padding:0 3rem 0 0}
}
@media screen and (min-width: 1366px) {
#box-cta-playbook .playbook-box { padding:5rem;}
}Once-Only+Forum+event+Citizens"><span>Apply</span><span class="ico-cta-forward"></span></a>
</div>
</div>
</div>
-->
<!---->
<!--CARD 02-->
<div class="card-upcoming-col">
<div class="card-upcoming">
<div class="card-upcoming-body">
<a href="#" style="pointer-events: none;"></a>
<h3>Once-Only Forum for Citizens and Students</h3>
<p>Online event for a selected group of EU citizens (including students, recent graduates, and expats) who have first-hand experience in administrative procedures related to studying and registering a motor vehicle abroad.</p>
<p class="card-upcoming-date"><span class="badge neutral">Past event</span><br>12 January 2024, Online</p>
</div>
<div class="card-upcoming-footer">
<a class="btn ghost" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/once-only+forum+event+students+and+recent+graduates"><span>See event</span><span class="ico-cta-forward"></span></a>
</div>
</div>
</div>
<!---->
<!--CARD 03-->
<!--
<div class="card-upcoming-col">
<div class="card-upcoming">
<div class="card-upcoming-body">
<a href="#" style="pointer-events: none;"></a>
<h3>Once-Only Forum for Expats</h3>
<p>Online event for a selected group of citizens to share experiences related to administrative procedures when registering a motor vehicle abroad, and to learn how the Once-Only Technical System can improve this experience.</p>
<p class="card-upcoming-date">26 January 2024, Online</p>
</div>
<div class="card-upcoming-footer">
<a class="btn primary" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/once-only+forum+event+expats"><span>Apply</span><span class="ico-cta-forward"></span></a>
</div>
</div>
</div>
-->
<!---->
</div> |
|
|
Div |
---|
id | box-cta-playbook |
---|
class | section |
---|
|
Div |
---|
| Html-bobswift |
---|
<div class="cols justify-content-center">
<div class="col-8">
<div class="playbook-box">
<div class="playbook-box-cols">
<div class="playbook-box-col-illu">
<img aria-hidden="true" alt="" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/688493907/illu-forum-playbook.png">
</div>
<div class="playbook-box-col-content">
<h3 class="h5">Once-Only Forum for Citizens Playbook</h3>
<p class="p-opacity">The Once-Only Forum for Citizens Playbook provides useful information about the Once-Only Technical System, your role during the Forums, and other important logistical information.</p>
<p><a class="btn primary-bis" href="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/690491924/Once_Only_Forums_Playbook_Citizens_v2.00.pdf" onclick="_paq.push(['trackEvent','conversion','oots-once-only-forum-for-citizens','oots-once-only-forum-for-citizens-playbook'])"><span>Download the Once-Only Forum Playbook for Citizens</span><span class="ico-download"></span></a></p>
</div>
</div>
</div>
</div>
</div>
|
|
|