From 5c8b5799d605bca3acba819237c276f9cae5e821 Mon Sep 17 00:00:00 2001 From: Rachel Hofer Date: Tue, 30 Oct 2018 14:04:56 -0400 Subject: [PATCH] Pre-Word 1: HTML & CSS --- .DS_Store | Bin 0 -> 6148 bytes starter-code/.DS_Store | Bin 0 -> 6148 bytes starter-code/index.css | 382 ++++++++++++++++++++++++++++++++++++++++ starter-code/index.html | 94 +++++++++- 4 files changed, 475 insertions(+), 1 deletion(-) create mode 100644 .DS_Store create mode 100644 starter-code/.DS_Store create mode 100644 starter-code/index.css diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..88ed787453428fcbf2e41f2a8140b859d2910890 GIT binary patch literal 6148 zcmeHK-D=w~6h2DRP0lu!i$Qy-o53!!k?gOGQ7~zDk-LJ&da;exj?HRttYSM0Tbkn6 zXy2fZvM1Q%te<`o2x(wY7^CRG(RU=BPqIH5$s!`wAICkSHW6{S!iI<922=gYSFB-M zHi1l!F`|TC(1_wewvz1{{znDW+Idu9-9n17a*Oqo!zhyxdex`#9{%i)Hbg`ZsiX>w z0%d~oISomIpA51k-qqjoqDgsb=ld0%W@%Y3dM*nasZ-XFkb%aEDF-r+`!7HVW81g+I8>Adc%4a0=W>1=Ri^ z;0k?Li?u=Yz?h)|4VBp|1~YWD3!CR#tPL7EF?;!7 zc4lU8C``|e@r6z&<{NaSQ@|;(tiXn;w$=InVg3DondE9t0jI#7Qh+u0gZ(~U$)2q% xFQ?900Y8Q-Q+c()1qFdVijk|1;%&G#v% literal 0 HcmV?d00001 diff --git a/starter-code/.DS_Store b/starter-code/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..50c27e7d42157bcfb77412dd29282b4ae01178b3 GIT binary patch literal 6148 zcmeHKI|>3p3{6x-u(7n9D|mxJ^aNhOFCr)wV!xH=@@T$%5M;FxY~%%!Hh}rb_T?ZaS;_tj{`*^* zr2If Wye2k*PDkG9K>iGvE;K6eYXu%tHx-5e literal 0 HcmV?d00001 diff --git a/starter-code/index.css b/starter-code/index.css new file mode 100644 index 0000000..cd50d33 --- /dev/null +++ b/starter-code/index.css @@ -0,0 +1,382 @@ +#nav-bar { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding-left: 2rem; + padding-right: 2rem; + margin-right: auto; + margin-left: auto; +} +#nav-bar > .top-left { + margin-right: 2rem; + white-space: nowrap; + opacity: 1; +} +#nav-bar > .top-right { + padding-left: .25rem; + padding-right: .25rem; +} +.heart { + display: inline-block; + color: #222; + letter-spacing: 0.015625em; + font-size: .875rem; + margin-right: 1rem; + padding-right: 1rem; +} +.acronym { + block-size: 322.172 x 18; + margin-block-end: 32; +} +.top-left { + font-family: Source Sans Pro, Lucida Grande, sans-serif; + font-size: .875rem; + font-weight: 600; + text-align: left; + text-decoration: none; + line-height: 1.15; + color: black; + margin-right: 2rem; + padding-top: .5rem; + padding-bottom: .5rem; +} +.top-right { + font-family: Source Sans Pro, Lucida Grande, sans-serif; + font-size: .875rem; + font-weight: 600; + text-align: right; + text-decoration: none; + line-height: 1.15; + color: black; + vertical-align: top; + list-style-type: none; + list-style: horizontal; +} +.top-right li { + display: inline-block; + margin: 0 10px; +} +.logo-search-section { + display: flex; + flex-direction: row; + padding-left: 2rem; + padding-right: 2rem; + line-height: 1.15; + margin: 0; + padding-left: 10px; + padding-top: 6px; + border-top-style: solid; + border-top-width: 1px; + border-color: rgba(0,0,0,.1); + align-self: center; + text-decoration-line: none; +} +.login { + display: flex; + text-align: right; + border-radius: .25rem; + line-height: 1.5; + color: rgba(0,0,0,.7); + font-weight: 600; + text-decoration-line: none; + box-sizing: border-box; + padding-top: .25rem; + position: right; + padding-left: 950px; +} +form { + padding-left: 10px; + padding-top: 6px; + font-family: "Fira Mono", "Andale Mono", "Consolas", monospace; + font-size: 1rem; + font-weight: 300; +} +.active1 { + text-decoration-line: none; + color: black; + box-sizing: border-box; +} +.search { + text-align: left; + font-family: "Fira Mono", "Andale Mono", "Consolas", monospace; + letter-spacing: 0px; + border: none; + font-size: 1rem; + font-weight: 300; + background-color: #fff +} +.active3 { + text-decoration-line: none; + color: rgba(0,0,0,.7); + font-family: Source Sans Pro, Lucida Grande, sans-serif; + border-bottom-style: solid; + border-bottom-width: 1px; + border-color: rgba(0,0,0,.1); + align-content: right; + position: right; + padding-right: 5px; + padding-left: 5px; +} +.or { + text-decoration-line: none; + color: rgba(0,0,0,.7); + font-family: Source Sans Pro, Lucida Grande, sans-serif; +} +h1 { + font-size: 3rem; + color: #f4f4f4; + font-weight: 200; + box-sizing: border-box; + font-family: "Open Sans", OpenSans, sans-serif; + display: block; + margin: .67em 0; + margin-block-start: 0.67em; + margin-block-end: 0.67em; + margin-inline-start: 0px; + margin-inline-end: 0px; + padding-top: 1rem; + padding-bottom: 1rem; +} +.text1 { + font-size: 1.25rem; + color: #f4f4f4; + line-height: 1.5; + font-weight: 200; + font-family: "Open Sans", OpenSans, sans-serif; +} +.front-text { + padding-top: 2rem; + padding-bottom: 2rem; + padding-left: 2rem; + padding-right: 2rem; + display: block; + background-image: url(https://static.npmjs.com/images/hero-cityscape.svg); + } +.third-section { + padding-top: 2rem; + padding-bottom: 2rem; + padding-left: 2rem; + padding-right: 2rem; + display: block; + background-image: url(https://static.npmjs.com/images/npm-is-BOXES.svg); + } +.active2 { + background-color: #f09233; + color: #fff; + display: inline-block; + margin-bottom: 0; + text-align: center; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + background-image: none; + border: 1px solid transparent; + white-space: nowrap; + box-sizing: border-box; + font-weight: 500; + border-radius: 20px; + padding: 7px 18px 8px 18px; + font-size: 18px; + font-family: "Open Sans", OpenSans, sans-serif; + text-decoration-line: none; + padding-top: 0.4375rem; + padding-bottom: .5rem; + padding-left: 1.125rem; + padding-right: 1.125rem; + } + .front-text2 { + padding-top: 2rem; + padding-bottom: 2rem; + padding-left: 20rem; + padding-right: 2rem; + display: block; + background-color: #273547; + display: flex; + flex-direction: row; + position: center; + } + .uno { + display: flex; + flex-direction: column; + padding-left: 100px; + font-weight: 600; + font-size: 2.25rem; + } + .active9 { + background-color: #cb3837; + color: #fff; + display: inline-block; + margin-bottom: 0; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + border: 1px solid transparent; + white-space: nowrap; + box-sizing: border-box; + font-weight: 500; + border-radius: 20px; + padding: 7px 18px 8px 18px; + font-size: 18px; + font-family: "Open Sans", OpenSans, sans-serif; + text-decoration-line: none; + margin-bottom: 0; + font-weight: 400; + vertical-align: middle; + background-image: none; + border: 1px solid transparent; + white-space: nowrap; + padding: 8px 20px; + font-size: 16px; + line-height: 1.35; + } + .second-head { + font-size: 3rem; + color: #f4f4f4; + font-weight: 200; + box-sizing: border-box; + font-family: "Open Sans", OpenSans, sans-serif; + display: block; + margin-bottom: 29.880; + margin-block-start: 0.67em; + margin-block-end: 0.67em; + margin-inline-start: 0px; + margin-inline-end: 0px; + padding-top: 1rem; + padding-bottom: 1rem; + text-align: right; + background-color: #273547; +} +.text9 { + font-size: 1.25rem; + color: #f4f4f4; + line-height: 1.5; + font-weight: 200; + font-family: "Open Sans", OpenSans, sans-serif; + text-align: right; + list-style: none; + background-color: #273547; +} +.collab { + font-size: 1.25rem; + color: #f4f4f4; + line-height: 1.5; + font-weight: 200; + font-family: "Open Sans", OpenSans, sans-serif; + text-align: right; + list-style: none; +} +.w { + text-align: right; +} +.z { + text-align: left; +} +.active12 { + background-color: #34495e; + color: #fff; + display: inline-block; + margin-bottom: 0; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + border: 1px solid transparent; + white-space: nowrap; + box-sizing: border-box; + font-weight: 500; + border-radius: 20px; + padding: 7px 18px 8px 18px; + font-size: 18px; + font-family: "Open Sans", OpenSans, sans-serif; + text-decoration-line: none; + margin-bottom: 0; + font-weight: 400; + vertical-align: middle; + background-image: none; + border: 1px solid transparent; + white-space: nowrap; + padding: 8px 20px; + font-size: 16px; + line-height: 1.35; +} +.y { + text-align: left; + color: #f4f4f4; + font-weight: 400; + display: block; + margin-block-start: 1em; + margin-block-end: 1em; + margin-inline-start: 0px; + margin-inline-end: 0px; + font-family: "Open Sans", OpenSans, sans-serif; + line-height: 1.5; +} +.third-head { + font-size: 2.25rem; + color: #f4f4f4; + font-weight: 600; + box-sizing: border-box; + font-family: "Open Sans", OpenSans, sans-serif; + display: block; + margin-bottom: 29.880; + margin-block-start: 0.83em; + margin-block-end: 0.83em; + margin-inline-start: 0px; + margin-inline-end: 0px; + text-align: left; +} +.last-head { + font-size: 2.25rem; + text-align: center; + padding-top: 1rem; + padding-bottom: .25rem; + font-weight: 200; + box-sizing: border-box; + margin-block-start: 0.83em; + margin-block-end: 0.83em; + margin-inline-start: 0px; + margin-inline-end: 0px; + font-family: "Open Sans", OpenSans, sans-serif; +} +h4 { + font-size: 1rem; + text-align: center; + padding-top: 1rem; + padding-bottom: .25rem; + font-weight: 400; + box-sizing: border-box; + display: block; + margin-block-start: 1em; + margin-block-end: 1em; + margin-inline-start: 0px; + margin-inline-end: 0px; + font-family: "Open Sans", OpenSans, sans-serif; + color: rgb(51, 51, 51); + line-height: 1.15; +} +h3 { + font-family: "Open Sans", OpenSans, sans-serif; + font-size: 1.25rem; + font-weight: 400; + text-align: center; + display: flex; + flex-direction: row; +} +.three-circles { + display: flex; + flex-direction: row; + margin-left: 425px; + margin-top: 100px; +} +.word-circles { + display: flex; + flex-direction: row; + word-spacing: 200px; + margin-left: 450px; +} +.circle1 { + margin-right: 165px; +} +.circle2 { + margin-right: 160px; +} \ No newline at end of file diff --git a/starter-code/index.html b/starter-code/index.html index 0a7febf..736c0ed 100644 --- a/starter-code/index.html +++ b/starter-code/index.html @@ -5,8 +5,100 @@ npm + - + +
+ +
+
+ + +
+
+ +
+ +
+

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

+
+ +
+ friends +
+

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

Sign up for Orgs

+
+
+ +
+

What is npm?

+

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

+

Install npm

+
+ +
+

What can you make with 700,000 building blocks?

+

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

+
+ + discover + build +
+
+

Find Discover Build

+
+
+ + +