Weekly UI - Paypal Navigation
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 - 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";
Developer | Fred Hawk |
Username | osycon |
Uploaded | November 14, 2022 |
Rating | 3 |
Size | 9,240 Kb |
Views | 24,288 |
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!
Name | Size |
A Pen by Fred Hawk | 2,201 Kb |
Weekly UI - Stripe - Pricing section | 5,848 Kb |
Portfolio example FCC | 5,105 Kb |
Weekly UI - Airbnb Footer Component | 15,526 Kb |
Weekly UI - Mobile design sketches | 4,908 Kb |
Weather App | 4,171 Kb |
Weekly UI - Paypal Navigation | 9,240 Kb |
Lilli | 6,117 Kb |
Camper News | 3,606 Kb |
CSS Flexbox 3 col example | 3,013 Kb |
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!
Name | Username | Size |
Out of the blue | Giaco | 2,537 Kb |
Formations | Cantelope | 5,731 Kb |
Opening Reveal Modal On Document Ready | Winghouchan | 1,787 Kb |
Dice | Fraina | 5,026 Kb |
Z-index demo | Kblh | 1,534 Kb |
Fixed Scrolling Nav Bar | Philsinatra | 0 Kb |
Hamburger Menu Animation | Salmanraza | 2,580 Kb |
3d css cube | Semenchenko | 4,578 Kb |
Draggables in pure angular | Rlo206 | 5,167 Kb |
SlideDown FixedMenu | Mp_graphic | 5,602 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!