diff --git a/index.html b/index.html index a2d9c01ab..6a3872ed5 100644 --- a/index.html +++ b/index.html @@ -7,3 +7,93 @@ 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 +
+ +
+
+
+ npm logo +
+ + +
+
+
+ + +
+
+
+ +
+

Build amazing things

+

+ Essential tools for modern JavaScript development. +
+ `npm` is the default package manager for the JavaScript runtime environment Node.js. +

+
+ +
+
+ +
+
+
+

+ Get more done +

+

+ A npm's `Enterprise` subscription gives you more control and visibility. +

+
+ enterprise +
+
+ +
+
+ npm icon +
+

Collaborate on packages

+

+ npm gives teams a single, secure, and reliable registry to publish and install packages from. +

+ +
+
+
+ + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 000000000..18b2f3a30 --- /dev/null +++ b/style.css @@ -0,0 +1,166 @@ +@import url('https://fonts.googleapis.com/css?family=Poppins'); + +body { + font-family: 'Poppins'; + margin: 0; +} + +/* Header and Navigation */ +.header-top { + padding: 10px 25px; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid lightgray; +} + +.logo-text { + display: flex; + align-items: center; +} + +.blackHeart { + width: 20px; + margin-right: 1rem; +} + +.header-top nav ul { + list-style: none; + display: flex; + justify-content: space-between; + width: 600px; +} + +.header-top nav a { + text-decoration: none; + color: black; +} + +.header-bottom { + padding: 15px 25px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo-search { + display: flex; + align-items: center; +} + +.header-bottom img { + width: 80px; + margin-right: 1rem; +} + +.header-bottom input { + border: 1px solid lightgray; + border-radius: 5px; + padding: 8px; + background-color: rgba(0,0,0,.05); +} + +.header-bottom button { + background-color: #fb3e44; + color: white; + border: none; + border-radius: 5px; + padding: 8px 15px; + margin-left: 10px; +} + +.buttons { + display: flex; + gap: 10px; +} + +.buttons button { + background-color: white; + color: #fb3e44; + border: 1px solid #fb3e44; + border-radius: 5px; + padding: 8px 15px; +} + +/* Section 1 */ +#section1 { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 600px; + background-color: rgba(232,217,217,.3); + text-align: center; +} + +#section1 h1 { + font-size: 3rem; + margin: 0; +} + +#section1 p { + font-size: 1.5rem; + margin: 20px 0; +} + +.button-red { + background-color: #FB3B49; + color: white; + border: none; + border-radius: 5px; + padding: 15px 30px; + box-shadow: 8px 8px 0 rgba(251,59,73,.2); +} + +/* Section 2 */ +#section2 { + display: flex; + justify-content: center; + align-items: center; + padding: 50px 0; +} + +#section2 .section-content { + display: flex; + align-items: center; + gap: 50px; +} + +#section2 .yellow-background { + background-color: rgba(255,204,53,.4); + transform: skew(-9deg, 0deg); + display: inline-block; + padding: 0 5px; +} + +/* Section 3 */ +#section3 { + display: flex; + justify-content: center; + align-items: center; + padding: 50px 0; +} + +#section3 .section-content { + display: flex; + align-items: center; + gap: 50px; +} + +#section3 img { + width: 150px; +} + +#section3 h3 { + color: #ED1C24; +} + +.button-org { + background-color: white; + color: #ED1C24; + border: 1px solid #ED1C24; + border-radius: 5px; + padding: 15px 30px; + box-shadow: 8px 8px 0 rgba(128,83,35,.2); +} +/* Footer */ \ No newline at end of file