diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..aa53a8d Binary files /dev/null and b/.DS_Store differ diff --git a/starter-code/index.html b/starter-code/index.html index 0a7febf..2953a55 100644 --- a/starter-code/index.html +++ b/starter-code/index.html @@ -5,8 +5,103 @@ npm + + + + +
+ +
+
+ + +
+
+
+ login + or + signup +
+
+ +
+

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 475,000 building blocks?

+

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

+
+ + discover + build +
+
+

Find Discover Build

+
+
+
+ diff --git a/starter-code/styles.css b/starter-code/styles.css new file mode 100644 index 0000000..b4894f2 --- /dev/null +++ b/starter-code/styles.css @@ -0,0 +1,381 @@ +#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