<div class="container">
        
    <header>
        <nav>
          <ul>
            <li class="logo"><a href="#"><i class="fa fa-file-code-o" aria-hidden="true"></i>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </nav>
        <button>Login</button>
    </header>

    <div class="wrapper">
        <section class="main">
            <h2>Text wrap around the ellipse by using the shape-outside property</h2>
          
          <div class="ellipse"></div>

            <p>Starting from the outside and working in, adding display: flex; to the container is the first step in any flexbox layout. The flex-direction is column, so this will position all sections under each other.    </p>
          
          <p>One handy thing is how easy it is to align text. In the navigation, with align-items: baseline, all navigation items are aligned to the baseline of the text so they look more uniform. </p>
          
          <p>Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.</p>
          
          <p>Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.</p>
          
          <p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions. </p>
        
        </section>
    </div>

    <footer>
        <h3>Shape-outside</h3>
        <p>Hope you enjoyed learning about ellipses and how to use shape-outside!</p>
    </footer>

</div>