diff --git a/starter-code/index.html b/starter-code/index.html index 0a7febf..f091eeb 100644 --- a/starter-code/index.html +++ b/starter-code/index.html @@ -5,8 +5,109 @@ npm + + + - + + + +
+
+ + + + + sign up or log in + + + + +
+ +
+ +

Build amazing things

+ +

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

+ +
+
+ +
+
+ +
+ +

npm Orgs is powerful collaboration - for free

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

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

+ +
+ +
+ +
+
+

+ What can you make with 475,000 building blocks ? +

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

Find

+

Libraries like JQuery, Bootstrap, React, and Angular, and components from frameworks such as Amber.

+
+
+ +

Discover

+

Packages for mobile, IoT, front end, back end, robotics... everything you need to start building amazing things.

+
+
+ +

Build

+

Assemble packages like building blocks to quickly develop awesome new projects.

+
+
+
diff --git a/starter-code/styles.css b/starter-code/styles.css new file mode 100644 index 0000000..3140d1d --- /dev/null +++ b/starter-code/styles.css @@ -0,0 +1,139 @@ +body { + font-family: 'Source Sans Pro', 'Lucida Grande', sans-serif; +} +nav { + background-color: #C12127; + color: rgba(255,255,255,0.8); + padding: 5px 0 5px 0; + font-size: .875rem; +} + +nav a { + color: rgba(255,255,255,0.8); + text-decoration: none; +} + +.top-left { + display: inline-block; + vertical-align: middle; + margin: 0 0 0 5px; +} + +.top-links { + display: inline-block; + float: right; + padding: 0; + margin: 0 5px 0 0; + vertical-align: middle; +} + +.top-links li { + display: inline-block; + margin: 0 10px; +} + +.header { + color: white; + background-image: url(images/city-scape.svg); +} + +.top { + padding: 5px 5px 5px 5px; + font-size: .875rem; +} + +.top img { + display: inline-block; + height: 30px; + vertical-align: middle; +} + +.top input { + border: 1px solid rgb(120, 156, 173); + display: inline-block; + height: 30px; + background: rgb(31, 82, 111); + padding: 5px; + font-size: .875rem; + vertical-align: middle; + width: 75%; + margin-left: 10px; + margin-right: 10px; +} + +.bear { + display: inline-block; + float: right; + padding: 0; + margin: 0 5px 0 0; + vertical-align: middle; +} + +.section_content { + padding: 30px 200px 30px 200px; +} + +.build_description { + padding-right: 700px; +} + +.build_description img { + float: right; +} + +.collaboration { + background: rgb(39, 53, 71); + color: white; +} + +.collab_img { + width: 400px; +} + +.collab_desc { + float: right; +} + +.what_is_npm { + color: white; + background-image: url(images/forklift.svg); +} + +.what_content{ + padding-right: 800px; +} + +.text_centered { + text-align: center; +} + +.logo_content { + width: 33%; + text-align: center; + display: inline-block; + vertical-align: middle; +} +button { + border: none; + color: white; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 4px 2px; + cursor: pointer; + border-radius: 50px; +} + +.button_build { + background-color: rgb(240, 146, 51); +} + +.button_collab { + background-color: rgb(203, 56, 55); +} + +.button_what { + background-color: rgb(49, 68, 88) +} \ No newline at end of file