diff --git a/index.html b/index.html index a2d9c01..95f84e2 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,109 @@ -NPM Clone Nifty Penguin Magic npm Enterprise Products Solutions Resources Docs Support Search Join Log In Build amazing -things Essential JavaScript development tools that help you go to market faster and build powerful applications using -modern open source code. See plans Join for free Bring the best of open source to your company npm is the tool used by -over 11,000,000 JavaScript developers around the world. Your developers already use it. Your company depends on it. -Create an Org and get more out of the tools your team already knows and loves. Zero configuration Create an org, add -your team, and start collaborating. Nothing to configure, set up, or manage. Team management Control who has access to -what modules within your team namespace using straightforward team management capabilities. Familiar features npm Orgs -has 100% parity with all the public npm registry features your developers already use. npm audit Enjoy the security -auditing features built into the npm client, a zero-friction way to make open source software safer. Create an Org + + + + + + Fundamentals: Assignment 2 + + + +
+
+
+ black heart + Neverending Pun Machine +
+ +
+
+
+ npm logo +
+
+
+ + +
+
+
+ Join + Log In +
+
+
+ +
+

Build amazing things

+

+ Essential JavaScript development tools that help you go to market faster + and build powerful applications using modern open source code. +

+
+ See plans + Join for free +
+
+ +
+ Triangle hexagon +

Bring the best of open source to your company

+

+ npm is the tool used by over 11,000,000 JavaScript developers around the + world. Your developers already use it. Your company depends on it. + Create an Org and get more out of the tools your team already knows and + loves. +

+
+ +
+
+
+ Zero configuration +

Zero configuration

+

+ Create an org, add your team, and start collaborating. Nothing to + configure, set up, or manage. +

+
+
+ Team management +

Team management

+

+ Control who has access to what modules within your team namespace + using straightforward team management capabilities. +

+
+
+ Familiar features +

Familiar features

+

+ npm Orgs has 100% parity with all the public npm registry features + your developers already use. +

+
+
+ npm audit +

npm audit

+

+ Enjoy the security auditing features built into the npm client, a + zero-friction way to make open source software safer. +

+
+
+ Create an Org +
+ + diff --git a/style.css b/style.css new file mode 100644 index 0000000..d2e0fa4 --- /dev/null +++ b/style.css @@ -0,0 +1,197 @@ +@import url('https://fonts.googleapis.com/css?family=Poppins'); + +body { + font-family: 'Poppins'; + margin: 0; + padding: 0; +} + +header>div { + padding: 0 25px; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid lightgray; +} + +nav { + width: 600px; +} + +nav ul { + list-style: none; + display: flex; + justify-content: space-between; + align-items: center; +} + +nav a { + text-decoration: none; + color: black; +} + +.blackHeart { + width: 20px; + margin-right: 1rem; +} + +header>div:nth-child(2) { + display: flex; + justify-content: space-between; + align-items: center; + padding: 15px 25px; +} + +header>div:nth-child(2)>div:nth-child(1) img { + width: 70px; +} + +header>div:nth-child(2)>div:nth-child(2) { + flex: 1; + padding: 0 20px; +} + +header>div:nth-child(2)>div:nth-child(3) a:first-child { + border: 1px solid black; + padding: 5px 15px; + border-radius: 2px; +} + +header>div:nth-child(2) form { + display: flex; +} + +header>div:nth-child(2) input { + width: 100%; + padding: 10px; + background-color: rgba(0, 0, 0, .05); + border: none; +} + +header>div:nth-child(2) button { + padding: 10px 20px; + background-color: #fb3e44; + color: white; + border: none; + cursor: pointer; +} + +header>div:nth-child(2)>div:nth-child(3) { + display: flex; + gap: 20px; +} + +header>div:nth-child(2)>div:nth-child(3) a { + text-decoration: none; + color: black; +} + +header>div:nth-child(2)>div:nth-child(3) a:last-child { + padding: 5px 15px; +} + +#section1 { + height: 600px; + background-color: rgba(232, 217, 217, .3); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + padding: 0 20%; +} + +#section1 h1 { + font-size: 5rem; + margin-bottom: 1rem; +} + +#section1 p { + font-size: 1.5rem; + margin-bottom: 3rem; +} + +#section1 div { + display: flex; + gap: 20px; +} + +#section1 a:first-child { + background-color: #FB3B49; + color: white; + text-decoration: none; + padding: 15px 50px; + box-shadow: 8px 8px 0 rgba(251, 59, 73, .2); +} + +#section1 a:last-child { + text-decoration: none; + color: black; + padding: 15px 50px; + background-color: white; +} + +#section2 { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + padding: 50px 20%; +} + +#section2 img { + width: 250px; + margin-bottom: 40px; +} + +#section2 h2 { + background-color: rgba(255, 204, 53, .4); + transform: skew(9deg, 0deg); + font-style: italic; + padding: 0 10px; + font-size: 2.5rem; + margin-bottom: 30px; +} + +#section2 p { + font-size: 1.2rem; +} + +#section3 { + display: flex; + flex-direction: column; + align-items: center; + padding: 50px 20%; +} + +#section3>div { + display: flex; + flex-wrap: nowrap; + justify-content: space-between; + gap: 20px; + margin-bottom: 50px; +} + +#section3>div>div { + width: 22%; + padding: 10px; +} + +#section3 img { + width: 40px; + height: 40px; +} + +#section3 h3 { + color: #ED1C24; + margin: 15px 0; +} + +#section3>a { + background-color: #000; + color: white; + text-decoration: none; + padding: 15px 50px; + box-shadow: 8px 8px 0 rgba(128, 83, 35, .2); +} \ No newline at end of file