[LS] Fiche verte

                        <link href="https://fonts.googleapis.com/css2?family=Amiko&family=Oswald:wght@600&display=swap" rel="stylesheet">

<div class="fiche">
  <div class="header">
    <div class="titre">
    <h3>Bienvenue</h3>
    <div class="sous-titre">Sur ma fiche</div>
    </div>
  </div>
  
  <div class="content">
    <div class="line">
      <div class="left">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla orci nunc, tempor ac suscipit ut, venenatis eu diam. In malesuada nisl sed erat vehicula rutrum. Sed in sem vitae ante convallis mattis. Vestibulum varius nisi posuere ligula convallis, lobortis vestibulum lectus rutrum. Praesent vitae nisi nisi. Cras non orci purus. Vestibulum et purus facilisis, ullamcorper eros vel, varius eros. Donec venenatis, risus eget blandit vulputate, risus lacus rutrum massa, eget scelerisque elit magna vitae velit. Ut convallis varius nibh, nec tincidunt mauris gravida non. Cras id nibh non dui viverra ultricies euismod vel ante.
      </div>
      
      <div class="right">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla orci nunc, tempor ac suscipit ut, venenatis eu diam. In malesuada nisl sed erat vehicula rutrum. Sed in sem vitae ante convallis mattis. Vestibulum varius nisi posuere ligula convallis, lobortis vestibulum lectus rutrum. Praesent vitae nisi nisi. 
       </div>
    </div>
  </div>
  
  <div class="header" style="padding: 10px 0; background-image: url('https://images.unsplash.com/photo-1590336909346-ad77efd9bcce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80');">
  </div>
  
</div>
                    

                            :root {
  --fonce: #041833;
  --blanc: #ebf1f6;
}

body {
margin: 0; }

.fiche {
  width: 100%;
  min-height: 400px;
}

.header {
  background-image: url('https://images.unsplash.com/photo-1560554262-b00ded18811c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80');
  background-size: cover;
  background-position: center;
  color: var(--blanc);
  padding: 50px 0;
}

.titre {
  margin: 0 auto;
  min-width: 300px;
  width: 50%;
  text-align: center;
  border: 2px solid var(--blanc);
  padding: 20px;
  background-color: rgba(255,255,255,0.1);
  border-radius: 1px;
}

.titre h3
{
  font-family: 'Oswald', sans-serif;
  font-size: 2rem;
  margin: 0;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 var(--fonce);
  letter-spacing: 4px;
}

.titre h3::before, .titre h3::after {
  content: ' - ';
  opacity: 0.5;
}

.titre .sous-titre {
  font-family: 'Amiko', sans-serif;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.5rem;
  font-style: italic;
}
  
 .line {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
  }
  
  .line div {
    flex-basis: 40%;
    padding: 5%;
    
    background-color: var(--blanc);
    color: var(--fonce);
    
    font-family: 'Amiko', sans-serif;
    text-align: justify;
    font-size: 0.8rem;
  }

.line div::first-letter {
  font-weight: 800;
  margin-top: -0.25rem;
  padding-right: 3px;
  padding-left: 20px;
  font-size: 1.5rem;
  float: left;
}

.line .right {
  background-color: #34984c;
  color: var(--blanc);
}