From 2a91d5e47b1ab479c018b6beb33a9f301af97cbd Mon Sep 17 00:00:00 2001 From: "Brett." Date: Sat, 23 Nov 2024 00:47:15 +0000 Subject: [PATCH 1/4] Structured the HTML and created the CSS file --- index.html | 91 ++++++++++++++++++++++++++++++++++++++++++++++++------ style.css | 35 +++++++++++++++++++++ 2 files changed, 117 insertions(+), 9 deletions(-) create mode 100644 style.css diff --git a/index.html b/index.html index a2d9c01..956c4f8 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,82 @@ -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 + +
+
+ +
+

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

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 +
+ + diff --git a/style.css b/style.css new file mode 100644 index 0000000..2206029 --- /dev/null +++ b/style.css @@ -0,0 +1,35 @@ +@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; +} From 2b0aaddf0368ca4a764ca362a79c08ca74b0874e Mon Sep 17 00:00:00 2001 From: "Brett." Date: Thu, 28 Nov 2024 16:20:31 +0000 Subject: [PATCH 2/4] Created the CSS styling for the 'SearchArea'. --- index.html | 12 ++++----- style.css | 75 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 80 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 956c4f8..c7fe368 100644 --- a/index.html +++ b/index.html @@ -24,17 +24,17 @@ -
- NPM Logo +
+ - Join - + +
diff --git a/style.css b/style.css index 2206029..c49e9b9 100644 --- a/style.css +++ b/style.css @@ -1,7 +1,7 @@ @import url('https://fonts.googleapis.com/css?family=Poppins'); body { - font-family: 'Poppins'; + font-family: 'Poppins', 'serif'; } header > div { @@ -33,3 +33,76 @@ nav a { width: 20px; margin-right: 1rem; } + +.npmLogo { + width: 75px; +} + +form { + display: flex; + align-items: center; + flex-grow: 1; + margin-right: 20px; + padding: 10px 20px; +} + +form label { + padding: 8px; + background-color: rgba(0, 0, 0, .05); + border: none; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; +} + +form label img { + width: 15px; + height: 16px; +} + +form input { + width: 100%; + padding: 8px; + border: none; + box-sizing: border-box; + font-weight: bold; + background-color: rgba(0, 0, 0, .05); +} + +form input:focus { + outline: none; +} + +form button { + padding: 8px 12px; + border: none; + background-color: #fb3e44; + color: white; + font-weight: bold; + cursor: pointer; +} + +form button:hover { + background-color: #ad050a; +} + +.join button, .logIn button { + padding: 6px 20px; + background-color: white; + font-weight: bold; + cursor: pointer; + margin-left: 10px; +} + +.joinButton { + border: 1px solid black; +} + +.logInButton { + border: none; +} + +.join button:hover, .logIn button:hover { + background-color: lightgray; +} \ No newline at end of file From d4335e56587f980727925f5a83f4c5c07a741f31 Mon Sep 17 00:00:00 2001 From: "Brett." Date: Fri, 29 Nov 2024 13:47:19 +0000 Subject: [PATCH 3/4] Created the CSS styling for the 'landing' section. --- index.html | 4 ++-- style.css | 51 ++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 52 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index c7fe368..5d83b6a 100644 --- a/index.html +++ b/index.html @@ -42,8 +42,8 @@

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 + See plans + Join for free
diff --git a/style.css b/style.css index c49e9b9..8f2e1ae 100644 --- a/style.css +++ b/style.css @@ -29,6 +29,10 @@ nav a { color: black; } +nav ul li a:hover { + background-color: lightgray; +} + .blackHeart { width: 20px; margin-right: 1rem; @@ -105,4 +109,49 @@ form button:hover { .join button:hover, .logIn button:hover { background-color: lightgray; -} \ No newline at end of file +} + +.landing { + height: 600px; + background-color: rgba(232,217,217,.3); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.landing h1 { + font-size: 50px; +} + +.landing article { + width: 400px; +} + +.landingLinks { + margin-top: 20px; + width: 400px; + display: flex; + justify-content: space-around; +} + +.landing a { + text-decoration: none; + color: black; + padding: 10px 40px; +} + +.landingJoinButton:hover { + background-color: lightgray; +} + +.plansButton { + background-color: #fb3b49; + box-shadow: 8px 8px 0 rgba(251,59,73,.2); + color: white; +} + +.plansButton:hover { + background-color: #ad050a; +} + From 9332dae48834a3751356c3c656a6b18da2d40a33 Mon Sep 17 00:00:00 2001 From: "Brett." Date: Fri, 29 Nov 2024 14:24:49 +0000 Subject: [PATCH 4/4] Created the CSS styling for the 'about' and 'info' sections. --- index.html | 2 +- style.css | 70 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 71 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 5d83b6a..c479371 100644 --- a/index.html +++ b/index.html @@ -76,7 +76,7 @@

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 index 8f2e1ae..3879423 100644 --- a/style.css +++ b/style.css @@ -155,3 +155,73 @@ form button:hover { background-color: #ad050a; } +.about { + height: 600px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.about img { + width: 200px; + margin: 20px; +} + +.about h2 { + background-color: rgba(255,204,53,.4); + transform: skew(9deg,0deg); + font-style: italic; + padding: 0 30px; + font-size: 35px; +} + +.about article { + width: 650px; + text-align: center; +} + +.info { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin: 50px; +} + +.info img { + width: 30px; +} + +.cardContainer { + display: flex; + width: 75%; + margin: 50px 0; +} + +.card { + margin: 10px; + padding: 10px; +} + +.cardHeader { + color: #ED1C24; + margin-top: 5px; + font-size: 14px; +} + +.card p { + font-size: 12px; +} + +.createButton { + box-shadow: 8px 8px 0 rgba(128,83,35,.2); + color: white; + background-color: black; + text-decoration: none; + padding: 10px 75px; +} + +.createButton:hover { + background-color: #706e6e; +} \ No newline at end of file