Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

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.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ 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.

Powered by Algolia
About Packages

Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

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 

              
                <!DOCTYPE html>
<html lang="en" id="main">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://code.iconify.design/1/1.0.3/iconify.min.js"></script>
  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>





  <title id="title">
    Elon Musk - Billionaire, Visionary... and a Playboy
  </title>
</head>

<body>

  <div id="BG-container">
    <div id="main_container">

      <header>

        <!-- main img-->
        <figure id="img-div">
          <img id="image" src="https://drive.google.com/uc?id=1JmHPE835MqsEcYBJeDgKFzSs1TNDPot9"
            alt="Elon Musk - portrait" />
          <figcaption id="img-caption">
            Elon Reeve Musk
          </figcaption>
        </figure>
        <!-- main img-->

        <div class="separator"></div>

        <!-- NAVIGATION -->
        <nav class="nav-container">

          <div class="nav-item">
            <button class="nav-button" onClick="Scroller('INTRODUCTION')">
              <span class="nav-span">Introduction</span>
              <p><i class="iconify" data-icon="mdi-account-circle"></i></p>
            </button>
          </div>

          <div class="nav-item">
            <button class="nav-button" onClick="Scroller('EARLY LIFE')">
              <span class="nav-span">Early Life</span>
              <p><i class="iconify" data-icon="mdi-baby-carriage"></i></p>
            </button>
          </div>

          <div class="nav-item">
            <button class="nav-button" onClick="Scroller('EDUCATION')">
              <span class="nav-span">EDUCATION</span>
              <p><i class="iconify" data-icon="mdi-school"></i></p>
            </button>
          </div>

          <div class="nav-item">
            <button class="nav-button" onClick="Scroller('COMPANIES')">
              <span class=" nav-span">COMPANIES</span>
              <p><i class="iconify" data-icon="mdi-domain"></i></p>
            </button>
          </div>

          <div class="nav-item">
            <button class="nav-button" onClick="Scroller('Resources')">
              <span class="nav-span">resources</span>
              <p><i class="iconify" data-icon="mdi-file-find"></i></p>
            </button>
          </div>

        </nav>
        <!-- NAVIGATION -->

        <div class="separator"></div>
      </header>

      <!-- MAIN -->
      <main id="tribute-info" class="main-content">

        <!-- INTRODUCTION ------------------------------------------------------------------->
        <div class="grid-container-separator">
          <div class="separator"></div>
          <div class="grid-item-center">
            <h2 id="INTRODUCTION">
              INTRODUCTION<br>
              <i class="iconify" data-icon="mdi-account-circle"></i>
            </h2>
          </div>
          <div class="separator"></div>
        </div>

        <div class="grid-container-double">
          <div class="grid-item">
            <figure>
              <img class="main-img" src="https://drive.google.com/uc?id=1IBWbDqftc6FFb8MLGTotSvUF6q9O0f1y"
                alt="Elon Musk" />
              <figcaption class="main-img-caption">
                Elon Reeve Musk
              </figcaption>
            </figure>
          </div>
          <div class="grid-item">
            <p>
              <a id="tribute-link" href="https://en.wikipedia.org/wiki/Elon_Musk" target="_blank">Elon Reeve Musk</a>
              <a href="https://en.wikipedia.org/wiki/Fellow_of_the_Royal_Society" target="_blank">FRS</a> - born June
              28,
              1971 - is an engineer and
              technology entrepreneur. He holds South African, Canadian, and
              U.S. citizenship and is the founder, CEO, and chief
              engineer/designer of
              <a href="https://en.wikipedia.org/wiki/SpaceX" target="_blank">SpaceX</a>, CEO and product architect of
              <a href="https://en.wikipedia.org/wiki/Tesla,_Inc." target="_blank">Tesla</a>,
              Inc. and founder of
              <a href="https://en.wikipedia.org/wiki/The_Boring_Company" target="_blank">The
                Boring Company</a>, co-founder of
              <a href="https://en.wikipedia.org/wiki/Neuralink" target="_blank">Neuralink</a>
              and co-founder and initial co-chairman of
              <a href="https://en.wikipedia.org/wiki/OpenAI" target="_blank">OpenAI</a>
              . He was elected
              a
              <a href="https://en.wikipedia.org/wiki/Fellow_of_the_Royal_Society" target="_blank">Fellow of the
                Royal Society (FRS) </a>
              in 2018. In December 2016,
              he was ranked 21st on the Forbes list of The World's Most
              Powerful People and was ranked (co-)first on the Forbes list of
              the Most Innovative Leaders of 2019. He has a net worth of $23.6
              billion and is listed by Forbes as the 40th-richest person in
              the world. He is the longest tenured CEO of any automotive
              manufacturer globally.
            </p>

            <p></p>
            <div class="separator"></div>
            <p>
              Born and raised in Pretoria, South Africa, Musk briefly attended
              the
              <a href="https://en.wikipedia.org/wiki/University_of_Pretoria" target="_blank">University of Pretoria</a>
              before moving to Canada when he was
              17 to attend
              <a href="https://en.wikipedia.org/wiki/Queen%27s_University" target="_blank">Queen's University</a>
              . He transferred to the
              <a href="https://en.wikipedia.org/wiki/University_of_Pennsylvania" target="_blank">University of
                Pennsylvania</a>
              two years later, where he received a
              Bachelor's degree in economics from the
              <a href="https://en.wikipedia.org/wiki/Wharton_School_of_the_University_of_Pennsylvania"
                target="_blank">Wharton School</a>
              and a
              Bachelor's degree in physics from the
              <a href="https://en.wikipedia.org/wiki/University_of_Pennsylvania_School_of_Arts_and_Sciences"
                target="_blank">College of Arts
                and</a>
              Sciences. He began a Ph.D. in applied physics and material
              sciences at
              <a href="https://en.wikipedia.org/wiki/Stanford_University" target="_blank">Stanford University</a>
              in 1995 but dropped out after
              two days to pursue an entrepreneurial career. He subsequently
              co-founded
              <a href="https://en.wikipedia.org/wiki/Zip2" target="_blank">Zip2</a>
              with his brother Kimbal, a web software company,
              which was acquired by
              <a href="https://en.wikipedia.org/wiki/Compaq" target="_blank">Compaq</a>
              for $340 million in 1999. Musk then
              founded
              <a href="https://en.wikipedia.org/wiki/X.com" target="_blank">X.com</a>
              , an online bank. It merged with
              <a href="https://en.wikipedia.org/wiki/Confinity" target="_blank">Confinity</a>
              in 2000,
              which had launched PayPal the previous year and was bought by
              eBay for $1.5 billion in October 2002.
            </p>
          </div>
        </div>

        <!-- EARLY LIFE ------------------------------------------------------------------->
        <div class="grid-container-separator">
          <div class="separator"></div>
          <div class="grid-item-center">
            <h2 id="EARLY LIFE">
              EARLY LIFE <br />
              <i class="iconify" data-icon="mdi-baby-carriage"></i>
            </h2>
          </div>
          <div class="separator"></div>
        </div>
        <div class="grid-container-double">
          <p class="grid-item">
            Musk was born on June 28, 1971, in Pretoria, Transvaal, South
            Africa, the son of
            <a href="https://en.wikipedia.org/wiki/Maye_Musk" target="_blank">Maye Musk</a>
            (née Haldeman), a model and dietitian
            from Regina, Saskatchewan, Canada, and Errol Musk, a South African
            electromechanical engineer, pilot, and sailor. He has a younger
            brother,
            <a href="https://en.wikipedia.org/wiki/Kimbal_Musk" target="_blank">Kimbal</a>
            (born 1972), and a younger sister,
            <a href="https://en.wikipedia.org/wiki/Tosca_Musk" target="_blank">Tosca</a>
            (born
            1974). His maternal grandfather, Dr. Joshua Haldeman, was an
            American-born Canadian. His paternal grandmother was British, and
            he also has Pennsylvania Dutch ancestry. After his parents
            divorced in 1980, Musk lived mostly with his father in the suburbs
            of Pretoria, a choice made by Musk two years after his parents
            separated but which he subsequently regretted. Musk is estranged
            from his father whom he has referred to as "a terrible human
            being". He has a half-sister and a half-brother.
          </p>
          <div class="grid-item">
            <figure>
              <img class="main-img" src="https://drive.google.com/uc?id=1_r2GfkbEPkz-rOKvgWBrG1sh5cHG5tzF"
                alt="Elon Musk" />
              <figcaption class="main-img-caption">
                Elon as a kid
              </figcaption>
            </figure>
          </div>
        </div>

        <!-- EDUCATION ------------------------------------------------------------------->
        <div class="grid-container-separator">
          <div class="separator"></div>
          <div class="grid-item-center">
            <h2 id="EDUCATION">
              EDUCATION<br />
              <i class="iconify" data-icon="mdi-school"></i>
            </h2>
          </div>
          <div class="separator"></div>
        </div>
        <div class="grid-container-double">
          <div class="grid-item">
            While awaiting Canadian documentation, Musk attended the
            <a href="https://en.wikipedia.org/wiki/University_of_Pretoria" target="_blank">University of Pretoria</a>
            for five months. Once in Canada, Musk
            entered
            <a href="https://en.wikipedia.org/wiki/Queen%27s_University" target="_blank">Queen's University</a>
            in 1989, avoiding mandatory service in
            the South African military. He left in 1992 to study business and
            physics at the
            <a href="https://en.wikipedia.org/wiki/University_of_Pennsylvania" target="_blank">University of
              Pennsylvania</a>
            ; he graduated with a
            Bachelor of Science degree in economics and a Bachelor of Arts
            degree in physics.
          </div>
          <div class="grid-item">
            In 1994, Musk held two internships in Silicon Valley during the
            summer: at an energy storage start-up called Pinnacle Research
            Institute which researched electrolytic ultracapacitors for energy
            storage; and at the Palo Alto-based start-up Rocket Science Games.
            His work at Rocket Science Games involved
            <a href="https://en.wikipedia.org/wiki/Assembly_language" target="_blank">assembly programming</a>
            of
            device drivers. Bruce Leak, the former lead engineer behind
            Apple’s QuickTime who had hired Musk noted: “He had boundless
            energy. Kids these days have no idea about hardware or how stuff
            works, but he had a PC hacker background and was not afraid to
            just go figure things out.”
          </div>
        </div>
        <div class="grid-container-separator">
          <div class="separator"></div>
          <div class="grid-item-center">
            <h2 id="COMPANIES">
              COMPANIES<br />
              <i class="iconify" data-icon="mdi-domain"></i>
            </h2>
          </div>
          <div class="separator"></div>
        </div>

        <div class="separator"></div>
        <nav class="nav-container">

          <button class="nav-button" onClick="Scroller('Tesla')">
            <span class="nav-span"><img class="nav-img"
                src="https://drive.google.com/uc?id=1M1IeXJV4Fexrxf_9Tow9KFSg-8zQDqZm" alt="Tesla Picture" /></span>
          </button>


          <button class="nav-button" onClick="Scroller('Spacex')">
            <span class="nav-span"><img class="nav-img"
                src="https://drive.google.com/uc?id=1BBIK6KEFhIJ2RuPxOyNczW_MnAycRqwW" alt="SpaceX Picture" /></span>
          </button>


          <button class="nav-button" onClick="Scroller('TheBoringCompany')">
            <span class="nav-span"><img class="nav-img"
                src="https://drive.google.com/uc?id=1AZDRrOTFhxK1sWEdetnKk4evICDLCNkP"
                alt="Boring company Picture" /></span>
          </button>


          <button class="nav-button" onClick="Scroller('OpenAI')">
            <span class="nav-span"><img class="nav-img"
                src="https://drive.google.com/uc?id=12z6qDoMf46OmCnXYjH8TFaixKXAdt_O7" alt="Open AI Picture" /></span>
          </button>


          <button class="nav-button" onClick="Scroller('NeuralLink')">
            <span class="nav-span"><img class="nav-img"
                src="https://drive.google.com/uc?id=1LaCQnQ3FxOzWvsTyxsLbbvJ8d0wlUW_n"
                alt="Neural link Picture" /></span>
          </button>

        </nav>
        <div class="separator"></div>
        <h3 id="Tesla">Tesla</h3>
        <div class="separator"></div>
        <div class="grid-container-triple">
          <div class="grid-item">
            <div class="separator"></div>
            <p>
              Tesla, Inc. (formerly Tesla Motors, Inc.), is an American
              automotive and energy company based in Palo Alto, California.
              The company specializes in electric car manufacturing and,
              through its
              <a href="https://en.wikipedia.org/wiki/SolarCity" target="_blank">SolarCity</a>
              subsidiary, solar panel manufacturing. It
              operates multiple production and assembly plants, such as
              <a href="https://en.wikipedia.org/wiki/Gigafactory_1" target="_blank">Gigafactory 1</a>
              near Reno, Nevada, and its main vehicle
              manufacturing facility at
              <a href="https://en.wikipedia.org/wiki/Tesla_Factory" target="_blank">Tesla Factory</a>
              in Fremont, California.
              As of 2019, Tesla sells
              <a href="https://en.wikipedia.org/wiki/Tesla_Model_S" target="_blank">Model S</a>,
              <a href="https://en.wikipedia.org/wiki/Tesla_Model_X" target="_blank">Model X</a>, and
              <a href="https://en.wikipedia.org/wiki/Tesla_Model_3" target="_blank">Model 3</a>
              cars. It
              is accepting reservations for the
              <a href="https://en.wikipedia.org/wiki/Tesla_Model_Y" target="_blank">Model Y</a>,
              <a href="https://en.wikipedia.org/wiki/Tesla_Roadster_(2020)" target="_blank">Roadster (2020)</a>,
              <a href="https://en.wikipedia.org/wiki/Tesla_Cybertruck" target="_blank">Cybertruck</a>
              , and Semi vehicles. Tesla also sells Powerwall,
              Powerpack, and Megapack batteries, solar panels, solar roof
              tiles, and some related products.
            </p>
            <div class="separator"></div>
          </div>

          <div class="grid-img-center">
            <img class="nav-img" src="https://drive.google.com/uc?id=1M1IeXJV4Fexrxf_9Tow9KFSg-8zQDqZm"
              alt="Tesla Picture" />

            <p class="grid-item">
              Tesla was founded in July 2003, by engineers
              <a href="https://en.wikipedia.org/wiki/Martin_Eberhard" target="_blank">Martin Eberhard</a>
              and
              <a href="https://en.wikipedia.org/wiki/Marc_Tarpenning" target="_blank">Marc Tarpenning</a>,
              under the name Tesla Motors. The company's name
              is a tribute to engineer
              <a href="https://en.wikipedia.org/wiki/Nikola_Tesla" target="_blank">Nikola Tesla</a>.
              In early Series A
              funding, Tesla Motors was joined by Elon Musk,
              <a href="https://en.wikipedia.org/wiki/J._B._Straubel" target="_blank">J. B. Straubel</a>
              and Ian Wright, all of whom are retroactively allowed to call
              themselves co-founders of the company. Musk, who formerly served
              as chairman and is the current chief executive officer, said
              that he envisioned Tesla Motors as a technology company and
              independent automaker, aimed at eventually offering electric
              cars at prices affordable to the average consumer. Tesla Motors
              shortened its name to Tesla in February 2017.
            </p>
          </div>
          <div class="grid-item">
            <div class="separator"></div>
            <p>
              After 10 years in the market, Tesla ranked as the world's best
              selling plug-in passenger car manufacturer in 2018, both as a
              brand and by automotive group, with 245,240 units delivered and
              a market share of 12% of the plug-in segment sales. Tesla
              vehicle sales in the U.S. increased by 280% from 48,000 in 2017
              to 182,400 in 2018, and globally were up by 138% from 2017.
              Tesla has never had a profitable year. However, it has had
              several profitable quarters starting from the first quarter of
              2013 when it posted an $11 million profit.
            </p>
            <div class="separator"></div>
          </div>
        </div>
        <div class="separator"></div>
        <h3 id="Spacex">SpaceX</h3>
        <div class="separator"></div>
        <div class="grid-container-triple">
          <div class="grid-item">
            <div class="separator"></div>
            <p>
              Space Exploration Technologies Corp., doing business as SpaceX,
              is a private American
              <a href="https://en.wikipedia.org/wiki/Aerospace_manufacturer" target="_blank">aerospace manufacturer</a>
              and
              <a href="https://en.wikipedia.org/wiki/Spaceflight" target="_blank">space transportation</a>
              services company headquartered in Hawthorne,
              California. It was founded in 2002 by Elon Musk with the goal of
              reducing space transportation costs to enable the
              <a href="https://en.wikipedia.org/wiki/Colonization_of_Mars" target="_blank">colonizationof Mars</a>.
              SpaceX has developed the Falcon launch vehicle family
              and the Dragon spacecraft family
            </p>
            <div class="separator"></div>
          </div>

          <div class="grid-img-center">
            <img class="nav-img" src="https://drive.google.com/uc?id=1BBIK6KEFhIJ2RuPxOyNczW_MnAycRqwW"
              alt="Spacex Picture" />

            <p class="grid-item">
              SpaceX's achievements include the first privately funded
              <a href="https://en.wikipedia.org/wiki/Liquid-propellant_rocket" target="_blank">liquid-propellant</a>
              rocket to reach orbit (
              <a href="https://en.wikipedia.org/wiki/Falcon_1" target="_blank">Falcon 1</a>
              in 2008), the
              first private company to successfully launch, orbit, and recover
              a spacecraft (
              <a href="https://en.wikipedia.org/wiki/SpaceX_Dragon" target="_blank">Dragon</a>
              in 2010), the first private company to send
              a spacecraft to the
              <a href="https://en.wikipedia.org/wiki/International_Space_Station" target="_blank">International
                Space</a>
              Station
              (Dragon in
              2012), the first
              propulsive landing
              for an orbital rocket
              (
              <a href="https://en.wikipedia.org/wiki/Falcon_9" target="_blank">Falcon 9</a>
              in 2015), the first reuse of an orbital rocket (Falcon
              9 in 2017), and the first private company to launch an object
              into orbit around the sun (
              <a href="https://en.wikipedia.org/wiki/Falcon_Heavy" target="_blank">Falcon Heavy's</a>
              payload of a
              <a href="https://en.wikipedia.org/wiki/Elon_Musk%27s_Tesla_Roadster" target="_blank">Tesla Roadster</a>
              in 2018). SpaceX has flown 18 resupply missions to the
              International Space Station (ISS) under a partnership with
              <a href="https://en.wikipedia.org/wiki/NASA" target="_blank">NASA</a>
              .
              NASA also awarded SpaceX a further development contract in 2011
              to develop and demonstrate a human-rated Dragon, which would be
              used to transport astronauts to the ISS and return them safely
              to Earth. SpaceX conducted the maiden launch of its
              <a href="https://en.wikipedia.org/wiki/Dragon_2" target="_blank">Crew Dragon</a>
              spacecraft on a NASA-required demonstration flight (
              <a href="https://en.wikipedia.org/wiki/Crew_Dragon_Demo-1" target="_blank">Crew Dragon Demo-1</a>
              )
              on March 2, 2019 and is set to launch its first crewed
              Crew Dragon in February, 2020.
            </p>
          </div>
          <div class="grid-item">
            <div class="separator"></div>
            <p>
              In December 2015, a
              <a href="https://en.wikipedia.org/wiki/Falcon_9" target="_blank">Falcon 9</a>
              accomplished a propulsive
              <a href="https://en.wikipedia.org/wiki/VTVL" target="_blank">vertical landing</a>.
              This was the first such achievement by a rocket for
              <a href="https://en.wikipedia.org/wiki/Orbital_spaceflight" target="_blank">orbital spaceflight</a>.
              In April 2016, with the launch of
              <a href="https://en.wikipedia.org/wiki/SpaceX_CRS-8" target="_blank">CRS-8</a>,
              SpaceX successfully vertically landed the first stage on an
              ocean
              <a href="https://en.wikipedia.org/wiki/Autonomous_spaceport_drone_ship" target="_blank">drone ship</a>
              landing platform. In May 2016, in another
              first, SpaceX again landed the first stage, but during a significantly more energetic
              <a href="https://en.wikipedia.org/wiki/Geostationary_transfer_orbit" target="_blank">geostationary
                transfer orbit</a>
              mission. In March 2017, SpaceX became the first to successfully
              re-launch and land the first stage of an orbital rocket. In
              January 2020, with the third launch of the Starlink project,
              SpaceX became the largest commercial satellite constellation
              operator in the world.
            </p>
            <div class="separator"></div>
          </div>
        </div>
        <div class="separator"></div>
        <h3 id="TheBoringCompany">The Boring Company</h3>
        <div class="separator"></div>

        <div class="grid-container-double">
          <div class="grid-item">
            <img class="nav-single" src="https://drive.google.com/uc?id=1AZDRrOTFhxK1sWEdetnKk4evICDLCNkP"
              alt="The Boring company Picture" />
          </div>

          <p class="grid-item">
            The Boring Company (also known as TBC) is an infrastructure and
            <a href="https://en.wikipedia.org/wiki/Tunnel_construction" target="_blank">tunnel construction</a>
            services company founded by Elon Musk in
            December 2016.Musk has cited difficulty with Los Angeles traffic
            and limitations with the current 2-D transportation network as
            inspiration for the project. The Boring Company was initially
            formed in 2017 as a subsidiary of
            <a href="https://en.wikipedia.org/wiki/SpaceX" target="_blank">SpaceX</a>,
            becoming a separate and
            fully independent company in 2018. As of December 2018, 90% of the
            equity was owned by Musk, with 6% held by SpaceX as return for the
            use of SpaceX resources during the initial startup of the company.
            Outside investments during 2019 have changed the equity split.
          </p>
        </div>

        <div class="separator"></div>
        <h3 id="OpenAI">Open AI</h3>
        <div class="separator"></div>

        <div class="grid-container-double">
          <p class="grid-item">
            OpenAI is the for-profit corporation OpenAI LP, whose parent
            organization is the non-profit organization OpenAI Inc, which
            conducts research in the field of
            <a href="https://en.wikipedia.org/wiki/Artificial_intelligence" target="_blank">artificial intelligence</a>
            (AI)
            with the stated aim to promote and develop
            <a href="https://en.wikipedia.org/wiki/Friendly_artificial_intelligence" target="_blank">friendly AI</a>
            in such a
            way as to benefit humanity as a whole. Founded in late 2015, the
            San Francisco-based organization aims to “freely collaborate” with
            other institutions and researchers by making its patents and
            research open to the public. The founders (notably Elon Musk and
            <a href="https://en.wikipedia.org/wiki/Sam_Altman" target="_blank">Sam Altman</a>
            ) are motivated in part by concerns about the
            existential risk from artificial general intelligence.
          </p>

          <div class="grid-item">
            <img class="nav-single" src="https://drive.google.com/uc?id=12z6qDoMf46OmCnXYjH8TFaixKXAdt_O7"
              alt="Open AI Picture" />
          </div>
        </div>

        <div class="separator"></div>
        <h3 id="NeuralLink">Neuralink</h3>
        <div class="separator"></div>

        <div class="grid-container-double">
          <div class="grid-item">
            <img class="nav-single" src="https://drive.google.com/uc?id=1LaCQnQ3FxOzWvsTyxsLbbvJ8d0wlUW_n"
              alt="Neural link Picture" />
          </div>

          <p class="grid-item">
            Neuralink Corporation is an American
            <a href="https://en.wikipedia.org/wiki/Neurotechnology" target="_blank">neurotechnology</a>
            company
            founded by Elon Musk and others, developing
            <a href="https://en.wikipedia.org/wiki/Brain%E2%80%93computer_interface" target="_blank">implantable
              brain–machine interfaces</a>
            (BMIs). The company's headquarters are in
            San Francisco; it was started in 2016 and was first publicly
            reported in March 2017. Since its founding, the company has hired
            several high-profile neuroscientists from various universities. By
            July 2019, it had received $158 million in funding (of which $100
            million was from Musk) and was employing a staff of 90 employees.
            At that time, Neuralink announced that it was working on a "sewing
            machine-like" device capable of implanting very thin (4 to 6 μm in
            width) threads into the brain, demonstrated a system that read
            information from a lab rat via 1,500 electrodes and anticipated to
            start experiments with humans in 2020.
          </p>
        </div>

        <div class="grid-container-separator">
          <div class="separator"></div>
          <div class="grid-item-center">
            <h2 id="Resources">
              Resources<br />
              <i class="iconify" data-icon="mdi-file-find"></i>

            </h2>
          </div>
          <div class="separator"></div>
        </div>

        <div class="grid-container-triple">
          <div class=".grid-item-list">
            <h6>Pictures used:</h6>

            <ul>
              <li>
                <a href="https://www.wired.com/images_blogs/wiredscience/2012/10/ff_musk4_f.jpg" target="_blank">Main
                  Picture</a>
              </li>
              <li>
                <a href="https://www.organism.earth/library/docs/elon-musk/headshot.jpg" target="_blank">Profile
                  Picture</a>
              </li>
              <li>
                <a href="https://www.svethardware.cz/zivot-elona-muska-cesta-za-nemoznym-snem/42519/img/body-0.5A8.jpg"
                  target="_blank">Elon as kid</a>
              </li>
              <li>
                <a href="https://ih0.redbubble.net/image.399518562.4289/flat,550x550,075,f.u1.jpg"
                  target="_blank">Tesla</a>
              </li>
              <li>
                <a href="https://i.imgur.com/tIiLSAc.png" target="_blank">SpaceX</a>
              </li>
              <li>
                <a href="https://enterpriseengineeringnetwork.org/images/boring-company-logo-5.jpg" target="_blank">The
                  Boring Company</a>
              </li>
              <li>
                <a href="https://i.pinimg.com/originals/99/7d/09/997d09c7bd7d73fe75090125c56cc383.jpg"
                  target="_blank">Open AI</a>
              </li>
              <li>
                <a href="https://www.freepngimg.com/download/graphic_design/80307-intelligence-square-angle-artificial-brain-free-photo-png.png"
                  target="_blank">Neuralink</a>
              </li>
            </ul>

          </div>



          <div class=".grid-item-list">
            <h6>Other:</h6>
            <ul>
              <li>
                <a href="https://fonts.googleapis.com/css?family=Jura&display=swap" target="_blank">Font</a>
              </li>
              <li>
                <a href="https://fonts.googleapis.com/icon?family=Material+Icons" target="_blank">Icons</a>
              </li>
              <li>
                <a href="https://www.transparenttextures.com/patterns/graphy-dark.png#filter-id" target="_blank">Texture
                  grid</a>
              </li>
              <li>
                <a href="https://i.pinimg.com/originals/51/34/8e/51348e403414e3fefe78128d31cae95b.jpg"
                  target="_blank">Nebula</a>
              </li>
            </ul>

          </div>



          <div class=".grid-item-list">
            <h6>Text:</h6>
            <ul>
              <li>
                <a href="https://en.wikipedia.org/wiki/Main_Page" target="_blank">Wikipedia</a>
              </li>
            </ul>

          </div>
        </div>
        <div class="separator"></div>
      </main>
    </div>
    <footer>
      <p>Made by <b>Alan Kovac</b> - DISCLAIMER: I hereby declare that I do not own the rights to texts and pictures.
        All rights belong to the respective owners that you can find in the resources tab with attached links.</p>
    </footer>
  </div>
</body>

</html>
!

CSS 

              
                /* -- main CSS styles start -- */
@import url("https://fonts.googleapis.com/css?family=Jura&display=swap");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
:root {
  --main-bg-color: black;
  --main-text-color: white;
  --border-color: rgba(22, 104, 159, 0.2);
  --bg-items: rgba(22, 104, 159, 0.5);
  --nav-hover-button-color: rgba(22, 104, 159, 1);
  --highlight-color: #50b9c7;
}
* {
  margin: 0px;
  padding: 0px;
  scroll-behavior: smooth;
}

body {
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
  font-family: "Jura", sans-serif;
}
#BG-container {
  background: linear-gradient(
      -90deg,
      var(--main-bg-color),
      var(--border-color),
      var(--main-bg-color)
    ),
    url(https://drive.google.com/uc?id=1Ke9XtpPICbbm949tE8ttQRNe18m2eAgI),
    url(https://drive.google.com/uc?id=1QIc464jLWKGmjDP-gAzc3Z8l_fIriIIN) repeat;
  max-width: 100%;
}
#main_container {
  margin: 0 auto;
  display: block;
  max-width: 1000px;
}
/* -- main CSS styles end -- */

/* -- main IMG styles start -- */
#img-div {
  padding-top: 50px;
}

#image {
  max-width: 45%;
  margin: auto;
  display: block;
  opacity: 0.5;
  border: 3px dashed grey;
  width: 50%;
  clip-path: polygon(
    30% 0%,
    70% 0%,
    100% 30%,
    100% 70%,
    70% 100%,
    30% 100%,
    0% 70%,
    0% 30%
  );
  filter: sepia(100%) saturate(200%) brightness(70%) hue-rotate(180deg);
  padding: 10px;
}

#img-caption {
  text-align: center;
  text-shadow: white 0px 0px 5px;
  font-size: 60px;
}
/* -- main END styles start -- */

/* -- nav START styles start -- */
.nav-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, auto));
}

.nav-button {
  position: relative;
  min-width: 170px;
  background: none;
  cursor: pointer;
  margin: auto;
  display: block;
  border: 2px solid transparent;
  color: var(--main-text-color);
  text-transform: uppercase;
  font-size: 15px;
  transition: 0.1s;
  padding: 10px;
}
.nav-span {
  margin: 10px;
}

.nav-button::before,
.nav-button::after,
.nav-span::before,
.nav-span::after {
  display: block;
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
}

.nav-button::before {
  top: -2px;
  left: -2px;
  border-top: 2px solid var(--bg-items);
  border-left: 2px solid var(--bg-items);
}
.nav-button::after {
  top: -2px;
  right: -2px;
  border-top: 2px transparent var(--bg-items);
  border-right: 2px transparent var(--bg-items);
}
.nav-span::before {
  bottom: -2px;
  left: -2px;
  border-bottom: 2px transparent;
  border-left: 2px transparent;
}
.nav-span::after {
  bottom: -2px;
  right: -2px;
  border-bottom: 2px solid var(--bg-items);
  border-right: 2px solid var(--bg-items);
}

.nav-button:hover {
  box-shadow: inset 0px 0px 20px 10px var(--bg-items),
    0px 0px 20px 10px var(--bg-items);
  border: 2px solid var(--nav-hover-button-color);
  background-color: var(--border-color);
}

.nav-item:hover * {
  color: #50b9c7 !important;
}

.nav-img {
  width: 50%;
  padding: 5px;
  border: 3px dashed RGBA(255, 255, 255, 0.1);
  clip-path: polygon(
    30% 0%,
    70% 0%,
    100% 30%,
    100% 70%,
    70% 100%,
    30% 100%,
    0% 70%,
    0% 30%
  );
}
.nav-single {
  width: 100%;
  padding: 5px;
  border: 3px dashed RGBA(255, 255, 255, 0.1);
  clip-path: polygon(
    30% 0%,
    70% 0%,
    100% 30%,
    100% 70%,
    70% 100%,
    30% 100%,
    0% 70%,
    0% 30%
  );
}
/* -- nav end styles start -- */

.separator {
  background: linear-gradient(
    90deg,
    rgba(2, 0, 36, 0) 10%,
    var(--nav-hover-button-color) 30%,
    var(--nav-hover-button-color) 70%,
    rgba(0, 0, 0, 0) 90%
  );
  height: 1px;
  margin-bottom: 20px;
  margin-top: 20px;
}

.iconify {
  width: 35px;
  height: 35px;
  margin: 5px;
  padding: 5px;
  color: white;
  box-shadow: inset 0px 0px 20px 10px var(--bg-items),
    0px 0px 20px 10px var(--bg-items);
  border-radius: 50%;
}

.main-content {
  background-image: linear-gradient(
    0deg,
    rgba(2, 0, 36, 0) 0%,
    var(--border-color) 20%,
    var(--border-color) 80%,
    rgba(0, 0, 0, 0) 100%
  );
}

.grid-container-separator {
  padding-top: 100px;
  display: grid;
  grid-template-columns: auto 40% auto;
}
.grid-item-center {
  padding: 5px;
  border-top: 1px solid var(--nav-hover-button-color);
  border-bottom: 1px solid var(--nav-hover-button-color);
  text-shadow: white 0px 0px 5px;
  text-align: center;
}

.main-img {
  max-width: 200px;
  margin: auto;
  display: block;
  border-bottom: 1px solid var(--nav-hover-button-color);
  padding: 10px;
  clip-path: polygon(
    30% 0%,
    70% 0%,
    100% 30%,
    100% 70%,
    70% 100%,
    30% 100%,
    0% 70%,
    0% 30%
  );
  filter: brightness(80%);
  box-shadow: 0px 0px 20px 0px var(--bg-items),
    0px 0px 20px 10px var(--bg-items);
}
.main-img-caption {
  font-size: 25px;
  text-align: center;
  text-shadow: white 0px 0px 5px;
}

.grid-container-double,
.grid-container-triple {
  display: grid;
}

.grid-container-double {
  grid-template-columns: auto auto;
}
.grid-container-triple {
  grid-template-columns: auto auto auto;
}
.grid-item {
  padding: 25px;
  text-align: justify;
  text-justify: inter-word;
  font-size: 18px;
}

h3,
h6,
.grid-img-center {
  text-align: center;
  font-size: 25px;
}

h6 {
  font-size: 20px;
  padding: 10px;
}

ul {
  list-style-type: none;
  text-align: center;
}

a {
  color: var(--highlight-color);
  text-decoration: none;
}
a:hover {
  text-shadow: white 0px 0px 10px;
  color: white;
}

footer {
  margin: auto;
  width: 50%;
  text-align: center;
  padding-bottom: 25px;
  padding-left: 25px;
  padding-right: 25px;
  color: grey;
  font-size: 11px;
}

/* Mobile friendliness */
@media only screen and (max-width: 600px) {
  .grid-container-double,
  .grid-container-triple {
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
  }
  .grid-item {
    font-size: 13px;
  }
  .grid-item-center {
    text-shadow: white 0px 0px 0px;
  }
  h2 {
    font-size: 15px;
  }
  .nav-mini-item {
    padding: 3px;
  }
}
!

JS 

              
                function Scroller(element) { document.getElementById(element).scrollIntoView();
}
!
999px

Console