diff --git a/starter-code/images/magnifying-glass.PNG b/starter-code/images/magnifying-glass.PNG new file mode 100644 index 0000000..1a9c4cb Binary files /dev/null and b/starter-code/images/magnifying-glass.PNG differ diff --git a/starter-code/index.html b/starter-code/index.html index 0a7febf..3c67d92 100644 --- a/starter-code/index.html +++ b/starter-code/index.html @@ -5,8 +5,108 @@ npm + + +
+ +
+

Build amazing things

+

npm is the package manager for JavaScript and the worlds'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 control 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 dependancies 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 of free, reusable code - + the largest registry in the world. +

+
+
+
+ +

Find

+
Libraries like + jQuery + , + Bootstrap + , + React + , and + Angular + , and components from frameworks such as + Ember +
+
+
+ +

Discover

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

Build

+
+ Assemble packages like building blicks to quickly + develop awesome new projects. +
+
+
+
diff --git a/starter-code/styles.css b/starter-code/styles.css new file mode 100644 index 0000000..fcca920 --- /dev/null +++ b/starter-code/styles.css @@ -0,0 +1,209 @@ +* { + margin: 0; padding: 0; +} +nav { + background-color: #C12127; + color: rgba(255,255,255,0.8); + padding: 10px 0 10px 0; + height: auto; + display: flex; + justify-content: space-between; +} + +nav a { + text-decoration: none; + color: rgba(255,255,255,0.8); + +} +.top-left { + margin: 0 0 0 8px; +} + +.top-links { + display: inline-block; + padding: 0; + margin: 0 20px 0 0; +} +.link { + text-decoration: none; + color: rgba(255,255,255,0.8); +} +.link:hover{ + color:rgb(157, 164, 169); +} +.top-links li { + display: inline-block; + margin: 0 10px; +} +.acronym { + margin: 0 0 0 8px; +} + +.btn { + color: white; + text-decoration: none; + border-radius: 1rem; + display: inline-block; + text-align: center; + padding: .375rem .75rem; + margin: 1rem 0; + +} +.signup-npm { + background-color: rgb(240, 146, 51); + border: 2px solid rgb(240, 146, 51); +} + +.signup-npm:hover { + background-color: rgb(216, 131, 46); + border-color: rgb(216, 131, 46); +} + +header { + background-color: #215c7d; + padding-bottom: 10px; + background-image: url(images/city-scape.svg); + background-size: cover; + background-repeat: no-repeat; + height: 370px; + +} +#npm-searchbar { + display: flex; + justify-content: space-between; + padding-top: 10px; + +} +#npm-searchbar img { + height: 40px; + width: auto; +} +#npm-logo { + padding-top: 4px; + margin-left: 1rem; +} +#magnifying-glass { + height: 46px !important; +} +input[type="text"] { + background-color: #1F526F; + border: 2px solid rgb(64, 108, 132); + flex-grow: 4; + color: white; + margin-left: 10px; + +} +#signup { + color: rgba(255,255,255,0.8); + display: flex; + align-items: center; + justify-content: space-evenly; + padding: 3px; +} +#signup span { + padding: 0 3px; +} +.first-signup { + background-color: #273547; + color: white; + min-height: 370px; + height: auto; +} +.amazing-header { + color: white; +} +.section-container { + width: 620px; + margin: 0 auto; + padding-top: 2rem; +} +.first { + display: flex; + justify-content: center; +} +#collaboration { + height: 250px; + margin: 1rem; +} +#collaboration-content { + max-width: 300px; + float: right; + margin: 1rem; +} +.signup-orgs { + background-color: rgb(203, 56, 55); + border: 2px solid rgb(203, 56, 55); +} +.signup-orgs:hover { + background-color: rgb(154, 43, 42); + border-color:rgb(154, 43, 42); +} +.collaboration-link { + text-decoration: none; + color: white; + font-weight: bold; + margin: 0; +} +.first-signup { + padding-top: 1.5rem; + height: 400px; +} +.first-signup p { + margin: 0; +} +.first-signup li { + line-height: 1.7; +} +.second-install { + background-image: url(images/forklift.svg); + background-size: cover; + background-repeat: no-repeat; + height: 370px; + color: white; +} +.install-npm { + background-color: rgb(49, 68, 88); + border: 2px solid rgb(49, 68, 88); +} +.install-npm:hover { + background-color: rgb(41, 52, 64); + border-color: 2px solid rgb(49, 68, 88); +} + +.second p{ + width: 300px; + padding: 1rem 0; +} +.third{ + text-align: center; + line-height: 2; +} +.third h1{ + color: rgb(83, 88, 98); +} +.third p{ + color: rgb(135, 145, 156); +} +.cards-container { + margin: 2rem 10rem 4rem 10rem; + display:flex; + justify-content: center; +} +.card { + margin: 0 2rem; + width: 220px; + text-align: center; +} +.card h3 { + margin: 1rem 0; +} +.card-link{ + text-decoration: none; + color: rgb(208, 74, 73); +} +.card-link:hover { + color: rgb(119, 35, 81); +} + + +