From d3935acf092ef35a98abca9a54ff518d395019e9 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 5 Jun 2019 03:10:00 -0500 Subject: [PATCH 1/2] Add styles and HTML Structure for npm website. --- starter-code/images/npm-logo-square.png | Bin 0 -> 1269 bytes starter-code/index.html | 127 ++++++++++- starter-code/styles.css | 286 ++++++++++++++++++++++++ 3 files changed, 404 insertions(+), 9 deletions(-) create mode 100644 starter-code/images/npm-logo-square.png create mode 100644 starter-code/styles.css diff --git a/starter-code/images/npm-logo-square.png b/starter-code/images/npm-logo-square.png new file mode 100644 index 0000000000000000000000000000000000000000..875747a9646450d708a1a44328396e472a8fd049 GIT binary patch literal 1269 zcmeAS@N?(olHy`uVBq!ia0y~yU~~Xs4mP03*$GQm0V%d5Z+91l{~)+v@AAn&5zYdS z$YKTtZeb8+WSBKa0w~B{;_2(k{+NxGk%ND)o%IF=29_pI7srr_TW{}N%nB}-IqlI%c{SA z`*=S2{K>f%JBteP@-DgU&NY)d?R`0T<8z*Qf3s3Qe0iy#WAeA_`FY*zi#5s^Y?+wf z>oBsg2skh>;wQERrm4qW`JD7|`mswv*6-#VoH=u&0?+TeYIm=RiRbT&h~!LuUr~0A z+arGQugm@BQT5@;e?4!04O};O_AEQW?>cXLdw)+|9iF^j*Sh>w$p3YFtB+sW^jKE% z!1C+sQsw>^sD8UWnf=_HNM6Zzf`IXzXrrHZh zeC^CtYWTChrsm-x!{`Ib1_UD*oCfx+bcyS@r89kVuXQ5gZ@!;{EC8!Nv0VX4j4j&A2%I zNcrY}zmt^er>(la{`r8i_WZ@4=d`v<4|IfVnb8zR*lUwF2ulRST$hOO^ z)~JGojd0`wz1?6wk+bQ8clHgZx##vN@aP?v4c`0lvq$#YGHc!GTkGEcTbQD@^ZyOI zg`zoYe|C00oM%vxBD~(rZvO+hBSZuSI7bXj-UQlu!0fm9nalf@FJ2z626BX_tDnm{ Hr-UW|&TWWX literal 0 HcmV?d00001 diff --git a/starter-code/index.html b/starter-code/index.html index 0a7febf..662e62c 100644 --- a/starter-code/index.html +++ b/starter-code/index.html @@ -1,12 +1,121 @@ - - - - - npm - - - - + + + + + + + + npm + + + + +
+
+ + + + sign up or log in + +
+
+

Build amazing things

+

+ npm is the package manager for Javascript and the world's largest + software registry. Discover packages of reusable code - and assemble + them in powerful new ways. +

+ Sign up for npm +
+
+ +
+
+ +
+
+

npm Orgs is powerful collaboration - for free

+
    +
  • Encourage code discovery and re-use within teams
    • +
  • Publish and control access to your own namespace
    • +
  • Manage public and private code with the same workflow
    • +
+ Sign up for Orgs +

or, Learn more about Orgs

+
+
+ +
+
+

What is npm?

+

+ Use npm to install, share, and distribute code;
manage + dependencies in your projects; and
share & receive feedback with + others. +

+ Install npm + +
+
+ +
+
+

What can you make with 475,000 building blocks?

+

+ The npm registry hosts almost half a million packages of free, + reusable code - the largest software registry in the world. +

+
+
+ + + + +
+
+ + diff --git a/starter-code/styles.css b/starter-code/styles.css new file mode 100644 index 0000000..f596fd2 --- /dev/null +++ b/starter-code/styles.css @@ -0,0 +1,286 @@ +* { + margin: 0; + padding: 0; +} + +html, +body { + height: 100%; +} + +h1 { + font-size: 4em; +} + +h2 { + font-weight: lighter; + font-size: 2.8em; +} + +body { + font-family: "Open Sans", Helvetica, sans-serif; +} + +p { + padding: 20px 0 40px 0; +} + +section { + height: 400px; + padding-top: 1.5em; +} + +/* NAV BAR */ + +nav { + background-color: #c12127; + color: rgba(255, 255, 225, 0.8); + padding: 10px 0 10px 0; + height: auto; + display: flex; + justify-content: space-between; +} + +nav a { + color: rgba(255, 255, 255, 0.8); + text-decoration: none; +} + +.top-links { + float: right; + padding: 0; + margin: 0 15px 0 0; +} + +.top-links li { + display: inline-block; + margin: 0 15px; +} + +.top-left { + float: left; + padding: 0; + margin: 0 15px 0 0; +} + +.top-left a { + padding: 0 10px 0 10px; +} + +.logo { + width: 30%; + display: inline-block; + padding: 25px 0 10px 0; + vertical-align: top; +} + +.logo p { + text-align: center; + padding: 5px 15px 94px 15px; + color: grey; +} + +.logo a { + color: #c12127; + text-decoration: none; +} + +.logo img { + padding: 10px; +} + +.search-icon { + background-color: rgb(31, 82, 111); + height: 35px; + width: 35px; + text-align: center; + display: inline-block; +} + +.search-icon i { + vertical-align: bottom; + line-height: 2; +} + +#search-input { + width: 70%; + background-color: rgb(31, 82, 111); + border: none; + height: 35px; + display: inline-block; + position: relative; +} + +.search-bar { + display: flex; + justify-content: space-between; + padding-top: 10px; +} + +.search-bar input { + flex-grow: 4; + background-color: #1f526f; + border: 2px solid rgb(64, 108, 132); + color: white; + margin: 0 2px 0 10px; +} + +.search-bar img { + width: auto; + height: 35px; + margin: 0 0.5em 0 0.5em; +} + +.search-bar a { + color: var(--fff); + text-decoration: none; + margin: 0 0.5em 0 0.5em; +} + +/* TEXT STYLES */ + +.lighter { + font-weight: lighter; +} + +.small { + padding: 10px 0 10px 0 !important; +} + +/* SECTIONS */ + +/* HEADER - ONE */ + +header { + color: white; + height: 450px; + background-image: url("images/city scape.svg"); + background-color: #215c7d; +} + +header h1 { + padding: 20px 0 0 0; +} +header p { + font-size: 1em; +} + +.header-button { + background-color: rgb(240, 146, 51); +} + +.content-one { + width: 900px; + padding-top: 1em; + margin: 0 auto; +} +.content-one a { + color: white; +} +.content-one p { + width: 60%; +} +.content-one img { + float: right; +} + +/* COLLABORATION - TWO */ + +#two { + color: white; + background-color: rgb(39, 53, 71); + display: flex; + justify-content: center; +} + +.two-svg { + float: left; + margin-top: 25px; +} +#two a { + color: white; +} + +#two h2 { + padding: 0 0 0 20px; +} + +.two-content { + max-width: 500px; + float: right; + margin: 1em; +} + +.two-content ul { + padding: 20px 0 40px 40px; + line-height: 1.5em; +} + +.two-content p { + margin-top: 20px; + margin-left: 20px; +} + +.collab-button { + color: white; + background-color: rgb(203, 56, 55); + margin-left: 20px; +} + +#collaboration { + height: 275px; + display: block; +} + +/* WHAT IS NPM? - THREE */ + +#three { + background-size: cover; + /* background-image: url("images/city-scape.svg"); */ + color: white; + background-color: #2481b7; +} + +#three a { + background-color: rgb(31, 82, 111); +} + +#three h2 { + margin-top: 24px; +} + +.lnk-btn { + width: 150px; + padding: 14px 30px 14px 30px; + border-radius: 40px; + text-decoration: none; +} + +.content-three { + max-width: 900px; + justify-content: center; + margin: 0 auto; +} +.content-three a { + color: var(--fff); + background-color: rgb(240, 146, 51); +} + +.content-three img { + float: right; +} + +/* BUILDING BLOCKS */ + +.content-four { + margin: 0 auto; + text-align: center; + width: 900px; +} + +.heading { + padding: 70px 0 0 0; + font-size: 32px; + color: #454545; + margin: inherit; +} From 428234bb21ab6593fb2b80e96b5519e106215d4d Mon Sep 17 00:00:00 2001 From: vairojarela Date: Mon, 23 Sep 2019 16:11:55 +0200 Subject: [PATCH 2/2] add main --- starter-code/main.js | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 starter-code/main.js diff --git a/starter-code/main.js b/starter-code/main.js new file mode 100644 index 0000000..e69de29