<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 PNG image by using the shape-outside property</h2>
          
          <img class="intro-img" src="https://abbeyjfitzgerald.com/wp-content/uploads/2020/03/plant-clip.png">  

<p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>

<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.</p>

<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.</p>
        
        </section>
    </div>

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

</div>
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    color: inherit;
    text-decoration: none;
}

body {
    background-color: #eee;
    color: #434344;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
}

/* Page Layout */

.container {
    max-width: 850px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    background-color: #fff;
}

/* Header */

header{
    color: #898989;
    padding: 20px 0;
    margin-bottom: 40px;
    text-transform: uppercase;
    border-bottom: 2px solid #cccccc;
    display: flex;
    justify-content: space-between;
}

header nav ul {
    display: flex;
    align-items: baseline;
    list-style-type: none;
}

header nav li {
    margin-right: 15px;
}

header button {
    border: none;
    padding: 8px 25px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    border-radius: 1.25rem;
    background-color: #764ABC;
}

/* Main Section */

.wrapper {
    display: flex;
}

.main {
    flex: 3;
}

.main h2 {
    font-size: 32px;
    margin: 1rem 0;
    color: #764ABC;
}

.main p {
    font-size: .75rem;
    margin-bottom: .75rem;
}

.main img {
/*     width: 100%; */
}

.intro-img {
  width: 250px;
  height: 250px;
  float: left;
  shape-outside: circle() margin-box;
  shape-margin: 10px;
}  

/* Sidebar */

.logo {
  font-size: 2rem;
  margin-right: 1.5rem;
  color: #764ABC;
}

/* Footer */

footer {
    color: #898989;
    text-align: center;
    padding: 20px 0;
    margin-top: 60px;
    padding: 20px 0;
    background-color: #e7e7e7;
}

footer p {
    color: #434344;
    font-size: 12px;
    padding: 10px;
}


@media (max-width: 600px) {
    .wrapper {
        flex-direction: column;
    }

    .main {
        margin-right: 0;
        margin-bottom: 60px;
    }
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.