-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
140 lines (139 loc) · 5.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
136
137
138
139
140
<!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">
<title>npm</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- Start Nav Menu -->
<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>
<!-- End Nav Menu -->
<!-- Start Header -->
<header class="header clearfix">
<!-- Start Header TOP -->
<div class="header-top-container clearfix">
<div class="header-logo-div">
<img src="./images/npm-logo.png" alt="npm-logo" class="npm-logo">
</div>
<div class="header-search-bar-div">
<form action="" class="search-form">
<input type="search" class="search-input" placeholder="find packages">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<div class="header-login-div">
<span class="login-span">
<a href="#" class="signup-a">Sign up</a>
or
<a href="#" class="login-a">login</a>
</span>
<img src="./images/bear-logo.png" alt="bear-logo" class="bear-logo">
</div>
</div>
<!-- End Header TOP -->
<!-- Start Header CONTENT -->
<div class="header-content clearfix">
<aside class="header-text">
<h2 class="header-text-title">Build amazing things</h2>
<p class="header-text-p">
npm is the package manager fo JavaScript and the world's largest<br>
software registry. Discover packages of reusable code — and<br>
assemble them in powerful new ways.
</p>
<button class="header-signup-button">Sign up for npm</button>
</aside>
</div>
<!-- END Header CONTENT -->
</header>
<!-- End Header -->
<!-- Start section collaboration -->
<section class="section-collaboration clearfix">
<div class="collaboration-offset-div"></div>
<div class="collaboration-image-div">
<img class="collaboration-img" src="./images/collaboration.svg" alt="div-collaboration-image">
</div>
<div class="collaboration-text-div clearfix">
<div class="collaboration-text-container">
<h2 class="collaboration-title">
npm Orgs is powerful<br>
collaboration — for free
</h2>
<ul class="collaboration-points">
<li>Encourage code discovery and re-usewithin teams</li>
<li>Publish and control access to your own namespace</li>
<li>Manage public and private code with the same workflow</li>
</ul>
<button class="collaboration-signup-button">Sign up for Orgs</button>
<p><a href="#">or Learn more about Orgs</a></p>
</div>
</div>
</section>
<!-- End section collaboration -->
<!-- Start section WhatIs -->
<section class="what-is clearfix">
<div class="whatis-text-div">
<h2 class="whatis-title">
What is npm?
</h2>
<p class="watis-text-p">
Use npm to install, share, and distribuite code;<br>
manage dependencies in your projects; and<br>
share & receive feedback with others.
</p>
<button class="whatis-install-button">Install npm</button>
</div>
</section>
<!-- End section WhatIs -->
<!-- Start section WhatMake -->
<section class="what-make">
<div class="header-what-make-div">
<h3>What can you make with 475,000 building blocks?</h3>
<p>The npm hosts almost half a million of free, reusable code
- the largest software registry in the world.</p>
</div>
<div class="logos-what-make-div">
<div class="logo1-what-make-div col-1-3">
<img class = "binoculars-img" src="./images/binoculars.svg" alt="binoculars">
<p class="p-description">Find</p>
<p>Libraries like <a href="">jQuery</a>, <a href="">Bootstrap</a>,<br>
<a href="">React</a>, and <a href="">Angular</a> and<br>
components from frameworks such<br>
as <a href="">Ember</a>.</p>
</div>
<div class="logo2-what-make-div col-1-3">
<img class = "mountain-img" src="./images/mountain-flag.svg" alt="mountain-flag">
<p class="p-description">Discover</p>
<p>Packages for mobile, IoT, front end,<br>
back end, robotics... everything you<br>
need to start building amazing<br>
things.
</p>
</div>
<div class="logo3-what-make-div col-1-3">
<img class = "backpack-img" src="./images/backpack.svg" alt="backpack">
<p class="p-description">Build</p>
<p>Assemble packages like building<br>
blocks to quickly develop awesome<br>
new projects.</p>
</div>
</div>
</section>
<!-- End section WhatMake -->
</body>
</html>