Page History

...

Div

id	interview-detail-about-ms
class	section

Div

class	container

Div

class	cols justify-content-center

Html-bobswift

<div class="col-9">

<h2 class="h3">About the interviewee</h2>

<div class="interview-detail-about-ms-cols">
<div class="interview-detail-about-ms-picture">
<span class="interview-detail-about-ms-picture-bg"><img aria-hidden="true" alt="" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/631047320/ms-johnathan-attia.jpg"></<span>
</div>
<div class="interview-detail-about-ms-text">
<p class="lead"><strong>Jonathan J. Attia</strong></p>
<p>French CTO for European Single Digital Gateway</p>
<p><i>Organization: Direction interministérielle du numérique (DINUM)</i></p>
</div>
</div>

<div class="interview-detail-about-ms-text-extra">
<p>Jonathan J. Attia is inventor in the field of computer science, cryptography, and network technologies (with many international patents), Jonathan leads several working groups at IEEE SA and ISO/IEC JTC 1 in quantum technologies. He joined DINUM in September 2022 to increase the potential for innovation between public data and high-impact European use cases. Jonathan is Member of Le Cercle des Administrators and Senior Member at IEEE (Institute of Electrical and Electronics Engineers).</p>
<p class="lead">Direction interministérielle du numérique (DINUM).</p>
<p>DINUM supports French ministries in their digital transformation. It advises the government and develops services and shared resources such as the inter-ministerial network of the State, FranceConnect, data.gouv.fr or api.gouv.fr. The DINUM is a service of the Prime Minister, placed under the authority of the Minister of Transformation and Public Services.</p>
</div>

</div>

Div

id

Excerpt Include

	ooh-interview-detail-footer
	ooh-interview-detail-footer
nopanel	true

social-media

CSS Stylesheet

.interview-detail-introduction-cover {
background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/631047320/flag-france.jpg");

class

section

Html-bobswift

<div class="container">
<div class="cols justify-content-center">
<div class="col-9">
<p class="social-media-p">Don’t forget to follow the Once-Only Technical System <a href="https://twitter.com/EU_OnceOnly" target="_blank">Twitter</a> account to keep up to date with the latest news.</p>
<a class="social-media-link" href="https://twitter.com/EU_OnceOnly" target="_blank"><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/ico-twitter.svg" alt="OOH on Twitter"></a>
</div>
</div>
</div>

CSS Stylesheet

/*---------------------------------------------*/
/*---OOH INTERVIEW DETAIL PAGE - 17-01-2023---*/
/*-------------------------------------------*/        

/*---INTERVIEW DETAIL INTRODUCTION---*/
#interview-detail-introduction { padding-bottom: 1rem;}  
#interview-detail-introduction .h1-subtitle { color: #001832;} 
#interview-detail-introduction .h1-date {margin-top: 2.5rem; color: #5E748E;}

.interview-detail-introduction-cover {
background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/631047320/flag-france.jpg");
background-position: center center; background-repeat: no-repeat; background-size: 100%;
}

.interview-detail-introduction-content { position:relative; padding-top:2.5rem !important;; padding-bottom:2.5rem !important; background-color: #F3F4F7;}
.interview-detail-introduction-content:before { content:''; display:block; z-index: 2; position:absolute; top:0; left:-2.5rem;; width:100%; height:100%; background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/597951745/event-detail-introduction-content-shape.svg"); background-repeat: no-repeat; background-size: 100%; background-position: center left;}

.interview-detail-introduction-content h2, .interview-detail-introduction-content p { z-index: 3; position:relative;}
p.interview-detail-introduction-content-date { margin-bottom: 2.5rem; font-size:20px;}
.interview-detail-introduction-content h2 { margin-left:auto; margin-right:auto; width:65%;}
.interview-detail-introduction-content h2 span { display: block; margin-bottom:0.25rem; font-size: 14px; line-height: 20px; font-family: 'Source Sans Pro SB', sans-serif; font-weight:600; text-transform: uppercase; letter-spacing: 4px; color: #5D24A4;}
.interview-detail-introduction-content p { margin-left:auto; margin-right:auto; width:65%;}

@media screen and (min-width: 769px) {
	.interview-detail-introduction-cover {border-top-left-radius: 12px; border-bottom-left-radius: 12px;}
	.interview-detail-introduction-content { border-top-right-radius: 12px; border-bottom-right-radius: 12px;} 
}                      

/*---INTERVIEW DETAIL MS---*/
#interview-detail-ms {}
.interview-detail-ms-picture { position: relative; text-align: center;}
.interview-detail-ms-picture {}
.interview-detail-ms-picture .interview-detail-ms-picture-bg { position: relative; display: block; margin:0 auto; height: 100px; width: 100px; background: #F4BEFE; border-radius:50%;} 
.interview-detail-ms-picture-bg img { position: absolute; top: -4px; left: -4px; width: 100px; height: 100px; border-radius:50%;}
p.interview-detail-ms-picture-name { margin: 10px 0 0 0 !important;}
p.interview-detail-ms-picture-function { margin-bottom:0 !important; font-size: 14px !important; color: #5E748E !important;}
p.interview-detail-ms-picture-function-extra { margin:10px 0 0 0 !important; font-size: 14px !important; line-height: 20px; color: #5E748E !important;}
.interview-detail-ms-quote { margin-top:3rem; position:relative; font-style: italic;}  
.interview-detail-ms-quote:before { position:absolute; top:-2rem; left: 0; content: ""; display: inline-block; height: 24px; width: 24px;
background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/ico-quote-secondary.svg")}
.interview-detail-ms-quote q { color:#3D597A;}

#interview-detail-ms p:empty { display: none;}

@media screen and (min-width: 769px) {
  .interview-detail-ms-cols { display: flex; align-items: center;}
  .interview-detail-ms-picture { padding-right: 40px; width: 35%; border-right:1px solid #FBE5FF;}
  .interview-detail-ms-quote { margin:0; padding-left:40px; width: 55%;}
  .interview-detail-ms-quote:before { left: 40px;}
}                

/*---INTERVIEW DETAIL ARTICLE---*/
#interview-detail-article { padding-top:0;}
.interview-detail-article-content > p:last-child { margin-bottom:0;}
p.interview-detail-article-subtitle { margin-bottom: 0.25rem; font-family: 'Source Sans Pro SB', sans-serif; font-weight:600; text-transform: uppercase; letter-spacing: 4px; color: #5D24A4;}
#interview-detail-article h2,  #interview-detail-article h3 { margin-bottom:1.25rem;}
#interview-detail-article h3 { margin-top:2.5rem; margin-bottom:1.25rem;}
.interview-detail-article-cols {display: flex; gap:5%; align-items: center; margin-bottom:1.5rem;}
.interview-detail-article-p {width: 50%;}
.interview-detail-article-p p:last-child { margin-bottom:0;}
.interview-detail-article-quote { position:relative; padding:2.5rem 0 1rem 0; width: 45%; font-style: italic; border-top:1px solid #F4BEFE; border-bottom:1px solid #F4BEFE;}
.interview-detail-article-quote:before { position:absolute; top:0.50rem; left: 0; content: ""; display: inline-block;  height: 24px; width: 24px; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/ico-quote-secondary.svg")}
.interview-detail-article-quote q { color:#3D597A;}                   

/*---INTERVIEW DETAIL ABOUT MS---*/
#interview-detail-about-ms { padding-top:0; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/631047320/bg-illu-sigle-interview-detail-ms.svg") no-repeat 100% 6rem;}
#interview-detail-about-ms h2 { margin-bottom:0;}
.interview-detail-about-ms-cols { margin: 2.5rem 0 1.5rem 0; display: flex; align-items: center;}
.interview-detail-about-ms-picture { position: relative; width: 80px; border-right: 1px solid #FBE5FF;}
.interview-detail-about-ms-picture-bg { position: relative; display: block; height: 60px; width: 60px; background: #F4BEFE; border-radius:50%;} 
.interview-detail-about-ms-picture-bg img { position: absolute; top: -4px; left: -4px; width: 60px; height: 60px; border-radius:50%;}
.interview-detail-about-ms-text { padding-left:20px; width: 70%;}
.interview-detail-about-ms-text p:first-child { margin-bottom:0;}
.interview-detail-about-ms-text p:nth-child(2) { margin-bottom: 0.625rem;}
.interview-detail-about-ms-text p:last-child { margin-bottom:0;}

.interview-detail-about-ms-text-extra p.lead { margin-bottom: 0.625rem;}
.interview-detail-about-ms-text-extra p:last-child { margin-bottom:0;}

#interview-detail-about-ms p:empty { display: none;}

@media screen and (min-width: 769px) {
  .interview-detail-about-ms-picture { width: 120px;}
  .interview-detail-about-ms-picture-bg { height: 100px; width: 100px;} 
  .interview-detail-about-ms-picture-bg img { width: 100px; height: 100px;}
	.interview-detail-about-ms-text-extra { width: 75%}
}      

/*---INTERVIEW DETAIL FOOTER---*/
#interview-detail-social-media { padding-top: 0rem;}
#interview-detail-social-media  .social-media-p { margin-bottom:1rem; padding-top: 2.5rem; border-top:1px solid #E3E6EB;}
#interview-detail-social-media  .social-media-link { display: inline-block;}
#interview-detail-social-media  p:empty { display: none;}

Page tree

Versions Compared

Old Version 42

New Version 43

Key