mirror of
https://github.com/jlengrand/adyen-dev.git
synced 2026-03-09 23:51:19 +00:00
Initial push to repository
This commit is contained in:
Ayodeji Ogundare
37
css/footer.css
Normal file
37
css/footer.css
Normal file
@@ -0,0 +1,37 @@
|
||||
@import url(variables.css);
|
||||
|
||||
footer {
|
||||
border-top: 1px solid #dce0e5;
|
||||
padding: 4rem 0;
|
||||
margin-top: var(--s-5);
|
||||
}
|
||||
footer .container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--s-4);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
@media only screen and (min-width: 650px) {
|
||||
footer .container {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
.footer_header {
|
||||
/* margin-bottom: var(--s-4); */
|
||||
text-align: center;
|
||||
}
|
||||
.footer_header .title {
|
||||
margin-bottom: var(--s-3);
|
||||
}
|
||||
.footer_links {
|
||||
gap: var(--s-3);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.footer_links .footer_links_item {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.footer_links .footer_links_item:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
114
css/header.css
Normal file
114
css/header.css
Normal file
@@ -0,0 +1,114 @@
|
||||
@import url(variables.css);
|
||||
|
||||
/* Header starts */
|
||||
header {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
background-color: var(--white-color);
|
||||
z-index: 200;
|
||||
box-shadow: 0 8px 8px rgb(0 17 44 / 4%), 0 2px 4px rgb(0 17 44 / 8%);
|
||||
}
|
||||
header .container {
|
||||
padding: 12px 40px;
|
||||
height: 64px;
|
||||
gap: var(--s-2);
|
||||
justify-content: space-between;
|
||||
/*box-shadow: 0 8px 8px rgb(0 17 44 / 4%), 0 2px 4px rgb(0 17 44 / 8%);*/
|
||||
}
|
||||
@media screen and (max-width: 640px) {
|
||||
header .container {
|
||||
padding: 12px 24px;
|
||||
}
|
||||
}
|
||||
header .header_logo {
|
||||
display: block;
|
||||
margin: 4px 0 0 2px;
|
||||
}
|
||||
/* .nav {
|
||||
gap: var(--s-2);
|
||||
} */
|
||||
.nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--s-5);
|
||||
}
|
||||
.nav .nav_list {
|
||||
gap: var(--s-4);
|
||||
|
||||
}
|
||||
.nav .nav_list .nav_list_item {
|
||||
font-weight: 100;
|
||||
font-size: 16px;
|
||||
color: var(--secondary-color3);
|
||||
}
|
||||
.nav .nav_list .nav_list_item a {
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
}
|
||||
.nav .nav_list .nav_list_item a:hover {
|
||||
color: var(--blue-color1);
|
||||
|
||||
}
|
||||
/* Header ends */
|
||||
|
||||
.hamburger {
|
||||
display: none;
|
||||
background: var(--secondary-color2);
|
||||
border-radius: 2px;
|
||||
height: 2px;
|
||||
position: relative;
|
||||
transition: .2s ease-in-out;
|
||||
width: 24px;
|
||||
}
|
||||
.hamburger::before,
|
||||
.hamburger::after {
|
||||
display: inline-block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 24px;
|
||||
height: 2px;
|
||||
background: var(--secondary-color2);
|
||||
border-radius: 2px;
|
||||
transform-origin: 2px center;
|
||||
transition: .2s ease-in-out;
|
||||
}
|
||||
.hamburger::before {
|
||||
top: 6px;
|
||||
}
|
||||
.hamburger::after {
|
||||
top: -6px;
|
||||
}
|
||||
.hamburger.open-menu {
|
||||
background-color: transparent;
|
||||
}
|
||||
.hamburger.open-menu::before {
|
||||
transform: rotate3d(0, 0, 1, 45deg);
|
||||
top: 0;
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
.hamburger.open-menu::after {
|
||||
transform: rotate3d(0, 0, 1, -45deg);
|
||||
top: 0;
|
||||
transform-origin: 50% 50%;
|
||||
width: 24px;
|
||||
}
|
||||
@media only screen and (max-width: 997px) {
|
||||
.nav {
|
||||
display: none;
|
||||
}
|
||||
.nav.open-menu {
|
||||
display: grid;
|
||||
grid-gap: var(--s-2);
|
||||
position: absolute;
|
||||
top: 64px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: var(--white-color);
|
||||
padding: var(--s-4);
|
||||
box-shadow: 0 8px 8px rgb(0 17 44 / 4%), 0 2px 4px rgb(0 17 44 / 8%);
|
||||
}
|
||||
.hamburger {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
298
css/styles.css
Normal file
298
css/styles.css
Normal file
@@ -0,0 +1,298 @@
|
||||
@import url(variables.css);
|
||||
@import url(header.css);
|
||||
@import url(footer.css);
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
body {
|
||||
font-family: Fakt, "Helvetica Neue", Arial, sans-serif;
|
||||
position: relative;
|
||||
color: var(--secondary-color1);
|
||||
text-decoration: none;
|
||||
line-height: 28px;
|
||||
}
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* General starts */
|
||||
a {
|
||||
color: var(--secondary-color1);
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font-family: Fakt, "Helvetica Neue", Arial, sans-serif;
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
font-family: Fakt, "Helvetica Neue", Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* Buttons Starts */
|
||||
.btn {
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
border-radius: var(--border-radius1);
|
||||
transition: 125ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
||||
transition-property: color,background-color,box-shadow;
|
||||
}
|
||||
|
||||
.prim_btn {
|
||||
/* color: $white-color;
|
||||
background: $primary6;
|
||||
border: 1px solid $primary6; */
|
||||
background-color: var(--white-color);
|
||||
box-shadow: inset 0 0 0 1px #dce0e5;
|
||||
color: var(--secondary-color);
|
||||
|
||||
}
|
||||
.prim_btn:hover,
|
||||
.prim_btn:focus,
|
||||
.prim_btn:active {
|
||||
background-color: var(--white-color);
|
||||
box-shadow: inset 0 0 0 1px #dce0e5, 0 8px 8px rgb(0 17 44 / 2%), 0 2px 4px rgb(0 17 44 / 4%);
|
||||
}
|
||||
|
||||
.sec_btn {
|
||||
color: var(--white-color);
|
||||
background: var(--blue-color1);
|
||||
border: 1px solid var(--blue-color1);
|
||||
}
|
||||
|
||||
.dis-flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.uc {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.text-hover {
|
||||
color: var(--blue-color2);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.text-hover:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
/* General ends */
|
||||
|
||||
/* Header and Paragraphs starts */
|
||||
h1 {
|
||||
font-size: 2.875rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.625rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: .9rem;
|
||||
font-weight: 200;
|
||||
text-align: justify;
|
||||
line-height: 30px;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
small {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* Header and Paragraphs ends */
|
||||
|
||||
/* Section starts */
|
||||
.container {
|
||||
padding: 0 5%;
|
||||
max-width: 1440px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@media screen and (max-width: 640px) {
|
||||
.container {
|
||||
padding: 0 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.sect {
|
||||
margin: 1rem auto;
|
||||
padding: 3% 0;
|
||||
}
|
||||
.sect_header {
|
||||
margin-bottom: var(--s-4);
|
||||
}
|
||||
.sect_header p {
|
||||
margin-top: var(--s-1);
|
||||
}
|
||||
/* Section ends */
|
||||
|
||||
main {
|
||||
/* position: relative;
|
||||
top: 64px; */
|
||||
padding-top: 64px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Card starts */
|
||||
.card {
|
||||
display: grid;
|
||||
grid-gap: var(--s-4);
|
||||
}
|
||||
.card_item {
|
||||
border: 1px solid var(--grey-color1);
|
||||
border-radius: var(--border-radius1);
|
||||
min-height: 120px;
|
||||
color: var(--secondary-color2);
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
}
|
||||
.card_item:hover {
|
||||
background-color: #fafafb;
|
||||
box-shadow: inset 0 0 0 1px #dce0e5;
|
||||
}
|
||||
.card_item_top .content {
|
||||
padding: 24px;
|
||||
color: var(--secondary-color2);
|
||||
}
|
||||
.card_item_top .descrp {
|
||||
font-weight: 100;
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.card_item_top .descrp ul {
|
||||
margin-top: var(--s-1);
|
||||
}
|
||||
.card_item_top .descrp ul li {
|
||||
list-style: disc;
|
||||
margin-left: 12px;
|
||||
}
|
||||
.card_item_top .descrp ul li:not(:last-child) {
|
||||
margin-top: var(--s-1);
|
||||
}
|
||||
.card_item_btns {
|
||||
margin-top: var(--s-3);
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
|
||||
/* Card ends */
|
||||
|
||||
/* Essentials starts */
|
||||
.essentials .card .card_item img {
|
||||
width: 100%;
|
||||
height: 210px;
|
||||
border-radius: var(--border-radius1) var(--border-radius1) 0 0;
|
||||
}
|
||||
@media only screen and (min-width: 450px) {
|
||||
.essentials .card {
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
}
|
||||
}
|
||||
/* Essentials ends */
|
||||
|
||||
/* Resources starts */
|
||||
.resources {
|
||||
background-color: #fff;
|
||||
}
|
||||
.resources .card .card_item {
|
||||
background-color: var(--white-color);
|
||||
}
|
||||
.resources .card .card_item .content {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
.resources .card .card_item .content {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
.resources .card .card_item .content .descrp p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.resources .card .card_item .icon {
|
||||
width: 40px;
|
||||
margin-bottom: var(--s-2);
|
||||
}
|
||||
@media only screen and (min-width: 450px) {
|
||||
.resources .card {
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
}
|
||||
}
|
||||
/* Resources ends */
|
||||
|
||||
/* Resources starts */
|
||||
.libraries .libraries_list {
|
||||
border: 1px solid var(--grey-color1);
|
||||
border-radius: var(--border-radius1);
|
||||
/* min-height: 120px; */
|
||||
padding: var(--s-3) var(--s-6);
|
||||
color: var(--secondary-color2);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
gap: var(--s-3);
|
||||
}
|
||||
.libraries .libraries_list .libraries_list_item {
|
||||
background-color: var(--white-color);
|
||||
text-align: center;
|
||||
}
|
||||
.libraries_list_item .library-svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.libraries_list_item .name {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.libraries_list_item:hover .name {
|
||||
text-decoration: underline;
|
||||
}
|
||||
/* @media only screen and (min-width: 450px) {
|
||||
.libraries .card {
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
}
|
||||
} */
|
||||
/* Resources ends */
|
||||
|
||||
|
||||
22
css/variables.css
Normal file
22
css/variables.css
Normal file
@@ -0,0 +1,22 @@
|
||||
/*------css varaible------*/
|
||||
:root {
|
||||
--primary-color1: #0abf53;
|
||||
--secondary-color1: #00112c;
|
||||
--secondary-color2: #00112c;
|
||||
--secondary-color3: #394962;
|
||||
--blue-color1: #0abf53;
|
||||
--blue-color2: #0abf53;
|
||||
--white-color: #ffffff;
|
||||
--grey-color1: #dce0e5;
|
||||
--box-shadow1: 0px 4px 4px rgba(0, 0, 0, 0.03);
|
||||
--box-shadow2: 0px 4px 14px rgba(0, 0, 0, 0.06);
|
||||
--border-radius1: 6px;
|
||||
--border-radius2: 8px;
|
||||
--border-radius3: 12px;
|
||||
--s-1: 0.5rem;
|
||||
--s-2: 1rem;
|
||||
--s-3: 1.5rem;
|
||||
--s-4: 2rem;
|
||||
--s-5: 2.5rem;
|
||||
--s-6: 3rem;
|
||||
}
|
||||
BIN
img/Branded-Amsterdam Office3.jpg
Normal file
BIN
img/Branded-Amsterdam Office3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 MiB |
BIN
img/DIGITAL-Adyen-green-RGB.png
Normal file
BIN
img/DIGITAL-Adyen-green-RGB.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
img/adyen-icon-192x192.png
Normal file
BIN
img/adyen-icon-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
332
index.html
Normal file
332
index.html
Normal file
@@ -0,0 +1,332 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Metas -->
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Learn what you need to build a successful integration with Adyen." />
|
||||
|
||||
<!-- Links -->
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="img/adyen-icon-192x192.png">
|
||||
<title>Adyen Devs</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header -->
|
||||
<header>
|
||||
<div class="container dis-flex">
|
||||
<a href="" class="header_logo">
|
||||
<!-- Increase the width to 250 to contain the text 'DEVELOPERS' -->
|
||||
<svg width="170" height="30" enable-background="new 0 0 170 30" viewBox="0 0 170 30" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Increase the width to 110 to contain the text 'DEVELOPERS' -->
|
||||
<rect y="0" x="100" width="60" height="30" rx="8" fill="#E6F8ED"></rect>
|
||||
<g fill="#0abf53">
|
||||
<path d="M12.7406 7.0246H0.200639V11.0374H8.32652C8.82812 11.0374 9.22939 11.4387 9.22939 11.9403V18.9626H7.52396C7.02236 18.9626 6.62109 18.5613 6.62109 18.0597V13.0438H3.21022C1.40447 13.0438 0 14.4482 0 16.254V19.8655C0 21.6712 1.40447 23.0757 3.21022 23.0757H15.9508V10.2348C15.9508 8.42907 14.5463 7.0246 12.7406 7.0246V7.0246Z" fill="#0ABF53"></path>
|
||||
<path d="M27.8888 18.9626H26.1834C25.6818 18.9626 25.2805 18.5613 25.2805 18.0597V7.02459H21.8696C20.0639 7.02459 18.6594 8.42906 18.6594 10.2348V19.7652C18.6594 21.5709 20.0639 22.9754 21.8696 22.9754H34.6102V0.403503H27.9891L27.8888 18.9626Z" fill="#0ABF53"></path>
|
||||
<path d="M46.4479 18.9626H44.7425C44.2409 18.9626 43.8396 18.5613 43.8396 18.0597V7.0246H37.2185V19.7652C37.2185 21.5709 38.623 22.9754 40.4287 22.9754H46.5482V24.9818H37.5195V29.5965H50.0594C51.8652 29.5965 53.2696 28.192 53.2696 26.3863V7.0246H46.6485V18.9626H46.4479Z" fill="#0ABF53"></path>
|
||||
<path d="M68.5182 7.0246H55.7776V19.7652C55.7776 21.5709 57.1821 22.9754 58.9879 22.9754H71.5278V18.9626H63.4019C62.9003 18.9626 62.4991 18.5613 62.4991 18.0597V11.0374H64.2045C64.7061 11.0374 65.1074 11.4387 65.1074 11.9403V16.9562H68.5182C70.324 16.9562 71.7284 15.5518 71.7284 13.746V10.2348C71.7284 8.42907 70.2237 7.0246 68.5182 7.0246V7.0246Z" fill="#0ABF53"></path>
|
||||
<path d="M87.0773 7.0246H74.3367V22.9754H80.9578V11.0374H82.6633C83.1648 11.0374 83.5661 11.4387 83.5661 11.9403V22.9754H90.2875V10.2348C90.2875 8.42907 88.8831 7.0246 87.0773 7.0246V7.0246Z" fill="#0ABF53"></path>
|
||||
</g>
|
||||
<!-- Text -->
|
||||
<text font-weight="bold" xml:space="preserve" text-anchor="start" font-family="Fakt, Arial, sans-serif" font-size="13" y="20" x="110" stroke-width="0" fill="#09ae4c">DEVS</text>
|
||||
</svg>
|
||||
</a>
|
||||
<nav class="nav" id="nav">
|
||||
<ul class="nav_list dis-flex">
|
||||
<li class="nav_list_item">
|
||||
<a href="">Docs</a>
|
||||
</li>
|
||||
<li class="nav_list_item">
|
||||
<a href="">Videos</a>
|
||||
</li>
|
||||
<li class="nav_list_item">
|
||||
<a href="">Open source</a>
|
||||
</li>
|
||||
</ul>
|
||||
<button class="btn prim_btn" onclick="toggleMenu()">
|
||||
Test account
|
||||
</button>
|
||||
</nav>
|
||||
<span class="hamburger clickable"></span>
|
||||
</div>
|
||||
</header>
|
||||
<main class="">
|
||||
|
||||
|
||||
<!-- Resources -->
|
||||
<section class="sect resources">
|
||||
<div class="container">
|
||||
<div class="sect_header">
|
||||
<h3>Developer resources</h3>
|
||||
<p>Learn what you need to build a successful integration with Adyen.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<a href="" class="card_item">
|
||||
<div class="card_item_top">
|
||||
<div class="content">
|
||||
<img src="https://docs.adyen.com/user/pages/docs/13.development-resources/api-creds.svg" alt="" class="icon">
|
||||
<h4 class="title">Development Quickstart</h4>
|
||||
<div class="descrp">
|
||||
<p>Obtain API keys, install a client library, and make a test API request.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="" class="card_item">
|
||||
<div class="card_item_top">
|
||||
<div class="content">
|
||||
<img src="https://docs.adyen.com/user/pages/docs/13.development-resources/api-creds.svg" alt="" class="icon">
|
||||
<h4 class="title">Development Quickstart</h4>
|
||||
<div class="descrp">
|
||||
<p>Obtain API keys, install a client library, and make a test API request.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="" class="card_item">
|
||||
<div class="card_item_top">
|
||||
<div class="content">
|
||||
<img src="https://docs.adyen.com/user/pages/docs/13.development-resources/api-creds.svg" alt="" class="icon">
|
||||
<h4 class="title">Development Quickstart</h4>
|
||||
<div class="descrp">
|
||||
<p>Obtain API keys, install a client library, and make a test API request.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Essentails -->
|
||||
<!-- https://careers.adyen.com/ -->
|
||||
<section class="sect essentials">
|
||||
<div class="container">
|
||||
<div class="sect_header">
|
||||
<h3>Developer essentials</h3>
|
||||
<p>Learn what you need to build a successful integration with Adyen.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card_item">
|
||||
<div class="card_item_top">
|
||||
<a href=""><img src="img/Branded-Setting-up-POS.jpg" alt=""></a>
|
||||
<div class="content">
|
||||
<h4 class="title">Adyen Blog</h4>
|
||||
<div class="descrp">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>
|
||||
<ul>
|
||||
<li>Ipsum a arcu cursus vitae <a href="" class="text-hover">Link</a></li>
|
||||
<li>Semper viverra nam libero</li>
|
||||
<li>Elit ullamcorper dignissim crase</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card_item_btns">
|
||||
<button class="btn sec_btn">Install the CLI</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card_item">
|
||||
<div class="card_item_top">
|
||||
<a href=""><img src="img/Branded-Customer-Area-login.jpg" alt=""></a>
|
||||
<div class="content">
|
||||
<h4 class="title">Documentation</h4>
|
||||
<div class="descrp">
|
||||
<p>Explore our guides and examples to integrate Adyen. Our documentation covers the essentials:</p>
|
||||
<ul>
|
||||
<li><a href="" class="text-hover">Payments</a> - Build an integration to accept payments online or in person</li>
|
||||
<li>Business operations - Monitor, protect, and report on your money</li>
|
||||
<li>Financial services - Move, control, and borrow money with Adyen</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card_item_btns">
|
||||
<button class="btn sec_btn">Read the Docs</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card_item">
|
||||
<div class="card_item_top">
|
||||
<a href=""><img src="img/DIGITAL-Adyen-green-RGB.png" alt=""></a>
|
||||
<div class="content">
|
||||
<h4 class="title">Adyen Samples</h4>
|
||||
<div class="descrp">
|
||||
<p>Build with sample code designed to help you get started with your Adyen integration. Learn how to:</p>
|
||||
<ul>
|
||||
<li>Quickly <a href="" class="text-hover">accept one-time payments</a></li> with Adyen Checkout li>
|
||||
<li>Combine Checkout and Billing for fast subscription pages</li>
|
||||
<li>Accept a one-time payment on web, iOS, or Android.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card_item_btns">
|
||||
<button class="btn sec_btn">Explore samples</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Libraries -->
|
||||
<section class="sect libraries">
|
||||
<div class="container">
|
||||
<div class="sect_header">
|
||||
<h3>Developer libraries</h3>
|
||||
<p>Learn what you need to build a successful integration with Adyen.</p>
|
||||
</div>
|
||||
<div class="libraries_list">
|
||||
<a href="" target="_blank" class="libraries_list_item">
|
||||
<div><svg class="SVGInline-svg SVG-svg library-svg" viewBox="4 4 28 28" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M23.476 5.076c2.78.481 3.569 2.382 3.51 4.373L27 9.42l-1.251 16.398-16.266 1.114h.014c-1.35-.057-4.36-.18-4.497-4.388l1.508-2.75 2.584 6.037.461 1.075 2.571-8.382-.027.006.014-.028 8.484 2.71-1.28-4.978-.907-3.575 8.085-.522-.564-.467-5.804-4.732 3.354-1.871-.003.01zM9.703 9.65c3.264-3.238 7.477-5.152 9.095-3.52 1.615 1.63-.097 5.597-3.367 8.833-3.266 3.238-7.428 5.256-9.042 3.628-1.62-1.63.041-5.7 3.31-8.938l.004-.003z" fill="#D91505"></path>
|
||||
</svg>
|
||||
<h6 class="name">Ruby</h6>
|
||||
</div>
|
||||
</a>
|
||||
<a href="" target="_blank" class="libraries_list_item">
|
||||
<div><svg class="SVGInline-svg SVG-svg library-svg" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.516 28.952a2.09 2.09 0 0 1-1.002-.263l-3.17-1.883c-.478-.262-.24-.358-.096-.405.644-.215.763-.263 1.43-.644.072-.048.167-.024.239.024l2.432 1.454c.095.048.214.048.286 0l9.513-5.507c.095-.048.143-.143.143-.263v-10.99c0-.12-.048-.215-.143-.263L15.635 4.73c-.096-.048-.215-.048-.286 0l-9.513 5.483c-.096.048-.143.167-.143.262v10.991c0 .096.047.215.143.263l2.599 1.502c1.406.715 2.288-.12 2.288-.954V11.428a.29.29 0 0 1 .286-.286h1.216a.29.29 0 0 1 .287.286v10.848c0 1.884-1.026 2.98-2.814 2.98-.548 0-.977 0-2.193-.596L5 23.23A2.012 2.012 0 0 1 4 21.49V10.497c0-.715.381-1.383 1.001-1.74l9.513-5.508a2.128 2.128 0 0 1 2.003 0l9.513 5.508a2.012 2.012 0 0 1 1.001 1.74V21.49c0 .716-.381 1.383-1.001 1.74l-9.513 5.508a2.44 2.44 0 0 1-1.001.215zm2.932-7.558c-4.172 0-5.03-1.907-5.03-3.529a.29.29 0 0 1 .286-.286h1.24c.142 0 .262.096.262.239.19 1.263.739 1.883 3.266 1.883 2.003 0 2.861-.453 2.861-1.526 0-.62-.238-1.073-3.362-1.383-2.598-.262-4.22-.834-4.22-2.908 0-1.931 1.622-3.076 4.34-3.076 3.051 0 4.553 1.05 4.744 3.338a.385.385 0 0 1-.072.215c-.047.047-.119.095-.19.095h-1.24a.28.28 0 0 1-.262-.215c-.286-1.31-1.025-1.74-2.98-1.74-2.194 0-2.456.763-2.456 1.335 0 .691.31.906 3.266 1.288 2.933.381 4.315.93 4.315 2.98-.023 2.098-1.74 3.29-4.768 3.29z" fill="#89D42C"></path>
|
||||
</svg>
|
||||
<h6 class="name">Node</h6>
|
||||
</div>
|
||||
</a>
|
||||
<a href="" target="_blank" class="libraries_list_item">
|
||||
<div><svg class="SVGInline-svg SVG-svg library-svg" viewBox="0 0 256 255" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid">
|
||||
<path d="M126.916.072c-64.832 0-60.784 28.115-60.784 28.115l.072 29.128h61.868v8.745H41.631S.145 61.355.145 126.77c0 65.417 36.21 63.097 36.21 63.097h21.61v-30.356s-1.165-36.21 35.632-36.21h61.362s34.475.557 34.475-33.319V33.97S194.67.072 126.916.072zM92.802 19.66a11.12 11.12 0 0 1 11.13 11.13 11.12 11.12 0 0 1-11.13 11.13 11.12 11.12 0 0 1-11.13-11.13 11.12 11.12 0 0 1 11.13-11.13z" fill="#3372a7"></path>
|
||||
<path d="M128.757 254.126c64.832 0 60.784-28.115 60.784-28.115l-.072-29.127H127.6v-8.745h86.441s41.486 4.705 41.486-60.712c0-65.416-36.21-63.096-36.21-63.096h-21.61v30.355s1.165 36.21-35.632 36.21h-61.362s-34.475-.557-34.475 33.32v56.013s-5.235 33.897 62.518 33.897zm34.114-19.586a11.12 11.12 0 0 1-11.13-11.13 11.12 11.12 0 0 1 11.13-11.131 11.12 11.12 0 0 1 11.13 11.13 11.12 11.12 0 0 1-11.13 11.13z" fill="#ffd235"></path>
|
||||
</svg>
|
||||
<h6 class="name">Python</h6>
|
||||
</div>
|
||||
</a>
|
||||
<a href="" target="_blank" class="libraries_list_item">
|
||||
<div><svg class="SVGInline-svg SVG-svg library-svg" viewBox="0 0 256 346" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid">
|
||||
<path d="M82.55 267.47s-13.2 7.68 9.4 10.28c27.37 3.12 41.35 2.67 71.51-3.04 0 0 7.93 4.97 19 9.28-67.6 28.98-153.01-1.68-99.9-16.52m-8.26-37.81s-14.81 10.96 7.8 13.3c29.23 3.01 52.32 3.26 92.27-4.44 0 0 5.53 5.6 14.22 8.67-81.75 23.9-172.8 1.89-114.3-17.53" fill="#5382A1"></path>
|
||||
<path d="M143.94 165.51c16.66 19.19-4.38 36.45-4.38 36.45s42.3-21.84 22.88-49.19c-18.15-25.5-32.06-38.17 43.27-81.86 0 0-118.24 29.53-61.77 94.6" fill="#E76F00"></path>
|
||||
<path d="M233.36 295.44s9.77 8.05-10.75 14.28c-39.03 11.82-162.44 15.39-196.72.47-12.32-5.36 10.79-12.8 18.06-14.37 7.58-1.64 11.91-1.33 11.91-1.33-13.7-9.66-88.58 18.95-38.03 27.15 137.85 22.35 251.3-10.07 215.53-26.2M88.9 190.48s-62.77 14.9-22.23 20.32c17.12 2.3 51.25 1.78 83.03-.89 25.98-2.19 52.07-6.85 52.07-6.85s-9.16 3.93-15.8 8.45c-63.74 16.77-186.88 8.97-151.43-8.18 29.98-14.5 54.36-12.85 54.36-12.85m112.6 62.94c64.8-33.67 34.84-66.03 13.93-61.67-5.12 1.07-7.4 2-7.4 2s1.9-2.99 5.53-4.28c41.37-14.54 73.19 42.9-13.36 65.65 0 0 1-.9 1.3-1.7" fill="#5382A1"></path>
|
||||
<path d="M162.44.37s35.89 35.9-34.04 91.1c-56.07 44.28-12.78 69.53-.02 98.38-32.73-29.53-56.75-55.53-40.64-79.72C111.4 74.6 176.92 57.39 162.44.37" fill="#E76F00"></path>
|
||||
<path d="M95.27 344.67c62.2 3.98 157.71-2.21 159.97-31.64 0 0-4.35 11.15-51.4 20.01-53.09 10-118.57 8.83-157.4 2.42 0 0 7.95 6.58 48.83 9.2" fill="#5382A1"></path>
|
||||
</svg>
|
||||
<h6 class="name">Java</h6>
|
||||
</div>
|
||||
</a>
|
||||
<a href="" target="_blank" class="libraries_list_item">
|
||||
<div><svg class="SVGInline-svg SVG-svg library-svg" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="#6181B6" fill-rule="evenodd">
|
||||
<path d="M9.762 14.509h-1.18l-.643 3.31h1.047c.695 0 1.213-.132 1.553-.393.34-.262.569-.698.687-1.311.115-.588.063-1.002-.155-1.244-.218-.241-.653-.362-1.308-.362z">
|
||||
</path>
|
||||
<path d="M16 8.86c-8.284 0-15 3.533-15 7.89s6.716 7.891 15 7.891c8.284 0 15-3.533 15-7.891s-6.716-7.89-15-7.89zm-4.075 9.314a3.034 3.034 0 0 1-1.146.688c-.42.135-.956.205-1.606.205H7.696l-.408 2.102H5.564l1.538-7.908h3.312c.996 0 1.723.261 2.18.785.458.523.595 1.253.412 2.19-.07.371-.198.729-.38 1.059a3.57 3.57 0 0 1-.702.879zm5.03.893l.679-3.498c.079-.398.049-.67-.085-.814-.134-.145-.42-.218-.859-.218h-1.365l-.88 4.532h-1.71l1.538-7.909h1.708l-.408 2.103h1.522c.959 0 1.619.167 1.983.5s.472.876.328 1.625l-.715 3.68h-1.736zm9.496-2.83a3.477 3.477 0 0 1-.381 1.058 3.57 3.57 0 0 1-.701.879 3.05 3.05 0 0 1-1.147.688c-.42.135-.956.205-1.607.205H21.14l-.409 2.103H19.01l1.537-7.908h3.312c.996 0 1.722.262 2.18.785.457.522.596 1.252.413 2.19z" fill-rule="nonzero"></path>
|
||||
<path d="M23.207 14.509H22.03l-.645 3.31h1.047c.696 0 1.214-.132 1.553-.393.34-.262.568-.698.688-1.311.115-.588.062-1.002-.156-1.244-.217-.241-.655-.362-1.309-.362z">
|
||||
</path>
|
||||
</g>
|
||||
</svg>
|
||||
<h6 class="name">PHP</h6>
|
||||
</div>
|
||||
</a>
|
||||
<a href="" target="_blank" class="libraries_list_item">
|
||||
<div><svg class="SVGInline-svg SVG-svg library-svg" viewBox="2 2 30 30" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="#00ACD7" fill-rule="evenodd">
|
||||
<path d="M3.35 13.5c-.06 0-.07-.04-.05-.08l.3-.4c.04-.03.11-.06.17-.06h5.17c.06 0 .07.04.05.08l-.25.38c-.03.04-.1.09-.15.09l-5.24-.02zm-2.19 1.33c-.06 0-.07-.03-.04-.08l.3-.39c.03-.04.1-.07.16-.07h6.6c.07 0 .1.04.08.09l-.12.34c-.01.06-.07.1-.13.1H1.16zm3.51 1.33c-.06 0-.08-.04-.05-.09l.2-.36c.04-.04.1-.09.15-.09h2.9c.06 0 .09.05.09.1l-.03.35c0 .06-.06.1-.1.1l-3.16-.01zm15.04-2.93l-2.43.64c-.22.06-.24.07-.42-.15-.22-.24-.38-.4-.69-.55a2.52 2.52 0 0 0-2.62.22 3.08 3.08 0 0 0-1.48 2.75 2.27 2.27 0 0 0 1.96 2.28c.98.13 1.81-.22 2.46-.96l.4-.53h-2.8c-.3 0-.38-.2-.28-.44.19-.45.54-1.2.74-1.58a.4.4 0 0 1 .36-.23h5.28c-.03.4-.03.78-.09 1.18-.16 1.04-.55 2-1.19 2.84a6.04 6.04 0 0 1-4.13 2.46 5.13 5.13 0 0 1-3.9-.96A4.55 4.55 0 0 1 9.04 17c-.18-1.58.28-3 1.24-4.25a6.43 6.43 0 0 1 4.05-2.5 5 5 0 0 1 3.84.7c.77.5 1.32 1.2 1.69 2.05.08.13.02.2-.15.24z">
|
||||
</path>
|
||||
<path d="M24.5 21.25a5.44 5.44 0 0 1-3.53-1.28 4.55 4.55 0 0 1-1.56-2.8 5.53 5.53 0 0 1 1.17-4.37 6.08 6.08 0 0 1 4.06-2.42 5.38 5.38 0 0 1 4.13.74 4.51 4.51 0 0 1 2.04 3.23 5.6 5.6 0 0 1-1.67 4.91 6.64 6.64 0 0 1-3.47 1.86c-.4.07-.79.08-1.16.13zm3.46-5.86c-.02-.19-.02-.33-.05-.48A2.39 2.39 0 0 0 24.96 13a3.17 3.17 0 0 0-2.54 2.52 2.39 2.39 0 0 0 1.33 2.74c.8.34 1.6.3 2.37-.1a3.17 3.17 0 0 0 1.84-2.76z" fill-rule="nonzero"></path>
|
||||
</g>
|
||||
</svg>
|
||||
<h6 class="name">Go</h6>
|
||||
</div>
|
||||
</a>
|
||||
<a href="" target="_blank" class="libraries_list_item">
|
||||
<div><svg class="SVGInline-svg SVG-svg library-svg" viewBox="2 2 28 28" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="#1384C8" fill-rule="evenodd">
|
||||
<path d="M11.68 13.26c1 3.07 1.38 8.54 4.31 8.54.23 0 .45-.03.68-.07-2.67-.62-2.98-6.03-4.6-8.83l-.39.36">
|
||||
</path>
|
||||
<path d="M12.06 12.9c1.63 2.8 1.94 8.21 4.6 8.83.22-.04.43-.1.64-.17-2.4-1.17-3.06-6.42-4.9-8.95l-.34.29">
|
||||
</path>
|
||||
<path d="M14.4 11.23a5.17 5.17 0 0 0-2.48.82c.17.17.33.35.48.56.62-.51 1.23-.9 1.84-1.12.23-.09.46-.15.69-.2a2.12 2.12 0 0 0-.53-.06m4.76 9.25c.25-.2.5-.4.74-.64-1.02-3.05-1.38-8.6-4.34-8.6-.2 0-.42.02-.63.06 2.69.67 3.03 6.52 4.23 9.18">
|
||||
</path>
|
||||
<path d="M14.93 11.3a2.12 2.12 0 0 0-.53-.07h1.17c-.22 0-.43.03-.64.07m4.18 9.83a4.37 4.37 0 0 1-.33-.36c-.5.35-1 .62-1.48.8a2.28 2.28 0 0 0 1.02.23c.55 0 .99-.07 1.36-.25-.2-.1-.4-.25-.57-.42m-4.87-9.64c2.4 1.26 2.62 6.96 4.54 9.28l.38-.29c-1.2-2.66-1.54-8.51-4.23-9.18-.23.04-.46.1-.69.19">
|
||||
</path>
|
||||
<path d="M12.4 12.6c1.84 2.54 2.5 7.79 4.9 8.96.49-.17.98-.44 1.48-.79-1.92-2.32-2.13-8.02-4.54-9.28-.61.23-1.22.6-1.84 1.12m-1.9.58c-.3.65-.59 1.51-.94 2.64.7-1 1.42-1.87 2.12-2.57-.1-.3-.2-.57-.31-.82-.3.22-.58.47-.87.75">
|
||||
</path>
|
||||
<path d="M11.62 12.26l-.25.18c.1.25.21.52.3.82l.4-.36a5.07 5.07 0 0 0-.45-.64"></path>
|
||||
<path d="M11.93 12.05l-.3.2c.15.2.3.42.43.65l.34-.3c-.15-.2-.3-.38-.47-.55M28.35 11c-1.36 5.25-4.2 9.47-6.59 10.54l-.13.05h-.02l-.04.02h-.01l-.06.03h-.03l-.03.02h-.02l-.03.02-.05.01h-.02l-.04.02h-.02l-.04.01-.04.01c.1.04.22.06.34.06 2.26 0 4.54-4.05 8.31-10.79h-1.48zm-19.29.45h.01l.04-.02h.01l.01-.01.04-.01.09-.04h.01l.04-.01h.02l.03-.02h.02l.12-.03h.02l.04-.01h.01l.04-.02.08-.01h.07l.04-.01h.02l.08-.02h-.24c-2.55 0-6.06 4.72-7.64 10.84h.3c.51-.9.96-1.76 1.38-2.56 1.1-4.33 3.36-7.29 5.36-8.07m1.44 1.74c.29-.28.58-.53.87-.75a4.1 4.1 0 0 0-.21-.4 4.9 4.9 0 0 0-.66 1.15">
|
||||
</path>
|
||||
<path d="M10.7 11.48c.17.14.32.34.46.57l.13-.15a2.55 2.55 0 0 0-.58-.42M3.7 19.52c2.32-4.47 3.42-7.3 5.36-8.07-2 .78-4.25 3.74-5.36 8.07">
|
||||
</path>
|
||||
<path d="M11.3 11.9l-.14.14.2.4.26-.18c-.1-.13-.21-.25-.33-.36M4.75 22.06h-.08l-.1.01c2.35-.06 3.42-1.24 3.96-2.95.4-1.3.73-2.38 1.03-3.3a46.74 46.74 0 0 0-2.97 4.9c-.48.88-1.21 1.26-1.84 1.34">
|
||||
</path>
|
||||
<path d="M4.75 22.06A2.43 2.43 0 0 0 6.6 20.7c1-1.85 1.98-3.5 2.97-4.88.35-1.13.65-1.99.94-2.64-1.96 1.86-3.93 4.97-5.75 8.87M3.7 19.52c-.42.8-.87 1.66-1.38 2.56h.89c.12-.9.28-1.75.49-2.56">
|
||||
</path>
|
||||
<path d="M9.82 11.25H9.8l-.04.01h-.02l-.03.01h-.02l-.07.02H9.6a.3.3 0 0 1-.04 0l-.02.01h-.03l-.02.01-.12.03h-.02l-.03.02H9.3l-.04.02h-.01l-.09.03-.04.01-.01.01-.04.01-.01.01c-1.95.77-3.05 3.6-5.37 8.07-.2.81-.37 1.66-.49 2.56h1.47l.04-.01h.05c1.81-3.9 3.78-7.01 5.74-8.88.22-.48.43-.86.66-1.14a2.17 2.17 0 0 0-.45-.56l-.03-.02-.03-.01-.03-.02h-.03l-.02-.02-.05-.02h-.03a.73.73 0 0 1-.03-.02l-.03-.01-.05-.02-.06-.02h-.02l-.05-.02h-.01a1.84 1.84 0 0 0-.13-.03h-.02l-.05-.01h-.01l-.07-.01h-.14m13.21 2.64c-.44 1.44-.8 2.62-1.12 3.6a38.91 38.91 0 0 0 3.58-6.27c-1.34.43-2.05 1.39-2.46 2.68m-1.08 7.54l-.19.09c2.39-1.07 5.23-5.29 6.6-10.54h-.28c-3.13 5.6-4.14 9.33-6.13 10.45m-1.56-.47c.52-.64.94-1.71 1.52-3.49a18.1 18.1 0 0 1-2 2.34l-.01.01c.15.44.3.83.49 1.14M20.39 20.98a2.13 2.13 0 0 1-.71.57 2.01 2.01 0 0 0 .85.24h.41l.04-.02h.08l.12-.03c-.31-.11-.57-.38-.8-.76M16 21.8a3.57 3.57 0 0 0 1.3-.24 2.29 2.29 0 0 0 1.02.24H16z">
|
||||
</path>
|
||||
<path d="M18.32 21.8c.55 0 .99-.07 1.36-.25a2.01 2.01 0 0 0 .85.24h.13-2.34zm2.34 0h.15l.04-.01h.1l.05-.02h.06l.12-.03c.1.04.22.06.34.06h-.86zm-.76-1.96a10.73 10.73 0 0 1-1.12.93c.1.13.22.25.33.36.18.17.37.31.57.42l.14-.07c.2-.12.4-.29.57-.5-.18-.32-.34-.7-.49-1.14M27.2 11h-1.38l-.23.01-.1.22a38.91 38.91 0 0 1-3.58 6.26c-.58 1.77-1 2.85-1.52 3.48.22.38.48.65.79.76h.04l.04-.02h.02l.04-.01h.02l.05-.02.03-.01.02-.01.03-.01.03-.01.06-.02h.01l.04-.02h.02l.12-.06h.01l.19-.1c1.99-1.1 3-4.85 6.13-10.44h-.88zm-17.3.25h.05l.08.01.06.02h.02l.13.03.06.02h.01a.93.93 0 0 1 .07.02l.05.02h.02l.04.02.02.01.05.02.03.01.03.02h.03l.03.02c.22.11.42.26.61.43a2 2 0 0 1 .22-.2 2.4 2.4 0 0 0-1.61-.45">
|
||||
</path>
|
||||
<path d="M11.3 11.9c.1.1.22.23.32.36.1-.08.2-.14.3-.2a3.2 3.2 0 0 0-.41-.36c-.08.06-.15.12-.22.2m-1.39-.65l.19-.01c.54 0 1 .17 1.42.46.44-.34.96-.47 1.7-.47H9.66l.24.02">
|
||||
</path>
|
||||
<path d="M13.2 11.23c-.73 0-1.25.13-1.7.47.15.1.3.22.43.35.6-.38 1.2-.64 1.8-.75.23-.04.45-.07.67-.07h-1.2zm8.7 6.27c.32-.98.68-2.16 1.13-3.6.4-1.28 1.12-2.25 2.46-2.67l.1-.22c-2.18.14-3.2 1.25-3.72 2.9-.9 2.87-1.44 4.74-1.97 5.92a17.5 17.5 0 0 0 2-2.34">
|
||||
</path>
|
||||
</g>
|
||||
</svg>
|
||||
<h6 class="name">.NET</h6>
|
||||
</div>
|
||||
</a>
|
||||
<a href="" target="_blank" class="libraries_list_item">
|
||||
<div><svg width="24px" height="24px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="logo-ios" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path d="M4.00791016,22 L4.00791016,13.2011719 L6.07480469,13.2011719 L6.07480469,22 L4.00791016,22 Z M5.02890625,11.8730469 C4.40634766,11.8730469 3.9,11.3666992 3.9,10.7524414 C3.9,10.1298828 4.40634766,9.63183594 5.02890625,9.63183594 C5.66806641,9.63183594 6.16611328,10.1298828 6.16611328,10.7524414 C6.16611328,11.3666992 5.66806641,11.8730469 5.02890625,11.8730469 Z M12.9564844,9.82275391 C16.4428125,9.82275391 18.6342187,12.2050781 18.6342187,16.0151367 C18.6342187,19.8251953 16.4428125,22.1992188 12.9564844,22.1992188 C9.46185547,22.1992188 7.27044922,19.8251953 7.27044922,16.0151367 C7.27044922,12.2050781 9.46185547,9.82275391 12.9564844,9.82275391 Z M12.9564844,11.6489258 C10.8148828,11.6489258 9.46185547,13.3422852 9.46185547,16.0151367 C9.46185547,18.6796875 10.8148828,20.3730469 12.9564844,20.3730469 C15.0897852,20.3730469 16.4511133,18.6796875 16.4511133,16.0151367 C16.4511133,13.3422852 15.0897852,11.6489258 12.9564844,11.6489258 Z M19.497832,18.6547852 L21.548125,18.6547852 C21.7058398,19.7587891 22.7849414,20.4228516 24.279082,20.4228516 C25.723418,20.4228516 26.7278125,19.7089844 26.7278125,18.7128906 C26.7278125,17.8496094 26.1301562,17.3183594 24.5696094,16.9946289 L23.2829883,16.7290039 C20.8840625,16.2392578 19.763457,15.1103516 19.763457,13.3588867 C19.763457,11.2504883 21.6145312,9.82275391 24.2126758,9.82275391 C26.860625,9.82275391 28.6120898,11.2670898 28.6618945,13.4086914 L26.6116016,13.4086914 C26.5119922,12.2797852 25.5657031,11.5991211 24.1960742,11.5991211 C22.8679492,11.5991211 21.9216601,12.2299805 21.9216601,13.234375 C21.9216601,14.0478516 22.5193164,14.5708008 24.013457,14.8862305 L25.3083789,15.1518555 C27.8318164,15.6748047 28.8860156,16.6875 28.8860156,18.4638672 C28.8860156,20.7548828 27.0847461,22.1992188 24.204375,22.1992188 C21.4319141,22.1992188 19.5974414,20.8461914 19.497832,18.6547852 Z" id="iOS" fill="#697386" fill-rule="nonzero"></path>
|
||||
</g>
|
||||
</svg>
|
||||
<h6 class="name">iOS</h6>
|
||||
</div>
|
||||
</a>
|
||||
<a href="" target="_blank" class="libraries_list_item">
|
||||
<div><svg width="24px" height="24px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="logo-android" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="android-logo" transform="translate(4.000000, 2.000000)" fill="#79C257" fill-rule="nonzero">
|
||||
<path d="M1.75753069,9.05405776 C1.27592058,9.05405776 0.867292419,9.22200722 0.531393502,9.55790614 C0.195494585,9.89380505 0.0274945848,10.2968736 0.0274945848,10.7673141 L0.0274945848,17.9904043 C0.0274945848,18.4726209 0.195444043,18.8808953 0.531393502,19.2168448 C0.867292419,19.5527437 1.27592058,19.7207437 1.75753069,19.7207437 C2.238787,19.7207437 2.64493863,19.5527942 2.97563177,19.2168448 C3.30566787,18.8809458 3.47114079,18.4726209 3.47114079,17.9904043 L3.47114079,10.7673141 C3.47114079,10.2968231 3.30319134,9.89380505 2.96724188,9.55790614 C2.63129242,9.22200722 2.22797112,9.05405776 1.75753069,9.05405776 Z" id="Path"></path>
|
||||
<path d="M15.6664549,2.56988448 L16.8591336,0.369711191 C16.9374224,0.224050542 16.909574,0.112353791 16.7753357,0.0338122744 C16.6296245,-0.0339133574 16.5176751,0.00040433213 16.4394368,0.13433935 L15.2300794,2.35210108 C14.1659278,1.88161011 13.0404188,1.64593502 11.8535523,1.64593502 C10.6664332,1.64593502 9.5408231,1.88166065 8.47707581,2.35210108 L7.26766787,0.13433935 C7.18907581,0.00040433213 7.07712635,-0.0336101083 6.93176895,0.0338122744 C6.79722744,0.112707581 6.76937906,0.224050542 6.84797112,0.369711191 L8.04070036,2.56988448 C6.83129242,3.1866426 5.8680722,4.04559567 5.1513935,5.14861372 C4.4347148,6.25223827 4.07622383,7.45825993 4.07622383,8.76880144 L19.614,8.76880144 C19.614,7.45856318 19.2554585,6.25249097 18.5388303,5.14861372 C17.8221011,4.04559567 16.8644404,3.1866426 15.6664549,2.56988448 Z M8.77092419,5.7700722 C8.64194224,5.8993574 8.4878917,5.96369675 8.3088231,5.96369675 C8.12940072,5.96369675 7.97848375,5.8993574 7.85536462,5.7700722 C7.73224549,5.6413935 7.67068592,5.48794946 7.67068592,5.30827437 C7.67068592,5.12920578 7.73224549,4.97545848 7.85536462,4.84647653 C7.97848375,4.71779783 8.12975451,4.65345848 8.3088231,4.65345848 C8.4878917,4.65345848 8.64194224,4.71779783 8.77092419,4.84647653 C8.89960289,4.97576173 8.96424549,5.12920578 8.96424549,5.30827437 C8.9638917,5.48764621 8.89929964,5.6413935 8.77092419,5.7700722 Z M15.851083,5.7700722 C15.7277112,5.8993574 15.5764404,5.96369675 15.3976751,5.96369675 C15.2182022,5.96369675 15.0642022,5.8993574 14.9354729,5.7700722 C14.8065415,5.6413935 14.7422022,5.48794946 14.7422022,5.30827437 C14.7422022,5.12920578 14.8065415,4.97545848 14.9354729,4.84647653 C15.0642022,4.71779783 15.2182022,4.65345848 15.3976751,4.65345848 C15.5767437,4.65345848 15.7276606,4.71779783 15.851083,4.84647653 C15.9743032,4.97576173 16.0357617,5.12920578 16.0357617,5.30827437 C16.0357617,5.48764621 15.9742527,5.6413935 15.851083,5.7700722 Z" id="Shape"></path>
|
||||
<path d="M4.14293863,20.560491 C4.14293863,21.0761155 4.32200722,21.5125921 4.68019495,21.8707798 C5.03868592,22.2289675 5.47516245,22.4080361 5.99043321,22.4080361 L7.23355235,22.4080361 L7.25058484,26.2215957 C7.25058484,26.7031552 7.4185343,27.1120866 7.75443321,27.4480361 C8.09033213,27.7839856 8.49370397,27.951935 8.96384116,27.951935 C9.44514801,27.951935 9.85402888,27.7839856 10.1899783,27.4480361 C10.5259278,27.1120866 10.6938773,26.7032058 10.6938773,26.2215957 L10.6938773,22.4083899 L13.0119134,22.4083899 L13.0119134,26.2215957 C13.0119134,26.7031552 13.1798123,27.1120866 13.5157617,27.4480361 C13.8517112,27.7839856 14.2602383,27.951935 14.7418989,27.951935 C15.2232058,27.951935 15.6320866,27.7839856 15.9680361,27.4480361 C16.3039856,27.1120866 16.4718845,26.7032058 16.4718845,26.2215957 L16.4718845,22.4083899 L17.7317834,22.4083899 C18.2356318,22.4083899 18.6664982,22.2292708 19.025343,21.871083 C19.3834801,21.5128953 19.5626498,21.0764188 19.5626498,20.5608448 L19.5626498,9.37292419 L4.14293863,9.37292419 L4.14293863,20.560491 Z" id="Path"></path>
|
||||
<path d="M21.948917,9.05405776 C21.478426,9.05405776 21.0754079,9.21953069 20.7394585,9.54956679 C20.4035596,9.88020939 20.2356101,10.286361 20.2356101,10.7673141 L20.2356101,17.9904043 C20.2356101,18.4726209 20.403509,18.8808953 20.7394585,19.2168448 C21.0754079,19.5527942 21.4787292,19.7207437 21.948917,19.7207437 C22.4302238,19.7207437 22.8391047,19.5527942 23.1750542,19.2168448 C23.5110036,18.8808953 23.6789025,18.4726209 23.6789025,17.9904043 L23.6789025,10.7673141 C23.6789025,10.2863105 23.5110036,9.88020939 23.1750542,9.54956679 C22.8391047,9.21953069 22.4302238,9.05405776 21.948917,9.05405776 Z" id="Path"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<h6 class="name">Android</h6>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="footer_header">
|
||||
<h3 class="title">Developer digest</h3>
|
||||
<p>Stay up to date with the latest from Adyen’s API and developer products: <br> <a href="" class="text-hover">Subscribe to the Adyen Developer Digest</a>, and read recent issues on <a href="" class="text-hover">dev.to</a></p>
|
||||
</div>
|
||||
<div class="footer_links dis-flex">
|
||||
<a href="" class="footer_links_item">
|
||||
Twitter
|
||||
</a>
|
||||
<a href="" class="footer_links_item">
|
||||
Developer newsletter
|
||||
</a>
|
||||
<a href="" class="footer_links_item">
|
||||
Stack Overflow
|
||||
</a>
|
||||
<a href="" class="footer_links_item">
|
||||
Support
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
8
main.js
Normal file
8
main.js
Normal file
@@ -0,0 +1,8 @@
|
||||
/*===== MENU TOGGLE =====*/
|
||||
const navList = document.querySelector('.nav');
|
||||
const toggleMenu = document.querySelector('.hamburger');
|
||||
|
||||
toggleMenu.addEventListener('click', () => {
|
||||
navList.classList.toggle('open-menu');
|
||||
toggleMenu.classList.toggle('open-menu');
|
||||
});
|
||||
Reference in New Issue
Block a user