diff --git a/index.html b/index.html index a2d9c01ab..448c08015 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,154 @@ -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 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 + + + + + + + lab-html-exercise + + + + +
+
+
+ black heart + Nifty Penguin Magic +
+ +
+ +
+ + +
+ magnifying-glass + + + 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 +

+ 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 000000000..d2d3167dc --- /dev/null +++ b/style.css @@ -0,0 +1,205 @@ +@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; + } + + .npm-logo { + width: 70px; + margin-top: 10px; + margin-bottom: 10px; + } + #searchSection { + display: flex; + align-items: center; + gap: 15px; + justify-content:flex-start; + } + + .search-bar { + position: relative; + display: flex; + align-items:center; + gap: 1px; + } + + .magnifying-glass { + position: absolute; + left: 10px; + width: 20px; + height: 20px; + margin-top:10px; + } + + .search-bar input { + padding-left: 40px; + height: 40px; + width: 1100px; + font-size: 16px; + border: 1px solid #ccc; + border-radius: 5px; + margin-top: 10px; + color: rgba(0,0,0,.05); + } + .search-button{ + color:white; + height:40px; + width: 90px; + margin-top: 10px; + background-color: #fb3e44; + } + + .search-label { + color: rgba(0, 0, 0, 0.05); + } + .join{ + position:relative; + left: 25px; + margin-top: 10px; + border: 1px solid black; + color: black; + padding: 5px 25px; + text-decoration: none; + } + .logIn{ + position:relative; + left: 45px; + margin-top: 10px; + text-decoration: none; + color: #959999; + } + .search-bar .search-button { + background-color: #fb3e44; + color: white; + } + + #section1{ + height: 600px; + background-color: rgba(232,217,217,.3); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + #section1 h1 { + font-size: 90px; + } + .container{ + font-size:20px; + text-align: center; + } + .container p{ + max-width: 600px; + margin: 0 auto; + margin-bottom: 60px; + } +.see-plans{ + background-color:#FB3B49; + text-decoration: none; + color:white; + box-shadow:8px 8px 0 rgba(251,59,73,.2); + font-size: 50px; + margin-right: 50px +} +.join-for-free{ + color:black; + background-color:white; + text-decoration:none; + font-size:50px; +} +.linkButtons{ + margin-bottom:100px; +} + +#section2{ + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + font-style: italic; +} + +.triangle-hexagon{ + width: 300px; + margin-top: 50px; + margin-bottom:30px; +} +#section2 h2{ + background-color: rgba(255,204,53,.4); + transform: skew(9deg,0deg); + font-size: 40px; +} +.second-container { + margin-left: 350px; + margin-right: 350px; + margin-bottom: 100px; + font-size:16px; + text-align: center; +} + +.second-container p { + max-width:1000px; + margin: 0 auto; +} +#section3{ + display: flex; + justify-content:space-evenly; + align-items:center; + align-content:center; +} +#section3 img { + width: 30px; + margin-top:20px; +} +#section3 h3 { + color:#ED1C24; +} +#section3 p{ + max-width:250px; + margin-top: 30px; + margin-bottom:30px; +} +.org { + box-shadow: 8px 8px 0 rgba(128,83,35,.2); + color: white; + background-color:black; + text-decoration:none; + width:300px; + height: 50px; + display:flex; + justify-content:center; + align-items:center; + margin: 0 auto; + margin-bottom:30px; + margin-top: 50px; + +} \ No newline at end of file