Skip to content

html and css done #15

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

html and css done #15

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

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

<body>


<header>
<div>
<div>
<img class="black" src="./assets/black-heart.png" alt="black heart" />
<span>Welcome to NPM </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 src="./assets/logo.png">
<span><input id="hello" type="text" placeholder="Search packages" style="width: 1000px;"></span>
<input id="ser" type="button" value="Search">
<input id="hello" type="button" value="sign up">
<input id="hello" type="button" value="sign in">
</div>
</header>
<section id="compabt">
<div>
<h1>Build amazing <br>
things</h1>
<p>We're npm,Inc., the company behing 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 selling useful tools for developers like you.</p>
</div>
</section>
<section id="module">
<div>
<h2> Take your javascript <br>deveopment up a notch</h2>
<p>Get Started today for free, or stop up to npm pro to enjoy a premium <br>
javascript deveopment experience,with features like private packages</p>
<br>
<input id="sign" type="button" value="sign up for free">&emsp;
<input id="learn" type="button" value="Learn about Pro">
</div>
</section>
<section id="bubble">
<div>
&emsp;&emsp;&emsp;&emsp;&emsp13;<img src="./assets/bubble.png" width="70px" height="70px" alt="photo">

<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>
commited 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<br>
and the work you do around it to the next level</p>
</div>
</section>
<section id="images">
<div>
<article>
<img src="./assets/img (1).png" alt="photo">
<h5>npm Free</h5>
<p>Become a contributing member of<br>
the open source JavaScript<br>
community. Create public packages<br>
publish updates audit dependencies <br>
and more</p>
<input class="hello" type="Button" value="L E A R N M O R E">
</article>
<article>
<img src="./assets/img (2).png" alt="photo">
<img src="./assets/img (5).png" alt="photo">
<h5>npm pro & Teams</h5>
<p>for next-level JavaScript<br>
developers who want more<br>
capabilities Pro and Teams add the<br>
ability to buid private packages for <br>
you, your team or for customers</p>
<input class="hello" type="button" value="L E A R N M O R E">
</article>
<article>
<img src="./assets/img (3).png" alt="photo">
<h5>npm Enterprise</h5>
<p>For very large teams and business<br>
critical projects, npm Enterprise<br>
deliver features that organizations <br>
with hundredss of developers need <br>
like SSO and enhanced security</p>
<input class="hello" type="button" value="L E A R N M O R E">
</article>
<article>
<img src="./assets/img (4).png" alt="photo">
<h5> npm pkgSafe</h5>
<p>Our security teams unique insights<br>
into JavaScript vulnerabilities and <br>
threats are delivered as free and <br>
premium features as well as<br>
serviced for resellers and others</p>
<input class="hello" type="button" value="L E A R N M O R E">
</article>
</div>
</section>
<section id="opening">
<div>
<h1>We love open source</h1>

<p>At npm,Inc., we're proud t dedicate learns of full time employees to <br>
operating the np Registry, enhancing the CLI, improving JavaScript<br>
security, and other projects that support and nurture a vibrant <br>
open source community.</p>
</div>
</section>
<section id="greeting">
<div>
<h2>Gratefully serving everyone<br>&emsp;
from solo devs to the <br>&emsp;&emsp;&emsp;
Fortune 500</h2>
<img src="./assets/company.png" height="400px" width="400px">
</div>
</section>
<footer id="footer">
<div id="help">
<div>
<h4>Help</h4>
<div>
<ul style="list-style-type:none;">

<li>Documentation</li>
<li>Community</li>
<li>Case Studies</li>
<li>Advisories</li>
<li>Status</li>
<li>Contact</li>

</ul>
</div>
</div>
<div>
<h4>About</h4>
<div>
<ul style="list-style-type:none;">
<li>Company</li>
<li>Blog</li>
<li>Careers</li>
<li>Webinars</li>
<li>Press</li>
<li>Newsletter</li>
</ul>
</div>
</div>

<div>
<h4>Terms & Policies</h4>
<div>
<ul style="list-style-type:none;">
<li>Policies</li>
<li>Terms of use</li>
<li>Code of Conduct</li>
<li>privacy</li>
</ul>
</div>
</div>
</div>
</footer>
</body>

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

}

nav {
width: 600px;
}

nav ul {
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
}

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

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

#ser {
background: black;
color: white;
border: none;
padding: 15px 20px;
font-family: 'poppins';
font-size: 10px
}

#hello {
padding: 10px 20px;
font-family: 'poppins';
}

#compabt {
background-image: url(./assets/b1.png);
color: rgb(241, 234, 234);
}

#compabt h1 {
font-size: 50px;
}

#compabt p {
font-size: 12px;
}

#compabt {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 20px;
}

#module {
background-image: url(./assets/background2.png);
color: white;
height: 230px;
}

#module {
display: flex;
flex-direction: row;
justify-content: center;
margin: 10px 0;
padding-bottom: 80px;

}

#bubble {
display: flex;
flex-direction: row;
justify-content: center;
margin: 80px;
}

#images div {
display: flex;
flex-direction: row;
justify-content: space-around;
}


#images p {
font-size: 10px;
font-weight: 700;
}

.hello {
border-radius: 20%;
padding: 10px;
font-weight: bold;
font-size: 10px;
font-family: 'Poppins';
width: 70%;
justify-content: space-evenly;
}

#opening {
background-image: url(./assets/background.png);
color: white;
display: flex;
flex-direction: row;
justify-content: center;
padding: 30px;
margin: 50px 0;

}

#greeting {
display: flex;
flex-direction: row;
justify-content: center;
}

#opening p {
font-size: 14px;
}

#module p {
font-size: 14px;
}

#sign {
background-color: red;
color: white;
padding: 10px 20px;
font-family: 'Poppins';
border: none;
}

#learn {
background-color: palevioletred;
color: white;
padding: 10px 20px;
font-family: 'Poppins';
border: none;
}

#bubble h2 {
font-weight: 1500;
}

#bubble p {
font-size: 12px;
}

#footer {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
font-weight: light;
}

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

#help div {
display: flex;
flex-direction: column;
align-items: center;
}