From 6609cc2f69522c7bc2d255f9fe927f42b979334b Mon Sep 17 00:00:00 2001 From: alseloes Date: Tue, 20 May 2025 16:51:04 -0500 Subject: [PATCH] Adding solved HTML & CSS exercise --- index.html | 148 +++++++++++++++++++++++-- style/style.css | 282 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 421 insertions(+), 9 deletions(-) create mode 100644 style/style.css diff --git a/index.html b/index.html index a2d9c01..597ef5d 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,139 @@ -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 page + + + +
+
+
+ black heart + Neverending Pun Machine +
+ +
+
+ +
+
+
+ magnifying glass +
+
+
+ +
+
+
+
+ +
+
+
+
+ Join +
+
+ +
+
+
+
+
+
+

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

+
+
+
+ +
+
+
+ + diff --git a/style/style.css b/style/style.css new file mode 100644 index 0000000..d4a20b1 --- /dev/null +++ b/style/style.css @@ -0,0 +1,282 @@ +@import url("https://fonts.googleapis.com/css?family=Poppins"); + +* { + box-sizing: border-box; + margin: 0%; + padding: 0px; + /* border: solid red 1px; */ +} + +/* Style help */ + +body { + font-family: "Poppins"; +} + +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; +} + +/* Style help ends */ + +header { + + margin-top: 1rem; +} + +.upperHeader { + background-color: white; + height: 20%; + padding: 1vw 25px; +} + +/* Lower Header */ + +.lowerHeader { + background-color: white; + padding: 10px 25px 10px 25px; +} + +img.logo { + width: 100px; +} + +.searchContainer, +.glass, +div.containerLeft, +.loginContainer, +.join, +.login, +.plans, +.joinForFree { + display: flex; + justify-content: center; + align-items: center; +} + +.searchContainer { + width: 70%; +} + +.containerLeft img { + width: 2.5vw; +} + +.glass { + height: 100%; + padding: 0 0.5rem; +} + +.containerLeft .searchInput { + width: 100%; + border: none; + color: rgba(0, 0, 0, 0.05); +} + +div.containerLeft { + background-color: rgba(0, 0, 0, 0.05); + width: 100%; + height: 50px; + border: 1px solid transparent; +} + +.containerLeft:focus-within { + outline: none; + box-shadow: 0 0 0 1px black; +} + +.searchButton button { + background-color: #fb3e44; + color: white; + border-color: #fb3e44; + width: 100px; + height: 50px; + text-align: center; + font-size: 1.2rem; + cursor: pointer; +} + +div.searchInput input { + width: 100%; + background-color: rgba(0, 0, 0, 0); + border: none; + font-size: 1.2rem; + outline: none; +} + +.loginContainer { + width: 150px; + height: 50px; +} + +.join, +.login { + height: 35px; + width: 70px; + text-decoration: none; + color: black; +} + +.join { + border: solid rgba(0, 0, 0, 0.25) 1px; +} + +/* Main style*/ + +section.upperMain, +section.middleMain { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + height: 600px; +} + +section.upperMain { + height: 600px; + background-color: rgba(232, 217, 217, 0.3); +} + +h1 { + font-size: 5rem; + margin-top: 5vw; + margin-bottom: 2vw; +} + +p.upperMainText { + font-size: 1.5rem; +} + +.upperMainButtons { + display: flex; + justify-content: space-between; + align-items: center; + width: 50vw; + margin-bottom: 5vw; +} + +.plans, +.joinForFree { + margin: 2rem 2rem; + text-decoration: none; + width: 225px; + height: 50px; + font-size: 1.5rem; + font-weight: bold; +} + +.plans { + background-color: #fb3b49; + color: white; + box-shadow: 8px 8px 0 rgba(251, 59, 73, 0.2); +} + +.joinForFree { + background-color: white; + color: black; +} + +section.middleMain { + height: 520px; + background-color: white; + padding-bottom: 5vw; +} + +.triangle { + width: 20vw; + margin-top: 5vw; +} + +.middleMain h2 { + font-size: 2rem; + margin: 5vw 1vw 2vw; + background-color: rgba(255, 204, 53, 0.4); + padding: 0 24px; + transform: skew(9deg, 0deg); + font-style: italic; +} + +p.middleMainText { + font-size: 1rem; + text-align: center; +} + +.lowerMain { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 600px; + flex-direction: column; + justify-content: top; +} + +.containerSquare { + display: flex; + justify-content: center; + align-items: top; + width: 100%; + height: auto; +} + +.square { + display: flex; + flex-direction: column; + width: 20vw; + height: 20vw; + margin: 1vw; +} + +.square img { + width: 3vw; + height: 3vw; + margin: 1vw 2vw; +} + +.square h3 { + font-size: 1rem; + margin: 1vw 2vw; + color: #ed1c24; +} + +.square p { + font-size: 0.8rem; + margin: 1vw 2vw; +} + +div.createButtom button { + margin: 30px; + width: 400px; + height: 50px; + background-color: black; + color: white; + box-shadow: 8px 8px 0 rgba(128,83,35,.2); + font-size: 1.5rem; + font-weight: bold; + cursor: pointer; +}