From 9265367322adccefaed7105edefcc9b89ba9fa90 Mon Sep 17 00:00:00 2001 From: Almas Khan Date: Sat, 9 Aug 2025 18:27:48 +0200 Subject: [PATCH 1/7] starting the work --- index.html | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/index.html b/index.html index a2d9c01ab..2bfbad42c 100644 --- a/index.html +++ b/index.html @@ -7,3 +7,28 @@ 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 1c19f326b0236c29abe1feddf4e80545e4deaf27 Mon Sep 17 00:00:00 2001 From: Almas Khan Date: Sat, 9 Aug 2025 18:52:39 +0200 Subject: [PATCH 2/7] creating css --- style.css | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 style.css diff --git a/style.css b/style.css new file mode 100644 index 000000000..e69de29bb From b544734b113a983221561542f945844af0a4924a Mon Sep 17 00:00:00 2001 From: Almas Khan Date: Sat, 9 Aug 2025 20:55:58 +0200 Subject: [PATCH 3/7] structure and style --- index.html | 43 +++++++++++++++++++++++++++++++++---------- style.css | 47 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 80 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 2bfbad42c..fed071fde 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ -NPM Clone Nifty Penguin Magic npm Enterprise Products Solutions Resources Docs Support Search Join Log In Build amazing + + + + + + + NPM - Build amazing things + + + + + +
- black heart + black heart Nifty Penguin Magic
+
- +
-
- + +magnifying glass +
+ + +
+
+ Join + Log In - -
-
\ No newline at end of file + + + + + + + \ No newline at end of file diff --git a/style.css b/style.css index e69de29bb..5ad6b90a9 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,47 @@ +@import url('https://fonts.googleapis.com/css?family=Poppins'); + +body { + 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; +} + +form label { + color: rgba(0, 0, 0, 0.05); +} + +form input { + color: rgba(0, 0, 0, 0.05); +} + +form button { + background-color: #fb3e44; + color: white; +} From 745c978c6ff61abd5a5994102cf15b2d7a383c7a Mon Sep 17 00:00:00 2001 From: Almas Khan Date: Sat, 9 Aug 2025 21:44:01 +0200 Subject: [PATCH 4/7] sections --- index.html | 30 +++++++++++++++++++++-------- style.css | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 78 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index fed071fde..2437e26a5 100644 --- a/index.html +++ b/index.html @@ -36,7 +36,7 @@ - +
magnifying glass @@ -44,14 +44,28 @@ +
- 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. +

+ + +
+
+ + + + + - - - \ No newline at end of file diff --git a/style.css b/style.css index 5ad6b90a9..4a2854ad7 100644 --- a/style.css +++ b/style.css @@ -45,3 +45,59 @@ form button { background-color: #fb3e44; color: white; } +.auth-links { + display: flex; + gap: 10px; +} + +/* Common button styles */ +.auth-links .btn { + padding: 8px 16px; + cursor: pointer; + font-weight: bold; + border-radius: 4px; + font-size: 14px; + text-decoration: none; +} + +/* Join button – red background, white text */ +.auth-links .join { + background-color: #fcf8f8; + color: rgb(15, 13, 13); + border: 1px solid #121111; +} + +/* Log in button – transparent with border */ +.auth-links .login { + background: none; + color: black; + border: none; + padding: 8px 16px; +} + + +.main-section { + text-align: center; + margin: 50px auto 0; + max-width: 600px; + padding: 20px; +} + +.main-section h1 { + font-size: 2rem; + margin-bottom: 1rem; +} + +.main-section p { + font-size: 1rem; + margin-bottom: 1.5rem; + line-height: 1.5; +} + +.main-section .btn { + margin: 0 10px; + padding: 8px 16px; + border: 1px solid gray; + background-color: white; + cursor: pointer; +} From 5bb0648c4760dcbcf107a2b210bd97addce37412 Mon Sep 17 00:00:00 2001 From: Almas Khan Date: Sun, 10 Aug 2025 13:24:58 +0200 Subject: [PATCH 5/7] top & bottom header --- index.html | 53 +++++++++++++++------------- style.css | 102 +++++++++++++++++++++++++++++++++++++++-------------- 2 files changed, 104 insertions(+), 51 deletions(-) diff --git a/index.html b/index.html index 2437e26a5..5ac4063bd 100644 --- a/index.html +++ b/index.html @@ -18,38 +18,43 @@ -
-
-
+
+ +
+
black heart - Nifty Penguin Magic + Nifty Penguin Magic
- +
- -
- -magnifying glass -
- - -
- -
- - +
+ +
+ + +
+ magnifying glass + + +
+ +
+ + +
-
+
+
diff --git a/style.css b/style.css index 4a2854ad7..45ebe545e 100644 --- a/style.css +++ b/style.css @@ -4,78 +4,126 @@ body { font-family: 'Poppins'; } -header > div { +/* Header layout */ +header { padding: 0 25px; display: flex; - justify-content: space-between; - align-items: center; +flex-direction: column; + gap: 20px; border-bottom: 1px solid lightgray; + background-color: white; } -nav { - width: 600px; +/* top section layout */ +.top-header { + display: flex; + align-items: center; + gap: 20px; } +/* Nifty Penguin Magic logo */ +.logo-title { + display: flex; + align-items: center; +} + +.blackHeart { + width: 20px; + margin-right: 0.5rem; +} + +/* Nav */ nav ul { list-style: none; display: flex; - justify-content: space-between; - align-items: center; + gap: 20px; + padding: 0; + margin: 0; } nav a { text-decoration: none; color: black; + font-size: 14px; } -.blackHeart { - width: 20px; - margin-right: 1rem; +/* Right section layout */ +.bottom-header { + display: flex; + align-items: center; + gap: 16px; +} + +.npm-logo { + width: 60px; +} + +/* Search form */ +.search-form { + display: flex; + align-items: center; + background-color: #f4f4f4; + padding: 6px 10px; + border-radius: 4px; + flex-grow: 1; } -form label { - color: rgba(0, 0, 0, 0.05); +.search-icon { + width: 16px; + margin-right: 6px; + opacity: 0.5; } -form input { - color: rgba(0, 0, 0, 0.05); +.search-form input { + border: none; + background: none; + outline: none; + padding: 4px 8px; + color: black; + width: 200px; + flex: 1; } -form button { +.search-form button { background-color: #fb3e44; color: white; + border: none; + padding: 6px 12px; + border-radius: 3px; + font-weight: bold; + cursor: pointer; } + +/* Auth links */ .auth-links { display: flex; + align-items: center; gap: 10px; } -/* Common button styles */ .auth-links .btn { - padding: 8px 16px; - cursor: pointer; + font-size: 14px; + padding: 6px 14px; font-weight: bold; border-radius: 4px; - font-size: 14px; - text-decoration: none; + cursor: pointer; } -/* Join button – red background, white text */ +/* Join button – white bg, black text, border */ .auth-links .join { - background-color: #fcf8f8; - color: rgb(15, 13, 13); - border: 1px solid #121111; + background-color: white; + color: black; + border: 1px solid #888; } -/* Log in button – transparent with border */ +/* Log in button – transparent, no border */ .auth-links .login { background: none; color: black; border: none; - padding: 8px 16px; } - +/* Main section */ .main-section { text-align: center; margin: 50px auto 0; From 54931e9c8b98fcdaf801a79b0a2e0fab9a38652c Mon Sep 17 00:00:00 2001 From: Almas Khan Date: Sun, 10 Aug 2025 17:17:38 +0200 Subject: [PATCH 6/7] lab-assessment --- index.html | 16 ++++++++++++++++ style.css | 9 +++++++-- 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 5ac4063bd..817e6ceaf 100644 --- a/index.html +++ b/index.html @@ -71,6 +71,22 @@

Build amazing things

+
+

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

+ +
+ +
+

Get more out of the tools your team already knows and loves

+

+ Create an Org and get more out of the tools your team already knows and loves. +

+ +
\ No newline at end of file diff --git a/style.css b/style.css index 45ebe545e..48466e7bf 100644 --- a/style.css +++ b/style.css @@ -17,6 +17,7 @@ flex-direction: column; /* top section layout */ .top-header { display: flex; +justify-content: space-between; align-items: center; gap: 20px; } @@ -25,6 +26,7 @@ flex-direction: column; .logo-title { display: flex; align-items: center; + } .blackHeart { @@ -47,7 +49,7 @@ nav a { font-size: 14px; } -/* Right section layout */ +/* bottom section layout */ .bottom-header { display: flex; align-items: center; @@ -122,18 +124,21 @@ nav a { color: black; border: none; } - +/*Section */ /* Main section */ .main-section { text-align: center; margin: 50px auto 0; max-width: 600px; padding: 20px; + background-color: rgb(248, 246, 243); } .main-section h1 { font-size: 2rem; margin-bottom: 1rem; + + } .main-section p { From c65d703dac5eb5af033dc6907bd1dbd79e566e9c Mon Sep 17 00:00:00 2001 From: Almas Khan Date: Sun, 10 Aug 2025 20:50:37 +0200 Subject: [PATCH 7/7] npm clone --- index.html | 58 ++++++++++++++++++++++++++++------- style.css | 88 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 132 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index 817e6ceaf..454ff1c7f 100644 --- a/index.html +++ b/index.html @@ -63,30 +63,66 @@

Build amazing things

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

- - + +
- + +
+
+ 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. + Your company depends on it. Create an Org and get more out of the tools your team already knows and loves.

- +
-

Get more out of the tools your team already knows and loves

-

- Create an Org and get more out of the tools your team already knows and loves. -

- -
+
+ zero configuration icon +

Zero configuration

+

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

+
+ +
+ team management icon +

Team management

+

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

+
+
+ familiar features icon +

Familiar features

+

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

+
+ +
+npm audit icon +

npm audit

+

+ Enjoy the security 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 48466e7bf..fe0205e44 100644 --- a/style.css +++ b/style.css @@ -127,17 +127,19 @@ nav a { /*Section */ /* Main section */ .main-section { + text-align: center; margin: 50px auto 0; max-width: 600px; - padding: 20px; - background-color: rgb(248, 246, 243); + padding: 50px; + background-color: rgb(248, 243, 247); + flex-grow: 1; } .main-section h1 { font-size: 2rem; margin-bottom: 1rem; - + ; } @@ -154,3 +156,83 @@ nav a { background-color: white; cursor: pointer; } +.main-section .plans { + background-color: rgb(246, 14, 14); + color: white; +} +.hexa { + width: 200px; + height: 200px; +} +.center-wrapper { + display: flex; + justify-content: center; + align-items: center; + margin-top: 20px; +} +.section2 { + display: flex; + flex-direction: column; + align-items: center; + padding: 20px; + text-align: center; +} +.section2 h2 { +background-color: rgb(246, 240, 158); + padding: 0; + width: 50%; + border-radius: 5px; + margin: 0 0 1.5rem 0; + +} +.section2 p{ + font-size: 1rem; + margin: 0 auto 1rem; + line-height: 1.5; + max-width: 600px; + +} +.section3 { + display: flex; + justify-content: space-between; + gap: 2rem; + padding: 40px; + flex-wrap: wrap; /* for responsiveness */ + text-align: center; +} + +.section3 div { + flex: 1 1 200px; /* grow, shrink, base width */ + max-width: 220px; + padding: 1rem; +} + + +.section3 img { + width: 50px; + height: auto; + margin-bottom: 1rem; +} +.section3 h3 { + font-size: 1rem; + color: crimson; + margin-bottom: 0.5rem; +} + +.section3 p { + font-size: 0.9rem; + color: #444; + line-height: 1.4; +} + +.footer { + text-align: center; +} +.footer .btn-org { + background-color: black; + color: white; + padding: 10px; + border: none; + width: 20%; +box-shadow: 6px 6px 0 #e8dfd7; +} \ No newline at end of file