From 6ddadc985469a3a5f7d601de0c30163ef16d506c Mon Sep 17 00:00:00 2001 From: arstrel Date: Sun, 26 May 2019 00:08:53 -0400 Subject: [PATCH] HTML/CSS prework completed --- starter-code/images/magnifying-glass.PNG | Bin 0 -> 2639 bytes starter-code/index.html | 100 +++++++++++ starter-code/styles.css | 209 +++++++++++++++++++++++ 3 files changed, 309 insertions(+) create mode 100644 starter-code/images/magnifying-glass.PNG create mode 100644 starter-code/styles.css diff --git a/starter-code/images/magnifying-glass.PNG b/starter-code/images/magnifying-glass.PNG new file mode 100644 index 0000000000000000000000000000000000000000..1a9c4cbe3ec8ae71df5dfcf7b4f338ed05576fa4 GIT binary patch literal 2639 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 literal 0 HcmV?d00001 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. +

+ +
+
+ +
+
+

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); +} + + +