diff --git a/index.html b/index.html index a2d9c01ab..c37080d25 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,102 @@ -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 +
+ +
+ +
+ +
+
+ + + +
+
+ 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. +
+
+ + + +
+
+ +
+ 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.
+
+ +
+
+
+ mouse arrow clicking a square +

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.

+
+ +
+ binoculars +

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 new file mode 100644 index 000000000..55b150016 --- /dev/null +++ b/style.css @@ -0,0 +1,198 @@ +@import url('https://fonts.googleapis.com/css?family=Poppins'); + +body { + margin: 0; + padding: 0; + 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; +} + +.logo { + width: 90px; + +} + +.magnifying-glass { + width: 20px; + padding: 10px; +} + +form { + padding: 10px; + display: flex; + flex-direction: row; + align-items: center; +} + +div > form > label { + background-color: rgba(0,0,0,.05); + border-color: black; + +} + +/*affects only the search bar>*/ +div > form > input { + background-color: rgba(0,0,0,.05); + padding: 15.5px; + border: none; + width: 1100px; + + + + +} + +form > button { + background-color: #fb3e44; + color: white; + border: none; + padding: 15px; +} + +a { + text-decoration: none; + color: black; +} + +.join-link { + padding: 5px; +} + +#build { + height: 600px; + background-color: rgba(232,217,217,.3); + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; +} + +h1 { + font-size: 100px; + margin: 10px 0 10px 0; + padding: 10px 0; +} + +article { + text-align: center; + margin: 15px 0 35px 0; +} + +.plans-link { + font-size: 16px; + background-color: #FB3B49; + border: none; + padding: 10px 20px; + margin: 0 10px; + color: white; + box-shadow: 8px 8px 0 rgba(251,59,73,.2); + /*box-shadow: 8px 8px 0 rgba(251,59,73,.2);*/ +} + +.join-free { + font-size: 16px; + background-color: white; + border: none; + padding: 10px 20px; +} + +.build-buttons { + margin: 30px 0 0 0; +} + +#open-source { + height: 450px; + margin: 55px 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.triangle-hexagon { + width: 200px; + margin: 0 0 10px 0; + +} +#open-source h2{ + background-color: rgba(255,204,53,.4); + transform: skew(9deg,0deg); + font-style: italic; + margin: 35px 0 15px 0; + +} + + +.content { + padding: 10px 35px; + display: flex; + flex-direction: column; +} + +.container { + display: flex; + flex-direction: row; + justify-content: center; + +} + +.features { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.features img { + width: 20px; +} + +.features h3 { + color: #ED1C24; +} + +.features a { + color: white; +} + +.features button { + width: 20%; + background-color: black; + border: none; + box-shadow: 8px 8px 0 rgba(128,83,35,.2); + padding: 10px 30px; + margin: 50px; + font-weight: 700; + font-size: 14px; +} + + + +