diff --git a/assets/search.png b/assets/search.png new file mode 100644 index 0000000..b13a3ff Binary files /dev/null and b/assets/search.png differ diff --git a/index.html b/index.html index 9a3afe1..9d3e000 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,267 @@ - - - - Document - - - - - - \ No newline at end of file + + + + npmjs website redesign + + + + +
+
+
+ black heart +

next() Packaged middleware

+
+ +
+
+
+
+ + + + + Search + +
+ SignUp + Sign In +
+
+
+
+
+ +
+

Build amazing

+

things

+ +

We're npm, Inc., the company behind Node package manager, the npm,

+

+ Registry, and npm CLI. We offer those to the community for free, but our +

+

+ day job is building and selling useful tools for developers like you. +

+
+ +
+

Take your Javascript

+

development up a notch

+ +

+ Get started today for free, or step up to npm Pro to enjoy a premium +

+

+ Javascript development experience, with features like private packages. + + + + + SignUp for free + + Learn about pro +

+ + +
+
+ + +
+ +

Bring the best of open

+

source to you, your team,

+

and your company

+ + +

Relied upon by more than 11 million developers worldwide, npm is

+

committed to making JavaScript development elegant, productive, and

+

+ safe. The free npm Registry has become the center of JavaScript code +

+

+ sharing, and with more than one million packages, the largest software +

+

+ registry in the world. Our other tools and services take the Registry, + and +

+ +

the work you do around it, to the next level.

+ + + +
+
+ + + + +
+
+ +
+ +
+
npm Free
+

Become a contributing member of

+

the open source javascript

+

community, Create public

+

packages, publish updates, audit

+

your dependencies, and more

+ + LEARN MORE +
+
+ +
+ + +
+
npm Pro & Teams
+

For next-level Javascript

+

developers whowant more

+

capabilities. Pro and Teams add the

+

ability to build private pacakges for

+

you, your team, or for customers.

+ + LEARN MORE +
+
+ +
+ +
+
npm Enterprise
+

For very large teams and business-

+

critical projects,npm Enterprise

+

delivers features that organizations

+

with hundreds of developers need,

+

like SSO and enhanced security.

+ + LEARN MORE +
+
+ +
+ +
+
npm PkgSafe
+

Our security team's unique insights

+

into Javascript vulnerabilities and

+

threats are delivered as free and

+

premium features, as well as

+

services for resellers and others.

+ + LEARN MORE +
+
+ +
+
+ + + + + + + + + + +
+

We ❤ open source

+ + +
+

+ At npm, Inc., we're proud to dedicate teams of full-time employees to +

+

+ operating the npm Registry, enhancing the CLI, improving JavaScript +

+

+ security, and other projects that support and nurture a vibrant open +

+

source community.

+
+
+ + +
+ + +
+
+

Gratefully serving everyone

+ +

from solo devs to the

+ +

Fortune 500

+
+
+ + + +
+ + +
+ +
+ + + + +
+ + + diff --git a/style.css b/style.css index e69de29..2485879 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,272 @@ +@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;400;700;800&display=swap"); + + +* { + padding: 0; + margin: 0; +} + +body { + font-family: "Nunito Sans", sans-serif; + background-color: white; + display: flex; + flex-direction: column; +} + +h1 { + font-size: 5em; +} + +h1, +h2, +h3 { + font-weight: bold; +} + +h2 { + font-size: 4em; + +} + +h3 { + font-size: 3.5em; +} + +h4 { + font-size: 2.5em; +} + +h5 { + font-size: 1.5em; +} + +footer ul { + display: flex; + align-items: center; + justify-content: space-around; + list-style: none; +} + +footer img { + display: inline; +} + +#img { + display: flex; + justify-content: center; + align-items: center; +} + +#l { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +#last { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-image: url(./assets/background.png); + padding: 40px; + color: white; +} + +#m { + display: flex; + justify-content: space-between; + align-items: center; + text-align: justify; + text-justify: inter-word; +} + +#b1, +#b2 { + background-image: url(./assets/b1.png); + height: 400px; + width: 100%; + padding: 20px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: white; +} + +#a { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: black; + margin: 20px; +} + +#b2 div { + display: flex; + justify-content: space-around; + align-items: center; + padding: 10px 40px 30px 40px; + +} + +#b2 { + background-image: url(./assets/background2.png); +} + +.break { + display: block; + padding: 10px; +} + +p { + font-size: 18px; +} + +.black-heart { + width: 50px; + height: 25px; +} + +input[type=text] { + width: 1040px; + height: 40px; + margin: 0px; +} + +#flex { + display: flex; + align-items: center; + justify-content: space-around; +} + +.learn { + text-decoration: none; + text-align: center; + background-color: white; + cursor: pointer; + font-weight: 400; + letter-spacing: 0.5px; + color: black; + font-size: 1.3em; + font-weight: bold; + padding: 5px 20px; + border-radius: 10% / 50%; + border: groove 1px black; +} + +#sign-up { + + text-decoration: none; + text-align: center; + background-color: white; + cursor: pointer; + font-weight: 400; + letter-spacing: 0.5px; + color: white; + padding: 10px; + margin: 0px 20px 0px 0px; + border: groove 2px black; + color: black; + +} + +#login { + text-decoration: none; + text-align: center; + background-color: white; + cursor: pointer; + font-weight: 400; + letter-spacing: 0.5px; + color: white; + padding: 10px; + border-color: black; + color: black; + + +} + +#f { + display: flex; + justify-content: space-between; + align-items: center; +} + +#s { + background-color: black; + color: white; + height: 45px; + width: 120px; + margin: 0px 40px 0px 0px; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + font-weight: bold; + text-decoration: none; +} + +#free { + background-color: #B22222; + color: white; + height: 50px; + width: 120px; + margin: 0px; + text-decoration: none; + padding: 20px 50px; +} + +.space { + display: inline; + padding: 40px; +} + +#pro { + background-color: #FF69B4; + color: white; + height: 50px; + width: 120px; + margin: 0px; + color: white; + text-decoration: none; + padding: 20px 50px; +} + +#set { + display: flex; + justify-content: space-between; + align-items: center; +} + +nav ul li { + margin: 0 20px; +} + + +.header { + padding: 20px 0 0 50px; + display: flex; + justify-content: space-between; + align-items: center; +} + +nav ul, +header>div>div { + display: flex; + justify-content: space-between; + align-items: center; + list-style: none; + padding: 10px; +} + +.nav-link { + text-decoration: none; + color: black; + font-weight: bold; +} + +.nav-link:hover { + color: #E4E3DB +} \ No newline at end of file