From 51909245f47835c512656c2a9e36ae46f1a78c65 Mon Sep 17 00:00:00 2001 From: Rafael Costa Date: Mon, 11 Feb 2019 20:50:51 -0200 Subject: [PATCH] versao_final --- .DS_Store | Bin 0 -> 6148 bytes starter-code/.DS_Store | Bin 0 -> 6148 bytes starter-code/index.html | 105 ++++++++++++- starter-code/styles.css | 316 ++++++++++++++++++++++++++++++++++++++++ 4 files changed, 420 insertions(+), 1 deletion(-) create mode 100644 .DS_Store create mode 100644 starter-code/.DS_Store create mode 100644 starter-code/styles.css diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..79ea256aa92575b489e5ceeb370ade911ec303b1 GIT binary patch literal 6148 zcmeHKJ5EC}5S)b+kw}q}(ifoM238bKkP85L=^{OeK>sSv#nG7k6hsfY&_uJ+dhGR% zEl=_GEdbkm43EGXz>@BWPao#y`|dNlsfZEjJmVb)yx{?RjI-?D1I}IHMCJ>bKluX= z!)bqf9mk_5$)tc3kOERb3P^#AC{Sf}d3TZ1bchs?0@tK~e;*p%u@_E>@#)|YEdX)B za2V&&OAwm}h`n%1WQ1l(B_`FX#jvC^-YTybPKil}Rr6tWvsH&;aXZg%kq+yL8l`{~ zI9K2{mus*8PxL?f|8tU7Qa}n^l>)Zd?zS5~scP%&ab9a1{h97LUvxLlgTf)oF)_+9 h7haCoiz5z0k76bqQ literal 0 HcmV?d00001 diff --git a/starter-code/.DS_Store b/starter-code/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..10f526f8e4dd7b7acd1ba2e1d98b71aa58834ebe GIT binary patch literal 6148 zcmeHKJ8l9o5S<|?S}Dzzl)eHtuvW_nasddSC=!TbMZXp2;%L126hWJGq#$}Djh{W9 zXUnhH*%1-#&by^ZDU%pabM+2j!Q2{DI1*iZOpaKt9AWLlX_VAN=AQhkj&#r)d9}3*CCXRvr>A>JE0C0}58|L0i z0E-2HHE|3?1g1d+2351g(4Zq;GOs3%fk79|=0o#l%??HVcAQ^4U9<*rqykjnUV)cb zwpRaF@L&4>dlFYvfC~I81$5rO_Z^;;wRQ41tF;BbhFi`RZicy2FnBozdO60z%JIUJ bBCpsS`!#V4bUNZr2l8jYbfHm!zgFM|YL^v< literal 0 HcmV?d00001 diff --git a/starter-code/index.html b/starter-code/index.html index 0a7febf..48400e4 100644 --- a/starter-code/index.html +++ b/starter-code/index.html @@ -1,12 +1,115 @@ + npm - + + + +
+
+
+ npm-logo +
+
+ + Search + +
+ +
+

+ log in + or + sign up +

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

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

npm Orgs is powerful
collaboration - for free

+
    +
  • Encourage code discovery and re-use within teams
    • +
  • Publish and control acess 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 800,000 building blocks?

+

The npm registry hosts the world’s largest collection of free, reusable code.

+ +
+ binoculars
+

Find


+

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

+
+ +
+ mountain-flag
+

Discover


+

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

+
+ +
+ backpack
+

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..dddc22f --- /dev/null +++ b/starter-code/styles.css @@ -0,0 +1,316 @@ +body { + font-family: "Open Sans","OpenSans",sans-serif; + padding: 0; + margin: 0; + width: 100%; + } + /* NAV BAR ITEMS */ + nav { + background-color: #C12127; + color: rgba(255,255,255,0.8); + padding: 8px 0; + margin: 0; + font-size: 1em; + } + + nav a { + color: rgba(255,255,255,0.8); + text-decoration: none; + } + + .top-left { + display: inline-block; + margin-left: 20px; + font-weight: lighter; + } + + .top-links { + display: inline-block; + float: right; + padding: 0; + margin: 0 20px 0 0; + text-align: center; + } + + .top-links li { + display: inline-block; + margin: 0 10px; + } + + + /* SECTION 1 HEADER */ + header { + max-width: 100%; + font-size: 1em; + background-color: rgb(32, 101, 136); + padding: 0; + margin: 0; + } + + .header-item { + text-decoration: none; + color: white; + } + + .bar-set { + padding-top: 10px; + padding-left: 10px; + } + + .logo-set { + + } + .logo-set img { + box-sizing: border-box; + width: 9%; + float: left; + padding-top: 5px; + } + + .search-set { + width: 75%; + display: inline-block; + vertical-align: top; + padding-left: 10px; + + } + + .search-set input { + font-size: 1em; + width: 92%; + background-color: rgb(31, 82, 111); + padding: 15px 10px; + border-color: rgba(255,255,255,0.2); + border-width: 1px; + border-style: solid; + color: rgba(255,255,255,0.8); + } + + .item-set { + display: inline-block; + color: white; + margin-left: 45px; + clear: left; + } + + .item-set p { + color: white; + } + + .item-set a { + color: white; + text-decoration: none; + } + + .bear-set { + margin-left:8px; + margin-top: 5px; + float: right; + } + + .bear-set img { + width: 40px; + height: auto; + + } + + .container-one { + background-image: url("images/city-scape.svg"); + padding: 90px 20px 80px 30px; + max-width: 100%; + + + } + + .container-bottom { + width: 50%; + padding-left: 50px; + color: white; + margin-left: 150px; + + } + + .container-bottom h1 { + font-size: 48px; + font-weight: 300; + margin-bottom: 10px; + } + + .container-bottom p { + font-size: 17px; + font-weight: lighter; + margin-bottom: 20px; + } + + .link-btn { + background: rgb(240, 146, 51); + border-radius: 20px; + display: inline-block; + text-decoration: none; + width: 130px; + height: 20px; + color: white; + text-align: center; + padding: 8px 26px 8px 26px; + font-weight: lighter; + } + + /* SECTION2 COLLABORATION */ + + .background-section { + max-width: 100%; + padding-top: 100px; + padding-bottom: 120px; + padding-left: 120px; + background-color: rgb(39, 53, 71); + } + + .img-collaboration { + width: 50%; + display: inline-block; + float: left; + } + + .img-collaboration img { + width: 95%; + } + + .text-collaboration { + width: 40%; + display: inline-block; + padding-left: 30px; + } + + + .text-collaboration h2 { + font-size: 36px; + color: white; + font-weight: 200; + margin-bottom: 10px; + } + + .text-collaboration li, p { + font-size: 16px; + color: white; + margin-bottom: 10px; + padding-bottom: 20px; + font-weight: 100; + } + + .text-collaboration ul { + padding-left: 20px; + } + + .text-collaboration a { + text-decoration: none; + font-size: 16px; + font-weight: 300; + color: white; + } + + .text-collaboration button { + background-color: rgb(172, 46, 45); + color: white; + border-radius: 20px; + border-color: rgba(0, 0, 0, 0); + border-width: 1px; + border-style: solid; + box-sizing: border-box; + font-size: 18px; + font-weight: 300; + padding: 8px 26px; + } + + /* SECTION3 WHAT IS NPM */ + + .what-npm { + background-image: url("images/forklift.svg"); + background-size: contain; + background-position: 50% 0; + padding: 60px 20px 180px 20px; + } + + .text-npm { + margin: 40px 50px 20px 0px; + padding: 0 100px; + line-height: 1.5; + } + + .what-npm h2 { + font-size: 36px; + color: white; + font-weight: 300; + margin: 10px 0; + } + + .what-npm p { + font-size: 16px; + color: white; + margin-bottom: 10px; + font-weight: 200; + padding: 10px 0; + + } + + .text-npm button { + background-color: rgb(40, 56, 72); + color: whitesmoke; + border-radius: 20px; + border-color: rgba(0, 0, 0, 0); + border-width: 1px; + border-style: solid; + box-sizing: border-box; + font-size: 18px; + font-weight: 200; + padding: 8px 26px; + line-height: 1.5; + } + + .third { + padding: 40px 10px; + } + + .third h2 { + color: rgb(55, 61, 72); + font-size: 36px; + font-weight: 300; + margin: 20px 0; + padding: 4px 0; + text-align: center; + } + + .third p { + color: rgb(109, 121, 134); + font-size: 16px; + margin-bottom: 10px; + text-align: center; + } + + .third h4 { + font-size: 20px; + font-weight: 600; + color: rgb(55, 61, 72); + margin: 10px 0; + text-align: center; + } + + .third-itens { + width: 20%; + float: left; + padding: 15px; + margin-left: 100px; + text-align: center; + } + + .third-itens img { + display: block; + margin: auto; + } + + .third-itens a { + color: red; + text-decoration: none; + font-weight: 400; + + } + \ No newline at end of file