From 4d6bce5ba65482cac0af263952b7eee546d7fd13 Mon Sep 17 00:00:00 2001 From: Martina Ziza Date: Wed, 8 Oct 2025 11:44:11 +0200 Subject: [PATCH 1/5] add header + nav html structure --- index.html | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/index.html b/index.html index a2d9c01ab..84c7b4c92 100644 --- a/index.html +++ b/index.html @@ -7,3 +7,26 @@ what modules within your team namespace using straightforward team management capabilities. Familiar features npm Orgs has 100% parity with all the public npm registry features your developers already use. npm audit Enjoy the security auditing features built into the npm client, a zero-friction way to make open source software safer. Create an Org + +
+
+
+ black heart + Nifty Penguin Magic +
+ +
+ +
+ +
+
\ No newline at end of file From 87c0d5d5b431c174c591bcadefaf97433ecdae76 Mon Sep 17 00:00:00 2001 From: Martina Ziza Date: Wed, 8 Oct 2025 13:40:55 +0200 Subject: [PATCH 2/5] add rest of html structure --- index.html | 73 ++++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 62 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 84c7b4c92..9e3ed4693 100644 --- a/index.html +++ b/index.html @@ -1,17 +1,9 @@ -NPM Clone Nifty Penguin Magic npm Enterprise Products Solutions Resources Docs Support Search Join Log In Build amazing -things Essential JavaScript development tools that help you go to market faster and build powerful applications using -modern open source code. See plans Join for free Bring the best of open source to your company 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. Zero configuration Create an org, add -your team, and start collaborating. Nothing to configure, set up, or manage. Team management Control who has access to -what modules within your team namespace using straightforward team management capabilities. Familiar features npm Orgs -has 100% parity with all the public npm registry features your developers already use. npm audit Enjoy the security -auditing features built into the npm client, a zero-friction way to make open source software safer. Create an Org +NPM Clone
- black heart + black heart Nifty Penguin Magic
\ No newline at end of file + +
+

Build amazing things

+
+Essential JavaScript development tools that help you go to market faster and build powerful applications using +modern open source code. +
+
+ See plans + Join for free +
+
+ +
+ triangle-hexagon +

Bring the best of open source to your company

+
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.
+
+ +
+
+ mouse arrow clicking a square +

Zero configuration

+

Create an org, add +your team, and start collaborating. Nothing to configure, set up, or manage.

+
+ +
+ # +

Team management

+

Control who has access to +what modules within your team namespace using straightforward team management capabilities.

+
+ +
+ # +

Familiar features

+

npm Orgs +has 100% parity with all the public npm registry features your developers already use.

+
+ +
+ binoculars +

npm audit

+

Enjoy the security +auditing features built into the npm client, a zero-friction way to make open source software safer.

+
+ Create an Org +
\ No newline at end of file From 3a319f7979706758e034db73df85cfd50e126720 Mon Sep 17 00:00:00 2001 From: Martina Ziza Date: Wed, 8 Oct 2025 15:11:14 +0200 Subject: [PATCH 3/5] add rest of html structure and css style sheet --- index.html | 13 ++++++++++--- style.css | 5 +++++ 2 files changed, 15 insertions(+), 3 deletions(-) create mode 100644 style.css diff --git a/index.html b/index.html index 9e3ed4693..47ff56334 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,11 @@ -NPM Clone - + + + + NPM Clone + + + +
@@ -80,4 +86,5 @@

npm audit

auditing features built into the npm client, a zero-friction way to make open source software safer.

Create an Org - \ No newline at end of file + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 000000000..ec2c2dcf8 --- /dev/null +++ b/style.css @@ -0,0 +1,5 @@ +@import url('https://fonts.googleapis.com/css?family=Poppins'); + +body { + +} \ No newline at end of file From c361f166c22931fb9d3feb090efc8ae659b54dfa Mon Sep 17 00:00:00 2001 From: Martina Ziza Date: Wed, 8 Oct 2025 17:34:14 +0200 Subject: [PATCH 4/5] add css --- index.html | 63 ++++++++++-------- style.css | 184 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 221 insertions(+), 26 deletions(-) diff --git a/index.html b/index.html index 47ff56334..22c5cc945 100644 --- a/index.html +++ b/index.html @@ -33,58 +33,71 @@ - Join - Log In +
+ Join + Log In +
-
+ +

Build amazing things

-Essential JavaScript development tools that help you go to market faster and build powerful applications using +Essential JavaScript development tools that help you
go to market faster and build powerful applications
using modern open source code.
-
-
- triangle-hexagon +
+ triangle-hexagon

Bring the best of open source to your company

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.
+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.
-
-
+
+
+
mouse arrow clicking a square

Zero configuration

Create an org, add -your team, and start collaborating. Nothing to configure, set up, or manage.

-
+your team,
and start collaborating.
Nothing to configure, set up, or
manage.

+
-
+
#

Team management

-

Control who has access to -what modules within your team namespace using straightforward team management capabilities.

-
+

Control who has access to
+what modules within your
team namespace using
straightforward team
management capabilities.

+
-
+
#

Familiar features

npm Orgs -has 100% parity with all the public npm registry features your developers already use.

-
+has 100% parity with
all the public npm registry
features your developers
already use.

+
-
+
binoculars

npm audit

Enjoy the security -auditing features built into the npm client, a zero-friction way to make open source software safer.

-
- Create an Org +auditing
features built into the npm
client, a zero-friction way to
make open source software
safer.

+
+
+ +
\ No newline at end of file diff --git a/style.css b/style.css index ec2c2dcf8..1af6eb369 100644 --- a/style.css +++ b/style.css @@ -1,5 +1,187 @@ @import url('https://fonts.googleapis.com/css?family=Poppins'); body { + margin: 0; + padding: 0; + font-family: Poppins; +} + +header > div { + padding: 0 25px; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid lightgray; +} + +nav { + width: 600px; +} + +nav ul { + list-style: none; + display: flex; + justify-content: space-between; + align-items: center; +} + +nav a { + text-decoration: none; + color: black; +} + +.blackHeart { + width: 20px; + margin-right: 1rem; +} + +.logo { + width: 90px; + padding: 5 px; + margin: 5px; + +} + +.magnifying-glass { + width: 20px; + padding: 10px; +} + +form { + margin: 0 80px; + padding: 10px; + display: flex; + flex-direction: row; + align-items: center; +} + +div > form > label { + background-color: rgba(0,0,0,.05); + +} + +div > form > input { + background-color: rgba(0,0,0,.05); + padding: 0.5rem; + border: none; + + +} + +form > button { + background-color: #fb3e44; + color: white; + border: none; + padding: 0.5rem; +} + +a { + text-decoration: none; + color: black; +} + +#build { + height: 600px; + background-color: rgba(232,217,217,.3); + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; +} + +h1 { + font-size: 100px; + margin-top: 10px 0; + padding: 10px 0; +} + +article { + text-align: center; +} + +.plans-link { + font-size: 16px; + background-color: #FB3B49; + border: none; + padding: 10px 20px; + margin: 0 10px; + color: white; + box-shadow: 8px 8px 0 rgba(251,59,73,.2); +} + +.join-free { + font-size: 16px; + background-color: white; + border: none; + padding: 10px 20px; + margin: 0 10px; +} + +.build-buttons { + margin: 20px; +} + +#open-source { + height: 600px; + margin: 55px 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.triangle-hexagon { + width: 200px; +} +#open-source h3{ + background-color: rgba(255,204,53,.4); + transform: skew(9deg,0deg); + font-style: italic +} + + + +.content { + padding: 10px 35px; + display: flex; + flex-direction: column; +} + +.container { + display: flex; + flex-direction: row; + justify-content: center; + +} + +.features { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.features img { + width: 20px; +} + +.features h3 { + color: #ED1C24; +} + +.features a { + color: white; +} + +.features button { + width: 10%; + background-color: black; + border: none; + box-shadow: 8px 8px 0 rgba(128,83,35,.2); + padding: 10px 30px; + margin: 50px; + +} + + + -} \ No newline at end of file From d35d3c86c03e58d8f449b51c08e79989f01d16b5 Mon Sep 17 00:00:00 2001 From: Martina Ziza Date: Wed, 8 Oct 2025 21:48:03 +0200 Subject: [PATCH 5/5] change margin and paddings to better match original and adjusted search bar form --- index.html | 13 ++++++------- style.css | 41 ++++++++++++++++++++++++++--------------- 2 files changed, 32 insertions(+), 22 deletions(-) diff --git a/index.html b/index.html index 22c5cc945..c37080d25 100644 --- a/index.html +++ b/index.html @@ -28,14 +28,13 @@
- magnifying glass - +
- Join - Log In + Join + Log In
@@ -59,9 +58,9 @@

Build amazing things

triangle-hexagon -

Bring the best of open source to your company

-
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. +

Bring the best of open source to your company

+
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.
diff --git a/style.css b/style.css index 1af6eb369..55b150016 100644 --- a/style.css +++ b/style.css @@ -37,8 +37,6 @@ nav a { .logo { width: 90px; - padding: 5 px; - margin: 5px; } @@ -48,7 +46,6 @@ nav a { } form { - margin: 0 80px; padding: 10px; display: flex; flex-direction: row; @@ -57,13 +54,18 @@ form { div > form > label { background-color: rgba(0,0,0,.05); + border-color: black; } +/*affects only the search bar>*/ div > form > input { background-color: rgba(0,0,0,.05); - padding: 0.5rem; + padding: 15.5px; border: none; + width: 1100px; + + } @@ -72,7 +74,7 @@ form > button { background-color: #fb3e44; color: white; border: none; - padding: 0.5rem; + padding: 15px; } a { @@ -80,6 +82,10 @@ a { color: black; } +.join-link { + padding: 5px; +} + #build { height: 600px; background-color: rgba(232,217,217,.3); @@ -91,12 +97,13 @@ a { h1 { font-size: 100px; - margin-top: 10px 0; + margin: 10px 0 10px 0; padding: 10px 0; } article { text-align: center; + margin: 15px 0 35px 0; } .plans-link { @@ -106,7 +113,8 @@ article { padding: 10px 20px; margin: 0 10px; color: white; - box-shadow: 8px 8px 0 rgba(251,59,73,.2); + box-shadow: 8px 8px 0 rgba(251,59,73,.2); + /*box-shadow: 8px 8px 0 rgba(251,59,73,.2);*/ } .join-free { @@ -114,15 +122,14 @@ article { background-color: white; border: none; padding: 10px 20px; - margin: 0 10px; } .build-buttons { - margin: 20px; + margin: 30px 0 0 0; } #open-source { - height: 600px; + height: 450px; margin: 55px 0; display: flex; flex-direction: column; @@ -132,15 +139,18 @@ article { .triangle-hexagon { width: 200px; + margin: 0 0 10px 0; + } -#open-source h3{ +#open-source h2{ background-color: rgba(255,204,53,.4); transform: skew(9deg,0deg); - font-style: italic + font-style: italic; + margin: 35px 0 15px 0; + } - .content { padding: 10px 35px; display: flex; @@ -173,13 +183,14 @@ article { } .features button { - width: 10%; + width: 20%; background-color: black; border: none; box-shadow: 8px 8px 0 rgba(128,83,35,.2); padding: 10px 30px; margin: 50px; - + font-weight: 700; + font-size: 14px; }