diff --git a/index.html b/index.html index a2d9c01..0c92522 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,121 @@ -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 | Home + + +
+
+
+ heart-logo + Nifty Penguin Magic +
+ +
+ +
+
+ +
+ +
+ + +
+
+
+
+ Join + +
+
+
+ +
+
+

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

Zero configuration

+

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

+
+
+ team-management-image +

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.

+
+
+ + + +
+
+ + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..ce4c0fb --- /dev/null +++ b/styles.css @@ -0,0 +1,266 @@ + +@import url('https://fonts.googleapis.com/css?family=Poppins'); + + +body { + font-family: 'Poppins', sans-serif; +} + +div { + padding-bottom: 5px; + padding-top: 5px; +} + + + +article{ + width: 400px; + text-align: center; + padding: 20px; + font-size: 16px; +} + +body{ + font-family: Poppins; +} + + +header{ + box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px; +} + +.container-1{ + display: flex; + justify-content: space-between; + margin: 0 20px; + font-weight: bold; +} + +.container-1 > div { + width: 220px; + height: 30px; + display: flex; + justify-content: center; + align-items: center; + align-content: center; + align-self: center; +} + +.container-1 div > img{ + width: 30px; + height: 18px; + margin-right: 10px; +} + +ul{ + display: flex; +} + +ul li { + list-style-type: none; + padding: 10px; +} + +ul li a , a{ + color: black; + text-decoration: none; +} + +.container-2 { + display: flex; + flex-direction: row; + align-self: center; + align-items: center; + margin: 0 20px; + justify-content: space-between; +} + +.container-2 div{ + display: flex; +} + +#lense{ + max-width: 20px; + height: 20px; + display: flex; + justify-content: center; + align-self: center; + margin-right: 10px; +} + +#logo { + max-width: 80px; + height: 20px; + display: flex; + align-self: center; + margin-right: 20px; + +} + +#search-bar { + width: 400px; + height: 40px; + margin-right: 10px; + background-color: rgb(242, 242, 242); + border-radius: 5px; + border: none; + padding-right: 20px; +} + +::placeholder{ + padding-left: 20px; +} + +button{ + border-radius: unset; + padding: 13px 20px; + background-color: rgb(237, 58, 66); + color: whitesmoke; + border-color: white; + border: none; + cursor:pointer; +} + +#join-login-container { + display: flex; + justify-content: space-around; + width: 15%; + cursor: pointer; +} + +.join-button, .login-button{ + margin: 0; + padding: 10px 30px; +} + +.login-button { + margin-left: -20px; +} + +#join-login-container { + width: 300px; +} + +/* sections */ + +section { + display: flex; + justify-content: center; + align-self: center; + align-items: center; + flex-direction: column; + width: 100%; + height: 500px; + margin: 0; +} + +#intro-section{ + background-color: rgb(248, 243, 243); +} + +h2 { + text-align: center; + font-size: 55px; +} + +#js-intro { + width: 350px; + border: 2px solid black; + margin: 0 auto; + text-align: center; + padding: 20px; + line-height: 1.5; +} + +#choose-container{ + display: flex; + justify-content: space-between; + align-self: center; + width: 390px; + height: 80px +} + +#plans-button, #join-button { + display: flex; + align-self: center; + height: 50px; + width: 180px; + justify-content: center; + align-content: center; + font-size: 16px; + font-weight: bold; +} + +#join-button { + background-color: white; + color: black; + +} + +#plans-button a{ + color: white; +} + +#plans-button { + box-shadow: 10px 5px 5px rgb(255, 126, 146); +} + +#hex-image { + max-width: 200px; +} + +h3 { + font-size: 25px; + font-style: italic; + background-color: rgb(255, 235, 181); + padding: 10px 20px; +} + +#services-container{ + display: flex; + flex-direction: row; + align-content: space-between; +} + + + +#services-container div { + width: 180px; + height: 150px; + padding: 50px 20px; + display: flex; + flex-direction: column; + align-content: center; + align-self: center; +} + +#services-container div p { + font-size: 12px; +} + +h4{ + color: red; +} + + +#services-container div img { + max-width: 30px; +} + +section:last-of-type #services-container{ + margin: 20px; +} + + +#org-button { + width: 300px; + margin-top: 50px; + font-weight: bold; + background-color: black; + box-shadow: 10px 5px 5px rgb(240, 235, 229); +} + + + + +