web-dev-open · arshmohd · Aug 14, 2022 · Aug 14, 2022 · Aug 14, 2022 · Aug 14, 2022
diff --git a/images/540px-Npm-logo.svg b/images/540px-Npm-logo.svg
diff --git a/images/familiar-features 1.png b/images/familiar-features 1.png
diff --git a/images/favicon-npm.ico b/images/favicon-npm.ico
diff --git a/images/favicon-npm.svg b/images/favicon-npm.svg
diff --git a/images/middleComponent.svg b/images/middleComponent.svg
diff --git a/images/npm branding ICON.png b/images/npm branding ICON.png
diff --git a/images/npm-audit 1.png b/images/npm-audit 1.png
diff --git a/images/npm-favicon.ico b/images/npm-favicon.ico
diff --git a/images/team-management 1.png b/images/team-management 1.png
diff --git a/images/zero-configuration 1.png b/images/zero-configuration 1.png
diff --git a/images/zero-configuration.svg b/images/zero-configuration.svg
diff --git a/index.html b/index.html
@@ -1,9 +1,128 @@
-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
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>npm</title>
+  <link rel="shortcut icon" href="./images/favicon-npm.ico" type="image/x-icon">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Arimo:wght@400;500;600;700&family=Fira+Mono&family=Poppins:wght@100;400;500;600;700&display=swap"
+    rel="stylesheet">
+  <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+  <header>
+    <div class="header-top">
+      <div class="top-left-img-text">
+        <img class="header-top-left-img" src="./images/black-heart.png" alt="" srcset="">
+      <div class="header-top-left">Never Post Memes</div>
+      </div>
+      <div class="header-top-nav-right">
+        <nav class="header-top-right-nav">
+          <ul class="header-top-right-navitems">
+            npm Enterprise
+          </ul>
+          <ul class="header-top-right-navitems">
+            Products
+          </ul>
+          <ul class="header-top-right-navitems">
+            Solutions
+          </ul>
+          <ul class="header-top-right-navitems">
+            Resources
+          </ul>
+          <ul class="header-top-right-navitems">
+            Docs
+          </ul>
+          <ul class="header-top-right-navitems">
+            Support
+          </ul>
+        </nav>
+      </div>
+    </div>
+    <div class="header-below">
+      <img class="header-below-npmlogo" src="./images/npm-logo.png" alt="" srcset="">
+      <form action="" class="header-below-searchbar">
+        <input class="nosubmit" type="search" name="" placeholder="Search packages" id="">
+      </form>
+      <button class="header-below-search">Search</button>
+
+
+      <a class="header-below-join" href="http://">Join</a>
+      <a class="header-below-login" href="http://">Log In</a>
+    </div>
+  </header>
+  <section class="hero-top">
+    <h1 class="hero-top-heading">Build amazing things</h1>
+    <article class="hero-top-article">
+      Essential JavaScript development tools that help you go to market faster
+      and build powerful applications using modern open source code.
+    </article>
+    <div class="hero-top-plans-join">
+      <button class="hero-top-plans">See plans</button>
+      <p class="hero-top-join" > Join for free</p>
+    </div>
+  </section>
+  <section class="hero-middle">
+    <div class="triangles-6">
+      <img src="./images/middleComponent.svg" alt="" srcset="">
+    </div>
+    <h2 class="hero-middle-h2">
+      Bring the best of open source to your company
+    </h2>
+    <p class="hero-middle-p">
+      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.
+    </p>
+  </section>
+
+  <section class="hero-bottom">
+    <div class="hero-bottom-cards">
+      <div class="hero-bottom-card">
+        <img src="./images/zero-configuration 1.png" alt="" srcset="" class="hero-bottom-card-img" />
+        <h2 class="hero-bottom-card-heading">Zero configuration</h2>
+        <p class="hero-bottom-card-para">
+          Create an org, add your team,and start collaborating. Nothing to
+          configure, set up, or manage.
+        </p>
+      </div>
+      <div class="hero-bottom-card">
+        <img src="./images/team-management 1.png" alt="" srcset="" class="hero-bottom-card-img" />
+        <h2 class="hero-bottom-card-heading">Team management</h2>
+        <p class="hero-bottom-card-para">
+          Control who has access to what modules within your team namespace
+          using straightforward team management capabilities.
+        </p>
+      </div>
+      <div class="hero-bottom-card">
+        <img src="./images/familiar-features 1.png" alt="" srcset="" class="hero-bottom-card-img" />
+        <h2 class="hero-bottom-card-heading">Familiar features</h2>
+        <p class="hero-bottom-card-para">
+          npm Orgs has 100% parity with all the public npm registry features
+          your developers already use.
+        </p>
+      </div>
+      <div class="hero-bottom-card">
+        <img src="./images/npm-audit 1.png" alt="" srcset="" class="hero-bottom-card-img" />
+        <h2 class="hero-bottom-card-heading">npm audit</h2>
+        <p class="hero-bottom-card-para">
+          Enjoy the security auditing features built into the npm client, a
+          zero-friction way to make open source software safer.
+        </p>
+      </div>
+    </div>
+
+  </section>
+
+  <footer class="last-button">
+    <button class="hero-bottom-button">Create an Org</button>
+  </footer>
+
+</html>