forked from ironhack-labs/lab-html-exercise
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
108 lines (95 loc) · 3.83 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lab-exercise</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div>
<div>
<img class="blackHeart" src="images/black-heart.png" alt="black heart" />
<span> Neverending Pun Machine </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="form-div">
<!-- add search bar -->
<img id="npm-logo"src="images/npm-logo.png" alt="npm logo">
<div class="search-bar">
<img id="glass-logo" src="images/magnifying-glass.png" alt="magnifying-glass-icon">
<form action="/search" method="get">
<input type="text" name="search" placeholder="Search packages ">
<button type="submit">Search</button>
</form>
</div>
<a href="#" id="join-link">Join</a>
<a href="#" id="log-in_link">Log in</a>
</div>
</header>
<section id="main-section">
<h1> Build amazing things</h1>
<p>
Essential JavaScript development toold that help you go to market
faster and build powerful aplications using modern open source code.
</p>
<div class="buttons-div">
<a class="plans-button" href="#">See plans</a>
<a class="join-button" href="#">Join for free</a>
</div>
</section>
<section id="description-section">
<img src="images/triangle-hexagon.svg" alt="triangle hexagon image">
<h2>Bring the best of open source to your company</h2>
<p>npm is the tool used by over 11,000,000 JavaScript developers around ther world.
Your developers already use it.
Your company depends on it. Create and Org and get more out of the tools
your team alredy knows and loves.
</p>
</section>
<section id="features-section">
<div class="main-div_features">
<div>
<img src="images/zero-configuration.svg" alt="zero configuration icon">
<h3>Zero configuration</h3>
<p>Create an org, add your team, and start collaborating.
Nothing to configure, set up, or manage.
</p>
</div>
<div>
<img src="images/team-management.svg" alt="team managment icon">
<h3>Team managment</h3>
<p>Control who has acces to what modules within your team namespace
using straightforward team managment capabilities.
</p>
</div>
<div>
<img src="images/familiar-features.svg" alt="familiar features icon">
<h3>Familiar features</h3>
<p>npm Orgs has 100% parity with all the public npm registry
features your developers alredy use.
</p>
</div>
<div>
<img src="images/npm-audit.svg" alt="npm audit icon">
<h3>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>
</div>
<a class="last-button" href="#">Create an Org</a>
</section>
</body>
</html>