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

              
                <div class="grid-container" id="main">
  <nav class="navbar navbar-expand-lg navbar-dark navbar-fixed-top">
  <h1 id="title"><a class="navbar-brand" href="#">Tribute to Nelson Mandela</a></h1>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#img-div">Quote <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#bio">Biography</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#southafrica">South Africa</a>
      </li>
    </ul>
  </div>
</nav>

  <main>
   <!-- <div class="tolerance"></div>-->
    <div class="mandela container-fluid mx-auto" id="img-div">
      <h2 id="img-caption">Nelson Mandela</h2>
      <img src="https://i.postimg.cc/mD0MxVsJ/mandela-grey.png" alt="Nelson Mandela portrait" class="mandela-pic" id="image">
      <blockquote class="blockquote">
        <span><i class="fas fa-quote-right"></i></span>
        <div id="text" class="quote-text">It always seems impossible until it's done.</div>
      </blockquote>
    </div>
    
    <div class="parallax"></div>
    
    <div class="biography" id="bio">
      <h2>Biography</h2>
      <ul>
        <li><span>18 July 1918</span> - Birth of Nelson Rolihlahla Mandela into the Madiba clan in Mvezo, South Africa.</li>
        <li><span>1941</span> - Arrival at Johannesburg where he began to work at a firm of attorneys.</li>
        <li><span>1943</span> - Nelson Mandela finished his BA which he could not complete for joining a student protest earlier.</li> 
        <li><span>1944</span> - Joined a black-liberation group: the African National Congress (ANC) and became a leader of its Youth League.</li>
        <li><span>1952</span> - Oliver Tambo and Mandela established South Africa’s first black law firm.</li>
        <li><span>1952</span>  - He lead a campaign of civil disobedience organised jointly with the ANC and the South African Indian Congress.</li>
        <li><span>1956</span> - Mandela was arrested with more than 100 antiapartheid activists accused of treason.</li>
        <li><span>March 1960 </span> - Police killed 69 people in a peaceful demonstration leading to a state of emergency and the banishment of the ANC and the Pan African Congress (PAC) on 8 April.</li>
        <li><span>March 1961</span> - He was acquitted with 28 other people in the Treason Trial case.</li>
        <li><span>June 1961</span> - Police crackdown made Mandela advocate acts of sabotage against the South African regime and launch the military wing of the ANC.</li>
        <li><span>October 1963</span> - Put on trial for sabotage treason, and violent conspiracy with 10 other people in the Rivonia Trial. </li>
        <li><span>June 1964</span> - Mandela was sentenced to life imprisonment.</li>
        <li><span>1985</span> - While in prison he initiated talks about a meeting between the apartheid government and the ANC.</li>
        <li><span>February 1990</span> - After rejecting several South African government's offers of conditional release, he was released following peace negotiations with President de Klerk leading to a nonracial democracy in South Africa.</li>
        <li><span>1991</span> - He was elected ANC President.</li>
        <li><span>1993</span> - Mandela was awarded the Nobel Peace Prize with President De Klerk.</li>
        <li><span>May 1994</span> - He became South Africa’s first black and  democratically elected President.</li>
        <li><span>1999</span> - Built the Nelson Mandela Foundation and remained an advocate of peace, reconciliation, and social justice internationally after retiring from politics.</li>
      </ul>
    </div>

    <div class="parallax-two"></div>
 
    <div class="south-africa" id="southafrica">
      <h2>South Africa</h2>
      <div class="grid-container-img">
        <img src="https://i.postimg.cc/x1K6w6Km/martin-olsen-OJg-FRzvafuo-unsplash.jpg" alt="zebra">
        <img src="https://i.postimg.cc/3NSYkr8v/south-africa-163062-1920.jpg" alt="zulu woman and baby sitted outside">
        <img src="https://i.postimg.cc/pLZbrXsX/crane-bird-1543411.jpg" alt="crane bird">
        <img src="https://i.postimg.cc/gjPN33J9/south-africa-949488-1920.jpg" alt="zulu woman weaving outside">
        <img src="https://i.postimg.cc/Cxzc1FTj/judah-legge-Yoz-Ne-HM8-Ma-A-unsplash.jpg" alt="girafe">
        <img src="https://i.postimg.cc/rFstQKt7/south-africa-1160475-1920.jpg" alt="south african multicolour habitat">
        <img src="https://i.postimg.cc/WbN7jNq7/interesting-1221404-1920.jpg" alt="african art wooden mask">
        <img src="https://i.postimg.cc/HkfZpGgs/animal-wildlife-elephant-ivory-70080.jpg" alt="elephant playing with red earth">
        <img src="https://i.postimg.cc/9f0mj7cj/leopard-on-brown-trunk-tree-46254.jpg" alt="leopard resting in a tree">
        <img src="https://i.postimg.cc/vBZKcrc0/andrew-rice-9g-IHd-ZQ4-Mk-unsplash.jpg" alt="lion resting">
        <img src="https://i.postimg.cc/fW2vz47n/two-brown-impala-1526409.jpg" alt="two impalas grazing">
        <img src="https://i.postimg.cc/fWtKBzS2/photo-of-woman-wearing-traditional-headwear-3193551.jpg" alt="zulu man and woman wearing traditional clothes">
      </div>
      <p id="tribute-info">This is a Tribute Page about <span>Nelson Mandela</span>
        <br><br>
        Sources: 
        <a href="https://www.nelsonmandela.org/content/page/biography" target="_blank" id="tribute-link">Nelson Mandela Foundation</a> and 
        <a href="https://www.britannica.com/biography/Nelson-Mandela" target="_blank">Britannica Encyclopaedia</a></p>
    </div>
  </main>

  <footer class="footer mt-auto py-3">
  <div class="container">
    <p class="text-center">Made with <i class="fas fa-heart"></i> by Elodie Atanley</p>
  </div>
</footer>
</div>

<!-- TO DO:
- timeline
- check mandela section (reponsive and quote overlapping)
-->
              
            
!

CSS

              
                $header-bg: #000;
$footer-bg: #FDB515;
$primary: #000;
$secondary: #fff;
$yellow: #FDB515;
$green: #007C58;
$bg-gris: rgba(0, 0, 0, 0.04);
$gris: rgba(0, 0, 0, 0.7);

html{
  scroll-behavior: smooth;
}

.grid-container{
  display: grid;
  grid-template-areas: 
    "header header header"
    "main main main"
    "footer footer footer"
}

.navbar{
  grid-area: header;
  background: $header-bg;
  https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/js/all.min.js
  a{
    color: $secondary;
    font-family: 'Open Sans', sans-serif;
    font-size: 22px;
  }
}

.navbar-toggler{
  border: red;
}

.navbar-nav{
  margin-top: 5px
}

main{
  grid-area: main;
}

.tolerance{
  background: url('https://i.postimg.cc/JtC7pLKG/aaron-blanco-tejedor-y-H18l-OSa-ZVQ-unsplash-1440-cropped.jpg');
  width: 100%;
  height: 5%;
  background-size: contain;
  background-repeat: no-repeat;
}

.mandela{
  background-color: $bg-gris;
  height: 435px;
  display: flex;
  flex-direction: column;
}
.mandela-pic{
  max-width: 150px;
  margin: 0 auto;
  padding: 0;
  background-image: cover;
}

h2{
  font-family: 'Poiret One', cursive;
  font-size: 40px;
  padding: 20px 0;
  text-align: center;
  width: 100%;
}

blockquote{
  margin: 10px auto;
}

.quote-text{
  font-family: 'Niconne', cursive;
  font-size: 36px;
  color: $gris;
}

.fa-quote-right{
  color: $gris;
  position: relative;
  top: 0;
  left: -40px;
}

.parallax{
  background: url('https://i.postimg.cc/7Yt71xCm/south-africa-1160472-1920.jpg') no-repeat;
  background-size: cover;
  background-attachment: fixed;
  height: 500px;
  max-width: 100%;
}

.biography{
  background-color: $yellow;
  color: $primary;
}

ul:not(.navbar-nav){
  padding-bottom: 10px;
  margin-bottom: 0;
}

li:not(.nav-item){
  line-height: 2;
  margin-bottom: 1rem;
}
span{
    font-weight: bold;
  }

.parallax-two{
  background: url('https://i.postimg.cc/DwQfc605/lina-loos-04-C1-NZk1h-E-unsplash.jpg') no-repeat;
  background-size: cover;
  background-attachment: fixed;
  height: 500px;
  max-width: 100%;
  
}

.south-africa{
  height: 1250px;
  background-color: $bg-gris;
}

.grid-container-img{
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  place-items: stretch;
  align-content: stretch;
  justify-content: stretch;
  grid-gap: 20px;
  padding: 0 20px 20px 20px;
  
  img{
    height: 250px;
    max-width: 100%;
    border-radius: 6px;
    background-color: $gris;
    filter: grayscale(100%);
  }
  img:hover{
    filter: none;
    cursor: pointer;
  }
  
  img:nth(7){
    max-width: 50%;
  }
}

p{
  font-family: 'Open Sans', sans-serif;
  padding: 20px;
  
  a{
    color: $green;
    font-weight: bold;
  }
  a:hover{
    color: $green;
    text-decoration: underline;
  }
}

.footer{
  grid-area: footer;
  background: $footer-bg;
  color: $primary;
  font-family: 'Open Sans', sans-serif;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  
  .text-center{
    padding: 0;
    margin-bottom: 0;
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console