From cedfdb7d4aebdff6a8c54595ef800770976045f8 Mon Sep 17 00:00:00 2001 From: terde2 Date: Fri, 4 Oct 2024 21:55:19 +0200 Subject: [PATCH] add htm and css files --- index.html | 143 +++++++++++++++++++++++-- styles.css | 304 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 438 insertions(+), 9 deletions(-) create mode 100644 styles.css diff --git a/index.html b/index.html index a2d9c01ab..96cfa0e07 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,134 @@ -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 + + + + + + Npm-clone-challenge + + + + +
+ +
+
+ black heart + Nifty Penguin Magic +
+ +
+ + +
+
+
+ + magnifying glass + + +
+
+ +
+
+ + +
+

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. +
+
+ + +
+
+
+ corsur in box +

Zero configuration

+

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

+
+ +
+ network of people +

Team management

+

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

+
+ +
+ four boxes on scale +

Familiar features

+

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

+
+ +
+ binocular +

npm audit

+

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

+
+
+ +
+ + diff --git a/styles.css b/styles.css new file mode 100644 index 000000000..9cd25f696 --- /dev/null +++ b/styles.css @@ -0,0 +1,304 @@ +/* Importing font */ +@import url("https://fonts.googleapis.com/css?family=Poppins"); + +body { + font-family: "Poppins"; +} + +/*Upper header styling*/ +#top-header { + padding: 0 25px; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid lightgray; +} + +nav { + width: 800px; +} + +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; +} + +/*Bottom header styling*/ +#bottom-header { + margin: 10px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.npm-logo { + width: 80px; + padding: 0 30px; +} + +.magnifying-glass { + width: 35px; + background-color: #f2f2f2; + padding: 8.5px; + border: none; +} + +#search-box { + width: 100%; + height: 50px; + background-color: #f2f2f2; + border: none; + font-size: 1.5em; +} + +#search-button { + height: 52px; + width: 100px; + background-color: #fb3e44; + border: none; + color: white; + font-size: 1.1em; +} + +#search-box-container { + width: 1600px; + display: flex; + align-items: center; +} + +#join-log-in a { + margin: 5px; + padding: 8px 20px; + text-decoration: none; + font-size: 1.2em; + color: #2f4f4f; +} + +#join-box { + border: 1px solid black; +} + +/*Section #1 styling*/ +#join-section { + display: flex; + flex-direction: column; + align-items: center; + height: 700px; + background-color: #f8f4f4; +} + +#join-section h1 { + font-size: 100px; + font-weight: bold; + padding: none; +} + +#join-section article { + width: 600px; + font-size: 25px; + text-align: center; + padding-bottom: 20px; +} + +#join-section div { + display: flex; + justify-content: space-evenly; + width: 600px; + padding: 50px 0; + font-size: 30px; +} + +#join-section div a { + display: flex; + align-items: center; + justify-content: center; + width: 300px; + height: 70px; + text-decoration: none; + color: black; + font-weight: bold; + font-size: 20px; +} + +#join-section div a:first-of-type { + background-color: #fb3e44; + color: white; + box-shadow: 8px 8px rgba(251, 59, 73, 0.2); +} + +/*Section #2 styling*/ +#ads-section { + display: flex; + flex-direction: column; + align-items: center; + height: 600px; + background-color: #ffffff; +} + +#ads-section .triangle-hexagon { + width: 200px; + margin: 50px 0 0; +} + +#ads-section h2 { + font-size: 50px; + font-style: italic; + background-color: rgba(255, 204, 53, 0.4); + transform: skew(9deg, 0deg); + padding: 0 50px; +} + +#ads-section article { + width: 1000px; + font-size: 20px; + text-align: center; +} + +/*Section #3 styling*/ +#features-section { + padding-top: 100px; + height: 700px; + background-color: #ffffff; +} + +#features-section #boxes { + margin: 80px; + display: flex; + flex-direction: row; + align-items: top; + justify-content: center; +} + +/*box1 settings*/ +#features-section .box1 { + width: 50%; + height: 100%; +} + +#features-section .box1 img { + padding-left: 20px; + margin: 0 15px; + height: 50px; +} + +#features-section .box1 h3 { + font-size: 25px; + color: #ed1c24; + width: fit-content; + padding: 10px 20px; + margin: 15px; +} + +#features-section .box1 p { + font-size: 20px; + width: fit-content; + padding: 10px 20px; + margin: 15px; +} + +/*box2 settings*/ +#features-section .box2 { + width: 50%; +} + +#features-section .box2 img { + height: 50px; + padding-left: 20px; + margin: 0 15px; +} + +#features-section .box2 h3 { + font-size: 25px; + color: #ed1c24; + width: fit-content; + padding: 10px 20px; + margin: 15px; +} + +#features-section .box2 p { + font-size: 20px; + width: fit-content; + padding: 10px 20px; + margin: 15px; +} + +/*box3 settings*/ +#features-section .box3 { + width: 50%; +} + +#features-section .box3 img { + height: 50px; + padding-left: 20px; + margin: 0 15px; +} + +#features-section .box3 h3 { + font-size: 25px; + color: #ed1c24; + width: fit-content; + padding: 10px 20px; + margin: 15px; +} + +#features-section .box3 p { + font-size: 20px; + width: fit-content; + padding: 10px 20px; + margin: 15px; +} + +/*box4 settings*/ +#features-section .box4 { + width: 50%; +} + +#features-section .box4 img { + margin: 0 15px; + padding-left: 20px; + height: 50px; +} + +#features-section .box4 h3 { + font-size: 25px; + color: #ed1c24; + width: fit-content; + padding: 10px 20px; + margin: 15px; +} + +#features-section .box4 p { + font-size: 20px; + width: fit-content; + padding: 10px 20px; + margin: 15px; +} + +#features-section #create-org-container { + display: flex; + justify-content: center; +} + +#features-section a { + width: 400px; + text-align: center; + font-size: 30px; + color: white; + text-decoration: none; + border: 1px dotted black; + padding: 15px 80px; + background-color: black; + box-shadow: 8px 8px 0 rgba(128, 83, 35, 0.2); +}