forked from ironhack-labs/lab-html-exercise
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
148 lines (102 loc) · 11.1 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
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>NPM Lab Assignment</title>
<link rel="stylesheet" href="style.css">
</head>
<!-- header -->
<header>
<div>
<div>
<img class="blackHeart" src="https://i.ibb.co/wMzFM8M/black-heart.png" alt="black heart logo" />
<span class="nav-bar-left"> Neverending Pun Machine </span>
</div>
<!-- nav bar -->
<nav class="nav-bar-right">
<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="second-header">
<div class="justify-searchbar">
<div id="npm-div" class="search-container">
<img class="npm" src="https://i.ibb.co/bR369FP/npm-logo.png" alt="npm logo"/>
</div>
<div id="search-div" class="search-container">
<img class="magnifying-glass" src="https://i.ibb.co/PNFjf02/magnifying-glass.png" alt="search bar logo"/>
<form action="/form/submit" method="GET">
<input type="text" name="text" class="search" placeholder="Search packages">
<input type="submit" name="submit" class="submit" value="Search">
</form>
</div>
</div>
<div id="Sign-In" class="search-container">
<a class="Join" href="#">Join</a>
<a class="Log-In" href="#">Log In</a>
</div>
</div>
</header>
<!-- section 1 -->
<section id="section-1">
<div class="sec1-container">
<div class="sec1-div">
<h1>Build amazing things</h1>
<article class="sec1-article">
<p>Essential JavaScript development tools that help you go to market faster and build powerful applications using modern open source code.</p></article>
</div>
<div class="sec1-div">
<a class="See-Plans" href="#">See Plans</a>
<a class="free" href="#">Join for free</a>
</div>
</div>
</section>
<!-- section 2 -->
<section>
<div class="hexagon-div">
<svg class="triangle-hexagon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100.79 90.68"><defs><style>.cls-1{isolation:isolate;}.cls-2{opacity:0.8;mix-blend-mode:luminosity;}.cls-3,.cls-4,.cls-5,.cls-6{stroke:#c18752;stroke-linejoin:round;stroke-width:0.27px;}.cls-3,.cls-6{opacity:0.3;}.cls-3{fill:url(#Orange_2);}.cls-4,.cls-5{opacity:0.2;}.cls-4{fill:url(#Orange_2-2);}.cls-5{fill:url(#Orange_2-3);}.cls-6{fill:url(#Orange_2-4);}</style><linearGradient id="Orange_2" x1="-1973.93" y1="-513.04" x2="-1932.27" y2="-513.04" gradientTransform="translate(1966.33 -514.02) rotate(-30.81)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e3bca9"/><stop offset="0.5" stop-color="#d8a089"/><stop offset="1" stop-color="#cf8c72"/></linearGradient><linearGradient id="Orange_2-2" x1="-1973.59" y1="-528.66" x2="-1890.35" y2="-528.66" xlink:href="#Orange_2"/><linearGradient id="Orange_2-3" x1="-1973.59" y1="-473.16" x2="-1890.35" y2="-473.16" xlink:href="#Orange_2"/><linearGradient id="Orange_2-4" x1="-1931.88" y1="-488.65" x2="-1890.22" y2="-488.65" xlink:href="#Orange_2"/></defs><title>best-open</title><g class="cls-1"><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><g class="cls-2"><polygon class="cls-3" points="52.05 48.55 28.59 90.54 0.14 42.84 23.6 0.85 52.05 48.55"/><polygon class="cls-4" points="48.58 42.09 0.48 42.77 23.89 0.82 71.98 0.14 48.58 42.09"/><polygon class="cls-5" points="77.01 89.76 28.91 90.44 52.31 48.48 100.41 47.81 77.01 89.76"/><polygon class="cls-6" points="100.65 47.96 77.19 89.95 48.74 42.25 72.2 0.26 100.65 47.96"/></g></g></g></g></svg>
<div class="relative-container">
<div class="parallelogram">
</div>
</div>
<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 the world. Your developers already use it. Your company depends on it.
Create an Org and get more out of the tools your team already knows and loves.</p>
</div>
</section>
<!-- section 3 -->
<section>
<div class="sec3-containers">
<article class="container">
<svg class="zero-configuration" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.99 21.21"><title>zero-configuration</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><path d="M23,19.36l-3.79-4.59L22.58,14a.55.55,0,0,0,.43-.5.54.54,0,0,0-.33-.56L13.47,8.84a.56.56,0,0,0-.59.08.59.59,0,0,0-.19.56L15,19.3a.59.59,0,0,0,.5.44A.57.57,0,0,0,16,19.4l1.41-3.19,3.79,4.59A1.13,1.13,0,0,0,23,19.36Z"/><path d="M2.14,11.32A2.14,2.14,0,0,1,0,9.18v-7A2.14,2.14,0,0,1,2.14,0H23.85A2.14,2.14,0,0,1,26,2.14v7a2.14,2.14,0,0,1-1.66,2.09l-2.11-.71h1.63a1.38,1.38,0,0,0,1.38-1.38v-7A1.38,1.38,0,0,0,23.85.76H2.14A1.38,1.38,0,0,0,.76,2.14v7a1.38,1.38,0,0,0,1.38,1.38h8.55l.26.76Z"/></g></g></svg>
<h3>Zero Configuration</h3>
<p class="text">Create an org, add your team, and start collaborating. Nothing to configure, set up, or manage.</p>
</article>
<article class="conatiner">
<svg class="team-management" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.4 27.38"><title>team-management</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><path d="M14.75,5.21c-3.45,0-3.36-5.4.11-5.2C18.14.19,18,5.21,14.75,5.21Zm-.06-.89h.25l.22,0,.2-.06A1.68,1.68,0,0,0,15.73,4h0a2.73,2.73,0,0,0,.35-.33,1.87,1.87,0,0,0,.33-.75,1.88,1.88,0,0,0,0-.58h0a2.42,2.42,0,0,0-.1-.36,2.82,2.82,0,0,0-.21-.38L16,1.5a2.85,2.85,0,0,0-.25-.25A2,2,0,0,0,15.4,1,1.7,1.7,0,0,0,14.81.9h-.27l-.06.22,0-.22a1.78,1.78,0,0,0-.54.17,2.26,2.26,0,0,0-.26.16,1.38,1.38,0,0,0-.3.29l.11.2-.13-.18a1.83,1.83,0,0,0-.23.38,2,2,0,0,0-.12.42,2,2,0,0,0,0,.49,2,2,0,0,0,.11.42,2.64,2.64,0,0,0,.2.37l.08.09a2.21,2.21,0,0,0,.26.24,1.8,1.8,0,0,0,.35.21l.05,0h0A1.38,1.38,0,0,0,14.69,4.32Z"/><path d="M11.73,10.05c-1.69,0-1.49-2.32-1.32-3.49a3.07,3.07,0,0,1,1.18-2c.69-.48,1.28.31.57.7a2.6,2.6,0,0,0-.38.36l.12.1v.1l-.14-.16a2.28,2.28,0,0,0-.44,1l0,.2c0,.65,0,1.3,0,1.94l0,.13h0l0,0h0l.09.11.08,0,0-.11.1-.08,0,.21.13,0h6.08l.13,0,.08,0h0l.05,0L18.08,9l0,0h0l0-.07,0-.12a20,20,0,0,0,0-2h0A4.74,4.74,0,0,0,18,6.15a3.17,3.17,0,0,0-.27-.47l-.14.1.09-.17c-.18-.22-.68-.49-.74-.77-.12-.55.41-.6.77-.42a3.15,3.15,0,0,1,1.35,2.81c0,1.24.16,2.71-1.45,2.82C15.67,10.19,13.68,10.05,11.73,10.05Z"/><path d="M4.45,22.48c-3.46,0-3.36-5.41.11-5.21C7.84,17.45,7.7,22.48,4.45,22.48Zm0-.9h.24a2.17,2.17,0,0,0,.42-.11,2,2,0,0,0,.72-.54,1.7,1.7,0,0,0,.33-1.33h0a2.42,2.42,0,0,0-.1-.36,2.82,2.82,0,0,0-.21-.38l-.08-.09a2.85,2.85,0,0,0-.25-.25,2,2,0,0,0-.37-.21,2,2,0,0,0-.42-.12l-.17,0H4.23l-.05.22,0-.22a1.7,1.7,0,0,0-.54.17,2.26,2.26,0,0,0-.26.16,2.13,2.13,0,0,0-.31.29l.12.2-.13-.18a2.14,2.14,0,0,0-.23.38,2,2,0,0,0-.12.42,2.68,2.68,0,0,0,0,.49,2.9,2.9,0,0,0,.12.42,2.08,2.08,0,0,0,.2.36l0,0v0h0l0,.05.25.25a2.38,2.38,0,0,0,.41.23h0a2.54,2.54,0,0,0,.37.1H4.4Z"/><path d="M1.43,27.31C-.26,27.31-.06,25,.11,23.82a3,3,0,0,1,1.18-2c.69-.48,1.28.32.57.7a2.22,2.22,0,0,0-.38.37l.12.09V23l-.14-.16a2.55,2.55,0,0,0-.3.5,4.28,4.28,0,0,0-.15.51l0,.21V26l0,.14H1l.12.15,0,0v0l.11,0H7.45l.14,0,.11-.05.08-.07,0-.05h0l0-.07,0-.12a20,20,0,0,0,0-2.05h0a2.73,2.73,0,0,0-.15-.56,2.42,2.42,0,0,0-.26-.47L7.3,23l.11-.14c-.18-.22-.7-.51-.76-.8-.14-.67.55-.57.89-.33a3.14,3.14,0,0,1,1.22,2.52c.06,1.26.23,2.9-1.42,3C5.39,27.46,3.38,27.31,1.43,27.31Z"/><path d="M25.05,22.48c-3.45,0-3.36-5.41.11-5.21C28.44,17.45,28.3,22.48,25.05,22.48Zm-.05-.9h.24a2.17,2.17,0,0,0,.42-.11l.2-.1.18-.11h0a3.51,3.51,0,0,0,.34-.33,1.88,1.88,0,0,0,.21-.36h0a2.78,2.78,0,0,0,.12-.38l-.17,0h.18l-.1,0,.1,0a1.6,1.6,0,0,0,0-.49h0a2.12,2.12,0,0,0-.1-.36,2.82,2.82,0,0,0-.21-.38l-.08-.1-.25-.24a2,2,0,0,0-.37-.21,2,2,0,0,0-.42-.12l-.17,0h-.27l-.06.22,0-.22a1.78,1.78,0,0,0-.54.17,2.26,2.26,0,0,0-.26.16,2.06,2.06,0,0,0-.3.29l.11.2-.13-.18a2.14,2.14,0,0,0-.23.38,1.67,1.67,0,0,0-.12.91,2,2,0,0,0,.11.42,1.75,1.75,0,0,0,.29.47l.25.24a2,2,0,0,0,.35.2l.05,0h0a2.09,2.09,0,0,0,.43.11H25Z"/><path d="M22,27.31c-1.69,0-1.49-2.32-1.32-3.49a3.07,3.07,0,0,1,1.18-2c.69-.48,1.28.32.57.7a2.65,2.65,0,0,0-.38.37l.12.09V23l-.14-.16a3.1,3.1,0,0,0-.29.5,2.29,2.29,0,0,0-.15.51l0,.21V26l0,.14h0l.11.15,0,0v0l.11,0h6.19l.14,0,.12-.05.07-.07,0-.05h0l0-.07,0-.12a20,20,0,0,0,0-2.05h0a5.12,5.12,0,0,0-.15-.56,4.31,4.31,0,0,0-.26-.47l-.15.1L28,22.9c-.19-.22-.71-.51-.77-.8-.14-.67.55-.56.9-.33a3.17,3.17,0,0,1,1.22,2.52c.05,1.26.22,2.9-1.43,3C26,27.46,24,27.31,22,27.31Z"/><path d="M14.74,17.46c-.79,0-.45-2.4-.45-2.84s-.33-2.85.45-2.83.45,2.29.45,2.74S15.53,17.46,14.74,17.46Z"/><path d="M10.6,19.84c-.78,0-.34-.73,0-1s.95-.55,1.42-.82l1.71-1c.24-.14.69-.53,1-.51.74.05.38.69,0,.94a13.26,13.26,0,0,1-1.37.8l-1.79,1c-.26.15-.68.51-1,.51Z"/><path d="M18.87,19.84c-.33,0-.74-.36-1-.51l-1.71-1c-.47-.27-1-.51-1.42-.82s-.76-.92,0-1c.29,0,.71.34.93.47l1.69,1c.5.28,1,.54,1.51.86S19.67,19.84,18.87,19.84Z"/></g></g></svg>
<h3>Team management</h3>
<p class="text">Control who has access to what modules within your team namespace using straightforward team management capabilities.</p>
</article>
<article class="conatiner">
<svg class="familiar-features" fexmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.59 22.75"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;}</style></defs><title>feature-parity</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><path class="cls-1" d="M29.59,16.62H0"/><rect x="0.31" width="11.93" height="6.88" rx="2.42"/><rect x="0.31" y="8" width="11.93" height="6.88" rx="2.42"/><rect x="16.35" width="11.93" height="6.88" rx="2.42"/><rect x="16.35" y="8" width="11.93" height="6.88" rx="2.42"/><polyline points="14.47 19.04 15.9 21.37 16.75 22.75 12.2 22.75 14.48 19.04"/></g></g></svg>
<h3>Familiar features</h3>
<p class="text">npm Orgs
has 100% parity with all the public npm registry features your developers already use.</p>
</article>
<article class="conatiner">
<svg class="npm-audit" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26.98 21.26"><defs><style>.cls-1{fill-rule:evenodd;}</style></defs><title>npm-audit</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><path d="M0,15.53V5.81a5.82,5.82,0,0,1,11.63-.08h3.81A5.77,5.77,0,1,1,27,5.81v9.72a5.77,5.77,0,0,1-11.54,0V11.89H11.63v3.64A5.82,5.82,0,0,1,0,15.53Zm16.74-.09A4.52,4.52,0,0,0,21.17,20a4.38,4.38,0,0,0,4.42-4.42,4.11,4.11,0,0,0-1.3-3.12,4.38,4.38,0,0,0-6.24,0,4.62,4.62,0,0,0-1.31,3Zm-15.35,0a4.43,4.43,0,1,0,8.85.09,4.15,4.15,0,0,0-1.3-3.12,4.39,4.39,0,0,0-6.25,0,4.25,4.25,0,0,0-1.3,3Z"/><path class="cls-1" d="M6.94,12.06c1.82.78,3.21,2.69,1.82,4.51Z"/><path class="cls-1" d="M22.56,12.06c1.82.78,3.21,2.69,1.82,4.51Z"/></g></g></svg>
<h3>npm audit</h3>
<p class="text">Enjoy the security auditing features built into the npm client, a zero-friction way to make open source software safer.</p>
</article>
</div>
<div class="justify-org">
<a class="org" href="#">Create an Org</a></div>
</section>
<body>