diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..6dd7e8e Binary files /dev/null and b/.DS_Store differ diff --git a/index.html b/index.html new file mode 100755 index 0000000..f5d25a0 --- /dev/null +++ b/index.html @@ -0,0 +1,115 @@ + + + + + + + + npm + + + + + + + +
+
+ +
+ + +
+
+

sign up or log in

+ bear logo +
+
+
+
+

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.

+ +
+
+ + +
+
+ collaboration image +
+

npm Orgs is powerful
collaboration - for free

+
    +
  • Encourage code discovery and re-use within teams
    • +
  • Oublish and control acces 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 & recieve feedback with others

+ +
+
+ + +
+
+

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.

+
+ +
+
+ binoculars image +

Find

+

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

+
+ +
+ mountain image +

Discover

+

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

+
+ +
+ backpack image +

Build

+

Assemble package like building +
blocks to quickly develop +
awesome new projects.

+
+
+
+ + + diff --git a/starter-code/.DS_Store b/starter-code/.DS_Store new file mode 100644 index 0000000..4ecb79b Binary files /dev/null and b/starter-code/.DS_Store differ diff --git a/starter-code/images/backpack.svg b/starter-code/images/backpack.svg old mode 100644 new mode 100755 diff --git a/starter-code/images/bear-logo.png b/starter-code/images/bear-logo.png old mode 100644 new mode 100755 diff --git a/starter-code/images/binoculars.svg b/starter-code/images/binoculars.svg old mode 100644 new mode 100755 diff --git a/starter-code/images/buildings-and-billboard.png b/starter-code/images/buildings-and-billboard.png old mode 100644 new mode 100755 diff --git a/starter-code/images/city-scape.svg b/starter-code/images/city-scape.svg old mode 100644 new mode 100755 diff --git a/starter-code/images/collaboration.svg b/starter-code/images/collaboration.svg old mode 100644 new mode 100755 diff --git a/starter-code/images/forklift.svg b/starter-code/images/forklift.svg old mode 100644 new mode 100755 diff --git a/starter-code/images/loupe_86084.svg b/starter-code/images/loupe_86084.svg new file mode 100644 index 0000000..b9cbb43 --- /dev/null +++ b/starter-code/images/loupe_86084.svg @@ -0,0 +1,14 @@ + + + + + + + + + + diff --git a/starter-code/images/mountain-climbing-bears.svg b/starter-code/images/mountain-climbing-bears.svg old mode 100644 new mode 100755 diff --git a/starter-code/images/mountain-flag.svg b/starter-code/images/mountain-flag.svg old mode 100644 new mode 100755 diff --git a/starter-code/images/npm-logo.png b/starter-code/images/npm-logo.png old mode 100644 new mode 100755 diff --git a/starter-code/images/red-car.png b/starter-code/images/red-car.png old mode 100644 new mode 100755 diff --git a/starter-code/index.html b/starter-code/index.html old mode 100644 new mode 100755 index 0a7febf..35af04a --- a/starter-code/index.html +++ b/starter-code/index.html @@ -1,12 +1,115 @@ + npm - + + + + + +
+
+ +
+ + +
+
+

sign up or log in

+ bear logo +
+
+
+
+

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.

+ +
+
+ + +
+
+ collaboration image +
+

npm Orgs is powerful
collaboration - for free

+
    +
  • Encourage code discovery and re-use within teams
    • +
  • Oublish and control acces 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 & recieve feedback with others

+ +
+
+ + +
+
+

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.

+
+ +
+
+ binoculars image +

Find

+

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

+
+ +
+ mountain image +

Discover

+

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

+
+ +
+ backpack image +

Build

+

Assemble package 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..69d7883 --- /dev/null +++ b/starter-code/styles.css @@ -0,0 +1,262 @@ +@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400'); + +* { + margin: 0; + padding: 0; +} + +.clearfix { clear: both;} + +body{ + font-family: "Open Sans", sans-serif; + line-height: 1.4em; +} + +h1 { + font-size: 2.5rem; + line-height: 2em; + font-weight: normal; +} + +h2 { + font-size: 1.7em; + line-height: 1.2em; + font-weight: lighter; + margin-bottom: 10px; +} + +h3 { + color: black; + margin-bottom: 10px; +} + +p { + font-size: 14px; +} + +li { + margin-bottom: 12px; + margin-left: 15px; + font-size: 12px; +} + + +/* Estilos del Navegador-Menú */ + +nav { + background-color: #C12127; + color: rgba(255,255,255,0.8); + padding-top: 12px; + height: 30px; + font-size: .875rem; +} + +nav a { + color: rgba(255,255,255,0.8); + text-decoration: none; +} + +.top-left { + margin: 0 10px; + float:left; +} + +.heart { + margin: 0 10px; +} + +.top-links { + display: inline-block; + float: right; + padding: 0; + margin: 0 20px 0 0; +} + +.top-links li { + display: inline-block; + margin: 0 10px; +} + +/* Estilos del Header */ + +#top-background { + background: rgb(32, 101, 136); +} + +header { + background: url(images/city-scape.svg) 0 0 no-repeat; + background-size: cover; + height: 450px; + color: #fff; +} + + /* Primer Div */ +.header-logo { + height: 40px; + margin: 5px 0 0 10px; + float: left; +} + +.header-bar { + background: rgb(31, 82, 111); + width: 1300px; + height: 35px; + margin-top: 5px; + border: 1px solid rgb(32, 101, 136); + float: left; +} + +.search-bar { + background: rgb(31, 82, 111); + color: rgb(32, 101, 136); + width: 45px; + height: 37px; + margin-top: 5px; + border: 1px solid rgb(32, 101, 136); + float: left; +} + +header a { + color: #fff; + text-decoration: none; +} + +.header-link { + float: left; + position:relative; + margin: 15px 0 0 10px; +} + +.log-bear { + float:right; + position: relative; + height:50px; + margin-right: 10px; +} + + /* Segundo Div */ + +.header-content { + width: 1000px; + margin: 100px auto 0; +} + +.header-button { + background: rgb(240, 146, 51); + color: #fff; + font-size: 14px; + border: none; + border-radius: 20px; + margin-top: 20px; + padding: 7px 18px; +} + +/* Estilos de la primera sección */ + +#collaboration { + background: rgb(39, 53, 71); + width: auto; + height: 450px; + margin: 0 auto; + color: #fff; +} + +#collaboration a { + text-decoration: none; + color: #fff; +} + +.collaboration-content{ + width: 1200px; + margin: 0 350px; +} + +#collaboration img{ + width: 45%; + float: left; + margin: 5% 5% 0 0; +} + +.collaboration-text { + width: 50%; + float: left; + margin: 60px 0 0; +} + +.collaboration-button { + background: rgb(203, 56, 55); + color: #fff; + font-size: 14px; + border: none; + border-radius: 20px; + margin: 20px 0 10px; + padding: 7px 18px; +} + +/* Estilos de la segunda sección */ + +#information-npm { + background: url(images/forklift.svg) 0 0 no-repeat; + background-size: cover; + height: 450px; + color: #fff; + position: relative; +} + +#information-npm a { + text-decoration: none; + color: #fff; +} + +.information-text { + position: absolute; + margin: 100px 0 0 380px; +} + +.information-button { + background: rgb(49, 68, 88); + color: #fff; + font-size: 14px; + border: none; + border-radius: 20px; + margin: 20px 0 10px; + padding: 7px 18px; +} + +/* Tercera sección*/ + +.build-heading { + background: white; + text-align: center; + margin: 60px 0 40px; + color: rgb(83, 88, 98); +} + +.build-heading .paragraph { + color: rgb(135, 145, 156); +} + +.build-content { + margin: 0 auto; + color: rgb(135, 145, 156); + margin: 0 350px; +} + +.build-box { + text-align: center; + padding-bottom: 80px; +} + +.build-box .img { + width: 125px; + margin-bottom: 20px; +} + +.build-box a{ + color:rgb(208, 74, 73); +} + +.col-3 { + float: left; + width: 33%; +} diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..4dfeadd --- /dev/null +++ b/styles.css @@ -0,0 +1,248 @@ +@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400'); + +* { + margin: 0; + padding: 0; +} + +.clearfix { clear: both;} + +body{ + font-family: "Open Sans", sans-serif; + line-height: 1.4em; +} + +h1 { + font-size: 2.5rem; + line-height: 2em; + font-weight: normal; +} + +h2 { + font-size: 1.7em; + line-height: 1.2em; + font-weight: lighter; + margin-bottom: 10px; +} + +h3 { + color: black; + margin-bottom: 10px; +} + +p { + font-size: 14px; +} + +li { + margin-bottom: 12px; + margin-left: 15px; + font-size: 12px; +} + +.button { + background: rgb(240, 146, 51); + color: #fff; + font-size: 14px; + border: none; + border-radius: 20px; + margin-top: 20px; + padding: 7px 18px; +} + +/* Estilos del Navegador-Menú */ + +nav { + background-color: #C12127; + color: rgba(255,255,255,0.8); + padding: 13px 0 30px; + font-size: .875rem; +} + +nav a { + color: rgba(255,255,255,0.8); + text-decoration: none; +} + +.top-left { + margin: 0 10px; + float:left; +} + +.heart { + margin: 0 10px; +} + +.top-links { + display: inline-block; + float: right; + padding: 0; + margin: 0 20px 0 0; +} + +.top-links li { + display: inline-block; + margin: 0 10px; +} + +/* Estilos del Header */ + +#top-background { + background: rgb(32, 101, 136); +} + +header { + background: url(images/city-scape.svg) 0 0 no-repeat; + background-size: cover; + padding: 0 0 150px; + color: #fff; +} + + /* Primer Div */ +.header-logo { + height: 40px; + margin: 5px 0 0 10px; + float: left; +} + +.header-bar { + background: rgb(31, 82, 111); + width: 1300px; + height: 35px; + margin-top: 5px; + border: 1px solid rgb(32, 101, 136); + float: left; +} + +.search-bar { + background: rgb(31, 82, 111); + color: rgb(32, 101, 136); + width: 45px; + height: 37px; + margin-top: 5px; + border: 1px solid rgb(32, 101, 136); + float: left; +} + +header a { + color: #fff; + text-decoration: none; +} + +.header-link { + float: left; + position:relative; + margin: 12px 0 0px 10px; +} + +.log-bear { + float:right; + position: relative; + height:50px; + margin-right: 10px; +} + + /* Segundo Div */ + +.header-content { + width: 1000px; + margin: 80px auto 0; +} + +/* Estilos de la primera sección */ + +#collaboration { + background: rgb(39, 53, 71); + width: auto; + padding: 5px 0 70px; + margin: 0 auto; + color: #fff; +} + +#collaboration a { + text-decoration: none; + color: #fff; +} + +.collaboration-content{ + width: 1200px; + margin: 0 350px; +} + +#collaboration img{ + width: 45%; + float: left; + margin: 5% 5% 0 0; +} + +.collaboration-text { + width: 50%; + float: left; + margin: 60px 0 0; +} + +.collaboration-button { + background: rgb(203, 56, 55); +} + +/* Estilos de la segunda sección */ + +#information-npm { + background: url(images/forklift.svg) 0 0 no-repeat; + background-size: cover; + padding: 5px 0 450px; + color: #fff; + position: relative; +} + +#information-npm a { + text-decoration: none; + color: #fff; +} + +.information-text { + position: absolute; + margin: 100px 0 0 380px; +} + +.information-button { + background: rgb(49, 68, 88); +} + +/* Tercera sección*/ + +.build-heading { + background: white; + text-align: center; + margin: 60px 0 40px; + color: rgb(83, 88, 98); +} + +.build-heading .paragraph { + color: rgb(135, 145, 156); +} + +.build-content { + margin: 0 auto; + color: rgb(135, 145, 156); + margin: 0 350px; +} + +.build-box { + text-align: center; + padding-bottom: 80px; +} + +.build-box .img { + width: 125px; + margin-bottom: 20px; +} + +.build-box a{ + color:rgb(208, 74, 73); +} + +.col-3 { + float: left; + width: 33%; +}