From 2636aee3cce966ac13d1f597a82ddcfb3a90a8a5 Mon Sep 17 00:00:00 2001 From: "sravs3692@gmail.com" Date: Thu, 3 Sep 2020 22:51:16 +0530 Subject: [PATCH 1/3] npmjs website redesign --- index.html | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 9a3afe1..ab3d2f0 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,10 @@ - - - - Document - - - - - - \ No newline at end of file + + + + npmjs website redesign + + + + From 6a1413d90dafb1577c8a2af4979322bf61792c0a Mon Sep 17 00:00:00 2001 From: "sravs3692@gmail.com" Date: Thu, 3 Sep 2020 22:59:56 +0530 Subject: [PATCH 2/3] updated --- assets/search.png | Bin 0 -> 2212 bytes index.html | 222 +++++++++++++++++++++++++++++++++++++++++++++- style.css | 177 ++++++++++++++++++++++++++++++++++++ 3 files changed, 398 insertions(+), 1 deletion(-) create mode 100644 assets/search.png diff --git a/assets/search.png b/assets/search.png new file mode 100644 index 0000000000000000000000000000000000000000..b13a3ff10a02de8e65aeafa3a3ff3cfd9ba0cc39 GIT binary patch literal 2212 zcmV;V2wV4wP)<{XlQ7AdwaCBwDG!p5dZ)O(n&-?RCt{2o#}Ss zIt+k|vXX?gVTVFk+E6CE|Kr_c=-lE3$f6vX;P2m@)A5mFS(ap5yuE2O8jVJy(P%Up zjYgxWQhYT|oKh?B8bfJIUEQ}(!!WH3^InvbTI$ZD zR^%4l+ZJlrS>QdIE)R$0CQf$-X{h=`XWFAyMNV={!Bin<`}HvogUjT!d-K6@n1-yk zOxoQmsp43!U>bIsv%W9>y%(Miw*pstq@arO88pGVmpTNWQ~5-?>Zy2?DQG~vcob1j zzNI?4Q^nlPNv0q;D~WXq3=SZ1uJB#E&_#Hc$Y{YhZ?^E^NInpBYZbW|fg!qnm=*}5 z{juZ|!AE@(7iH^+;w8n_(b*MNqXA(}@)l+#*qB*7x(uhnDE6iXVapJTqFE&pJ#QY+ z;ukBAVO39hA~rxWN2HVJb0rs8RUb3p?3C7>ey~$$Z7>Gqf+xnw5M93c%`f&(K7-h%n4>B|+S#|bjQ8ra)2u`b<~ z$bM=w#@o2qVAoor4P1~Rb5M_YqB3VRG#si!ewW#rk+zBpY)XbYbOA!{Lt~CTW5%u; z&X;AtNZ}4^96Q1sJ3pW7cSb$C^_6fne^^I@8(T5)pkdIQ)3EzJ;0~TJ zVH*;gU{ouOlqFbSZx*+0c2PBR<)JiE3vL?>@oiWa^W$^f06FBF5+?^ppBjp3PmV;6j<}AY^eR;v( zOhh@#j5)&~Iz0R#Vqc`&o9f@2yTU@1SNwysD1_oZfBllu&-{hI#$MS@H~fIq4}bc~xS|^@gyQRhA;R2nmDkU)}|oDqJf#3xlcfyi0gHT3*Eoe=XiztI#aN zxA=!^WmP;257-oWz9yJf3$|s};z>{t>%wYfc>kBGxGcU+e+i@DB`Z~FkAxT5cF}M- zIEc?kRd^EgLtlIWYCyM$rA}P2A(2w;BR<6mXu&l1H1>v)b`x%;jTIenDP~WdqkP-- z0y^UVHkDa~KYYuctGh6MsH4BKWslWO@_3Y|y%b+Nr#KJ|?it&BX2|qQmoZfl_%=Z- zZ(ioYw0k4p2v0kZ>X$00jvM_Yh^4cb85}s#sn1SjI7x0dH&Ii;RK?}Z{xpUQ0Q=qe z>$q4PXGxSbitOBMP-7}+q8EJey*VRz)(SGCbEo@G_Br+nH#Hl|msK%nt_S61Rjiqy z9MS^mL;7O#hr(EhuWxF=lSN=fCsAoTeR~_ME3ZbXM>2WwzTn2zm>0$EG$kD7Z_g^9 zL=`Gf_nB|O$#1KY21AP5X+}79^Yt-Jqq@DY$5?x6`STFmZaMd>UI*f2?#IHPsqRnz z5iU|Cog3Rn)=Y7o46++t14)(U3GDPja8A})H0oNWXBz8L$2QmTW;gyEFzLU?H}ZKNJH4je3sZW5Y;vC3PV*u5&U_Aknje4P2s^#U z3)tzi`_sqx5`RkaEU!LZz)oMlpSDChRX>j^#B17V!~Ch_Jh^FhI+56^5?xI3kl1NV zEfX%D*?4~{v(tw8Q(1gUEfX%j#Gf`Sk9q-rIux#-G|f&u@oY!uQBQ{~KBblkm!SFi z{tNiiKaJ0$d|R|rMScweix;p{i9aQ5DO?BIpEiL=h)*$III2Wj{2?jrPoECSzTdFA zl*~@GKYcbN{*Q0x_LWyF>lP18__Pn%|?f$`~Dq`9gJHsOY0000npmjs website redesign - + + +
+
+
+ black heart +

next() Packaged middleware

+
+ +
+
+
+
+ + + + +
+
+ + +
+
+
+ +
+

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

+ + +
+
+
+ +

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

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

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

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

+ +
+
+
+
+
+

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

+
+
+ + + +
+ + +
+ +
+ + + + +
+
+ + +
    +
    +

    Help

    +
  • Documentation
    • +
  • Community
    • +
  • Resources
    • +
  • Advisories
    • +
  • Status
    • +
  • Contact
    • +
    + +
    +

    About

    +
  • Company
    • +
  • Blog
    • +
  • Careers
    • +
  • Webinars
    • +
  • Press
    • +
  • Newsletter
    • +
    +
    +

    Terms & Policies

    + +
  • Policies
    • +
  • Terms of Use
    • +
  • Code of Conduct
    • +
    +
+
+ diff --git a/style.css b/style.css index e69de29..6d4e03f 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,177 @@ +@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; +} + +#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: 800px; + height: 40px; +} + +input[type=button] { + height: 45px; + width: 160px; + padding: 10px; + text-align-last: center; + margin: 0 15px; +} + + +#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 From f7f0b7581d69369ff431ac94a70ba279030c4ab2 Mon Sep 17 00:00:00 2001 From: "sravs3692@gmail.com" Date: Fri, 4 Sep 2020 13:11:03 +0530 Subject: [PATCH 3/3] final commit --- index.html | 75 +++++++++++++++++++++++++++---------- style.css | 107 ++++++++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 157 insertions(+), 25 deletions(-) diff --git a/index.html b/index.html index 4ee61d6..9d3e000 100644 --- a/index.html +++ b/index.html @@ -32,16 +32,19 @@
- - -
-
- - + + + Search + +
+ SignUp + Sign In +
- +
+

Build amazing

things

@@ -64,13 +67,20 @@

development up a notch

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

- +
+ +

Bring the best of open

@@ -92,9 +102,18 @@

and your company

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

+ +
+
+ + + + +
+
@@ -104,12 +123,11 @@
npm Free

community, Create public

packages, publish updates, audit

your dependencies, and more

- + + LEARN MORE
- - -
+
@@ -120,9 +138,11 @@
npm Pro & Teams

capabilities. Pro and Teams add the

ability to build private pacakges for

you, your team, or for customers.

- + + LEARN MORE
+
@@ -132,23 +152,37 @@
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

+

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

@@ -197,7 +231,9 @@

Fortune 500

diff --git a/style.css b/style.css index 6d4e03f..2485879 100644 --- a/style.css +++ b/style.css @@ -47,6 +47,10 @@ footer ul { list-style: none; } +footer img { + display: inline; +} + #img { display: flex; justify-content: center; @@ -127,18 +131,108 @@ p { } input[type=text] { - width: 800px; + width: 1040px; height: 40px; + margin: 0px; } -input[type=button] { - height: 45px; - width: 160px; +#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; - text-align-last: center; - margin: 0 15px; + 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; @@ -150,6 +244,7 @@ nav ul li { margin: 0 20px; } + .header { padding: 20px 0 0 50px; display: flex;