<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/dariuszsobkowicz/pen/gMmbqJ?depth=everything&order=popularity&page=3&q=ebay&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
<style class="cp-pen-styles">@import "https://fonts.googleapis.com/css?family=Pathway+Gothic+One|Roboto:300,400,500,700";
*, *:before, *:after {
box-sizing: border-box;
}
html {
-webkit-font-smoothing: antialiased;
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
.hero {
min-width: 1024px;
min-height: 600px;
background: url("https://www.paypalobjects.com/digitalassets/c/website/marketing/na/us/home/hero-adventure-uncookied.jpg") no-repeat right bottom;
background-size: cover;
position: relative;
z-index: 1;
}
nav {
width: 100%;
height: 72px;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
position: relative;
}
nav:before {
content: "";
display: block;
width: 100%;
height: 70px;
box-shadow: 0px 0px 110px 30px rgba(0, 0, 0, 0.5);
position: absolute;
background-color: red;
top: -70px;
z-index: -1;
}
.col-nav {
float: left;
margin: 0 2.33333333%;
}
.col-nav:first-child, .col-nav:last-child {
width: 18%;
}
.col-nav:nth-child(2) {
width: 50%;
}
.logo-container-nav,
.menu-container-nav,
.buttons-container-nav {
height: 100%;
position: relative;
}
.logo-icon-nav {
display: block;
width: 136px;
height: 43px;
background: url("https://www.paypalobjects.com/webstatic/i/logo/rebrand/ppcom-white.svg") no-repeat center center;
background-size: contain;
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.menu-content-nav {
height: 100%;
}
.menu-content-nav li {
display: inline-block;
float: left;
height: 100%;
line-height: 72px;
width: 19.53125%;
margin: 0 2.734375%;
letter-spacing: 0.5px;
}
.menu-content-nav li:hover {
border-bottom: 2px solid #FFFFFF;
cursor: pointer;
}
.selected-personal:after,
.selected-business:after,
.selected-send:after {
content: "";
display: inline-block;
width: 9px;
height: 9px;
position: relative;
top: -4px;
left: 6px;
border: 1px solid #FFFFFF;
border-top: 1px solid transparent;
border-left: 1px solid transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.25s linear;
transition: all 0.25s linear;
}
.selected-rotate:after {
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
top: 1px;
}
.text-nav {
text-transform: uppercase;
text-align: center;
font-size: 14px;
}
.text-nav a {
text-decoration: none;
}
.text-nav a:link, .text-nav a:visited {
color: #FFFFFF;
}
.buttons-content-nav {
overflow: hidden;
position: absolute;
top: 50%;
right: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.buttons-content-nav a {
display: inline-block;
width: 84px;
height: 36px;
line-height: 36px;
border-radius: 25px;
}
.buttons-content-nav a:first-child {
border: 1px solid #FFFFFF;
margin-right: 2px;
}
.buttons-content-nav a:last-child {
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
}
.text-btn-nav {
text-align: center;
font-size: 12px;
letter-spacing: 0.5px;
}
.text-btn-nav a {
text-decoration: none;
}
.text-btn-nav a:first-child {
color: #FFFFFF;
}
.text-btn-nav a:last-child {
color: #222222;
}
.sub-menu {
display: none;
position: absolute;
background-color: rgba(0, 0, 0, 0.4);
width: 100%;
height: 230px;
top: 0;
z-index: -1;
background-color: #009cde;
background-image: -webkit-radial-gradient(circle farthest-side at center bottom, #009cde, #003087 125%);
background-image: radial-gradient(circle farthest-side at center bottom, #009cde, #003087 125%);
}
.sub-menu-list {
margin: 99px 8% 0 4%;
overflow: hidden;
}
.sub-menu-list li {
width: 30%;
float: left;
white-space: nowrap;
}
.sub-menu-list li:nth-child(4) {
clear: left;
}
.sub-menu-list li:nth-child(2), .sub-menu-list li:nth-child(5) {
margin: 0 5%;
}
.sub-menu-list li:nth-child(1n+4) {
margin-top: 30px;
}
.sub-menu-list li a {
color: white;
font-weight: 500;
text-decoration: none;
}
.sub-menu-list li a span {
display: block;
font-size: 14px;
font-weight: 500;
margin-top: 4px;
color: rgba(255, 255, 255, 0.85);
}
.sub-menu-list li a:hover {
text-decoration: underline;
}
.close-menu-personal,
.close-menu-business,
.close-menu-send {
position: absolute;
right: 2.33333333%;
top: 99px;
display: block;
width: 30px;
height: 30px;
}
.close-menu-personal span,
.close-menu-business span,
.close-menu-send span {
display: block;
width: 110%;
height: 2px;
background-color: white;
position: relative;
top: 12.5px;
left: -1px;
}
.close-menu-personal span:first-child,
.close-menu-business span:first-child,
.close-menu-send span:first-child {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.close-menu-personal span:last-child,
.close-menu-business span:last-child,
.close-menu-send span:last-child {
-webkit-transform: rotate(-45deg) translate(1px, -2px);
transform: rotate(-45deg) translate(1px, -2px);
}
.closer {
width: 100%;
min-height: 528px;
background-color: transparent;
position: relative;
z-index: -2;
}
.sub-menu-send {
margin: 99px auto 0 auto;
width: 700px;
text-align: center;
}
.sub-menu-send h3 {
font-size: 20px;
font-weight: 300;
letter-spacing: 0.5px;
color: #FFFFFF;
margin-bottom: 15px;
}
.sub-menu-send a {
margin-left: 20px;
font-size: 13px;
text-decoration: none;
font-weight: 400;
color: #FFFFFF;
}
.sub-menu-send a:visited {
color: #FFFFFF;
}
.sub-menu-send a:hover {
text-decoration: underline;
}
/* Inputs */
input {
height: 40px;
line-height: 40px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 1px solid #b3b3b3;
border-radius: 5px;
text-indent: 10px;
}
::-webkit-input-placeholder {
color: #333333;
text-indent: 10px;
font-size: 14px;
font-weight: 400;
opacity: 0.5;
}
input[name="email"] {
width: 250px;
margin-right: 5px;
}
input[name="amount"] {
width: 100px;
border-radius: 5px 0 0 5px;
}
select[name="currency"] {
width: 100%;
text-indent: 10px;
font-size: 16px;
font-weight: 400;
border-top: 1px solid #b3b3b3;
border-right: 1px solid #b3b3b3;
border-bottom: 1px solid #b3b3b3;
border-left: none;
border-radius: 0 5px 5px 0;
height: 40px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
position: relative;
}
.currency {
width: 70px;
position: relative;
left: -4px;
background-color: #FFFFFF;
border-radius: 0 5px 5px 0;
display: inline-block;
vertical-align: middle;
}
.currency:before {
content: "";
display: block;
position: absolute;
top: 18px;
right: 10px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #000000;
}
.submit {
height: 40px;
line-height: 40px;
width: 100px;
margin-left: 5px;
background-color: #FFFFFF;
border-radius: 25px;
display: inline-block;
vertical-align: middle;
}
input[name="send"] {
background-color: transparent;
font-weight: 500;
font-size: 14px;
border: none;
border-radius: 25px;
width: 100%;
height: 100%;
line-height: 100%;
text-indent: 0;
}
/* Heading */
.hero-heading {
width: 650px;
text-align: center;
position: absolute;
z-index: -2;
top: 150px;
left: 0;
right: 0;
margin: auto;
}
.hero-heading h1 {
font-family: 'Pathway Gothic One', sans-serif;
font-style: italic;
font-size: 80px;
text-transform: uppercase;
color: #FFFFFF;
text-shadow: 0 0 100px rgba(0, 0, 0, 0.5);
}
.hero-heading a {
display: block;
width: 320px;
height: 50px;
line-height: 50px;
margin: 0 auto;
color: #FFFFFF;
text-decoration: none;
font-weight: 500;
font-size: 14px;
border-radius: 25px;
}
.hero-heading a.btn-blue {
background-color: #005ea6;
border: 1px solid #005ea6;
margin-top: 30px;
margin-bottom: 10px;
}
.hero-heading a.btn-clear {
border: 1px solid #FFFFFF;
text-shadow: 0 0 100px rgba(0, 0, 0, 0.5);
}
.text-move {
top: 265px;
}
</style></head><body>
<section class="hero">
<nav>
<div class="col-nav logo-container-nav"><a href="#" class="logo-icon-nav"></a></div>
<div class="col-nav menu-container-nav">
<ul class="menu-content-nav text-nav">
<li class="open-menu-personal"><a href="#" class="selected-personal">Personal</a></li>
<li class="open-menu-business"><a href="#" class="selected-business">Business</a></li>
<li class="open-menu-send"><a href="#" class="selected-send">Send</a></li>
<li><a href="#">Request</a></li>
</ul>
</div>
<div class="col-nav buttons-container-nav">
<div class="buttons-content-nav text-btn-nav">
<a href="#">Log In</a>
<a href="#">Sign Up</a>
</div>
</div>
</nav>
<div class="sub-menu personal">
<ul class="sub-menu-list">
<li><a href="#">Getting Started <span>How to use PayPal</span></a></li>
<li><a href="#">Mobile Retailers <span>Use Paypal in these apps</span></a></li>
<li><a href="#">eBay Payments <span>Speed through checkout on eBay</span></a></li>
<li><a href="#">Check Out Securely Online <span>Use your credit cards or other funds</span></a></li>
<li><a href="#">Mobile Wallet <span>Pay in stores with our app</span></a></li>
<li><a href="#">Shopping an More <span>Deals, gift cards and donations</span></a></li>
</ul>
<a href="#" class="close-menu-personal">
<span></span>
<span></span>
</a>
</div>
<div class="sub-menu business">
<ul class="sub-menu-list">
<li><a href="#">All Business Solutions <span>Merchant services, invoicing and products</span></a></li>
<li><a href="#">Credit Card Processing <span>Accept debit and credit cards</span></a></li>
<li><a href="#">Add PayPal to your Checkout <span>Add the button and accept cards online</span></a></li>
<li><a href="#">Borrow for Your Business <span>Affordable business loans</span></a></li>
<li><a href="#">Mobile Card Reader <span>Use with your phone or tablet on the go</span></a></li>
<li><a href="#">Point of Sale Solutions <span>Get paid in your store</span></a></li>
</ul>
<a href="#" class="close-menu-business">
<span></span>
<span></span>
</a>
</div>
<div class="sub-menu send">
<div class="sub-menu-send">
<form action="" method="" id="send-quick">
<h3>Send money in a few clicks <a href="#">Learn more</a></h2>
<input type="text" name="email" title="Their email or phone number" placeholder="Their email or phone number">
<input type="text" name="amount" title="amount" placeholder="Amount">
<div class="currency">
<select name="currency" title="Currency">
<option>USD</option>
<option>JPN</option>
<option>EUR</option>
</select>
</div>
<div class="submit">
<input type="submit" value="Continue" name="send">
</div>
</form>
</div>
<a href="#" class="close-menu-send">
<span></span>
<span></span>
</a>
</div>
<div class="hero-heading">
<h1>Discover why millions of people use paypal.</h1>
<a href="#" class="btn-blue">Sign Up for Free</a>
<a href="#" class="btn-clear">Explore Business Solutions</a>
</div>
<div class="closer"></div>
</section>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >var heading = document.querySelector(".hero-heading");
var openMenuPersonal = document.querySelector(".open-menu-personal");
var personalMenu = document.querySelector(".personal");
var selectedPersonal = document.querySelector(".selected-personal");
var closeMenuPersonal = document.querySelector(".close-menu-personal");
openMenuPersonal.onclick = personal;
function personal() {
close();
personalMenu.style.display = "block";
selectedPersonal.classList.add("selected-rotate");
heading.classList.add("text-move");
}
var openMenuBusiness = document.querySelector(".open-menu-business");
var businessMenu = document.querySelector(".business");
var selectedBusiness = document.querySelector(".selected-business");
var closeMenuBusiness = document.querySelector(".close-menu-business");
openMenuBusiness.onclick = business;
function business() {
close();
businessMenu.style.display = "block";
selectedBusiness.classList.add("selected-rotate");
heading.classList.add("text-move");
}
var openMenuSend = document.querySelector(".open-menu-send");
var sendMenu = document.querySelector(".send");
var selectedSend = document.querySelector(".selected-send")
var closeMenuSend = document.querySelector(".close-menu-send");
openMenuSend.onclick = send;
function send() {
close();
sendMenu.style.display = "block";
selectedSend.classList.add("selected-rotate");
heading.classList.add("text-move");
}
var closer = document.querySelector(".closer");
closeMenuPersonal.onclick = close;
closeMenuBusiness.onclick = close;
closeMenuSend.onclick = close;
closer.onclick = close;
function close() {
personalMenu.style.display = "none";
businessMenu.style.display = "none";
sendMenu.style.display = "none";
selectedPersonal.classList.remove("selected-rotate");
selectedBusiness.classList.remove("selected-rotate");
selectedSend.classList.remove("selected-rotate");
heading.classList.remove("text-move");
}
//# sourceURL=pen.js
</script>
</body></html>
