Skip to content

done #32

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
divyashree-N wants to merge 1 commit into
base: master
Choose a base branch
from
Open

done #32

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
161 changes: 157 additions & 4 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,165 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style.css" />
</head>

<body>

<header>
<div>
<div>
<img class="blackHeart" src="assets/black-heart.png" alt="black heart" />
<span> next() Packaged Middleware </span>
</div>
<nav>
<ul>
<li><a href="#"> Products </a></li>
<li><a href="#"> Pricing </a></li>
<li><a href="#"> Documentation </a></li>
<li><a href="#"> Community</a></li>
</ul>
</nav>
</div>

<div>
<img class="logo" src="assets/logo.png" alt="logo" />
<form action="">
<input class="input" type="text" placeholder="Search packages" />
<input class="search" type="submit" value="Search">
<input type="submit" value="Sign Up" />
<input type="submit" value="Sign In" />
</form>
</div>
</header>
<hr />

<div id="content">
<h1>
Build amazing<br />
things
</h1>
<p>
We're npm. Inc., the company behind Node package manager, the npm
<br />Registry and npm CLI. We offer those to the community for free,
but our<br />
day job is building and setting useful tools for developers like you.

<h2>Take your Javascript<br>development up a notch</h2>
<p>Get started today for free,or step up to npm Pro to enjoy a premium<br>Javascript development
experience,with features like private packages.</p>
<br>
<div id="button">
<a href="#" class="link-button">Sign up for free</a>
<a href="#" class="link-button1">Learn about Pro </a>
</div>
</p>
</div>

<div id="container">
<img class="bubble" src="assets/bubble.png" alt="bubble">
<h2>Bring the best of open<br>source to you,your team,<br>and your company</h2>
<p>Relied upon by more than 11 million developers worldwide,npm is<br>committed to making Javascript development
elegant,productive,and<br>safe.The free npm Registry has become the center of Javascript code<br>sharing,and
with more than one million packages,the largest software<br>registry in the world. Our other tools and
services take the Registry,and<br>the work you do around it,to the next level.</p>
</div>
<hr>

<section id="container2">
<div>
<article>
<img src="assets/img (1).png" alt="npm Free">
<h4>npm Free</h4>
<p>Become a contributing member of<br> the open source Javascript <br>community.Create public<br>
packages,publish
updates,audit<br> your dependencies,and more.</p>
<input type="submit" value="Learn more"><br>
</article>

<article>
<img src="assets/img (2).png" alt="npm Pro & Teams">
<img class="npm Pro & Teams" src="assets/img (5).png" alt="npm Pro & Teams">
<h4>npm Pro & Teams</h4>
<p>For next-level JavaScript<br>developers who want more<br>capabilities.Pro and Teams add
the<br>ability to
build private packages for<br>you,your team,or for customers.<br></p>
<input type="submit" value="Learn more"><br>
</article>

<article>
<img src="assets/img (3).png" alt="npm Enterprise">
<h4>npm Enterprise</h4>
<p>For very large teams and business-<br>critical projects,npm Eneterprise<br>delivers features that
organizations<br>with hundreds of developers need,<br>like SSO and enhanced security.</p>
<input type="submit" value="Learn more"><br>
</article>
<article>
<img src="assets/img (4).png" alt="npm PkgSafe">
<h4>npm PkgSafe</h4>
<p>Our security team's unique insights<br>into JavaScript vulnerabilities and<br>threats are delivered
as
free and<br>premium features,as well as<br>services for resellers and others.</p>
<input type="submit" value="Learn more"><br>
</article>
</div>
</section>

<div id="source">
<h2>We open source</h2>
<p>At npm,Inc.,we're proud to dedicate teams of full-time employees to<br>operating the npm Registry,enhancing
the CLI,improving JavaScript<br>security,and other projects that support and nurture a vibrant
open<br>source community.</p>
</div>
<hr>

<div id="grateful">
<h3>Gratefully serving everyone<br>from solo devs to the <br>Fortune 500 </h3>
</div>
<hr>
<div id="comp">
<img class="company" src="assets/company.png" alt="img" height="400px">
</div>
<hr>

<div id="help-container">

<div>
<h5>Help</h5>
<ul>
<li>Documentation</li>
<li>Community</li>
<li>Resources</li>
<li>Advisories</li>
<li>Status</li>
<li>Contact</li>
</ul>
</div>

<div>
<h5>About</h5>
<ul>
<li>Company</li>
<li>Blog</li>
<li>Careers</li>
<li>Webinars</li>
<li>Press</li>
<li>Newsletter</li>
</ul>
</div>

<div>
<h5>Terms & Policies</h5>
<ul>
<li>Policies</li>
<li>Terms of Use</li>
<li>Code of Conduct</li>
</ul>
</div>
</div>
</body>

</html>
138 changes: 138 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
@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;
}

.input {
line-height: 2em;
width: 500px;
margin: 20px 0;
}

.search {
color: white;
background-color: black;
line-height: 2em;
cursor: pointer;
}

#content {
background: url(assets/background2.png);
color: white;
display: flex;
flex-direction: column;
align-items: center;
}

h1 {
font-size: 50px;
text-align: center;
}

h2 {
font-size: 30px;
}

.link-button {
text-decoration: none;
text-align: center;
background: #f05136;
cursor: pointer;
font-weight: 100;
color: white;
font-size: 1.5em;
padding: 10px;
border-color: black;
}

.link-button1 {
text-decoration: none;
text-align: center;
background: #f036d1;
cursor: pointer;
font-weight: 100;
color: white;
font-size: 1.5em;
padding: 10px;
border-color: black;
}

#container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 20px;
}

#container2 div {
display: flex;
justify-content: space-around;
margin: 40px 0;
}

#source {
background: url(assets/background.png);
color: white;
display: flex;
flex-direction: column;
align-items: center;
}

#grateful {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}

#comp {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}

#help-container {
display: flex;
justify-content: space-around;
width: 100%;
}

ul {
list-style: none;
}

h5 {
text-align: center;
}