From 7be583f99920557f966e77b08516819abfad101e Mon Sep 17 00:00:00 2001 From: Paul Date: Fri, 25 Aug 2023 10:56:50 +0800 Subject: [PATCH 1/5] Created Information text file --- info.txt | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 info.txt diff --git a/info.txt b/info.txt new file mode 100644 index 0000000..411cc19 --- /dev/null +++ b/info.txt @@ -0,0 +1,34 @@ + + +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 From 6b82f3af46cc4000e201e2ece48487558f75318c Mon Sep 17 00:00:00 2001 From: Paul Date: Fri, 25 Aug 2023 13:06:37 +0800 Subject: [PATCH 2/5] Added style.css --- style.css | 97 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 97 insertions(+) create mode 100644 style.css diff --git a/style.css b/style.css new file mode 100644 index 0000000..a9f275b --- /dev/null +++ b/style.css @@ -0,0 +1,97 @@ +@import url("https://fonts.googleapis.com/css?family=Poppins"); +/* *{ + border: 1px solid red; +} */ + +body { + font-family: "Poppins"; +} + +header > div#topheading { + 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; +} + +.npmlogo { + width: 90px; +} + +.search_icon { + height: 30px; + padding: 10px; + position: absolute; +} + +#subheading { + padding: 15px 0; + + display: flex; + justify-content: center; + align-items: center; + align-content: space-between; + border-bottom: 1px solid lightgray; +} +form#search_bar { + display: flex; + padding: 0 25px; + margin-right: 10px; +} +form#search_bar input { + font-size: 1.2em; + border: none; + outline: none; +} + +form#search_bar input#search_box { + background-color: rgba(0, 0, 0, 0.05); + padding: 15px 15px 15px 50px; + width: 800px; +} + +form#search_bar input[type="submit"] { + background-color: #fb3e44; + color: #fff; + padding: 15px; +} +/* link styling */ +a { + text-decoration: none; + color: #5c5c5c; +} + +a.heading-btn { + padding: 5px 15px; + margin: 0px 5px; +} +.bordered { + border: 1px solid #5c5c5c; + font-weight: bold; +} + +section#content-1 { + background-color: hsl(60, 24%, 89%); +} From 38c8d00338749c67c02832517f4b39df8fa70d37 Mon Sep 17 00:00:00 2001 From: Paul Date: Fri, 25 Aug 2023 13:09:09 +0800 Subject: [PATCH 3/5] Updated headings and subheadings --- index.html | 91 ++++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 82 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index a2d9c01..f29f03b 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 by Paul J + + + + +
+ +
+ +
+ black heart + Nifty Penguin Magic +
+ + +
+ +
+ + + + + Join + Log In +
+
+ +
+

+
+
+ See plans + Join for free +
+
+ +
+ +

+
+
+ +
+
+
+
+
+ Create an Org +
+ + From 0cb64dcf8ca73f1a99aba9e292cc0f0e8b9ab36a Mon Sep 17 00:00:00 2001 From: Paul Date: Fri, 25 Aug 2023 16:37:39 +0800 Subject: [PATCH 4/5] Final update for the last two sections --- index.html | 82 +++++++++++++++++++++++-------- style.css | 139 +++++++++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 187 insertions(+), 34 deletions(-) diff --git a/index.html b/index.html index f29f03b..1d93cf9 100644 --- a/index.html +++ b/index.html @@ -44,39 +44,83 @@ class="search_icon" /> - + + Join Log In - -
-

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

-
+
+ + +

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. +
-
-
-
-
-
- Create an Org +
+
+
+ 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 +
+
+
+ Create an Org +
+
diff --git a/style.css b/style.css index a9f275b..4d95b14 100644 --- a/style.css +++ b/style.css @@ -3,12 +3,18 @@ border: 1px solid red; } */ +* { + margin: 0 auto; + padding: 0; + box-sizing: border-box; +} + body { font-family: "Poppins"; } header > div#topheading { - padding: 0 25px; + padding: 20px 0; display: flex; justify-content: space-between; align-items: center; @@ -41,24 +47,24 @@ nav a { } .search_icon { - height: 30px; - padding: 10px; + height: 20px; + padding: 15px; position: absolute; } -#subheading { +header > div#subheading { padding: 15px 0; display: flex; - justify-content: center; - align-items: center; - align-content: space-between; + flex-wrap: wrap; + + column-gap: 10px; border-bottom: 1px solid lightgray; } form#search_bar { - display: flex; - padding: 0 25px; - margin-right: 10px; + display: inline-block; + justify-content: space-between; + align-items: center; } form#search_bar input { font-size: 1.2em; @@ -69,14 +75,21 @@ form#search_bar input { form#search_bar input#search_box { background-color: rgba(0, 0, 0, 0.05); padding: 15px 15px 15px 50px; - width: 800px; + width: 500px; } -form#search_bar input[type="submit"] { +form#search_bar input#search-btn { background-color: #fb3e44; color: #fff; padding: 15px; } + +.subhead-div-1 { + display: flex; + justify-content: space-around; + padding: 0 15px; +} + /* link styling */ a { text-decoration: none; @@ -84,7 +97,7 @@ a { } a.heading-btn { - padding: 5px 15px; + padding: 10px 20px; margin: 0px 5px; } .bordered { @@ -92,6 +105,102 @@ a.heading-btn { font-weight: bold; } -section#content-1 { - background-color: hsl(60, 24%, 89%); +.base { + display: flex; + justify-content: center; + align-items: center; + gap: 20px; + flex-direction: column; +} +section.content-1 { + background-color: rgba(232, 217, 217, 0.3); + height: 600px; +} + +section.content-1 > article, +section.content-2 > article, +section.content-1 > div { + width: 600px; + text-align: center; +} +section.content-1 > h1 { + font-size: 5em; +} +section.content-1 > div.plans { + margin: 20px 0; +display: flex; +justify-content: center; +align-items: center; + +} +.heading-btn2{ + padding: 15px 70px; +} +section.content-1 > div > a.content1-btn { + background-color: #fb3b49; + color: #fff; + box-shadow: 8px 8px 0 rgba(251, 59, 73, 0.2); +} +section.content-1 > div > a.content2-btn { + background-color: #ffffff; + + } + +section.content-2 { + height: 400px; +} +section.content-2 > img { + size: 12px; +} +section.content-2 > h4 { + background-color: rgba(255, 204, 53, 0.4); + transform: skew(9deg, 0deg); + font-style: italic; + margin: 0 10px; + font-size: 1.7em; + padding: 0 15px; +} + +/* LAST */ + +section.last-section{ + width: 80%; + height: 450px; + margin-top: 100px; +} + +section.last-section > div.box-container{ + display: flex; + justify-content: center; + align-items: flex-start; + gap: 10px; + + +} +section.last-section > div > div.box{ + padding: 15px; + height: 290px; + width:300px; + /* border: 1px solid #000; */ + +} +.box-heading{ + color:#ED1C24; + padding: 5px 0; + margin-bottom: 15px; + font-size: 1.1em; + +} +section.last-section > div.orgbtn-container { +display: flex; +justify-content: center; +align-items: center; +margin-top: 30px; + } +section.last-section > div.orgbtn-container > a.org-btn{ +padding: 15px 120px; +background-color: #000 ; +color: #fff; +box-shadow: 8px 8px 0 rgba(128,83,35,.2) +} \ No newline at end of file From 423a9bebf7d010ae0a4af94b99de96e073eda27f Mon Sep 17 00:00:00 2001 From: Paul Date: Fri, 25 Aug 2023 16:42:12 +0800 Subject: [PATCH 5/5] Completed Webpage --- index.html | 77 ++++++++++++++++++++++++++++------------------ style.css | 89 +++++++++++++++++++++++++----------------------------- 2 files changed, 89 insertions(+), 77 deletions(-) diff --git a/index.html b/index.html index 1d93cf9..1c57f27 100644 --- a/index.html +++ b/index.html @@ -88,39 +88,58 @@

Bring the best of open source to your company

-
-
- Zero Configuration -
Zero configuration
- Create an org, add your team, and start collaborating. Nothing to - configure, set up, or manage. -
-
- team management +
+
+ 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 +
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 +
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 -
+
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 -
- +
+
+ Create an Org +
diff --git a/style.css b/style.css index 4d95b14..093cd52 100644 --- a/style.css +++ b/style.css @@ -128,13 +128,12 @@ section.content-1 > h1 { } section.content-1 > div.plans { margin: 20px 0; -display: flex; -justify-content: center; -align-items: center; - + display: flex; + justify-content: center; + align-items: center; } -.heading-btn2{ - padding: 15px 70px; +.heading-btn2 { + padding: 15px 70px; } section.content-1 > div > a.content1-btn { background-color: #fb3b49; @@ -142,9 +141,8 @@ section.content-1 > div > a.content1-btn { box-shadow: 8px 8px 0 rgba(251, 59, 73, 0.2); } section.content-1 > div > a.content2-btn { - background-color: #ffffff; - - } + background-color: #ffffff; +} section.content-2 { height: 400px; @@ -163,44 +161,39 @@ section.content-2 > h4 { /* LAST */ -section.last-section{ - width: 80%; - height: 450px; - margin-top: 100px; -} - -section.last-section > div.box-container{ - display: flex; - justify-content: center; - align-items: flex-start; - gap: 10px; - - -} -section.last-section > div > div.box{ - padding: 15px; - height: 290px; - width:300px; - /* border: 1px solid #000; */ - -} -.box-heading{ - color:#ED1C24; - padding: 5px 0; - margin-bottom: 15px; - font-size: 1.1em; - +section.last-section { + width: 80%; + height: 450px; + margin-top: 100px; +} + +section.last-section > div.box-container { + display: flex; + justify-content: center; + align-items: flex-start; + gap: 10px; +} +section.last-section > div > div.box { + padding: 15px; + height: 290px; + width: 300px; + /* border: 1px solid #000; */ +} +.box-heading { + color: #ed1c24; + padding: 5px 0; + margin-bottom: 15px; + font-size: 1.1em; } section.last-section > div.orgbtn-container { -display: flex; -justify-content: center; -align-items: center; -margin-top: 30px; - -} -section.last-section > div.orgbtn-container > a.org-btn{ -padding: 15px 120px; -background-color: #000 ; -color: #fff; -box-shadow: 8px 8px 0 rgba(128,83,35,.2) -} \ No newline at end of file + display: flex; + justify-content: center; + align-items: center; + margin-top: 30px; +} +section.last-section > div.orgbtn-container > a.org-btn { + padding: 15px 120px; + background-color: #000; + color: #fff; + box-shadow: 8px 8px 0 rgba(128, 83, 35, 0.2); +}