From 4787f3215f99ddc2398c3a54c9049b4a27288b34 Mon Sep 17 00:00:00 2001 From: estherlopezdam Date: Sun, 22 Sep 2024 03:00:46 +0200 Subject: [PATCH] ClonWebPreWork --- index.html | 161 +++++++++++++++++++++++++++++++++++++++++- style.css | 200 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 359 insertions(+), 2 deletions(-) create mode 100644 style.css diff --git a/index.html b/index.html index a2d9c01ab..7772af7cb 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ -NPM Clone Nifty Penguin Magic npm Enterprise Products Solutions Resources Docs Support Search Join Log In Build amazing + + + + + + + + + + +
+
+
+ black heart + Nifty Penguin Magic +
+ +
+ +
+ npm-logo + +
+
+ + Search +
+ +
+
+ + + +
+ +
+
+
+
+

Build amazing things

+ +
+ +
+

Essential JavaScript development tools that help you

+

go to mrket faster and build powerfull applications

+

using modern open source code.

+ +
+ +
+ + + +
+ +
+ + +
+ 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 ut. Your company depends on it. Create an Org and get more out the tools your

+

team already knows and loves

+
+ +
+ +
+ +
+ Zero +
+
+

Zero configuration


+ +
+

Create an org add your team

+

and start collaborating.

+

Nothing to configure, set up, or

+

manage

+ +
+ +
+ Team +
+
+

Team management


+ +
+

Control who has access to

+

what modules within your

+

team namespace using

+

straightforward team

+

management capabilities

+ +
+ + +
+ Familiar +
+
+

Familiar features


+ +
+

npm Orgs has 100% parity with

+

all the public npm registry

+

features your developers

+

already use.

+ +
+ +
+ npmAudit + +
+
+

npm audit


+ +
+

Enjoy the security auditing

+

features built into the npm

+

cliente a zero-friction way to

+

make open source software

+

safer.

+ +
+ + + +
+ + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 000000000..8a99ba9c9 --- /dev/null +++ b/style.css @@ -0,0 +1,200 @@ +@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; +} + +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; +} + +form label { + color: rgba(0, 0, 0, .05); +} + +form input { + color: rgba(0, 0, 0, .05); +} + +form button { + background-color: #fb3e44; +} + +form button { + color: white; +} + + +/* Contenedor para la barra de búsqueda y el ícono */ +.search-container { + position: relative; + width: 2500px; /* Ajusta el ancho de la barra */ +} + +/* Estilos para el input (barra de búsqueda) */ +.search-bar { + width: 100%; /* Ocupa todo el ancho del contenedor */ + height: 40px; /* Ajusta la altura del input */ + font-size: 16px; /* Tamaño del texto */ + padding: 10px 10px 10px 40px; /* Deja espacio para el ícono a la izquierda */ + border: 1px solid #ccc; /* Estilo del borde */ + border-radius: 8px; /* Bordes redondeados opcionales */ + box-sizing: border-box; /* Asegura que padding no rompa el diseño */ +} + +/* Estilos para el ícono de búsqueda */ +.search-icon { + position: absolute; + left: 10px; /* Posición del ícono desde la derecha */ + top: 50%; /* Centrado verticalmente */ + transform: translateY(-50%); /* Ajuste para centrar verticalmente */ + height: 20px; /* Ajusta el tamaño del ícono */ + pointer-events: none; /* Evita que el ícono interfiera con los clics */ +} +.search-form { + display: flex; /* Utiliza flexbox para alinear los elementos horizontalmente */ + justify-content: center; /* Centra horizontalmente */ + align-items: center; /* Alinea verticalmente los elementos */ +} + +.search-button { + height: 40px; /* Altura del botón para que coincida con el input */ + font-size: 16px; /* Tamaño del texto */ + padding: 10px 20px; /* Espaciado interno del botón */ + border: 1px solid #ccc; /* Mismo borde que el input */ + border-radius: 0 5px 5px 0; /* Bordes redondeados (solo a la derecha) */ +} +section h1 { + font-size: 60px; +} +.section1 { + + display: flex; + height: 600px; + flex-direction: column; + flex-wrap: nowrap; + align-items: center; + align-content: center; + justify-content: center; + background-color: rgba(232,217,217,.3); + font-weight: bold; + text-align: center; + + +} +.article1 { + text-align: justify; + +} +.button-seeplans { + background-color: #FB3B49; + box-shadow: 8px 8px 0 rgba(251,59,73,.2); + font-weight: bold; + +} +.Join-section1 { + color: black; + background-color: white; + font-weight: bold; + +} + +.section2 { + + display: flex; + height: 600px; + flex-direction: column; + flex-wrap: nowrap; + align-items: center; + align-content: center; + justify-content: center; + text-align: center; + + +} +.headerSection2 { + background-color: rgba(255,204,53,.4); + font-weight: bold; + height: 60px; + + +} + +.section3 { + display: flex; + width: 100%; + height: 600px; + flex-wrap: nowrap; + align-items: center; + align-content: center; + justify-content: center; + text-align: left; + flex-direction: row; + + +} + +.iconsSection3 { + width: 40px; + float: left; +} + +.headerSection3 { + color: #ED1C24; + font-weight: bold; + padding-top: 40px; +} + +.divSection3 { + padding: 40px; + height: 500px; + +} +.buttonCreate { + display: block; + float: bottom; + background-color: black; + color: white; + font-weight: bold; + text-align: center; + height: 50px; + margin-left: 45%; + margin-right: 45%; + width: 10%; +} +.buttonHeader { + width: 5%; + float: right; +} + + + + + + +