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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

              
                <main id="main">
        <header>
            <div class="overlay"></div>
            <div id="title">
                <h1>Andreas Nikolaus "Niki" Lauda</h1>
                <h3><i class="fa fa-trophy"></i> &nbsp;A three time F1 World Champion</h3>
                <div class="trophies">
                    <div class="trophy-box">
                        <div class="trophy-box-inner">
                            <div class="trophy-box-front">
                                <h1>1975</h1>
                            </div>
                            <div class="trophy-box-back">
                                <p>Niki Lauda crowned his first world championship
                                    title with a pole position and a flag to flag victory in the United States Grand
                                    Prix.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="trophy-box">
                        <div class="trophy-box-inner">
                            <div class="trophy-box-front">
                                <h1>1977</h1>
                            </div>
                            <div class="trophy-box-back">
                                <p>Even Enzo Ferrari had doubts and made plans to replace him, a reaction that
                                    angered Niki and made his winning the 1977 driving title a form of revenge.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="trophy-box">
                        <div class="trophy-box-inner">
                            <div class="trophy-box-front">
                                <h1>1984</h1>
                            </div>
                            <div class="trophy-box-back">
                                <p>In 1984 he won his third driving title. He won the ‘Austrian Grand Prix’ and
                                    became the first Austrian to achieve so.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <div id="tribute-info" class="container">
            <ul>
                <li><span class="year">1949</span> <b>Niki Lauda was born on February 22</b>, in Vienna in the family of
                    wealthy industrialists having a chain of paper factories.</li>
                <li><span class="year">1968</span> Niki Lauda journey as a racing driver began when he participated in a
                    motor race excelling the hills at Mühlbacken. He secured third position in the first heat and
                    emerged first in the second heat, completing the race with an overall second position.</li>
                <li><span class="year">1969</span> He received a factory ride in the ‘Formula Vee’ team of
                    ‘Austro-Kaimann’ and participated in thirteen ‘Formula V’ races securing two wins</li>
                <li><span class="year">1970</span> He participated for Francis McNamara in ‘Formula 3’ race. With his
                    Porsche 908, he achieved victory at the ‘Martha Grand National’ race held at Österreichring and also
                    at the Diepholz airfield race.</li>
                <li><span class="year">1971</span> In order to obtain a contract as a ‘Formula Two’ driver with the
                    emerging ‘March’ team, Lauda took a bank loan of £30,000 against a life insurance policy. His
                    relation with his family over his career became strained and distant with time.</li>
                <li><span class="year">1972</span> Though Niki Lauda was swiftly promoted to the F1 team, he raced both
                    in the F1 and F2 races for ‘March’. He was able to impress Robin Herd, principal of ‘March’ with his
                    driving capabilities, but ‘March’ faced a terrible F1 season that year.</li>
                <li><span class="year">1973</span> As ‘March’ fizzled he convinced Louis Stanley at ‘BRM’ to buy a
                    contract of the ‘BRM’ team and took another loan in that pursuit.</li>
                <li><span class="year">1974</span> His real breakthrough came when Enzo Ferrari, owner of
                    ‘Ferrari’ team, took interest in him and enquired and received positive feedback about him from his
                    ‘BRM’ teammate Clay Regazzoni, when the later rejoined ‘Ferrari’. <b>Niki Lauda secured a second
                        place
                        at his debut race under ‘Ferrari’ at the ‘Argentine Grand Prix’. After three more races he won
                        his
                        first ‘Grand Prix’ in the ‘Spanish Grand Prix’.</b> It was ‘Ferrari’s’ first since 1972. </li>
                <li><span class="year">1975</span> <b>He had four wins with the new ‘Ferrari 312 T’. He secured third
                        position in his first ‘World Championship’ at the ‘Italian Grand Prix’ held in Monza. He then
                        went
                        on to win the ‘United States GP’ held at the Watkins Glen village. He emerged as the first
                        racing
                        driver to cover the Nürburgring Nordschleife within seven minutes.</b></li>
                <li><span class="year">1976</span> ‘Formula 1’ season he excelled as a race driver by winning five races
                    and getting second place in two others while securing his second and consecutive ‘World
                    Championship’. He accumulated points more than double of that of his counterparts including James
                    Hunt and Jody Scheckter.</li>
                <li><span class="year">1976</span> <b>On August 1, he met with a severe accident during the second
                        lap of the ‘German Grand Prix’.</b> His Ferrari swerved from the track and after hitting an
                    embankment
                    skidded back in the path bursting into flames. Trapped in the wreckage, he inhaled toxic gases and
                    endured severe burns.</li>
                <li><span class="year">1977</span> <b>Lauda cruised to his second championship despite winning only 3
                        races, then promptly dropped Ferrari at Canada. The parting was not amicable, although Lauda was
                        later to recant much of his criticism of the team (and eventually serve it as a sort of minister
                        without portfolio).</b></li>
                <li><span class="year">1978</span> He joined the Brabham drawing a salary of $1 million and won only
                    three races.</li>
                <li><span class="year">1979</span> He suddenly took retirement from Formula 1 racing and returned to
                    Austria to manage ‘Lauda Air’, the charter airline company that he had founded.</li>
                <li><span class="year">1982</span> He made a comeback to the racing track after proving his
                    mettle at the test conducted by McLaren. He won the ‘Long Beach Grand Prix’.</li>
                <li><span class="year">1984</span> <b>He won the third World Championship. He won the ‘Austrian
                        Grand Prix’ and became the first Austrian to achieve so.</b></li>
                <li><span class="year">1985</span> During the ‘Austrian Grand Prix’ <b>he announced his retirement</b>
                    for
                    good.</li>
                <li><span class="year">1993</span> He became a consultant for ‘Ferrari’ accepting the offer of Luca di
                    Montezemolo.</li>
                <li><span class="year">2003</span> He is a licensed commercial pilot and he founded a new
                    airline, ‘Niki’ where he often served as captain of the flights of his company.</li>
                <li><span class="year">2013</span> <b>‘Lauda Air’ discontinued its services.</b></li>
                <li><span class="year">2019</span> <b>Niki Lauda died on 20 May,</b> at the age of 70. Eight months
                    prior to
                    his death, he received a lung transplant.</li>
            </ul>
        </div>
        <footer>
            <div class="container">
                <figure id="img-div">
                    <img src="http://upload.mocutasorin.ro/lauda-1980.jpg" alt="Lauda in 1980." id="image">
                    <figcaption id="img-caption">Lauda in 1980.</figcaption>
                </figure>
                <div class="images-footer">
                    <img src="http://upload.mocutasorin.ro/ferrari-logo.jpg" alt="ferrari red">
                    <img src="http://upload.mocutasorin.ro/niki-logo.png" alt="niki airlines">
                    <img src="http://upload.mocutasorin.ro/f1-logo.png" alt="formula one">
                    <img src="http://upload.mocutasorin.ro/mclaren-logo.png" alt="mclaren">
                    <img src="http://upload.mocutasorin.ro/lauda-logo.png" alt="lauda airlines">
                </div>
            </div>
            <div class="references container">Refrences: <a href="https://en.wikipedia.org/wiki/Niki_Lauda"
                    target="_blank" id="tribute-link">Wikipedia.org</a> and <a
                    href="https://www.thefamouspeople.com/profiles/niki-lauda-6859.php">Thefamouspeople.com</a></div>
        </footer>
    </main>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Titillium+Web:700&display=swap');
:root {
    --white: #fff;
}

/*
*
* General
*
*/

* {
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', sans-serif;
    margin:0;
}

ul {
    list-style: none;
}

.container {
    width: 70%;
    margin: 0 auto;
    padding-top: 30px;
}

/*
*
* Header 
*
*/

header {
    align-items: flex-end;
    background: url('http://upload.mocutasorin.ro/cover.jpg') no-repeat top left;
    background-size: cover;
    display: flex;
    flex-direction: column;
    min-height: 60vh;
    position: relative;
    padding-bottom: 83px;
}

#title {
    padding-right: 10vw;
    position: relative;
    z-index: 1;
}

#title > h1 {
    color: var(--white, #fff);
    font: italic 700 2.5em 'Titillium Web', sans-serif;
    line-height: 1.3em;
    margin-bottom: 0;
}

#title h3 {
    background: rgba(255,255,255,0.8);
    padding: 10px 15px;
    transform: skew(-25deg);
    border-radius: 20px 5px 5px 5px;
}

.overlay {
    background: rgba(0,0,0, .4);
    min-height: 100%;
    position: absolute;
    width: 100%;
}

.trophies {
    padding-top: 70px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.trophy-box {
    margin: 25px 0;
    position: relative;
    transform: skew(-25deg);
    width: 380px;
    cursor: default;
}

.trophy-box-inner {
    padding: 80px 20px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s;
    width:100%;
}

.trophy-box-front {
    background: rgba(255, 0, 0, 1); 
}

.trophy-box-back {
    background: #fff;
    transform: rotateY(180deg);
}

.trophy-box-front, .trophy-box-back {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    height: 100%;
    width: 100%;
    backface-visibility: hidden;
    border-radius: 50px 10px 10px 10px;
    padding:25px;
    top: 0;
    left: 0;
}

.trophy-box:hover .trophy-box-inner {
    transform:rotateY(180deg);
}

.trophy-box-front h1 {
    color: var(--white);
    font-size:4em;
}

.trophy-box p {
    transform: skew(25deg);
    padding-left: 10px;
}

/*
*
* Body
*
*/

#tribute-info {
    position:relative;
    top:-40px;
    background-color: rgba(255,255,255, 0.8);
    padding: 30px;
    -webkit-box-shadow: 8px 13px 24px -8px rgba(0,0,0,0.41);
    -moz-box-shadow: 8px 13px 24px -8px rgba(0,0,0,0.41);
    box-shadow: 8px 13px 24px -8px rgba(0,0,0,0.41);
}

#tribute-info ul li {
    padding-bottom: 15px;
    padding-right: 10px;
    font-size: 18px;
    line-height: 1.4em;
}

#tribute-info ul {
    padding-left: 0;
}

.year {
    color: #C92610;
    font-weight: bold;
}

/*
*
* Footer
*
*/

footer > .container:first-child {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

#img-div {
    flex: 0 1 35%;
    position: relative;
}

#img-div img {
    max-width:100%;
    height: auto;
    display: block;
}

.images-footer {
    flex: 0 0 65%;
    padding-left: 20px;
}

.images-footer img {
    width: 150px;
    padding-bottom: 20px;
}

figcaption {
    position: absolute;
    bottom: 0;
    padding: 5px;
    background-color: rgba(255,255,255,0.9);
    width: 100%;
    font-weight: bold;
    text-align: center;
}
.references {
    text-align:center;
    font-weight: bold;
    font-size: 1.5em;
    padding-bottom: 10px;
}

.references a {
    color: #C92610;
    display: inline-block;
    text-decoration: none;
}

.references a:hover {
    border-bottom:1px solid #C92610;
}

/*
*
* Media queries 
*
*/

/*
    Large devices - desktops
*/
@media (max-width: 991.98px) {

    #img-div {
        flex: 0 0 35%;
    }

    .images-footer {
        flex: 0 0 65%;
    }
}
/*
    Medium devices - tablets
*/
@media (max-width: 768px) {
    .trophies {
        display: none;
    }
    header {
        min-height: 100vh;
    }

    .container {
        width:90%;
    }
}

/*
    Small devices - phones
*/
@media (max-width: 576px) {

    header {
        padding-left: 20px;
    }

    .container {
        width:100%;
    }

    #tribute-info {
        top: 0;
    }

    footer > .container:first-child {
        flex-direction: column;
    }

    .images-footer {
        padding-top: 40px;
    }
}
              
            
!

JS

              
                
              
            
!
999px

Console