Skip to content

Instantly share code, notes, and snippets.

@JurgenBlitz

JurgenBlitz/JorgeClone.html

Created December 15, 2017 11:08
Show Gist options
  • Save JurgenBlitz/85f327a606d2632868e6b83d6fb8e8ba to your computer and use it in GitHub Desktop.
Save JurgenBlitz/85f327a606d2632868e6b83d6fb8e8ba to your computer and use it in GitHub Desktop.
Download ZIP
My NPM Clone's html code
Raw
JorgeClone.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>npm</title>
</head>
<body>
<!-- Beginning of Jurgen's code -->
<!-- navigation bar -->
<nav>
<div class="top-left">
<a class = "heart" href="#">♥︎</a>
<span class="acronym">Neocyborg Party Mashup</span>
</div>
<ul class="top-links">
<li><a href="#">npm Enterprise</a></li>
<li><a href="#">features</a></li>
<li><a href="#">pricing</a></li>
<li><a href="#">documentation</a></li>
<li><a href="#">support</a></li>
</ul>
</nav>
<!-- navigation bar END -->
<!-- Full header-->
<header>
<div class="row">
<div class="logocontainer">
<a href="#">
<img src="/home/jorge/Imágenes/Clone images/npm-logo.png" alt="npm logo" style="width:125px;height:50px;">
</a>
</div>
<div class="search-container">
<form class="site-search" id="npm-search" action="/search" method="get" itemprop="potentialAction" itemscope="" itemtype="http://schema.org/SearchAction">
<meta itemprop="target" content="https://www.npmjs.com/search?q={q}">
<div id="site-search-container">
<input name="q" value="" type="search" id="site-search" placeholder="find packages" tabindex="1" autocorrect="off" autocapitalize="off" itemprop="query-input" autocomplete="off">
</div>
<button tabindex="2" type="submit">
<svg viewBox="0 0 34 34" fill="none" stroke="currentColor">
<ellipse stroke-width="3" cx="16" cy="15" rx="12" ry="12"></ellipse>
<path d="M26 26 l 8 8" stroke-width="3" stroke-linecap="square"></path>
</svg>
</button>
</form>
</div>
<div class="userinfo">
<a href="#">sign up</a>
<span>or</span>
<a href="#">log in</a>
<a href="#">
<img src="/home/jorge/Imágenes/Clone images/bear-logo.png" alt="bear-logo" style="width:45px;height:45px;">
</a>
</div>
</div>
<!-- Build amazing things -->
<div class="buildamazingthings">
<div class="textcontainer">
<h1>Build amazing things</h1>
<p>npm is the package manager for JavaScript and the world’s largest<br>software registry. Discover packages of reusable code — and<br>assemble them in powerful new ways.</p>
<a class="button" href="#">Sign up for npm</a>
</div>
</div>
</header>
<!-- Build amazing things END -->
<!-- Collaboration -->
<div class="collaboration">
<div class="teamcontainer">
<div class"teambear">
<img src="/home/jorge/Imágenes/Clone images/collaboration.svg" alt="bear and people" style="width:460px;height:274px;">
</div>
<div class="npmorgs">
<h2>npm Orgs is powerful<br>collaboration — for free</h2>
<ul class="benefits">
<li class="list">Encourage code discovery and re-use within teams</li>
<li class="list">Publish and control access to your own namespace</li>
<li class="list">Manage public and private code with the same workflow</li>
</ul>
<a class="nextbutton" href="#">Sign up for Orgs</a>
<p>Or, <a href="#"><b>learn more about Orgs</b></a>
</div>
</div>
</div>
<!-- Collaboration END -->
<!-- What is npm? -->
<div class="whatisnpm">
<div class="main">
<h2>What is npm?</h2>
<p>Use npm to install, share, and distribute code;<br>manage dependencies in your projects; and<br> share & receive feedback with others.</p>
<a class="thirdbutton" href="#">Install npm</a>
</div>
</div>
<!-- What is npm? END -->
<!-- NOTES: the next 3 elements have to be displayed left, mid, right. MIGHT NEED REVISING -->
<div class="whatcanyoumake">
<div class="description">
<h3>What can you make with 475,000 building blocks?</h3>
<p>The npm registry hosts almost half a million packages of free, reusable code — the largest software registry in the world.</p>
<div class="option-container">
<div class="find" class="options">
<img src="/home/jorge/Imágenes/Clone images/binoculars.svg" alt="Find Icon">
<h4><b>Find</b></h4>
<p>Libraries like <a href="#">JQuery</a>, <a href="#">Bootstrap</a>,<br> <a href="#">React</a>, and <a href="#">Angular</a>, and<br> components from frameworks<br> such as <a href="#">Ember</a>.</p>
</div>
<div class="discover" class="options">
<img src="/home/jorge/Imágenes/Clone images/mountain-flag.svg" alt="Discover Icon">
<h4><b>Discover</b></h4>
<p>Packages for mobile, IoT, front<br> end, back end, robotics…<br> everything you need to start<br> building amazing things.</p>
</div>
<div class="build" class="options">
<img src="/home/jorge/Imágenes/Clone images/backpack.svg" alt="Build">
<h4><b>Build</b></h4>
<p>Assemble packages like building<br> blocks to quickly develop<br> awesome new projects.</p>
</div>
</div>
</div>
</div>
<!-- END of Jurgen's code -->
</body>
</html>
Raw
JorgeClonestyles.css
html {
font-family: "Open Sans","OpenSans",sans-serif;
font-size: 16px;
}
body {
margin: 0;
}
nav {
background-color: #C12127;
color: rgba(255,255,255,0.8);
padding: 0 20px 0 20px;
height: 43px;
align-content: space-between;
align-items: center;
}
nav a {
color: rgba(255,255,255,0.8);
text-decoration: none;
}
.top-links {
display: inline-block;
float: right;
padding: 0;
margin: 0 20px 0 0;
}
.top-links li {
display: inline-block;
margin: 0 10px;
}
header {
display: flex;
flex-direction: column;
width: auto;
height: 443px;
padding: 0 20px 0 20px;
background-color: #1D4E69;
background-image: url("/home/jorge/Imágenes/Clone images/city-scape.svg");
}
.row {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 20px;
padding-bottom: 20px;
}
.logocontainer {
width: 125px;
}
.search-container {
width: auto;
flex-grow: 1;
}
.site-search {
width: auto;
padding: 0 20px 0 20px;
position: relative;
}
.site-search input {
background-color: #fabada;
width: 100%;
}
.site-search button {
position: absolute;
top: 1px;
right: 0;
}
.userinfo {
display: flex;
align-items: center;
}
.userinfo span {
margin: 0 5px 0 5px;
}
.userinfo * {
color: white;
text-decoration: none;
font-size: 16px;
}
.buildamazingthings {
width: 1160px;
height: 323px;
padding: 60px 0 60px 0;
margin: 0 auto;
display: block;
font-size: 16px;
line-height: 21.6px;
}
.textcontainer {
margin-left: 48px;
}
.textcontainer * {
color: white;
text-decoration: none;
}
.textcontainer h1 {
margin: 20px 0 10px 0;
padding: 5px 0 5px 0;
font-size: 48px;
font-weight: 400;
line-height: 1.286;
}
.textcontainer p {
margin: 10px 0 10px 0;
font-size: 18px;
font-weight: 400;
line-height: 1.286;
}
.button {
background-color: #f09233;
outline: none;
font-weight: 400;
font-size: 18px;
text-align: center;
height: 24px;
width: 134px;
padding: 7px 26px 8px 26px;
display: inline-block;
border: 1px solid transparent;
border-radius: 20px;
}
.collaboration {
background-color: #273547;
width: 0 auto;
height: 625px;
}
.teamcontainer {
color: rgb(109, 121, 134);
display: flex;
font-size: 16px;
width: 940px;
height: 385px;
padding: 120px 10px 120px 10px;
margin: 0 112px 0 112px;
font-size: 16px;
line-height: 21.6px;
}
.npmorgs {
color: white;
font-size: 16px;
line-height: 21.6px;
height: 380px;
width: : 385px;
padding: 0 10px 0 10px;
margin: 0 40px 0 40px;
}
.npmorgs h2 {
font-size: 36px;
font-weight: 300;
line-height: 46.296px;
margin-bottom: 10px;
}
.npmorgs a {
color: white;
text-decoration: none;
}
.list {
padding: 0 0 20px 23px;
}
.nextbutton {
background-color: #cb3837;
outline: none;
font-weight: 400;
font-size: 18px;
text-align: center;
height: 24px;
width: 134px;
padding: 7px 26px 8px 26px;
display: inline-block;
border: 1px solid transparent;
border-radius: 20px;
}
.whatisnpm {
background-color: #206F9C;
background-image: url("/home/jorge/Imágenes/Clone images/forklift.svg");
height: 529px;
color: white;
margin: 0;
}
.main {
height: 409px;
width: 940px;
padding: 60px 10px 60px 10px;
margin: 0 112px 0 112px;
font-size: 16px;
font-weight: 400px;
line-height: 21.6px;
}
.main h2 {
font-size: 36px;
font-weight: 300;
line-height: 46.296px;
margin-bottom: 10px;
}
.thirdbutton {
background-color: #34495e;
outline: none;
font-weight: 400;
font-size: 18px;
text-align: center;
text-decoration: none;
color: white;
height: 24px;
width: 134px;
padding: 7px 26px 8px 26px;
display: inline-block;
border: 1px solid transparent;
border-radius: 20px;
}
.whatcanyoumake {
background-color: white;
height: 511px;
width: 1517px;
}
.description {
width: 1140px;
height: 431px;
padding: 40px 10px 40px 10px;
margin: 0 205px 0 205px;
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
font-family: "Open Sans","OpenSans",sans-serif;
font-size: 16px;
}
.description h3 {
height: 42px;
font-size: 36px;
font-weight: 300px;
line-height: 1.28
padding: 0 3.9px 0 3.9px;
margin: 20px 0 20px 0;
text-align: center;
}
.description p {
font-size: 16px;
line-height: 1.35;
color: #6d7986;
text-align: center;
margin-bottom: 10.5px;
}
.option-container {
display: flex;
justify-content: space-around;
padding-top: 20px;
}
.option-container h4 {
font-size: 20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment