Skip to content

[MAD-PartTime-0825]-CristinaOancea #3989

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

[MAD-PartTime-0825]-CristinaOancea #3989

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 90 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,93 @@
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

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NPM - Clone</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="header-top">
<div class="logo-text">
<img class="blackHeart" src="images/black-heart.png" alt="black heart" />
<span> Nifty Penguin Magic </span>
</div>
<nav>
<ul>
<li><a href="#"> npm Enterprise </a></li>
<li><a href="#"> Products </a></li>
<li><a href="#"> Solutions </a></li>
<li><a href="#"> Resources </a></li>
<li><a href="#"> Docs </a></li>
<li><a href="#"> Support </a></li>
</ul>
</nav>
</div>
<div class="header-bottom">
<div class="logo-search">
<img src="images/npm-logo.svg" alt="npm logo" />
<form>
<input type="search" placeholder="Find a package..." />
<button type="submit">Search</button>
</form>
</div>
<div class="buttons">
<button>Sign Up</button>
<button>Log In</button>
</div>
</div>
</header>

<section id="section1">
<h1>Build amazing things</h1>
<p>
Essential tools for modern JavaScript development.
<br>
`npm` is the default package manager for the JavaScript runtime environment Node.js.
</p>
<div>
<button class="button-red">See plans</button>
</div>
</section>

<section id="section2">
<div class="section-content">
<div class="text-content">
<h2>
<span class="yellow-background">Get more done</span>
</h2>
<p>
A npm's `Enterprise` subscription gives you more control and visibility.
</p>
</div>
<img src="images/enterprise.svg" alt="enterprise" />
</div>
</section>

<section id="section3">
<div class="section-content">
<img src="images/npm-logo-icon.svg" alt="npm icon" />
<div class="text-content">
<h3>Collaborate on packages</h3>
<p>
npm gives teams a single, secure, and reliable registry to publish and install packages from.
</p>
<button class="button-org">Create an Org</button>
</div>
</div>
</section>
</body>
</html>
<footer>
<p>&copy; 2023 NPM Clone. All rights reserved.</p>
<ul>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Contact</a></li>
</ul>
</footer>
166 changes: 166 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
@import url('https://fonts.googleapis.com/css?family=Poppins');

body {
font-family: 'Poppins';
margin: 0;
}

/* Header and Navigation */
.header-top {
padding: 10px 25px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid lightgray;
}

.logo-text {
display: flex;
align-items: center;
}

.blackHeart {
width: 20px;
margin-right: 1rem;
}

.header-top nav ul {
list-style: none;
display: flex;
justify-content: space-between;
width: 600px;
}

.header-top nav a {
text-decoration: none;
color: black;
}

.header-bottom {
padding: 15px 25px;
display: flex;
justify-content: space-between;
align-items: center;
}

.logo-search {
display: flex;
align-items: center;
}

.header-bottom img {
width: 80px;
margin-right: 1rem;
}

.header-bottom input {
border: 1px solid lightgray;
border-radius: 5px;
padding: 8px;
background-color: rgba(0,0,0,.05);
}

.header-bottom button {
background-color: #fb3e44;
color: white;
border: none;
border-radius: 5px;
padding: 8px 15px;
margin-left: 10px;
}

.buttons {
display: flex;
gap: 10px;
}

.buttons button {
background-color: white;
color: #fb3e44;
border: 1px solid #fb3e44;
border-radius: 5px;
padding: 8px 15px;
}

/* Section 1 */
#section1 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 600px;
background-color: rgba(232,217,217,.3);
text-align: center;
}

#section1 h1 {
font-size: 3rem;
margin: 0;
}

#section1 p {
font-size: 1.5rem;
margin: 20px 0;
}

.button-red {
background-color: #FB3B49;
color: white;
border: none;
border-radius: 5px;
padding: 15px 30px;
box-shadow: 8px 8px 0 rgba(251,59,73,.2);
}

/* Section 2 */
#section2 {
display: flex;
justify-content: center;
align-items: center;
padding: 50px 0;
}

#section2 .section-content {
display: flex;
align-items: center;
gap: 50px;
}

#section2 .yellow-background {
background-color: rgba(255,204,53,.4);
transform: skew(-9deg, 0deg);
display: inline-block;
padding: 0 5px;
}

/* Section 3 */
#section3 {
display: flex;
justify-content: center;
align-items: center;
padding: 50px 0;
}

#section3 .section-content {
display: flex;
align-items: center;
gap: 50px;
}

#section3 img {
width: 150px;
}

#section3 h3 {
color: #ED1C24;
}

.button-org {
background-color: white;
color: #ED1C24;
border: 1px solid #ED1C24;
border-radius: 5px;
padding: 15px 30px;
box-shadow: 8px 8px 0 rgba(128,83,35,.2);
}
/* Footer */