Weekly UI - Paypal Navigation

Developer
Fred Hawk
Size
9,240 Kb
Views
24,288
  1. Weekly UI - Paypal Navigation Previews
  2. Weekly UI - Paypal Navigation HTML Codes
  3. Weekly UI - Paypal Navigation CSS Codes
  4. Weekly UI - Paypal Navigation JS Codes

How do I make an weekly ui - paypal navigation?

What is a weekly ui - paypal navigation? How do you make a weekly ui - paypal navigation? This script and codes were developed by Fred Hawk on 14 November 2022, Monday.

Weekly UI - Paypal Navigation Previews
IQ Test

Weekly UI - Paypal Navigation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Weekly UI - Paypal Navigation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<header> <nav class="container"> <div class="left-nav-container"> <div class="logo"><img src="https://www.paypalobjects.com/webstatic/i/logo/rebrand/ppcom.svg"/></div> <ul class="left-nav"> <li class="left-nav__item drop"><a href="#buy">Buy</a></li> <li class="left-nav__item drop"><a href="#sell">Sell</a></li> <li class="left-nav__item drop"><a href="#transfer">Transfer</a></li> <li class="left-nav__item"><a href="#">Business</a></li> </ul> </div> <div class="right-nav-container"> <ul class="right-nav"> <li class="right-nav__item login"><a href="#">Log in</a></li> <li class="right-nav__item register"><a href="#">Register</a></li> </ul> </div> </nav> <section class="nav__dropdown buy" id="buy"> <div class="nav__dropdown-container"> <div class="nav__dropdown-left"> <ul> <li><a href="#">Pay in online stores</a></li> <li><a href="#">Pay through mobile and pad</a></li> </ul> </div> <div class="nav__dropdown-right"> <ul> <li><a href="#">Other functions</a></li> </ul> </div> </div><a href="#" role="button"> <div class="close-button"><span>Close</span></div></a> </section> <section class="nav__dropdown sell" id="sell"> <div class="nav__dropdown-container"> <div class="nav__dropdown-left"> <ul> <li><a href="#">Charge through the internet</a></li> <li><a href="#">Email an invoice</a></li> </ul> </div> <div class="nav__dropdown-right"> <ul> <li><a href="#">Business solutions</a></li> <li><a href="#">Ask for money</a></li> </ul> </div> </div><a href="#" role="button"> <div class="close-button"><span>Close</span></div></a> </section> <section class="nav__dropdown transfer" id="transfer"> <div class="nav__dropdown-container"> <div class="nav__dropdown-left"> <h2>Transfer money with a few clicks</h2><a href="#">Learn more</a> </div> <div class="nav__dropdown-right"> <form class="transfer-money"> <label class="hide" for="email">Email</label> <input type="email" id="email" placeholder="Recipients email" required="required"/> <label class="hide" for="amount">Amount</label> <input class="amount" type="number" id="amount" placeholder="Amount" required="required"/> <label class="hide" for="currency">Currency</label> <select class="currency" id="currency"> <option value="SEK">SEK</option> <option value="ALL">ALL</option> <option value="AUD">AUD</option> <option value="BRL">BRL</option> <option value="CAD">CAD</option> <option value="CHF">CHF</option> <option value="CZK">CZK</option> <option value="DKK">DKK</option> <option value="EUR">EUR</option> <option value="GBP">GBP</option> <option value="HKD">HKD</option> <option value="HUF">HUF</option> <option value="ILS">ILS</option> <option value="JPY">JPY</option> <option value="MXN">MXN</option> <option value="MYR">MYR</option> <option value="NOK">NOK</option> <option value="NZD">NZD</option> <option value="PHP">PHP</option> <option value="PLN">PLN</option> <option value="RUB">RUB</option> <option value="SGD">SGD</option> <option value="THB">THB</option> <option value="RTY">RTY</option> <option value="TWD">TWD</option> <option value="USD">USD</option> </select> <label class="hide" for="continue">Submit</label> <input class="continue" type="submit" id="continue" value="Continue"/> </form> </div> </div><a href="#" role="button"> <div class="close-button"><span>Close</span></div></a> </section>
</header> <script src="js/index.js"></script>
</body>
</html>

Weekly UI - Paypal Navigation - Script Codes CSS Codes

a { text-decoration: none; color: black;
}
header { width: 100%;
}
nav { width: 70%; margin: 2rem auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.hide { display: none;
}
.left-nav-container { display: -webkit-box; display: -ms-flexbox; display: flex;
}
.logo { margin-right: 2rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.left-nav { display: -webkit-box; display: -ms-flexbox; display: flex; list-style: none; padding: 0; min-width: 15rem;
}
.left-nav__item { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; text-align: center;
}
.left-nav__item a:hover { color: #0079ad;
}
.left-nav__item a:hover:after { border-top-color: #0079ad;
}
.drop a:after { content: ""; display: inline-block; width: 0; height: 0; overflow: hidden; border: 4px solid transparent; border-width: 5px 4px; border-top-color: #dddddd; margin-left: 4px; vertical-align: text-bottom;
}
.right-nav { display: -webkit-box; display: -ms-flexbox; display: flex; list-style: none; padding: 0; min-width: 8rem;
}
.right-nav__item { -webkit-box-flex: 1; -ms-flex: 1 0 84px; flex: 1 0 84px; text-align: center; margin-right: 10px; border-radius: 25px; padding: 10px 5px; font-family: "pp-sans-big-regular", Helvetica Neue, Arial, sans-serif; font-size: 0.8rem;
}
.login { background: #dddddd;
}
.login:hover { background: #ebebeb;
}
.register { background: #0070ba;
}
.register a { color: white;
}
.register:hover { background: #005ea6;
}
.nav__dropdown { background: #009cde; height: 10rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative;
}
.nav__dropdown ul { list-style: none; padding: 0;
}
.nav__dropdown-container { margin: 0 auto; height: 5rem; display: -webkit-box; display: -ms-flexbox; display: flex; min-width: 40rem; text-align: center; font-family: "pp-sans-big-regular", Helvetica Neue, Arial, sans-serif; font-size: 1.1rem; line-height: 1.1rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.nav__dropdown-container li { margin: 1.3rem 0;
}
.nav__dropdown-container a { color: white;
}
.nav__dropdown-container a:hover { text-decoration: underline;
}
.nav__dropdown-left { border-right: 1px solid #a8bdca; width: 100%;
}
.nav__dropdown-right { width: 100%;
}
.close-button { position: absolute; width: 29px; height: 29px; top: 10%; left: 95%; background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAFFWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS41LWMwMTIgMS4xNDk2MDIsIDIwMTIvMTAvMTAtMTg6MTA6MjQgICAgICAgICI+CiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgICB4bWxuczpkYW09Imh0dHA6Ly93d3cuZGF5LmNvbS9kYW0vMS4wIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczpQYXlQYWw9Ind3dy5wYXlwYWwuY29tL2Jhc2UvdjEiCiAgIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIgogICBkYzptb2RpZmllZD0iMjAxMy0xMi0xMFQxNTo0ODo1Ny41NjQtMDg6MDAiCiAgIGRhbTpzaXplPSIyMTIiCiAgIGRhbTpQaHlzaWNhbHdpZHRoaW5pbmNoZXM9Ii0xLjAiCiAgIGRhbTpleHRyYWN0ZWQ9IjIwMTMtMTItMTBUMTU6NDg6NTYuMjYzLTA4OjAwIgogICBkYW06c2hhMT0iMDc0OWZkM2I0ZWVjYWZhOWM1OGExZDY1MzU3N2M5MGFhMTE5MDMzZSIKICAgZGFtOk51bWJlcm9mdGV4dHVhbGNvbW1lbnRzPSIwIgogICBkYW06RmlsZWZvcm1hdD0iUE5HIgogICBkYW06UHJvZ3Jlc3NpdmU9Im5vIgogICBkYW06UGh5c2ljYWxoZWlnaHRpbmRwaT0iLTEiCiAgIGRhbTpNSU1FdHlwZT0iaW1hZ2UvcG5nIgogICBkYW06TnVtYmVyb2ZpbWFnZXM9IjEiCiAgIGRhbTpCaXRzcGVycGl4ZWw9IjMyIgogICBkYW06UGh5c2ljYWxoZWlnaHRpbmluY2hlcz0iLTEuMCIKICAgZGFtOlBoeXNpY2Fsd2lkdGhpbmRwaT0iLTEiCiAgIHRpZmY6SW1hZ2VMZW5ndGg9IjI1IgogICB0aWZmOkltYWdlV2lkdGg9IjI1IgogICBQYXlQYWw6c3RhdHVzPSJTb3VyY2VBcHByb3ZlZCIKICAgUGF5UGFsOnNvdXJjZU5vZGVQYXRoPSIvY29udGVudC9kYW0vUGF5UGFsRGlnaXRhbEFzc2V0cy9zcGFydGFJbWFnZXMvR2xvYmFsSW1hZ2VzL21rdGcvMjAxNGRlc2lnbi9jbG9zZV9yZXZlcnNlLnBuZyIKICAgUGF5UGFsOmlzU291cmNlPSJ0cnVlIj4KICAgPGRjOmxhbmd1YWdlPgogICAgPHJkZjpCYWcvPgogICA8L2RjOmxhbmd1YWdlPgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/PoWTukgAAACbSURBVEjH7dM7CoAwEATQ2AlaiB9EEAQLCzsLb6Ol9z9CnEIhhZr9JJ0L0214EHaM+Ucz1tpa+b5D0q+FHNmQUQj0yI40vsVKAjlAS33AgtgAFxIDVEgN+KBgwBsUHHiA1iiAA83IgSyxgPuLJk1hyWcqLSy7B8Eg3xWpIeqZiiFuD9iQtGhk6FoUF82Bhq+lBCmUx1IimflHOieo30np52rwiAAAAABJRU5ErkJggg==") center center no-repeat;
}
.close-button span { display: none;
}
#buy:not(:target) { display: none; -webkit-transition: height 0.2s ease-out; transition: height 0.2s ease-out;
}
#buy:not(:target) .nav__dropdown-left { border: none;
}
#buy:target { display: -webkit-box; display: -ms-flexbox; display: flex; height: 10rem; -webkit-transition: height 0.2s ease-out; transition: height 0.2s ease-out;
}
#sell:not(:target) { display: none; -webkit-transition: height 0.2s ease-out; transition: height 0.2s ease-out;
}
#sell:not(:target) .nav__dropdown-left { border: none;
}
#sell:target { display: -webkit-box; display: -ms-flexbox; display: flex; height: 10rem; -webkit-transition: height 0.2s ease-out; transition: height 0.2s ease-out;
}
#transfer:not(:target) { display: none; height: 0px; -webkit-transition: height 0.2s ease-out; transition: height 0.2s ease-out;
}
#transfer:target { display: -webkit-box; display: -ms-flexbox; display: flex; height: 10rem; -webkit-transition: height 0.2s ease-out; transition: height 0.2s ease-out;
}
.transfer { background: #f7f9fa; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;
}
.transfer .close-button { background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAQAAABu4E3oAAAFFWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS41LWMwMTIgMS4xNDk2MDIsIDIwMTIvMTAvMTAtMTg6MTA6MjQgICAgICAgICI+CiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgICB4bWxuczpkYW09Imh0dHA6Ly93d3cuZGF5LmNvbS9kYW0vMS4wIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczpQYXlQYWw9Ind3dy5wYXlwYWwuY29tL2Jhc2UvdjEiCiAgIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIgogICBkYzptb2RpZmllZD0iMjAxMy0xMi0xMFQxNTo0ODo1Ny41MjEtMDg6MDAiCiAgIGRhbTpzaXplPSIxNzEiCiAgIGRhbTpQaHlzaWNhbHdpZHRoaW5pbmNoZXM9Ii0xLjAiCiAgIGRhbTpleHRyYWN0ZWQ9IjIwMTMtMTItMTBUMTU6NDg6NTYuMTYxLTA4OjAwIgogICBkYW06c2hhMT0iZjQwZTM2OGI1NmNlMDdhZDRlNWNlY2ZiNGY5NDQxZmU1YjM3NDFjMiIKICAgZGFtOk51bWJlcm9mdGV4dHVhbGNvbW1lbnRzPSIwIgogICBkYW06RmlsZWZvcm1hdD0iUE5HIgogICBkYW06UHJvZ3Jlc3NpdmU9Im5vIgogICBkYW06UGh5c2ljYWxoZWlnaHRpbmRwaT0iLTEiCiAgIGRhbTpNSU1FdHlwZT0iaW1hZ2UvcG5nIgogICBkYW06TnVtYmVyb2ZpbWFnZXM9IjEiCiAgIGRhbTpCaXRzcGVycGl4ZWw9IjE2IgogICBkYW06UGh5c2ljYWxoZWlnaHRpbmluY2hlcz0iLTEuMCIKICAgZGFtOlBoeXNpY2Fsd2lkdGhpbmRwaT0iLTEiCiAgIHRpZmY6SW1hZ2VMZW5ndGg9IjI1IgogICB0aWZmOkltYWdlV2lkdGg9IjI1IgogICBQYXlQYWw6c3RhdHVzPSJTb3VyY2VBcHByb3ZlZCIKICAgUGF5UGFsOnNvdXJjZU5vZGVQYXRoPSIvY29udGVudC9kYW0vUGF5UGFsRGlnaXRhbEFzc2V0cy9zcGFydGFJbWFnZXMvR2xvYmFsSW1hZ2VzL21rdGcvMjAxNGRlc2lnbi9jbG9zZV9kZWZhdWx0LnBuZyIKICAgUGF5UGFsOmlzU291cmNlPSJ0cnVlIj4KICAgPGRjOmxhbmd1YWdlPgogICAgPHJkZjpCYWcvPgogICA8L2RjOmxhbmd1YWdlPgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/PhESLTAAAABySURBVHgBzdIxCoAwFATRtZCACYpoITaCl9BjeP/T2AnB4W+b6V+K7Ff7FcVN6lWVdGkNwKz7/2hm9IFRECMGjBg4xIARA4MQGHSGANr16BAUDbeZcfFbc4gAyCIAHgFgxMAjBgYVBhVaVNVpsBeR1HYvtcwLhzoX1iQAAAAASUVORK5CYII=") center center no-repeat;
}
.transfer .nav__dropdown-container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column; flex-flow: column; margin-top: 1.5rem;
}
.transfer .nav__dropdown-left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: none; text-align: center; padding: 0;
}
.transfer .nav__dropdown-left h2 { margin: 0 1rem 0 0; font-family: "pp-sans-big-light", Helvetica Neue, Arial, sans-serif; font-size: 1.5rem; font-weight: normal; font-variant: normal;
}
.transfer .nav__dropdown-left a { color: #0070ba;
}
.transfer .nav__dropdown-right { padding-top: 1.2rem;
}
.transfer .nav__dropdown-right input { border-radius: 5px; border: 1px #b3b3b3 solid; padding: 0.5rem; background: white; font-size: 1rem;
}
.transfer .nav__dropdown-right .amount { border-top-right-radius: 0px; border-bottom-right-radius: 0px; margin-right: -0.4rem;
}
.transfer .nav__dropdown-right .continue { background: #0070ba; color: white; width: 12rem; border-radius: 25px; margin-left: 0.6rem; padding: 0.5rem 0;
}
.transfer .nav__dropdown-right .continue:hover { background: #005ea6;
}
.currency { border-top-right-radius: 5px; border-bottom-right-radius: 5px; padding: 0.47rem; margin-left: 0; background: white; font-size: 1rem;
}

Weekly UI - Paypal Navigation - Script Codes JS Codes

// https://www.paypal.com/home
"use strict";
Weekly UI - Paypal Navigation - Script Codes
Weekly UI - Paypal Navigation - Script Codes
Home Page Home
Developer Fred Hawk
Username osycon
Uploaded November 14, 2022
Rating 3
Size 9,240 Kb
Views 24,288
Do you need developer help for Weekly UI - Paypal Navigation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Fred Hawk (osycon) Script Codes
Name
Portfolio example FCC
Collapsing Text Animation
Weekly UI - Airbnb Footer Component
Weekly UI - Become a member
Weekly UI - Make Reservations
Weekly UI - Statue of liberty
Camper News
CSS Flexbox 3 col example
Weekly UI - Mobile design sketches
Weekly UI - Stripe - Pricing section
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!