From 632bd329d423c9ef895e7a4a62e3b524a2e82e51 Mon Sep 17 00:00:00 2001 From: Alex McDaniel Date: Sun, 21 Oct 2018 19:48:15 -0400 Subject: [PATCH 1/5] updated starter code Alex McDaniel html css --- starter-code/index.html | 112 ++++++++++++++++++++- starter-code/style.css | 209 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 320 insertions(+), 1 deletion(-) create mode 100644 starter-code/style.css diff --git a/starter-code/index.html b/starter-code/index.html index 0a7febf..72d048d 100644 --- a/starter-code/index.html +++ b/starter-code/index.html @@ -8,5 +8,115 @@ + + + + + + + + npm + + + + + + + + + +
+
+ npm brand logo +
+ +
+

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.

+ +
+
+ cityscape +
+ +
+ + +
+
+ Group photo +
+
+

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 +
+
+ + +
+
+ skyline picture +
+

What is npm?

+

Use npm to install, share, and distribute code; manage dependencies in your projects; and share & receive feedback with others.

+ +
+
+bear on forklift +
+
+ + +
+
+

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

Libraries like JQuery, Bootstrap, React, andAngularframeworks such as Ember.

+
+
+ mountain +
Discover
+

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

+
+
+ toolkit +
Build
+

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

+
+
+
+ - + \ No newline at end of file diff --git a/starter-code/style.css b/starter-code/style.css new file mode 100644 index 0000000..653ca44 --- /dev/null +++ b/starter-code/style.css @@ -0,0 +1,209 @@ +body{ + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-weight:lighter; +} + +.div-shape { + margin:0 auto; + padding:20px 20px; +} +button { + border-radius:25px; + color:white; + letter-spacing:1px; + padding:10px 20px; + border-style:none; +} +.orange { + background-color: rgb(240,146,51); +} + +.red { + background-color: rgb(203,56,55); +} + +.gray { + background-color: rgb(49,68,88); +} + +h2 { + font-size:30px; + font-weight:lighter; +} + +h3 { + font-size: 20px; + font-weight: lighter; +} + +/* span languages */ + +.lang { + color: rgb(208,74,73); +} + /* Nav Bar */ +nav { + background-color: #C12127; + color: rgba(255,255,255,0.8); + padding-top: 15px; + height: 30px; +} + +nav a { + color: rgba(255,255,255,0.8); + text-decoration: none; +} + +.acronym { + font-size:12px; +} + +.top-left { + font-family: Verdana, Geneva, Tahoma, sans-serif; + position: absolute; +} + +.top-links { + display: inline-block; + float: right; + padding: 0; + margin: 0 20px 0 0; + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-size:10px; +} + +.top-links li { + display: inline-block; + margin: 0 10px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-size:12px; +} + +/* Header */ + +.npm { + width:7%; + padding: 6px 0 0 0; + float:left; +} + +.top-form { + background: rgb(31,82,111); + width: 60%; + float:left; + max-width:80%; +} + +.bear { + float:left; + height:40px; + position:relative; + +} + +#top-background { + background-color:rgb(31,82,111); +} + +.search-bar { + background-color: rgb(31,82,111); + color:white; + height:40px; + padding:6px; +} + +.first-center { + width:100%; + background: rgb(32,101,136); + color: white; + padding:100px; + float:left; + max-width:100%; +} + +.cs { + float:right; +} + +/* Section 1 */ + +.second-bg { + background:rgb(36,53,71); + height:200%; +} + +.collabo { + width:60%; + padding:60px 60px 60px 40px; + float:left; +} + +.second-pic { + width:50%; +} + +.second-text { + width:100%; + color:white; + font-size:12px; + padding:40px 5px 40px 5px; +} + +/* Section 2 */ + +.third-bg { + backg + background-color: rgb(40,50,70); + position:relative; + height: +} + +.third-text { + float + position:absolute; + overflow-wrap: break-word; +} + +.bear-lift { +float:right; +} + +/* Section 3 */ + +.fourth-box { + text-align: center; + background-color:white; + color: rgb(83,88,98); +} + +.choices { + background-color:white; + color: rgb(135,145,156); + display: inline-block; + text-align:center; +} + +.binoc { + display: inline-block; + max-width:250px; +} + +.mtn { + display: inline-block; + max-width:250px; +} + +.bp { + display: inline-block; + max-width:250px; +} + +.second-text ul { + line-height:30px; +} + +.second-text a { + text-decoration:none; + color:white; + float: right; +} \ No newline at end of file From 29979d0c8fadd686beacfb4b60aab59a9dc46df5 Mon Sep 17 00:00:00 2001 From: Alex McDaniel Date: Sun, 21 Oct 2018 20:46:18 -0400 Subject: [PATCH 2/5] clear --- starter-code/index.html | 110 --------------------- starter-code/style.css | 209 ---------------------------------------- 2 files changed, 319 deletions(-) diff --git a/starter-code/index.html b/starter-code/index.html index 72d048d..b509b9f 100644 --- a/starter-code/index.html +++ b/starter-code/index.html @@ -8,115 +8,5 @@ - - - - - - - - npm - - - - - - - - - -
-
- npm brand logo -
- -
-

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.

- -
-
- cityscape -
- -
- - -
-
- Group photo -
-
-

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 -
-
- - -
-
- skyline picture -
-

What is npm?

-

Use npm to install, share, and distribute code; manage dependencies in your projects; and share & receive feedback with others.

- -
-
-bear on forklift -
-
- - -
-
-

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 -
Find
-

Libraries like JQuery, Bootstrap, React, andAngularframeworks such as Ember.

-
-
- mountain -
Discover
-

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

-
-
- toolkit -
Build
-

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

-
-
-
- \ No newline at end of file diff --git a/starter-code/style.css b/starter-code/style.css index 653ca44..e69de29 100644 --- a/starter-code/style.css +++ b/starter-code/style.css @@ -1,209 +0,0 @@ -body{ - font-family: Verdana, Geneva, Tahoma, sans-serif; - font-weight:lighter; -} - -.div-shape { - margin:0 auto; - padding:20px 20px; -} -button { - border-radius:25px; - color:white; - letter-spacing:1px; - padding:10px 20px; - border-style:none; -} -.orange { - background-color: rgb(240,146,51); -} - -.red { - background-color: rgb(203,56,55); -} - -.gray { - background-color: rgb(49,68,88); -} - -h2 { - font-size:30px; - font-weight:lighter; -} - -h3 { - font-size: 20px; - font-weight: lighter; -} - -/* span languages */ - -.lang { - color: rgb(208,74,73); -} - /* Nav Bar */ -nav { - background-color: #C12127; - color: rgba(255,255,255,0.8); - padding-top: 15px; - height: 30px; -} - -nav a { - color: rgba(255,255,255,0.8); - text-decoration: none; -} - -.acronym { - font-size:12px; -} - -.top-left { - font-family: Verdana, Geneva, Tahoma, sans-serif; - position: absolute; -} - -.top-links { - display: inline-block; - float: right; - padding: 0; - margin: 0 20px 0 0; - font-family: Verdana, Geneva, Tahoma, sans-serif; - font-size:10px; -} - -.top-links li { - display: inline-block; - margin: 0 10px; - font-family: Verdana, Geneva, Tahoma, sans-serif; - font-size:12px; -} - -/* Header */ - -.npm { - width:7%; - padding: 6px 0 0 0; - float:left; -} - -.top-form { - background: rgb(31,82,111); - width: 60%; - float:left; - max-width:80%; -} - -.bear { - float:left; - height:40px; - position:relative; - -} - -#top-background { - background-color:rgb(31,82,111); -} - -.search-bar { - background-color: rgb(31,82,111); - color:white; - height:40px; - padding:6px; -} - -.first-center { - width:100%; - background: rgb(32,101,136); - color: white; - padding:100px; - float:left; - max-width:100%; -} - -.cs { - float:right; -} - -/* Section 1 */ - -.second-bg { - background:rgb(36,53,71); - height:200%; -} - -.collabo { - width:60%; - padding:60px 60px 60px 40px; - float:left; -} - -.second-pic { - width:50%; -} - -.second-text { - width:100%; - color:white; - font-size:12px; - padding:40px 5px 40px 5px; -} - -/* Section 2 */ - -.third-bg { - backg - background-color: rgb(40,50,70); - position:relative; - height: -} - -.third-text { - float - position:absolute; - overflow-wrap: break-word; -} - -.bear-lift { -float:right; -} - -/* Section 3 */ - -.fourth-box { - text-align: center; - background-color:white; - color: rgb(83,88,98); -} - -.choices { - background-color:white; - color: rgb(135,145,156); - display: inline-block; - text-align:center; -} - -.binoc { - display: inline-block; - max-width:250px; -} - -.mtn { - display: inline-block; - max-width:250px; -} - -.bp { - display: inline-block; - max-width:250px; -} - -.second-text ul { - line-height:30px; -} - -.second-text a { - text-decoration:none; - color:white; - float: right; -} \ No newline at end of file From 3f089d36bea1ed728d9083ad92841d2113106b8e Mon Sep 17 00:00:00 2001 From: Alex McDaniel Date: Sun, 21 Oct 2018 21:24:00 -0400 Subject: [PATCH 3/5] alex mcdaniel html module --- starter-code/index.html | 103 +++++++++++++++++++- starter-code/style.css | 206 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 308 insertions(+), 1 deletion(-) diff --git a/starter-code/index.html b/starter-code/index.html index b509b9f..3b809c0 100644 --- a/starter-code/index.html +++ b/starter-code/index.html @@ -8,5 +8,106 @@ - + + + + + + +
+
+ npm brand logo +
+ +
+

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.

+ +
+ +
+ cityscape +
+
+ + +
+
+ Group photo +
+ +
+

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 +
+
+ + +
+ skyline picture +
+

What is npm?

+

Use npm to install, share, and distribute code; manage dependencies in your projects; and share & receive feedback with others.

+ +
+ +
+ bear on forklift +
+
+ + +
+
+

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

Libraries like JQuery, Bootstrap, React, andAngularframeworks such as Ember.

+
+
+ mountain +
Discover
+

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

+
+
+ toolkit +
Build
+

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

+
+
+
+ + \ No newline at end of file diff --git a/starter-code/style.css b/starter-code/style.css index e69de29..9410712 100644 --- a/starter-code/style.css +++ b/starter-code/style.css @@ -0,0 +1,206 @@ +body{ + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-weight:lighter; +} + +.div-shape { + margin:0 auto; + padding:20px 20px; +} +button { + border-radius:25px; + color:white; + letter-spacing:1px; + padding:10px 20px; + border-style:none; +} +.orange { + background-color: rgb(240,146,51); +} + +.red { + background-color: rgb(203,56,55); +} + +.gray { + background-color: rgb(49,68,88); +} + +h2 { + font-size:30px; + font-weight:lighter; +} + +h3 { + font-size: 20px; + font-weight: lighter; +} + +/* span languages */ + +.lang { + color: rgb(208,74,73); +} + /* Nav Bar */ +nav { + background-color: #C12127; + color: rgba(255,255,255,0.8); + padding-top: 15px; + height: 30px; +} + +nav a { + color: rgba(255,255,255,0.8); + text-decoration: none; +} + +.acronym { + font-size:12px; +} + +.top-left { + font-family: Verdana, Geneva, Tahoma, sans-serif; + position: absolute; +} + +.top-links { + display: inline-block; + float: right; + padding: 0; + margin: 0 20px 0 0; + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-size:10px; +} + +.top-links li { + display: inline-block; + margin: 0 10px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-size:12px; +} + +/* Header */ + +.npm { + width:7%; + padding: 6px 0 0 0; + float:left; +} + +.top-form { + background: rgb(31,82,111); + width: 60%; + float:left; + max-width:80%; +} + +.bear { + float:left; + height:40px; + position:relative; + +} + +#top-background { + background-color:rgb(31,82,111); +} + +.search-bar { + background-color: rgb(31,82,111); + color:white; + height:40px; + padding:6px; +} + +.first-center { + width:100%; + background: rgb(32,101,136); + color: white; + padding:100px; + float:left; + max-width:100%; +} + +.cs { + float:right; +} + +/* Section 1 */ + +.second-bg { + background:rgb(36,53,71); + height:200%; +} + +.collabo { + width:60%; + padding:60px 60px 60px 40px; + float:left; +} + +.second-pic { + width:50%; +} + +.second-text { + width:100%; + color:white; + font-size:12px; + padding:40px 5px 40px 5px; +} + +/* Section 2 */ + +.third-bg { + background-color: rgb(40,50,70); + position:relative; +} + +.third-text { + position:absolute; + overflow-wrap: break-word; +} + +.bear-lift { +float:right; +} + +/* Section 3 */ + +.fourth-box { + text-align: center; + background-color:white; + color: rgb(83,88,98); +} + +.choices { + background-color:white; + color: rgb(135,145,156); + display: inline-block; + text-align:center; +} + +.binoc { + display: inline-block; + max-width:250px; +} + +.mtn { + display: inline-block; + max-width:250px; +} + +.bp { + display: inline-block; + max-width:250px; +} + +.second-text ul { + line-height:30px; +} + +.second-text a { + text-decoration:none; + color:white; + float: right; +} From 934ec1009072ce6bf770377076474838e65efbf8 Mon Sep 17 00:00:00 2001 From: Alex McDaniel <43562843+amcdaniel86@users.noreply.github.com> Date: Sun, 21 Oct 2018 21:55:45 -0400 Subject: [PATCH 4/5] Alex HTML --- starter-code/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/starter-code/index.html b/starter-code/index.html index 3b809c0..656c4ef 100644 --- a/starter-code/index.html +++ b/starter-code/index.html @@ -108,6 +108,6 @@
Build
- + - \ No newline at end of file + From af2e4bb4bfc39152b52b1349d619535d2aa6c748 Mon Sep 17 00:00:00 2001 From: Alex McDaniel <43562843+amcdaniel86@users.noreply.github.com> Date: Mon, 22 Oct 2018 22:23:08 -0400 Subject: [PATCH 5/5] updated prework html assignment --- index.html | 115 ++++++++++++++++++++++++++++ style.css | 214 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 329 insertions(+) create mode 100644 index.html create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..be8a215 --- /dev/null +++ b/index.html @@ -0,0 +1,115 @@ + + + + + + + npm + + + + + + + + + +
+
+ npm brand logo +
+ +
+

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.

+ + cityscape +
+ +
+ + +
+
+ Group photo +
+
+

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 +
+
+ + +
+
+ skyline picture +
+

What is npm?

+

Use npm to install, share, and distribute code;
manage dependencies in your projects;
and share & receive feedback with others.

+ +
+
+bear on forklift +
+
+ + +
+
+
+
+
+
+
+
+

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

Libraries like JQuery, Bootstrap, React, andAngularframeworks such as Ember.

+
+
+ mountain +
Discover
+

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

+
+
+ toolkit +
Build
+

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

+
+
+
+ + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..ae399e9 --- /dev/null +++ b/style.css @@ -0,0 +1,214 @@ +* { + margin:0 auto; + max width: 100%; +} + +body{ + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-weight:lighter; +} + +.div-shape { + margin:0 auto; + padding:20px 20px; +} +button { + border-radius:25px; + color:white; + letter-spacing:1px; + padding:10px 20px; + border-style:none; + margin:50px 0 0 0; +} +.orange { + background-color: rgb(240,146,51); +} + +.red { + background-color: rgb(203,56,55); +} + +.gray { + background-color: rgb(49,68,88); +} + +h2 { + font-size:30px; + font-weight:lighter; +} + +h3 { + font-size: 20px; + font-weight: lighter; +} + +/* span languages */ + +.lang { + color: rgb(208,74,73); +} + /* Nav Bar */ +nav { + background-color: #C12127; + color: rgba(255,255,255,0.8); + padding-top: 15px; + height: 30px; +} + +nav a { + color: rgba(255,255,255,0.8); + text-decoration: none; +} + +.acronym { + font-size:12px; +} + +.top-left { + font-family: Verdana, Geneva, Tahoma, sans-serif; + position: absolute; +} + +.top-links { + display: inline-block; + float: right; + padding: 0; + margin: 0 20px 0 0; + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-size:10px; +} + +.top-links li { + display: inline-block; + margin: 0 10px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-size:12px; +} + +/* Header */ + +.npm { + width:7%; + padding: 6px 0 0 0; + float:left; +} + +.top-form { + background: rgba(31,82,111); + width: 72%; + float:left; + max-width:100%; +} + +.bear { + float:left; + height:40px; + position:relative; + +} + +#top-background { + background-color:rgb(31,82,111); +} + +.search-bar { + background-color: rgb(31,82,111); + color:white; + height:40px; + padding:6px; +} + +.first-center { + width:100%; + background: rgb(32,101,136); + color: white; + padding:100px; + float:left; + max-width:79%; +} + +.cs { + +} + +/* Section 1 */ + +.second-bg { + background:rgb(36,53,71); + height:200%; +} + +.collabo { + width:60%; + padding:60px 60px 60px 40px; + float:left; +} + +.second-pic { + width:50%; +} + +.second-text { + width:100%; + color:white; + font-size:12px; + padding:40px 5px 40px 5px; +} + +/* Section 2 */ + +.third-bg { + backg + background-color: rgb(40,50,70); + position:relative; + height: +} + +.third-text { + text-align:center; + float:left; +} + +.bear-lift { +float:right; +} + +/* Section 3 */ + +.fourth-box { + text-align: center; + background-color:white; + color: rgb(83,88,98); +} + +.choices { + background-color:white; + color: rgb(135,145,156); + display: inline-block; + text-align:center; +} + +.binoc { + display: inline-block; + max-width:250px; +} + +.mtn { + display: inline-block; + max-width:250px; +} + +.bp { + display: inline-block; + max-width:250px; +} + +.second-text ul { + line-height:30px; +} + +.second-text a { + text-decoration:none; + color:white; + float: right; +} \ No newline at end of file