index.html

<link rel="stylesheet" href="style.css" />
<header>
  <div>
    <div>
      <img class="blackHeart" src="images\black-heart.png" alt="black heart" />
      <span> Nifty Penguin Magic </span>
    </div>
    <nav>
      <ul>
        <li><a href="#"> npm Enterprise </a></li>
        <li><a href="#"> Products </a></li>
        <li><a href="#"> Solutions </a></li>
        <li><a href="#"> Resources </a></li>
        <li><a href="#"> Docs </a></li>
        <li><a href="#"> Support </a></li>
      </ul>
    </nav>
  </div>

  <div class="flex1">
    <img class="npm-logo" src="images\npm-logo.png"/>
    <img class="magnifying-glass" src="images\magnifying-glass.png"/>
    <form action="/search packages" method="get">
      <input class="barra" type="text" name="busqueda" placeholder="           Search Packages...">
      <button class="button" type="submit">Search</button>
      <a class="join" href="#">Join</a>
      <a class="Log-in" href="#">Log in</a>
    </div>
  </header>
<section id="seccion1">
<h1 class="h11">Build amazing things</h1>
<article class="articulo1">Essential JavaScript development tools that help you go to market faster and build powerful applications using
  modern open source code.</article>
<div>
  <a class="Seeplans" href="#">See plans</a>
  <a class="Joinforfree" href="#">Join for free</a>
</div>
</section>
<section id="seccion2">
  <img class="triangle" src="images/triangle-hexagon.svg"/>
<h2 class="titulo">Bring the best of open source to your company</h2>
<article class="articulo2">npm is the tool used by over 11,000,000 JavaScript developers around the world. Your developers already use it. Your company depends on it. Create a Org and get more out of the tools your team already knows and loves.</article>
</section>
<section class="seccion3">
<div class="image-container">
  <img src="images/zero-configuration.svg"
  style="width: 50px;"/>  
<h3 class="titulo">Zero configuration</h3>
<p>Create an org. add your team, and start collaborating.
  Nothing to configure, set up, or manage.  
</p>
</div>
<div class="image-container">
  <img src="images/team-management.svg"/>  
<h3 class="titulo">Team management</h3>
<p>Control who has access to what modules within your team namespace using straightforward team management capabilities.    
</p>
</div>
<div class="image-container">
  <img src="images/familiar-features.svg"/>  
<h3 class="titulo">Familiar features</h3>
<p>npm Orgs has 100% parity with all the public npm registry features your developers already use.    
</p>
</div>
<div class="image-container">
  <img src="images/npm-audit.svg"/>  
<h3 class="titulo">npm audit</h3>
<p>Enjoy the security auditing features built into the npm client, a zero-friction way to make open source software safer.    
</p>
</div>

</section>
<a class="Create" href="#">Create a Org</a>