From 576f895da755299f63a9641131a763942de51522 Mon Sep 17 00:00:00 2001 From: Joko Priyono Date: Fri, 20 Jun 2025 18:17:04 +0700 Subject: [PATCH 1/2] feat: add html skeleton without styles --- index.html | 93 ++++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 84 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index a2d9c01..d6065c0 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,84 @@ -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 + Nifty Penguin Magic +
+ +
+
+
+ npm logo +
+
+
+ + +
+
+
+ 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 +
+
+ +
+ 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.

+
+ +
+
+
+ Zero configuration +

Zero configuration

+

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

+
+
+ Team management +

Team management

+

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

+
+
+ Familiar features +

Familiar features

+

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

+
+
+ npm audit +

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 +
+ + From ab839ac56631e73bb82ebfe32c39a1feb6d36e2e Mon Sep 17 00:00:00 2001 From: Joko Priyono Date: Fri, 20 Jun 2025 18:30:25 +0700 Subject: [PATCH 2/2] feat: add styles following to the instructions --- index.html | 153 ++++++++++++++++++++++++----------------- style.css | 197 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 286 insertions(+), 64 deletions(-) create mode 100644 style.css diff --git a/index.html b/index.html index d6065c0..95f84e2 100644 --- a/index.html +++ b/index.html @@ -1,84 +1,109 @@ - - - - NPM Clone - - + + + + Fundamentals: Assignment 2 + + +
+
-
- black heart - Nifty Penguin Magic -
- + black heart + Neverending Pun Machine
+ +
+
-
- npm logo -
-
-
- - -
-
-
- Join - Log In -
+ npm logo
+
+
+ + +
+
+
+ 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 -
+

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.

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

+
+
+ Zero configuration +

Zero configuration

+

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

+
+
+ Team management +

Team management

+

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

+
+
+ Familiar features +

Familiar features

+

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

+
-
- Zero configuration -

Zero configuration

-

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

-
-
- Team management -

Team management

-

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

-
-
- Familiar features -

Familiar features

-

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

-
-
- npm audit -

npm audit

-

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

-
+ npm audit +

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 +
+ Create an Org
- + diff --git a/style.css b/style.css new file mode 100644 index 0000000..d2e0fa4 --- /dev/null +++ b/style.css @@ -0,0 +1,197 @@ +@import url('https://fonts.googleapis.com/css?family=Poppins'); + +body { + font-family: 'Poppins'; + margin: 0; + padding: 0; +} + +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; +} + +header>div:nth-child(2) { + display: flex; + justify-content: space-between; + align-items: center; + padding: 15px 25px; +} + +header>div:nth-child(2)>div:nth-child(1) img { + width: 70px; +} + +header>div:nth-child(2)>div:nth-child(2) { + flex: 1; + padding: 0 20px; +} + +header>div:nth-child(2)>div:nth-child(3) a:first-child { + border: 1px solid black; + padding: 5px 15px; + border-radius: 2px; +} + +header>div:nth-child(2) form { + display: flex; +} + +header>div:nth-child(2) input { + width: 100%; + padding: 10px; + background-color: rgba(0, 0, 0, .05); + border: none; +} + +header>div:nth-child(2) button { + padding: 10px 20px; + background-color: #fb3e44; + color: white; + border: none; + cursor: pointer; +} + +header>div:nth-child(2)>div:nth-child(3) { + display: flex; + gap: 20px; +} + +header>div:nth-child(2)>div:nth-child(3) a { + text-decoration: none; + color: black; +} + +header>div:nth-child(2)>div:nth-child(3) a:last-child { + padding: 5px 15px; +} + +#section1 { + height: 600px; + background-color: rgba(232, 217, 217, .3); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + padding: 0 20%; +} + +#section1 h1 { + font-size: 5rem; + margin-bottom: 1rem; +} + +#section1 p { + font-size: 1.5rem; + margin-bottom: 3rem; +} + +#section1 div { + display: flex; + gap: 20px; +} + +#section1 a:first-child { + background-color: #FB3B49; + color: white; + text-decoration: none; + padding: 15px 50px; + box-shadow: 8px 8px 0 rgba(251, 59, 73, .2); +} + +#section1 a:last-child { + text-decoration: none; + color: black; + padding: 15px 50px; + background-color: white; +} + +#section2 { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + padding: 50px 20%; +} + +#section2 img { + width: 250px; + margin-bottom: 40px; +} + +#section2 h2 { + background-color: rgba(255, 204, 53, .4); + transform: skew(9deg, 0deg); + font-style: italic; + padding: 0 10px; + font-size: 2.5rem; + margin-bottom: 30px; +} + +#section2 p { + font-size: 1.2rem; +} + +#section3 { + display: flex; + flex-direction: column; + align-items: center; + padding: 50px 20%; +} + +#section3>div { + display: flex; + flex-wrap: nowrap; + justify-content: space-between; + gap: 20px; + margin-bottom: 50px; +} + +#section3>div>div { + width: 22%; + padding: 10px; +} + +#section3 img { + width: 40px; + height: 40px; +} + +#section3 h3 { + color: #ED1C24; + margin: 15px 0; +} + +#section3>a { + background-color: #000; + color: white; + text-decoration: none; + padding: 15px 50px; + box-shadow: 8px 8px 0 rgba(128, 83, 35, .2); +} \ No newline at end of file