diff --git a/index.html b/index.html index a2d9c01..1c57f27 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,145 @@ -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 +
+
+ +
+

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 +
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/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 diff --git a/style.css b/style.css new file mode 100644 index 0000000..093cd52 --- /dev/null +++ b/style.css @@ -0,0 +1,199 @@ +@import url("https://fonts.googleapis.com/css?family=Poppins"); +/* *{ + border: 1px solid red; +} */ + +* { + margin: 0 auto; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: "Poppins"; +} + +header > div#topheading { + padding: 20px 0; + 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: 20px; + padding: 15px; + position: absolute; +} + +header > div#subheading { + padding: 15px 0; + + display: flex; + flex-wrap: wrap; + + column-gap: 10px; + border-bottom: 1px solid lightgray; +} +form#search_bar { + display: inline-block; + justify-content: space-between; + align-items: center; +} +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: 500px; +} + +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; + color: #5c5c5c; +} + +a.heading-btn { + padding: 10px 20px; + margin: 0px 5px; +} +.bordered { + border: 1px solid #5c5c5c; + font-weight: bold; +} + +.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, 0.2); +}