-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·135 lines (117 loc) · 4.27 KB
/
index.html
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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!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 rel="stylesheet" href="styles.css" type="text/css">
<title>npm</title>
</head>
<body >
<div id="main-containter">
<nav id="nav-bar">
<div class="top-left roboto">
<a class = "heart" href="#" style="margin-right: 20px;">♥︎</a>
<span class="acronym">Neophobe Plebeian Mumpsimus</span>
</div>
<ul class="top-links roboto">
<li><a href="#" style="padding-left: .35rem; padding-right: .35rem; ">npm Enterprise</a></li>
<li><a href="#" style="padding-left: .35rem; padding-right: .35rem; ">features</a></li>
<li><a href="#" style="padding-left: .35rem; padding-right: .35rem; ">pricing</a></li>
<li><a href="#" style="padding-left: .35rem; padding-right: .35rem; ">documentation</a></li>
<li><a href="#" style="padding-left: .35rem; padding-right: .35rem; ">support</a></li>
</ul>
</nav>
<div class="header roboto">
<div id="npm-logo" class="roboto">
<img src="images/npm-logo.png" style="width: 130px;">
<input type="text" placeholder="Find packages" style="width: 800px">
<p style="margin-top: 20px;" >Sign up or log in</p>
<img src="images/bear-logo.png" width="45px">
</div>
<div id="second-div-header">
<h1 class="heading">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>
<input type="button" value="Sign up for npm">
</div>
</div>
<div class="section-1">
<div>
<article class="section-1-image">
<img src="images/collaboration.svg">
</article>
</div>
<div class="roboto content-section-1">
<h1>
npm Orgs is powerful collaboration — for free
</h1>
<ul>
<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>
<input type="button" value="Sign up for Orgs" class="section1-button">
<br>
or,
<a href="">Learn more about Orgs</a>
</div>
</div>
<div class="section-2">
<h1 class="heading" style="margin-left: 350px;">
What is npm?
</h1>
<p>
Use npm to install, share, and distribute code; manage dependencies
in your projects; and share & receive feedback with others.
</p>
<input type="button" value="Install npm" class="section2-button">
</div>
<div class="section-3">
<div class="section3-text">
<h3>
What can you make with 700,000 building blocks?
</h3>
<p>
The npm registry hosts the world’s
largest collection of free, reusable code.
</p>
</div>
<div class="section3-logos">
<div class="individual-logo">
<img src="./images/binoculars.svg">
<div class="logos-text">
<h4>Find</h4>
<p>
Libraries like jQuery, Bootstrap, React, and Angular,
and components from frameworks such as Ember.
</p>
</div>
</div>
<div class="individual-logo">
<img src="./images/mountain-flag.svg">
<div class="logos-text">
<h4>Discover</h4>
<p>
Packages for mobile, IoT, front end, back end,
robotics… everything you need to start building amazing things.
</p>
</div>
</div>
<div class="individual-logo">
<img src="./images/backpack.svg">
<div class="logos-text">
<h4>Build</h4>
<p>
Assemble packages like building
blocks to quickly develop awesome new projects.
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>