HTML-CSS-Exercise-/index.html at master · dauvbafna/HTML-CSS-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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="en">

<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">
  <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>npm</title>
</head>

<body>

  <nav>
    <div class="top-left">
      <a class="heart" href="#">♥︎</a>
      <span class="acronym">Neophobe Plebeian Mumpsimus</span>
    </div>
    <ul class="top-links">
      <li><a href="#">npm Enterprise</a></li>
      <li><a href="#">features</a></li>
      <li><a href="#">pricing</a></li>
      <li><a href="#">documentation</a></li>
      <li><a href="#">support</a></li>
    </ul>
  </nav>

  <header>

      <div class="header-container-top">
        <img class="logo" src="npm-logo.png" alt="npm-logo" style="width:9%">
        <input type="search" id="search" placeholder="Find packages..." />
        <input class="button" type="image" src="https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-256.png" alt="Submit">

        <a class="signup" href="#">Sign up or log in</a>
        <img class="bear" src="bear-logo.png" alt="bear-logo" style="width:3%">
      </div>


    <div class="second-header">

      <h1>Build amazing things</h1>
      <p>npm is the package manager for JavaScript and the world's largest software registry. Discover packages of reusable code - and assemble them in powerful new ways.</p>
      <button class="button-orange"><a href="#">Sign up for npm</a></button>
    </div>
  </header>

  <section class="collaboration">
    <div class="colaboration-box">
      <div class="col col-1">
        <img src="collaboration.svg" alt="collaboration">
      </div>

      <div class="col col-2">
        <div class="boxes">
          <h2> npm Orgs is powerful collaboration -- for free</h2>
          <ul class="list-collaboration">
            <li>Encourage code discovery and re-use within teams</li>
            <li>Publish and control access to your own namespace</li>
            <li>Manage public and private code with the same workflow</li>
          </ul>
          <a class="button-red" href="#">Sign up for Orgs</a>
          <p> or learn more about Orgs</p>
        </div>
  </section>

  <section class="NPM-description">
    <div class="text-NPM-description">
      <h2> What is npm </h2>
      <p>Use npm to install, share, and distribute code; manage dependencies in your projects; and share & receive feedback with other</p>
      <button class="button-grey"><a class="" href="#">Install npm</a>
      </div>
  </section>

  <section class="last-text">
    <div class="last-text-header">
    <h2>What can you make with 475,000 building blocks?</h2>
    <p>The npm registry hosts almost half a million packages of free, reusable code - the largest software registry in the world</p>
    </div>
  <div class="col col-3">
    <div class="last-text-box">
    <img src="binoculars.svg" alt="binoculars">
    <h3>Find</h3>
    <p>Libraries like  <span style="color: #ff0000">JQuery, Bootstrap, React</span>, and
    <span style="color: #ff0000">Angular</span>
  and components from frameworks such as <span style="color: #ff0000">Ember</span> </p>
  </div>
  </div>


  <div class="col col-3">
    <div class="last-text-box">
    <img src="mountain-flag.svg" alt="mountain">
    <h3>Discover</h3>
    <p>Packages for mobile, IoT, front end, back end, robotics… everything you need to start</p>
  </div>
    </div>

  <div class="col col-3">
    <div class="last-text-box">
    <img src="backpack.svg" alt="backpack">
    <h3>Build</h3>
    <p>Assemble packages like building blocks to quickly develop awesome new projects.</p>
  </div>
    </div>
  </section>

    </body>
  </html>
</body>
</html>