Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<link href="https://fonts.googleapis.com/css?family=Anton|Archivo+Narrow" rel="stylesheet">
<div class= "container-fluid text-center">
    <div class= "yellow-background">
      <img class="smaller-image" src="https://i.ytimg.com/vi/ddwK7wU3vxc/maxresdefault.jpg" alt="Women's rights">
    </div>
  <h1 class= "black-text">Simone Veil</h1>
    <div class= "silver-background">
      <img class= "round-border"         src="https://static.mediapart.fr/files/2017/06/30/5a0bc6097258c5548fe8aa2344d5552e-simone-veil-inspiring-people.jpg" alt="Simone Veil">
    </div>
  <h2 class= "black-text">1927 - 2017</h2>
    <div class= "center">
      <ul>
        <li>Veil was born <strong>Simone Annie Liline Jacob</strong> in Nice, France.</li>
      <li>She completed her baccalauréat on 28 March 1944 and was arrested by German authorities days later.</li>
      <li><strong>Veil's Jewish family was deported to Auschwitz-Birkenau</strong>. They were later transferred to Bergen-Belsen, where her mother Yvonne died of typhus shortly before the camp's 15 April 1945 liberation.</li>
      <li>Having obtained her baccalauréat before being deported, she began <strong>the study of law and political science</strong> at Sciences Po and at the University of Paris, where she met her future husband Antoine Veil. The couple married on 26 October 1946, and had three sons.</li>
      <li>After graduating from Institut d'études politiques de Paris with a law degree and several years of legal practice, in 1956 she passed the national examination to become a magistrate.</li>
      <li>Veil then entered and held a senior position at the National Penitentiary Administration under the Ministry of Justice where she was responsible for judicial affairs and <strong>improved women's prison conditions and the treatment of incarcerated women</strong>.</li>
      <li>She left this post in 1964 to become the director of civil affairs, during which she <strong>improved French women's general rights and status</strong>.</li>
      <li>In 1970, she became secretary general of the Supreme Magistracy Council.</li>
      <li> From 1974 to 1979 Veil was Minister of Health in the governments of prime ministers Jacques Chirac and Raymond Barre. She pushed forward several notable laws. First, <strong>making access to contraception easier</strong> (4 December 1974) – the sale of contraceptives such as the combined oral contraceptive pill were made legal in 1967. And also <strong>legalizing abortion in France</strong> (17 January 1975), her hardest political fight, and the one for which she is best known.</li>
      <li><strong>Veil was elected as a Member of the European Parliament</strong> in the 1979 European election. In its first session, the new Parliament elected Veil as its President, which she served as until 1982. As well as being the first president of the elected Parliament, she was the <strong>first female President since the Parliament was created in 1952</strong>. She was re-elected in the 1984 election and became the leader of the Liberal Democrat group until 1989. She was re-elected for the last time in the 1989 election, standing down in 1993.
      <li>From 1993 to 1995 Veil was again a member of the cabinet, serving as Minister of State and Minister of Health, Social Affairs and the City.</li>
      <li>In 1998, she was appointed to the Constitutional Council of France. In 2005, she put herself briefly on leave from the Council in order to campaign in favour of the Treaty establishing a Constitution for Europe.</li>
      <li><strong>Veil entered the Académie française in 2008, the sixth woman ever to do so</strong>. Veil joined the Academy's forty "immortals" at their 13th seat, originally the seat of Jean Racine. On her sword, given to her as to every other immortal, is engraved her Auschwitz number (number 78651), the motto of the French Republic (<i>Liberté, Egalité, Fraternité</i>) and the motto of the European Union (<i>Unis dans la diversité</i>).</li>
      <li>She was appointed a <strong>Grand Cross of the Légion d'honneur</strong> in 2012.</li>
      <li>Veil died on 30 June 2017, two weeks before her 90th birthday.</li>
      </ul>
  </div>
  <p class= "nb"><i>(Source: Wikiwand)</i></p>
  <h3 class= "silver-background">I'd like to <a href= "https://jwa.org/encyclopedia/article/veil-simone" target= "_blank">learn more</a> about Simone Veil !</h3>
  <p><strong>Made by Louise NICOLAS</strong></p>
</div>
              
            
!

CSS

              
                .text-center {
 text-align: center;
}

h1 {
font-family: 'Anton', sans-serif;
font-size: 75px;
padding: 100px;
}

h2 {
font-family: 'Anton', sans-serif;
font-size: 60px;
padding: 75px;
}

h3 {
font-family: 'Anton', sans-serif;
font-size: 28px;
padding: 10px;
}

.black-text {
color: #000000;
}

.smaller-image {
width: 900px;
  }

.yellow-background {
background-color: #ffea19;
}

.round-border {
border-color: white;
border-width: 20px;
border-style: solid;
border-radius: 5%;
}

.silver-background {
background-color: silver;
padding: 50px;
}

.center {
width: 1000px;
margin: 0 auto;
text-align: left;
}

li {
font-family: 'Archivo Narrow', sans-serif;
font-size: 18px;
padding: 10px;
}

p {
font-family: 'Archivo Narrow', sans-serif;
font-size: 18px;
padding: 10px;
}

.nb {
  color: grey;
  padding: 20px;
}
              
            
!

JS

              
                
              
            
!
999px

Console