A Pen by tomjohnburton on CodePen.
Last active
July 24, 2018 14:48
-
-
Save tomjohnburton/a4c0af5b71d33cbf254de15b283b0d9e to your computer and use it in GitHub Desktop.
LByXpj
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<nav> | |
<div> | |
<div class="top-left"> | |
<a class="heart" href="#">♥︎</a> | |
<span class="acronym">Neophobe Plebeian Mumpsimus</span> | |
</div> | |
<div class="right"> | |
<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> | |
</div> | |
</div> | |
<div class="clear"></div> | |
</nav> | |
<header id="header" class="header container"> | |
<div> | |
<div class="left"> | |
<img src="" alt="npm Logo"> | |
</div> | |
<div class="left form"> | |
<form> | |
<label for="search"></label> | |
<input type="text" id="search" placeholder="find packages"> | |
</form> | |
</div> | |
<div class="signup"> | |
<a href="#">sign up or log in</a> | |
</div> | |
</div> | |
<div class="build"> | |
<h1>Build amazing things</h1> | |
<p>npm is the package manager for JavaScript and the worlds largest software registry. Disover packaes of reusable code -- and assemble them is powerful new ways.</p> | |
</div> | |
<div class="button"> | |
<button type="submit">Reserve Your Slot!</button> | |
</div> | |
<div class="right"> | |
<img src="" alt="construction"> | |
</div> | |
<div class="clear"></div> | |
</header> | |
<section id="npmorg" class="backstyle"> | |
<div class="left"> | |
<img src="http://www.w3.org/2000/svg" alt="collaboration"> | |
</div> | |
<div class="right"> | |
<h2>npm Orgs is powerful collaboration -- for free</h2> | |
<ul> | |
<li>Encorage code discovery and re-use within teams</li> | |
<li>Publish and control access to your own namespace</li> | |
<li>Manage public and private code with the same workflow</li> | |
</ul> | |
<div class="buttonorgs"> | |
<button type="submit">Sign up for Orgs</button> | |
</div> <br> or, <a href="#">Learn more about Orgs</a> | |
</div> | |
<div class="clear"></div> | |
</section> | |
<section id="npmwhat"> | |
<h3>What is npm?</h3> | |
<p>Use npm to install, share, and distribute code; manage dependencies in your projects; and share & receive feedback with others.</p> | |
<a href="#">Install npm</a> | |
</section> | |
<section id="npmtask"> | |
<h2>What can you do with 475,000 building blocks?</h2> | |
<p>The npm registry hosts almost half a million packages of free, reusable code -- the largest software registry in the world </p> | |
<div> | |
<h4>Find</h4> | |
<img src="#" alt="find"> | |
<p>Pacages like <a href="#">JQuery</a>, <a href="#">Bootstrap</a>, <a href="#">React</a>, and <a href="#">Angular</a>, and components from frameworks such as <a href="#">Ember</a> </p> | |
</div> | |
<div> | |
<h4>Discover</h4> | |
<img src="#" alt="discover"> | |
<p>Packages for mobile, IoT, front end, back end, robotics... everything you need to start building amazing things.</p> | |
</div> | |
<div> | |
<h4>Build</h4> | |
<img src="#" alt="Build"> | |
<p>Assemble packages like building blocks to quickly develop awesome new projects</p> | |
</div> | |
</section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.container { | |
margin: 0 auto; | |
padding: 10px 0; | |
width: auto; | |
} | |
nav { | |
background-color: #c12127; | |
color: rgba(255, 255, 255, 0.8); | |
padding: 15px; | |
height: auto; | |
} | |
nav a { | |
color: rgba(255, 255, 255, 0.8); | |
text-decoration: none; | |
} | |
nav div a, | |
span { | |
font-family: OpenSans; | |
text-justify: up; | |
} | |
.top-links { | |
padding: 0; | |
margin: 0 20px 0 0; | |
} | |
.top-links li { | |
display: inline-block; | |
margin: 0 10px; | |
text-align: right; | |
} | |
.top-left { | |
display: inline-block; | |
} | |
.clear { | |
clear: both; | |
} | |
.right { | |
float: right; | |
} | |
.left { | |
float:left | |
} | |
.form { | |
display: block; | |
color: transparent; | |
width: 60%; | |
padding: 5px; | |
background-color: rgb(31, 82, 111); | |
border: 1px solid whitesmoke; | |
-webkit-appearance: none | |
} | |
.signup { | |
} | |
.build { | |
width: 55%; | |
margin:auto | |
} | |
.header { | |
background: rgb(31, 82, 111); | |
color: white | |
} | |
.button { | |
background: rgb(240, 146, 51); | |
border: 1px solid grey; | |
color: inherit; | |
margin-top: auto; | |
padding: 9px; | |
width: 13%; | |
cursor:pointer; | |
-webkit-border-radius: 28; | |
-moz-border-radius: 28; | |
border-radius: 28px; | |
font-family: Radio; | |
} | |
.button:hover { | |
background-color: #008CBA; | |
color: white; | |
} | |
#npmorg.backstyle { | |
color: white; | |
background-color: rgb(29,53,71); | |
margin:auto; | |
padding: 30px 20% | |
} | |
#npmord img { | |
floa | |
} | |
.buttonorgs { | |
background: rgb(203, 56, 55); | |
border: 1px solid grey; | |
color: inherit; | |
margin-top: auto; | |
padding: 9px; | |
width: 30%; | |
cursor:pointer; | |
-webkit-border-radius: 28; | |
-moz-border-radius: 28; | |
border-radius: 28px; | |
font-family: Radio; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment