From 7cb1063f5dac8e10956dfc0c82082e60d4635304 Mon Sep 17 00:00:00 2001 From: IvandeGea <92228308+IvandeGea@users.noreply.github.com> Date: Sat, 7 Jan 2023 16:02:50 +0100 Subject: [PATCH] Assigment Html & CSS I am attaching the work done in this way, since I get an error when trying to push the files. I will try to solve the problem, but first I wanted to send you the work done. The html document "index.html" is the part of the structure and the css document "style.css" is the style that I have made. I have tried to respect all the measures. I hope it can be seen well, if there is any problem, do not hesitate to tell me, since I think it is quite good. --- index.html | 122 +++++++++++++++++++++++-- style.css | 264 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 377 insertions(+), 9 deletions(-) create mode 100644 style.css diff --git a/index.html b/index.html index a2d9c01ab..db7bf439d 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,113 @@ -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 + + + + +
+
+
+ black heart + Nifty Penguin Magic +
+ +
+ +
+ + + +
+ + +
+ + + + +
+ + +
+ + +
+

Build amazing things

+

Essential JavaScrip development tools that help you
go to market faster and build poweful applications
using modern open source code.

+
+ + +
+
+ +
+
+ hexagon +
+

Bring the best of open source to your company

+

npm is the tool used by over 111,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 know 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 managment +

+

Control who has access towhat modules within your team namespace usingstraightforward 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 clien a zero-friction way to make open source sofware safer. +

+
+ +
+
+ +
+ + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 000000000..667370340 --- /dev/null +++ b/style.css @@ -0,0 +1,264 @@ +@import url('https://fonts.googleapis.com/css?family=Poppins'); + +body { + font-family: 'Poppins'; +} + +header > div { + padding: 0 25px; + display:flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid lightgray; + } +span{ font-size: 10 ; +} +nav { + width: 600px; + font-size: 10;} + +nav ul { + list-style: none; + display: flex; + justify-content: space-between; + align-items: center; + } + +nav a { + text-decoration: none; + color: black; + font-weight: bold; + } + +.blackHeart { + width: 20px; + margin-right: 1rem; + } + +.secondbar { + height:40px ; + padding:; + margin-top:2 + margin-bottom: 2; + border-bottom: 1px solid lightgray; + padding: 0 25px; + display:flex; + flex-direction: row; + justify-content:space-around + align-items: center; + } +.logo{ + width: 40px; + padding-right: 3 + } +.input-search{ + color:black); + background-color:rgba(0,0,0,.05) ;} +.lupa{ + background-color:rgba(0,0,0,.05); + width:11 ; + height: 15; + padding: 5 5 ; + margin-left: 5; +} + +.secondbar-form{ + display:flex; + justify-items:center + justify-content: flex-start; + padding-bottom:0 ; + width:100%; + margin-top: 2; + margin-bottom: 2; + margin-right:20; +} + +.label { +display: flex; +width: 100%; ; +height: 25px;; +} + +.search-button{ + background-color:#fb3e44 ; + color:white; + font-size:12; + border:none; + height: 25px; + text-align:center; + margin-left: 1px;} + + +.button-join{ + font-size: 10; + height: 20px; + text-align:center; + background-color: white; + border-width:1 0.5 0.5 0.5 ; + width: 50px; + height: 20px; + transition: opacity .15s ease-in; +} + +.button-login{ + font-size: 10 ; + border: none; + background-color: white; + height: 20px; + width: 50px; + text-align:center ; +} + + +input[type="text"] { + flex-grow: 1; + width: 100%; + height: 100%; + border: none; + font-size: 10px; +} + +#build { + height: 500px; + padding-top: 20px; + position:relative; + background-color:rgba(232,217,217,.3); + align-items: center; + margin:0 1; +} + +#build h1{ + font-family: Poppins,sans-serif; + font-weight: bolder; + text-align:center ; + font-size: 3.5em; +} + +#build p{ + font: size 15px; ; + text-align:center ; + text-justify:center ; + padding-bottom:20px ; + padding-top: 20px; + font-weight: 400; +} +.build-button{ + display:flex + justify-content: center; + text-align: center ; + margin-top:50;} + +#build button{ + font-size: 13 ; + font-weight: 700; + margin:30%,30% ; + border: none; + padding:16px 45px;} + +.see-plans{ + background-color: #fb3e44; + margin-right: 20px; + text-align:center ; + box-shadow:8px 8px 0 rgba(251,59,73,.2); + color: white} + +#hexagon{ + padding-top:60 ; + align-items: center; + text-align: center; + text-justify: center ; + display: flex; + flex-direction: column; + justify-content:center ; + margin: 10 5; + ; +} + +#hexagon img{ + width: 200; + padding-bottom:30; +} + +#hexagon < div < img{ + display:flex; + align-items:center; + justify-content: center ;} + +#hexagon h2{ + background-color:rgba(255,204,53,.4) ; + transform:skew(9deg,0deg) ; + font-style:italic ; + text-align: center ; + padding:50,0 ; + width: 70%; ; + text-justify:center; + position: relative; + font-size:28 ; + font-weight:900; + +} +#hexagon p{ + text-align:center; + font-size: 15 ; +} +#service{ + padding-top:100px; + padding-right: 75px; + padding-left: 75px; + padding-bottom: 50px; + display: flex; + margin: 0 0 0 0; + justify-content:space-around; + +} +#service article{ + width: px; + margin: 0 ; + padding-right:20px; + + align-items: center + margin-bot:0; + + +} + +#service img{ + width: 18px; + padding-bottom: 0; +} +#service h3{ + color: #ED1C24; + font-size: 14; + font-weight: bold 900; + text-align: left; +} +.text{ + font-size: 13; + font-weight: 100; + text-align: left; + margin: 0px 0; +} +.container{ + width:175 ; +} + +#create{ + display:flex; + justify-content: center; + margin:30 auto; + padding-top:0 ; + + +} +#create button{ + background-color: black; + text-align: center; + font-weight: 900; + width: 250 ; + height: 40; + margin:5 20 ; + color: white; + box-shadow:8px 8px 0 rgba(128,83,35,.2) ; + borde: none; +} +