lab-html-exercise/index.html at master · Christian2497/lab-html-exercise · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./style.css">
  </head>

<body>
<header>
    <div class="header">
      <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="buscador">
      <form action="busqueda" method="post">
        <img class="npmlogo" src="./images/npm-logo.png" alt="logo"> <br>
        <img class="glass" src="./images/magnifying-glass.png" alt="magnifying-glass">
        <input type="text" id="search" placeholder="Search packages"/>
        <button type="button" id="search"> Search </button> <br>
        <a href="#"> Join </a>
        <a href="#"> Log In  </a>
        <!-- add logo, search bar and buttons (or links and style them as buttons later) -->
      </form>
    </div>
</header>

    <!-- Section 1 -->
    <section class="section1">
        <h2> Build amazing things </h2>
        <p> Essential JavaScript development tools that help <br> you go to market faster and build powerful <br> applications using
          modern open source code. </p>
        <div class="button">
          <button type="button" id="seeplans"> See Plans </button>
          <a href="#"> Join for Free </a>
        </div>
    </section>

    <!-- Section 2 -->
    <section class="section2">
        <img src="./images/triangle-hexagon.svg" alt="triangle-hexagon">
        <h3> Bring the best of open source to your company </h3>
        <p> npm is the tool used by over 11,000,000 JavaScript developers around the world. Your developers <br> already use it. Your company depends on it. Create an Org and get more out of the tools your <br> team already knows and loves.</p>
    </section>

    <!-- Section 3 -->
    <section class="section3" id="section3">
        <div class="articles">
            <img src="./images/zero-configuration.svg" alt="zero-configuration">
            <h4 class="header"> Zero configuration </h4>
            <p> Create an org, add your team,<br> and start collaborating.  <br>Nothing to configure, set up, or <br> manage. </p>
        </div>
        <div class="articles">
            <img src="./images/team-management.svg" alt="team-management">
            <h4 class="header"> Team Management </h4>
            <p> Control who has access to <br> what modules within your <br> team namespace using <br> straightforward team <br> management capabilities. </p>
        </div>
        <div class="articles">
            <img src="./images/familiar-features.svg" alt="familiar-features">
            <h4 class="header"> Familiar Features </h4>
            <p> npm Orgs has 100% parity with <br> all the public npm registry <br> features your developers <br> already use.</p>
        </div>
        <div class="articles">
             <img src="./images/npm-audit.svg" alt="npm-audit">
             <h4 class="header"> npm audit </h4>
             <p> Enjoy the security auditing <br> features built into the npm <br> client, a zero-friction way to <br> make open source software <br> safer.</p>
        </div>
      </section>
      <div class="botonfinal">
        <button type="button" id="org"> Create an Org </button>
      </div>
</body>