From 720f5ec8a72227e533229403519e06bcad0047ce Mon Sep 17 00:00:00 2001 From: arshmohd Date: Sun, 14 Aug 2022 06:12:52 +0530 Subject: [PATCH 1/6] Adding styles.css file for CSS --- styles.css | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 styles.css diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..e69de29 From 1854097392cca5d461ef90c568abc1d5e45578e7 Mon Sep 17 00:00:00 2001 From: arshmohd Date: Sun, 14 Aug 2022 17:57:16 +0530 Subject: [PATCH 2/6] Created document layout and basic layout grid-css and reset CSS setup complete with fonts import in html --- images/540px-Npm-logo.svg | Bin 0 -> 473 bytes images/favicon-npm.ico | Bin 0 -> 4154 bytes images/favicon-npm.svg | 9 +++ images/npm branding ICON.png | Bin 0 -> 1759 bytes images/npm-favicon.ico | Bin 0 -> 15406 bytes index.html | 130 ++++++++++++++++++++++++++++++++--- styles.css | 33 +++++++++ 7 files changed, 163 insertions(+), 9 deletions(-) create mode 100644 images/540px-Npm-logo.svg create mode 100644 images/favicon-npm.ico create mode 100644 images/favicon-npm.svg create mode 100644 images/npm branding ICON.png create mode 100644 images/npm-favicon.ico diff --git a/images/540px-Npm-logo.svg b/images/540px-Npm-logo.svg new file mode 100644 index 0000000000000000000000000000000000000000..7d82409ae72f16298f427bc519e3e32edabbafab GIT binary patch literal 473 zcmeAS@N?(olHy`uVBq!ia0y~yV3Gl{FEKF#$(pwxnSc~ax}&cn1H;CC?mvmFK)yn< zN02WALzNl>LqiJ#!!Mvv!wUw6QUeBtR|yOZRx=nF#0%!^3bX-Aa0d81y2U2?Yur@N{tu zskrs_)<(ew1s;b$sqdRN7TQZM+p_Ud%jrr--FxeuKd~*y`M;t76)ds-X7y^vvNmVa zEvq)qY(@deyB1sCDKyESzvj^cykN!~j=#oeDt??2eEqM$O$HTo_63|SI39Jc3&o;l zcptHiBgU3cqupaup{S3j3^P6-Y8g z4#y4h`B#+7V-$-&qf{Cr66tUF*1SXwgu{<06uxpW-b`i)tMz*Mjb7jFzD2+PhQG8_ z>RIDz=;qKsBJqU9Vwb62pTTZ#bM;-W4thN?`tdklzgCm_a{cB1$Ic4<{+Ihto + + + + + + + + diff --git a/images/npm branding ICON.png b/images/npm branding ICON.png new file mode 100644 index 0000000000000000000000000000000000000000..bf787faefa15a97990573b6ce4fe0b489a7bf5f5 GIT binary patch literal 1759 zcmeAS@N?(olHy`uVBq!ia0y~yVA;UHz*NS;3>2xD*PREX5(0ceT+c8toMB=*!^n7= zf#I^D;p6i1CzX}|{`~p>@8AEwfB*mg|L^zjAJ3lsc>MUsqenjBk$&W}eAA7*8pC;$=%5-i-LNg|s#V5U^a_1)RLVY()Vn77S(uHP?y zNwReR|Gws!-_b?Yb!MywAN{|2V`X?q`G?E01Lj7Wg?hry=Z#-OuclT1yXm+g!B&5p zR#@oXe^M;m*FNuhw>;<3&9~nl$cwGXvg-P)6v5EMsu0nTz{nv6BtUGS0GQ1ohQY?G z5U(V%iFg%am+WD{9W&#N$a+g=iswDmiKjFsXo3235o5z~_QHRqIZzTzT>4 znXkvssqM1nR*3L14fi|0BIjxB-!pEzmKR*n@-}>y^YUh9+c%Z`6D3Ugr;H4k;zYg+ xpk-k)3$8(EN&}a7D5$)yXC%6e2P&*%%vh|Qoh!5oSc@<)c)I$ztaD0e0syV9#oGV? literal 0 HcmV?d00001 diff --git a/images/npm-favicon.ico b/images/npm-favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..9663fa5e0e7015b439c9d8acaec28906aa8641c7 GIT binary patch literal 15406 zcmeHNy-EW?5FSwic1a-^s}!P^sca%*qxcFIhLl!$g*-!EKrk<0Z@|VMEDXjU5QPL0 zLBStP0-|U#?p)mEViLWarGX|N zCvCj$SDz341AjXK^*Rjv!~KW+)1Ub_ktnjr#>V5H&p-BDq|1Lf|LH#M8vXy?`Xd%= zUVnXFkNxKQORs~V{ab?rd#|x?zcbJeHL_2lwrDA#1p6dja|`D~z5)lp0dSz#IWRn& z4zIM3qi_w_F>o^v)^;+>sJlWc938{&&bPfVN5%@T{R z-|;Um7r9)1vp;H@aIycMy{`4dMbVs zY>PrKJioUH+n5l)H+k!;``3Woq5%B8!C&?O!TX enRDRd4flW}a0Cay0dT-i4yX@=Z~y_92)qL(h=0-m literal 0 HcmV?d00001 diff --git a/index.html b/index.html index a2d9c01..c3bf659 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,121 @@ -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 + + + + + + + +
+
+ +
Never Post Memes
+
+ +
+
+
+ +
+ +
+ + + + 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 +
+
+
+
+ +
+

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

+
+
+ +
+ + \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..089232b 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,33 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body{ + display: grid; + grid-template-columns: 1fr; + grid-template-rows: repeat(4, 1fr); + grid-template-areas: "header" + "hero-top" + "hero-middle" + "hero-bottom"; + font-family: 'Poppins', 'Arimo', 'Fira Mono', monospace, sans-serif, ; +} + +.header { + grid-area: header; +} + +.hero-top { +grid-area: hero-top; +} + +.hero-middle { +grid-area: hero-middle; +} + +.hero-bottom { +grid-area: hero-bottom; +} + From 552e80a03f305d779405c1ce56bff0c7203b2f45 Mon Sep 17 00:00:00 2001 From: arshmohd Date: Sun, 14 Aug 2022 22:40:50 +0530 Subject: [PATCH 3/6] Header section complete --- index.html | 12 ++--- styles.css | 128 ++++++++++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 122 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index c3bf659..2b4bb0d 100644 --- a/index.html +++ b/index.html @@ -12,13 +12,16 @@ +
- +
+
Never Post Memes
+
@@ -66,9 +69,6 @@

Build amazing things

-
- -

Bring the best of open source to your company

diff --git a/styles.css b/styles.css index 089232b..fc2049b 100644 --- a/styles.css +++ b/styles.css @@ -1,33 +1,137 @@ -*{ +* { margin: 0; padding: 0; box-sizing: border-box; } -body{ +body { display: grid; grid-template-columns: 1fr; - grid-template-rows: repeat(4, 1fr); + grid-template-rows: 20% 40% 40% 30%; grid-template-areas: "header" "hero-top" - "hero-middle" - "hero-bottom"; - font-family: 'Poppins', 'Arimo', 'Fira Mono', monospace, sans-serif, ; + "hero-middle" + "hero-bottom"; + font-family: 'Poppins', 'Arimo', 'Fira Mono', monospace, sans-serif, ; } .header { - grid-area: header; + grid-area: header; + display: flex; +} + +.header-top{ + display: flex; + justify-content: space-between; + margin: 3rem 2rem 2rem 1rem; +} + +.top-left-img-text{ + display: flex; + justify-content: center; + align-items: center; + margin-left: 1rem; +} + +.header-top-left-img{ + width: 1.5rem; + height: 1rem; +} + +.header-top-left, .header-top-right-nav{ + font-family: "Poppins"; + font-style: normal; + font-weight: 500; + font-size: 0.9rem; + line-height: 0.7rem; + color: black; + margin-left: 1.5rem; +} + +.header-top-right-nav{ + display: flex; + justify-content: center; + align-items: center; + +} + +.header-top-right-navitems { + margin-right: 1rem; +} + +.header-below{ + display: flex; + align-items: center; +} + +.header-below-npmlogo{ + width: 4rem; + height: 2rem; + margin-left: 2.5rem; +} + +form.header-below-searchbar { + border: none; + padding: 0.2rem; + background-color: #f2f2f2; + width: 77%; + margin-left: 1rem; +} + +input.nosubmit { + border: 1px solid #f2f2f2; + width: 100%; + padding: 9px 4px 9px 40px; + background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 13px center; + font-family: "Fira Mono", Monospace; + font-style: normal; + font-weight: 300; + font-size: 0.9rem; + line-height: 0.9rem; + color: #000; +} + +.header-below-search{ + background-color: #FC545A; + color:#fff; + padding: 1rem 1.5rem 1rem 1.5rem; + border: none; + margin-right: 2rem; + font-family: "Poppins"; + font-style: normal; + font-weight: 400; + font-size: 0.9rem; + line-height: 0.9rem; + +} + +.header-below-join, .header-below-login{ + font-family: "Poppins"; + font-style: normal; + font-weight: 500; + font-size: 0.9rem; + line-height: 0.9rem; + color: #000; + text-decoration: none; + margin-right: 1rem; + +} + +.header-below-join { + padding: 0.7rem 1.5rem 0.7rem 1.5rem; + border: 0.5px solid black; + border-top-width: 2px; + } .hero-top { -grid-area: hero-top; + grid-area: hero-top; } .hero-middle { -grid-area: hero-middle; + grid-area: hero-middle; } .hero-bottom { -grid-area: hero-bottom; -} - + grid-area: hero-bottom; +} \ No newline at end of file From e7a319370d92bde5e956b5848e790e7bb4b66588 Mon Sep 17 00:00:00 2001 From: arshmohd Date: Sun, 14 Aug 2022 23:27:44 +0530 Subject: [PATCH 4/6] Section-1 completed --- index.html | 4 ++-- styles.css | 57 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 57 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 2b4bb0d..5fdc8aa 100644 --- a/index.html +++ b/index.html @@ -64,8 +64,8 @@

Build amazing things

and build powerful applications using modern open source code.
- See plans - Join for free + +

Join for free

diff --git a/styles.css b/styles.css index fc2049b..329b49d 100644 --- a/styles.css +++ b/styles.css @@ -7,7 +7,7 @@ body { display: grid; grid-template-columns: 1fr; - grid-template-rows: 20% 40% 40% 30%; + grid-template-rows: 2.2% 10% 40% 30%; grid-template-areas: "header" "hero-top" "hero-middle" @@ -35,7 +35,6 @@ body { .header-top-left-img{ width: 1.5rem; - height: 1rem; } .header-top-left, .header-top-right-nav{ @@ -126,6 +125,60 @@ input.nosubmit { .hero-top { grid-area: hero-top; + background-color: #F8F4F4; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.hero-top-heading { +font-family: "Poppins"; +font-style: normal; +font-weight: 900; +font-size: 5rem; +line-height: 15rem; +color: #000; + +} + +.hero-top-article{ + width: 24%; + text-align: center; + font-family: "Arimo", "sans-serif"; + font-style: normal; + font-weight: 400; + font-size: 1.2rem; + line-height: 2rem; + color: #000; +} + +.hero-top-plans-join{ + display: flex; + justify-content: center; + align-items: center; + margin: 4rem 0 8rem 0; +} + +.hero-top-plans, .hero-top-join { + font-family: "Arimo", "sans-serif"; + font-style: normal; + font-weight: 900; + font-size: 1.5rem; + line-height: 3rem; +} + + + +.hero-top-plans { + border: none; + padding: 0.8rem 5rem 0.8rem 5rem; + background-color: #FC545A; + margin-left: 1rem; + color: #fff; + box-shadow: 8px 8px 2.5px lightpink; + margin-right: 5rem; + } .hero-middle { From 723056420d4a07080acd2917db013db2ee9cc7bb Mon Sep 17 00:00:00 2001 From: arshmohd Date: Mon, 15 Aug 2022 12:10:45 +0530 Subject: [PATCH 5/6] HTML CSS Assignment complete --- Backup-HTML.html | 125 ++++++++++++++ backup-CSS.css | 279 ++++++++++++++++++++++++++++++++ images/familiar-features 1.png | Bin 0 -> 306 bytes images/middleComponent.svg | 8 + images/npm-audit 1.png | Bin 0 -> 473 bytes images/team-management 1.png | Bin 0 -> 547 bytes images/zero-configuration 1.png | Bin 0 -> 348 bytes images/zero-configuration.svg | 2 +- index.html | 17 +- styles.css | 205 ++++++++++++++++------- 10 files changed, 576 insertions(+), 60 deletions(-) create mode 100644 Backup-HTML.html create mode 100644 backup-CSS.css create mode 100644 images/familiar-features 1.png create mode 100644 images/middleComponent.svg create mode 100644 images/npm-audit 1.png create mode 100644 images/team-management 1.png create mode 100644 images/zero-configuration 1.png diff --git a/Backup-HTML.html b/Backup-HTML.html new file mode 100644 index 0000000..9011582 --- /dev/null +++ b/Backup-HTML.html @@ -0,0 +1,125 @@ + + + + + + + + npm + + + + + + + + +
+
+
+ +
Never Post Memes
+
+
+ +
+
+
+ +
+ +
+ + + + Join + +
+
+
+

Build amazing things

+
+ Essential JavaScript development tools that help you go to market faster + and build powerful applications using modern open source code. +
+
+ +

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

+
+
+
+ +
+
+ \ No newline at end of file diff --git a/backup-CSS.css b/backup-CSS.css new file mode 100644 index 0000000..8a6a8c7 --- /dev/null +++ b/backup-CSS.css @@ -0,0 +1,279 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + overflow-y: scroll; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 10.5% 55% 50% 15%; + grid-template-areas: + "header" + "hero-top" + "hero-middle" + "hero-bottom"; + font-family: "Poppins", "Arimo", "Fira Mono", monospace, sans-serif; +} + +.header { + grid-area: header; + display: flex; +} + +.header-top { + display: flex; + justify-content: space-between; + margin: 3rem 2rem 2rem 1rem; +} + +.top-left-img-text { + display: flex; + justify-content: center; + align-items: center; + margin-left: 1rem; +} + +.header-top-left-img { + width: 1.5rem; +} + +.header-top-left, +.header-top-right-nav { + font-family: "Poppins"; + font-style: normal; + font-weight: 500; + font-size: 0.9rem; + line-height: 0.7rem; + color: black; + margin-left: 1.5rem; +} + +.header-top-right-nav { + display: flex; + justify-content: center; + align-items: center; +} + +.header-top-right-navitems { + margin-right: 1rem; +} + +.header-below { + display: flex; + align-items: center; +} + +.header-below-npmlogo { + width: 4rem; + height: 2rem; + margin-left: 2.5rem; +} + +form.header-below-searchbar { + border: none; + padding: 0.2rem; + background-color: #f2f2f2; + width: 77%; + margin-left: 1rem; +} + +input.nosubmit { + border: 1px solid #f2f2f2; + width: 100%; + padding: 9px 4px 9px 40px; + background: transparent + url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") + no-repeat 13px center; + font-family: "Fira Mono", Monospace; + font-style: normal; + font-weight: 300; + font-size: 0.9rem; + line-height: 0.9rem; + color: #000; +} + +.header-below-search { + background-color: #fc545a; + color: #fff; + padding: 1rem 1.5rem 1rem 1.5rem; + border: none; + margin-right: 2rem; + font-family: "Poppins"; + font-style: normal; + font-weight: 400; + font-size: 0.9rem; + line-height: 0.9rem; +} + +.header-below-join, +.header-below-login { + font-family: "Poppins"; + font-style: normal; + font-weight: 500; + font-size: 0.9rem; + line-height: 0.9rem; + color: #000; + text-decoration: none; + margin-right: 1rem; +} + +.header-below-join { + padding: 0.7rem 1.5rem 0.7rem 1.5rem; + border: 0.5px solid black; + border-top-width: 2px; +} + +.hero-top { + grid-area: hero-top; + background-color: #f8f4f4; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.hero-top-heading { + font-family: "Poppins"; + font-style: normal; + font-weight: 900; + font-size: 5rem; + line-height: 15rem; + color: #000; +} + +.hero-top-article { + width: 24%; + text-align: center; + font-family: "Arimo", "sans-serif"; + font-style: normal; + font-weight: 400; + font-size: 1.2rem; + line-height: 2rem; + color: #000; +} + +.hero-top-plans-join { + display: flex; + justify-content: center; + align-items: center; + margin: 4rem 0 8rem 0; +} + +.hero-top-plans, +.hero-top-join { + font-family: "Arimo", "sans-serif"; + font-style: normal; + font-weight: 900; + font-size: 1.5rem; + line-height: 3rem; +} + +.hero-top-plans { + border: none; + padding: 0.8rem 5rem 0.8rem 5rem; + background-color: #fc545a; + margin-left: 1rem; + color: #fff; + box-shadow: 8px 8px 2.5px lightpink; + margin-right: 5rem; +} + +.hero-middle { + grid-area: hero-middle; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.triangles-6 img { + width: 21rem; +} + +.hero-middle-h2 { + font-family: "Poppins", "sans-serif"; + font-style: normal; + border: solid 1px #ffebb5; + padding: 0.2rem 0.4rem 0rem 0.8rem; + transform: skewX(+5deg); + font-weight: 600; + font-size: 1.8rem; + line-height: 2.2rem; + color: #333; + background-color: #ffebb5; + width: 38%; + text-align: center; + margin-top: 4rem; +} + +.hero-middle-p { + font-family: "Poppins"; + font-style: normal; + font-weight: 400; + font-size: 0.7rem; + line-height: 1rem; + color: black; + width: 30%; + text-align: center; + margin-top: 1.5rem; +} + +.hero-bottom { + grid-area: hero-bottom; + display: flex; + justify-content: center; + align-items: center; +} + +.hero-bottom-cards { + display: flex; + justify-content: center; + align-items: center; +} + +.hero-bottom-card { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + width: 8%; + margin-left: 5rem; +} + +.hero-bottom-card-heading{ + font-family: "Poppins", "sans-serif "; + font-style: normal; + font-weight: 900; + font-size: 0.8rem; + line-height: 1.5rem; + color: red; + margin-top: 0.5rem; +} + +.hero-bottom-card-para { + font-family: "Arimo", "sans-serif"; + font-weight: 400; + font-size: 0.7rem; + line-height: 1rem; + color: black; + margin-top: 0.8rem; +} + +.hero-bottom-button { + border: none; + padding: 0.8rem 4rem 0.8rem 4rem; + background-color: black; + margin-left: 1rem; + color: #fff; + box-shadow: 8px 8px 2.5px lightgray; + margin-right: 5rem; + font-family: "Poppins"; + font-style: normal; + font-weight: 900; + font-size: 1rem; + line-height: 1rem; + width: 18%; + align-content: center; +} diff --git a/images/familiar-features 1.png b/images/familiar-features 1.png new file mode 100644 index 0000000000000000000000000000000000000000..20cbb94b648e2194789006d9341719542fbb5793 GIT binary patch literal 306 zcmeAS@N?(olHy`uVBq!ia0vp^azHH3!3HE{?Ehy0Db50q$YKTtZeb8+WSBKa0w~B> z9OUlAuW?1$^h6YEb(A9I-X*zS@Hzm{LI49mYuTn{Y^3;RB}SYBwhRA7oe z@ikpwf=rRZ?{|6nMlTGX$QYgH|I}%p_LbP0l+XkKW|(iF literal 0 HcmV?d00001 diff --git a/images/middleComponent.svg b/images/middleComponent.svg new file mode 100644 index 0000000..30b1bbe --- /dev/null +++ b/images/middleComponent.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/images/npm-audit 1.png b/images/npm-audit 1.png new file mode 100644 index 0000000000000000000000000000000000000000..936b18252134d9db569a8de9afb760128edd4643 GIT binary patch literal 473 zcmV;~0Ve*5P)k$jLj-VpKOZ^iP zXA$Co$CJQxB10rgGBgVe`suO--u4dEJOg+{p42)PX2q#D!5VIe|FAy^J0hQu_s9oi zj_j;@&ud|?YCHDLc}HBmbPDusq*tS5O{MB3T)q%S)o7g|Ysru&>l|S}9GHV2JD5HN ztzW^KfP{TGn(X0x6TnO}yJ_vHeIj3^|2oi!c65vgb79XtP7+4q#AA5lK+=4{bTh`| zrFzbqag-&T?=l}qJixSZ%KxVUKOLa)aM6zG`q+BJ2bi8jyEb+e;x-|B#Oo%mlF_&1qCt=BoaqZNVvi74S*8_Br1!;5gcxV1GRMTbVvv@sZ5rH z;;;HDuTJ;ObZ0t%zXnXqOqpk94?StbM0!pde1IMlSFXoQ08cH$UoWLVGSeLj`drE~6FLa|*1#r3 z2a=6qR>R20nQv8#$Z{`3M-^>TFT0gZ^7#zWQf+pwvRco2(ZH?sF9Q#-z*4VN99=M{ zdj8;eCt$9b33IHr(y=m!?Im-_d@xTohvF=PsniHXv(H5^l^mmJi==kaJVJ|oem~Un zpknj&J5yFtxgNva@JR<=ejefbU_z88vkJGWOBdGIrp&(OeP<2iIo@K{nFD4MCfAS5 zJKAmhdB7uPjoF16xYW(74r+cQQDbQY5zLYi9C>M=ME#KZKT-d3jLSyka3BNm>N+q3 zy{UOVFHZT6rHWIBkymq95$gX&bI7OnPA} l{fXkMq57@*l+@kH@e}{KTv62}c4+_r002ovPDHLkV1jl$=*|ED literal 0 HcmV?d00001 diff --git a/images/zero-configuration 1.png b/images/zero-configuration 1.png new file mode 100644 index 0000000000000000000000000000000000000000..9a420601c81dfbd8c46a293241279eb2fe5a812c GIT binary patch literal 348 zcmeAS@N?(olHy`uVBq!ia0vp^Qa~)m!3HGnb@XfnQk(@Ik;M!Q+`=Ht$S`Y;1W=H% zILO_JVcj{Imp~3nx}&cn1H;CC?mvmFK>kNh7srqa#iXqWI?Yr2QNYP9iR?1-CvtcJLAO zliA(l`?Rg#(T&g^{g?S)cDpU!-rPM=MP%a4PwrhEriRMvm}@KT-z?l57*_3?)4Atr z{ES8&i?Wp7B9ELB!>5;6oZ24>u0I}`RBIkJ=jLDD$m0%krtnD^a>=PwHO*i6Jm%12 z$F)^Gd+xLBOih?x9y?dPV7fxs1??Qpy`d_G=I{MKsKjlXzero-configuration \ No newline at end of file + \ No newline at end of file diff --git a/index.html b/index.html index 5fdc8aa..6b58696 100644 --- a/index.html +++ b/index.html @@ -69,6 +69,9 @@

Build amazing things

+
+ +

Bring the best of open source to your company

@@ -83,7 +86,7 @@

- +

Zero configuration

Create an org, add your team,and start collaborating. Nothing to @@ -91,7 +94,7 @@

Zero configuration

- +

Team management

Control who has access to what modules within your team namespace @@ -99,7 +102,7 @@

Team management

- +

Familiar features

npm Orgs has 100% parity with all the public npm registry features @@ -107,7 +110,7 @@

Familiar features

- +

npm audit

Enjoy the security auditing features built into the npm client, a @@ -115,7 +118,11 @@

npm audit

- +
+
+ +
+ \ No newline at end of file diff --git a/styles.css b/styles.css index 329b49d..6f76e74 100644 --- a/styles.css +++ b/styles.css @@ -5,14 +5,17 @@ } body { + overflow-y: scroll; display: grid; grid-template-columns: 1fr; - grid-template-rows: 2.2% 10% 40% 30%; - grid-template-areas: "header" - "hero-top" + grid-template-rows: 10.5% 55% 50% 15% 5%; + grid-template-areas: + "header" + "hero-top" "hero-middle" - "hero-bottom"; - font-family: 'Poppins', 'Arimo', 'Fira Mono', monospace, sans-serif, ; + "hero-bottom" + "footer"; + font-family: "Poppins", "Arimo", "Fira Mono", monospace, sans-serif; } .header { @@ -20,50 +23,50 @@ body { display: flex; } -.header-top{ +.header-top { display: flex; justify-content: space-between; margin: 3rem 2rem 2rem 1rem; } -.top-left-img-text{ +.top-left-img-text { display: flex; justify-content: center; align-items: center; margin-left: 1rem; } -.header-top-left-img{ +.header-top-left-img { width: 1.5rem; } -.header-top-left, .header-top-right-nav{ - font-family: "Poppins"; - font-style: normal; - font-weight: 500; - font-size: 0.9rem; - line-height: 0.7rem; - color: black; - margin-left: 1.5rem; +.header-top-left, +.header-top-right-nav { + font-family: "Poppins"; + font-style: normal; + font-weight: 500; + font-size: 0.9rem; + line-height: 0.7rem; + color: black; + margin-left: 1.5rem; } -.header-top-right-nav{ +.header-top-right-nav { display: flex; justify-content: center; align-items: center; - } .header-top-right-navitems { margin-right: 1rem; } -.header-below{ - display: flex; - align-items: center; +.header-below { + display: flex; + align-items: center; } -.header-below-npmlogo{ +.header-below-npmlogo { width: 4rem; height: 2rem; margin-left: 2.5rem; @@ -81,18 +84,20 @@ input.nosubmit { border: 1px solid #f2f2f2; width: 100%; padding: 9px 4px 9px 40px; - background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 13px center; + background: transparent + url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") + no-repeat 13px center; font-family: "Fira Mono", Monospace; - font-style: normal; - font-weight: 300; - font-size: 0.9rem; - line-height: 0.9rem; - color: #000; + font-style: normal; + font-weight: 300; + font-size: 0.9rem; + line-height: 0.9rem; + color: #000; } -.header-below-search{ - background-color: #FC545A; - color:#fff; +.header-below-search { + background-color: #fc545a; + color: #fff; padding: 1rem 1.5rem 1rem 1.5rem; border: none; margin-right: 2rem; @@ -101,10 +106,10 @@ input.nosubmit { font-weight: 400; font-size: 0.9rem; line-height: 0.9rem; - } -.header-below-join, .header-below-login{ +.header-below-join, +.header-below-login { font-family: "Poppins"; font-style: normal; font-weight: 500; @@ -113,36 +118,36 @@ input.nosubmit { color: #000; text-decoration: none; margin-right: 1rem; - } .header-below-join { padding: 0.7rem 1.5rem 0.7rem 1.5rem; border: 0.5px solid black; border-top-width: 2px; - } .hero-top { grid-area: hero-top; - background-color: #F8F4F4; + background-color: #f8f4f4; display: flex; flex-direction: column; justify-content: center; align-items: center; + +box-shadow: 0 -4px 8px -8px #333; + } .hero-top-heading { -font-family: "Poppins"; -font-style: normal; -font-weight: 900; -font-size: 5rem; -line-height: 15rem; -color: #000; - + font-family: "Poppins"; + font-style: normal; + font-weight: 900; + font-size: 5rem; + line-height: 15rem; + color: #000; } -.hero-top-article{ +.hero-top-article { width: 24%; text-align: center; font-family: "Arimo", "sans-serif"; @@ -153,38 +158,130 @@ color: #000; color: #000; } -.hero-top-plans-join{ +.hero-top-plans-join { display: flex; justify-content: center; align-items: center; margin: 4rem 0 8rem 0; } -.hero-top-plans, .hero-top-join { +.hero-top-plans, +.hero-top-join { font-family: "Arimo", "sans-serif"; - font-style: normal; - font-weight: 900; - font-size: 1.5rem; - line-height: 3rem; + font-style: normal; + font-weight: 900; + font-size: 1.5rem; + line-height: 3rem; } - - .hero-top-plans { border: none; padding: 0.8rem 5rem 0.8rem 5rem; - background-color: #FC545A; + background-color: #fc545a; margin-left: 1rem; color: #fff; box-shadow: 8px 8px 2.5px lightpink; margin-right: 5rem; - } .hero-middle { grid-area: hero-middle; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.triangles-6 img { + width: 21rem; +} + +.hero-middle-h2 { + font-family: "Poppins", "sans-serif"; + font-style: normal; + border: solid 1px #ffebb5; + padding: 0.2rem 0.4rem 0rem 0.8rem; + transform: skewX(+5deg); + font-weight: 600; + font-size: 1.8rem; + line-height: 2.2rem; + color: #333; + background-color: #ffebb5; + width: 38%; + text-align: center; + margin-top: 4rem; +} + +.hero-middle-p { + font-family: "Poppins"; + font-style: normal; + font-weight: 400; + font-size: 0.7rem; + line-height: 1rem; + color: black; + width: 30%; + text-align: center; + margin-top: 1.5rem; } .hero-bottom { grid-area: hero-bottom; + display: flex; + justify-content: center; + align-items: center; +} + +.hero-bottom-cards { + display: flex; + justify-content: center; + align-items: center; +} + +.hero-bottom-card { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + width: 8%; + margin-left: 5rem; +} + +.hero-bottom-card-heading{ + font-family: "Poppins", "sans-serif "; + font-style: normal; + font-weight: 900; + font-size: 0.8rem; + line-height: 1.5rem; + color: red; + margin-top: 0.5rem; +} + +.hero-bottom-card-para { + font-family: "Arimo", "sans-serif"; + font-weight: 400; + font-size: 0.7rem; + line-height: 1rem; + color: black; + margin-top: 0.8rem; +} + +.hero-bottom-button { + border: none; + padding: 0.8rem 6rem 0.8rem 6rem; + background-color: black; + margin-left: 1rem; + color: #fff; + box-shadow: 8px 8px 2.5px lightgray; + margin-right: 5rem; + font-family: "Poppins"; + font-style: normal; + font-weight: 900; + font-size: 1rem; + line-height: 1rem; + align-content: center; +} + +.last-button { + grid-area: footer; + margin-left: 52rem; } \ No newline at end of file From c2757ab618f33051a4224483fd5f96eda543aaa6 Mon Sep 17 00:00:00 2001 From: arshmohd Date: Mon, 15 Aug 2022 12:49:50 +0530 Subject: [PATCH 6/6] removed the backup code that was created for my own reference --- Backup-HTML.html | 125 --------------------- backup-CSS.css | 279 ----------------------------------------------- 2 files changed, 404 deletions(-) delete mode 100644 Backup-HTML.html delete mode 100644 backup-CSS.css diff --git a/Backup-HTML.html b/Backup-HTML.html deleted file mode 100644 index 9011582..0000000 --- a/Backup-HTML.html +++ /dev/null @@ -1,125 +0,0 @@ - - - - - - - - npm - - - - - - - - -
-
-
- -
Never Post Memes
-
-
- -
-
-
- -
- -
- - - - Join - -
-
-
-

Build amazing things

-
- Essential JavaScript development tools that help you go to market faster - and build powerful applications using modern open source code. -
-
- -

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

-
-
-
- -
-
- \ No newline at end of file diff --git a/backup-CSS.css b/backup-CSS.css deleted file mode 100644 index 8a6a8c7..0000000 --- a/backup-CSS.css +++ /dev/null @@ -1,279 +0,0 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - overflow-y: scroll; - display: grid; - grid-template-columns: 1fr; - grid-template-rows: 10.5% 55% 50% 15%; - grid-template-areas: - "header" - "hero-top" - "hero-middle" - "hero-bottom"; - font-family: "Poppins", "Arimo", "Fira Mono", monospace, sans-serif; -} - -.header { - grid-area: header; - display: flex; -} - -.header-top { - display: flex; - justify-content: space-between; - margin: 3rem 2rem 2rem 1rem; -} - -.top-left-img-text { - display: flex; - justify-content: center; - align-items: center; - margin-left: 1rem; -} - -.header-top-left-img { - width: 1.5rem; -} - -.header-top-left, -.header-top-right-nav { - font-family: "Poppins"; - font-style: normal; - font-weight: 500; - font-size: 0.9rem; - line-height: 0.7rem; - color: black; - margin-left: 1.5rem; -} - -.header-top-right-nav { - display: flex; - justify-content: center; - align-items: center; -} - -.header-top-right-navitems { - margin-right: 1rem; -} - -.header-below { - display: flex; - align-items: center; -} - -.header-below-npmlogo { - width: 4rem; - height: 2rem; - margin-left: 2.5rem; -} - -form.header-below-searchbar { - border: none; - padding: 0.2rem; - background-color: #f2f2f2; - width: 77%; - margin-left: 1rem; -} - -input.nosubmit { - border: 1px solid #f2f2f2; - width: 100%; - padding: 9px 4px 9px 40px; - background: transparent - url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") - no-repeat 13px center; - font-family: "Fira Mono", Monospace; - font-style: normal; - font-weight: 300; - font-size: 0.9rem; - line-height: 0.9rem; - color: #000; -} - -.header-below-search { - background-color: #fc545a; - color: #fff; - padding: 1rem 1.5rem 1rem 1.5rem; - border: none; - margin-right: 2rem; - font-family: "Poppins"; - font-style: normal; - font-weight: 400; - font-size: 0.9rem; - line-height: 0.9rem; -} - -.header-below-join, -.header-below-login { - font-family: "Poppins"; - font-style: normal; - font-weight: 500; - font-size: 0.9rem; - line-height: 0.9rem; - color: #000; - text-decoration: none; - margin-right: 1rem; -} - -.header-below-join { - padding: 0.7rem 1.5rem 0.7rem 1.5rem; - border: 0.5px solid black; - border-top-width: 2px; -} - -.hero-top { - grid-area: hero-top; - background-color: #f8f4f4; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.hero-top-heading { - font-family: "Poppins"; - font-style: normal; - font-weight: 900; - font-size: 5rem; - line-height: 15rem; - color: #000; -} - -.hero-top-article { - width: 24%; - text-align: center; - font-family: "Arimo", "sans-serif"; - font-style: normal; - font-weight: 400; - font-size: 1.2rem; - line-height: 2rem; - color: #000; -} - -.hero-top-plans-join { - display: flex; - justify-content: center; - align-items: center; - margin: 4rem 0 8rem 0; -} - -.hero-top-plans, -.hero-top-join { - font-family: "Arimo", "sans-serif"; - font-style: normal; - font-weight: 900; - font-size: 1.5rem; - line-height: 3rem; -} - -.hero-top-plans { - border: none; - padding: 0.8rem 5rem 0.8rem 5rem; - background-color: #fc545a; - margin-left: 1rem; - color: #fff; - box-shadow: 8px 8px 2.5px lightpink; - margin-right: 5rem; -} - -.hero-middle { - grid-area: hero-middle; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.triangles-6 img { - width: 21rem; -} - -.hero-middle-h2 { - font-family: "Poppins", "sans-serif"; - font-style: normal; - border: solid 1px #ffebb5; - padding: 0.2rem 0.4rem 0rem 0.8rem; - transform: skewX(+5deg); - font-weight: 600; - font-size: 1.8rem; - line-height: 2.2rem; - color: #333; - background-color: #ffebb5; - width: 38%; - text-align: center; - margin-top: 4rem; -} - -.hero-middle-p { - font-family: "Poppins"; - font-style: normal; - font-weight: 400; - font-size: 0.7rem; - line-height: 1rem; - color: black; - width: 30%; - text-align: center; - margin-top: 1.5rem; -} - -.hero-bottom { - grid-area: hero-bottom; - display: flex; - justify-content: center; - align-items: center; -} - -.hero-bottom-cards { - display: flex; - justify-content: center; - align-items: center; -} - -.hero-bottom-card { - display: flex; - flex-direction: column; - justify-content: center; - align-items: flex-start; - width: 8%; - margin-left: 5rem; -} - -.hero-bottom-card-heading{ - font-family: "Poppins", "sans-serif "; - font-style: normal; - font-weight: 900; - font-size: 0.8rem; - line-height: 1.5rem; - color: red; - margin-top: 0.5rem; -} - -.hero-bottom-card-para { - font-family: "Arimo", "sans-serif"; - font-weight: 400; - font-size: 0.7rem; - line-height: 1rem; - color: black; - margin-top: 0.8rem; -} - -.hero-bottom-button { - border: none; - padding: 0.8rem 4rem 0.8rem 4rem; - background-color: black; - margin-left: 1rem; - color: #fff; - box-shadow: 8px 8px 2.5px lightgray; - margin-right: 5rem; - font-family: "Poppins"; - font-style: normal; - font-weight: 900; - font-size: 1rem; - line-height: 1rem; - width: 18%; - align-content: center; -}